/* bien.css — Biến màu · font · nhịp + reset nền. Dùng chung MỌI trang. Copy nguyên khối :root từ BỘ CHUẨN GIAO DIỆN. Không sửa mã màu, không thêm màu. */ :root{ --kem:#F7EBDC; --nau-am:#5C4739; --chan-trang:#3A2E22; --cam-nhat:#FBE3D2; --cta:#D2694A; --cta-dam:#BC5A3D; --cam-tram:#C25C3E; --cam-sang:#F5A87E; --chu-phu-toi:#D2BFA8; --chu-chinh:#1F1C19; --chu-phu:#63594C; --xanh-reu:#6B8F6D; --vang-nghe:#B98A32; --trang:#FFFFFF; --vien:rgba(92,71,57,.14); --font-tieu-de:'Playfair Display',serif; /* ══ PHÔNG TIÊU ĐỀ BÌA — ĐÃ CHỐT 19/08/2026 ═════════════════════════════ Anh Hưng thử lần lượt 5 mẫu rồi chốt Cormorant Garamond. mẫu 4 Archivo Narrow 600px · chữ hoa 30,0px · 40,6 KB — thấy đơn giản mẫu 8 Literata 755px · chữ hoa 31,0px · 78,4 KB — thấy cồng kềnh mẫu 12 Crimson Pro 635px · chữ hoa 25,0px · 39,0 KB — chữ nhìn nhỏ mẫu 13 Cormorant Infant 641px · chữ hoa 27,0px · 46,1 KB — bản bo tròn mẫu 10 Cormorant Garamond 621px · chữ hoa 27,0px · 49,3 KB ← CHỐT Hẹp nhất nhóm chữ có chân, nét thanh, chân nhọn — kiểu chữ nhà mốt. ĐÃ CÓ SẴN trên máy chủ từ đầu, chỉ khai đúng độ đậm 600, trùng khớp với mọi tiêu đề bìa toàn web (đã kiểm cả 8 tệp CSS, không chỗ nào bôi đậm giả). ĐÃ DỌN 19/08/2026: bốn phông thử nghiệm đã gỡ khỏi fonts.css và xoá 12 tệp .woff2 (204 KB). Thư mục phông nay chỉ còn đúng 4 phông đang dùng: Montserrat (chữ thường) · Playfair Display (tiêu đề trong bài) · Cormorant Garamond (tiêu đề bìa) · Source Serif 4 (dự phòng). Muốn thử lại phông khác thì tải lại từ fonts.gstatic.com — mất khoảng một phút, xin bản TĨNH đúng độ đậm 600 cho nhẹ (xem cách làm ở fonts.css). */ --font-bia:'Cormorant Garamond',serif; --font-noi-dung:'Montserrat',system-ui,-apple-system,sans-serif; --cot-chu:850px; --cot-rong:1240px; --nhip:62px; --cao-header:52px; --cao-day:40px; /* ══ BÌA VỪA TRỌN MỘT MÀN HÌNH ═════════════════════════════════════════ Anh Hưng: ở zoom 100% trên PC, bìa + dải nâu bị khuất một chút ở đáy; muốn CAO TỐI ĐA mà vẫn nằm trọn trong màn hình đầu tiên. ĐO ĐƯỢC trước khi sửa (bìa đang khai cứng 500px): header 53px · bìa 500px · dải nâu 54–63px → tổng 607–616px Màn 864px cao thì THỪA 248px (bìa quá thấp, phí chỗ). Màn 630px cao thì chỉ thừa 14px — máy anh Hưng thấp hơn chút nữa là hụt. Tức là con số cứng 500px vừa phí chỗ ở màn cao, vừa tràn ở màn thấp. CÁCH TÍNH: lấy chiều cao màn hình trừ đi header và dải nâu — phần còn lại đúng bằng chỗ trống cho bìa. Bìa tự co giãn theo từng máy, không phải đoán con số nào. 66px = dải nâu cao nhất (.stats 63px) + 3px dư an toàn. Cố ý dùng MỘT con số cho mọi trang thay vì đo riêng .dai (54px): chênh 9px mắt không thấy, mà luôn sai về phía AN TOÀN — không bao giờ tràn. clamp giữ hai đầu: không thấp dưới 400px (màn laptop nhỏ, bìa lùn quá thì mất khí thế), không cao quá 900px (màn dọc rất cao thì bìa dài lê thê, khách phải cuộn mới thấy nội dung). ⚠ Chỉ dùng trong mốc ≥761px. Điện thoại giữ nguyên luật cũ. */ /* Chiều cao dải nâu ngay dưới bìa. MẶC ĐỊNH 66px cho .stats (trang chủ + Liên hệ, dải cao 63px). Các tab dùng .dai thì dải THẤP HƠN nên phải khai lại trong css riêng của tab đó, không thì bìa ngắn hơn cần và hở chân. Công thức: số này = chiều cao dải + 3px. +3 vì --cao-header khai 52px mà header đo thật 53px (có 1px viền), cộng 2px dư cho khỏi lòi thanh cuộn. Kết quả: hở đúng 2px ở mọi trang. ĐO ĐƯỢC: .stats 63px · .dai 52px (Hình ảnh · Video · Lịch học · Dịch vụ) · 53px (Về Luvinus) · 54px (Khóa học). */ --cao-dai-bia:66px; --bia-vua-man:clamp(400px, calc(100vh - var(--cao-header) - var(--cao-dai-bia)), 900px); /* ══ BÌA GẦN FULL MÀN TRÊN ĐIỆN THOẠI ══════════════════════════════════ Anh Hưng: ảnh bìa trên điện thoại muốn kéo cao gần full màn. ĐO ĐƯỢC trước khi sửa (máy 412×830): trang chủ bìa 429px = 52% màn, còn trống 254px Về Luvinus bìa 353px = 43% màn, còn trống 335px Bìa đang khai theo con số cứng (380–480px) hoặc theo tỉ lệ khung ảnh, không liên quan gì tới chiều cao máy — nên máy nào cũng thừa một khoảng. CHỖ TRỐNG THẬT SỰ CHO BÌA = chiều cao màn − header − dải nâu − THANH ĐÁY. Thanh đáy (.day, hai nút Đăng ký / Gọi ngay) là thanh NỔI ĐÈ lên nội dung, cao 40px. Không trừ nó ra thì đáy dải nâu bị hai nút che mất. ĐƠN VỊ MÀN HÌNH — ĐÃ ĐỔI dvh → svh NGÀY 21/08/2026 Anh Hưng: "trang chủ mobile kéo lên kéo xuống một đoạn nhỏ thì bìa giật giật, nhảy kích thước". Đúng, và thủ phạm là chính đơn vị dvh. Trên điện thoại có ba cách đo chiều cao màn: lvh đo lúc thanh địa chỉ ĐÃ ẨN — số lớn nhất, cố định svh đo lúc thanh địa chỉ CÒN HIỆN — số nhỏ nhất, cố định dvh đo phần NHÌN THẤY NGAY LÚC ĐÓ — ĐỔI LIÊN TỤC khi cuộn dvh nghe thì đúng nhất, nhưng nó bám sát thanh địa chỉ: kéo nhẹ một cái là thanh co lại, dvh nhảy số, chiều cao bìa nhảy theo. Cuộn lên cuộn xuống vài lần là bìa co giãn liên tục — đúng cảm giác giật giật. svh không đổi trong suốt phiên nên bìa đứng yên tuyệt đối. Đổi lại, lúc thanh địa chỉ ẩn đi thì bìa hụt so với màn đúng bằng chiều cao thanh đó (~50–60px). Chấp nhận đánh đổi này: hụt một chút mà đứng yên thì đẹp hơn vừa khít mà nhảy liên tục. KHÔNG dùng lvh: lvh cố định nhưng đo theo lúc thanh đã ẩn, nên khi thanh còn hiện thì bìa dài hơn màn và bị khuất đáy — đúng lỗi ban đầu đã sửa. Khai 100vh trước rồi 100svh sau: máy cũ không hiểu svh sẽ dùng dòng trên. clamp giữ hai đầu: không dưới 340px (điện thoại xoay ngang), không quá 760px (máy màn rất dài thì bìa lê thê). */ --cao-dai-dt:96px; /* dải trên điện thoại — .stats đo được 94px, +2 dư */ /* +6px dư: --cao-day khai 40px nhưng thanh đáy đo thật 41–45px tuỳ trang (nội dung nút khác nhau). Thiếu phần dư này thì trang Về Luvinus bị hai nút che mất 4px đáy dải nâu. */ --bia-vua-man-dt:clamp(340px, calc(100vh - var(--cao-header) - var(--cao-dai-dt) - var(--cao-day) - 6px), 760px); --bia-vua-man-dt:clamp(340px, calc(100svh - var(--cao-header) - var(--cao-dai-dt) - var(--cao-day) - 6px), 760px); --bong:0 18px 44px rgba(58,46,34,.14); --bong-nhe:0 8px 24px rgba(58,46,34,.10); /* Thang bóng đổ chuẩn 3 mức — dùng thống nhất, không chế shadow lẻ */ --bong-1:0 1px 2px rgba(58,46,34,.08),0 4px 8px -3px rgba(58,46,34,.13); /* thẻ nhỏ, widget */ --bong-noi:0 5px 12px rgba(58,46,34,.28),0 22px 36px -12px rgba(58,46,34,.38); /* khối nổi trên nền vải */ /* ══ NHỊP KÉO RÈM — DÙNG CHUNG CẢ WEB ═══════════════════════════════════ Mọi động tác "vén mở" trên site (thẻ khóa học trang chủ, bản đồ Liên hệ, lưới Hình ảnh, ảnh bài, ảnh Về Luvinus, bảng lịch, đường chỉ học phí) phải dùng đúng NHỊP này và MỘT trong ba bậc thời gian dưới. Không gán số lẻ tại chỗ nữa — đo được trước khi gộp là 10 tấm rèm chạy từ 171 đến 986 px/s, chênh nhau 5,8 lần, nên mỗi tab như một bàn tay khác kéo. VÌ SAO ĐỔI NHỊP: nhịp cũ cubic-bezier(.65,0,.35,1) là chậm–nhanh–chậm. Tính ra nó ngốn 29% thời gian mới nhích được 10% quãng đường, rồi bung với tốc độ gấp 2,86 lần trung bình. Mắt không đọc ra "kéo rèm" mà đọc ra "khựng một cái rồi giật". Nhịp mới chỉ mất 5% thời gian cho 10% đầu và đỉnh tốc chỉ 2,33 lần — đều tay suốt, chỉ lắng lại ở cuối, đúng như một bàn tay kéo tấm rèm thật. BA BẬC theo QUÃNG rèm phải đi (đo ở khổ 1280px). Rèm đi xa được nhiều thời gian hơn nhưng KHÔNG tỉ lệ thuận — mắt người chấp nhận vệt dài lướt nhanh hơn vệt ngắn. Sau khi gộp, dải tốc còn 123–535 px/s. */ --rem-nhip:cubic-bezier(.3,.6,.3,1); --rem-ngan:1s; /* quãng dưới 280px — bảng lịch học, ảnh mục 01 khóa học */ --rem-vua:1.5s; /* quãng 280–700px — thẻ trang chủ, bản đồ, lưới ảnh, ảnh bài */ --rem-dai:2s; /* quãng trên 700px — chỉ may học phí, ảnh Về Luvinus */ /* NHỊP CHỮ TRỒI LÊN — dùng cho chữ trên bìa các tab. Khác nhịp rèm: rèm là bàn tay kéo (đều tay), còn chữ là vật LẮNG vào chỗ nên phải có đuôi dài. Nhịp này bung 2,15 lần và dành 56% thời gian cho 20% quãng cuối. Nhịp trước đó (.16,1,.3,1) vọt 49% quãng chỉ trong 1/10 thời gian đầu, đỉnh tốc gấp 6,24 lần — mắt đọc ra là giật, không phải trồi lên. */ --chu-nhip:cubic-bezier(.38,.6,.3,1); } /* Nhịp dọc mobile — thống nhất mọi trang */ @media(max-width:640px){ :root{ --nhip:40px } } /* ══ ĐIỆN THOẠI: HIỆU ỨNG CHẬM LẠI VÀ MỀM ĐUÔI HƠN (sửa 17/08/2026) ══════ Anh Hưng: "màn hình bố trí dọc rất dài, tốc độ kéo không thể nhanh quá ko kịp đọc" — khách vừa đọc vừa kéo từng đoạn ngắn, mắt DỪNG LẠI ở mỗi khối chứ không lướt qua như trên PC. Hai việc phải làm, và đã làm cả hai: ① MỐC NỔ SÂU HƠN — bên luvinus.js, lùi 32% mép dưới thay vì 8%. ② THỜI LƯỢNG DÀI HƠN 20% — ngay dưới đây. Chỉ làm ① thì hiệu ứng nổ đúng chỗ nhưng vẫn vụt qua nhanh; chỉ làm ② thì vẫn nổ ở mép dưới ngoài tầm mắt. Phải đủ đôi. VÌ SAO CHỈ +20% mà không nhiều hơn: rèm đi trên màn hẹp có quãng NGẮN hơn PC (khổ ~330px so với ~820px). Cùng thời lượng thì tốc trên điện thoại đã chậm hơn sẵn. Kéo dài quá nữa là thành ì. +20% giữ dải tốc trong khoảng mắt vẫn đọc ra "đang chuyển động" chứ không phải "đang đứng". NHỊP cũng mềm hơn: dời điểm neo cuối để 20% quãng chót lắng lâu hơn — đây mới là đoạn mắt nhìn kỹ nhất khi khách đã dừng lại đọc. MÀN RỘNG KHÔNG ĐỔI MỘT LY — anh đã duyệt PC rồi. */ @media(max-width:820px){ :root{ --rem-nhip:cubic-bezier(.26,.62,.24,1); /* đuôi dài hơn (.3,.6,.3,1) */ --rem-ngan:1.2s; /* 1s → 1,2s */ --rem-vua:1.8s; /* 1,5s → 1,8s */ --rem-dai:2.4s; /* 2s → 2,4s */ --chu-nhip:cubic-bezier(.33,.62,.24,1); /* chữ lắng vào chỗ mềm hơn */ } } /* ══ HỆ CHỈ MAY dùng chung ══ QUY TẮC MÀU CHỈ (đã chuẩn hóa toàn site — mọi kích thước màn hình): • CAM #C25C3E .6 → may mí nối 2 mảng nền (dấu ranh giới giữa các "tấm vải") • VÀNG #B98A32 .55/.6 → chỉ trên nền SÁNG (trắng · kem · hồng): viền thẻ, khối, hộp • KEM #ECD5AA .7 → chỉ trên nền TỐI (nẹp nâu, tweed): khung ảnh/video, thẻ khóa học • KEM SÁNG #FFF4E0 .6 → chỉ trên NÚT DA cam đậm (tương phản cao hơn cho nút) • ĐỒNG #C39D49 + bóng nâu → mũi may yên ngựa (nối 2 nền), PC & mobile cùng màu */ :root{ --chi-cam:repeating-linear-gradient(90deg,rgba(194,92,62,.6) 0 5px,transparent 5px 11px); --chi-vang:repeating-linear-gradient(90deg,rgba(185,138,50,.6) 0 4px,transparent 4px 9px); --chi-kem:repeating-linear-gradient(90deg,rgba(236,213,170,.55) 0 4px,transparent 4px 9px); /* ══ MỐC RÈM TAN ═════════════════════════════════════════════════════════ Màn rèm mở đầu tan hết ở giây 2,10 — cùng lúc JS gắn .bia-chay cho bìa. Mọi hoạt ảnh của bìa phải LẤY MỐC NÀY LÀM GỐC, nếu không nó sẽ chạy sau lưng tấm rèm và khách không xem được gì. Con số 2100ms nằm trong luvinus.js (LUV_TRE_REM) — sửa bên đó thì sửa cả biến này. */ --tre-rem:2.1s; /* ══ THỚ VẢI DẠ — công thức nền dùng chung ═══════════════════════════════ Chuỗi SVG này trước bị chép tay ra 2 chỗ (ngăn menu điện thoại và danh sách ô chọn biểu mẫu). Menu sổ trên PC nay cũng cần đúng thớ vải đó, thành 3 chỗ — nên gom một mối: sửa ở đây là cả web đổi theo. Luôn đi đủ bộ ba, thiếu một cái là mất chất vải: background-color:; background-image:var(--vai-hat),var(--vai-cheo); background-blend-mode:soft-light,normal; --vai-tweed = hạt nhiễu thô (0.55), thớ dạ tweed — menu, ô chọn --vai-fine = hạt nhiễu mịn (0.9), vải mịn — nẹp thẻ khóa học, khung video --vai-cheo = sợi chéo 45° rất mờ, tạo hướng dệt */ --vai-fine: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"); --vai-tweed: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"); --vai-cheo:repeating-linear-gradient(45deg,rgba(255,238,214,.05) 0 1px,transparent 1px 5px); /* ══ VẢI LINEN HỒNG ĐẤT — nền mục "Các Khóa Học" ═════════════════════════ Công thức này vốn chép tay ở 2 chỗ trong trang.css (mục Các Khóa Học và nền ngoài khối Đăng ký), giống hệt nhau từng ký tự. Menu sổ trên PC nay cũng dùng, thành 3 chỗ — nên gom về đây. PHẢI ĐẶT Ở :root CHỨ KHÔNG PHẢI body.home: menu đầu trang có mặt ở MỌI trang, để trong body.home thì các trang trong sẽ mất nền, menu thành trong suốt. Dùng đủ bộ ba: background-color:var(--linen-mau); background-image:var(--linen-anh); background-blend-mode:var(--linen-hoa); */ --linen-mau:#F2E2D6; /* Vân thật của tấm linen: hạt vải + sợi dệt nghiêng 63°. Tách riêng để ô rê chuột trong menu dùng lại được ĐÚNG vân này mà không kéo theo hai lớp toả sáng bên dưới — hai lớp đó tính theo kích thước của chính khối mang nó, đắp lên một dòng menu bé tí sẽ thành quầng sáng tròn lấm chấm trong từng dòng, rất bẩn. */ --linen-van: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); --linen-van-hoa:soft-light,normal; /* Hai lớp toả sáng: sáng ở đỉnh, ngả nâu ở đáy — chỉ hợp với khối lớn. */ --linen-sang: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%); /* Bộ đầy đủ dùng cho khối lớn (mục Các Khóa Học, nền khối Đăng ký, tấm menu) */ --linen-anh:var(--linen-van),var(--linen-sang); /* Sắc linen ĐẬM hơn, dùng cho ô đang rê chuột trong menu. Đo trên vùng sáng nhất của tấm: nổi hơn nền 1.43 lần, chữ --nau-am trên đó đạt 5.40:1. */ --linen-dam:#E2C7B3; --linen-hoa:soft-light,normal,normal,normal; /* ══ VÂN KẺ CHÉO — nền vải trắng của cả trang ════════════════════════════ Đây là nền mà mục "Vì Sao Nên Chọn Luvinus" đang dùng: nó không có nền riêng nên ăn thẳng nền trang. Menu sổ trên PC nay dùng lại đúng vân này. Dùng kèm background-color:var(--trang), KHÔNG cần blend — vân đã là đường kẻ mảnh vẽ sẵn trên nền trong suốt. */ --van-ke-cheo: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"); /* MŨI MAY MÍ nối 2 mảng nền — mũi chỉ cam mảnh, đầu bo tròn, có bóng chỉ (thay nét đứt thô của CSS) */ --may-mi:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='9'%20height='5'%3E%3Cline%20x1='1.3'%20y1='3.05'%20x2='5.4'%20y2='3.05'%20stroke='rgba(110,55,35,0.15)'%20stroke-width='1'%20stroke-linecap='round'/%3E%3Cline%20x1='1.3'%20y1='2.15'%20x2='5.4'%20y2='2.15'%20stroke='%23C2664A'%20stroke-width='1.2'%20stroke-linecap='round'%20opacity='0.78'/%3E%3C/svg%3E"); /* ══ MŨI MAY YÊN NGỰA — khâu HAI mảng nền lại làm một ═════════════════════ Khác may mí: may mí nằm TRÊN mép một mảng (viền cho mảng đó), còn yên ngựa VẮT NGANG khe — nửa nét bên này, nửa bên kia. Hình mũi dựng cho ra mũi khâu THẬT, không phải hai vạch thẳng: · hai LỖ KIM đầu–cuối, hơi bẹt vì nhìn nghiêng → mắt tin là sợi chỉ xuyên QUA vải chứ không nằm đè lên trên · thân sợi HƠI CONG (đường bậc hai) — chỉ thật luôn võng dưới lực căng · ba lớp chồng: bóng đổ xuống phải · thân chỉ đồng · sợi sáng mảnh trên lưng → ra khối tròn của sợi chỉ, không phải vệt phẳng Màu ĐỒNG #C39D49 theo quy tắc chỉ ở trên: yên ngựa nối 2 nền dùng đồng, PC và mobile CÙNG MÀU (chỉ khác cỡ mũi). CÁCH DÙNG — bám đúng ba việc, thiếu một là hỏng: ① thẻ đặt lớp .khe-yen-ngua (hoặc tự khai ::before) ② ::before đặt top âm nửa chiều cao để vắt ngang khe ③ thẻ phải nằm trong danh sách 'kim chạy chỉ' ở luvinus.js thì mới có hiệu ứng may dần */ --may-yen-ngua:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='8'%20height='14'%3E%3Cellipse%20cx='2'%20cy='3'%20rx='0.95'%20ry='0.7'%20fill='rgba(58,40,18,.30)'/%3E%3Cellipse%20cx='6'%20cy='11.7'%20rx='0.95'%20ry='0.7'%20fill='rgba(58,40,18,.30)'/%3E%3Cpath%20d='M2.45%203.85%20Q4.45%207.3%205.62%2010.95'%20fill='none'%20stroke='rgba(58,40,18,.40)'%20stroke-width='2.05'%20stroke-linecap='round'/%3E%3Cpath%20d='M2.29%203.69%20Q4.29%207.14%205.46%2010.79'%20fill='none'%20stroke='%23C39D49'%20stroke-width='1.7'%20stroke-linecap='round'/%3E%3Cpath%20d='M2.15%203.55%20Q4.15%207%205.32%2010.65'%20fill='none'%20stroke='rgba(255,232,176,.55)'%20stroke-width='0.55'%20stroke-linecap='round'/%3E%3C/svg%3E"); --may-yen-ngua-nho:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='6'%20height='10'%3E%3Cellipse%20cx='1.5'%20cy='2.2'%20rx='0.7'%20ry='0.52'%20fill='rgba(58,40,18,.30)'/%3E%3Cellipse%20cx='4.5'%20cy='8.4'%20rx='0.7'%20ry='0.52'%20fill='rgba(58,40,18,.30)'/%3E%3Cpath%20d='M1.85%202.8%20Q3.35%205.3%204.2%207.9'%20fill='none'%20stroke='rgba(58,40,18,.40)'%20stroke-width='1.5'%20stroke-linecap='round'/%3E%3Cpath%20d='M1.73%202.68%20Q3.23%205.18%204.08%207.78'%20fill='none'%20stroke='%23C39D49'%20stroke-width='1.25'%20stroke-linecap='round'/%3E%3Cpath%20d='M1.62%202.57%20Q3.12%205.07%203.97%207.67'%20fill='none'%20stroke='rgba(255,232,176,.55)'%20stroke-width='0.42'%20stroke-linecap='round'/%3E%3C/svg%3E"); } /* KIM CHẠY CHỈ — JS gắn .chi-cho (chờ), .chi-may (may dần khi vào khung nhìn) */ .chi-cho.khau{transform:scaleX(0);transform-origin:left center} .chi-may.khau{transform:scaleX(1);transition:transform 2.6s cubic-bezier(.3,.6,.3,1) .15s} .chi-cho:not(.khau):not(.chan):not(.tin-tuc):not(.khe-yen-ngua)::before{transform:scaleX(0);transform-origin:left center} .chi-may:not(.khau):not(.chan):not(.tin-tuc):not(.khe-yen-ngua)::before{transform:scaleX(1);transition:transform 2.6s cubic-bezier(.3,.6,.3,1) .2s} /* Mũi YÊN NGỰA (chân trang, khe Tin Tức, đáy khối lịch): MAY TỪNG MŨI trái→phải — hé lộ dần, mũi chỉ không bị kéo giãn */ .chan.chi-cho::before,.tin-tuc.chi-cho::before,.khe-yen-ngua.chi-cho::before{clip-path:inset(-4px 100% -4px 0)} .chan.chi-may::before,.tin-tuc.chi-may::before,.khe-yen-ngua.chi-may::before{clip-path:inset(-4px 0 -4px 0);transition:clip-path 3s cubic-bezier(.3,.6,.3,1) .15s} /* KHE YÊN NGỰA — luật DÙNG CHUNG cho mọi tab. Gắn lớp .khe-yen-ngua vào thẻ NẰM DƯỚI khe là xong; không phải chép lại ảnh mũi ở từng tệp nữa. */ /* display:flow-root — KHÔNG PHẢI cho đẹp, mà để mũi khâu nằm ĐÚNG KHE. Mũi được đặt theo mép trên của thẻ này (top âm). Nhưng nếu con bên trong có lề trên, lề đó "thông" ra ngoài (margin collapsing) và đẩy mép thẻ xuống — mép thẻ không còn trùng với chỗ hai màu nền gặp nhau. Đo trên trang khóa học: lề thông ra 26px, khiến mũi khâu rơi lệch xuống 19px, nằm lửng giữa vùng trắng thay vì nằm trên khe. flow-root chặn lề thông ra, mép thẻ về đúng đáy khối trên (đo lại: lệch 0px), mà nội dung bên trong KHÔNG xê dịch một pixel nào. */ .khe-yen-ngua{position:relative;display:flow-root} .khe-yen-ngua::before{ content:'';position:absolute;left:26px;right:26px;top:-7px;height:14px; z-index:4;pointer-events:none; background-image:var(--may-yen-ngua); background-repeat:repeat-x;background-position:center} @media(max-width:760px){ .khe-yen-ngua::before{left:16px;right:16px;top:-5px;height:10px; background-image:var(--may-yen-ngua-nho)}} #lich.chi-cho::after{clip-path:inset(-4px 100% -4px 0)} #lich.chi-may::after{clip-path:inset(-4px 0 -4px 0);transition:clip-path 3s cubic-bezier(.3,.6,.3,1) .15s} /* CON TRỎ KÉO trên ảnh/gallery — chỉ PC (con trỏ kim đã bỏ theo yêu cầu) */ @media(hover:hover) and (pointer:fine){ figure.anh,.the-anh{cursor:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='24'%20height='24'%3E%3Cpath%20d='M8.2%207.8%20L20%2016M8.2%2016.2%20L20%208'%20stroke='%23F5E9D4'%20stroke-width='4'%20stroke-linecap='round'/%3E%3Ccircle%20cx='6'%20cy='6.5'%20r='2.4'%20fill='none'%20stroke='%234A3728'%20stroke-width='1.6'/%3E%3Ccircle%20cx='6'%20cy='17.5'%20r='2.4'%20fill='none'%20stroke='%234A3728'%20stroke-width='1.6'/%3E%3Cpath%20d='M8.2%207.8%20L20%2016M8.2%2016.2%20L20%208'%20stroke='%234A3728'%20stroke-width='1.8'%20stroke-linecap='round'/%3E%3C/svg%3E") 12 12,pointer} } *{box-sizing:border-box;margin:0;padding:0} html{scroll-behavior:smooth} body{font-family:var(--font-noi-dung);color:var(--chu-chinh);background-color:var(--trang); /* Vân kẻ chéo = tile SVG (sắc nét mọi DPR, không moiré/vệt loang như repeating-gradient sọc lẻ px) */ background-image:var(--van-ke-cheo); font-size:16px;line-height:1.75;-webkit-font-smoothing:antialiased} img{max-width:100%;display:block} a{color:inherit} /* Focus bàn phím rõ ràng toàn site (:where = 0 ưu tiên, rule riêng vẫn thắng) */ :where(a,button,select,summary,input,textarea,[tabindex]):focus-visible{outline:2px solid var(--cta);outline-offset:2px} .khung{max-width:var(--cot-rong);margin:0 auto;padding:0 clamp(22px, 2vw, 36px)} /* Màn ≤1500px (≈ PC zoom 100% & phóng to hơn): thu bề ngang → lề 2 bên rộng hơn. Màn >1500px (PC zoom 90%/80%) giữ nguyên 1240 như anh thấy ổn. */ @media(max-width:1500px){ :root{ --cot-rong:1140px; } } /* Chừa chỗ cho thanh CTA đáy — chỉ trên điện thoại (nơi thanh đáy hiện) */ @media(max-width:960px){ body{padding-bottom:var(--cao-day)} }