/* ===== IELTS 8020 — design system dùng chung (màu lấy từ logo: navy #1C355F · hồng #ED0E57) ===== */ :root { --navy:#1C355F; --navy-2:#274B85; --pink:#ED0E57; --pink-soft:#FFF0F5; --bg:#F7F9FC; --card:#FFFFFF; --line:#E5E7EB; --muted:#6B7280; --text:#1F2937; --ok:#065F46; --okbg:#D1FAE5; --warn:#B45309; --warnbg:#FEF3E2; /* (19/8/2026) Kéo toàn web về đúng ngôn ngữ hình ảnh của MÀN THI IELTS TRÊN MÁY: góc gần vuông, đường kẻ mảnh 1px, không đổ bóng lòe, không viên thuốc bo tròn. Học viên nhìn quen giao diện này ở phòng thi thì lúc thi thật không bỡ ngỡ — và đó cũng là thứ khiến web trông giống công cụ luyện thi hơn là trang bán hàng. Màu vẫn giữ nguyên bảng logo 8020 (navy + hồng). */ --radius:6px; --shadow:0 1px 2px rgba(16,24,40,.06); --line-2:#D1D5DB; } * { box-sizing:border-box; margin:0; } html { scroll-behavior:smooth; } /* Arial trước tiên — đúng font của phần mềm thi IELTS on computer, và cũng là font mà lam-bai.html (phòng thi) vẫn dùng. Trước đây thân trang dùng system-ui còn phòng thi dùng Arial, nên bước từ trang giới thiệu vào phòng thi là đổi hẳn chữ. */ body { font-family:Arial,"Helvetica Neue",Helvetica,system-ui,-apple-system,sans-serif; background:var(--bg); color:var(--text); line-height:1.6; } img { max-width:100%; } a { color:var(--navy-2); } .wrap { max-width:1080px; margin:0 auto; padding:0 20px; } /* ===== Thanh chạy chữ trên cùng (announcement bar) ===== Kỹ thuật: 1 track chứa nội dung LẶP 2 LẦN, chạy translateX(0 → -50%) là nối liền vô tận. Không dùng (đã bỏ khỏi chuẩn HTML). Dừng khi rê chuột để bấm được link. */ .ann-bar { background:var(--navy); color:#fff; overflow:hidden; position:relative; font-size:12px; line-height:1; padding:7px 0; letter-spacing:.1px; } .ann-track { display:flex; width:max-content; animation:ann-run 46s linear infinite; } .ann-bar:hover .ann-track, .ann-bar:focus-within .ann-track { animation-play-state:paused; } .ann-seq { display:flex; align-items:center; flex:none; } .ann-seq > * { padding:0 26px; white-space:nowrap; } .ann-bar a { color:#fff; text-decoration:none; font-weight:600; cursor:pointer; } .ann-bar a:hover { text-decoration:underline; } .ann-bar a:focus-visible { outline:2px solid var(--pink); outline-offset:3px; border-radius:4px; } .ann-bar .ann-dim { opacity:.82; } @keyframes ann-run { from { transform:translateX(0); } to { transform:translateX(-50%); } } /* Người bật "giảm chuyển động" trong hệ điều hành: đứng yên, cho cuộn ngang bằng tay. */ @media (prefers-reduced-motion: reduce) { .ann-track { animation:none; } .ann-bar { overflow-x:auto; } .ann-bar .ann-seq:nth-child(2) { display:none; } } /* ===== Header 2 tầng kiểu YouPass: hàng logo → thanh tab lớn → hàng tab con ===== */ /* z-index 200: menu xổ nằm TRONG header, mà dải mời vào diễn đàn (#ffBanner) đứng ngay dưới header trong DOM — để 50 thì menu 4 kỹ năng bị dải đó che mất một nửa. */ .site-header { background:#fff; border-bottom:1px solid var(--line-2); position:sticky; top:0; z-index:200; } /* height → min-height (24/8/2026): góc phải nay xếp 2 hàng (Giáo viên trên, Đăng nhập + Pro dưới) nên chiều cao cố định 58px sẽ cắt mất hàng dưới. */ .site-header .top-row { display:flex; align-items:center; gap:20px; min-height:58px; padding-top:5px; padding-bottom:5px; } .site-logo { display:flex; align-items:center; gap:9px; text-decoration:none; flex:none; } .site-logo img { height:36px; } .site-logo span { font-weight:800; color:var(--navy); font-size:15px; letter-spacing:.2px; } /* ===== Thanh tab kiểu phần mềm thi: dải nền xám nhạt, tab đang chọn NỔI TRẮNG lên ===== Bản trắng-trơn trước đó (19/8) đúng là bớt loè, nhưng 4 nhãn chữ nằm trôi trên nền trắng thì không còn ranh giới nào giữa chúng — mắt phải tự đoán đâu là một mục. Cách của màn thi thật: cả dải là một nền xám nhạt, mỗi tab là một ô có vạch ngăn, ô đang chọn tô trắng nổi lên khỏi dải như cái tai hồ sơ. Vẫn không màu mè, chỉ là có khung để đọc được. */ .tabbar { background:#EEF2F8; border-top:1px solid var(--line-2); border-bottom:1px solid var(--line-2); } /* (10/8/2026) Tab DỒN VỀ TRÁI, rộng đúng bằng chữ của nó — trước đây chia đều cả bề ngang trang nên mỗi tab là một ô mênh mông, chữ nằm lọt thỏm giữa khoảng trắng và mắt phải quét hết màn hình mới đọc xong 6 mục. Dồn trái thì cả cụm nằm gọn một góc, đọc một lượt là hết. */ .main-nav { position:relative; display:flex; gap:0; align-items:stretch; justify-content:flex-start; } /* Điện thoại: 4 nhãn chữ đầy đủ không vừa 375px → cho thanh tab cuộn ngang. Khai chung với khối @media (max-width:760px) ở cuối file (chỗ đã có sẵn .main-nav overflow-x + mask mờ mép phải), đừng thêm khối riêng ở đây nữa. LƯU Ý: trên điện thoại MENU XỔ BỊ TẮT HẲN (`.nav-drop{display:none}` ở khối đó) — chạm vào tab là đi thẳng vào trang, vì iOS ghim trạng thái :hover làm phải bấm hai lần. Nên mọi rule chỉnh vị trí menu xổ cho màn hẹp đều là code chết. */ /* position:static để menu con bên trong bám vào .main-nav (cả bề ngang) chứ không bám vào riêng ô tab — nhờ vậy nó trải thành MỘT HÀNG NGANG như thanh tab con, xem .nav-drop. */ /* position:static để menu con bám vào .main-nav (xem chú thích .nav-drop bên dưới). Vạch ngăn 1px giữa các ô — thứ duy nhất cần để 4 mục tách bạch mà không cần tô màu. */ .nav-item { position:static; display:flex; border-right:1px solid #DCE3ED; } .nav-item:first-child { border-left:1px solid #DCE3ED; } .main-nav a { position:relative; text-decoration:none; color:#374151; font-size:13.5px; font-weight:700; padding:12px 16px; border-bottom:3px solid transparent; border-radius:0; flex:0 0 auto; min-width:0; text-align:center; line-height:1.35; white-space:nowrap; display:flex; flex-direction:row; align-items:center; gap:7px; justify-content:center; transition:color .14s, background .14s, border-color .14s; } /* ===== Menu con XỔ RA KHI RÊ CHUỘT, nằm NGANG một hàng ===== Kiểu hộp dọc thả xuống dưới tab tốn một mảng dọc to đùng đè lên nội dung; xổ ngang thì chỉ dày một dòng, đúng như hàng tab con nhưng chỉ hiện khi cần. :focus-within để bàn phím Tab tới cũng mở được — người không dùng chuột vẫn vào được menu. Ẩn bằng visibility (không phải display:none) để còn chạy được hiệu ứng trượt xuống. */ /* Menu xổ = một TẤM riêng, nền xám nhạt như dải tab, mỗi mục là một ô trắng có viền. Bản trước để các mục là chữ trần xếp cạnh nhau trên nền trắng nên cả hàng dính liền thành một dải, không biết đâu là hết mục này sang mục kia. */ .nav-drop { position:absolute; top:100%; left:0; right:0; z-index:60; display:flex; flex-wrap:wrap; align-items:center; gap:8px; padding:12px 14px; background:#F4F7FB; border-bottom:1px solid var(--line-2); border-radius:0; box-shadow:0 10px 24px rgba(16,24,40,.12); opacity:0; visibility:hidden; transform:translateY(-4px); transition:.14s ease; } /* Menu CHIA CỘT — dùng cho tab "Làm 4 skills & Dự đoán đề": rê chuột vào là thấy đủ cả bốn kỹ năng cùng lúc, mỗi cột gom hết cách luyện của kỹ năng đó (kho đề, đề dự đoán, bài mẫu, lộ trình A→Z). Xem DROP.luyentap trong app.js. */ .nav-drop.co-cot { align-items:stretch; gap:0; padding:14px 8px 16px; } .nav-drop.co-cot .nd-cot { flex:1 1 0; min-width:150px; display:flex; flex-direction:column; gap:6px; padding:0 14px; border-left:1px solid #DCE3ED; } .nav-drop.co-cot .nd-cot:first-child { border-left:0; } /* Tên kỹ năng: chữ hoa nhỏ + gạch dưới, tách hẳn khỏi các dòng bên dưới nó */ .nav-drop.co-cot .nd-tieu-de { font-size:11px; font-weight:800; letter-spacing:.9px; text-transform:uppercase; color:var(--navy); padding:0 0 8px; border-bottom:2px solid var(--pink); margin-bottom:4px; } @media (max-width:900px) { .nav-drop.co-cot { flex-wrap:wrap; } .nav-drop.co-cot .nd-cot { flex:1 1 45%; border-left:0; margin-bottom:10px; } } .nav-item.has-drop:hover .nav-drop, .nav-item.has-drop:focus-within .nav-drop { opacity:1; visibility:visible; transform:none; } .main-nav .nav-drop a { flex:none; display:flex; flex-direction:row; align-items:center; justify-content:flex-start; gap:6px; text-align:left; white-space:nowrap; padding:9px 14px; font-size:13.5px; font-weight:600; color:var(--text); background:#fff; border:1px solid #DCE3ED; border-bottom:1px solid #DCE3ED; border-radius:4px; } .main-nav .nav-drop a:hover { background:var(--navy); border-color:var(--navy); color:#fff; } .main-nav a:hover { color:var(--navy); background:#E3EAF4; } /* Tab đang chọn: trắng, nổi lên khỏi dải xám, gạch hồng ở đáy. margin-bottom:-1px cho nền trắng liền xuống đường kẻ dưới của thanh — không có nó thì còn hở một sợi xám mảnh và cái tai hồ sơ trông như bị cắt lìa. */ .main-nav a.active { color:var(--navy); background:#fff; border-bottom-color:var(--pink); margin-bottom:-1px; padding-bottom:13px; } .main-nav a.active:hover { background:#fff; } /* Tab "home" gộp chung Trang chủ/Lộ trình của Tôi — hiện cả 2 nhãn khi chưa đăng nhập (JS gỡ class này khi biết đã đăng nhập → còn 1 nhãn như các tab khác). */ .main-nav a.nav-home { gap:1px; } /* Tem nhỏ cạnh nhãn tab (xem TAB_BADGE trong app.js). Chữ nhỏ, viền mảnh, không nền chói — nó là chú thích "kho đề này miễn phí", không phải nhãn khuyến mãi. (19/8/2026) Đã gỡ hai kiểu tab "viên thuốc" nav-star và nav-new: gradient hồng quét sáng + gradient cam nhấp nháy. Cả hai tab đó nay không còn trên thanh nữa, và hiệu ứng chớp tắt là thứ kéo web ra xa nhất khỏi cảm giác của một phần mềm luyện thi. */ .main-nav a .t-badge { background:#fff; color:var(--navy); border:1px solid var(--line-2); font-size:9.5px; font-weight:800; letter-spacing:.5px; border-radius:3px; padding:2px 5px; line-height:1.4; flex:none; } .main-nav a.active .t-badge { border-color:var(--pink); color:var(--pink); } @media (prefers-reduced-motion:reduce) { .main-nav a:hover { transform:none; } } /* (10/8/2026) Đã bỏ hàng tab con .subbar — xem chú thích trong app.js (renderHeader). */ /* (24/8/2026, Roger) XUỐNG HÀNG: nút Giáo viên đứng riêng một hàng, cụm Đăng nhập + Pro xuống hàng dưới. Trước đó cả ba nằm ngang một dải dài, và trên màn ~1200px nút Pro bị đẩy sát mép tới mức chữ "Quản lý lớp của bạn" chạm vào nó. Xếp 2 hàng thì mỗi nút được rộng đúng bề ngang nó cần. */ .header-cta { margin-left:auto; display:flex; flex-wrap:wrap; justify-content:flex-end; align-items:center; gap:5px 9px; } /* (24/8/2026, Roger) TRẢ VỀ MỘT HÀNG: "thằng quản lý lớp để cạnh chứ đừng đè lên tên với Pro/Intensive nữa". Bản trước ép cụm Đăng nhập + Pro xuống hàng dưới bằng flex-basis:100%, nên nút Giáo viên nằm chồng ngay trên tên người dùng và nút Pro — đọc ra như hai tầng đè nhau chứ không phải các nút ngang hàng. Nay để cả ba tự dàn ngang; hết chỗ thật thì flex-wrap ở khối cha mới cho xuống hàng, và trước lúc đó chữ "— Quản lý lớp của bạn" đã tự rút ở 1080px (.gv-dai). */ /* flex-basis:100% là thứ ĐẨY cụm này xuống hàng dưới; align-items:flex-end đẩy nó sát mép phải. Hai nút cùng min-width để mép trái thẳng nhau thành một khối gọn — nếu để mỗi nút tự co theo chữ thì "Đăng nhập" ngắn hơn hẳn nút Pro, đọc ra là hai thứ rời nhau chứ không phải một cụm. KHÔNG dùng width:max-content ở đây: nó lấy theo max-content của đứa con rộng nhất, mà khi đã đăng nhập thì nút đó mang HỌ TÊN người dùng — cụm phình ra theo độ dài cái tên (đo được 423px với một tên bình thường). */ .header-cta > .cta-stack { flex:0 1 auto; align-items:flex-end; } .header-cta > .cta-stack .btn { min-width:190px; } /* Góc phải hàng đầu trang: 4 nút đứng thành một hàng dài gần nửa màn hình. Gom TÊN NGƯỜI DÙNG và NÚT PRO thành 1 cột chồng lên nhau (tên trên — Pro dưới) thì cụm này ngắn lại một nửa mà vẫn đọc được cả hai. Chữ dài thì cắt bằng "…" chứ không đẩy rộng ra. */ .cta-stack { display:flex; flex-direction:column; align-items:stretch; gap:3px; min-width:0; } .cta-stack .btn { padding:4px 13px; font-size:12.5px; line-height:1.4; border-radius:8px; max-width:250px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } /* ===== NÚT PRO / INTENSIVE — nút bán hàng, cho phép nó to và động ===== (24/8/2026, Roger: "Pro/Intensive thì to hơn, chớp chớp hấp dẫn nhé") Lưu ý cho người sửa sau: phần trên file này có ghi 8020 đã CỐ Ý bỏ hiệu ứng nhấp nháy khỏi các tem trên thanh tab, vì chớp tắt kéo web ra xa cảm giác của một phần mềm luyện thi. Chỗ này là ngoại lệ có chủ ý và chỉ đúng MỘT nút: nút bán hàng. Đừng lấy nó làm cớ trả hiệu ứng chớp về cho các tem kia. Hiệu ứng là QUẦNG SÁNG phồng lên rồi tắt, không phải đổi màu nền chớp tắt: nhấp nháy nền làm chữ khó đọc đúng lúc người ta đang đọc giá. */ .cta-stack .btn#navPro { padding:8px 16px; font-size:14.5px; font-weight:800; letter-spacing:.2px; border-radius:9px; max-width:none; animation:proNhipTho 2.4s ease-in-out infinite; } @keyframes proNhipTho { 0%, 70%, 100% { box-shadow:0 0 0 0 rgba(237,14,87,.55); } 35% { box-shadow:0 0 0 7px rgba(237,14,87,0); } } .cta-stack .btn#navPro:hover { animation:none; } /* Ai đã tắt hiệu ứng chuyển động trong hệ điều hành thì tôn trọng — nút vẫn to và vẫn hồng, chỉ không nhấp nháy. */ @media (prefers-reduced-motion:reduce) { .cta-stack .btn#navPro { animation:none; } } /* Nút còn lại (Quản trị / Giáo viên) cũng hạ xuống cho cân với cột bên cạnh. (24/8/2026) Bóp nhỏ thêm một nấc sau khi góc phải xếp 2 hàng: header dính trên đỉnh MỌI trang, cộng thanh tab bên dưới nữa, nên mỗi 10px thừa ở đây là 10px mất đi ở phần nội dung suốt cả web. */ .header-cta > .btn { padding:5px 13px; font-size:12.5px; } /* (23/8/2026) Lối vào khu giáo viên. Viền hồng nhạt + chữ navy: đủ khác nút trắng thường để mắt bắt được, nhưng KHÔNG tô đặc như nút Pro — chỉ được phép có một nút hét to trên header, và đó là nút bán hàng. Màn hẹp thì rút còn chữ "Giáo viên" (phần sau ẩn bằng .gv-dai); tới 760px thì RIÊNG nút Giáo viên bị ẩn — từ 4/9/2026 cụm .header-cta không còn biến mất cả cụm nữa, nó giữ lại nút Tìm partner học chung + nút Quản trị (xem khối @media max-width:760px cuối file). */ /* (24/8/2026, Roger: "to hơn và nổi bật hơn xíu nhé") Đè lại cỡ chữ/đệm mà `.header-cta > .btn` vừa bóp nhỏ ở trên — nút này là lối vào cả một khu sản phẩm (lớp học), không phải một link phụ. Viền 2px + nền hồng đậm hơn + đổ bóng nhẹ để bắt mắt ngay cả khi đứng cạnh nút Pro. VẪN KHÔNG tô đặc và KHÔNG nhấp nháy: quy ước của header là chỉ MỘT nút được hét to, và đó là nút bán hàng (Pro/Intensive). To hơn thì được, át nó thì không. */ .btn-gv { border:2px solid #F49CBC; background:#FFF0F5; color:var(--navy); white-space:nowrap; padding:8px 17px !important; font-size:14.5px !important; font-weight:800; border-radius:10px; box-shadow:0 1px 4px rgba(237,14,87,.13); } .btn-gv:hover { background:#FFE0EB; border-color:var(--pink); box-shadow:0 2px 8px rgba(237,14,87,.22); } @media (max-width:1080px) { .btn-gv .gv-dai { display:none; } } /* ===== Nút Partner Match (4/9/2026, Roger: "đổi màu đẹp hơn… kèm cái hình trái tim") Khác nút Giáo viên ở chỗ ĐƯỢC TÔ NỀN: nền hồng nhạt đặc + viền hồng + trái tim hồng, đủ bắt mắt giữa hàng nút trắng mà vẫn KHÔNG át nút bán hàng Pro/Intensive (quy ước của header: chỉ một nút được hét to, và đó là nút bán hàng). Trái tim là SVG một màu ăn theo currentColor — không dùng emoji: emoji màu render khác nhau mỗi máy và lệch tông với bảng màu (luật icon của 8020). */ .btn-partner { display:inline-flex; align-items:center; gap:7px; white-space:nowrap; background:linear-gradient(180deg,#FFF1F6,#FFE1EC); color:var(--navy); border:2px solid #F49CBC; border-radius:10px; padding:8px 16px !important; font-size:14.5px !important; font-weight:800; box-shadow:0 1px 4px rgba(237,14,87,.13); } .btn-partner:hover { background:linear-gradient(180deg,#FFE4EF,#FFD2E3); border-color:var(--pink); box-shadow:0 2px 8px rgba(237,14,87,.22); } .btn-partner .ic-tim { color:var(--pink); flex:none; } .btn { display:inline-block; border:0; border-radius:4px; padding:10px 18px; font-size:14px; font-weight:700; cursor:pointer; text-decoration:none; text-align:center; -webkit-user-select:none; user-select:none; touch-action:manipulation; } .btn-pink { background:var(--pink); color:#fff; } .btn-pink:hover { background:#D00A4C; } .btn-navy { background:var(--navy); color:#fff; } .btn-outline { background:#fff; color:var(--navy); border:1px solid var(--line-2); } .btn-outline:hover { border-color:var(--navy); background:#F3F6FB; } .btn-lg { padding:14px 28px; font-size:16px; border-radius:4px; } /* Ô tài khoản trên điện thoại. min 44x44: đo 31/8/2026 nó chỉ 22x14px — nhỏ hơn nửa ngưỡng chạm 44px, bấm 3 lần mới trúng. Chữ vẫn 24px, chỉ nới vùng bấm. */ .nav-toggle { display:none; margin-left:auto; background:none; border:0; font-size:24px; cursor:pointer; color:var(--navy); min-width:44px; min-height:44px; align-items:center; justify-content:center; } /* ===== Biểu đồ band theo ngày (band-chart.js) — dùng ở /ielts/ho-so và ảnh minh hoạ trang chủ ===== */ .bc-legend { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:12px; } .bc-lg { display:flex; align-items:center; gap:7px; background:#F8FAFC; border:1px solid var(--line); border-radius:4px; padding:6px 13px; font-size:13px; color:#475569; } .bc-lg .dot { width:9px; height:9px; border-radius:50%; flex:none; } .bc-lg .nm { font-weight:600; } .bc-lg b { color:var(--navy); font-size:15px; font-weight:800; font-variant-numeric:tabular-nums; } .bc-lg i { font-style:normal; font-size:11.5px; font-weight:800; border-radius:4px; padding:1px 6px; } .bc-lg i.up { color:#065F46; background:#D1FAE5; } .bc-lg i.dn { color:#991B1B; background:#FEE2E2; } .bc-lg i.fl { color:#64748B; background:#F1F5F9; } .bc-svgbox { position:relative; } .bc-svg { display:block; width:100%; height:300px; overflow:visible; touch-action:pan-y; } .bc-svg .bc-ax { font-size:11.5px; fill:#94A3B8; font-family:inherit; } .bc-hit { cursor:crosshair; } .bc-tip { position:absolute; top:6px; pointer-events:none; transition:opacity .12s; background:var(--navy); color:#fff; border-radius:4px; padding:9px 12px; font-size:12.5px; line-height:1.7; box-shadow:0 8px 22px rgba(16,24,40,.22); min-width:140px; } .bc-tip .d { font-weight:800; font-size:12px; opacity:.8; margin-bottom:2px; } .bc-tip .no { opacity:.65; } .bc-tip .dot { display:inline-block; width:8px; height:8px; border-radius:50%; margin-right:6px; } .bc-tip b { float:right; margin-left:14px; font-variant-numeric:tabular-nums; } .bc-empty { background:#F8FAFC; border:1px dashed var(--line); border-radius:4px; padding:26px; text-align:center; color:var(--muted); font-size:14px; } @media (max-width:620px) { .bc-svg { height:240px; } .bc-lg { font-size:12px; padding:5px 10px; } } /* ===== Sections ===== */ .section { padding:64px 0; } .section.alt { background:#fff; } .kicker { color:var(--pink); font-weight:800; font-size:13px; text-transform:uppercase; letter-spacing:1.2px; margin-bottom:10px; } h1.hero-title { color:var(--navy); font-size:clamp(30px,4.6vw,46px); line-height:1.18; letter-spacing:-.5px; } h2.sec-title { color:var(--navy); font-size:clamp(23px,3vw,32px); line-height:1.25; margin-bottom:10px; } .sec-lead { color:var(--muted); font-size:16.5px; max-width:640px; } .center { text-align:center; } .center .sec-lead { margin:0 auto; } /* ===== Cards ===== */ .grid { display:grid; gap:18px; } .grid.c2 { grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); } .grid.c3 { grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); } .grid.c4 { grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); } .card { background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:22px; } .card h3 { color:var(--navy); font-size:17px; margin-bottom:8px; } .card p { color:var(--muted); font-size:14.5px; } .card .emoji { font-size:30px; margin-bottom:12px; display:block; } ul.checks { list-style:none; margin:14px 0 0; } ul.checks li { padding-left:26px; position:relative; margin-bottom:9px; font-size:14.5px; } ul.checks li::before { content:"✓"; position:absolute; left:2px; color:var(--pink); font-weight:800; } /* ===== Pill / badge ===== */ .pill { display:inline-block; border-radius:4px; padding:4px 13px; font-size:12.5px; font-weight:700; } .pill.free { background:var(--okbg); color:var(--ok); } .pill.pro { background:var(--pink-soft); color:var(--pink); } .pill.soon { background:#EEF2F7; color:var(--muted); } .pill.hot { background:var(--warnbg); color:var(--warn); } /* ===== Footer ===== */ .site-footer { background:var(--navy); color:#C7D2E4; padding:44px 0 26px; margin-top:64px; } .site-footer a { color:#fff; text-decoration:none; } .site-footer a:hover { text-decoration:underline; } .foot-grid { display:grid; grid-template-columns:2fr 1fr 1fr; gap:28px; margin-bottom:26px; } .foot-grid h4 { color:#fff; font-size:14px; margin-bottom:12px; text-transform:uppercase; letter-spacing:.8px; } .foot-grid li { list-style:none; margin-bottom:8px; font-size:14px; } .foot-brand img { height:44px; background:#fff; border-radius:4px; padding:5px 10px; margin-bottom:12px; } .foot-bottom { border-top:1px solid rgba(255,255,255,.15); padding-top:18px; font-size:13px; display:flex; justify-content:space-between; flex-wrap:wrap; gap:8px; } /* ===== Test cards (hub luyện tập) ===== */ .test-card { background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:20px; display:flex; flex-direction:column; gap:9px; box-shadow:var(--shadow); } .test-card .tag-row { display:flex; gap:7px; flex-wrap:wrap; } .test-card h3 { color:var(--navy); font-size:16px; line-height:1.4; } .test-card .meta { color:var(--muted); font-size:13px; } .test-card .btn { margin-top:auto; } .filter-row { display:flex; gap:8px; flex-wrap:wrap; margin:20px 0 22px; } .filter-chip { border:1.5px solid var(--line); background:#fff; border-radius:4px; padding:7px 16px; font-size:13.5px; font-weight:600; cursor:pointer; color:#374151; } .filter-chip.active { background:var(--navy); border-color:var(--navy); color:#fff; } .skill-tabs { display:flex; gap:6px; border-bottom:2px solid var(--line); margin-bottom:4px; overflow-x:auto; } .skill-tab { border:0; background:none; padding:12px 20px; font-size:15.5px; font-weight:700; color:var(--muted); cursor:pointer; border-bottom:3px solid transparent; margin-bottom:-2px; white-space:nowrap; } .skill-tab.active { color:var(--pink); border-bottom-color:var(--pink); } /* ===== Certs carousel ===== */ .certs-strip { display:flex; gap:16px; overflow-x:auto; padding:6px 2px 16px; scroll-snap-type:x mandatory; } .certs-strip img { height:340px; border-radius:4px; border:1px solid var(--line); box-shadow:var(--shadow); scroll-snap-align:start; cursor:zoom-in; } .cert-note { color:var(--muted); font-size:13px; margin-top:4px; } /* ===== Ảnh thật lớp học — giáo viên & học viên (nhỏ, hài hoà, 1 hàng, tối đa 2-3 tấm/trang) ===== */ .people-strip { display:flex; gap:10px; overflow-x:auto; padding:2px 2px 6px; scrollbar-width:none; } .people-strip::-webkit-scrollbar { display:none; } .people-strip img { height:120px; width:auto; object-fit:cover; border-radius:4px; border:2px solid #fff; box-shadow:var(--shadow); cursor:zoom-in; flex:none; } /* Biến thể canh giữa — cho trang có layout căn giữa (vd /ielts/pro). Dùng "safe center" để khi ảnh tràn ngang (mobile) thì tự lùi về canh trái, không bị cắt mất tấm đầu. */ .people-strip-center { justify-content:safe center; } @media (max-width:760px) { .people-strip img { height:92px; } } /* ===== Quy tắc 8020 ===== */ .pareto { display:flex; align-items:center; gap:34px; } .pareto-viz { flex:none; width:230px; } .pareto-bar { display:flex; height:56px; border-radius:4px; overflow:hidden; font-weight:800; color:#fff; font-size:15px; } .pareto-bar .p20 { background:var(--pink); width:20%; display:flex; align-items:center; justify-content:center; } .pareto-bar .p80 { background:var(--navy); width:80%; display:flex; align-items:center; justify-content:center; } .pareto-lab { display:flex; justify-content:space-between; font-size:12px; color:var(--muted); margin-top:7px; } /* ===== Lightbox ===== */ .lightbox { position:fixed; inset:0; background:rgba(10,15,30,.86); display:flex; align-items:center; justify-content:center; z-index:200; cursor:zoom-out; } .lightbox img { max-height:92vh; max-width:92vw; border-radius:4px; } /* ===== Modal đăng nhập nhanh (openAuthModal trong app.js) — gate 1 hành động (chấm AI) mà KHÔNG rời trang, giữ nguyên bài đang làm, xong tự chạy tiếp hành động đó. ===== */ .auth-modal-overlay { position:fixed; inset:0; background:rgba(10,15,30,.55); display:flex; align-items:center; justify-content:center; z-index:300; padding:20px; } .auth-modal-card { background:#fff; border-radius:6px; padding:26px; max-width:400px; width:100%; position:relative; box-shadow:0 20px 60px rgba(0,0,0,.25); max-height:92vh; overflow-y:auto; } .auth-modal-x { position:absolute; top:14px; right:14px; border:0; background:none; font-size:18px; cursor:pointer; color:var(--muted); line-height:1; } .auth-modal-card label { display:block; font-size:13px; font-weight:700; color:var(--navy); margin:12px 0 5px; } .auth-modal-card input { width:100%; border:1.5px solid var(--line); border-radius:4px; padding:12px; font-size:15px; } .auth-modal-card input:focus { outline:none; border-color:var(--pink); } .auth-tabs { display:flex; gap:6px; margin-bottom:4px; } .auth-tabs button { flex:1; border:1.5px solid var(--line); background:#fff; border-radius:4px; padding:9px; font-weight:700; font-size:14px; cursor:pointer; color:var(--muted); } .auth-tabs button.active { border-color:var(--pink); color:var(--pink); background:var(--pink-soft); } .msg { margin-top:14px; font-size:13.5px; font-weight:600; display:none; border-radius:9px; padding:10px 12px; } .msg.err { display:block; background:#FEE2E2; color:#991B1B; } .msg.ok { display:block; background:#D1FAE5; color:#065F46; } /* ===== Thẻ nhắc đặt MỤC TIÊU + NGÀY THI (openMucTieuModal trong app.js) ===== Chủ web chốt 7/8/2026: KHÔNG che màn hình nữa. Trước đây nó là modal phủ kín + nền mờ nên đang xem đề là bị chặn, phải tắt mới bấm được gì. Giờ là một thẻ nhỏ nằm GÓC TRÁI TRÊN (dưới thanh nav), không có lớp phủ → cứ kệ nó, vẫn cuộn trang / bấm nút / làm bài bình thường; điền lúc nào cũng được. Góc trái DƯỚI không dùng được vì đã kín chỗ: nút 📝 Ghi chú (bottom:16px) + bong bóng sỉ nhục & thẻ ghi chú (bottom:78px). */ /* --mt-top: app.js đặt theo đáy thanh nav dính (mỗi trang cao khác nhau) */ .mt-card { position:fixed; left:16px; top:var(--mt-top,78px); z-index:9994; width:328px; max-width:calc(100vw - 32px); background:#fff; border:1px solid var(--line); border-left:6px solid var(--pink); border-radius:6px; padding:16px 18px 16px; box-shadow:0 18px 46px rgba(16,24,40,.22); max-height:calc(100vh - var(--mt-top,78px) - 18px); overflow-y:auto; opacity:0; transform:translateX(-14px); transition:.26s ease; } .mt-card.on { opacity:1; transform:translateX(0); } .mt-card h3 { color:var(--navy); font-size:16px; margin:0 26px 5px 0; line-height:1.35; } .mt-card .sub { font-size:12.5px; color:var(--muted); line-height:1.5; margin:0; } .mt-card label { display:block; font-size:12.5px; font-weight:700; color:var(--navy); margin:11px 0 4px; } .mt-card input { width:100%; border:1.5px solid var(--line); border-radius:9px; padding:9px 10px; font-size:14.5px; } .mt-card input:focus { outline:none; border-color:var(--pink); } .mt-card .msg { margin-top:10px; font-size:12.5px; padding:8px 10px; } .mt-card .btn { display:block; width:100%; padding:10px; font-size:14px; } .mt-x { position:absolute; top:9px; right:10px; border:0; background:none; font-size:17px; cursor:pointer; color:var(--muted); line-height:1; padding:4px; } .mt-x:hover { color:var(--navy); } .mt-later { display:block; width:100%; margin-top:7px; border:0; background:none; font:inherit; font-size:12.5px; color:var(--muted); cursor:pointer; } @media (max-width:760px) { /* Màn hẹp: bám sát 2 mép cho đủ chỗ gõ, vẫn không che hết trang */ .mt-card { left:10px; right:10px; width:auto; padding:14px 15px; } } /* ===== Nudge đăng ký SAU khi thấy kết quả (không chặn, chỉ mời) ===== */ .post-nudge { background:var(--pink-soft); border:1px solid #FBD9E5; border-radius:6px; padding:18px 20px; margin:18px 0; display:flex; align-items:center; gap:16px; flex-wrap:wrap; } .post-nudge .txt { flex:1; min-width:220px; } .post-nudge .txt b { color:var(--navy); } .post-nudge .txt p { font-size:13px; color:var(--muted); margin-top:3px; } /* ===== FAQ ===== */ details.faq { background:#fff; border:1px solid var(--line); border-radius:4px; padding:16px 20px; margin-bottom:10px; } details.faq summary { font-weight:700; color:var(--navy); cursor:pointer; font-size:15px; } details.faq p { margin-top:10px; color:#374151; font-size:14.5px; } @media (max-width:760px) { /* Mobile: thanh tab lớn vẫn hiện, cuộn ngang được (giống app) — nút ☰ chỉ mở nhanh */ /* ===== (4/9/2026, Roger) GÓC PHẢI HEADER TRÊN ĐIỆN THOẠI ===== Trước đây dòng này là `.header-cta { display:none; }` — ẩn SẠCH cả cụm. Hệ quả: trên điện thoại không còn lối vào /ielts/hoc-nhom lẫn nút ⚙️ Quản trị, mà ~58% người dùng của web là điện thoại. Một học viên nhắn 4/9: mở link Zalo thì thấy khu tìm partner, tự vào web bằng trình duyệt thì không tìm ra ở tab nào cả — đúng là không có, vì lối vào duy nhất nằm trong cụm bị ẩn này (thanh tab không có mục Học nhóm; nó chỉ còn ở chân trang + dòng chạy chữ trang chủ). Nay giữ ĐÚNG HAI nút, đúng hai việc không có lối vào nào khác trên màn hẹp: · "Tìm partner học chung" → /ielts/hoc-nhom · "Quản trị" → /ielts/quan-tri (tự ẩn bằng .hidden với người không phải staff) Vẫn ẩn phần còn lại cho gọn: nút Giáo viên (khu đó vào từ chân trang), tên tài khoản và nút Pro — ô 👤 bên phải đã là đường vào /auth, còn nút mua Pro có mặt trong thân mọi trang bán. Hết chỗ thật (màn ≤360px) thì .top-row wrap cho cụm này xuống hàng dưới, không bao giờ tràn ngang. */ .header-cta { display:flex; flex-wrap:wrap; margin-left:auto; gap:6px; min-width:0; } .header-cta > .cta-stack, .header-cta > a[href="/ielts/gv"] { display:none; } /* Cỡ chữ 11px + đệm 9px là số ĐO chứ không phải ước lượng: ở 375px hàng này phải chứa logo 64 + Quản trị 60 + Tìm partner học chung 141 + ô 👤 44 + 3 khe 18 = 327 trên 335px chỗ trống. Nới thêm một nấc là ô 👤 rơi xuống hàng dưới. */ .header-cta > .btn { padding:8px 9px !important; font-size:11px !important; border-radius:8px; white-space:nowrap; } .header-cta > .btn .btn-emo { display:none; } .btn-gv { box-shadow:none; } .site-header .top-row { gap:8px; flex-wrap:wrap; } .nav-toggle { display:flex; } /* Màn hẹp: chia đều 7 tab thì mỗi tab còn ~50px, chữ vỡ vụn → quay lại kiểu cuộn ngang */ .main-nav { overflow-x:auto; scrollbar-width:none; -webkit-mask-image:linear-gradient(to right, #000 calc(100% - 26px), transparent 100%); mask-image:linear-gradient(to right, #000 calc(100% - 26px), transparent 100%); } .main-nav::-webkit-scrollbar { display:none; } .main-nav a { flex:0 0 auto; white-space:nowrap; padding:9px 11px; font-size:13px; } /* Điện thoại không có "rê chuột": chạm vào tab là đi thẳng vào trang, còn menu xổ mà giữ lại thì iOS ghim trạng thái :hover, bấm phát nữa mới đi được. Tắt hẳn cho gọn. */ .nav-drop { display:none; } .foot-grid { grid-template-columns:1fr; } .pareto { flex-direction:column; align-items:flex-start; } .section { padding:44px 0; } } /* (4/9/2026, Roger: "giao diện ĐT cắt giảm hết những thứ ko cần") Trên màn điện thoại thật (≤480px) hàng đầu trang phải chứa: logo + nút Tìm partner học chung + nút Quản trị + ô tài khoản. Đo ở 375px: bấy nhiêu thứ cần ~389px, thừa ra đúng cỡ con rồng. Nên bỏ ẢNH LINH VẬT khỏi header ở khổ này — nó là trang trí, và chỗ của nó là trang /ielts/8020 chứ không phải hàng đầu trang chật nhất của web. Máy tính bảng (481–760px) vẫn còn rồng. Muốn trả lại: xoá đúng khối này. */ @media (max-width:480px) { .site-logo img:first-child { display:none; } .site-logo img { height:30px; } } /* Tiện ích dùng chung mọi trang (nhiều file .html dùng class="hidden" nhưng chỉ lam-bai.html tự định nghĩa cục bộ — đưa lên đây 1 lần cho toàn site). */ .hidden { display:none !important; } /* ===== Bảng vàng bản GỌN — dùng cho mọi trang trừ /ielts/luyen-tap ===== */ /* Một dải mỏng nhưng phải BẮT MẮT: viền hồng bên trái + huy chương nhấp nháy nhẹ + tên và band cỡ lớn. Nếu chỉ để nền navy trơn thì nó chìm vào bố cục. */ .bvm { display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin:0 0 18px; background:linear-gradient(100deg,#16294a,#24406f 55%,#2d5088); color:#fff; border-radius:6px; padding:13px 18px 13px 16px; font-size:14px; border-left:6px solid var(--pink); box-shadow:0 8px 26px rgba(28,53,95,.28); position:relative; overflow:hidden; } .bvm::after { content:""; position:absolute; inset:0; pointer-events:none; background:radial-gradient(320px 60px at 12% 50%, rgba(255,123,163,.22), transparent 70%); } .bvm .ttl { font-weight:800; white-space:nowrap; font-size:14.5px; letter-spacing:.2px; } .bvm .cup { font-size:19px; animation:bvmPulse 2.2s ease-in-out infinite; display:inline-block; } @keyframes bvmPulse { 0%,100%{transform:scale(1)} 50%{transform:scale(1.18)} } /* Mỗi ô người dẫn đầu xuống 2 dòng: TÊN ở trên, "đạt 9.0" / "học 72 phút" ở dưới — cân đối hơn nhồi tất cả vào một hàng dài. */ .bvm .win { display:flex; align-items:center; gap:9px; background:rgba(255,255,255,.15); border:1px solid rgba(255,255,255,.28); border-radius:6px; padding:7px 15px; } .bvm .win .ic { font-size:17px; line-height:1; } .bvm .win .col { display:flex; flex-direction:column; line-height:1.25; } .bvm .win b { font-size:15.5px; font-weight:800; } .bvm .win em { font-style:normal; font-size:12.5px; font-weight:700; opacity:.85; } .bvm .win em i { font-style:normal; color:#FF9EBC; font-size:13.5px; font-weight:800; } .bvm .sk { opacity:.78; font-size:13px; white-space:nowrap; } .bvm a { margin-left:auto; color:#fff; text-decoration:none; font-weight:700; white-space:nowrap; background:rgba(255,255,255,.16); border:1px solid rgba(255,255,255,.3); border-radius:9px; padding:6px 14px; font-size:13.5px; } .bvm a:hover { background:#fff; color:var(--navy); border-color:#fff; } /* ĐIỆN THOẠI (7/8/2026): trước đây flex-wrap:wrap + nút "Xem bảng đầy đủ" chiếm trọn bề ngang → dải này bẻ thành 4–5 dòng, cao ~450px, ăn gần hết màn hình đầu tiên và đẩy

cùng nội dung xuống dưới nếp gấp. Khách vào bằng điện thoại (phần lớn traffic) mở trang ra chỉ thấy bảng xếp hạng của người lạ, chưa thấy thứ họ bấm vào để đọc → thoát. Giờ ép về MỘT HÀNG kéo ngang: giữ nguyên đủ thông tin, cao còn ~48px. */ @media (max-width:620px){ .bvm { font-size:13px; padding:9px 12px 9px 10px; gap:8px; margin-bottom:14px; flex-wrap:nowrap; overflow-x:auto; overscroll-behavior-x:contain; -webkit-overflow-scrolling:touch; scrollbar-width:none } .bvm::-webkit-scrollbar { display:none } .bvm > * { flex:0 0 auto } /* không co lại, cứ tràn ra rồi kéo */ .bvm .ttl { font-size:13.5px } .bvm .win { padding:5px 11px; border-radius:4px } .bvm .win b { font-size:14px } .bvm .win em { font-size:11.5px } .bvm a { margin-left:0; padding:5px 11px; font-size:12.5px } /* Lớp phủ trang trí bám theo nội dung khi kéo → tắt hẳn trên điện thoại cho gọn. */ .bvm::after { display:none } } /* ===== 🔥 Chế độ sỉ nhục: ô tick ở /ielts/ho-so + bong bóng nhắc học (mọi trang) ===== Đặt ở GÓC TRÁI dưới: góc phải đã có nút "Đăng ký học" (#ldBtn) và cột mạng xã hội (#sfCol). */ .roast-row { display:flex; flex-wrap:wrap; gap:6px 10px; align-items:center; margin:10px 0 4px; } .roast-toggle { display:inline-flex; align-items:center; gap:7px; cursor:pointer; background:#fff; border:1px solid var(--line); border-radius:4px; padding:6px 14px; font-weight:700; font-size:13.5px; color:var(--navy); user-select:none; transition:.15s; } .roast-toggle:hover { border-color:var(--pink); color:var(--pink); } .roast-toggle input { margin:0; width:15px; height:15px; accent-color:var(--pink); cursor:pointer; } .roast-note { font-size:12.5px; color:var(--muted); } /* bottom:78px — góc trái dưới đã có nút 📝 Ghi chú nhanh (note-float.js, cao 50px), bong bóng phải đứng NGAY TRÊN nó, y như #sfCol đứng trên #ldBtn ở góc phải. */ .roast-toast { position:fixed; left:16px; bottom:78px; z-index:9991; width:384px; max-width:calc(100vw - 28px); background:#fff; border:1px solid var(--line); border-left:6px solid var(--pink); border-radius:6px; padding:16px 18px 15px; box-shadow:0 22px 54px rgba(16,24,40,.26); opacity:0; transform:translateY(18px) scale(.94); pointer-events:none; transition:.28s ease; } /* Lúc hiện thì nảy nhẹ một cái (cubic-bezier vọt quá 1 rồi rơi về) cho đập vào mắt */ .roast-toast.on { opacity:1; transform:translateY(0) scale(1); pointer-events:auto; transition:opacity .3s ease, transform .46s cubic-bezier(.18,1.5,.4,1); } .roast-x { position:absolute; top:7px; right:9px; background:none; border:0; font-size:17px; color:var(--muted); cursor:pointer; line-height:1; padding:5px; } .roast-x:hover { color:var(--navy); } .roast-body { display:flex; gap:13px; align-items:center; padding-right:14px; } /* Nhân vật: SVG vẽ tay (trong app.js) trên nền tròn hồng. To hẳn + NHÚN NHẢY để hút mắt: lấy đà (bẹp xuống) → bật lên nghiêng người → rơi xuống nảy thêm cái nữa, rồi đứng im nghỉ. */ .roast-pet { position:relative; flex:0 0 auto; width:104px; height:104px; border-radius:50%; background:radial-gradient(circle at 50% 42%,#FFF0F5 0%,#FFE1EC 100%); display:flex; align-items:center; justify-content:center; } /* Quầng hồng phập phồng phía sau — đây là thứ kéo ánh mắt về góc màn hình */ .roast-pet::before { content:""; position:absolute; inset:-7px; border-radius:50%; background:radial-gradient(circle,rgba(237,14,87,.30) 0%,rgba(237,14,87,0) 70%); animation:roastHalo 2.2s ease-in-out infinite; } .roast-pet svg { width:96px; height:96px; display:block; position:relative; transform-origin:50% 88%; /* gốc xoay ở chân → nhún/nghiêng ra dáng chứ không quay quanh bụng */ animation:roastHop 2.2s cubic-bezier(.3,.9,.4,1) infinite; } @keyframes roastHop { 0%,52%,100% { transform:translateY(0) rotate(0) scale(1,1) } 58% { transform:translateY(2px) rotate(0) scale(1.12,.86) } /* nhún lấy đà */ 70% { transform:translateY(-16px) rotate(-14deg) scale(.92,1.12) } /* bật lên */ 79% { transform:translateY(-2px) rotate(10deg) scale(1.08,.94) } /* chạm đất */ 88% { transform:translateY(-9px) rotate(-6deg) scale(1,1) } /* nảy nhẹ lần 2 */ 95% { transform:translateY(0) rotate(0) scale(1.05,.95) } } @keyframes roastHalo { 0%,55%,100%{opacity:.3;transform:scale(1)} 74%{opacity:.85;transform:scale(1.16)} } @media (prefers-reduced-motion:reduce){ .roast-pet svg,.roast-pet::before,.roast-tag { animation:none } } /* Tem chữ kiểu truyện tranh dán lệch trên đầu con thú */ .roast-tag { position:absolute; top:-9px; left:-12px; z-index:2; background:var(--pink); color:#fff; font-size:11.5px; font-weight:800; letter-spacing:.3px; padding:3px 9px; border-radius:9px; transform:rotate(-11deg); box-shadow:0 4px 10px rgba(237,14,87,.4); white-space:nowrap; animation:roastTag 2.2s ease-in-out infinite; } @keyframes roastTag { 0%,58%,100%{transform:rotate(-11deg) scale(1)} 70%{transform:rotate(-16deg) scale(1.18)} 82%{transform:rotate(-7deg) scale(1.02)} } .roast-msg { font-size:15.5px; line-height:1.55; } .roast-act { display:flex; gap:9px; flex-wrap:wrap; margin-top:13px; } .roast-act .btn { padding:8px 17px; font-size:14px; } @media (max-width:640px){ .roast-toast { left:10px; right:10px; bottom:78px; width:auto } .roast-pet { width:88px; height:88px } .roast-pet svg { width:82px; height:82px } .roast-msg { font-size:14.5px } .roast-note { flex:1 1 100% } } /* ===== THẺ TÀI LIỆU PDF (30/8/2026) ===== Dời từ