/* ═══════════════════════════════════════════════════════════ HOME TOEIC — nghe-khuyet.css Trang "Luyện nghe" — chọn đề (dải tab, cùng tinh thần .series-tabs của trang Luyện đề) → chọn Part → chọn câu/nhóm câu → vào thẳng game Nghe khuyết/Điền khuyết (exam-engine.js). CHỈ web công khai (toeicthaysang) — dùng design token chung của style.css, KHÔNG import exams.css. ═══════════════════════════════════════════════════════════ */ /* Màu: XANH DƯƠNG giống hệt "Luyện đề" — chốt lại lần 3 (2026-09-08), user dừng hẳn thử nghiệm đổi màu riêng cho Luyện nghe (đã qua cam → xanh dương → cyan pastel) và quyết định quay về đúng --primary cho đơn giản, khỏi lo lệch tông nữa. Giữ NGUYÊN tên biến --nk-c* (đỡ phải sửa lại hàng chục chỗ dùng var(--nk-c...) bên dưới + trong body.nk-game-mode ở exams/style.css) — chỉ trỏ lại giá trị bên trong sang đúng token --primary. Hero cũng đổi lại .pg-hero--sky (giống hệt hero exams/index.html của Luyện đề) trong nghe-khuyet.html. */ :root { --nk-c: var(--primary); --nk-c-light: var(--primary); --nk-c-dark: var(--primary-dark, #1558c8); --nk-c-bg: var(--primary-light); --nk-c-border: var(--primary-light); --nk-c-shadow: rgba(29,111,242,.3); } .nk-page { padding-bottom: 40px; } /* Khớp lề .pg-hero (banner đầu trang) với .container ngay dưới nó — .container tự nới lề ra 24px ở mốc ≥768px (style.css) nhưng .pg-hero (định nghĩa chung, dùng nhiều trang có nội dung bên dưới khác nhau) thì không, nên chỉ vá RIÊNG ở đây (trang này, nội dung bên dưới chắc chắn là .container) — KHÔNG vá trong style.css vì sẽ đụng các trang khác cũng dùng .pg-hero nhưng cột nội dung hẹp hơn (co-ban.css .cb-body vẫn cố định 16px, hoặc trang dùng class --w560/720/900/ 1040). Cùng cách làm với exams/exams.css cho trang "Luyện đề". */ @media (min-width: 768px) { .pg-hero { padding: calc(var(--nav-h, 60px) + 22px) 24px 0; } } /* ── Dải tab bộ đề — cùng bố cục 1 hàng cuộn ngang như .series-tabs bên trang "Luyện đề" (exams/exams.css). Trước đây dùng flex-wrap khiến các tab xuống 2 hàng trên màn hẹp (bug thật user báo) — đổi hẳn sang cuộn ngang 1 hàng duy nhất, không bao giờ vỡ dòng bất kể có bao nhiêu năm ETS. */ .nk-tabs { display: flex; gap: 8px; margin: 26px 0 24px; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; } .nk-tabs::-webkit-scrollbar { display: none; } .nk-tab { display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0; padding: 9px 18px; border-radius: var(--radius-pill); border: 1.5px solid var(--border); background: var(--bg-card); color: var(--text-2); font-size: 14px; font-weight: 700; cursor: pointer; white-space: nowrap; opacity: .55; transition: border-color .15s, color .15s, background .15s, box-shadow .15s, transform .1s, opacity .15s; } .nk-tab:hover { opacity: .85; border-color: var(--nk-c-light); color: var(--nk-c-dark); } /* Cả bộ đề đang khoá hết (chưa mua) — báo trước ngay trên tab bằng icon khoá, đỡ để học viên bấm vào mới biết toàn đề khoá (user gợi ý). Không đổi hẳn sang màu cảnh báo gắt (đỏ) — chỉ là gợi ý thông tin, không phải lỗi, tab vẫn bấm được để xem màn mời mua. */ .nk-tab--locked svg { width: 12px; height: 12px; flex-shrink: 0; opacity: .9; color: #ea580c; } .nk-tab--locked.active svg { opacity: .95; color: #fff; } .nk-tab:active { transform: scale(.97); } .nk-tab.active { background: linear-gradient(135deg, var(--nk-c-light) 0%, var(--nk-c) 100%); border-color: transparent; color: #fff; opacity: 1; box-shadow: 0 4px 16px -2px var(--nk-c-shadow); } [data-theme="dark"] .nk-tab:hover { color: var(--nk-c-light); border-color: var(--nk-c-light); } .nk-step-hidden, .nk-hidden { display: none !important; } .nk-login-hint { display: inline-flex; align-items: center; gap: 8px; background: var(--nk-c-bg); border: 1.5px solid transparent; border-radius: var(--radius-pill); color: var(--nk-c-dark); font-size: 12.5px; font-weight: 700; padding: 7px 14px; margin: -8px 0 18px; cursor: pointer; transition: border-color .15s, transform .1s; } .nk-login-hint:hover { border-color: var(--nk-c); } .nk-login-hint:active { transform: scale(.97); } .nk-login-hint svg { flex-shrink: 0; } .nk-back { display: inline-flex; align-items: center; gap: 6px; background: var(--surface, var(--bg)); border: 1.5px solid var(--border); border-radius: var(--radius-pill); color: var(--text-2, var(--text)); font-weight: 700; font-size: 13px; cursor: pointer; padding: 7px 14px 7px 11px; margin-bottom: 18px; box-shadow: var(--shadow-sm); transition: border-color .15s, color .15s, background .15s, transform .1s; } .nk-back svg { flex-shrink: 0; transition: transform .18s; } .nk-back:hover { border-color: var(--nk-c); color: var(--nk-c-dark); background: var(--nk-c-bg); } .nk-back:hover svg { transform: translateX(-2px); } .nk-back:active { transform: scale(.96); } .nk-step-title { font-size: 19px; font-weight: 800; color: var(--text); margin: 0 0 18px; line-height: 1.35; } /* ── Bước 1: lưới đề ── */ .nk-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px; } .nk-loading, .nk-empty { color: var(--text-3); font-size: 14px; padding: 34px 4px; text-align: center; grid-column: 1 / -1; } /* --nk-c* = alias trỏ về đúng --primary (xem :root ở đầu file). ĐỒNG BỘ HOÁ 2026-09-23 với 2 trang "cùng họ" Từ vựng (.cb-story-card, co-ban.css) và Luyện đọc (.dc-topic-card, luyen-doc-chu-de.css) — user phản hồi 3 trang "mỗi nơi 1 kiểu design". CÙNG 1 công thức nền/viền/bo góc/bóng/icon ở cả 3 file (chỉ khác tiền tố lớp/biến màu accent) — sửa 1 nơi nhớ soi lại 2 nơi còn lại. */ .nk-exam-card { display: flex; flex-direction: column; gap: 14px; position: relative; overflow: hidden; /* Mảng màu góc trên-phải trải rộng làm nền (không phải blob tròn nhỏ âm offset) — cùng kỹ thuật với .exam-row bên exams/exams.css (trang Luyện đề) để mượt/tự nhiên như nhau, tránh hiện tượng dồn màu thành 1 cục cứng ở góc mà bản blob tròn trước đây bị. */ background: radial-gradient(120% 140% at 100% 0%, var(--nk-c-bg) 0%, transparent 55%), var(--bg-card); border: 1.5px solid var(--border); border-radius: var(--radius); padding: 18px 18px 16px; cursor: pointer; text-align: left; box-shadow: var(--shadow-sm); transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease; } .nk-exam-card:hover { border-color: var(--primary-light); transform: translateY(-3px); box-shadow: var(--shadow-md); } /* Đề khoá — nền glow hổ phách thay cho xanh dương (cùng công thức radial-gradient, chỉ đổi màu), đồng bộ với nền thẻ khoá bên Từ vựng/Luyện đọc. Đặt SAU rule nền thường để override đúng thứ tự. */ .nk-exam-card.is-locked { background: radial-gradient(120% 140% at 100% 0%, #fde68a 0%, transparent 55%), var(--bg-card); border-color: #fed7aa; } .nk-exam-card.is-locked:hover { border-color: #d97706; } /* Hàng icon+tiêu đề CÙNG hàng ngang (user 2026-09-23: "cho tiêu đề nằm chung biểu tượng như bên Từ vựng") — thay cho icon/tiêu đề xếp CHỒNG dọc trước đây. Công thức y hệt .cb-story-row bên co-ban.css (gap 12px, align-items flex-start). width:100% vì .nk-exam-card không còn align-items:flex-start (đã bỏ, xem ở trên) nhưng vẫn khai rõ cho chắc. */ .nk-exam-card-row { display: flex; align-items: flex-start; gap: 12px; width: 100%; min-width: 0; } .nk-exam-card-icon { width: 40px; height: 40px; flex-shrink: 0; border-radius: 11px; background: linear-gradient(135deg, var(--primary-mid), var(--primary-dark)); color: #fff; display: flex; align-items: center; justify-content: center; box-shadow: 0 3px 10px -2px rgba(29,111,242,.4); } .nk-exam-card-icon svg { width: 19px; height: 19px; } .nk-exam-card-title { flex: 1; min-width: 0; font-weight: 700; font-size: 15.5px; color: var(--text); line-height: 1.35; } /* Thanh tiến độ "đã nghe" — VÒNG 4 (2026-09-23, user: "nằm trên nút luyện ngay/vào học thì hợp lý hơn" — dời từ ĐẦU thẻ xuống NGAY TRÊN nút "Luyện ngay" ở cuối thẻ). Cùng công thức .cb-story-progress bên co-ban.css: track+nhãn số xếp CHUNG 1 HÀNG NGANG. Sửa 1 nơi nhớ soi lại 2 nơi còn lại. */ .nk-exam-card-progress { display: flex; align-items: center; gap: 8px; } .nk-exam-card-progress-track { flex: 1; min-width: 0; height: 5px; border-radius: 999px; background: var(--bg-hover); overflow: hidden; } .nk-exam-card-progress-fill { height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--primary-mid), var(--primary-dark)); transition: width .3s ease; } .nk-exam-card-progress-fill.is-complete { background: var(--success); } .nk-exam-card-progress-label { flex-shrink: 0; font-size: 11.5px; font-weight: 800; color: var(--text-2); white-space: nowrap; } /* Đề khoá (admin bật exams.listening_game_locked + tài khoản chưa mua) — vẫn bấm được (mất cơ hội mời mua nếu khoá cứng), nền đổi tông cam (xem .nk-exam-card.is-locked ở trên) + icon khoá góc trên-phải để nhận ra ngay giữa lưới đề, giống hệt cách "Video xem thử"/"Video ngắn" đã làm. KHÔNG còn giảm opacity cả thẻ (bản cũ) — nền tint hổ phách đã đủ làm dấu hiệu, giảm opacity thêm sẽ làm thẻ nhìn "xỉn" hơn 2 trang kia (Từ vựng/Luyện đọc chỉ tint nền, không giảm opacity). Đặt HẲN bên trong padding của card (không âm offset ra ngoài) nên không đụng gì .nk-exam-card { overflow:hidden } ở trên. */ /* Badge khoá góc thẻ — ĐỔI SANG CAM (2026-09-09, user chốt lại): trước đó cố tình để trung tính đen/xám (xem lịch sử ở CLAUDE.md mục "Luyện nghe" — coi badge này chỉ là icon báo hiệu, không phải nút hành động), nhưng user yêu cầu đổi hẳn sang đúng tông cam "gợi ý nâng cấp" đã dùng xuyên suốt app (.nk-locked-icon, .nk-locked-btn...) để nhất quán — mọi icon khoá giờ đồng bộ 1 màu cam trong toàn bộ trang Luyện nghe, không còn ngoại lệ trung tính. */ .nk-exam-card-lock { position: absolute; top: 12px; right: 12px; width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: linear-gradient(150deg, #fb923c 0%, #ea580c 100%); border: 1px solid rgba(255,255,255,.35); color: #fff; box-shadow: 0 3px 8px -1px rgba(234,88,12,.5), inset 0 1px 0 rgba(255,255,255,.25); backdrop-filter: blur(3px); } .nk-exam-card-lock svg { width: 13px; height: 13px; } /* Nút "Luyện ngay" (user 2026-09-23: "thêm nút luyện ngay cho giống luyện đọc") — CÙNG khuôn dạng pill với .dc-card-cta (luyen-doc-chu-de.css)/.cb-story-action-btn (co-ban.css): full-width, bo 999px, gradient xanh/cam theo trạng thái khoá. Khác dc ở chỗ đây là