/* khoa-hoc.css — CSS riêng TRANG KHÓA HỌC (chỉ nạp ở template này). Dùng chung biến bien.css. */
.hep{max-width:var(--cot-chu);margin:0 auto;width:100%}
/* Đồng bộ bề rộng theo TRANG CHỦ: PC 100% (≤1500px) = 1050px (chỉ trong .noi-dung, không đụng header/footer) */
@media(min-width:981px) and (max-width:1500px){ .noi-dung .khung{max-width:1050px} }
/* PC (≥981): mục có khối chữ+ảnh nới rộng để lấp đầy, đỡ trống 2 bên */
/* Mục có ảnh giới thiệu: RỘNG ĐÚNG BẰNG .khung các mục ảnh (1050/1240) — không thò ra 1160 lệch lề */
@media(min-width:981px){ .khung.hep:has(.co-anh){max-width:var(--cot-rong)} }
@media(min-width:981px) and (max-width:1500px){ .khung.hep:has(.co-anh){max-width:1050px} }
/* Căn nhịp dọc: phần tử cuối trong mỗi khối không cộng dồn lề với đệm mục */
.phan .hep>:last-child,.phan .khung>:last-child{margin-bottom:0}
/* Đồng nhất khoảng cách dưới cụm tiêu đề của các mục rộng (đè inline 32/36px lệch nhau) */
.phan>.khung>.hep[style]{margin-bottom:32px!important}
/* ── BÌA — đồng bộ 100% thiết kế/màu/chữ theo trang Lịch học ── */
/* Dải .dai của tab này đo được 54px (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.
57 = 54 + 3, xem giải thích ở --cao-dai-bia trong bien.css. */
:root{--cao-dai-bia:57px;--cao-dai-dt:91px} /* dải .dai trên điện thoại đo được 89px, +2 dư */
.bia{position:relative;min-height:clamp(380px,54vh,480px);display:grid;align-items:end;
justify-items:center;text-align:center;overflow:hidden;isolation:isolate;background:var(--nau-am)}
@media(min-width:761px){.bia{min-height:var(--bia-vua-man)}}
.bia img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:saturate(.80) contrast(1.02);z-index:-2;
object-position:var(--bia-pc,center)}
@media(max-width:640px){.bia img{object-position:var(--bia-mb,var(--bia-pc,center))}}
.bia::after{content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(to top,rgba(31,28,25,.9),rgba(31,28,25,.66) 20%,rgba(31,28,25,.3) 42%,transparent 62%)}
.bia .noi{padding:0 22px 20px}
.bia .eyebrow{font-size:11.5px;letter-spacing:.34em;text-transform:uppercase;color:var(--chu-phu-toi);
margin-bottom:14px;font-weight:500;white-space:nowrap}
/* Máy nhỏ: khít chữ + thu cỡ vừa đủ để "HỌC CẮT MAY THIẾT KẾ THỜI TRANG" nằm gọn 1 dòng */
@media(max-width:400px){.bia .eyebrow{letter-spacing:.26em;font-size:10.5px}}
@media(max-width:340px){.bia .eyebrow{letter-spacing:.2em;font-size:10px}}
.bia h1.ten-khoa,.ten-khoa{text-wrap:balance;font-family:var(--font-bia);font-weight:600;color:#fff;
font-size:clamp(25px,4.7vw,43px);line-height:1.14;letter-spacing:.01em;text-transform:uppercase;
max-width:21em;margin:0 auto;text-shadow:0 2px 22px rgba(31,28,25,.55)}
/* ══ TÊN KHÓA XUỐNG 2 DÒNG TRÊN PC (sửa 19/08/2026) ════════════════════════
Bề ngang 21em (903px) đủ rộng cho hầu hết tên khóa nằm gọn 1 dòng. Bóp về
13em (559px) thì cả 11 tên đều buộc phải xuống 2 dòng, và text-wrap:balance
chia đôi cho cân.
VÌ SAO 13em: đo cả 11 tên ở các mức 12 · 13 · 14em đều cho kết quả GIỐNG
HỆT nhau — 11/11 tách 2 dòng, ngắt đúng chỗ. Chọn 13em vì nằm giữa khoảng
an toàn, đổi cỡ chữ hay phông sau này vẫn còn dư hai bên.
Dưới 12em thì khóa Optitex (tên dài nhất) tràn thành 3 dòng.
Chỉ áp cho PC. Điện thoại bìa hẹp sẵn nên tên vốn đã tự xuống dòng, ép thêm
là thành 3–4 dòng lộn xộn. */
@media(min-width:761px){
.bia h1.ten-khoa,.ten-khoa{max-width:13em}
}
.gach{width:52px;height:2px;background:var(--cta);margin:16px auto 0;border-radius:2px}
/* dải thông tin */
.dai{background:var(--nau-am)}
.dai .khung{display:flex;justify-content:center;flex-wrap:wrap;gap:10px 34px;padding:15px 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)}
/* ── PHẦN — khối nhấn = VẢI HỒNG linen + đường may mí cam (hệ vải trang chủ) ── */
.phan{padding:var(--nhip) 0}
.phan.nen{
position:relative;
background-color:#F2E2D6;
background-image:
url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='200'%20height='200'%3E%3Cfilter%20id='n6'%3E%3CfeTurbulence%20type='fractalNoise'%20baseFrequency='0.85'%20numOctaves='2'%20seed='7'%20stitchTiles='stitch'/%3E%3CfeColorMatrix%20type='saturate'%20values='0'/%3E%3C/filter%3E%3Crect%20width='100%25'%20height='100%25'%20filter='url(%23n6)'%20opacity='0.19'/%3E%3C/svg%3E"),
repeating-linear-gradient(63deg,rgba(155,105,85,.06) 0 1px,transparent 1px 4px),
radial-gradient(120% 90% at 50% 0%,rgba(255,251,247,.55),transparent 55%),
radial-gradient(150% 110% at 50% 118%,rgba(130,85,65,.12),transparent 58%);
background-blend-mode:soft-light,normal,normal,normal}
.phan.nen::before{
content:'';position:absolute;left:26px;right:26px;top:6px;height:5px;z-index:4;pointer-events:none;
background-image:var(--may-mi);background-repeat:repeat-x;background-position:left center}
@media(max-width:760px){.phan.nen::before{left:16px;right:16px}}
/* ── Section TỐI = DẠ TWEED nâu (điểm nghỉ mắt) — thẻ/ảnh bên trong nổi hẳn ── */
.phan.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}
.phan.toi::before{
content:'';position:absolute;left:26px;right:26px;top:6px;height:5px;z-index:4;pointer-events:none;
background-image:var(--may-mi);background-repeat:repeat-x;background-position:left center}
@media(max-width:760px){.phan.toi::before{left:16px;right:16px}}
/* chữ & thẻ trên nền tối */
.phan.toi h2{color:var(--kem)}
.phan.toi h2 .so{color:var(--cam-sang);border-color:rgba(245,168,126,.45);background:rgba(245,168,126,.1)}
.phan.toi p,.phan.toi li,.phan.toi .dan-mo{color:var(--chu-phu-toi)}
.phan.toi .the,.phan.toi .the-dv,.phan.toi .kh,.phan.toi .doi-tuong,.phan.toi .khung-anh{
box-shadow:0 3px 8px rgba(0,0,0,.28),0 12px 22px -10px rgba(0,0,0,.32)}
.phan.toi h3,.phan.toi h4,.phan.toi b,.phan.toi strong{color:var(--kem)}
.phan.toi .the p,.phan.toi .the-dv p,.phan.toi .kh p,.phan.toi .doi-tuong p{color:var(--chu-phu)}
.phan.toi .the h3,.phan.toi .the-dv h3,.phan.toi .kh h3,.phan.toi .doi-tuong h3{color:var(--chu-chinh)}
h2{font-family:var(--font-tieu-de);font-size:clamp(22px,3.1vw,33px);font-weight:600;line-height:1.28;margin-bottom:24px;letter-spacing:.005em;display:flex;align-items:baseline;gap:12px}
/* ══ Ô SỐ — CHỮ SỐ CAO ĐÚNG BẰNG CHỮ HOA (sửa lần 2, 19/08/2026) ═══════════
Lần 1 em hiểu hụt: chỉ làm HỘP cao 24px bằng chữ hoa, còn CHỮ SỐ giữ nguyên
.44em nên chỉ cao 11px — bằng 46% chữ hoa. Hộp to ra mà bên trong toàn
khoảng trống, mắt bám vào CHỮ SỐ chứ không bám vào đường viền, nên anh Hưng
xem vẫn thấy y như cũ. Lần này phóng chính chữ số.
ĐO PHÔNG CHỮ SỐ (Montserrat) — tỉ lệ mực khác hẳn phông tiêu đề:
Montserrat mực chữ số = 0,720 × cỡ chữ
Playfair Display mực chữ hoa = 0,727 × cỡ chữ
Muốn chữ số cao bằng chữ hoa: 0,727 / 0,720 = 1,01em của tiêu đề.
Đúng vậy — cỡ chữ số gần bằng cỡ chữ tiêu đề, dù nhìn thì nhỏ hơn nhiều.
Đây là lý do đoán bằng mắt luôn sai: hai phông có tỉ lệ mực khác nhau.
ĐO LẠI SAU KHI SỬA (tiêu đề 33px):
chữ hoa H 24,0px
chữ số 03 24,0px = 100% chữ hoa (cũ 11,0px = 46%)
hộp 34 × 60px (cũ 24 × 40px)
letter-spacing .16em → .07em: khoảng cách chữ tính theo em nên khi phóng
cỡ chữ lên 2,3 lần thì khe giữa "0" và "3" cũng giãn từ 2,3px lên 5,3px,
nhìn rời rạc. .07em giữ lại đúng khe 2,3px như bản cũ.
padding đổi từ 9px sang .27em: để lề trong co giãn theo cỡ chữ, không bị
bóp lại khi tiêu đề nhỏ đi trên điện thoại.
top .16em: hộp nay CAO HƠN chữ hoa (34 so với 24) nên căn theo TÂM — tâm
hộp trùng tâm chữ hoa. Đo được cần dịch xuống 5,34px = 0,16em.
ĐÃ BỎ luật đổi cỡ ở khổ ≤760px của khoa-hoc.css: luật đó ép về .5em, tức
là kéo ngược ô số về nhỏ đúng như cũ. Nay mọi thứ tính bằng em nên tiêu đề
co xuống 21px thì ô số tự co theo đúng tỉ lệ, không cần luật riêng.
position/top thay vì margin hay transform: KHÔNG đụng bố cục và KHÔNG đụng
hiệu ứng hiện (hiệu ứng đó dùng scale/rotate riêng).
inline-flex + align-items:center để chữ số nằm giữa hộp; cố ý KHÔNG khai
justify-content để chữ chảy tự nhiên như bản gốc. */
h2 .so{font-family:var(--font-noi-dung);font-size:.9em;letter-spacing:.07em;color:var(--cam-tram);font-weight:700;flex:none;
height:1.2em;line-height:1;padding:0 .36em;display:inline-flex;align-items:center;
position:relative;top:.14em;
border:1.2px dashed rgba(194,92,62,.6);border-radius:4px;background:rgba(210,105,74,.07);transform:rotate(-2deg)}
/* nội dung gốc (đã bóc builder) */
.noi-dung-khoa h2{margin-top:8px}
.noi-dung-khoa h3{font-family:var(--font-tieu-de);font-size:clamp(18px,2.4vw,23px);font-weight:600;margin:26px 0 10px;line-height:1.3}
.noi-dung-khoa h4{font-size:16px;font-weight:600;margin:18px 0 8px}
.noi-dung-khoa p{color:var(--chu-phu);margin-bottom:14px;line-height:1.85}
.noi-dung-khoa strong{color:var(--chu-chinh)}
.noi-dung-khoa ul,.noi-dung-khoa ol{margin:0 0 16px 20px;color:var(--chu-phu)}
.noi-dung-khoa li{margin-bottom:6px;line-height:1.7}
.noi-dung-khoa a{color:var(--cam-tram);text-decoration:underline;text-underline-offset:3px}
.noi-dung-khoa img{border-radius:8px;margin:12px 0;box-shadow:var(--bong-nhe)}
.ds{list-style:none;display:grid;gap:12px}
.ds li{display:flex;gap:13px;color:var(--chu-phu);line-height:1.7}
.ds li::before{content:'';flex:none;width:14px;height:1.5px;border-radius:2px;background:var(--cta);opacity:.5;margin-top:13px}
.phan a.trong{color:var(--cam-tram);text-decoration:underline;text-underline-offset:3px}
/* ── HỌC PHÍ & LỊCH — hộp giá = NHÃN MÁC TREO có khuy xỏ dây, chỉ may vàng ── */
.tien{background:linear-gradient(180deg,#FFFEFB,#F6ECDA);border:1px solid rgba(92,71,57,.2);border-radius:14px;padding:38px 34px 32px;color:var(--chu-chinh);text-align:center;position:relative;margin-top:14px;
box-shadow:0 3px 8px rgba(58,46,34,.12),0 14px 24px -12px rgba(58,46,34,.2)}
.tien::before{content:'';position:absolute;inset:7px;border:1.3px dashed var(--vang-nghe);border-radius:9px;opacity:.55;pointer-events:none}
/* khuy tròn xỏ dây trên đỉnh nhãn */
.tien::after{content:'';position:absolute;top:-10px;left:50%;transform:translateX(-50%);width:20px;height:20px;border-radius:50%;
background:#F6EFE3;border:3px solid var(--vang-nghe);box-shadow:0 2px 6px rgba(58,46,34,.2)}
.tien .nhan{font-size:14px;letter-spacing:.16em;text-transform:uppercase;color:var(--chu-phu);font-weight:600}
.tien .gia{margin:12px 0 8px;display:flex;justify-content:center;align-items:baseline;gap:16px;flex-wrap:wrap;line-height:1.1}
.tien .gia s{font-size:clamp(17px,2.6vw,22px);color:var(--chu-phu);font-weight:400;opacity:.65}
.tien .gia b{font-family:var(--font-tieu-de);font-size:clamp(34px,5.8vw,50px);color:var(--cam-tram);font-weight:700}
/* Hạn ưu đãi — nhãn nhỏ kín đáo, cho biết ưu đãi gắn với lớp khai giảng nào */
.tien .han-ud{display:inline-flex;align-items:center;gap:7px;margin:2px 0 10px;padding:6px 14px;
border-radius:999px;background:rgba(194,92,62,.08);color:#7a5c48;font-size:12.5px;line-height:1.4}
.tien .han-ud svg{width:14px;height:14px;flex:none;color:var(--cam-tram);opacity:.85}
.tien .han-ud b{font-weight:700;color:var(--cam-tram)}
.tien .ghi{font-size:12.5px;font-style:italic;color:var(--chu-phu)}
.lich{margin-top:26px;border:1px solid rgba(92,71,57,.18);border-radius:12px;overflow:hidden;background:#fff;box-shadow:var(--bong-1)}
.lich .dh{background:#F1ECE3;padding:13px 22px;font-weight:600;font-size:14px;font-family:var(--font-tieu-de);font-size:16px;border-bottom:1px solid rgba(92,71,57,.14)}
.hang{display:grid;grid-template-columns:64px 84px 82px 1fr;align-items:center;gap:12px;padding:11px 18px;border-top:1px solid rgba(92,71,57,.12);font-size:14px}
.hang:first-of-type{border-top:0}
.hang .ngay{font-weight:700;color:var(--nau-am)}
.hang .ca{background:#F7F4EE;border:1px solid rgba(185,138,50,.35);color:var(--vang-nghe);border-radius:20px;padding:3px 0;font-size:12px;font-weight:600;text-align:center}
.hang .ma{font-size:11.5px;font-weight:700;letter-spacing:.05em;color:var(--nau-am);background:#F7F4EE;border:1px solid rgba(92,71,57,.15);border-radius:4px;padding:4px 0;text-align:center}
.hang .ngayhoc{color:var(--chu-phu);font-size:13px}
@media(max-width:600px){.hang{grid-template-columns:52px 72px 70px 1fr;gap:8px;padding:10px 12px;font-size:12.5px}.hang .ngayhoc{white-space:normal;line-height:1.35}}
.xemhet{display:inline-block;margin-top:20px;font-size:14px;color:var(--cam-tram);font-weight:600;text-decoration:none;
padding-bottom:3px;background:var(--chi-cam) no-repeat left bottom;background-size:100% 2px;transition:.16s}
.xemhet:hover{color:var(--cta-dam)}
/* form chính = tấm DẠ TWEED + khung chỉ may kem + nút DA cam (đồng bộ popup đăng ký) */
.form-chinh{position:relative;border-radius:16px;padding:40px 34px;box-shadow:var(--bong);
background-color:#463526;
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 26%,transparent 80%,rgba(0,0,0,.18));
background-blend-mode:soft-light,overlay,normal}
.form-chinh::before{content:'';position:absolute;inset:8px;border:1.2px dashed rgba(236,213,170,.7);border-radius:11px;pointer-events:none}
.form-chinh .luv-form{max-width:none;position:relative}
.form-chinh .luv-form__tieu-de{color:#fff;text-align:center}
.form-chinh .luv-form__tieu-de::after{content:'';display:block;width:58px;height:2px;margin:10px auto 0;
background:repeating-linear-gradient(90deg,var(--cam-sang) 0 5px,transparent 5px 10px)}
.form-chinh .luv-form__mo-ta{color:var(--chu-phu-toi);text-align:center;margin-top:10px}
.form-chinh .luv-form__hang{flex-direction:column;align-items:stretch}
.form-chinh .luv-inp{width:100%;flex-basis:auto;background:rgba(255,253,247,.97);border-color:rgba(245,168,126,.28)}
.form-chinh .luv-inp:focus{outline:none;border-color:var(--cam-sang);box-shadow:0 0 0 3px rgba(245,168,126,.18)}
.form-chinh .luv-ta{background:rgba(255,253,247,.97)}
.form-chinh .nut-dk{width:100%;
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)}
.form-chinh .nut-dk:hover,.form-chinh .nut-dk:active{background-color:var(--cta-dam)}
.hoac{text-align:center;margin-top:16px;font-size:14.5px;color:var(--chu-phu-toi);position:relative}
.hoac a{color:var(--cam-sang);font-weight:700;text-decoration:none}
/* form mỏng giữa trang — thanh nâu, nhãn trái + ô/nút bo tròn pill (mẫu đã duyệt) */
/* ╔════════════════════════════════════════════════════════════════════════╗
║ CÂN LẠI KHOẢNG TRỐNG QUANH FORM GIỮA BÀI 17/08/2026 ║
╚════════════════════════════════════════════════════════════════════════╝
Anh Hưng: "form đăng kí giữa bài đang sát lên trên quá và lại trống khoảng
bên dưới". Đo bằng vị trí BỐ CỤC (offsetTop — không dính hiệu ứng):
TRÊN form DƯỚI form (tới chữ mục kế) lệch
máy tính 26px 88px 3,4 lần
điện thoại 26px 71px 2,7 lần
Vì sao lệch: trên chỉ có margin 26px của chính form; dưới thì margin 26px
CỘNG THÊM cả padding mở đầu của mục kế tiếp (--nhip: 62px máy tính, 44px
điện thoại). Hai khoảng đó nằm ở hai luật khác nhau nên không ai để ý là
chúng cộng dồn.
CÁCH CÂN: kéo bớt phần dưới đắp lên phần trên, giữ TỔNG gần như cũ để trang
không dài/ngắn ra thấy rõ. Tính theo --nhip nên tự đúng ở mọi khổ màn:
TRÊN DƯỚI lệch còn
máy tính 53px 38+26 = 64px 1,2 lần
điện thoại 38px 27+18 = 45px 1,2 lần
CHỈ ÁP TRONG .khe-yen-ngua — trang Dịch vụ và Lịch học cũng dùng
.luv-form--mong nhưng bố cục khác hẳn, không được đụng vào. */
.khe-yen-ngua .luv-form--mong{
margin-top:calc(var(--nhip) * .86);
margin-bottom:calc(var(--nhip) * .62)}
/* Mục ngay sau khe nhả bớt padding mở đầu — phần nhả ra đã đắp lên trên form.
Chỉ khi mục đó là ANH EM LIỀN KỀ của khe. Ở bố cục "full", form nằm lọt
giữa nội dung nên luật này không khớp, và đúng là không nên khớp: lúc đó
dưới form là chữ chứ không phải đầu một mục mới. */
.khe-yen-ngua + .phan{padding-top:calc(var(--nhip) * .42)}
.luv-form--mong{position:relative;max-width:var(--cot-chu);margin:26px auto;border-radius:14px;
padding:15px 22px;display:flex;align-items:center;gap:14px 20px;flex-wrap:wrap;
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}
.luv-form--mong::after{content:'';position:absolute;inset:7px;border:1.4px dashed var(--vang-nghe);border-radius:inherit;opacity:.55;pointer-events:none;z-index:2;box-shadow:inset 0 0 0 1px rgba(185,138,50,.14)}
.luv-form--mong .luv-form__lb{flex:1 1 240px;font-size:14.5px;color:var(--chu-phu-toi);line-height:1.55}
.luv-form--mong .luv-form__lb b,.luv-form--mong .luv-form__lb strong{color:var(--cam-sang);font-weight:600}
.luv-form--mong .luv-form__hang{flex:1 1 330px;flex-wrap:nowrap;gap:10px}
.luv-form--mong .luv-inp{flex:1 1 auto;min-width:0;height:44px;padding:0 20px;border-radius:999px;
background:rgba(255,255,255,.95);border:1px solid rgba(245,168,126,.30);color:var(--chu-chinh)}
.luv-form--mong .luv-inp::placeholder{color:var(--chu-phu);opacity:.75}
.luv-form--mong .luv-inp:focus{border-color:var(--cam-sang);background:#fff;box-shadow:none}
.luv-form--mong .nut-dk{flex:none;height:44px;padding:0 26px;border-radius:999px;white-space:nowrap}
.luv-form--mong .luv-form__msg{flex-basis:100%;margin-top:0;min-height:0}
@media(max-width:600px){
.luv-form--mong{gap:11px;padding:14px 16px}
.luv-form--mong .luv-form__lb{flex-basis:100%}
.luv-form--mong .luv-form__hang{flex-basis:100%;flex-wrap:wrap}
.luv-form--mong .nut-dk{width:100%}
}
/* FAQ — phân cách bằng mũi chỉ may */
.faq{max-width:720px;background:var(--chi-vang) no-repeat left top;background-size:100% 1.5px;padding-top:2px}
.faq details{background:var(--chi-vang) no-repeat left bottom;background-size:100% 1.5px}
.faq summary{padding:11px 0;cursor:pointer;list-style:none;font-weight:600;font-size:13.8px;display:flex;gap:10px;align-items:center;line-height:1.35;transition:color .15s}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--cam-tram)}
.faq .mui{width:14px;height:14px;margin-left:auto;flex:none;transition:transform .22s;color:var(--cam-tram)}
.faq details[open] .mui{transform:rotate(45deg)}
.faq .tl{padding:0 0 12px;color:var(--chu-phu);font-size:13.3px;line-height:1.65}
@media(max-width:760px){
:root{--nhip:44px}
h2{font-size:21px;margin-bottom:16px;gap:9px}
/* ĐÃ BỎ luật ép ô số về .5em: nay ô số tính bằng em nên tự co theo tiêu đề. */
.bia{min-height:clamp(300px,48vh,380px)}
.bia .noi{padding:0 16px 20px}
.tien{padding:24px 18px}
.form-chinh{padding:26px 18px}
.dai .khung{gap:8px 20px;padding:12px 16px;font-size:12.5px}
}
/* ═══════════ BỐ CỤC ĐẦY ĐỦ (luv_bo_cuc = full) ═══════════ */
/* text kèm ảnh 2 cột */
.co-anh{display:grid;grid-template-columns:1fr .82fr;gap:40px;align-items:center}
.co-anh.dao{grid-template-columns:.82fr 1fr}
/* Khung ảnh = NẸP VẢI NÂU tweed + chỉ may kem (giống trang Về Luvinus) */
.co-anh .anh{position:relative;border-radius:16px;padding:8px;
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;
box-shadow:0 10px 26px rgba(0,0,0,.25);
/* Viền chỉ may kem: trước đây vẽ bằng ::after. Chuyển sang outline của
chính .anh (17/08/2026) để GIẢI PHÓNG ::after làm cánh rèm phải —
xem hop-phan.css mục ⑥c. outline-offset:-4px cho viền nằm bên trong
đúng vị trí cũ; bán kính tự thành 16−4=12px, khớp y như trước. */
outline:1.2px dashed rgba(236,213,170,.7);
outline-offset:-4px}
/* ══ NỀN SAU TẤM RÈM — nẹp vải mục 01–02 (hiệu ứng "mở vải") ═══════════
Ảnh mở ra từ một đường gấp, nên phần chưa mở LỘ RA NỀN CỦA NẸP — mà nẹp
là tweed nâu #6F5236, cùng độ sáng với ảnh nên ảnh không bật lên được.
Đặt một TẤM NỀN TWEED SẪM riêng nằm sau ảnh, thụt vào đúng 8px bằng bề
dày nẹp. Nhờ vậy VIỀN NẸP NÂU BÊN NGOÀI GIỮ NGUYÊN — chỉ vùng trong lòng
ảnh mới tối đi. Nếu đổi thẳng màu nẹp thì cả cái khung sẽ sẫm theo, hỏng
thiết kế. Đây là điểm khác so với thẻ khóa học trang chủ (ô đó không có
viền nẹp nên đổi thẳng nền ô được).
Ảnh phải nâng lên z-index 1: tấm nền là phần tử có định vị nên mặc định
nó vẽ ĐÈ LÊN ảnh (ảnh không định vị). Không nâng thì ảnh bị che mất. */
.co-anh .anh::before{
content:'';position:absolute;inset:8px;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}
.co-anh .anh img{position:relative;z-index:1}
.co-anh .anh img{width:100%;height:100%;object-fit:cover;aspect-ratio:4/5;display:block;border-radius:10px}
.co-anh .ds{gap:11px;grid-template-columns:1fr}
.co-anh .chu .ds li{padding-left:2px}
.co-anh .chu .ds li::before{content:'';width:18px;height:18px;margin-top:2px;border-radius:0;background:none;border:0;
-webkit-mask:url("data:image/svg+xml;utf8,") center/contain no-repeat;
mask:url("data:image/svg+xml;utf8,") center/contain no-repeat;
background-color:var(--cta);opacity:.85}
/* Mục "dành cho ai": ảnh NGANG giữ nguyên tỉ lệ gốc, không crop dọc */
.co-anh.ngang .anh img{aspect-ratio:auto}
@media(max-width:820px){
.co-anh,.co-anh.dao{grid-template-columns:1fr;gap:22px}
.co-anh.dao .anh{order:-1}
/* Ảnh dọc giữ đúng tỉ lệ 4/5 như PC — không ép ngang 16/10 gây crop xấu */
}
/* ══ MỤC "VÌ SAO NÊN HỌC" & "MỤC TIÊU SAU KHÓA" — THIẾT KẾ THEO MẪU khối
"Vì Sao Nên Chọn Luvinus" ở trang chủ (.why/.wcard):
· thẻ kem bo góc, chip DA trên cùng, tiêu đề (key) + mô tả bên dưới
· hover nhấc nhẹ + chip nghiêng, hiện dần khi kéo tới (thẻ trôi lên + chip phóng)
CHỈ giữ riêng MÀU NỀN chip: Vì sao = xanh rêu, Mục tiêu = vàng nghệ (qua --da). */
.ds-ic{list-style:none;display:grid;grid-template-columns:1fr;gap:18px;margin-top:8px}
@media(min-width:761px){.phan .hep>.ds-ic{grid-template-columns:1fr 1fr;gap:18px}}
/* THẺ — sao chép .wcard */
.ds-ic li{background:linear-gradient(180deg,#FFFEFB,#FAF3E7);border:0;border-radius:14px;padding:18px 20px;
box-shadow:0 2px 4px rgba(58,46,34,.09),0 8px 16px -6px rgba(58,46,34,.16);
display:flex;flex-direction:row;gap:14px;align-items:flex-start;color:var(--chu-phu);line-height:1.7;transition:.18s}
.ds-ic li:hover{box-shadow:0 2px 3px rgba(58,46,34,.1),0 7px 12px -4px rgba(58,46,34,.18);transform:translateY(-2px)}
.ds-ic li:hover .ic{transform:scale(1.08) rotate(-4deg)}
@media(prefers-reduced-motion:reduce){.ds-ic li:hover .ic{transform:none}}
/* CHIP DA — sao chép .wchip (46×46), chip nằm TRÊN CÙNG */
.ds-ic .ic{flex:none;width:44px;height:44px;border-radius:12px;display:grid;place-items:center;margin-bottom:0;color:#fff;position:relative;transition:transform .2s;
/* Chất liệu da GIỐNG HỆT chip .wchip trang chủ: nền MÀU THƯƠNG HIỆU phẳng (--chip-mau)
+ vân hạt da + sáng trên/tối dưới + chỉ khâu gạch đứt viền. Icon trắng. */
--chip-mau:var(--cta);
background-color:var(--chip-mau);
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}
/* ĐA DẠNG MÀU — 6 màu đất hài hoà, KHÔNG lặp trong 1 mục (mỗi mục ≤6 ý). Chu kỳ 6:
cam đất · xanh rêu · vàng nghệ · nâu da · xanh teal · hồng đất */
.ds-ic>li:nth-child(6n+1) .ic{--chip-mau:#C25C3E}
.ds-ic>li:nth-child(6n+2) .ic{--chip-mau:#6B8F6D}
.ds-ic>li:nth-child(6n+3) .ic{--chip-mau:#B98A32}
.ds-ic>li:nth-child(6n+4) .ic{--chip-mau:#8A5A3C}
.ds-ic>li:nth-child(6n+5) .ic{--chip-mau:#4E7F79}
.ds-ic>li:nth-child(6n) .ic{--chip-mau:#9A5F6B}
.ds-ic .ic svg{width:23px;height:23px;stroke-width:1.7}
/* TIÊU ĐỀ (key) = .wcard h3 · MÔ TẢ = .wcard p */
.ds-ic .tk{display:block;color:var(--chu-chinh);font-weight:700;font-size:14.5px;line-height:1.4;margin-bottom:9px;letter-spacing:0}
.ds-ic li>span:not(.ic){font-size:13.5px;color:var(--chu-phu);line-height:1.75}
.ds-ic b{color:var(--chu-chinh);font-weight:700}
/* HIỆN DẦN — sao chép mẫu trang chủ: thẻ trôi lên 28px + mờ→rõ, chip phóng .85→1.
Kích hoạt bằng .ic-vao (IntersectionObserver ở luvinus.js). html.js-on: không JS thì hiện sẵn. */
html.js-on .ds-ic>li{opacity:0;transform:translateY(28px);
transition:opacity .72s ease-out,transform 1.05s var(--chu-nhip)}
html.js-on .ds-ic>li>.ic{opacity:0;transform:scale(.85)}
html.js-on .ds-ic>li.ic-vao{opacity:1;transform:none}
html.js-on .ds-ic>li.ic-vao>.ic{opacity:1;transform:none;animation:khChipHien .8s var(--chu-nhip) .16s backwards;transition:transform .2s}
html.js-on .ds-ic>li.ic-vao:hover>.ic{transform:scale(1.08) rotate(-4deg)}
@keyframes khChipHien{from{opacity:0;transform:scale(.85)}}
@media(min-width:761px){html.js-on .ds-ic>li:nth-child(even){transition-delay:.09s}} /* cột phải hiện sau 1 nhịp cho so le */
@media(prefers-reduced-motion:reduce){
html.js-on .ds-ic>li,html.js-on .ds-ic>li>.ic{opacity:1 !important;transform:none !important;transition:none !important;animation:none !important}}
/* MOBILE — sao chép .wcard mobile: thẻ nằm NGANG (chip trái), chip 40px */
@media(max-width:760px){
.ds-ic li{flex-direction:row;gap:13px;align-items:flex-start;padding:18px 16px}
.ds-ic .ic{width:40px;height:40px;margin-bottom:0}
.ds-ic .ic svg{width:20px;height:20px}
.ds-ic .tk{font-size:13.5px;margin-bottom:5px}
.ds-ic li>span:not(.ic){font-size:12.5px;line-height:1.7}}
/* lưới ưu điểm 6 thẻ — thẻ vải kem, chỉ may vàng, icon trong chip */
.luoi{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:8px;background:none;border:0;border-radius:0;overflow:visible}
@media(max-width:820px){.luoi{grid-template-columns:1fr 1fr}}
/* !important thắng cả inline style 2 cột của các khóa mới — mobile luôn 1 box/hàng như khóa Ngắn hạn */
@media(max-width:520px){.luoi{grid-template-columns:1fr!important}}
.the{position:relative;background:linear-gradient(180deg,#FFFEFB,#FAF3E7);border-radius:12px;padding:20px 18px;
box-shadow:var(--bong-1);transition:transform .18s ease,box-shadow .18s ease}
.the::after{content:'';position:absolute;inset:5px;border:1.2px dashed var(--vang-nghe);border-radius:8px;opacity:.55;pointer-events:none}
.the:hover{transform:translateY(-3px);box-shadow:0 3px 7px rgba(58,46,34,.14),0 14px 22px -10px rgba(58,46,34,.2)}
.the .dau{display:flex;align-items:center;gap:11px;margin-bottom:9px}
.the .ic{width:38px;height:38px;flex:none;padding:8px;border-radius:10px;background:rgba(210,105,74,.08)}
.the h3{font-size:14.5px;font-weight:600;line-height:1.3;margin:0}
.the p{font-size:13px;color:var(--chu-phu);margin:0;line-height:1.6}
/* nội dung 30 buổi — PHIẾU BÀI HỌC: thẻ giấy kem, số buổi kiểu mảnh rập, chỉ may dưới tiêu đề */
.ds30{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:10px;background:none;border:0;border-radius:0;overflow:visible}
@media(max-width:760px){.ds30{grid-template-columns:1fr;gap:11px}}
.b1{position:relative;background:linear-gradient(180deg,#FFFEFB,#FAF4E8);border-radius:12px;padding:17px 18px 15px;
box-shadow:var(--bong-1);transition:transform .16s ease,box-shadow .16s ease}
.b1::after{content:'';position:absolute;inset:5px;border:1px dashed rgba(185,138,50,.6);border-radius:8px;pointer-events:none}
.b1:hover{transform:translateY(-2px);box-shadow:0 3px 6px rgba(58,46,34,.12),0 12px 18px -9px rgba(58,46,34,.18)}
.b1 h3,.b1 h4{font-size:14.5px;font-weight:600;line-height:1.4;color:var(--chu-chinh);display:flex;align-items:baseline;gap:10px;
padding-bottom:9px;margin-bottom:9px;
background:var(--chi-vang) no-repeat left bottom;background-size:64px 2px}
.b1 .n{font-size:11px;letter-spacing:.06em;color:var(--cam-tram);font-weight:700;flex:none;
padding:2px 7px 1px;border:1.1px dashed rgba(194,92,62,.6);border-radius:4px;background:rgba(210,105,74,.06);transform:rotate(-2deg)}
.b1 ul{list-style:none;display:grid;gap:4px}
.b1 li{position:relative;padding-left:13px;font-size:13px;line-height:1.55;color:var(--chu-phu)}
.b1 li::before{content:'';position:absolute;left:0;top:10px;width:5px;height:1.5px;background:var(--cta);opacity:.55}
.b1 .note{font-size:12.5px;line-height:1.55;color:var(--chu-phu);font-style:italic;margin-top:6px}
/* Tem THI HỌC PHẦN — dải vàng nghệ có viên kim cương gold */
.b1 .thi{position:relative;margin:11px -18px -15px;padding:9px 16px 9px 34px;border-radius:0 0 12px 12px;
background:linear-gradient(90deg,rgba(185,138,50,.16),rgba(185,138,50,.05));
border-top:1px dashed rgba(185,138,50,.6);
font-size:12.5px;font-weight:700;color:#8a6420;line-height:1.5;letter-spacing:.02em}
.b1 .thi::before{content:'';position:absolute;left:16px;top:14px;width:8px;height:8px;transform:rotate(45deg);border-radius:1px;
background:linear-gradient(135deg,var(--vang-nghe),var(--cta))}
/* cơ hội nghề nghiệp — nền DẠ TWEED nâu + chỉ kem sát mép trên */
.co-hoi{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}
.co-hoi::before{content:'';position:absolute;left:26px;right:26px;top:7px;height:1.5px;z-index:4;pointer-events:none;background:var(--chi-kem)}
@media(max-width:760px){.co-hoi::before{left:16px;right:16px}}
.co-hoi h2{color:var(--kem)}
.co-hoi .so{color:var(--cam-sang)!important;border-color:rgba(245,168,126,.5);background:rgba(245,168,126,.08)}
.co-hoi .dan-nau{color:var(--chu-phu-toi);font-size:14px;margin-bottom:22px;max-width:56ch}
.nghe-luoi{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media(max-width:700px){.nghe-luoi{grid-template-columns:1fr}}
.nghe{position:relative;display:flex;gap:14px;align-items:center;padding:17px 18px;border-radius:12px;background:rgba(255,255,255,.05);border:1px solid rgba(245,168,126,.16);transition:.18s}
.nghe::after{content:'';position:absolute;inset:4px;border:1px dashed rgba(236,213,170,.22);border-radius:9px;pointer-events:none}
.nghe:hover{background:rgba(255,255,255,.08);border-color:rgba(245,168,126,.34);transform:translateY(-2px)}
.nghe .ic{flex:none;width:40px;height:40px;border-radius:10px;display:grid;place-items:center;background:rgba(245,168,126,.14);color:var(--cam-sang)}
.nghe .ic svg{width:21px;height:21px}
.nghe b{display:block;color:var(--kem);font-size:14.5px;font-weight:600;margin-bottom:2px}
.nghe span{color:var(--chu-phu-toi);font-size:12.5px;line-height:1.5}
/* lưới ảnh 3 cột — khung VẢI KEM + chỉ may vàng, hover nhấc nhẹ */
.anh-luoi{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
@media(max-width:820px){.anh-luoi{grid-template-columns:1fr 1fr;gap:10px}}
.khung-anh{position:relative;background:#F7F0E2;padding:7px;border-radius:10px;box-shadow:var(--bong-1);transition:transform .18s ease,box-shadow .18s ease}
.khung-anh::after{content:'';position:absolute;inset:3px;border:1px dashed rgba(185,138,50,.6);border-radius:7px;pointer-events:none}
.khung-anh:hover{transform:translateY(-3px);box-shadow:0 3px 7px rgba(58,46,34,.14),0 14px 22px -10px rgba(58,46,34,.22)}
.khung-anh img{border-radius:5px;aspect-ratio:4/3;object-fit:cover;width:100%;display:block}
.khung-anh.doc img{aspect-ratio:3/4}
/* Các khóa học khác — danh sách kiểu "thẻ thời trang" (pill + viên kim cương gold–cam) */
.ds-khoa{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:7px 12px;margin-top:4px}
@media(max-width:640px){.ds-khoa{grid-template-columns:1fr}}
.ds-khoa li{list-style:none}
.ds-khoa a{display:flex;align-items:center;gap:10px;padding:8px 15px;border:1px solid var(--vien);
border-radius:999px;background:var(--trang);color:var(--chu-chinh);text-decoration:none;
font-weight:500;font-size:13.3px;line-height:1.3;transition:.2s}
.ds-khoa a::before{content:'';flex:none;width:7px;height:7px;transform:rotate(45deg);border-radius:1px;
background:linear-gradient(135deg,var(--vang-nghe),var(--cta))}
.ds-khoa a::after{content:'→';margin-left:auto;color:var(--cam-tram);font-weight:600;
opacity:0;transform:translateX(-6px);transition:.2s}
.ds-khoa a:hover{border-color:var(--cta);background:var(--cam-nhat);transform:translateY(-2px);box-shadow:var(--bong-nhe)}
.ds-khoa a:hover::after{opacity:1;transform:none}
/* ╔═══════════════════════════════════════════════════════════════════════════╗
║ MÀN HẸP — RÕ HƠN & MƯỢT HƠN CHO 3 MỤC 18/08/2026 ║
║ Cơ hội nghề nghiệp · Hình ảnh lớp học · Sản phẩm của học viên ║
╚═══════════════════════════════════════════════════════════════════════════╝
Anh Hưng: "trên mobile anh muốn hiệu ứng rõ hơn và mượt mà hơn một chút nữa".
Đo trên máy 375px trước khi sửa:
ảnh — mờ 0,3 · nghiêng 1,4° · dời 10px · thu 0,97 · chạy 0,75s
nghề — mờ 0 · dời 14px · chạy 0,68/0,85s
Bản gốc CỐ Ý thu nhỏ mọi thứ trên màn hẹp (máy tính là 2°/14px). Ý đồ đúng
— màn nhỏ thì động tác lớn dễ chóng mặt — nhưng thu hơi tay, thành ra mờ nhạt.
Nay nới lại vừa phải, KHÔNG vượt mức của máy tính.
⚠ TIỆN THỂ SỬA MỘT LỖI SO LE — lần thứ ba gặp trong ngày:
nhịp trễ viết theo kiểu 3 cột (nth-child 3n) nhưng màn hẹp:
· lưới ảnh = 2 CỘT → hàng nào cũng lệch nhịp
· lưới nghề = 1 CỘT, 4 ô → đo được nhịp trễ 0 · 0,05 · 0,1 · **0**
tức ô THỨ TƯ quay về 0 và hiện TRƯỚC ô thứ ba.
Nay đếm đúng số cột thật của màn hẹp.
CHỈ ÁP TỪ 760px TRỞ XUỐNG — máy tính không đổi một ly. */
@media(max-width:760px){
/* ── ẢNH LỚP HỌC & SẢN PHẨM HỌC VIÊN ───────────────────────────────────
Gom cả ba kiểu chọn của bản gốc vào một luật để chắc chắn đè hết, rồi
mới lật chiều nghiêng cho ô chẵn. Nếu chỉ viết luật chung thì mấy ô rơi
vào 3n của bản gốc vẫn giữ góc cũ, thành ra nghiêng lộn xộn. */
html.js-on .anh-luoi .dat-khung.nhan-cho,
html.js-on .anh-luoi .dat-khung.nhan-cho:nth-child(3n+2),
html.js-on .anh-luoi .dat-khung.nhan-cho:nth-child(3n){
opacity:.18;rotate:-2.2deg;translate:0 -16px;scale:.945}
html.js-on .anh-luoi .dat-khung.nhan-cho:nth-child(2n){
rotate:1.8deg;translate:0 -19px}
/* Chạy chậm lại cho êm: 0,75s → 0,95s. Hai giá trị cuối GIỮ 0,18s —
đó là nhịp nhấc khung khi chạm, không được kéo dài, chạm phải đáp ngay. */
html.js-on .anh-luoi .dat-khung.nhan-hien{
transition:opacity .45s ease-out,
rotate .95s cubic-bezier(.18,.86,.26,1),
translate .95s cubic-bezier(.22,1.15,.34,1),
scale .95s cubic-bezier(.16,1,.3,1),
transform .18s ease, box-shadow .18s ease}
/* So le theo 2 CỘT thật. Hai số 0s cuối để việc chạm KHÔNG bị trễ. */
html.js-on .anh-luoi .dat-khung.nhan-hien,
html.js-on .anh-luoi .dat-khung.nhan-hien:nth-child(3n+2),
html.js-on .anh-luoi .dat-khung.nhan-hien:nth-child(3n){
transition-delay:0s,0s,0s,0s,0s,0s}
html.js-on .anh-luoi .dat-khung.nhan-hien:nth-child(2n){
transition-delay:.09s,.09s,.09s,.09s,0s,0s}
/* ── CƠ HỘI NGHỀ NGHIỆP ────────────────────────────────────────────────
Thêm thu nhỏ nhẹ cho rõ hơn. Dùng thuộc tính RỜI 'scale' chứ không phải
transform — vì .nghe:hover đã chiếm transform để nhấc ô lên; đụng vào là
giẫm chân, đúng cách bản gốc đã làm với chip icon. */
html.js-on .nghe-luoi.nhom > *{translate:0 20px;scale:.965}
html.js-on .nghe-luoi.nhom.nhan-hien > *{
translate:0 0;scale:1;
transition:opacity .8s ease,
translate 1s var(--chu-nhip),
scale 1s var(--chu-nhip)}
/* 1 cột 4 ô → trễ TUẦN TỰ, không đếm theo 3. */
html.js-on .nghe-luoi.nhom.nhan-hien > *:nth-child(1){transition-delay:0s}
html.js-on .nghe-luoi.nhom.nhan-hien > *:nth-child(2){transition-delay:.09s}
html.js-on .nghe-luoi.nhom.nhan-hien > *:nth-child(3){transition-delay:.18s}
html.js-on .nghe-luoi.nhom.nhan-hien > *:nth-child(4){transition-delay:.27s}
html.js-on .nghe-luoi.nhom.nhan-hien > *:nth-child(n+5){transition-delay:.36s}
}
/* Người bật giảm chuyển động: 'scale' là thuộc tính RỜI nên phải tắt riêng,
tắt transform thôi là hụt (bài học đã ghi ở khối ⑥c hop-phan.css). */
@media(prefers-reduced-motion:reduce){
html.js-on .nghe-luoi.nhom > *,
html.js-on .nghe-luoi.nhom.nhan-hien > *{
scale:none !important;translate:none !important;
opacity:1 !important;transition:none !important}}
/* Bìa cao gần full màn trên điện thoại — xem --bia-vua-man-dt ở bien.css.
Dùng "body " để thắng mấy luật mobile khai sẵn trong tệp này (con số cứng
hoặc tỉ lệ khung ảnh), khỏi phải đi sửa từng chỗ. */
@media(max-width:760px){
body .bia{min-height:var(--bia-vua-man-dt)}
}