/* hinh-anh.css — TRANG HÌNH ẢNH (lớp học / sự kiện). Dùng chung biến bien.css. */

.hep{max-width:var(--cot-chu);margin:0 auto;width:100%}
/* Đồng bộ bề rộng theo TRANG CHỦ: PC 100% (≤1500px) = 1050px (chỉ trong .noi-dung, không đụng header/footer) */
@media(min-width:981px) and (max-width:1500px){ .noi-dung .khung{max-width:1050px} }
.phan{padding:var(--nhip) 0}
/* Section nhấn = VẢI HỒNG linen + may mí cam (hệ vải trang chủ) */
.phan.nen{
  position:relative;
  background-color:#F2E2D6;
  background-image:
    url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='200'%20height='200'%3E%3Cfilter%20id='n6'%3E%3CfeTurbulence%20type='fractalNoise'%20baseFrequency='0.85'%20numOctaves='2'%20seed='7'%20stitchTiles='stitch'/%3E%3CfeColorMatrix%20type='saturate'%20values='0'/%3E%3C/filter%3E%3Crect%20width='100%25'%20height='100%25'%20filter='url(%23n6)'%20opacity='0.19'/%3E%3C/svg%3E"),
    repeating-linear-gradient(63deg,rgba(155,105,85,.06) 0 1px,transparent 1px 4px),
    radial-gradient(120% 90% at 50% 0%,rgba(255,251,247,.55),transparent 55%),
    radial-gradient(150% 110% at 50% 118%,rgba(130,85,65,.12),transparent 58%);
  background-blend-mode:soft-light,normal,normal,normal}
.phan.nen::before{
  content:'';position:absolute;left:26px;right:26px;top:6px;height:5px;z-index:4;pointer-events:none;
  background-image:var(--may-mi);background-repeat:repeat-x;background-position:left center}
@media(max-width:760px){.phan.nen::before{left:16px;right:16px}}
h2{font-family:var(--font-tieu-de);font-size:clamp(22px,3.1vw,33px);font-weight:600;line-height:1.28;margin-bottom:22px;display:flex;align-items:baseline;gap:12px}
/* ══ Ô SỐ — CHỮ SỐ CAO ĐÚNG BẰNG CHỮ HOA (sửa lần 2, 19/08/2026) ═══════════
   Lần 1 em hiểu hụt: chỉ làm HỘP cao 24px bằng chữ hoa, còn CHỮ SỐ giữ nguyên
   .44em nên chỉ cao 11px — bằng 46% chữ hoa. Hộp to ra mà bên trong toàn
   khoảng trống, mắt bám vào CHỮ SỐ chứ không bám vào đường viền, nên anh Hưng
   xem vẫn thấy y như cũ. Lần này phóng chính chữ số.

   ĐO PHÔNG CHỮ SỐ (Montserrat) — tỉ lệ mực khác hẳn phông tiêu đề:
     Montserrat        mực chữ số = 0,720 × cỡ chữ
     Playfair Display  mực chữ hoa = 0,727 × cỡ chữ
   Muốn chữ số cao bằng chữ hoa:  0,727 / 0,720 = 1,01em của tiêu đề.
   Đúng vậy — cỡ chữ số gần bằng cỡ chữ tiêu đề, dù nhìn thì nhỏ hơn nhiều.
   Đây là lý do đoán bằng mắt luôn sai: hai phông có tỉ lệ mực khác nhau.

   ĐO LẠI SAU KHI SỬA (tiêu đề 33px):
     chữ hoa H      24,0px
     chữ số 03      24,0px   = 100% chữ hoa      (cũ 11,0px = 46%)
     hộp            34 × 60px                    (cũ 24 × 40px)

   letter-spacing .16em → .07em: khoảng cách chữ tính theo em nên khi phóng
   cỡ chữ lên 2,3 lần thì khe giữa "0" và "3" cũng giãn từ 2,3px lên 5,3px,
   nhìn rời rạc. .07em giữ lại đúng khe 2,3px như bản cũ.

   padding đổi từ 9px sang .27em: để lề trong co giãn theo cỡ chữ, không bị
   bóp lại khi tiêu đề nhỏ đi trên điện thoại.

   top .16em: hộp nay CAO HƠN chữ hoa (34 so với 24) nên căn theo TÂM — tâm
   hộp trùng tâm chữ hoa. Đo được cần dịch xuống 5,34px = 0,16em.

   ĐÃ BỎ luật đổi cỡ ở khổ ≤760px của khoa-hoc.css: luật đó ép về .5em, tức
   là kéo ngược ô số về nhỏ đúng như cũ. Nay mọi thứ tính bằng em nên tiêu đề
   co xuống 21px thì ô số tự co theo đúng tỉ lệ, không cần luật riêng.

   position/top thay vì margin hay transform: KHÔNG đụng bố cục và KHÔNG đụng
   hiệu ứng hiện (hiệu ứng đó dùng scale/rotate riêng).
   inline-flex + align-items:center để chữ số nằm giữa hộp; cố ý KHÔNG khai
   justify-content để chữ chảy tự nhiên như bản gốc. */
h2 .so{font-family:var(--font-noi-dung);font-size:.9em;letter-spacing:.07em;color:var(--cam-tram);font-weight:700;flex:none;
  height:1.2em;line-height:1;padding:0 .36em;display:inline-flex;align-items:center;
  position:relative;top:.14em;
  border:1.2px dashed rgba(194,92,62,.6);border-radius:4px;background:rgba(210,105,74,.07);transform:rotate(-2deg)}
.dan-mo{max-width:72ch;color:var(--chu-phu)}

/* BÌA */
/* Dải .dai của tab này đo được 52px (thấp hơn .stats 63px của trang chủ),
   nên khai lại để bìa cao thêm đúng phần chênh — không thì hở chân màn hình.
   55 = 52 + 3, xem giải thích ở --cao-dai-bia trong bien.css. */
:root{--cao-dai-bia:55px;--cao-dai-dt:91px}   /* dải .dai trên điện thoại đo được 89px, +2 dư */
.bia{position:relative;min-height:clamp(380px,54vh,480px);display:grid;align-items:end;justify-items:center;text-align:center;overflow:hidden;isolation:isolate;background:var(--nau-am)}
@media(min-width:761px){.bia{min-height:var(--bia-vua-man)}}  /* PC: nâng bìa lên 500px (giữ nguyên mobile) */
.bia img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:saturate(.80) contrast(1.02);z-index:-2}
.bia::after{content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(to top,rgba(31,28,25,.9),rgba(31,28,25,.66) 20%,rgba(31,28,25,.3) 42%,transparent 62%)}
.bia .noi{padding:0 22px 20px}
.bia .eyebrow{font-size:11.5px;letter-spacing:.34em;text-transform:uppercase;color:var(--chu-phu-toi);margin-bottom:14px;font-weight:500}
.bia h1{text-wrap:balance;font-family:var(--font-bia);font-weight:600;color:#fff;font-size:clamp(25px,4.7vw,43px);line-height:1.14;letter-spacing:.01em;text-shadow:0 2px 22px rgba(31,28,25,.55);max-width:21em;margin:0 auto}
/* Câu dẫn dưới tiêu đề bìa: chia đều hai dòng thay vì nhồi đầy dòng trên rồi
   quăng phần thừa xuống. Đo thấy trước khi sửa:
     "…thành phẩm / tại Luvinus."      dòng dưới còn 2 chữ
     "…sự kiện tại / Luvinus."          dòng dưới còn 1 chữ
   balance chia đều số chữ nên chỗ ngắt rơi vào khe tự nhiên giữa hai cụm. */
/* ══ CÂU DẪN BÌA: MỘT DÒNG TRÊN PC (sửa 19/08/2026) ════════════════════════
   Anh Hưng: hai dòng nhìn cụt xấu, muốn xuống dòng hợp lý.

   VÌ SAO KHÔNG CHIA ĐÔI CHO ĐỀU ĐƯỢC: câu này gồm BA VẾ ngăn bằng dấu ·
       "Không khí lớp học cắt may"   25 ký tự
       "học viên thực hành"          18
       "thành phẩm tại Luvinus."     23
   Cắt ở vế 1 → 25/47. Cắt ở vế 2 → 45/23. Không mối nối nào cho hai dòng
   bằng nhau. Muốn đều thì phải cắt GIỮA một vế ("học viên / thực hành") —
   chữ đều nhưng ý bị đứt, đọc ra càng cụt.

   Nên bỏ hẳn chuyện hai dòng: để nguyên MỘT dòng trên máy tính. Đo được câu
   cần 571px mà chỗ chặn cũ 48ch chỉ cho 493px — thiếu 78px, ép nó xuống dòng
   một cách vô cớ. Nới lên 38em (589px ở cỡ 15,5px) là vừa đủ, còn dư 18px.

   Trên điện thoại 38em vượt bề ngang màn nên khung mẹ chặn lại, câu tự xuống
   dòng như thường — vẫn có text-wrap:balance và dấu · đã buộc nên chia gọn. */
.bia .phu{text-wrap:balance;color:var(--chu-phu-toi);font-size:clamp(13px,1.6vw,15.5px);margin:14px auto 0;max-width:38em;line-height:1.6}
.bia .gach{width:52px;height:2px;background:var(--cta);margin:16px auto 0;border-radius:2px}
@media(max-width:560px){.bia{min-height:clamp(300px,48vh,380px)}.bia h1{font-size:clamp(26px,5.4vw,44px)}.bia .noi{padding:0 16px 20px}}

/* Dải thông tin */
.dai{background:var(--chan-trang)}
.dai .khung{display:flex;justify-content:center;flex-wrap:wrap;gap:10px 34px;padding:14px 22px;font-size:13.5px;font-weight:500;color:var(--kem)}
.dai span{display:flex;align-items:center;gap:8px}
.dai span svg{width:15px;height:15px;flex:none;color:var(--cam-sang)}

/* Chuyển mục */
.chuyen-muc{display:flex;justify-content:center;flex-wrap:wrap;gap:10px;margin:0 0 26px}
/* Thẻ chuyên mục = DA THUỘC nâu sậm + chỉ may kem + nút tán (giống chip Góc chia sẻ) */
.chuyen-muc a{display:inline-flex;align-items:center;justify-content:center;gap:10px;height:44px;min-width:136px;padding:0 24px 0 18px;border:1px solid #3A2A1E;border-radius:8px 22px 22px 8px;
  background-color:#4A3728;
  background-image:
    url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='140'%20height='140'%3E%3Cfilter%20id='d'%3E%3CfeTurbulence%20type='fractalNoise'%20baseFrequency='0.8'%20numOctaves='4'%20seed='11'%20stitchTiles='stitch'/%3E%3CfeColorMatrix%20type='saturate'%20values='0'/%3E%3C/filter%3E%3Crect%20width='100%25'%20height='100%25'%20filter='url(%23d)'/%3E%3C/svg%3E"),
    linear-gradient(180deg,rgba(255,255,255,.18),rgba(255,255,255,0) 45%,rgba(0,0,0,.18));
  background-blend-mode:soft-light,normal;
  color:#F5E9D4;font-family:var(--font-tieu-de);font-size:14.5px;font-weight:600;letter-spacing:.02em;text-decoration:none;
  outline:1px dashed rgba(236,213,170,.7);outline-offset:-3.5px;
  box-shadow:0 4px 10px rgba(58,46,34,.3),inset 0 1px 0 rgba(255,255,255,.16);
  transition:.2s cubic-bezier(.2,.7,.3,1)}
.chuyen-muc a::before{content:'';width:10px;height:10px;border-radius:50%;background:#F6EFE3;box-shadow:0 0 0 2.5px #B98A32;flex:none}
.chuyen-muc a:hover{transform:translateY(-2px);outline-color:rgba(236,213,170,.85);box-shadow:0 8px 18px rgba(58,46,34,.36),inset 0 1px 0 rgba(255,255,255,.16)}
.chuyen-muc a[aria-current]{border-color:#8F3E28;background-color:#9C4228;color:#fff;
  text-shadow:0 1px 1px rgba(74,27,12,.25);
  outline-color:rgba(255,236,200,.75);
  box-shadow:0 6px 16px rgba(194,92,62,.45),inset 0 1px 0 rgba(255,255,255,.22)}
.chuyen-muc a[aria-current]::before{background:#FFF3DE;box-shadow:0 0 0 2.5px #8F3E28}

/* LƯỚI ẢNH */
.luoi{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.the-anh{position:relative;display:block;width:100%;margin:0;padding:0;background:var(--kem);cursor:zoom-in;border:4px solid var(--trang);border-radius:12px;overflow:hidden;box-shadow:var(--bong-nhe);aspect-ratio:4/3;transition:transform .2s, box-shadow .2s}
.the-anh img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s ease}
.the-anh .phu-anh{position:absolute;inset:auto 0 0 0;display:flex;align-items:flex-end;gap:8px;padding:34px 14px 12px;background:linear-gradient(180deg,transparent,rgba(31,28,25,.72));opacity:0;transform:translateY(8px);transition:.22s}
.the-anh .nhan{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#fff;background:var(--cta);border-radius:999px;padding:4px 11px;white-space:nowrap}
.the-anh:hover,.the-anh:focus-visible{transform:translateY(-3px);box-shadow:var(--bong);outline:none;z-index:1}
.the-anh:hover img,.the-anh:focus-visible img{transform:scale(1.06)}
.the-anh:hover .phu-anh,.the-anh:focus-visible .phu-anh{opacity:1;transform:none}
.the-anh:focus-visible{border-color:var(--cam-sang)}
@media(max-width:900px){.luoi{grid-template-columns:repeat(2,1fr);gap:12px}}
@media(max-width:640px){.luoi{grid-template-columns:repeat(2,1fr);gap:8px}.the-anh{border-width:3px;border-radius:9px}}

/* LIGHTBOX ẢNH */
.lb{position:fixed;inset:0;z-index:120;display:none;place-items:center;background:rgba(24,20,16,.92);padding:calc(env(safe-area-inset-top) + 18px) 16px calc(env(safe-area-inset-bottom) + 18px)}
.lb.mo{display:grid}
.lb-hinh{max-width:min(1120px,94vw);max-height:82vh;display:flex;flex-direction:column;align-items:center;gap:12px}
.lb-hinh img{max-width:100%;max-height:74vh;width:auto;height:auto;border-radius:8px;box-shadow:0 30px 80px rgba(0,0,0,.5);background:var(--nau-am)}
.lb-caption{color:var(--kem);font-size:13.5px;text-align:center;line-height:1.5;max-width:60ch}
.lb-caption .nhan{display:inline-block;font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#fff;background:var(--cta);border-radius:999px;padding:3px 10px;margin-right:8px}
.lb-dem{color:var(--chu-phu-toi);font-size:12px;letter-spacing:.08em}
.lb button{position:absolute;border:0;cursor:pointer;background:rgba(247,235,220,.14);color:#fff;display:grid;place-items:center;transition:.16s}
.lb button:hover{background:var(--cta)}
.lb .dong{top:16px;right:16px;width:46px;height:46px;border-radius:50%}
.lb .dong svg,.lb .dieu svg{width:22px;height:22px}
.lb .dieu{top:50%;transform:translateY(-50%);width:52px;height:52px;border-radius:50%}
.lb .truoc{left:16px}.lb .sau{right:16px}
@media(max-width:640px){.lb .dieu{width:44px;height:44px}.lb .truoc{left:8px}.lb .sau{right:8px}.lb .dong{width:42px;height:42px;top:10px;right:10px}.lb-hinh img{max-height:68vh}}

/* FORM (nền nâu) — bọc form-dang-ky */
.form-chinh{background:var(--nau-am);border-radius:10px;padding:36px 34px;box-shadow:var(--bong)}
.form-chinh .luv-form{max-width:none}
.form-chinh .luv-form__tieu-de,.form-chinh h2{text-align:center;justify-content:center;color:var(--kem)}
.form-chinh .luv-form__mo-ta{color:var(--chu-phu-toi);text-align:center}
.form-chinh .luv-form__hang{flex-direction:column;align-items:stretch}
.form-chinh .luv-inp{width:100%;flex-basis:auto;background:rgba(255,255,255,.95)}
.form-chinh .nut-dk{width:100%}

/* FAQ */
.faq{border-top:1px solid var(--vien);max-width:720px}
.faq details{border-bottom:1px solid var(--vien)}
.faq summary{padding:13px 0;cursor:pointer;list-style:none;font-weight:600;font-size:14.5px;display:flex;gap:10px;align-items:center;line-height:1.35}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--cam-tram)}
.faq .mui{margin-left:auto;flex:none;transition:transform .22s;color:var(--chu-phu);width:14px;height:14px}
.faq details[open] .mui{transform:rotate(45deg)}
.faq .tl{padding:0 0 14px 0;color:var(--chu-phu);font-size:14px;line-height:1.65}
.faq .tl a{color:var(--cam-tram);text-decoration:underline;text-underline-offset:2px}

/* Khám phá thêm */
.xemthem{text-align:center}
.xt-title{display:flex;align-items:center;justify-content:center;gap:14px;margin-bottom:14px}
.xt-title::before,.xt-title::after{content:'';width:46px;height:2px;background:var(--chi-cam)}
.xt-title span{font-family:var(--font-tieu-de);font-size:15px;font-weight:600;color:var(--nau-am);letter-spacing:.06em;text-transform:uppercase}
.xt-luoi{display:inline-flex;flex-wrap:wrap;justify-content:center;align-items:baseline;gap:6px 20px}
.xt-item{display:inline-flex;align-items:baseline;gap:7px;padding:3px 2px;font-size:14.5px;font-weight:600;color:var(--nau-am);text-decoration:none;transition:.18s}
.xt-item .no{font-family:var(--font-tieu-de);font-size:12px;font-weight:700;color:var(--cam-tram)}
.xt-item:hover{color:var(--cta-dam)}

@media(max-width:640px){:root{--nhip:34px}.form-chinh{padding:24px 18px}h2{margin-bottom:16px}.dai .khung{padding:11px 16px;gap:7px 18px;font-size:12.5px}.chuyen-muc{margin-bottom:18px}.xt-title::before,.xt-title::after{width:30px}}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}

/* Tiêu đề form "Đăng kí học thử miễn phí" — cỡ chữ CO GIÃN theo bề ngang máy.
   PC giữ nguyên 22px; máy hẹp tự nhỏ dần cho vừa một dòng.
     máy 320px → ~16,6px · máy 360px → ~18,7px   ·   máy 390px → ~20,3px   ·   từ 423px trở lên → 22px */
.form-chinh .luv-form__tieu-de{font-size:clamp(16px,5.2vw,22px)}

/* ╔═════════════════════════════════════════════════════════════════════════╗
   ║  LƯỚI ẢNH — VẢI TAN                                   19/08/2026        ║
   ╚═════════════════════════════════════════════════════════════════════════╝
   Anh Hưng: "anh đang muốn hiệu ứng nó trơn mượt vì cả web đang cùng cách
   làm, em cho anh phương án nào phù hợp tối ưu nhất cho trải nghiệm xem".

   CÁCH CHẠY: tấm vải nâu tweed phủ kín ô, đứng yên một nhịp rồi TAN DẦN
   trong lúc được nhấc nhẹ về phía người xem. Tấm ảnh phía sau ĐỨNG YÊN HOÀN
   TOÀN — hiện ra sắc nét, không zoom, không trôi, không nghiêng.

   ── VÌ SAO CHỌN KIỂU NÀY, SAU KHI ĐÃ THỬ 8 KIỂU ──

   ① MỘT CHUYỂN ĐỘNG, KHÔNG PHẢI HAI.
     Anh đã bắt đúng bệnh hai lần: "zoom phía sau trùng vào lúc vải bung nên
     không cảm nhận được". Gốc bệnh không nằm ở chỉnh giờ — nằm ở chỗ CÓ HAI
     việc cùng diễn ra một chỗ. Chỉnh giờ chỉ đẩy chúng ra xa nhau, còn bỏ
     hẳn một cái thì bệnh biến mất và không quay lại. Nay chỉ còn tấm vải
     chuyển động, ảnh bất động.

   ② ĐÂY LÀ TRANG ẢNH — NHÂN VẬT CHÍNH LÀ TẤM ẢNH.
     Trang sự kiện có 80 ảnh, lúc nào cũng 6–9 ô cùng mở. Động tác càng
     mạnh thì mắt càng bị kéo đi xem hiệu ứng thay vì xem ảnh. Kiểu tan là
     kiểu duy nhất KHÔNG tranh phần với ảnh.

   ③ RẺ NHẤT CÓ THỂ, ĐÚNG CHỖ CẦN RẺ NHẤT.
     Máy anh (8GB RAM) khựng khi nhiều ô cùng chạy. Độ mờ và phép phóng là
     hai thứ duy nhất card màn hình lo trọn gói, KHÔNG bắt máy vẽ lại khung
     hình. Bản co về tâm còn phải vẽ lại vì hoạ tiết bị nén; bản này thì
     không. Số ô cùng chạy có 9 hay 30 cũng vậy.

   ④ HẾT SẠCH BỆNH NHIỄU.
     Kiểu co nén sợi dệt xuống dưới 2px thì sinh rung moiré — phải chỉnh né.
     Phóng ra thì sợi giãn ra, không đời nào rung. Không còn gì phải né.

   ⑤ VẪN ĐÚNG NGÔN NGỮ CỦA WEB.
     Vẫn tấm vải tweed nâu #2F2317 y hệt rèm các tab khác, vẫn sợi dệt đó,
     vẫn ánh sáng trên mặt vải đó. Chỉ khác cách rời đi: các tab kéo sang
     bên, trang này tan tại chỗ. Cùng chất liệu, khác động tác — nên đồng bộ
     mà không nhàm.

   ⑥ THỨ THẬT SỰ ĐẸP Ở ĐÂY LÀ ĐỢT SÓNG, KHÔNG PHẢI TỪNG Ô.
     luvinus.js nhả từng ô cách nhau 26–85ms. Khi mỗi ô làm một động tác
     to, 9 ô so le đọc ra thành 9 màn diễn rời rạc. Khi mỗi ô chỉ tan nhẹ,
     9 ô so le đọc ra thành MỘT ĐỢT SÓNG mềm quét chéo qua lưới. Chính chỗ
     đó mới sang, và nó chỉ hiện ra khi từng ô chịu khiêm tốn lại.

   ── SỐ LIỆU (khổ máy tính / điện thoại) ──
     vải đứng yên   0     → 0,23s / 0,28s    ảnh kịp hiện dưới lớp che kín
     vệt sáng quét  0,13  → 0,75s / 0,90s    khoảnh khắc để nhớ
     vải tan        0,23  → 1,30s / 1,56s    đuôi lắng lại, không cắt
     ảnh            đứng yên suốt

   KHÔNG cần so le trong CSS — luvinus.js đã lo. TẤM VẢI chỉ dựng cho ô đang
   mở, JS gỡ sau 1750ms (dài hơn 1,56s một khoảng dư an toàn). */

/* NỀN Ô = TẤM VẢI. Đây là thứ khách thấy trước khi tới lượt.
   Chỉ dùng sợi dệt, KHÔNG dùng bộ lọc nhiễu SVG: đo được bộ lọc chỉ thêm
   0,22 nhấp nhô trên thang 255 (mắt không thấy) mà phải tính lại mỗi lần vẽ.
   Sợi dệt .10/.08 cho nhấp nhô 10,7 — vân rõ gấp đôi công thức cũ, rẻ hơn. */
html.js-on .luoi.anh-mo .the-anh{
  background-color:#2F2317;
  background-image:
    repeating-linear-gradient(0deg,rgba(255,240,220,.10) 0 1px,transparent 1px 4px),
    repeating-linear-gradient(90deg,rgba(255,240,220,.08) 0 1px,transparent 1px 4px)}

/* ══ ẢNH: HIỆN DƯỚI LỚP CHE, RỒI ĐỨNG YÊN ═════════════════════════════════
   Không zoom, không scale, không nghiêng — xem lý do ① ở đầu khối.

   0,24s là con số duy nhất phải canh: nó phải NGẮN HƠN quãng vải đứng yên
   (0,23s máy tính / 0,28s điện thoại) để ảnh hiện xong lúc còn bị che kín.
   Nếu để dài hơn, ảnh sẽ mờ dần xuyên qua tấm vải đang mờ dần — hai lớp mờ
   chồng nhau cho ra màu đục, đúng thứ trước đây anh gọi là "như vết bẩn".

   Vì sao không để hiện tức thì luôn: khi khách lướt rất nhanh, ô vượt trần
   30 tấm vải sẽ bỏ tấm vải và hiện thẳng — lúc đó 0,24s này là thứ duy nhất
   đỡ cho ảnh khỏi "bụp" ra đột ngột.

   Chỉ khai opacity trong transition, KHÔNG khai transform: để dành nguyên
   thuộc tính transform cho nhịp phóng to khi trỏ chuột (.5s ease). */
html.js-on .luoi.anh-mo .the-anh img{
  opacity:0;
  transition:opacity .24s ease,transform .5s ease}
html.js-on .luoi.anh-mo .the-anh img.da-tai{opacity:1}
html.js-on .luoi.anh-mo .the-anh img.hien-thang{transition:none !important}

/* ── TẤM VẢI TAN ─────────────────────────────────────────────────────────
   Dùng @keyframes chứ không transition: tấm vải chỉ TỒN TẠI trong lúc chạy
   (lớp .dang-mo), nên nó cần tự mang trạng thái đầu — transition không làm
   được việc đó với phần tử vừa mới sinh ra.

   HAI NHỊP CHẠY SONG SONG, CỐ Ý TÁCH RA:
     độ mờ  → linear   vì tan là phải tan ĐỀU TAY. Cho nhịp cong vào đây thì
                       vải biến mất gần hết ở nửa đầu, nửa sau chỉ còn một
                       màng gần như trong suốt kéo lê — đọc ra thành ì ạch.
     phóng  → cong     vì nhấc lên là động tác vật lý, phải có đà rồi lắng.
   Hai thuộc tính khác nhau nên hai nhịp chồng lên nhau vô tư, không đụng. */
html.js-on .luoi.anh-mo .the-anh.dang-mo::after{
  content:'';position:absolute;inset:0;z-index:1;pointer-events:none;
  background-color:#2F2317;
  background-image:
    /* ÁNH SÁNG TRÊN MẶT VẢI. Sợi dệt lặp đều 6px nên lúc phóng to mắt không
       bám được vào sợi thứ mấy; vệt sáng này là mảng KHÔNG LẶP duy nhất,
       giãn ra là thấy ngay — nó chính là thứ cho biết vải đang được nhấc
       lên chứ không phải chỉ mờ đi tại chỗ. */
    radial-gradient(56% 56% at 50% 46%,rgba(255,232,200,.28),transparent 72%),
    repeating-linear-gradient(0deg,rgba(255,240,220,.13) 0 1px,transparent 1px 6px),
    repeating-linear-gradient(90deg,rgba(255,240,220,.10) 0 1px,transparent 1px 6px);
  animation:anhVaiTan  calc(var(--rem-ngan) * 1.3) linear                  both,
            anhVaiNhac calc(var(--rem-ngan) * 1.3) cubic-bezier(.3,.62,.25,1) both}

/* Đứng yên hết 18% đầu rồi mới tan. Nhịp đứng này làm hai việc: cho ảnh phía
   sau kịp hiện dưới lớp che kín, và cho động tác một khoảnh khắc lấy đà —
   tan ngay từ khung hình đầu tiên thì đọc ra thành giật mình.

   BỐN MỐC CHỨ KHÔNG PHẢI ĐƯỜNG THẲNG (sửa 19/08). Tan đều tuyệt đối thì
   đoạn cuối là một mảng mờ biến mất đúng lúc nó đang mờ nhất — mắt đọc ra
   thành CẮT, không phải TAN. Bốn mốc dưới đây cho tốc độ tan nhanh dần ở
   giữa rồi CHẬM HẲN LẠI Ở ĐUÔI:
       18→55%  mất 0,48 độ mờ trong 37% thời gian   (1,30 mỗi phần)
       55→82%  mất 0,38 trong 27%                   (1,41 — nhanh nhất)
       82→100% mất 0,14 trong 18%                   (0,78 — lắng lại)
   Cái đuôi chậm đó là thứ cho cảm giác tấm vải "tan hẳn vào không khí" chứ
   không phải bị tắt. */
@keyframes anhVaiTan{
  0%  {opacity:1}
  18% {opacity:1}
  55% {opacity:.52}
  82% {opacity:.14}
  100%{opacity:0}}

/* Nhấc 8% + trôi chéo 1,6% CÙNG CHIỀU với vệt sáng bên dưới. Cái trôi này
   nhỏ xíu nhưng là thứ buộc hai lớp thành MỘT động tác: ánh sáng quét qua,
   rồi tấm vải trôi theo đúng hướng đó mà đi. Không có nó thì hai lớp làm
   hai việc rời nhau.

   Vì sao trôi tính bằng % chứ không px: ở tỉ lệ 1,08 tấm vải thừa ra 4% mỗi
   bên, nên trôi 1,6% vẫn còn 2,4% dư — mép ô KHÔNG BAO GIỜ hở ra sớm. Nếu
   viết 7px thì ô mobile 2 cột (rộng ~170px) chỉ dư 6,8px, trôi 7px là hở. */
@keyframes anhVaiNhac{
  0%  {transform:translate3d(0,0,0)          scale(1)}
  100%{transform:translate3d(1.6%,-1.2%,0)   scale(1.08)}}

/* ══ VỆT SÁNG QUÉT QUA MẶT VẢI — thêm 19/08/2026 ═══════════════════════════
   Anh Hưng: "làm sao mượt hơn và trải nghiệm wao".

   BẢN TAN TRƯỚC THIẾU ĐÚNG MỘT THỨ: một khoảnh khắc để nhớ. Nó êm, nó rẻ,
   nó không rối — nhưng từ đầu đến cuối KHÔNG CÓ GÌ XẢY RA, chỉ có một mảng
   nâu nhạt dần. Mắt không có gì để bám vào nên đọc ra thành "vừa rồi có gì
   nhỉ?". Đây chính là bệnh anh gọi là nhạt nhòa ở mục video.

   THỨ THÊM VÀO: một dải sáng nghiêng quét ngang mặt vải MỘT LẦN, đúng lúc
   vải còn dày. Đọc ra thành ánh đèn lướt trên mặt lụa lúc nó được nhấc lên.

   ── VÌ SAO NÓ KHÔNG LÀM RỐI 80 Ô ──
   Trước đây em luôn cảnh báo chuyển động ngang gây rối. Chính xác hơn: thứ
   gây rối là các vector CẮT NHAU. Ở đây MỌI Ô đều quét cùng một góc 105°,
   cùng một chiều, cùng một tốc độ — chúng SONG SONG. Cộng với việc web nhả
   ô cách nhau 26–85ms, cả lưới đọc ra thành MỘT MẶT SÓNG SÁNG đi chéo qua
   màn hình. Đây đúng là cách tủ kính cửa hàng cao cấp đánh đèn.

   ── VÌ SAO VỆT SÁNG PHẢI TẮT SỚM ──
   Nó chạy từ 10% đến 58% của cả động tác, lúc tấm vải vẫn còn ~0,48 độ mờ.
   Bắt buộc như vậy: để nó chạy muộn hơn thì tấm vải đã mỏng, dải sáng sẽ
   quét thẳng lên TẤM ẢNH — thành ra loá ảnh, đúng thứ trước đây anh chê là
   "như vết bẩn". Nó chỉ được phép xuất hiện KHI CÒN VẢI ĐỂ MÀ SÁNG.

   ── GIÁ PHẢI TRẢ, VÀ CÁCH ĐÃ TRẢ ──
   Mỗi ô nay mang 2 lớp thay vì 1. Nên em hạ trần số ô cùng chạy từ 30 xuống
   18 trong luvinus.js: 18 × 2 = 36 lớp, vẫn ít hơn mức 55 lớp đã đo là an
   toàn cho máy anh. Và 18 vẫn cao hơn số ô lọt trong màn hình (6–9), nên
   cuộn bình thường không bao giờ chạm trần. */
html.js-on .luoi.anh-mo .the-anh.dang-mo::before{
  content:'';position:absolute;inset:0;z-index:2;pointer-events:none;
  background-image:linear-gradient(105deg,
    transparent 30%,
    rgba(255,246,230,.13) 42%,
    rgba(255,250,238,.30) 50%,
    rgba(255,246,230,.13) 58%,
    transparent 70%);
  animation:anhVetSang calc(var(--rem-ngan) * .62) cubic-bezier(.4,.15,.45,1)
                       calc(var(--rem-ngan) * .13) both}

/* Vào và ra bằng độ mờ chứ không bằng vị trí: nếu để dải sáng chạy thẳng từ
   ngoài mép vào thì lúc nó chạm mép ô sẽ thấy một đường cắt. Mờ dần vào thì
   nó "hiện ra rồi tắt đi" — không có mép nào cả. */
@keyframes anhVetSang{
  0%  {opacity:0; transform:translate3d(-105%,0,0)}
  20% {opacity:1}
  74% {opacity:1}
  100%{opacity:0; transform:translate3d(105%,0,0)}}

@media(prefers-reduced-motion:reduce){
  html.js-on .luoi.anh-mo .the-anh img{
    opacity:1 !important;transition:none !important}
  html.js-on .luoi.anh-mo .the-anh.dang-mo::after,
  html.js-on .luoi.anh-mo .the-anh.dang-mo::before{display:none !important}}

/* Bìa cao gần full màn trên điện thoại — xem --bia-vua-man-dt ở bien.css.
   Dùng "body " để thắng mấy luật mobile khai sẵn trong tệp này (con số cứng
   hoặc tỉ lệ khung ảnh), khỏi phải đi sửa từng chỗ. */
@media(max-width:760px){
  body .bia{min-height:var(--bia-vua-man-dt)}
}