/* ve-luvinus.css — CSS riêng TRANG VỀ LUVINUS. Dùng chung biến bien.css. */
/* Nền trang = TRẮNG vân kẻ chéo mờ (giống Vì Sao trang chủ); phủ cả body để không hở nền lệch tông */
body.page-template-ve-luvinus,
.vl-page{
background-color:#ffffff;
background-image:
url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='10'%20height='10'%3E%3Cpath%20d='M-1%2011%2011%20-1M-1%201%201%20-1M9%2011%2011%209'%20stroke='rgba(120,92,64,0.05)'%20stroke-width='1'/%3E%3Cpath%20d='M-1%20-1%2011%2011M9%20-1%2011%201M-1%209%201%2011'%20stroke='rgba(120,92,64,0.04)'%20stroke-width='1'/%3E%3C/svg%3E");
color:var(--chu-chinh);font-size:17px;line-height:1.85}
.vl-page p{margin:0 0 22px;color:#2C2822}
.vl-page strong{font-weight:700;color:var(--chu-chinh)}
/* Đồng bộ bề rộng nội dung ~ TRANG CHỦ: mọi khối .cot/.doi = 1080px căn giữa
(kể cả khối đứng riêng NGOÀI .khung như mục "Lĩnh vực"). */
.cot{max-width:1050px;margin:0 auto}
/* Dải thông tin dưới bìa cũng thu về 1050 cho khớp nội dung (chỉ ≤1500px) */
@media(min-width:981px) and (max-width:1500px){ .dai .khung{max-width:1050px} }
.vl-page h2{font-family:var(--font-tieu-de);font-weight:700;font-size:clamp(27px,3.4vw,40px);line-height:1.24;letter-spacing:.3px;margin:0 0 24px}
.vl-page h3{font-family:var(--font-tieu-de);font-weight:700;font-size:clamp(20px,2.2vw,25px);line-height:1.32;margin:0 0 12px}
.bai a:not(.nut-lon):not(.nut-vien):not(.the):not(.nut-nho){color:var(--cam-tram);font-weight:600;box-shadow:inset 0 -1px 0 rgba(194,92,62,.35)}
.bai a:not(.nut-lon):not(.nut-vien):not(.the):not(.nut-nho):hover{box-shadow:inset 0 -2px 0 var(--cam-tram)}
/* HERO */
/* Dải .dai của tab này đo được 53px (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.
56 = 53 + 3, xem giải thích ở --cao-dai-bia trong bien.css. */
:root{--cao-dai-bia:56px;--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:flex;align-items:flex-end;overflow:hidden}
@media(min-width:761px){.bia{min-height:var(--bia-vua-man)}.bia>img{object-position:center 62%}} /* PC: bìa 500px + hạ khung để hàng học viên nâng lên trên, không bị chữ che */
.bia>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.bia::after{content:'';position:absolute;inset:0;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 .khung{position:relative;z-index:2;padding:0 24px 20px;width:100%;text-align:center}
.bia .chu-bia::before{content:none}
.bia .cham-ngon{margin:0 0 14px;color:var(--chu-phu-toi);font-size:11.5px;font-weight:500;letter-spacing:.34em;text-transform:uppercase;line-height:1.4;text-shadow:0 1px 12px rgba(46,42,38,.6)}
.bia h1{font-family:var(--font-bia);font-weight:600;text-transform:uppercase;letter-spacing:.01em;font-size:clamp(25px,4.7vw,43px);line-height:1.14;color:#fff;text-shadow:0 2px 24px rgba(46,42,38,.55)}
.bia .gach{width:52px;height:2px;background:var(--cta);margin:16px auto 0;border-radius:2px}
/* Dải giá trị dưới bìa (giống các trang khác) */
.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ÀI */
.bai{padding:var(--nhip) 0 0}
.muc > *:last-child{margin-bottom:0}
/* ══ Ô SỐ TRANG VỀ LUVINUS — CHỖ EM BỎ SÓT (sửa 19/08/2026) ════════════════
Anh Hưng: "anh thấy số và hộp vẫn như cũ không thay đổi gì".
VÌ SAO SÓT: trang này dựng thẻ KHÁC HẲN mọi trang còn lại —
mọi trang khác : 03 Tiêu đề
ô số NẰM TRONG h2
Về Luvinus : 03
…
ô số là ANH EM của h2
Nên luật "h2 .so" em sửa ở 7 tệp kia KHÔNG VỚI TỚI đây. Trang này có luật
riêng, lại khai CỨNG font-size:13px — không bám theo cỡ tiêu đề chút nào.
Đo ra: chữ số cao 10,0px trong khi chữ hoa 29,0px → chỉ 34%.
VÌ Ô SỐ LÀ ANH EM CHỨ KHÔNG NẰM TRONG h2 nên không dùng em của h2 được.
Cách xử: cho .chi-muc mang ĐÚNG cỡ chữ của h2 (cùng một biểu thức clamp ở
dòng .vl-page h2), rồi ô số tính em trên đó. h2 có font-size riêng nên
không bị ảnh hưởng; .vach là thanh gạch cao cố định nên cũng không.
⚠ Đổi clamp ở .vl-page h2 thì phải đổi luôn ở đây cho khớp.
Áp cho CẢ khối 01 (chỉ có số + gạch, không có tiêu đề) để sáu số chạy dọc
trang đều một cỡ, không cái to cái nhỏ.
Các con số 1,01em · 1,02em · .07em · .27em · .16em lấy đúng như bản đã dùng
cho 7 tệp kia — xem giải thích đầy đủ ở khoa-hoc.css.
── GHI LẠI MỘT LẦN DÒ SAI, ĐỂ SAU KHÔNG DÒ LẠI ──
Lúc đối soát, phép đo của em báo ô số lệch lên 29px so với chữ hoa, suýt
nữa thì bù .726em cho nó. May là có đo thử BẢN GỐC 13px bằng đúng phép đo
đó: bản gốc cũng báo lệch 21–25px. Tức là PHÉP ĐO SAI chứ bố cục không sai
— cách dò đường chân chữ trong khối flex căn baseline cho ra số không tin
được. Chênh lệch THẬT giữa bản mới và bản gốc chỉ 3,9px (mobile) đến 8,3px
(máy tính), tức 0,14–0,21em. .16em nằm đúng giữa khoảng đó.
BÀI HỌC: muốn biết một thay đổi có làm lệch bố cục không thì đo CHÊNH LỆCH
so với bản gốc, đừng đo tuyệt đối rồi tin luôn. */
.chi-muc{display:flex;align-items:center;gap:14px;margin-bottom:20px;
font-size:clamp(27px,3.4vw,40px)}
.chi-muc .so{font-family:var(--font-noi-dung);font-size:.9em;font-weight:700;color:var(--cam-tram);letter-spacing:.07em;
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,.06);transform:rotate(-2deg);flex:none}
.chi-muc .vach{flex:1;height:2px;background:var(--chi-cam);opacity:.75}
.chi-muc:has(h2){align-items:baseline;margin-bottom:24px}
.chi-muc h2{margin:0}
.mo-dau{font-size:19px;line-height:1.8}
.mo-dau::first-letter{font-family:var(--font-tieu-de);font-weight:700;float:left;font-size:78px;line-height:.82;margin:6px 12px 0 0;color:var(--cam-tram)}
.tru{border-left:3px solid var(--cta);padding:4px 0 4px 26px;margin:0 0 30px}
.tru .ten{display:block;font-size:11px;font-weight:700;letter-spacing:2.6px;text-transform:uppercase;color:var(--cam-tram);margin-bottom:10px}
.tru p{margin:0;font-size:18px;line-height:1.78}
.gia-tri{margin:0}
.gia-tri>.ten{display:block;font-size:11px;font-weight:700;letter-spacing:2.6px;text-transform:uppercase;color:var(--chu-phu);margin-bottom:22px}
.gia-tri li{list-style:none;margin-bottom:26px;padding-left:44px;position:relative}
.gia-tri li:last-child{margin-bottom:0}
.gia-tri li::before{content:'';position:absolute;left:0;top:9px;width:26px;height:2px;border-radius:2px;background:var(--cta)}
.gia-tri li:nth-of-type(2)::before{background:var(--xanh-reu)}
.gia-tri li:nth-of-type(3)::before{background:var(--vang-nghe)}
.gia-tri h2{font-family:var(--font-noi-dung);font-size:15px;font-weight:700;margin-bottom:6px}
.gia-tri p{margin:0;font-size:16.5px;color:var(--chu-phu)}
/* Dải THƯỚC DÂY ĐO — vạch cm nhỏ/lớn trên nền vải kem (thay đường may đứt cũ) */
.khau{width:1050px;max-width:calc(100% - 48px);margin:64px auto;height:18px;border:0;border-radius:4px;
background-color:#EFE3CC;
background-image:
linear-gradient(180deg,rgba(255,255,255,.55),rgba(0,0,0,.06)),
repeating-linear-gradient(90deg,rgba(92,71,57,.7) 0 1.5px,transparent 1.5px 10px),
repeating-linear-gradient(90deg,rgba(92,71,57,.85) 0 2px,transparent 2px 50px);
background-size:100% 100%,100% 7px,100% 12px;
background-position:0 0,0 100%,0 100%;
background-repeat:no-repeat;
box-shadow:0 2px 6px rgba(58,46,34,.18)}
/* Ảnh = NẸP VẢI NÂU + chỉ vàng kem (giống thẻ khóa học & khung video trang chủ) */
.anh{position:relative;
background-color:#6f5236;
background-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='300'%20height='300'%3E%3Cfilter%20id='n'%3E%3CfeTurbulence%20type='fractalNoise'%20baseFrequency='0.9'%20numOctaves='2'%20seed='3'%20stitchTiles='stitch'/%3E%3CfeColorMatrix%20type='saturate'%20values='0'/%3E%3C/filter%3E%3Crect%20width='100%25'%20height='100%25'%20filter='url(%23n)'/%3E%3C/svg%3E"),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;
padding:9px;border-radius:16px;box-shadow:0 10px 26px rgba(0,0,0,.25)}
/* NỀN TWEED SẪM SAU ẢNH — cùng bộ với thẻ khóa học & nẹp trang Khóa học.
Nẹp ở đây là tweed nâu CÙNG ĐỘ SÁNG với ảnh, nên mọi cú mở đều chìm. Đặt
tấm nền sẫm thụt vào 9px (đúng bề dày nẹp) thì viền nẹp giữ nguyên màu, chỉ
lòng ảnh tối đi — và cú mở mới có chỗ để đọc. */
.anh::before{content:'';position:absolute;inset:9px;border-radius:10px;pointer-events:none;z-index:0;
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}
.anh img,.anh figcaption{position:relative;z-index:1}
.anh::after{content:'';position:absolute;inset:4px;border:1.2px dashed rgba(236,213,170,.7);border-radius:12px;pointer-events:none;z-index:2}
.anh img{border-radius:10px 10px 0 0}
.anh figcaption{font-size:12px;font-weight:600;letter-spacing:1.3px;text-transform:uppercase;color:var(--nau-am);text-align:center;background:var(--trang,#fff);margin:0;padding:12px 10px;border-radius:0 0 10px 10px}
.anh-rong{margin:44px auto;max-width:1000px} /* lề dưới = lề trên: không dính vào khối kế tiếp */
.anh-rong.giua{margin:44px auto}
/* Lĩnh vực */
/* Khối nhấn = GABARDINE TWILL HỒNG KEM (giống Khóa học trang chủ) + đường may mí cam sát mép trên */
.linh-vuc,.bang{
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;
padding:var(--nhip) 0}
.linh-vuc::before,.bang::before,.toi::before,.ket::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){.linh-vuc::before,.bang::before,.toi::before,.ket::before{left:16px;right:16px}}
.doi{max-width:1050px;margin:0 auto 56px;padding:0}
.doi:last-child{margin-bottom:0}
.doi .anh{margin-top:30px}
.mieng{display:inline-block;font-size:10.5px;font-weight:700;letter-spacing:2.6px;text-transform:uppercase;color:var(--cam-tram);margin-bottom:10px}
.doi .chu p{font-size:16.5px}
.doi h3{margin-bottom:18px}
.mon{margin-bottom:20px}
.mon:last-child{margin-bottom:0}
.mon b{display:block;font-size:15px;font-weight:700;margin-bottom:4px}
.mon p{margin:0;font-size:16px;color:var(--chu-phu)}
/* Khác biệt + khối tối */
.khac-biet{padding:var(--nhip) 0}
.diem{margin-bottom:40px}
.diem:last-child{margin-bottom:0}
/* Khối tối = DẠ TWEED nâu (giống Đội ngũ trang chủ) */
.toi{
position:relative;
background-color:#453425;
background-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='320'%20height='320'%3E%3Cfilter%20id='t'%3E%3CfeTurbulence%20type='fractalNoise'%20baseFrequency='0.55'%20numOctaves='3'%20seed='7'%20stitchTiles='stitch'/%3E%3CfeColorMatrix%20type='saturate'%20values='0'/%3E%3C/filter%3E%3Crect%20width='100%25'%20height='100%25'%20filter='url(%23t)'/%3E%3C/svg%3E"),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;
color:var(--kem);padding:var(--nhip) 0}
.toi h2,.toi h3{color:var(--trang)}
.toi p{color:var(--chu-phu-toi)}
.toi .chi-muc .so{color:var(--cam-sang);border-color:rgba(245,168,126,.5);background:rgba(245,168,126,.08)}
.toi .chi-muc .vach{background:var(--chi-kem);opacity:.9}
.toi .anh{box-shadow:0 20px 50px rgba(0,0,0,.3)} /* giữ nẹp vải chung, tăng bóng trên nền tweed */
/* Bảng khóa học */
.bang{padding:var(--nhip) 0} /* nền vải hồng lấy từ rule chung .linh-vuc,.bang ở trên */
.co-so{padding:var(--nhip) 0}
.the-hoc{margin-top:34px;background:var(--trang);border-radius:10px;box-shadow:var(--bong-nhe);overflow:hidden}
.dau-bang{display:grid;grid-template-columns:1.5fr .9fr 1.5fr 1.4fr;gap:18px;padding:13px 24px;
background-color:#453425;
background-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='320'%20height='320'%3E%3Cfilter%20id='t'%3E%3CfeTurbulence%20type='fractalNoise'%20baseFrequency='0.55'%20numOctaves='3'%20seed='7'%20stitchTiles='stitch'/%3E%3CfeColorMatrix%20type='saturate'%20values='0'/%3E%3C/filter%3E%3Crect%20width='100%25'%20height='100%25'%20filter='url(%23t)'/%3E%3C/svg%3E");
background-blend-mode:soft-light}
.dau-bang span{font-size:10px;font-weight:700;letter-spacing:1.8px;text-transform:uppercase;color:var(--chu-phu-toi)}
.the{display:grid;grid-template-columns:1.5fr .9fr 1.5fr 1.4fr;gap:18px;align-items:center;padding:17px 24px;border-top:1px solid var(--vien);transition:.16s;position:relative}
.the::before{content:'';position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--cta)}
.the:nth-of-type(3)::before,.the:nth-of-type(4)::before{background:var(--xanh-reu)}
.the:nth-of-type(6)::before,.the:nth-of-type(7)::before{background:var(--vang-nghe)}
.the:nth-of-type(8)::before{background:var(--xanh-reu)}
.the:hover{background:var(--cam-nhat)}
.the b{font-size:15.5px;font-weight:700;line-height:1.4}
.the b::after{content:' →';color:var(--cam-tram);opacity:0;transition:.16s}
.the:hover b::after{opacity:1}
.the i{font-style:normal;font-size:13.5px;color:var(--chu-phu);line-height:1.5}
.the em{font-style:normal;font-size:13px;font-weight:600;color:var(--cam-tram);line-height:1.5}
/* Cảm nhận */
.cam-nhan{padding:var(--nhip) 0}
.loi{background:var(--trang);border-radius:6px;padding:32px 30px 28px;box-shadow:var(--bong-nhe);margin-bottom:20px;position:relative}
.loi:last-child{margin-bottom:0}
.loi::before{content:'\201C';position:absolute;top:0;left:20px;font-family:var(--font-tieu-de);font-size:80px;line-height:1;color:var(--cta);opacity:.22}
.loi p{margin:0 0 12px;font-size:16.5px;font-style:italic;position:relative}
.loi .ai{display:block;font-style:normal;font-size:12px;font-weight:700;letter-spacing:1.8px;text-transform:uppercase;color:var(--cam-tram)}
.sao{color:var(--vang-nghe);letter-spacing:3px;font-size:13px;margin-bottom:10px}
/* Kết */
/* Kết "Hành trình" = NỀN TRẮNG vân mờ — chữ đậm, thoáng sáng */
.ket{
position:relative;
background:transparent; /* hiện nền trắng + vân kẻ chéo mờ của trang */
color:var(--chu-chinh);padding:calc(var(--nhip) + 8px) 0;text-align:center}
.ket p{color:var(--chu-phu)}
.ket .cau{color:var(--cam-tram)}
/* .ket dùng nguyên bộ da của .nut-lon/.nut-vien — không ghi đè */
.ket h2{color:var(--nau-am)}
.ket p{color:var(--chu-phu);max-width:none;margin:0 0 16px;text-align:left}
.ket .cau{font-family:var(--font-tieu-de);font-size:clamp(21px,2.6vw,28px);font-style:italic;color:var(--cam-tram);margin:30px auto;text-align:center;max-width:24ch}
/* Cặp nút CTA = DA THUỘC (đồng bộ nút thanh đáy): chính da cam đất, phụ da bò sáng */
.nut-lon{display:inline-flex;align-items:center;gap:9px;color:var(--trang);padding:16px 38px;border-radius:999px;font-size:13.5px;font-weight:700;letter-spacing:1.2px;text-transform:uppercase;transition:.18s;text-decoration:none;
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:-4px;
box-shadow:0 6px 18px rgba(210,105,74,.32),inset 0 1px 0 rgba(255,255,255,.25)}
.nut-lon:hover{background-color:var(--cta-dam);transform:translateY(-2px)}
.nut-vien{display:inline-flex;align-items:center;gap:9px;border:0;color:#332416;padding:16px 34px;border-radius:999px;margin-left:12px;font-size:13.5px;font-weight:700;letter-spacing:1.2px;text-transform:uppercase;transition:.18s;text-decoration:none;
background-color:#C2A97D;
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,.5),rgba(255,255,255,0) 42%,rgba(120,90,55,.14));
background-blend-mode:soft-light,normal;
outline:1px dashed rgba(122,88,50,.55);outline-offset:-4px;
box-shadow:0 2px 8px rgba(0,0,0,.18),inset 0 1px 0 rgba(255,255,255,.8)}
.nut-vien:hover{background-color:#CFB68B;color:#332416;transform:translateY(-2px)}
@media(max-width:960px){
.dau-bang{display:none}
.the{grid-template-columns:1fr;gap:5px;padding:18px 22px}
.the b{font-size:16px}
.the .tl::before{content:'Thời lượng: ';font-weight:600;color:var(--chu-chinh)}
.the .dt::before{content:'Đối tượng: ';font-weight:600;color:var(--chu-chinh)}
.the em::before{content:'Đầu ra: ';color:var(--chu-chinh)}
.doi{margin-bottom:42px;padding:0 24px}
.nut-vien{margin-left:0;margin-top:12px}
.khau{margin:44px auto}
/* Mobile: bìa tỉ lệ 7:6, cover tự xén ~3 người mỗi bên, giữ trọn chiều cao cảnh */
.bia{min-height:0;aspect-ratio:7 / 6}
/* Chữ nhỏ lại theo cỡ banner + kéo sát đáy để chừa ảnh phía trên */
.bia .khung{padding:0 20px 4px}
.bia h1{font-size:clamp(26px,5.4vw,44px);line-height:1.16;letter-spacing:.02em}
.bia .gach{width:44px;margin-top:12px}
.bia .cham-ngon{margin:0 0 10px;font-size:10.5px;letter-spacing:.3em}
/* Phủ tối vùng đáy nơi có chữ cho chữ nổi bật; phần trên (mặt học viên, backdrop) vẫn sáng */
.bia::after{background:linear-gradient(180deg,rgba(46,42,38,0) 0%,rgba(46,42,38,0) 58%,rgba(46,42,38,.6) 78%,rgba(46,42,38,1) 100%)}
}
@media(max-width:520px){ .vl-page{font-size:16px} .mo-dau::first-letter{font-size:60px} .loi{padding:28px 22px 24px} }
/* ═══════════ VỀ LUVINUS · HIỆN TEXT & ẢNH NGHỆ THUẬT — BAY NHIỀU HƯỚNG (6.0) ═══════════ */
/* Chặn tràn ngang khi phần tử bay từ trái/phải vào */
.vl-page{overflow-x:clip}
.vl-page section,.vl-page .bai>.khung{overflow-x:clip}
@media (prefers-reduced-motion: no-preference){
/* Trang này CHỈ ảnh có hiệu ứng → tắt hẳn fade cả-khối mặc định của hop-phan (chữ hiện ngay) */
html.js-on .vl-page section:not(.bia):not(.bia-blog),
html.js-on .vl-page .dai{opacity:1 !important;transform:none !important}
/* ── Nền động cho phần tử được JS gắn .vl-r (hiện khi .vl-in) ── */
/* Chỉ khai 2 thuộc tính THẬT SỰ đổi. Bản trước khai 4 (thêm filter và
clip-path) — filter là tàn dư của hiệu ứng làm mờ đã bỏ, còn clip-path chỉ
mỗi ảnh cao trào dùng. Khai thừa không gây chậm, nhưng là mầm lỗi: lần sau
sửa một chỗ dễ vô tình kích hoạt thuộc tính tưởng đã chết. */
/* ĐÃ BỎ will-change:opacity,transform — đây là chỗ nặng nhất cả web.
Đo trên trang thật: lệnh này ghim 16 phần tử thành 16 lớp đồ hoạ riêng,
tổng 5.739.506 điểm ảnh ≈ 21,9 MB bộ nhớ GPU, giữ từ lúc tải trang tới
hết phiên xem — và lúc đo thì 0/16 đã chạy xong hiệu ứng, tức bị ghim
cả TRƯỚC lẫn SAU khi có việc để làm. Sáu tấm ảnh trong đó mỗi tấm cỡ
1000×750.
will-change chỉ nên bật ngay trước lúc động rồi nhả ra; bật sẵn vĩnh
viễn là đúng cái bẫy mà tài liệu của nó cảnh báo. Trình duyệt vẫn tự
tách lớp trong lúc transition chạy, nên bỏ đi KHÔNG đổi gì về mặt nhìn,
chỉ khác là nhả bộ nhớ khi xong. */
.vl-page.vl-anim .vl-r{
transition:opacity .95s cubic-bezier(.16,1,.3,1),
transform 1s cubic-bezier(.16,1,.3,1)}
.vl-page.vl-anim .vl-r:not(.vl-in){opacity:0}
/* Hướng bay — JS gắn .vld-* xoay vòng cho đa dạng */
.vl-page.vl-anim .vld-up:not(.vl-in){transform:translateY(38px)}
.vl-page.vl-anim .vld-down:not(.vl-in){transform:translateY(-38px)}
.vl-page.vl-anim .vld-left:not(.vl-in){transform:translateX(-64px)}
.vl-page.vl-anim .vld-right:not(.vl-in){transform:translateX(64px)}
/* Tiêu đề — trồi lên & rõ dần (đơn giản, chắc chắn hiển thị, chữ luôn sắc nét) */
.vl-page.vl-anim h2.vl-r,
.vl-page.vl-anim h3.vl-r{clip-path:none}
.vl-page.vl-anim h2.vl-r:not(.vl-in),
.vl-page.vl-anim h3.vl-r:not(.vl-in){transform:translateY(30px) !important;clip-path:none}
/* Ảnh — bay ngang vào + ảnh bên trong lắng zoom (Ken Burns) */
/* clip-path khai RIÊNG ở đây — chỉ ảnh mới dùng tới */
/* Quãng rèm ở đây tới 986–1035px (ảnh khổ rộng) — bậc DÀI.
Trước 1,05s = 986 px/s, TẤM RÈM NHANH NHẤT CẢ WEB, nên nó lướt qua như
một cái chớp chứ không ra vén mở.
Quãng trượt đi cùng phải dùng CHUNG thời gian và CHUNG nhịp với rèm:
lệch nhau thì thành hai động tác rời, khung đứng yên rồi rèm mới bò. */
.vl-page.vl-anim .anh.vl-r{overflow:hidden;
transition:opacity 1.2s cubic-bezier(.16,1,.3,1),transform var(--rem-dai) var(--rem-nhip),clip-path var(--rem-dai) var(--rem-nhip)}
/* CÚ MỞ ẢNH — RÕ HẲN LÊN.
Bản cũ vén clip-path inset 4% mỗi bên: 4% của một ô 500px là 20px, mà nẹp
đã dày 9px — nên gần như KHÔNG AI THẤY. Nay vén hẳn từ mép ngoài về giữa,
ảnh trái vén từ trái, ảnh phải vén từ phải, đúng chiều nó bay vào.
ĐÂY LÀ MỨC NỀN. Khối "MẠCH KỂ CHUYỆN" ở cuối tệp ghi đè lên nó để chia
cường độ: ảnh thường 56px/1,10 — ba mốc mạnh hơn. Sửa số ở đây gần như
không thấy tác dụng; muốn đổi thì sửa dưới đó. */
.vl-page.vl-anim .anh.vld-imgl:not(.vl-in){
clip-path:inset(0 100% 0 0);transform:translateX(-88px) scale(.982)}
.vl-page.vl-anim .anh.vld-imgr:not(.vl-in){
clip-path:inset(0 0 0 100%);transform:translateX(88px) scale(.982)}
/* Ken Burns dài hơn rèm một nhịp: rèm mở xong ở giây 2, ảnh còn lắng zoom
tới 2,6 — cú mở có đuôi, không dừng phựt. */
.vl-page.vl-anim .anh.vl-r img{transition:transform 2.6s cubic-bezier(.2,.8,.2,1);transform:scale(1)}
.vl-page.vl-anim .anh.vl-r:not(.vl-in) img{transform:scale(1.20)}
/* TIÊU ĐỀ — giống hệt tab Dịch vụ: trồi 26px, và TRỄ 0,38s so với khối.
Trễ là điểm mấu chốt: tiêu đề tới SAU nội dung nên mắt đọc ra là "khối
hiện ra rồi mới được đặt tên", chứ không phải tất cả bật lên một lượt. */
.vl-page.vl-anim h2.vl-td:not(.vl-in){opacity:0;transform:translateY(26px)}
.vl-page.vl-anim h2.vl-td{opacity:1;transform:none;
transition:opacity .75s cubic-bezier(.16,1,.3,1) .38s,
transform .85s cubic-bezier(.16,1,.3,1) .38s}
/* Vạch trang trí trong chỉ-mục — kẻ ngang chạy ra */
.vl-page.vl-anim .chi-muc.vl-r .vach{transform:scaleX(1);transform-origin:left;transition:transform .85s cubic-bezier(.16,1,.3,1) .12s}
.vl-page.vl-anim .chi-muc.vl-r:not(.vl-in) .vach{transform:scaleX(0)}
/* Gạch màu đầu mỗi "giá trị cốt lõi" — nét vẽ chạy ngang */
.vl-page.vl-anim .gia-tri li.vl-r::before{transition:width .7s cubic-bezier(.16,1,.3,1) .15s}
.vl-page.vl-anim .gia-tri li.vl-r:not(.vl-in)::before{width:0}
/* ── HERO (bìa) — vào trang là dựng cảnh ── */
/* Bỏ will-change: hoạt ảnh này chạy ĐÚNG MỘT LẦN trong 12 giây rồi thôi,
nhưng lệnh ghim thì ở lại vĩnh viễn — giữ một lớp cỡ ảnh bìa suốt phiên. */
/* Chờ rèm tan mới phóng — xem lời giải thích ở hop-phan.css. */
html.js-on .vl-page .bia>img{animation:vlZoom 12s ease-out var(--tre-rem) both;transform-origin:50% 44%}
/* ══ PHẢI CHỜ .bia-chay MỚI ĐƯỢC CHẠY (sửa 21/08/2026) ══════════════════
Anh Hưng: "luật xuất hiện h2 hình như không hiện mà nằm sẵn".
Đúng vậy, và đây là lỗi thật. Bìa các tab khác chờ lớp .bia-chay — JS
gắn lớp đó lúc 2,10s, đúng khoảnh khắc màn rèm mở đầu tan hết. Riêng
bìa trang này chạy NGAY KHI TẢI TRANG, không chờ gì cả:
chữ chạy xong ~1,2s
rèm mới tan 2,10s
Tức là toàn bộ màn diễn xảy ra SAU LƯNG TẤM RÈM. Rèm vén lên thì chữ
đã nằm sẵn ở đó từ gần một giây trước — không ai xem được.
Nay gắn thêm .bia-chay vào bộ chọn để chờ đúng nhịp như mọi tab khác.
Trạng thái ẩn (opacity:0) vẫn đặt từ đầu, nếu không chữ sẽ loé lên một
cái trước khi rèm phủ. */
html.js-on .vl-page .bia .cham-ngon,
html.js-on .vl-page .bia h1,
html.js-on .vl-page .bia .gach{opacity:0}
html.js-on .vl-page .bia.bia-chay .cham-ngon,
html.js-on .vl-page .bia.bia-chay h1,
html.js-on .vl-page .bia.bia-chay .gach{animation:vlRise .95s cubic-bezier(.16,1,.3,1) both}
html.js-on .vl-page .bia.bia-chay .cham-ngon{animation-delay:.1s}
html.js-on .vl-page .bia.bia-chay h1{animation-delay:.26s}
html.js-on .vl-page .bia.bia-chay .gach{animation-delay:.46s}
}
@keyframes vlRise{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
@keyframes vlZoom{from{transform:scale(1.18)}to{transform:scale(1.03)}}
/* ═══════════════════ MẠCH KỂ CHUYỆN — 8 mục, 3 điểm nhấn ═══════════════════
Tab này KHÔNG rải hiệu ứng đều. Nó kể một câu chuyện có mở, có cao trào,
có lời mời — nên cường độ phải LÊN DẦN, không đều nhau:
Mục 1–2 Lĩnh vực · Điểm khác biệt → ảnh chỉ trồi nhẹ (mở chuyện)
Mục 3 Đội ngũ giảng viên → chỉ nền (mục này không có ảnh)
Mục 4 Cơ sở vật chất → 🎯 ẢNH TRƯỢT VÀO = "mở cửa cho xem"
Mục 5–6 Khóa học · Cảm nhận → nền + nhịp (bằng chứng)
Mục 7 Fashion Show → 🎯 KEN BURNS = đèn sân khấu bật lên
Mục 8 Hành trình bắt đầu → 🎯 NÚT NẢY = lời mời khép lại
Ba mốc này cách nhau xa, không tranh nhau. Các mục còn lại cố ý ĐỂ YÊN —
có nền mới có cao trào. */
@media(prefers-reduced-motion:no-preference){
/* ── Ảnh THƯỜNG: NÂNG SÀN ──
Bản trước ép mọi ảnh thường về "trồi 24px, không cắt" để dành cao trào
cho ba mốc. Đúng ý đồ nhưng hạ tay quá: 24px trên một khung ảnh cao
400–500px là gần như đứng yên, người xem không thấy có gì xảy ra.
Nay ảnh thường ĐƯỢC vén mở thật — cả khung (nẹp vải + nền tweed + ảnh)
kéo ra từ mép, trái vén từ trái, phải vén từ phải, đúng chiều nó bay
vào. Vẫn nhẹ tay hơn mốc để mạch kể còn nguyên: bay 56px thay vì 88,
Ken Burns 1,10 thay vì 1,18. ── */
.vl-page.vl-anim .anh.vld-imgl:not(.vl-mo-cua):not(.vl-cao-trao):not(.vl-in){
transform:translateX(-56px) scale(.986) !important;clip-path:inset(0 100% 0 0)}
.vl-page.vl-anim .anh.vld-imgr:not(.vl-mo-cua):not(.vl-cao-trao):not(.vl-in){
transform:translateX(56px) scale(.986) !important;clip-path:inset(0 0 0 100%)}
/* Ảnh không rơi vào hai hướng trên (JS đổi cách gắn, hoặc mục thêm mới):
giữ nếp cũ trồi nhẹ, để không bao giờ có ảnh đứng im không hiệu ứng. */
.vl-page.vl-anim .anh.vl-r:not(.vld-imgl):not(.vld-imgr):not(.vl-mo-cua):not(.vl-cao-trao):not(.vl-in){
transform:translateY(24px) !important;clip-path:none}
.vl-page.vl-anim .anh.vl-r:not(.vl-cao-trao):not(.vl-in) img{transform:scale(1.10)}
/* ── 🎯 MỐC 1 · MỞ CỬA — ảnh cơ sở vật chất trượt vào từ mép phải ──
Huỷ clip-path: mốc này kể bằng QUÃNG TRƯỢT, không bằng vén mép. Nếu
để nguyên clip của lớp .vld-img* thì hai chuyện chồng nhau, mờ ý. */
.vl-page.vl-anim .anh.vl-mo-cua:not(.vl-in){transform:translateX(64px) !important;clip-path:none}
/* ── 🎯 MỐC 2 · CAO TRÀO — Fashion Show: khung mở ra + ảnh lắng zoom chậm ── */
.vl-page.vl-anim .anh.vl-cao-trao:not(.vl-in){transform:none !important;clip-path:inset(6% 8%)}
.vl-page.vl-anim .anh.vl-cao-trao{transition:opacity 1.2s ease,clip-path var(--rem-dai) var(--rem-nhip)}
.vl-page.vl-anim .anh.vl-cao-trao img{transition:transform 2.6s cubic-bezier(.2,.8,.2,1)}
.vl-page.vl-anim .anh.vl-cao-trao:not(.vl-in) img{transform:scale(1.18)}
/* ── ĐIỆN THOẠI: PHẢI NỚI BIÊN ĐỘ, KHÔNG DÙNG CHUNG SỐ VỚI PC ──
Anh Hưng báo mục "Luvinus Fashion Show và Lễ tốt nghiệp" trên điện thoại
không thấy hiệu ứng gì. Đúng, và đây là lỗi TỶ LỆ chứ không phải lỗi mã:
mốc cao trào cố ý KHÔNG trượt, nó chỉ "mở khung" bằng cách thu vào rồi
nở ra. Trên PC ảnh rộng 1000px nên 8% = 80px, mở ra thấy rõ. Trên điện
thoại ảnh chỉ 331px nên 8% chỉ còn 26px — mắt không bắt được, thành ra
nhìn như ảnh chỉ hiện ra suốt.
Nay nới lên 14%/16% (≈ 44px và 53px trên khung 331×317) để cú mở khung
đọc được đúng như trên PC. Vẫn giữ nguyên CHẤT của mốc này: không trượt,
chỉ nở khung + ảnh lắng zoom — khác hẳn các ảnh còn lại.
Thời gian rút về bậc VỪA: quãng ngắn hơn nhiều thì 2 giây là lê thê. */
@media(max-width:760px){
.vl-page.vl-anim .anh.vl-cao-trao:not(.vl-in){clip-path:inset(14% 16%)}
.vl-page.vl-anim .anh.vl-cao-trao{transition:opacity 1.1s ease,clip-path var(--rem-vua) var(--rem-nhip)}
.vl-page.vl-anim .anh.vl-cao-trao img{transition:transform 2s cubic-bezier(.2,.8,.2,1)}
}
/* ── 🎯 MỐC 3 · LỜI MỜI — nút kết nảy nhẹ ĐÚNG MỘT LẦN khi cuộn tới ──
Cùng động tác "lật xem" với nút play bên tab Video → một thứ tiếng. */
.vl-page .nut-lon.vl-moi.vl-in{animation:luvMoiBam .66s cubic-bezier(.34,1.4,.64,1) .15s both}
}
/* Dòng dẫn tới trang Câu hỏi thường gặp — đặt cuối mục 04 (Các khóa học) */
.vl-page .ve-faq-link{margin:18px 0 0;text-align:center;color:var(--chu-phu);font-size:14.5px}
.vl-page .ve-faq-link a{color:var(--cam-tram);font-weight:600}
/* 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){
/* ⚠ PHẢI TẮT aspect-ratio Ở ĐÂY. Tệp này khai .bia{aspect-ratio:7/6} cho
khổ ≤960px. Khi em nâng min-height lên 641px, trình duyệt lấy tỉ lệ đó
TÍNH NGƯỢC RA BỀ NGANG: 641 × 7/6 = 748px — rộng hơn màn 412px tới 336px.
Ảnh và chữ vì thế bị đẩy lệch hẳn sang phải.
aspect-ratio:auto trả bề ngang về 100% màn, chiều cao do min-height quyết. */
body .bia{min-height:var(--bia-vua-man-dt);aspect-ratio:auto}
}
/* ══ DÒNG DẪN SANG HỎI ĐÁP — CHỐNG BỊ KÉO GIÃN (sửa 21/08/2026) ═════════════
Cùng lỗi với .faq-cta bên trang Hỏi đáp: luật căn đều dùng chung cho cả web
chọn `.khung.hep > p` (ưu tiên 0,2,1), mạnh hơn `.ve-faq-link{text-align:
center}` (0,1,0), nên căn giữa thua và chữ bị kéo giãn cho đầy dòng.
Nâng ưu tiên lên 0,3,1 để giành lại, kèm text-align-last để dòng cuối
không bị đẩy về mép trái.
Chỗ này tìm ra khi quét cả web sau lần sửa .faq-cta — mọi khối chữ CĂN GIỮA
nằm lọt vào vùng luật căn đều đều dính lỗi này.
LƯU Ý: ở đây KHÔNG phải .khung.hep > p như bên trang Hỏi đáp. Thẻ này nằm
trong div.cot nên bị luật .cot > p:not(.cau) bắt. Nhắm nhầm selector thì
luật vô hiệu mà nhìn vào CSS vẫn tưởng đã sửa xong — phải đo mới biết. */
.vl-page .cot > p.ve-faq-link,
.cot > p.ve-faq-link,
p.ve-faq-link{text-align:center;text-align-last:center;text-justify:auto}
/* ══ NHỊP BÌA VỀ LUVINUS TRÊN ĐIỆN THOẠI (21/08/2026) ═══════════════════════
Trang này có hiệu ứng phóng ảnh RIÊNG (vlZoom) chứ không dùng biaZoom chung,
nên luật rút ngắn bên hop-phan.css không với tới. Phải khai lại ở đây —
ve-luvinus.css nạp sau nên thắng.
Lý do chọn 5 giây: xem lời giải thích đầy đủ ở khối cùng tên trong
hop-phan.css. Ba dòng chữ của bìa này cũng dồn lại cho khớp. */
@media(max-width:760px) and (prefers-reduced-motion:no-preference){
html.js-on .vl-page .bia>img{animation:vlZoom 5s ease-out var(--tre-rem) both}
/* Nhịp khớp với các bìa khác (sửa 21/08/2026): mỗi dòng cách nhau 0,18s.
Bản trước để 0,06 / 0,16 / 0,29 — hai dòng đầu chỉ cách 0,06s, mắt gộp
thành một, đúng cảm giác "nằm sẵn ở đó" anh Hưng nói. */
html.js-on .vl-page .bia.bia-chay .cham-ngon,
html.js-on .vl-page .bia.bia-chay h1,
html.js-on .vl-page .bia.bia-chay .gach{animation-duration:.72s}
html.js-on .vl-page .bia.bia-chay .cham-ngon{animation-delay:.14s}
html.js-on .vl-page .bia.bia-chay h1{animation-delay:.32s}
html.js-on .vl-page .bia.bia-chay .gach{animation-delay:.5s}
}