/* video.css — TRANG VIDEO. Dùng chung biến bien.css. */

.hep{max-width:var(--cot-rong);margin:0 auto;width:100%}
/* Đồng bộ bề rộng theo TRANG CHỦ: PC 100% = 1080px, zoom-out >1500 = 1240px (chỉ trong .noi-dung) */
@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:none;color:var(--chu-phu);margin-bottom:22px}

/* 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}
@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(.82) 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 .gach{width:52px;height:2px;background:var(--cta);margin:16px auto 0;border-radius:2px}
/* dùng --font-bia như mọi trang khác; trước đây khai nhầm --font-tieu-de
   nên đổi phông bìa toàn web mà hai trang này không đổi theo (sửa 19/08/2026) */
.bia h1{text-wrap:balance;font-family:var(--font-bia);font-weight:600;color:#fff;font-size:clamp(26px,5.4vw,44px);line-height:1.15;letter-spacing:.02em;text-transform:uppercase;max-width:21em;margin:0 auto;text-shadow:0 2px 22px rgba(31,28,25,.55)}
.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)}

/* BỘ LỌC CHIP */
.loc{display:flex;justify-content:center;flex-wrap:wrap;gap:10px;margin:0 0 26px}
/* Mobile: dải mác da chạy ngang vuốt được (giống chip Góc chia sẻ) */
@media(max-width:640px){
  .loc{flex-wrap:nowrap;justify-content:flex-start;overflow-x:auto;scrollbar-width:none;
    margin-left:-16px;margin-right:-16px;padding:2px 16px 8px}
  .loc::-webkit-scrollbar{display:none}
  .loc button{flex:none}
}
/* Nút lọc = DA THUỘC nâu sậm + chỉ may kem + nút tán (giống chip Góc chia sẻ) */
.loc button{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;cursor:pointer;
  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)}
.loc button::before{content:'';width:10px;height:10px;border-radius:50%;background:#F6EFE3;box-shadow:0 0 0 2.5px #B98A32;flex:none}
.loc button: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)}
.loc button[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)}
.loc button[aria-current]::before{background:#FFF3DE;box-shadow:0 0 0 2.5px #8F3E28}
.loc button .dem{font-size:11.5px;font-weight:700;opacity:.75}

/* LƯỚI VIDEO */
.luoi-v{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.the-video{position:relative;display:block;width:100%;margin:0;padding:0;background:var(--nau-am);cursor:pointer;border:0;border-radius:12px;overflow:hidden;box-shadow:var(--bong-nhe);text-align:left;font-family:inherit;transition:transform .2s, box-shadow .2s}
/* .khung-hinh là SPAN nên phải ép display:block thì aspect-ratio 16:9 mới có tác dụng */
.the-video .khung-hinh{display:block;position:relative;aspect-ratio:16/9;overflow:hidden;background:var(--nau-am)}
/* ép thumbnail LẤP ĐẦY khung 16:9 (kể cả thumb dọc/Shorts) — mọi thẻ đều kích thước chuẩn YouTube */
.the-video .khung-hinh img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.the-video img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s ease}
.the-video .phu-mo{position:absolute;inset:0;background:linear-gradient(180deg,rgba(31,28,25,.10) 0%,rgba(31,28,25,.05) 45%,rgba(31,28,25,.55) 100%);transition:.22s}
/* NÚT PLAY — căn giữa bằng inset+margin:auto, KHÔNG bằng transform.
   Trước đây căn bằng translate(-50%,-50%); hiệu ứng nảy lúc cuộn tới cũng
   ghi vào transform nên xoá mất lệnh căn, nút văng xuống phải nửa thân.
   Cách này không đụng transform, nên transform để dành cho chuyển động —
   không thể lệch lại lần nữa. */
.the-video .play{position:absolute;inset:0;margin:auto;width:60px;height:60px;border-radius:50%;background:rgba(210,105,74,.92);display:grid;place-items:center;box-shadow:0 8px 26px rgba(31,28,25,.42);transition:.2s}
.the-video .play svg{width:40%;height:40%;margin-left:5%;color:#fff}
.the-video .nhan{position:absolute;top:11px;left:11px;font-size:10.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:#fff;background:rgba(31,28,25,.62);border-radius:999px;padding:4px 11px;white-space:nowrap}
.the-video .ten{padding:13px 15px 15px;font-size:14px;font-weight:600;line-height:1.4;color:var(--chu-chinh);background:var(--trang);min-height:64px;display:flex;align-items:flex-start;overflow-wrap:anywhere;word-break:break-word}
.the-video:hover,.the-video:focus-visible{transform:translateY(-3px);box-shadow:var(--bong);outline:none;z-index:1}
.the-video:hover img{transform:scale(1.05)}
.the-video:hover .play{background:var(--cta);transform:scale(1.08)}
.the-video.an-loc{display:none}
@media(max-width:900px){.luoi-v{grid-template-columns:repeat(2,1fr);gap:16px 13px}.the-video .play{width:48px;height:48px}}

/* ══════════════ MOBILE — CÂN LẠI TỶ LỆ TRONG THẺ ══════════════
   Đo trên máy 375px: thẻ rộng 161px, ảnh 16:9 nên chỉ cao 91px. Ba thứ hỏng:
     · Nút play 46px = 51% chiều cao ảnh (bản PC chỉ 31%) → to lấn hết hình.
     · Nhãn ở góc trên rộng tới 120px/161px, CHẠY XUYÊN qua nút play —
       5/10 thẻ bị đè, lệch 67–73px.
     · Tên video 2–4 dòng tuỳ thẻ → thẻ cao 144px hoặc 178px, lệch hàng. */
@media(max-width:640px){
  .luoi-v{gap:16px 10px}

  /* Nhãn xuống ĐÁY ảnh: dưới đó không bao giờ gặp nút play, lại đúng chỗ lớp
     phủ tối nhất nên chữ nổi hơn. Chặn bề rộng + cắt đuôi để nhãn dài mấy
     cũng không nuốt hết thẻ. */
  .the-video .nhan{top:auto;bottom:8px;left:8px;right:8px;
    width:max-content;max-width:calc(100% - 16px);
    overflow:hidden;text-overflow:ellipsis;
    font-size:9.5px;padding:3px 8px;letter-spacing:.04em}

  /* Tên gói đúng 2 dòng: mọi thẻ cao BẰNG NHAU nên hàng lối thẳng.
     Tên đầy đủ vẫn hiện nguyên vẹn dưới video khi bấm mở. */
  .the-video .ten{padding:10px 10px 12px;font-size:12px;min-height:56px;
    display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;
    overflow:hidden}
}

/* Nút play co theo BỀ RỘNG THẺ, giữ đúng tỷ lệ của bản PC (60/339 ≈ 17,7%)
   ở mọi khổ màn. Đặt cuối để đè lên các mức px cố định phía trên — những
   mức đó là bản dự phòng cho trình duyệt cũ không hiểu đơn vị theo khung. */
@supports (container-type:inline-size){
  .the-video .khung-hinh{container-type:inline-size}
  .the-video .play{width:clamp(30px,17.7cqw,60px);height:clamp(30px,17.7cqw,60px)}
}

/* NÚT KÊNH */
.nut-kenh{display:inline-flex;align-items:center;gap:7px;background:transparent;color:var(--cta);border:1.5px solid var(--cta);padding:8px 18px;border-radius:999px;font-weight:700;font-size:11.5px;letter-spacing:.02em;text-transform:uppercase;text-decoration:none;transition:.18s;margin-top:22px}
.nut-kenh:hover{background:var(--cta);color:#fff;transform:translateY(-1px)}
.nut-kenh svg{flex:none;width:15px;height:15px}

/* nút Đăng ký kênh YouTube trên bìa (kính mờ) */
.bia .nut-yt{display:inline-flex;align-items:center;gap:9px;margin:20px auto 0;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.42);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);color:#fff;text-decoration:none;font-weight:700;font-size:12.5px;letter-spacing:.04em;text-transform:uppercase;padding:11px 20px;border-radius:999px;transition:.18s}
.bia .nut-yt:hover{background:var(--cta);border-color:var(--cta);transform:translateY(-1px)}
.bia .nut-yt svg{width:17px;height:17px;flex:none}

/* FAQ */
.faq{border-top:1px solid var(--vien)}
.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}

/* LIGHTBOX VIDEO */
.lbv{position:fixed;inset:0;z-index:120;display:none;place-items:center;background:rgba(20,16,13,.94);padding:calc(env(safe-area-inset-top) + 18px) 16px calc(env(safe-area-inset-bottom) + 18px)}
.lbv.mo{display:grid}
.lbv-hop{width:min(1040px,94vw);display:flex;flex-direction:column;gap:12px;align-items:center}
.lbv-khung{position:relative;width:100%;aspect-ratio:16/9;background:#000;border-radius:10px;overflow:hidden;box-shadow:0 30px 80px rgba(0,0,0,.55)}
.lbv-khung iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.lbv-cap{color:var(--kem);font-size:14px;text-align:center;line-height:1.5;max-width:70ch}
.lbv-cap .nhan{display:inline-block;font-size:10.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:#fff;background:var(--cta);border-radius:999px;padding:3px 10px;margin-right:8px}
.lbv-dem{color:var(--chu-phu-toi);font-size:12px;letter-spacing:.08em}
.lbv button{position:absolute;border:0;cursor:pointer;background:rgba(247,235,220,.14);color:#fff;display:grid;place-items:center;transition:.16s;z-index:2}
.lbv button:hover{background:var(--cta)}
.lbv .dong{top:16px;right:16px;width:46px;height:46px;border-radius:50%}
.lbv .dong svg,.lbv .dieu svg{width:22px;height:22px}
.lbv .dieu{top:50%;transform:translateY(-50%);width:52px;height:52px;border-radius:50%}
.lbv .truoc{left:16px}.lbv .sau{right:16px}
@media(max-width:640px){.lbv .dieu{width:44px;height:44px}.lbv .truoc{left:8px}.lbv .sau{right:8px}.lbv .dong{width:42px;height:42px;top:10px;right:10px}}

/* 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 h2{text-align:center;justify-content:center;color:var(--kem);margin-bottom:6px}
.form-chinh .luv-form{max-width:none}
.form-chinh .luv-form__tieu-de{color:var(--kem);text-align:center}
.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%}

/* 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:760px){:root{--nhip:44px} h2{font-size:21px} .form-chinh{padding:26px 18px}}


/* ╔═══════════════════════════════════════════════════════════════════════════╗
   ║  RÈM SÂN KHẤU CHO THẺ VIDEO — MỞ THEO TỪNG THẺ          18/08/2026        ║
   ╚═══════════════════════════════════════════════════════════════════════════╝
   Anh Hưng: "cả web còn mục này là hơi nhạt nhòa" → dựng rèm.
   Anh Hưng: "rèm đang mở đồng loạt, ko phải kéo đến đâu mở đến đó" → tách lượt.

   Đo trước khi sửa: mỗi thẻ chỉ mờ dần + trượt lên 15px trong 0,45s — hệ .nhip
   DÙNG CHUNG cho mọi trang, hiệu ứng chung chung nhất có thể, trong khi cả web
   nói bằng ngôn ngữ rèm vải tweed.

   VÌ SAO CHỌN RÈM: đây là video BÀI TRÌNH DIỄN TỐT NGHIỆP và BỘ SƯU TẬP — mở
   rèm là đúng nghĩa đen của thứ sắp diễn ra. Dùng lại đúng chất vải của thẻ
   khoá học trang chủ, bản đồ Liên hệ, ảnh trang khoá học.

   ══ VÌ SAO PHẢI TỰ LO LƯỢT, KHÔNG DÙNG ĐƯỢC HỆ CHUNG ═════════════════════
   Hệ .nhip gắn lớp vào CẢ LƯỚI rồi cho các con hiện so le. Hợp lý với nhóm
   NGẮN (3–4 mục nằm gọn một màn) nhưng lưới video cao gấp mấy màn hình: lưới
   vừa chạm tầm mắt là 10 thẻ nổ cùng lúc, kéo tới thẻ thứ 7–8 thì rèm đã mở
   xong từ lâu. Nay video.js gắn lớp .vid-hien cho TỪNG THẺ khi thẻ đó tới
   lượt, và mọi luật dưới đây bám vào .vid-hien chứ không bám .nhip.rvl-in.

   Ba lớp, xếp chồng thời gian cho động tác có đầu có đuôi. Mọi mốc buộc theo
   --rem-ngan chứ KHÔNG ghi số cứng, nên tự dài ra 20% trên điện thoại như mọi
   rèm khác của web:
     ① rèm mở hai bên    0 → 1s        (điện thoại 1,2s)
     ② ảnh lắng zoom     0 → 1,8s      (điện thoại 2,16s — luôn gấp 1,8 lần rèm
                                        nên còn nhích khẽ sau khi rèm mở xong)
     ③ nút play bật lên  0,55s → 1,07s (điện thoại 0,66 → 1,28s — luôn rơi vào
                                        lúc rèm hé đúng 55%, không lệ thuộc khổ màn)

   ══ VÌ SAO BUỘC VÀO BIẾN CHUNG, ĐO RỒI MỚI ĐỔI (18/08/2026) ═══════════════
   Bản đầu ghi cứng 1,05s. Đo lại, so với rèm thẻ khoá học trang chủ — chỗ
   giống video nhất và anh Hưng đã duyệt:

                            quãng    thời lượng   tốc độ
     thẻ khoá học  máy tính  303px      1,5s      202 px/s   ← chuẩn
     thẻ khoá học  điện thoại 104px     1,8s       58 px/s   ← chuẩn
     video 1,05s   máy tính  161px      1,05s     153 px/s   chậm hơn chuẩn
     video 1,05s   điện thoại 81px      1,05s      77 px/s   NHANH hơn chuẩn

   Lệch NGƯỢC CHIỀU NHAU: máy tính chậm hơn hàng xóm, điện thoại lại nhanh
   hơn. Đó là thứ khiến mắt thấy gợn dù không nói ra được vì sao.
   Buộc vào --rem-ngan thì thành 161 px/s (máy tính) và 67 px/s (điện thoại) —
   đúng dải web tự đặt: quãng ngắn thì đi chậm hơn quãng dài, vì "mắt người
   chấp nhận vệt dài lướt nhanh hơn vệt ngắn" (chú thích gốc ở bien.css).

   Nhịp cũng đổi từ số cứng (.3,.78,.28,1) sang --rem-nhip. Đo ra nhịp cũ vọt
   26,8% quãng đường trong 10% thời gian đầu, đỉnh tốc 2,73 lần; --rem-nhip
   máy tính chỉ 21,4% và 2,33 lần — đằm hơn. Trên điện thoại --rem-nhip tự
   chuyển sang bản đuôi mềm hơn.

   KHÔNG SỬA hop-phan.css. Các trang khác dùng chung .nhip không đổi một ly. */

/* ── GỠ THẺ VIDEO KHỎI HỆ NHÓM ────────────────────────────────────────────
   Chọn theo .luoi-v.nhip (5 lớp) để THẮNG luật .nhip.rvl-in > *:nth-child()
   của hop-phan.css (cũng 5 lớp) nhờ nạp sau — nếu chỉ viết .nhip > .the-video
   (4 lớp) thì thua, thẻ vẫn hiện đồng loạt theo hệ cũ. video.css nạp sau
   hop-phan.css (khai báo phụ thuộc trong functions.php), đã kiểm trên bản chạy. */
html.js-on body:not(.home) .luoi-v.nhip > .the-video{
  opacity:0;transform:translateY(20px);
  transition:opacity .66s ease-out,transform .8s var(--chu-nhip);
  transition-delay:var(--tre,0s)}
html.js-on body:not(.home) .luoi-v.nhip > .the-video.vid-hien{
  opacity:1;transform:none}

/* ── NHỊP SO LE THEO CỘT THẬT ────────────────────────────────────────────
   Mỗi thẻ tự nổ khi tới lượt, nên các thẻ CÙNG MỘT HÀNG mới vào gần như cùng
   lúc — so le phải tính theo CỘT, không theo 4 bước cứng như hệ chung (lưới
   này 3 cột trên máy tính, 2 cột trên điện thoại; đếm 4 bước sẽ ra thứ tự lộn
   xộn giữa các hàng, đúng lỗi đã phải đi sửa ở khối "Vì sao" trang chủ). */
html.js-on body:not(.home) .luoi-v > .the-video{--tre:0s}
@media(min-width:901px){                                    /* 3 cột */
  html.js-on body:not(.home) .luoi-v > .the-video:nth-child(3n+2){--tre:.08s}
  html.js-on body:not(.home) .luoi-v > .the-video:nth-child(3n){--tre:.16s}}
@media(max-width:900px){                                    /* 2 cột */
  html.js-on body:not(.home) .luoi-v > .the-video:nth-child(2n){--tre:.08s}}

/* ── ① HAI CÁNH RÈM ──────────────────────────────────────────────────────
   Bám .khung-hinh (vùng ảnh 16:9) chứ KHÔNG phải cả thẻ — phủ cả thẻ thì che
   luôn dải chữ tiêu đề nền trắng bên dưới, trông như thẻ chưa tải xong.
   z-index 4 để nằm TRÊN lớp phủ mờ, nhãn và nút play (đều z-index tự động);
   thiếu dòng này thì cánh trái chui xuống dưới còn cánh phải nằm trên. */
html.js-on body:not(.home) .the-video .khung-hinh::before,
html.js-on body:not(.home) .the-video .khung-hinh::after{
  content:'';position:absolute;top:0;bottom:0;z-index:4;pointer-events:none;
  background-color:#2F2317;
  background-image:
    url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='240'%20height='240'%3E%3Cfilter%20id='tw'%3E%3CfeTurbulence%20type='fractalNoise'%20baseFrequency='.9'%20numOctaves='3'/%3E%3C/filter%3E%3Crect%20width='240'%20height='240'%20filter='url(%23tw)'%20opacity='.5'/%3E%3C/svg%3E"),
    repeating-linear-gradient(0deg,rgba(255,240,220,.05) 0 1px,transparent 1px 4px),
    repeating-linear-gradient(90deg,rgba(255,240,220,.04) 0 1px,transparent 1px 4px),
    radial-gradient(120% 120% at 50% -12%,rgba(255,226,186,.14),transparent 62%);
  background-size:240px 240px,auto,auto,auto;
  background-blend-mode:soft-light,normal,normal,normal;
  transform:translate3d(0,0,0);
  transition:transform var(--rem-ngan) var(--rem-nhip) var(--tre,0s)}
html.js-on body:not(.home) .the-video .khung-hinh::before{left:0;right:50%;
  box-shadow:inset -1px 0 0 rgba(255,226,186,.22), 1px 0 12px rgba(0,0,0,.34)}
html.js-on body:not(.home) .the-video .khung-hinh::after{left:50%;right:0;
  box-shadow:inset 1px 0 0 rgba(255,226,186,.22), -1px 0 12px rgba(0,0,0,.34)}

/* Mở: 100,5% để không hở một sợi tóc nào ở mép giữa. Rèm bám sát mép vùng
   ảnh nên KHÔNG cần bù trừ vài điểm ảnh như rèm trang khoá học (chỗ đó rèm
   lùi vào trong 8px nên phải cộng thêm). */
html.js-on body:not(.home) .the-video.vid-hien .khung-hinh::before{
  transform:translate3d(-100.5%,0,0)}
html.js-on body:not(.home) .the-video.vid-hien .khung-hinh::after{
  transform:translate3d(100.5%,0,0)}

/* ── ② ẢNH LẮNG ZOOM ─────────────────────────────────────────────────────
   Dùng @keyframes chứ KHÔNG dùng transition, vì .the-video img đã có
   "transition:transform .5s" dành cho việc rê chuột phóng to. Viết bằng
   transition thì hiệu ứng hiện chiếm mất thuộc tính đó và rê chuột hết nhảy
   — đúng lỗi đã phải đi gỡ ở thẻ trang chủ hôm nay. Animation chạy song song. */
@keyframes videoAnhLang{from{transform:scale(1.07)}}
html.js-on body:not(.home) .the-video.vid-hien .khung-hinh img{
  animation:videoAnhLang calc(var(--rem-ngan) * 1.8) cubic-bezier(.18,.72,.24,1) var(--tre,0s) backwards}

/* ── ③ NÚT PLAY BẬT LÊN ──────────────────────────────────────────────────
   Chờ 0,58s cho rèm hé đủ rộng rồi mới bật, nảy nhẹ như đèn sân khấu vừa bật.
   Cũng dùng @keyframes vì .play có "transition:.2s" cho rê chuột.
   Trạng thái chờ đặt ở :not(.vid-hien) — nở xong luật này thôi khớp, nút trả
   về đúng cascade nên .the-video:hover .play vẫn phóng to bình thường. */
@keyframes videoPlayBat{from{transform:scale(0);opacity:0}}
html.js-on body:not(.home) .the-video:not(.vid-hien) .play{
  transform:scale(0);opacity:0}
html.js-on body:not(.home) .the-video.vid-hien .play{
  animation:videoPlayBat calc(var(--rem-ngan) * .52) cubic-bezier(.34,1.56,.64,1) calc(var(--tre,0s) + var(--rem-ngan) * .55) backwards}

/* ── NGƯỜI BẬT GIẢM CHUYỂN ĐỘNG ─────────────────────────────────────────
   Rèm biến mất hẳn, ảnh và nút hiện đủ, thẻ hiện đủ. Phải phủ cả trường hợp
   JS chưa kịp gắn .vid-hien, nếu không thẻ nằm ở opacity 0 vĩnh viễn. */
@media(prefers-reduced-motion:reduce){
  html.js-on body:not(.home) .the-video .khung-hinh::before,
  html.js-on body:not(.home) .the-video .khung-hinh::after{display:none !important}
  html.js-on body:not(.home) .luoi-v.nhip > .the-video,
  html.js-on body:not(.home) .the-video .play,
  html.js-on body:not(.home) .the-video .khung-hinh img{
    opacity:1 !important;transform:none !important;
    transition:none !important;animation:none !important}}

/* Mốc điện thoại cho dải dưới bìa. Ba tab Hình ảnh · Khóa học · Lịch học vốn
   đã có mốc này, ba tab còn lại (Dịch vụ · Về Luvinus · Video) thì chưa — nên
   dải ở đây dày hơn hẳn mà không ai để ý. Lấy đúng con số của ba tab kia cho
   cả sáu tab giống nhau. */
@media(max-width:640px){
  .dai .khung{padding:11px 16px;gap:7px 18px;font-size:12.5px}
}

/* 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)}
}