/* trang.css — CSS riêng TRANG CHỦ. Copy từ mockup, map biến sang bien.css (không hardcode màu). */ /* Alias: tên biến mockup → token bien.css (không thêm màu mới) */ :root{ --bg:var(--kem); --dark:var(--nau-am); --dark2:var(--chan-trang); --tint:var(--cam-nhat); --cta-hover:var(--cta-dam); --cta-deep:var(--cam-tram); --on-dark:var(--chu-phu-toi); --ink:var(--chu-chinh); --sub:var(--chu-phu); --line:var(--vien); --card:var(--trang); --ph:var(--cam-nhat); --green:var(--xanh-reu); --gold:var(--vang-nghe); --star:var(--vang-nghe); --shadow:var(--bong-nhe); --shadow-lg:var(--bong); --max:var(--cot-rong); } /* TRANG CHỦ · PC zoom 100% (màn ≤1500px): thu nội dung 1140 → 1080 cho 2 bên thoáng hơn. Chỉ tác động phần .noi-dung — KHÔNG đụng header (menu 9 tab) & footer. Zoom-out (>1500) giữ 1240. */ @media(min-width:981px) and (max-width:1500px){ body.home .noi-dung .khung{max-width:1050px} } .ico{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round} /* HERO */ .hero{position:relative;min-height:500px;display:flex;align-items:center;overflow:hidden;background:#302620} /* PC: bìa cao vừa trọn một màn — xem --bia-vua-man ở bien.css */ @media(min-width:761px){.hero{min-height:var(--bia-vua-man)}} .hero img.bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 35%} @media(min-width:761px){.hero img.bg{object-position:center calc(35% - 40px)}} /* PC: nâng bìa lên 40px cho rõ người (mobile giữ nguyên) */ .hero .ov{position:absolute;inset:0;background:linear-gradient(100deg,rgba(48,38,32,.94) 0%,rgba(48,38,32,.80) 44%,rgba(48,38,32,.35) 100%)} .hero .in{position:relative;z-index:2;padding-block:72px} /* text-wrap:balance — CHIA ĐỀU HAI DÒNG KHI BUỘC PHẢI XUỐNG DÒNG. Tiêu đề trang chủ dài 39 ký tự, cần 989px mà khung chỉ cho 900px — nới max-width cũng vô ích vì chính KHUNG là giới hạn. Nên nó phải xuống 2 dòng. Vấn đề là xuống dòng KIỂU GÌ: mặc định trình duyệt nhồi đầy dòng trên rồi quăng phần thừa xuống, thành "HỌC CẮT MAY THỜI TRANG ỨNG" / "DỤNG LUVINUS" — cắt đôi cụm "ỨNG DỤNG", dòng dưới cụt lủn, đọc ra thành lỗi. balance bảo trình duyệt chia đều số chữ hai dòng, nên chỗ ngắt rơi vào khe tự nhiên giữa hai cụm từ. Hai dòng cân nhau đọc ra thành CỐ Ý, không phải thừa chữ. */ .hero h1{text-wrap:balance;font-family:var(--font-bia);font-size:clamp(33px,3.6vw,50px);line-height:1.16;letter-spacing:.008em;color:#fff;font-weight:600;margin-bottom:16px;max-width:900px} .rule{width:56px;height:3px;background:var(--cta);margin-bottom:16px} .hero h2{font-size:clamp(16px,1.4vw,19px);font-weight:600;color:#fff;margin-bottom:12px} .hero p{font-size:clamp(14.5px,1.1vw,16px);color:#DCCFC0;max-width:720px;margin-bottom:26px;line-height:1.75} /* Dòng mô tả hero: PC canh TRÁI (hết giãn chữ); MOBILE giữ canh đều 2 mép như cũ */ /* Trên PC câu dẫn dưới tiêu đề bìa đổi từ căn giữa (nếp mobile) sang căn ĐỀU HAI BÊN — không phải căn trái. Trước đây khai left, mà luật căn đều chung ở hop-phan.css lại có điểm ưu tiên bằng và nạp TRƯỚC tệp này nên thua — thành ra câu này căn đều trên điện thoại mà căn trái trên PC, hai khổ hai kiểu. Đo được: cột 680px, sức chứa ~81 ký tự — thừa sức căn đều (ngưỡng 34). */ @media(min-width:761px){.hero .in>p{text-align:justify}} .btns{display:flex;gap:11px;flex-wrap:wrap} /* Dãy sao đánh giá ở ô thống kê (màu cam --cam-sang, sao cuối vơi theo điểm) */ .stats .sao-n{display:flex;align-items:center;gap:8px} .stats .sao-n .luv-sao{color:var(--cam-sang);font-size:21px} .stats .sao-n .sao-diem{font-size:23px;font-weight:600;color:var(--cam-sang);line-height:1} @media(max-width:760px){.stats .sao-n .luv-sao{font-size:17px}.stats .sao-n{gap:6px}.stats .sao-n .sao-diem{font-size:18px}} .btn{display:inline-flex;align-items:center;justify-content:center;padding:14px 26px;border-radius:8px;font-size:13px;font-weight:600;letter-spacing:.5px;cursor:pointer;border:none;transition:.15s;text-decoration:none} .btn-p{background:var(--cta);color:#fff} .btn-p:hover{background:var(--cta-hover)} .btn-o{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.55);color:#fff} .btn-o:hover{background:rgba(255,255,255,.2)} /* DẢI SỐ LIỆU */ .stats{background:var(--dark);color:#fff} /* ══ DẢI SỐ LIỆU — SIẾT MỎNG (sửa 19/08/2026) ══════════════════════════════ Anh Hưng: "thanh chạy dữ liệu dưới bìa đang dày quá, cho nó thấp gọn lại nhất có thể nhưng vẫn đảm bảo thẩm mĩ". ĐO TRƯỚC KHI SIẾT — dải cao 86px, chia ra: lề trên + dưới 36px ← chỗ thừa nhiều nhất dòng số .n 28px (chữ 23px, nhưng min-height 1.2em ĐẨY lên 27,6) dòng nhãn .l 20px (chữ 11,5px mà line-height 1.75 → 20,1px) khe giữa hai dòng 2px Tức là 36px lề bọc lấy 50px chữ — lề chiếm 42% chiều cao dải. BA CHỖ SIẾT, KHÔNG ĐỤNG VÀO CỠ CHỮ (giữ nguyên 23px và 11,5px): ① lề 18px → 11px −14px ② nhãn line-height 1.75 → 1.3 −5px 1.75 là nếp cho đoạn văn nhiều dòng; nhãn ở đây chỉ MỘT dòng nên khoảng đệm đó thành khoảng trống thừa trên dưới chữ. ③ số min-height 1.2em → 1.1em −2px min-height này để bốn ô thẳng hàng khi ô có sao ô không. 1.1em vẫn đủ vì đúng bằng line-height của chính nó — bỏ hẳn thì ô có ★ sẽ lệch. ④ khe giữa hai dòng 2px → 1px −1px Kết quả: 86px → 64px, mỏng đi 26% mà chữ giữ nguyên cỡ. */ .stats .g{display:grid;grid-template-columns:repeat(4,1fr);gap:14px 20px;padding-block:11px} .stats .g > div{display:flex;flex-direction:column} /* mọi ô số cùng chiều cao + canh giữa → nhãn hàng dưới thẳng mốc, không lệch */ .stats .n{font-size:23px;font-weight:600;line-height:1.1;letter-spacing:.2px;display:flex;align-items:center;min-height:1.2em} .stats .n.hl{color:var(--cam-sang)} .stats .l{font-size:11.5px;color:var(--on-dark);margin-top:1px} /* ══ HAI CHỖ SIẾT CHỈ ÁP CHO MÁY TÍNH (sửa 19/08/2026) ═════════════════════ Anh Hưng: "mobile để lại như cũ". Lúc đầu em khai thẳng vào luật gốc, mà mốc ≤760px chỉ đè font-size và margin-top chứ không đè line-height với min-height — nên hai chỗ này LỌT xuống điện thoại, làm dải mobile mỏng đi 13px ngoài ý muốn (94px → 81px). Nay bọc vào mốc ≥761px. Điện thoại giữ nguyên số cũ từng byte: nhãn line-height 19,25px · số min-height 20,4px · dải 94px ⚠ KHÔNG dùng line-height:inherit để trả lại cho mobile — body khai line-height ra giá trị TUYỆT ĐỐI 28px, kế thừa thẳng sẽ thành 28px chứ không phải 19,25px. Cách đúng là đừng khai ở luật gốc ngay từ đầu. */ @media(min-width:761px){ .stats .l{line-height:1.3} .stats .n{min-height:1.1em} } /* SECTION */ section{padding:50px 0} section.doitac{padding:24px 0} /* mục phụ: cắt bớt trên/dưới cho gọn */ .doitac .shead{margin-bottom:16px} section.dark{background:var(--dark)} section.dark .shead h2{color:#fff} section.dark .shead p{color:var(--on-dark)} section.tint{background:var(--tint)} .shead{text-align:center;margin-bottom:30px} .shead h2{font-family:var(--font-tieu-de);font-size:29px;font-weight:600} .shead .u{width:44px;height:3px;background:var(--cta);margin:12px auto 0} .shead p{font-size:14px;color:var(--sub);margin-top:11px} /* VÌ SAO */ .why{display:grid;grid-template-columns:repeat(3,1fr);gap:18px} .wcard{background:linear-gradient(180deg,#FFFEFB,#FAF3E7);border:0;border-radius:14px;padding:26px 22px; box-shadow:0 2px 4px rgba(58,46,34,.09),0 8px 16px -6px rgba(58,46,34,.16); transition:.18s;display:flex;gap:0;flex-direction:column} .wcard:hover{box-shadow:0 2px 3px rgba(58,46,34,.1),0 7px 12px -4px rgba(58,46,34,.18);transform:translateY(-2px)} /* Rê chuột → chip nghiêng nhẹ, giống hệt ô biểu tượng bên trang Liên hệ */ .wcard:hover .wchip{transform:scale(1.08) rotate(-4deg)} @media(prefers-reduced-motion:reduce){.wcard:hover .wchip{transform:none}} .wchip{width:46px;height:46px;border-radius:12px;color:#fff;display:flex;align-items:center;justify-content:center;margin-bottom:15px;flex-shrink:0;transition:transform .2s; /* CHẤT LIỆU DA: vân hạt da (fractal noise) + ánh sáng trên/bóng dưới + chỉ khâu viền — giữ nguyên màu nền từng chip */ 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,.26),rgba(255,255,255,0) 45%,rgba(0,0,0,.18)); background-blend-mode:soft-light,normal; box-shadow:0 2px 7px rgba(58,46,34,.22),inset 0 1px 0 rgba(255,255,255,.28); outline:1px dashed rgba(255,244,224,.6);outline-offset:-3.5px} .wcard h3{font-size:14.5px;font-weight:700;margin-bottom:9px;line-height:1.4} .wcard p{font-size:13.5px;color:var(--sub);line-height:1.75} /* Căn đều hai bên cho trang chủ nay nằm trong LUẬT CHUNG TOÀN WEB ở cuối hop-phan.css — gom một chỗ để sửa một lần là ăn cả web. */ /* ĐỘI NGŨ */ .team{display:grid;grid-template-columns:1.15fr 1fr;gap:34px;align-items:center} .vid{position:relative;width:100%;padding:0;padding-top:56.25%;border:0;border-radius:14px;overflow:hidden;box-shadow:var(--shadow-lg);background:#000;display:block;cursor:pointer} .vid img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover} .vid iframe{position:absolute;inset:0;width:100%;height:100%;border:0} .vid .play{position:absolute;inset:0;background:rgba(48,38,32,.3);display:flex;align-items:center;justify-content:center} .vid .play span{width:62px;height:62px;border-radius:50%;background:var(--cta);display:flex;align-items:center;justify-content:center;box-shadow:0 4px 20px rgba(0,0,0,.35)} /* Video Đội Ngũ: ảnh bìa phủ kín, KHOÉT lỗ tròn giữa để lộ nút play thật của YouTube. pointer-events:none → bấm xuyên qua tới nút YouTube. Khi phát (.dang-phat) → ẩn bìa xem trọn video. */ /* ══ LỖ KHOÉT LỘ NÚT PLAY — vì sao phải co giãn (sửa 21/08/2026) ═══════════ Anh Hưng báo: trên điện thoại có chữ lạ hiện trên ảnh bìa. Chữ đó KHÔNG PHẢI của mình — đó là tiêu đề video do chính YouTube vẽ ở DẢI TRÊN CÙNG của khung nhúng, lọt lên qua cái lỗ khoét này. Trước đây lỗ để cứng 52px cho mọi màn hình. Nhưng khung video co theo màn, còn lỗ thì không: máy tính 497×279 → mép trên lỗ cách đỉnh khung 88px → kín 412px 337×190 → chỉ còn 43px → hở chữ 375px 300×169 → chỉ còn 32px → hở chữ 360px 285×160 → chỉ còn 28px → hở nhiều Lỗ 104px chiếm tới 62–65% chiều cao khung trên điện thoại. Ngưỡng an toàn tính ra là màn phải rộng hơn ~423px — tức gần như KHÔNG điện thoại nào thoát. Nay cho bán kính co theo bề ngang màn: 8.2vw, chặn dưới 30px chặn trên 52px. 360px → 30px (cách đỉnh 50px) 412px → 34px (cách đỉnh 61px) 600px → 49px từ ~634px trở lên → giữ nguyên 52px Máy tính không đổi gì so với trước. THU LỖ KHÔNG LÀM KHÓ BẤM: ảnh bìa để pointer-events:none nên bấm chỗ nào trên bìa cũng xuyên thẳng xuống YouTube. Lỗ chỉ để NHÌN THẤY nút, không phải để bấm. */ .vid--yt{--lo-play:clamp(30px,8.2vw,52px)} .vid--yt .vid-bia{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:2;pointer-events:none;transition:opacity .3s ease; -webkit-mask-image:radial-gradient(circle at 50% 50%,transparent var(--lo-play),#000 calc(var(--lo-play) + 1px)); mask-image:radial-gradient(circle at 50% 50%,transparent var(--lo-play),#000 calc(var(--lo-play) + 1px))} .vid--yt.dang-phat .vid-bia{opacity:0;visibility:hidden} /* ══ GỌI BẤM — hai vòng sóng lan quanh nút play video Đội Ngũ ══════════════ VÌ SAO PHẢI LÀM KIỂU NÀY: nút play ở đây KHÔNG PHẢI của web mình — nó là nút thật của YouTube nằm bên trong khung nhúng. Ảnh bìa được khoét một lỗ tròn bán kính 52px để lộ nút đó ra. Khung nhúng là của trang khác nên CSS của mình không với tới bên trong được: không thể cho chính nút đó rung. Nên thay vì rung cái nút, em cho VÀNH QUANH LỖ phát sóng lan ra — mắt vẫn bị kéo về đúng tâm nút. Hai vòng lệch nhau 0,55s thành nhịp "ping… ping", rồi nghỉ tới hết chu kỳ 2,8s: đủ để gây chú ý, không đủ để gây phiền. Vòng bắt đầu đúng bằng 2 × bán kính lỗ (bám biến --lo-play) nên ôm sát mép lỗ, nhìn ra là sóng phát TỪ nút chứ không phải một vòng tròn dán đè lên. pointer-events:none — tuyệt đối không được chắn cú bấm vào nút YouTube. Đang phát thì tắt hẳn, không ai cần gọi bấm một video đang chạy. */ @keyframes vidGoiBam{ 0% {transform:scale(.88);opacity:0} 10% {opacity:.85} 46% {transform:scale(1.52);opacity:0} 100%{transform:scale(1.52);opacity:0}} body.home .vid--yt::before, body.home .vid--yt::after{ content:'';position:absolute;left:50%;top:50%; width:calc(var(--lo-play)*2);height:calc(var(--lo-play)*2); margin:calc(var(--lo-play)*-1) 0 0 calc(var(--lo-play)*-1); border-radius:50%;border:2px solid rgba(245,168,126,.95); pointer-events:none;z-index:3;opacity:0} /* Chỉ gọi bấm khi khối video ĐÃ CUỘN TỚI — gọi lúc còn ngoài màn hình là phí */ body.home .team .vid-khung.rvl-in .vid--yt::before{ animation:vidGoiBam 2.8s cubic-bezier(.2,.6,.35,1) infinite} body.home .team .vid-khung.rvl-in .vid--yt::after{ animation:vidGoiBam 2.8s cubic-bezier(.2,.6,.35,1) .55s infinite; border-color:rgba(255,236,210,.8)} /* Bấm phát rồi thì thôi gọi */ body.home .vid--yt.dang-phat::before, body.home .vid--yt.dang-phat::after{animation:none !important;opacity:0} @media(prefers-reduced-motion:reduce){ body.home .vid--yt::before,body.home .vid--yt::after{animation:none !important;opacity:0}} .team h3{font-size:17px;font-weight:700;margin-bottom:16px;color:var(--cam-sang)} .team ul{list-style:none} .team li{font-size:13.8px;padding:8px 0 8px 22px;position:relative;line-height:1.6;color:#E5D6C4} .team li:before{content:"";position:absolute;left:0;top:16px;width:7px;height:7px;border-radius:50%;background:var(--cta)} /* SLIDER */ .sl{position:relative} .vp{overflow:hidden} .trk{display:flex;transition:transform .45s cubic-bezier(.4,0,.2,1)} .page{flex:0 0 100%;min-width:100%;box-sizing:border-box} /* align-items:start = thẻ chỉ cao đúng bằng nội dung — nhận xét ngắn KHÔNG bị kéo khung dài theo thẻ bên cạnh. Đây là nếp cho MOBILE và máy bảng, nơi thẻ xếp 1–2 cột: kéo bằng nhau ở đó chỉ tạo khoảng trắng thừa giữa các thẻ. */ .rvpage{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;align-items:start} /* ══ PC: BA THẺ CAO BẰNG NHAU (sửa 19/08/2026) ═════════════════════════════ Anh Hưng: "cho các box màu vàng chiều cao bằng nhau bằng với box cao nhất trên PC". Trên PC ba thẻ nằm CÙNG MỘT HÀNG, mắt đọc chúng như một khối ba cột. Ba đáy thẻ so le nhau ở đó đọc ra thành lệch, không phải thành "thẻ vừa nội dung". Trên mobile thì ngược lại: thẻ xếp dọc, mỗi lúc chỉ thấy một thẻ, nên kéo bằng nhau chỉ để lại khoảng trắng vô cớ dưới thẻ ngắn. stretch là nếp mặc định của lưới CSS, nên chỉ cần gỡ bỏ start là ba thẻ tự cao bằng thẻ cao nhất trong hàng — không cần khai chiều cao cố định, không cần đo bằng JS. Nội dung vẫn bám mép trên như cũ. Đặt trong mốc ≥981px để KHÔNG đụng gì tới mobile và máy bảng. Đây cũng đúng là mốc mà slider PC .sl-rv-pc bắt đầu hiện ra (xem dòng ẩn/hiện bên dưới). */ @media(min-width:981px){ .rvpage{align-items:stretch} /* ── VÀ CAO BẰNG NHAU GIỮA CÁC SLIDE, KHÔNG CHỈ TRONG MỘT SLIDE ────────── Anh Hưng: "cho chiều cao của 3 slide cũng cao bằng nhau bằng chiều cao của slide cao nhất". ĐO ĐƯỢC TRƯỚC KHI SỬA — vấn đề không nằm ở chỗ ai cũng tưởng: .trk băng trượt 572px (đã bằng slide dài nhất) .page từng slide 572px · 572px · 572px ← ĐÃ BẰNG NHAU SẴN .rvpage lưới thẻ 339px · 572px · 443px ← chỗ lệch nằm ở đây Tức là khung ngoài vốn KHÔNG nhảy; thứ mắt thấy đổi là ba tấm thẻ bên trong co lại theo chữ, để trống phần dưới của slide. Vì sao .page đã bằng nhau: .trk là flex, mọi flex item mặc định giãn hết chiều cao hàng. Nhưng .rvpage là khối thường nằm trong .page, chiều cao tự theo nội dung — nó KHÔNG thừa hưởng cái giãn đó. CÁCH NỐI LẠI: cho .page thành hộp flex dọc, rồi bảo .rvpage chiếm hết phần còn lại. Lúc đó .rvpage cao 572px ở mọi slide, và align-items:stretch ở trên kéo ba tấm thẻ cao theo. Không cần khai chiều cao cố định, không cần JS đo — đổi số lượng hay độ dài nhận xét thì nó tự tính lại. PHẢI CHẶN THEO .sl-rv-pc: lớp .page dùng chung với slider khoá học và slider sản phẩm. Không chặn thì hai slider kia cũng bị đổi cách xếp. */ .sl-rv-pc .page{display:flex;flex-direction:column} .sl-rv-pc .rvpage{flex:1 1 auto} } /* Đánh giá học viên: PC & mobile xếp khác nhau → ẩn/hiện đúng slider (mốc 980px) */ .sl-rv-mb{display:none} @media(max-width:980px){.sl-rv-pc{display:none}.sl-rv-mb{display:block}} .sppage{display:grid;grid-template-columns:1fr;gap:16px} .sp-chi-pc{display:none} /* ảnh sản phẩm chỉ hiện trên PC — hiện lại ở @media(min-width:981px) */ .dark .sl{max-width:680px;margin-left:auto;margin-right:auto} .navb{display:flex;justify-content:center;align-items:center;gap:14px;margin-top:26px} .nb{width:38px;height:38px;border-radius:50%;background:var(--cta);color:#fff;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center} .nb:hover{background:var(--cta-hover)} .dots{display:flex;gap:7px} .dot{width:8px;height:8px;border-radius:50%;background:#D3C3AE;cursor:pointer;border:none;transition:.2s;padding:0} .dot.on{background:var(--cta);width:22px;border-radius:4px} section.dark .dot{background:#8A7460} section.dark .dot.on{background:var(--cam-sang)} /* NHẬN XÉT — thẻ đánh giá học viên (editorial, tinh tế) */ /* Bóng kiểu Apple: một lớp bóng trung tính mềm dồn xuống DƯỚI CHÂN thẻ (spread âm nên không loang ra quanh) */ .rv{position:relative;background:linear-gradient(180deg,#FFFEFB,#FAF3E7);border-radius:18px;padding:30px 26px 24px; border:1px solid rgba(0,0,0,.06);box-shadow:0 12px 24px -14px rgba(0,0,0,.3); transition:transform .22s ease,box-shadow .22s ease;overflow:hidden} .rv:hover{transform:translateY(-2px);box-shadow:0 16px 30px -16px rgba(0,0,0,.34)} /* dấu ngoặc kép trang trí kiểu tạp chí thời trang */ .rv::before{content:'\201C';position:absolute;top:2px;right:20px; font-family:var(--font-tieu-de);font-size:104px;line-height:1;font-weight:700; color:var(--cta);opacity:.09;pointer-events:none} .rv.g2::before{color:var(--green)} .rv.g3::before{color:var(--gold)} .rv-top{position:relative;display:flex;align-items:center;gap:15px;margin-bottom:16px} .av{width:86px;height:86px;border-radius:50%;object-fit:cover;background:var(--ph);flex:none; border:3px solid #fff;box-shadow:0 0 0 1.5px rgba(210,105,74,.42),0 5px 14px rgba(58,46,34,.16)} .rv.g2 .av{box-shadow:0 0 0 1.5px rgba(107,143,109,.46),0 5px 14px rgba(58,46,34,.16)} .rv.g3 .av{box-shadow:0 0 0 1.5px rgba(185,138,50,.5),0 5px 14px rgba(58,46,34,.16)} .rv-ai{min-width:0} .rv-ai b{display:block;font-family:var(--font-tieu-de);font-size:16.5px;font-weight:600;color:var(--ink);line-height:1.25;letter-spacing:.2px} .rv-kh{display:inline-block;white-space:nowrap;font-size:10px;font-weight:600; color:var(--cta);background:transparent;border:1px solid rgba(210,105,74,.38); border-radius:999px;padding:3px 11px;margin:7px 0} .rv.g2 .rv-kh{color:var(--green);border-color:rgba(107,143,109,.42)} .rv.g3 .rv-kh{color:var(--gold);border-color:rgba(185,138,50,.42)} .stars{color:var(--star);font-size:13px;letter-spacing:2.5px} .rv-ai .stars{margin:0} .rv p{position:relative;font-size:14px;color:var(--chu-phu);line-height:1.85;margin:0;min-height:92px} /* KHÓA HỌC */ .courses{display:grid;grid-template-columns:repeat(3,1fr);gap:20px} .cc{background:var(--card);border-radius:14px;overflow:hidden;border:1px solid rgba(40,28,20,.10);display:flex;flex-direction:column;transition:box-shadow .22s} .cc:hover{box-shadow:0 3px 12px rgba(40,28,20,.09)} .cc .th{position:relative;aspect-ratio:16/10;overflow:hidden;background:var(--ph);display:block} .cc .th img{width:100%;height:100%;object-fit:cover;transition:.4s} .cc:hover .th img{transform:scale(1.04)} .tag{position:absolute;top:11px;left:11px;color:#fff;font-size:10.5px;font-weight:700;padding:5px 11px;border-radius:14px;letter-spacing:.4px} /* Nhịp dọc trong thẻ — thu KHOẢNG HỞ GIỮA CÁC KHỐI (đệm ngoài + margin), KHÔNG đụng giãn dòng bên trong chữ (line-height giữ nguyên 1.4 / 1.5). Giãn dòng là thứ giữ cho chữ dễ đọc; khoảng hở giữa khối mới là chỗ thừa. */ .cbody{padding:13px 16px 13px;display:flex;flex-direction:column;flex:1} .cbody h3{font-size:15px;font-weight:700;margin-bottom:7px;line-height:1.3} /* ══ BỎ GẠCH CHÂN TÊN KHÓA VÀ NÚT CHI TIẾT (sửa 19/08/2026) ════════════════ Anh Hưng: "tên khóa học và nút chi tiết bỏ gạch chân đi". GỐC CỦA VẤN ĐỀ: theme KHÔNG có luật bỏ gạch chân chung cho thẻ link. Trong bien.css chỉ có đúng một dòng "a{color:inherit}" — không đụng tới gạch chân. Nên mọi thẻ chưa được khai riêng đều ăn nếp mặc định của trình duyệt là gạch chân. Đây không phải ai đó cố ý gạch, mà là chỗ bị bỏ sót. Chỉ khai đúng hai chỗ anh chỉ, KHÔNG khai chung cho cả thẻ a: bỏ gạch chân toàn cục sẽ đụng tới cả link trong bài viết, nơi gạch chân là thứ giúp khách nhận ra đâu là link bấm được giữa một khối chữ dài (blog.css đang cố ý gạch chân link trong bài, dòng .than-bai a). Bỏ hẳn chứ không trả lại lúc rê chuột: thẻ khóa học đã có hai dấu hiệu bấm được rõ hơn gạch chân nhiều — ảnh phóng to và cả thẻ nhấc lên. */ .cbody h3 a{text-decoration:none} .cbtn{text-decoration:none} .meta{font-size:12.5px;color:var(--sub);margin-bottom:3px;display:flex;flex-direction:column;gap:4px} .meta-rv{white-space:nowrap} .meta-info{overflow-wrap:break-word} .meta b{color:var(--star)} /* ══ KHỐI GIÁ ═══════════════════════════════════════════════════════════ Giá gốc gạch NẰM TRÊN giá ưu đãi — đúng thứ tự ban đầu. Tối ưu: hạn ưu đãi kéo lên nằm cùng dòng với giá gốc, nên khối chỉ còn 2 dòng thay vì 3 mà thứ tự vẫn nguyên: 3̶2̶.̶0̶0̶0̶.̶0̶0̶0̶đ̶ · Ưu đãi đến 02/11 ← dòng phụ, chữ nhỏ 29.900.000đ [CHI TIẾT] ← giá thật + nút Dòng trên gom hết chữ nhỏ, dòng dưới là con số chính — mắt bắt giá ngay. Dòng phụ trải hết bề ngang nên PC và điện thoại dùng CHUNG một cách xếp, không cần đổi lưới theo khổ màn hình. */ .price{margin-top:auto;display:grid; grid-template-columns:1fr auto; grid-template-areas:"phu phu" "new nut"; align-items:center;column-gap:10px;row-gap:4px; /* Đường kẻ mảnh tách khối giá khỏi thông tin phía trên → thẻ chia 2 vùng gọn gàng */ padding-top:9px;border-top:1px solid rgba(92,71,57,.1)} /* Giá gốc và hạn ưu đãi nằm LIỀN NHAU, hạn ưu đãi ngay bên phải giá gốc. min-height giữ sẵn một dòng: khóa chưa đặt hạn ưu đãi vẫn cao bằng khóa khác. row-gap 3px — đủ tách dòng phụ khỏi con số chính, chưa tới mức hở. */ .gia-phu{grid-area:phu;display:flex;align-items:baseline;gap:0;flex-wrap:wrap;min-height:1.35em} .old{font-size:11.5px;color:#A69A88;text-decoration:line-through} .ud-nho{font-size:11px;line-height:1.3;color:#9a8a76;white-space:nowrap} /* Gạch ngăn — VẼ bằng CSS chứ không gõ ký tự, để chủ động đúng độ dài, độ mảnh và độ cao. Cố ý nhạt hơn nét gạch giá (#A69A88) để không tranh nhau, và đặt thấp hơn tầm nét gạch một chút cho mắt phân biệt được hai thứ. Chỉ hiện khi khóa đó THẬT SỰ có hạn ưu đãi. */ .ud-nho:not(:empty)::before{content:'';display:inline-block; width:11px;height:1px;background:#CFC3B2; vertical-align:.18em;margin:0 9px 0 9px} .new{grid-area:new;font-size:19px;font-weight:700;color:var(--cta-deep);line-height:1.2} .cbtn{grid-area:nut;align-self:center;justify-self:end;margin-left:10px} /* Nút CHI TIẾT = DA THUỘC cam đất + chỉ may kem (đồng bộ hệ nút da) */ .cbtn{color:#fff;font-size:11.5px;font-weight:600;padding:8px 15px;border-radius:7px;letter-spacing:.3px;white-space:nowrap;transition:.16s; background-color:#9C4228; 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,.24),rgba(255,255,255,0) 42%,rgba(0,0,0,.16)); background-blend-mode:soft-light,normal; outline:1px dashed rgba(255,244,224,.6);outline-offset:-3px; box-shadow:0 2px 7px rgba(210,105,74,.28),inset 0 1px 0 rgba(255,255,255,.25)} .cbtn:hover{background-color:var(--cta-dam)} /* SẢN PHẨM */ .pframe{background:var(--card);border-radius:12px;padding:9px;box-shadow:var(--shadow-lg);transition:.18s} .pframe:hover{transform:translateY(-3px)} .pframe img{width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;object-position:center 26%;border-radius:7px} /* TIN TỨC */ .news{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;position:relative} .news-track{display:contents} .news-track>.nc:nth-child(n+4){display:none} /* PC/tablet: chỉ 3 bài */ .news-dup{display:none} @keyframes newsChay{from{transform:translateY(0)}to{transform:translateY(-50%)}} @media(prefers-reduced-motion:reduce){ .news.co-chay{height:auto!important;overflow:visible!important;-webkit-mask:none!important;mask:none!important} .news.co-chay .news-track{animation:none!important} .news.co-chay .news-dup{display:none!important} } .nc{background:var(--card);border-radius:14px;overflow:hidden;box-shadow:var(--shadow);transition:.18s} .nc:hover{box-shadow:var(--shadow-lg);transform:translateY(-3px)} .nc .th{aspect-ratio:16/9;background:var(--ph);overflow:hidden;display:block} .nc .th img{width:100%;height:100%;object-fit:cover} .nc .b{padding:16px 18px 20px} .cat{font-size:10.5px;font-weight:700;letter-spacing:1.2px;margin-bottom:7px} .nc h3{font-size:14.5px;font-weight:600;line-height:1.5;margin-bottom:7px} .nc p{font-size:12.5px;color:var(--sub);line-height:1.6} /* ĐĂNG KÝ */ .reg{background:var(--dark);color:#fff;padding:52px 0} .reg .g{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center} .reg h2{font-family:var(--font-tieu-de);font-size:29px;font-weight:600;margin-bottom:12px} .reg p{font-size:14px;color:var(--on-dark);line-height:1.8} .reg-cta{max-width:720px;margin:0 auto;text-align:center} .reg-cta p{margin-bottom:24px} .reg-btns{display:flex;gap:12px;justify-content:center;flex-wrap:wrap} .reg-btns .btn{padding:15px 28px} @media(max-width:520px){.reg-btns{flex-direction:column}.reg-btns .btn{width:100%}} /* Form đăng ký hiện ngay trên trang chủ (mục CTA) */ .reg .luv-form{max-width:480px;margin:22px auto 0;text-align:left} .reg .luv-form__hang{flex-direction:column;align-items:stretch;gap:12px} .reg .luv-inp{flex:0 0 auto;width:100%;height:48px;background:#fff;color:#1f1c19;border-color:rgba(0,0,0,.12)} .reg select.luv-inp,.reg .luv-sel__btn{height:48px} .reg .luv-inp::placeholder{color:#8a7d6d} .reg .nut-dk{flex:0 0 auto;width:100%;padding:15px;margin-top:2px} .reg .luv-form__msg{text-align:center;margin-top:6px;min-height:0;color:#fff} .reg .luv-form__msg:empty{margin-top:0} .reg .luv-form__msg.ok{color:var(--cam-sang,#F5A87E)} .reg-goi{text-align:center;margin-top:16px;font-size:14px;color:var(--on-dark)} .reg-goi a{color:var(--cam-sang,#F5A87E);font-weight:700;text-decoration:none} .reg-form{background:transparent;border-radius:0;padding:0;box-shadow:none} /* ═══════════ ĐĂNG KÝ TƯ VẤN — kiểu THẺ (card) nâu, giống trang Lịch học ═══════════ */ .reg-card{background:var(--bg);padding:62px 0} .reg-card .khung{max-width:1120px} .reg-card .form-chinh{background:var(--nau-am);border-radius:10px;padding:36px 34px;box-shadow:var(--bong)} .reg-card .form-chinh .luv-form{max-width:none} .reg-card .form-chinh .luv-form__dau{text-align:center;margin-bottom:22px} .reg-card .form-chinh .luv-form__tieu-de{color:var(--kem);font-size:26px} .reg-card .form-chinh .luv-form__mo-ta{color:var(--chu-phu-toi);font-size:13px;font-style:italic} .reg-card .form-chinh .luv-form__hang{flex-direction:column;align-items:stretch;gap:12px} .reg-card .form-chinh .luv-inp{width:100%;flex:0 0 auto;height:50px;border:1px solid rgba(245,168,126,.26);border-radius:6px;background:rgba(255,255,255,.95);color:var(--chu-chinh)} .reg-card .form-chinh .luv-inp::placeholder{color:var(--chu-phu);opacity:.7} .reg-card .form-chinh .luv-inp:focus{outline:none;border-color:var(--cam-sang);background:#fff} .reg-card .form-chinh .luv-sel__btn{height:50px;border-radius:6px;background:rgba(255,255,255,.95)} .reg-card .form-chinh select.luv-inp option{background:var(--nau-am);color:var(--kem)} .reg-card .form-chinh .nut-dk{width:100%;height:56px;margin-top:8px} .reg-card .form-chinh .luv-form__msg{color:var(--kem);text-align:center} .reg-card .hoac{text-align:center;margin-top:14px;font-size:14.5px;color:var(--chu-phu-toi)} .reg-card .hoac a{color:var(--cam-sang);font-weight:700;text-decoration:none} @media(max-width:600px){ .reg-card{padding:34px 0} .reg-card .form-chinh{padding:24px 18px} .reg-card .form-chinh .luv-form__tieu-de{font-size:22px} } .reg-form .luv-form{max-width:none} .reg-form .luv-form__tieu-de{font-size:16px} .reg-form .luv-form__hang{flex-direction:column;align-items:stretch} .reg-form .luv-inp{flex-basis:auto;width:100%} .reg-form .nut-dk{width:100%} .reg-loi{text-align:center} /* ≥600px: ô Họ tên + SĐT trên 1 hàng, ô chọn Khóa & nút chiếm full — form gọn */ @media(min-width:600px){ .reg .luv-form__hang{display:grid;grid-template-columns:1fr 1fr;gap:12px;align-items:start} .reg .luv-form__hang select.luv-inp, .reg .luv-form__hang .luv-sel, .reg .luv-form__hang .nut-dk{grid-column:1 / -1} .reg .nut-dk{margin-top:0} } /* ═══════════ TỐI ƯU RIÊNG CHO PC (≥981px) — dồn nội dung, đỡ trống 2 bên ═══════════ */ @media(min-width:981px){ /* Sản phẩm học viên: hàng ảnh lấp đầy nền tối (thay vì 1 ảnh trôi giữa) */ .dark .sl{max-width:none} /* Sản phẩm HV: 3 ảnh/hàng (mỗi slide 3 trên + 2 dưới căn giữa) → ảnh to, rõ */ .sppage{display:flex;flex-wrap:wrap;justify-content:center;gap:16px} .sppage .pframe{flex:0 0 calc(33.333% - 11px);width:calc(33.333% - 11px)} .sp-chi-pc{display:block} /* PC: hiện ảnh thứ 6 mỗi slide → 3 trên + 3 dưới */ /* Form đăng ký (2 cột .reg .g): lời mời canh trái ở cột trái */ .reg-loi{text-align:left} /* "hoặc gọi" trải ngang, xuống dưới cùng (dưới cả 2 cột) */ .reg-goi{grid-column:1 / -1;margin-top:0} } /* ĐỐI TÁC */ .pt{display:grid;grid-template-columns:repeat(6,1fr);gap:13px;max-width:840px;margin:0 auto} .pt div{background:#fff;border:1px solid var(--vien);border-radius:10px;aspect-ratio:1;display:flex;align-items:center;justify-content:center;padding:11px;box-shadow:0 2px 8px rgba(58,46,34,.05);overflow:hidden;transition:transform .2s, box-shadow .2s} .pt img{max-width:100%;max-height:100%;object-fit:contain;transition:.2s} .pt div:hover{transform:translateY(-2px);box-shadow:0 8px 20px rgba(58,46,34,.10)} .pt div:hover img{transform:scale(1.04)} /* ===== TABLET ===== */ @media (max-width:980px){ .why{grid-template-columns:repeat(2,1fr)} .courses,.news{grid-template-columns:repeat(2,1fr)} .team{grid-template-columns:1fr;gap:26px} .reg .g{grid-template-columns:1fr;gap:28px} .rvpage{grid-template-columns:repeat(2,1fr);gap:14px} .sppage{grid-template-columns:1fr;gap:12px} .pt{grid-template-columns:repeat(6,1fr);gap:9px} } /* ===== ĐIỆN THOẠI ===== */ @media (max-width:680px){ .hero{min-height:auto} .hero .in{padding-block:40px} .hero h1{font-size:26px} /* Co chữ theo bề ngang màn hình để luôn nằm 1 dòng, cả trên điện thoại nhỏ (≤360px) */ .hero h2{font-size:min(15px,calc(4.2vw - 1.6px));letter-spacing:-.006em;white-space:nowrap} .hero p{font-size:13.5px} .btns{flex-direction:column} .btn{width:100%;padding:15px} .stats .g{grid-template-columns:1fr 1fr;gap:3px 16px;padding-block:6px} .stats .n{font-size:17px} .stats .l{font-size:11px;margin-top:0} .stats .sao-n{gap:6px} .stats .sao-n .sao-diem{font-size:17px} .stats .sao-n .luv-sao{font-size:16px} section{padding:36px 0} .shead{margin-bottom:20px} .shead h2{font-size:23px} .why{grid-template-columns:1fr;gap:12px} .wcard{padding:18px 16px;flex-direction:row;gap:13px;align-items:flex-start} .wchip{width:40px;height:40px;margin-bottom:0} .wcard h3{font-size:13.5px;margin-bottom:5px} .wcard p{font-size:12.5px;line-height:1.7} .rvpage{grid-template-columns:1fr;gap:14px} .rv{padding:24px 20px 20px} .rv::before{font-size:78px;top:0;right:14px} .av{width:78px;height:78px} .rv-ai b{font-size:15.5px} .rv p{min-height:auto;font-size:13.5px;margin:0;line-height:1.8} .sppage{grid-template-columns:1fr;gap:10px} .pframe{padding:6px;border-radius:9px} .courses{grid-template-columns:1fr;gap:11px} .cc{flex-direction:row;align-items:stretch} .cc .th{width:112px;flex-shrink:0;aspect-ratio:auto} .tag{top:6px;left:6px;font-size:9px;padding:3px 8px} .cbody{padding:11px 12px} .cbody h3{font-size:13.5px;margin-bottom:3px} .meta{font-size:11.5px;margin-bottom:7px} /* Thẻ nằm ngang → cột chữ chỉ còn ~180px. Cách xếp GIỮ NGUYÊN như PC (dòng phụ trải hết ngang, dưới là giá + nút), chỉ thu cỡ chữ cho vừa. */ .price{column-gap:8px} .new{font-size:16px} .old{font-size:11px} .ud-nho:not(:empty)::before{width:9px;margin:0 7px} /* cột chữ hẹp hơn → gạch ngăn gọn lại */ .cbtn{font-size:10.5px;padding:7px 12px;margin-left:8px} .news{grid-template-columns:1fr;gap:11px} .nc{display:flex;align-items:center} .nc .th{width:112px;flex-shrink:0;aspect-ratio:1} .nc .b{padding:12px 13px} .nc h3{font-size:13px;margin-bottom:0} .nc p{display:none} /* Tin tức: cuộn chậm dần trên mobile, hiện ~3 bài, lộ dần nhiều bài khác */ .news.co-chay{display:block;grid-template-columns:none;height:372px;overflow:hidden;position:relative; -webkit-mask:linear-gradient(180deg,transparent,#000 9%,#000 91%,transparent); mask:linear-gradient(180deg,transparent,#000 9%,#000 91%,transparent)} .news.co-chay .news-track{display:flex;flex-direction:column;will-change:transform;animation:newsChay 34s linear infinite} .news.co-chay .news-track>.nc:nth-child(n+4){display:flex} .news.co-chay .news-dup{display:contents} .news.co-chay .nc{margin-bottom:11px} .news.co-chay:active .news-track{animation-play-state:paused} .pt{grid-template-columns:repeat(6,1fr);gap:5px} .pt div{padding:5px;border-radius:7px;aspect-ratio:5/4} .reg{padding:34px 0} .reg h2{font-size:22px;margin-bottom:8px} .reg p{font-size:13px;line-height:1.6} .reg .g{gap:20px} .reg .luv-form{margin-top:12px} .reg .luv-inp{height:44px} .reg .luv-form__hang{gap:9px} .reg-goi{margin-top:14px} } /* ═══════════ VÂN & ĐỘ NỔI — CHỈ mục "Các khóa học" ═══════════ */ /* Nền DẠ NỈ KEM: khai báo tại khối "DẠ NỈ — Khóa học" phía dưới (tránh bị đè theo thứ tự cascade). Nền sáng nên tiêu đề & chỉ may mép trên dùng mặc định (chữ nâu, chỉ cam). */ /* Thẻ khóa học = NẸP VẢI NÂU (giống khung video Đội ngũ): nổi rõ trên nền linen hồng đất */ body.home section.tint .cc{ background-color:#6f5236; background-image:var(--vai-fine),repeating-linear-gradient(0deg,rgba(255,240,220,.06) 0 1px,transparent 1px 4px),repeating-linear-gradient(90deg,rgba(255,240,220,.05) 0 1px,transparent 1px 4px); background-blend-mode:soft-light,normal,normal; border:0;padding:7px;border-radius:16px;position:relative;overflow:visible; box-shadow:0 3px 7px rgba(58,46,34,.22),0 12px 18px -8px rgba(58,46,34,.26)} body.home section.tint .cc::after{content:'';position:absolute;inset:4px;border:1.2px dashed rgba(236,213,170,.7);border-radius:13px;pointer-events:none;z-index:3} body.home section.tint .cc .th{border-radius:10px 10px 0 0;overflow:hidden} body.home section.tint .cc .cbody{background:#fff;border-radius:0 0 10px 10px} body.home section.tint .cc:hover{box-shadow:0 5px 10px rgba(58,46,34,.24),0 18px 26px -10px rgba(58,46,34,.3)} @media(max-width:680px){ body.home section.tint .cc .th{border-radius:10px 0 0 10px} body.home section.tint .cc .cbody{border-radius:0 10px 10px 0}} /* ═══════════════════ 6.0 · HIỆU ỨNG TRANG CHỦ — ẤN TƯỢNG "WOW" (mượt · chạy GPU) ═══════════════════ */ body.home section{overflow-x:clip} /* chặn tràn ngang khi khối trượt vào */ /* (1) NỀN TẢNG — ẩn rồi trôi lên */ html.js-on body.home .shead, html.js-on body.home .stats .g>div, html.js-on body.home .why .wcard, html.js-on body.home .team>div, html.js-on body.home .courses .cc, html.js-on body.home .news .nc, html.js-on body.home .reg-card .form-chinh, html.js-on body.home .doitac .pt>div, html.js-on body.home .hero .in>*:not(.rule){ opacity:0;transform:translateY(32px); /* ĐỔI NHỊP 17/08/2026 — xem giải thích đầy đủ ở khối "Vì Sao Nên Chọn". Nhịp cũ .16,1,.3,1 vọt 49,4% quãng đường trong 10% thời gian đầu, đỉnh tốc 6,24 lần → mắt đọc ra "giật một cái rồi đứng". --chu-nhip: 17,1% và 2,15 lần → đi đều tay rồi lắng. QUÃNG VÀ THỜI LƯỢNG GIỮ NGUYÊN TUYỆT ĐỐI (32px · .6s/.68s) — điểm đầu, điểm cuối, đồng hồ đều y hệt cũ. Chỉ đổi cách rải tốc ở đoạn giữa. Luật này còn hiệu lực thật cho: .shead · .hero .in>* · .reg-card .form-chinh. Các khối khác đều có luật riêng đè lên bên dưới. */ transition:opacity .6s var(--chu-nhip),transform .68s var(--chu-nhip)} html.js-on body.home .rvl-in{opacity:1 !important;transform:none !important} /* (1b) DẢI SỐ LIỆU — phóng to bật vào (zoom-in) + đếm số */ html.js-on body.home .stats .g>div{transform:scale(.5);transition:opacity .7s ease,transform .9s cubic-bezier(.34,1.56,.64,1)} /* (1c) LOGO ĐỐI TÁC — phóng to bật vào lần lượt */ html.js-on body.home .doitac .pt>div{transform:scale(.72);transition:opacity .6s ease,transform .7s cubic-bezier(.34,1.56,.64,1)} html.js-on body.home .doitac .pt>div:nth-child(3n+2){transition-delay:.06s} html.js-on body.home .doitac .pt>div:nth-child(3n){transition-delay:.12s} /* ╔════════════════════════════════════════════════════════════════════════╗ ║ LOGO ĐỐI TÁC TRÊN MÀN HẸP — 17/08/2026 ║ ╚════════════════════════════════════════════════════════════════════════╝ Luật trên (dùng chung) chạy tốt trên máy tính nhưng KHÔNG ĐỌC RA trên điện thoại, vì logo bé đi 2,5 lần: phóng 0,72→1 trên logo 93px là nhích 26px, còn trên logo 37px chỉ nhích 10px — mắt không bắt được. Thêm nữa nhịp trễ 3 bước (3n) lặp lại hai lần trên một hàng 6 cột, thành ra hai nửa hàng nổ trùng nhau chứ không thành sóng. Ba chỉnh cho màn hẹp: ① phóng mạnh hơn 0,58→1 (nhích 15px thay vì 10px) và trồi thêm 8px ② sóng chạy hết 6 cột rồi mới sang hàng dưới — đọc ra hướng trái→phải ③ kéo dài 0,7s → 0,86s cho kịp nhìn Bố cục, cỡ logo, vị trí KHÔNG ĐỔI — chỉ đổi trạng thái CHỜ và nhịp chạy. front-page.php lo phần nổ sâu hơn (lùi 30% thay vì 12%). */ @media(max-width:820px){ html.js-on body.home .doitac .pt>div{ transform:scale(.58) translateY(8px); transition:opacity .6s ease,transform .86s cubic-bezier(.34,1.56,.64,1)} html.js-on body.home .doitac .pt>div:nth-child(6n+1){transition-delay:0s} html.js-on body.home .doitac .pt>div:nth-child(6n+2){transition-delay:.06s} html.js-on body.home .doitac .pt>div:nth-child(6n+3){transition-delay:.12s} html.js-on body.home .doitac .pt>div:nth-child(6n+4){transition-delay:.18s} html.js-on body.home .doitac .pt>div:nth-child(6n+5){transition-delay:.24s} html.js-on body.home .doitac .pt>div:nth-child(6n){transition-delay:.3s} } /* (2) THẺ — CHỈ trồi lên, KHÔNG thu–phóng. Trước đây thẻ khóa học gánh BA lớp cùng lúc: trồi 60px + thu nhỏ .94 + ảnh quét ngang — nhân với 11 thẻ. Bỏ lớp thu nhỏ thì hai lớp còn lại NỔI RÕ HƠN, không phải yếu đi (luật vàng: một khối tối đa 2 lớp chuyển động). */ html.js-on body.home .courses .cc, html.js-on body.home .news .nc{transform:translateY(32px)} /* NHỊP CỦA THẺ PHẢI ĂN VỚI NHỊP CỦA TẤM RÈM TRONG CHÍNH NÓ. Cả trang chủ dùng chung nhịp .16,1,.3,1 trong 0,6s — loại bung 6,24 lần, vọt 49% quãng đường ngay trong 1/10 thời gian đầu. Ở hầu hết các khối thì nhịp đó gọn gàng. Nhưng riêng thẻ khóa học và tin tức thì bên trong còn một tấm rèm kéo 1,5 giây theo nhịp mềm — thành ra THẺ SNAP VÀO rồi RÈM MỚI BÒ. Hai nhịp đá nhau, mắt đọc ra là giật cục dù không khung hình nào rơi. Nay riêng hai loại thẻ này chuyển sang nhịp chữ (bung 2,15 lần) và kéo dài ra cho khớp: thẻ đậu ở giây 1,05, rèm mở xong ở giây 1,7 — một mạch liền chứ không phải hai động tác rời. CÁC KHỐI KHÁC CỦA TRANG CHỦ GIỮ NGUYÊN. */ html.js-on body.home .courses .cc, html.js-on body.home .news .nc{ transition:opacity .95s var(--chu-nhip),transform 1.05s var(--chu-nhip)} /* (3) ẢNH khóa học & tin tức — QUÉT NGANG trái→phải (lật màn). KHÔNG áp cho video. ĐƯỜNG CẮT ĐẶT TRÊN TẤM ẢNH, KHÔNG PHẢI TRÊN CẢ Ô. Bản trước cắt chính thẻ .th — mà cắt cả thẻ là cắt luôn NỀN của nó. Nghĩa là trong lúc rèm chưa quét tới, không phải "thấy nền phía sau rèm" mà là KHÔNG THẤY GÌ CỦA Ô ĐÓ HẾT: cái lộ ra chỉ là nền vải nâu của thẻ bao ngoài. Nên có đặt nền trắng cho ô cũng vô ích, nó bị cắt mất theo. Nay chỉ cắt tấm ảnh bên trong. Ô giữ nguyên, nền vải rèm trắng của ô nằm im tại chỗ, và tấm ảnh quét ngang qua NÓ — mới đúng là một tấm rèm kéo mở ra. Phải ghi transform .4s vào danh sách: ảnh đã dùng transform cho nhịp phóng to khi trỏ chuột, khai transition mới mà quên là xoá mất nhịp đó. */ /* ══ RÈM LÀ MỘT TẤM VẢI THẬT TRƯỢT ĐI — KHÔNG CÒN LÀ PHÉP CẮT HÌNH ═════════ Anh Hưng báo khúc này "không mượt, rất giật cục". Gốc nằm ở KỸ THUẬT chứ không ở thời lượng: clip-path là thuộc tính trình duyệt KHÔNG giao cho card đồ hoạ được — mỗi khung hình nó phải VẼ LẠI cả vùng ảnh trên luồng chính. Ở đây vùng đó lại có nền tweed vân nhiễu + 3 lớp chuyển sắc chồng lên, và ba thẻ cùng chạy gần như một lượt (chỉ lệch 0,09s). 1,5 giây × 60 khung × 3 thẻ = ngót 270 lượt vẽ lại một vùng nặng — máy yếu là khựng. Nay tấm rèm là một PHẦN TỬ THẬT (::after) mang đúng vân vải tweed đó, phủ lên ảnh rồi TRƯỢT sang phải bằng transform. transform là thứ trình duyệt giao thẳng cho card đồ hoạ: chạy riêng một lớp, KHÔNG vẽ lại gì cả. Ảnh bên dưới nằm im suốt. Được thêm: động tác này đọc ra đúng nghĩa "kéo rèm" hơn — mắt thấy tấm vải di chuyển đi, thay vì thấy ảnh bị xén dần. */ /* MỐC ĐỊNH VỊ — BẮT BUỘC. .cc .th vốn đã có position:relative, nhưng .nc .th thì KHÔNG. Thiếu nó thì tấm rèm bám vào tổ tiên có định vị gần nhất là cả THẺ tin tức: đo trên máy 375px, rèm trượt 334px trong khi ô ảnh chỉ rộng 112px — tức nó đang phủ luôn cả tiêu đề bài viết rồi mới kéo đi. */ html.js-on body.home .courses .cc .th, html.js-on body.home .news .nc .th{position:relative} html.js-on body.home .courses .cc .th::after, html.js-on body.home .news .nc .th::after{ content:'';position:absolute;inset:0;z-index:2;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='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(%23tw)'%20opacity='0.35'/%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); /* Trễ 0,2s: để tấm thẻ kịp đậu vào chỗ rồi rèm mới kéo. Đọc ra là "thẻ tới — rồi rèm mở", một mạch; chứ không phải hai thứ cùng động một lúc. */ transition:transform var(--rem-vua) var(--rem-nhip) .2s} /* Mép rèm có một vệt sáng mảnh — chỗ ánh sáng hắt vào nếp vải đang bị kéo. Nhờ nó mắt bám được vào MÉP rèm, nên đọc ra là tấm vải đang trượt. */ html.js-on body.home .courses .cc .th::after, html.js-on body.home .news .nc .th::after{ box-shadow:inset -1px 0 0 rgba(255,226,186,.22), 2px 0 10px rgba(0,0,0,.28)} html.js-on body.home .courses .cc.rvl-in .th::after, html.js-on body.home .news .nc.rvl-in .th::after{transform:translate3d(101%,0,0)} /* ══ NỀN SAU TẤM RÈM — TWEED SẪM (đã chốt) ══════════════════════════════ Trong lúc rèm (ảnh) chưa quét tới, thứ khách nhìn thấy là nền của ô ảnh. Nay là ĐÚNG LOẠI VẢI TWEED của khung thẻ, chỉ SẪM HƠN BA BẬC: khung #6F5236 (độ sáng 87) → nền #2F2317 (độ sáng 37). Vì sao cách này chắc tay nhất trong 13 phương án đã thử: nền và khung là MỘT BỘ, phân biệt nhau bằng ĐỘ SÁNG chứ không bằng chất liệu. Không có loại vải lạ nào chen vào, mà ảnh vẫn bật hẳn lên khỏi nền tối. Quầng sáng nhẹ ở đỉnh để nền không phẳng lì như một mảng sơn. */ body.home .courses .cc .th{ /* CHỈ CÒN MÀU PHẲNG — bỏ 4 lớp hoạ tiết + chế độ hoà trộn (18/08/2026). Lớp vải này nằm DƯỚI ảnh. Đo tận nơi: ảnh 303x190 phu kin khung 303x190 bằng object-fit:cover, nên hoạ tiết ở đây KHÔNG BAO GIỜ nhìn thấy sau khi ảnh tải xong. Nó chỉ hiện trong tích tắc lúc ảnh chưa về — và ngay cả lúc đó cũng bị tấm rèm ::after (vẫn giữ đủ hoạ tiết) che kín. Bỏ đi thì 27 khung ảnh trên trang chủ hết phải tính bộ lọc nhiễu SVG và hoà trộn soft-light. Sau khi ảnh tải xong, hình thức GIỐNG HỆT từng điểm ảnh — vì phần đó vốn đã bị ảnh che. GIỮ NGUYÊN màu #2F2317 để lúc chờ ảnh vẫn ra đúng sắc nâu của web. */ background-color:#2F2317} /* Thẻ TIN TỨC dùng CHUNG kiểu rèm quét ngang với thẻ khóa học, nên nền sau rèm cũng phải cùng một chất — nếu không, cùng một trang mà hai khối rèm mở ra hai màu khác nhau, đọc ra ngay là thiếu nhất quán. */ body.home .news .nc .th{ /* CHỈ CÒN MÀU PHẲNG — bỏ 4 lớp hoạ tiết + chế độ hoà trộn (18/08/2026). Lớp vải này nằm DƯỚI ảnh. Đo tận nơi: ảnh 303x190 phu kin khung 303x190 bằng object-fit:cover, nên hoạ tiết ở đây KHÔNG BAO GIỜ nhìn thấy sau khi ảnh tải xong. Nó chỉ hiện trong tích tắc lúc ảnh chưa về — và ngay cả lúc đó cũng bị tấm rèm ::after (vẫn giữ đủ hoạ tiết) che kín. Bỏ đi thì 27 khung ảnh trên trang chủ hết phải tính bộ lọc nhiễu SVG và hoà trộn soft-light. Sau khi ảnh tải xong, hình thức GIỐNG HỆT từng điểm ảnh — vì phần đó vốn đã bị ảnh che. GIỮ NGUYÊN màu #2F2317 để lúc chờ ảnh vẫn ra đúng sắc nâu của web. */ background-color:#2F2317} /* (4) HERO — nền phóng điện ảnh (Ken Burns) LIÊN TỤC qua lại + gạch nhấn tự vẽ */ /* Bỏ will-change: đo được ảnh bìa 1569×620 ≈ 3,7 MB bị ghim VĨNH VIỄN sau một hoạt ảnh chỉ chạy đúng một lần trong 11 giây. */ html.js-on body.home .hero img.bg{animation:fpHeroZoom 11s ease-out 2.4s both;transform-origin:52% 42%} @keyframes fpHeroZoom{from{transform:scale(1.24)}to{transform:scale(1.05)}} /* ╔════════════════════════════════════════════════════════════════════════╗ ║ HAI GẠCH NGANG — THÔI KÉO DÃN "width", CHUYỂN SANG scaleX 17/08/2026 ║ ╚════════════════════════════════════════════════════════════════════════╝ Bản cũ vẽ gạch bằng cách kéo width từ 0 lên. width là thuộc tính BỐ CỤC: mỗi khung hình trình duyệt phải TÍNH LẠI BỐ CỤC rồi VẼ LẠI. Nhân với 6 tiêu đề mục + 1 gạch bìa, trên máy yếu là nguồn giật thật. scaleX chạy thẳng trên bộ tổng hợp đồ hoạ — không tính lại, không vẽ lại. HÌNH THỨC GIỐNG HỆT TỪNG ĐIỂM ẢNH, đã kiểm trước khi đổi: · cả hai là thanh ĐẶC, VUÔNG ĐẦU, MỘT MÀU, cao 3px — không bo tròn, không chuyển sắc, nên scaleX không làm méo gì (nó không đụng chiều cao) · gạch bìa căn TRÁI, cũ nở từ mép trái → đặt mốc "left center" cho khớp · gạch chân tiêu đề căn GIỮA (margin auto), cũ nở đều ra hai bên → mốc mặc định của scaleX cũng là giữa, khớp sẵn · không xê dịch bố cục: mỗi cái chiếm riêng một dòng, chiều cao không đổi Gạch bìa: bề rộng đích là 60px (không phải 56px của luật nền) — nay ghi thẳng vào trạng thái chờ vì scaleX không đổi được width nữa. */ html.js-on body.home .hero .in>.rule{ width:60px;opacity:0;transform:scaleX(0);transform-origin:left center; transition:transform 1s var(--chu-nhip),opacity .6s} html.js-on body.home .hero .in>.rule.rvl-in{opacity:1;transform:none} /* (5) TIÊU ĐỀ MỤC — gạch chân tự vẽ (width 44px giữ ở luật nền, dòng 59) */ html.js-on body.home .shead .u{transform:scaleX(0); transition:transform 1s var(--chu-nhip) .3s} html.js-on body.home .shead.rvl-in .u{transform:none} /* (6) ICON "Vì sao" — hiện dịu, KHÔNG nảy, KHÔNG xoay ╔════════════════════════════════════════════════════════════════════════╗ ║ SỬA 17/08/2026 — bản trước TỰ HUỶ hiệu ứng hiện của chính nó ║ ╚════════════════════════════════════════════════════════════════════════╝ Bản trước viết: .wchip { transition:opacity .6s …, transform .7s … } .rvl-in .wchip { opacity:1; transform:none } .rvl-in .wchip { transition:transform .2s } ← dòng này Dòng cuối cùng có ĐÚNG BẰNG độ ưu tiên với dòng trên và đứng sau, nên nó THAY TOÀN BỘ thuộc tính transition. Mà lớp rvl-in lại được gắn ĐÚNG LÚC hiệu ứng hiện bắt đầu → nhịp .7s dịu dàng chưa kịp dùng đã bị thay bằng .2s, và opacity thì mất hẳn transition nên nhảy phát một. Kết quả thật: biểu tượng KHÔNG "hiện dịu" mà BẬT RA ngay. Ý đồ của người viết (rút ngắn nhịp SAU khi hiện xong, để rê chuột đáp nhanh) là đúng, nhưng CSS không nói được chữ "sau khi". NAY: phần hiện chuyển sang @keyframes. Animation tự mang khung hình đầu nên không cần transition, nhờ đó thuộc tính transition được để trống hẳn cho việc rê chuột — hai việc không giẫm chân nhau nữa. Trong lúc animation chạy, giá trị của nó luôn thắng transition, nên cũng không có chuyện chạy chồng hai lớp. */ html.js-on body.home .why .wcard .wchip{opacity:0;transform:scale(.85)} html.js-on body.home .why .wcard.rvl-in .wchip{ opacity:1;transform:none; animation:visaoChipHien .8s var(--chu-nhip) .16s backwards; transition:transform .2s} @keyframes visaoChipHien{from{opacity:0;transform:scale(.85)}} html.js-on body.home .why .wcard.rvl-in:hover .wchip{transform:scale(1.08) rotate(-4deg)} @media(prefers-reduced-motion:reduce){ html.js-on body.home .why .wcard.rvl-in:hover .wchip{transform:none}} /* Vì Sao Nên Chọn — thẻ hiện MỀM MƯỢT ╔════════════════════════════════════════════════════════════════════════╗ ║ ĐỔI NHỊP 17/08/2026 — anh Hưng: "các khối hiện lên cho mượt mà hơn" ║ ╚════════════════════════════════════════════════════════════════════════╝ Thủ phạm là nhịp cubic-bezier(.16,1,.3,1). Đo ra: đi được sau 10% thời gian : 49,4% quãng đường đỉnh tốc / tốc trung bình : 6,24 lần dành cho 20% chót : 77% thời gian Tức là thẻ VỌT gần nửa đường ngay tích tắc đầu, rồi bò nốt phần còn lại trong suốt thời gian dài — mắt đọc ra "giật một cái rồi đứng im", chứ không phải "trồi lên". Đây CHÍNH LÀ nhịp mà chú thích trong bien.css đã kết luận phải bỏ; các tab khác đã đổi sang --chu-nhip từ lâu, riêng khối trang chủ này bị bỏ sót. --chu-nhip đo lại: 17,1% sau 10% thời gian · đỉnh tốc 2,15 lần · 56% thời gian dành cho 20% chót. Đều tay suốt rồi lắng dần — đúng nghĩa trồi lên. Trên điện thoại --chu-nhip còn tự mềm hơn nữa (xem bien.css). Kèm hai chỉnh nhỏ: quãng 32→28px (đi ngắn hơn thì cùng thời gian sẽ êm hơn) và tách nhịp mờ dần ra ngắn hơn nhịp trồi (.72s so với 1,05s) — thẻ rõ mặt trước, rồi mới lắng nốt vào chỗ. Cảm giác "đáp xuống" thay vì "dừng phựt". */ html.js-on body.home .why .wcard{transform:translateY(28px); transition:opacity .72s ease-out,transform 1.05s var(--chu-nhip)} /* Đội ngũ — hiện MƯỢT NHẸ: trồi nhẹ 28px + mờ dần, đồng nhất, bỏ trượt ngang Đổi nhịp 17/08/2026 — quãng 28px và thời lượng .85s/.95s GIỮ NGUYÊN. */ html.js-on body.home .team>div{transform:translateY(28px); transition:opacity .85s var(--chu-nhip),transform .95s var(--chu-nhip)} /* ╔════════════════════════════════════════════════════════════════════════╗ ║ BĂNG NHẬN XÉT — VIỆC CÒN DỞ, NAY VIẾT NỐT 17/08/2026 ║ ╚════════════════════════════════════════════════════════════════════════╝ Tên .sl có mặt trong danh sách hiệu ứng của front-page.php VÀ trong khối giảm chuyển động ở cuối tệp này — tức người viết ĐÃ ĐỊNH cho nó hiệu ứng. Nhưng luật CSS thì chưa bao giờ được viết: không trạng thái chờ, không nhịp. Lớp rvl-in được gắn vào rồi KHÔNG CÓ GÌ XẢY RA. Đo được: đây là khối DUY NHẤT trên trang chủ hiện ra trơ trọi trong khi mọi thứ quanh nó đều động. Nay dùng đúng bộ mặt chung của trang: trồi 28px + mờ dần, nhịp --chu-nhip. LƯU Ý KỸ THUẬT: có HAI băng nhận xét (.sl-rv-pc và .sl-rv-mb), CSS ẩn một cái bằng display:none tuỳ khổ màn. Phần tử display:none KHÔNG BAO GIỜ lọt vào tầm bộ gác cửa, nên cái đang ẩn sẽ vĩnh viễn không được gắn rvl-in — đổi khổ màn sau khi tải trang là nó hiện ra với opacity 0, MẤT TRẮNG. front-page.php xử lý bằng cách nở CẢ HAI cùng lúc. */ html.js-on body.home .sl{opacity:0;transform:translateY(28px); transition:opacity .72s ease-out,transform 1.05s var(--chu-nhip)} /* (7) ĐA DẠNG HƯỚNG (desktop) — mỗi khối vào một kiểu */ @media(min-width:769px){ html.js-on body.home .reg-card .form-chinh{transform:translateY(56px) scale(.96)} } /* (8) NHỊP TRỄ (stagger) — dồn dập, lần lượt */ html.js-on body.home .hero .in>*:nth-child(1){transition-delay:.15s} html.js-on body.home .hero .in>*:nth-child(2){transition-delay:.32s} html.js-on body.home .hero .in>*:nth-child(3){transition-delay:.46s} html.js-on body.home .hero .in>*:nth-child(4){transition-delay:.6s} html.js-on body.home .hero .in>*:nth-child(5){transition-delay:.74s} html.js-on body.home .stats .g>div:nth-child(2){transition-delay:.1s} html.js-on body.home .stats .g>div:nth-child(3){transition-delay:.2s} html.js-on body.home .stats .g>div:nth-child(4){transition-delay:.3s} /* .why đã tách xuống khối (8b) riêng — xem lý do ở đó. */ html.js-on body.home .courses .cc:nth-child(3n+2), html.js-on body.home .news .nc:nth-child(3n+2){transition-delay:.09s} html.js-on body.home .courses .cc:nth-child(3n), html.js-on body.home .news .nc:nth-child(3n){transition-delay:.18s} /* (8b) NHỊP TRỄ KHỐI "VÌ SAO" — PHẢI ĐI THEO SỐ CỘT THẬT ╔════════════════════════════════════════════════════════════════════════╗ ║ SỬA 17/08/2026 — bản trước dùng nth-child(3n) cho MỌI khổ màn ║ ╚════════════════════════════════════════════════════════════════════════╝ Khối này có 6 thẻ và đổi số cột theo màn: ≥981px 3 cột · 681–980px 2 cột · ≤680px 1 cột. Nhưng nhịp trễ lại đóng đinh theo kiểu 3 cột ở mọi khổ. Hậu quả đo được ở khổ 2 CỘT — hàng thứ hai là thẻ 3 và 4: thẻ 3 (bên TRÁI) trễ .18s thẻ 4 (bên PHẢI) trễ 0 → thẻ bên PHẢI hiện TRƯỚC thẻ bên trái. Mắt đọc ngược chiều, thấy lộn xộn. Ở khổ 1 CỘT còn vô nghĩa hơn: mỗi thẻ tự vào tầm mắt một mình, nhưng thẻ thứ 3 vẫn phải chờ .18s vô cớ trong khi thẻ thứ 4 hiện ngay — cùng một động tác mà lúc nhanh lúc chậm, đúng cảm giác thiếu mượt. NAY mỗi khổ một luật, và luật nào cũng là "trái trước, phải sau". */ @media(min-width:981px){ /* 3 cột */ html.js-on body.home .why .wcard:nth-child(3n+2){transition-delay:.10s} html.js-on body.home .why .wcard:nth-child(3n){transition-delay:.20s} } @media(min-width:681px) and (max-width:980px){ /* 2 cột */ html.js-on body.home .why .wcard:nth-child(2n){transition-delay:.10s} } /* ≤680px — 1 cột: KHÔNG trễ. Mỗi thẻ vào tầm mắt một mình nên nhịp trễ chỉ làm chậm vô cớ, không tạo được đợt sóng nào cả. */ /* ╔════════════════════════════════════════════════════════════════════════╗ ║ (8c) HIỆN XONG RỒI THÌ TRẢ THẺ VỀ CHO VIỆC RÊ CHUỘT 17/08/2026 ║ ╚════════════════════════════════════════════════════════════════════════╝ MỘT GỐC SINH RA HAI LỖI, cả hai đều chỉ hiện trên máy tính (điện thoại không có rê chuột) nên lọt lưới bấy lâu: ① THẺ KHÔNG NHẤC LÊN ĐƯỢC NỮA. Luật .rvl-in đặt transform:none kèm dấu ưu tiên tuyệt đối. Dấu này thắng MỌI luật thường bất kể độ ưu tiên, nên .wcard:hover{translateY (-2px)} và .nc:hover{translateY(-3px)} vĩnh viễn không có tác dụng. Đã thử nghiệm: tắt hiệu ứng rồi đo, cả hai đứng yên tuyệt đối. (.cc thẻ Khoá học KHÔNG dính — nó vốn không có động tác nhấc, chỉ đổi bóng và phóng ảnh; ảnh nằm ở thẻ con nên cũng không bị khoá.) ② BÓNG ĐỔ ĐỔI PHỰT MỘT CÁI, KHÔNG CÓ NHỊP — dính CẢ BA loại thẻ. Luật gốc muốn bóng đổi mượt: .wcard{transition:.18s} · .cc{transition: box-shadow .22s} · .nc{transition:.18s}. Nhưng luật hiệu ứng hiện ghi đè TOÀN BỘ thuộc tính transition thành "opacity, transform", mà box-shadow không có trong danh sách → mất nhịp hoàn toàn. Đo được: cả 3 thẻ đều trả về "opacity, transform". CÁCH CHỮA. Hai luật kia CẦN THIẾT trong lúc thẻ đang hiện, chỉ sai ở chỗ chúng ngồi lì SAU KHI hiện xong. CSS không có cách nói "sau khi", nên front-page.php gắn thêm lớp rvl-xong sau 1400ms. Từ lúc đó: · nhịp trả về ngắn, có cả box-shadow · luật rê chuột dùng dấu ưu tiên tuyệt đối + độ ưu tiên CAO HƠN .rvl-in (6 lớp so với 3) nên thắng lại một cách hợp lệ. KHÔNG đụng gì tới hiệu ứng hiện — 1400ms là lúc nó đã xong hẳn. */ html.js-on body.home .why .wcard.rvl-xong, html.js-on body.home .courses .cc.rvl-xong, html.js-on body.home .news .nc.rvl-xong{ transition:transform .2s ease-out,box-shadow .22s ease-out} /* Chỉ máy có chuột thật mới bật. Trên màn cảm ứng, :hover hay bị "dính" lại sau khi chạm — thẻ nhấc lên rồi nằm luôn ở đó, xấu hơn là không có. */ @media(hover:hover){ html.js-on body.home .why .wcard.rvl-xong:hover{transform:translateY(-2px) !important} html.js-on body.home .news .nc.rvl-xong:hover{transform:translateY(-3px) !important} } @media(prefers-reduced-motion:reduce){ html.js-on body.home .why .wcard.rvl-xong:hover, html.js-on body.home .news .nc.rvl-xong:hover{transform:none !important} } /* (9) GIẢM CHUYỂN ĐỘNG */ @media(prefers-reduced-motion:reduce){ html.js-on body.home .shead,html.js-on body.home .stats .g>div,html.js-on body.home .why .wcard, html.js-on body.home .team>div,html.js-on body.home .sl,html.js-on body.home .courses .cc, html.js-on body.home .news .nc,html.js-on body.home .reg-card .form-chinh,html.js-on body.home .doitac .pt>div, html.js-on body.home .hero .in>*,html.js-on body.home .why .wcard .wchip{ /* animation:none — biểu tượng "Vì sao" nay hiện bằng @keyframes chứ không bằng transition nữa, nên phải tắt riêng, tắt transition thôi là hụt. */ opacity:1 !important;transform:none !important; transition:none !important;animation:none !important} html.js-on body.home .courses .cc .th::after,html.js-on body.home .news .nc .th::after{display:none !important} /* Hai gạch ngang nay vẽ bằng scaleX chứ không kéo width nữa → phải tắt transform, không phải ép width. Tiện thể hết luôn lỗi cũ: dòng này trước đây ép CẢ HAI về 44px, khiến gạch trên bìa bị ngắn mất 16px (đúng ra là 60px) với người bật giảm chuyển động. Nay mỗi cái tự giữ bề rộng đúng. */ html.js-on body.home .shead .u,html.js-on body.home .hero .in>.rule{transform:none !important} html.js-on body.home .hero img.bg{animation:none !important} } /* ═══════════════════ 6.0 · TRANG CHỦ — CHỮ & ẢNH BAY NHIỀU HƯỚNG (bổ sung) ═══════════════════ */ @media(min-width:769px){ /* HERO — mỗi dòng bay vào một hướng ( :not(.rule) để thắng specificity rule nền ) */ html.js-on body.home .hero .in>h1:not(.rule){transform:translateX(-72px)} html.js-on body.home .hero .in>h2:not(.rule){transform:translateX(72px)} html.js-on body.home .hero .in>p:not(.rule){transform:translateX(-50px)} html.js-on body.home .hero .in>.btns:not(.rule){transform:translateY(56px)} /* KHÓA HỌC & TIN TỨC — cột trái từ trái, cột phải từ phải, cột giữa trồi lên. ĐÃ BỎ scale(.94): thẻ chỉ TRƯỢT + TRỒI, còn lớp thứ hai là ảnh quét ngang. Đúng luật vàng — hai lớp, không phải ba. Quãng trượt giảm 64→44px cho khớp nhịp mới (32px trồi) — bay ngang quá xa thì mắt phải đuổi theo. */ html.js-on body.home .courses .cc:nth-child(3n+1), html.js-on body.home .news .nc:nth-child(3n+1){transform:translateX(-44px) translateY(20px)} html.js-on body.home .courses .cc:nth-child(3n), html.js-on body.home .news .nc:nth-child(3n){transform:translateX(44px) translateY(20px)} } /* ═══════════════════ 6.1 · HỆ VẢI + ĐƯỜNG MAY — TRANG CHỦ NHƯ MỘT TÁC PHẨM CẮT MAY ═══════════════════ */ /* Hai công thức vải --vai-fine và --vai-tweed đã chuyển sang bien.css (:root) ngày 21/08/2026. LÝ DO: trước đây chúng khai báo trong body.home nên CHỈ trang chủ mới có. Menu đầu trang xuất hiện ở MỌI trang mà cũng cần dùng vải, nên phải nâng lên phạm vi toàn web, nếu không các trang trong sẽ mất nền vải. Giá trị giữ nguyên từng ký tự, trang chủ không đổi gì. */ /* nếp gấp mép trên + position cho đường may */ body.home .stats,body.home section.dark,body.home section.tint,body.home .reg-card,body.home .doitac,body.home .tin-tuc{ position:relative;box-shadow:inset 0 9px 13px -9px rgba(40,28,18,.22)} /* VẢI — Đội ngũ + Sản phẩm: dạ tweed nâu đậm */ body.home section.dark{ background-color:#453425; background-image:var(--vai-tweed),repeating-linear-gradient(45deg,rgba(255,238,214,.05) 0 1px,transparent 1px 5px),linear-gradient(180deg,rgba(0,0,0,.16),transparent 24%,transparent 82%,rgba(0,0,0,.17)); background-blend-mode:soft-light,overlay,normal} /* Dải số liệu trang chủ — TWEED đậm hơn 1 bậc (lùi lại, không hút mắt khỏi bìa; vẫn cùng chất vải) */ body.home .stats{background-color:#352718} /* GABARDINE — Khóa học: vải TWILL CHÉO 63° tông HỒNG KEM dịu (vải may vest) — sớ chéo mảnh + quầng sáng + vignette */ body.home section.tint{ background-color:var(--linen-mau); background-image:var(--linen-anh); background-blend-mode:var(--linen-hoa)} /* VẢI — Đăng ký (nền ngoài form): LINEN HỒNG ĐẤT — GIỐNG mục Các Khóa Học */ body.home .reg-card{ background-color:var(--linen-mau); background-image:var(--linen-anh); background-blend-mode:var(--linen-hoa)} /* Thẻ form đăng ký — DẠ TWEED (giống Đội ngũ), nổi trên nền muslin, giữ viền đứt như đường may */ body.home .reg-card .form-chinh{ background-color:#453425; background-image:var(--vai-tweed),repeating-linear-gradient(45deg,rgba(255,238,214,.05) 0 1px,transparent 1px 5px),linear-gradient(180deg,rgba(0,0,0,.16),transparent 24%,transparent 82%,rgba(0,0,0,.17)); background-blend-mode:soft-light,overlay,normal} /* VẢI — Đối tác: ĐỂ TRỐNG (trong suốt) cho giống nền Tin Tức — nền trắng + vân kẻ chéo mờ của body */ /* Vì Sao + Nhận xét: ĐỂ TRỐNG (trong suốt) giống nền Tin Tức — hiện nền trắng + vân kẻ chéo mờ của body */ /* ĐƯỜNG MAY dải số liệu — chỉ KEM mảnh, cùng nét & màu chỉ với header */ body.home .stats::before{ content:'';position:absolute;left:14px;right:14px;top:4px;height:1px;z-index:4;pointer-events:none; background:repeating-linear-gradient(90deg,rgba(236,213,170,.38) 0 4px,transparent 4px 9px)} /* ĐƯỜNG MAY các mảng khác — topstitch to (cam) như ban đầu */ body.home section.dark::before,body.home section.tint::before,body.home .reg-card::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} /* ĐƯỜNG MAY Tin Tức — MŨI MAY YÊN NGỰA (saddle stitch) chỉ vàng, vắt ngang khe nối với khối nâu */ body.home .tin-tuc::before{ content:'';position:absolute;left:26px;right:26px;top:-7px;height:14px;z-index:4;pointer-events:none; background-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='8'%20height='14'%3E%3Cline%20x1='2.2'%20y1='3.4'%20x2='5.8'%20y2='11.4'%20stroke='rgba(60,38,14,.5)'%20stroke-width='2'%20stroke-linecap='round'/%3E%3Cline%20x1='1.9'%20y1='2.8'%20x2='5.5'%20y2='10.8'%20stroke='%23E68C60'%20stroke-width='1.7'%20stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat:repeat-x;background-position:center} @media(max-width:760px){ body.home .stats::before{left:10px;right:10px} body.home section.dark::before,body.home section.tint::before,body.home .reg-card::before,body.home .tin-tuc::before{left:16px;right:16px} /* mobile: mũi yên ngựa nhỏ tinh (10px, nét 1.15, có bóng chỉ) */ body.home .tin-tuc::before{height:10px;top:-5px; background-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='6'%20height='10'%3E%3Cline%20x1='1.7'%20y1='2.6'%20x2='4.5'%20y2='8.1'%20stroke='rgba(70,45,18,.32)'%20stroke-width='1.3'%20stroke-linecap='round'/%3E%3Cline%20x1='1.5'%20y1='2.2'%20x2='4.3'%20y2='7.7'%20stroke='%23c39d49'%20stroke-width='1.15'%20stroke-linecap='round'/%3E%3C/svg%3E")}} /* Khung VẢI KEM + đường may quanh video Đội Ngũ — nằm NGOÀI video (video nguyên vẹn) */ body.home .team .vid-khung{ position:relative;padding:8px;border-radius:22px; background-color:#6f5236; background-image:var(--vai-fine),repeating-linear-gradient(0deg,rgba(255,240,220,.06) 0 1px,transparent 1px 4px),repeating-linear-gradient(90deg,rgba(255,240,220,.05) 0 1px,transparent 1px 4px); background-blend-mode:soft-light,normal,normal; box-shadow:0 12px 32px rgba(0,0,0,.32)} body.home .team .vid-khung .vid{box-shadow:none} body.home .team .vid-khung::after{ content:'';position:absolute;inset:5px;border:1.3px dashed rgba(236,213,170,.7);border-radius:17px;pointer-events:none;z-index:3} /* ══ MÁY NHỎ (≤400px) — nấc thu cuối cho khối giá ══ Máy 360px chỉ còn ~178px cho cột chữ. Thu một nấc nữa để giá và nút vẫn nằm đúng 2 dòng, không bị đẩy xuống thành 3 dòng. */ @media(max-width:400px){ .cc .th{width:104px} .price{column-gap:6px} .new{font-size:15px} .old{font-size:10.5px} .ud-nho{font-size:10.5px} .cbtn{padding:7px 10px;letter-spacing:.2px;margin-left:6px} } /* 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 .hero{min-height:var(--bia-vua-man-dt)} } /* ══ THẺ TIN TRONG DẢI CHẠY PHẢI HIỆN SẴN (sửa 21/08/2026) ══════════════════ LỖI TÌM RA khi rà soát trước lúc lên sóng — đo trên khổ 375px: 16 thẻ tin, chỉ 3 thẻ hiện, 13 thẻ độ mờ = 0 dải tin chạy tới đâu cũng có 1–2 Ô TRỐNG TRƠN trong khung nhìn NGUYÊN NHÂN: mục Tin tức trên điện thoại là một DẢI TỰ CHẠY (newsChay 34s, trượt dọc vô hạn). Hệ hiệu ứng hiện-dần lại ẩn sẵn từng thẻ rồi chờ bộ canh báo "thẻ đã vào tầm mắt" mới cho hiện. Nhưng thẻ nằm trong dải đang trượt: lúc bộ canh xét thì chúng còn ở ngoài khung, không bao giờ được gọi tên — rồi dải cứ thế đẩy chúng vào giữa màn trong tình trạng VÔ HÌNH. Hai cơ chế chuyển động chồng lên nhau, và cái nào cũng tưởng cái kia lo. CÁCH SỬA: trong dải chạy thì BỎ HẲN hiệu ứng hiện-dần. Bản thân dải đã là chuyển động rồi, thêm một lớp hiện-dần nữa vừa thừa vừa sinh lỗi. Chỉ gỡ độ mờ và độ dời ban đầu — KHÔNG dùng transform:none để không chặn hiệu ứng nhấc thẻ khi khách chạm vào. CHỈ ÁP Ở KHỔ ≤680px — đúng khổ mà dải mới thật sự chạy (xem luật newsChay). Ban đầu em quên khoanh khổ, thành ra trên máy tính 3 thẻ tin cũng mất luôn hiệu ứng hiện dần dù ở đó không có dải chạy nào. */ @media (max-width:680px){ /* PHẢI PHỦ CẢ .news-dup: dải nối vòng liền mạch bằng một BẢN NHÂN BẢN của cụm thẻ. Lần sửa đầu chỉ nhắm .news-track nên 16 thẻ trong bản nhân bản vẫn vô hình — đo lại mới lòi ra. */ html.js-on body.home .news.co-chay .news-track > .nc, html.js-on body.home .news.co-chay .news-dup > .nc{ opacity:1; transform:none} }