) — dòng
trống thật ra là 2 thẻ
liền nhau. Cho cặp
đó thêm khoảng cách rõ hơn hẳn 1
đơn (xuống dòng thường trong cùng đoạn), giống cách .passage-spacer tách đoạn ở bài đọc gốc. */
.free-trans-vi-inline br + br { content: ''; display: block; height: 8px; }
/* Email/chat (Part 7): mỗi đoạn/tin nhắn là 1 thẻ
/
— cần khoảng cách riêng giữa các div con mới thấy rõ ranh giới đoạn. */
.free-trans-vi-inline > div { margin-bottom: 0.8em; }
.free-trans-vi-inline > div:last-child { margin-bottom: 0; }
[data-theme="dark"] .free-trans-vi-inline { background: transparent; color: #94a3b8; border-color: #26364f; }
/* Khối 2 (miễn phí) — bản dịch câu hỏi + đáp án. Đồng bộ nền/chữ với khối "Tiếng Việt" của
Part 1,2 (.free-trans-sec-vi: nền kem, chữ nâu) thay vì nền xám trung tính như trước, cho
đồng nhất trải nghiệm free giữa các Part. Chỉ tô xanh dòng đáp án đúng. */
.vi-block {
margin-top: 10px;
padding: 10px 14px;
background: #fffdf5;
border-radius: 10px;
display: flex;
flex-direction: column;
gap: 6px;
}
[data-theme="dark"] .vi-block { background: #2a2113; }
.vi-block-label {
font-size: 10px;
font-weight: 700;
letter-spacing: .06em;
text-transform: uppercase;
opacity: .75;
color: #78350f;
}
[data-theme="dark"] .vi-block-label { color: #ffd699; }
.vi-block-q {
font-size: calc(var(--ef) - 1px);
color: #78350f;
font-weight: 400;
line-height: 1.6;
}
[data-theme="dark"] .vi-block-q { color: #ffd699; }
.vi-block-opt {
font-size: calc(var(--ef) - 1px);
color: #78350f;
line-height: 1.6;
}
[data-theme="dark"] .vi-block-opt { color: #ffd699; }
.vi-block-opt-correct { color: #16a34a; }
/* Dịch câu hỏi (bên phải câu hỏi) */
.q-trans-badge {
font-size: 12px;
color: var(--text-hint);
font-style: italic;
margin-bottom: 12px;
}
/* Đáp án */
.options-list {
display: flex;
flex-direction: column;
gap: 8px;
margin-top: 0;
}
.option-item {
display: flex;
align-items: center;
gap: 12px;
padding: 10px 14px;
border: 0.5px solid #e2e8f0;
border-radius: 8px;
cursor: default;
background: #ffffff;
transition: border-color 0.15s, background 0.15s;
user-select: none;
}
[data-theme="dark"] .option-item { background: #1e293b; border-color: #334155; }
.opt-circle { cursor: pointer; }
.opt-text { cursor: text; user-select: text; touch-action: pan-y; }
.option-item:hover .opt-circle {
background: #F0F7FF;
border-color: #378ADD;
color: #378ADD;
}
[data-theme="dark"] .option-item:hover:not(.selected):not(.correct):not(.wrong):not(.missed-correct):not(.blank-correct) .opt-circle { background: #16324f; }
.option-item.selected {
border-color: #378ADD;
background: #E6F1FB;
}
[data-theme="dark"] .option-item.selected { background: #16324f; }
/* Kết quả */
.option-item.correct {
border-color: var(--green);
background: var(--green-bg);
}
.option-item.wrong {
border-color: var(--red);
background: var(--red-bg);
}
.option-item.missed-correct {
border-color: #16a34a;
background: #dcfce7;
}
[data-theme="dark"] .option-item.missed-correct { background: #0f2e1c; }
.option-item.blank-correct {
border: 2px dashed var(--green);
background: var(--green-bg);
}
/* Hình tròn chữ cái */
.opt-circle {
width: 26px;
height: 26px;
border-radius: 50%;
border: 0.5px solid #cbd5e1;
background: transparent;
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
font-size: 13px;
font-weight: 600;
color: #475569;
transition: background 0.15s, border-color 0.15s, color 0.15s;
line-height: 1;
}
[data-theme="dark"] .opt-circle { border-color: #475569; color: #94a3b8; }
.option-item.selected .opt-circle {
background: #378ADD;
border-color: #378ADD;
color: #ffffff;
}
.option-item.correct .opt-circle {
background: var(--green);
border-color: var(--green);
color: #ffffff;
}
.option-item.wrong .opt-circle {
background: var(--red);
border-color: var(--red);
color: #ffffff;
}
.option-item.missed-correct .opt-circle {
background: #16a34a;
border-color: #16a34a;
color: #ffffff;
}
.option-item.blank-correct .opt-circle {
background: var(--green);
border-color: var(--green);
color: #ffffff;
}
.opt-text {
font-size: var(--ef);
font-weight: 400;
color: var(--text-main);
line-height: 1.5;
flex: 1;
}
/* ── REVIEW GROUP (segmented control) ── */
.review-group {
display: flex;
align-items: stretch;
height: var(--btn-h);
background: var(--white);
border: 1.5px solid #c9dcfa;
border-radius: 8px;
overflow: hidden;
}
.rg-btn {
display: flex;
align-items: center;
justify-content: center;
background: transparent;
border: none;
border-right: 1px solid #c9dcfa;
color: #1e4f9c;
padding: 0;
width: var(--btn-h);
cursor: pointer;
transition: background 0.18s ease;
font-family: inherit;
}
.rg-btn:last-child { border-right: none; }
.rg-btn:hover:not(:disabled) { background: #dbe9ff; }
.rg-btn:disabled { opacity: 0.32; cursor: not-allowed; }
.rg-btn svg { flex-shrink: 0; }
[data-theme="dark"] .review-group { background: #334155; border-color: #475569; }
[data-theme="dark"] .rg-btn { color: #e2e8f0; border-right-color: #475569; }
[data-theme="dark"] .rg-btn:hover:not(:disabled) { background: #475569; }
/* ── 2 PHÚT CẢNH BÁO ── */
.warning-overlay {
position: fixed;
inset: 0;
background: rgba(0,0,0,0.55);
z-index: 500;
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
pointer-events: none;
transition: opacity 0.3s;
}
.warning-overlay.show { opacity: 1; }
.warning-box {
background: var(--white);
border-radius: var(--radius-xl);
padding: 36px 48px;
text-align: center;
box-shadow: var(--shadow-lg);
animation: warningPop 0.4s cubic-bezier(0.34,1.56,0.64,1);
}
@keyframes warningPop {
from { transform: scale(0.8); opacity: 0; }
to { transform: scale(1); opacity: 1; }
}
.warning-icon { display:flex; justify-content:center; margin-bottom: 12px; color: #f59e0b; }
.warning-text {
font-size: 20px;
font-weight: 700;
color: var(--navy);
margin-bottom: 6px;
}
.warning-sub { font-size: 14px; color: var(--text-sub); }
/* ── CONFIRM SUBMIT MODAL ── */
.modal-overlay {
position: fixed;
inset: 0;
background: rgba(0,0,0,0.45);
z-index: 600;
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
pointer-events: none;
transition: opacity 0.25s;
}
.modal-overlay.show { opacity: 1; pointer-events: all; }
.modal-box {
background: var(--white);
border-radius: var(--radius-xl);
padding: 32px 36px;
max-width: 420px;
width: 90%;
box-shadow: var(--shadow-lg);
text-align: center;
}
.modal-title {
font-size: 20px;
font-weight: 700;
color: var(--navy);
margin-bottom: 10px;
}
.modal-body { font-size: 14px; color: var(--text-sub); margin-bottom: 24px; line-height: 1.6; }
.modal-actions { display: flex; gap: 12px; justify-content: center; }
.modal-btn {
border: none;
border-radius: var(--radius-md);
padding: 11px 28px;
font-family: inherit;
font-size: 14px;
font-weight: 700;
cursor: pointer;
transition: var(--transition);
}
.modal-btn.cancel { background: var(--bg-alt); color: var(--text-sub); }
.modal-btn.cancel:hover { background: #e2e8f0; }
[data-theme="dark"] .modal-btn.cancel:hover { background: #334155; }
.modal-btn.confirm { background: var(--primary, #1d6ff2); color: #fff; }
.modal-btn.confirm:hover { background: var(--primary-dark, #1558c8); }
/* Nút "Nâng cấp tài khoản" trong modal — tách riêng khỏi .confirm (xanh dùng cho các modal
khác như Nộp bài/Thoát) để đồng bộ tông vàng/cam "PRO" với badge lượt trải nghiệm + toast. */
.modal-btn.modal-btn-upgrade {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
text-decoration: none;
background: linear-gradient(135deg, #fbbf24, #f97316);
color: #fff;
box-shadow: 0 2px 8px rgba(249,115,22,.35);
transition: transform .15s, box-shadow .15s;
}
.modal-btn.modal-btn-upgrade:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(249,115,22,.45); }
.modal-btn.modal-btn-upgrade:active { transform: translateY(0); box-shadow: 0 2px 6px rgba(249,115,22,.35); }
/* Nội dung modal khi hiện do hết lượt trải nghiệm PRO/ngày (2 game Nghe khuyết/Điền khuyết) */
.modal-body-trial { display: flex; flex-direction: column; gap: 6px; margin-bottom: 24px; }
.modal-body-trial div:last-child { font-weight: 700; color: #c2410c; }
[data-theme="dark"] .modal-body-trial div:last-child { color: #fb923c; }
/* ── CONFIRM SUBMIT MODAL ── */
.confirm-question { font-size: 15px; font-weight: 600; color: var(--text); margin-bottom: 10px; }
.confirm-blank-summary { font-size: 13px; color: #7c3aed; margin-bottom: 10px; }
.confirm-blank-list { text-align: left; background: #fdf4ff; border: 1px solid #e9d5ff; border-radius: 10px; padding: 10px 14px; display: flex; flex-direction: column; gap: 6px; max-height: 200px; overflow-y: auto; }
.confirm-blank-row { display: flex; gap: 10px; align-items: baseline; font-size: 13px; }
.confirm-blank-part { font-weight: 700; color: #7c3aed; white-space: nowrap; min-width: 52px; }
.confirm-blank-nums { color: var(--text-sub); line-height: 1.5; }
/* ── TIẾP TỤC LÀM BÀI MODAL ── */
.resume-modal-box { text-align: left; }
.resume-modal-box .modal-title { text-align: center; }
.resume-info {
background: var(--bg-alt);
border-radius: var(--radius-md);
padding: 14px 16px;
margin-bottom: 20px;
font-size: 13px;
color: var(--text-sub);
line-height: 1.7;
}
/* ═══════════════════════════════════════════════════════════════
TRANG KẾT QUẢ — RESULT PAGE
═══════════════════════════════════════════════════════════════ */
.result-page {
min-height: 100vh;
background:
radial-gradient(ellipse at 10% 10%, rgba(255,192,0,0.08) 0%, transparent 55%),
radial-gradient(ellipse at 90% 20%, rgba(29,111,242,0.06) 0%, transparent 55%),
var(--bg);
padding: 0 0 60px;
}
/* Header kết quả */
.result-header {
background: var(--white);
border-bottom: 1px solid var(--border);
padding: 20px 32px;
display: flex;
align-items: center;
gap: 16px;
}
.result-header-logo {
font-size: 15px;
font-weight: 700;
color: var(--navy);
}
.result-header-title {
font-size: 16px;
font-weight: 600;
color: var(--text-sub);
}
.result-container {
max-width: 760px;
margin: 0 auto;
padding: 40px 20px 0;
}
/* Desktop rộng: card điểm số dính bên trái, chi tiết Part bên phải —
tránh xếp chồng dọc quá dài khi làm đủ 7 Part. */
@media (min-width: 860px) {
.result-container {
max-width: 1000px;
display: grid;
grid-template-columns: 320px 1fr;
gap: 20px;
align-items: start;
}
.result-score-card { position: sticky; top: 20px; margin-bottom: 0; }
.result-parts-card { margin-bottom: 0; }
}
/* Tổng điểm */
.result-score-card {
background: var(--white);
border: 1px solid var(--border);
border-radius: var(--radius-xl);
padding: 32px 28px 28px;
text-align: center;
margin-bottom: 20px;
box-shadow: var(--shadow-lg);
}
.result-score-label {
font-size: 11px;
font-weight: 700;
color: var(--text-hint);
letter-spacing: 2px;
text-transform: uppercase;
margin-bottom: 0;
}
.result-score-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
margin-top: 24px;
}
.result-stat-wide { grid-column: 1 / -1; }
.result-stat {
background: var(--bg-alt);
border: 1px solid var(--border);
border-radius: var(--radius-md);
padding: 14px 12px;
}
.result-stat-value {
font-size: 22px;
font-weight: 800;
color: var(--text-main);
margin-bottom: 4px;
letter-spacing: -0.5px;
}
.result-stat-label {
font-size: 11px;
font-weight: 600;
color: var(--text-hint);
text-transform: uppercase;
letter-spacing: 0.5px;
}
/* Chi tiết theo part */
.result-parts-card {
background: var(--white);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
padding: 28px;
margin-bottom: 24px;
}
.result-parts-title {
font-size: 15px;
font-weight: 700;
color: var(--navy);
margin-bottom: 20px;
}
.result-part-row {
display: flex;
align-items: center;
gap: 12px;
padding: 10px 0;
border-bottom: 1px solid var(--border);
}
.result-part-row:last-child { border-bottom: 1px solid var(--border); }
.result-summary-row {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 8px;
margin-top: 16px;
}
.result-summary-item {
display: flex;
flex-direction: column;
align-items: center;
padding: 10px 6px;
border-radius: 10px;
gap: 2px;
}
.result-summary-item.correct { background: var(--green-bg); }
.result-summary-item.wrong { background: var(--red-bg); }
.result-summary-item.blank { background: var(--bg-alt); }
.result-summary-item.flagged { background: #fef3c7; }
[data-theme="dark"] .result-summary-item.flagged { background: #3a2f12; }
.result-summary-val {
font-size: 22px;
font-weight: 800;
line-height: 1;
}
.result-summary-item.correct .result-summary-val { color: #16a34a; }
.result-summary-item.wrong .result-summary-val { color: #991b1b; }
.result-summary-item.blank .result-summary-val { color: #475569; }
.result-summary-item.flagged .result-summary-val { color: #b45309; }
[data-theme="dark"] .result-summary-item.correct .result-summary-val { color: #4ade80; }
[data-theme="dark"] .result-summary-item.wrong .result-summary-val { color: #f87171; }
[data-theme="dark"] .result-summary-item.blank .result-summary-val { color: #94a3b8; }
[data-theme="dark"] .result-summary-item.flagged .result-summary-val { color: #fbbf24; }
.result-summary-lbl {
font-size: 11px;
font-weight: 600;
color: var(--text-sub);
}
.result-part-name {
font-size: 13px;
font-weight: 700;
color: var(--navy);
width: 60px;
flex-shrink: 0;
}
.result-part-bar-wrap {
flex: 1;
height: 8px;
background: #e2e8f0;
border-radius: 4px;
overflow: hidden;
}
.result-part-bar-fill {
height: 100%;
background: var(--navy);
border-radius: 4px;
transition: width 0.8s ease;
}
.result-part-bar-fill.good { background: var(--green); }
.result-part-bar-fill.mid { background: var(--yellow-dark); }
.result-part-bar-fill.low { background: var(--red); }
.result-part-stat {
font-size: 13px;
font-weight: 600;
color: var(--text-sub);
width: 80px;
text-align: right;
flex-shrink: 0;
}
/* Nút kết quả — nằm trong result-score-card, luôn xếp dọc */
.result-actions {
display: flex;
flex-direction: column;
gap: 10px;
margin-top: 20px;
}
.result-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 7px;
width: 100%;
border: none;
border-radius: var(--radius-md);
padding: 13px 28px;
font-family: inherit;
font-size: 14px;
font-weight: 700;
cursor: pointer;
transition: var(--transition);
}
@media (max-width: 480px) {
.result-container { padding: 24px 16px 0; }
.result-score-card { padding: 24px 20px 20px; }
.result-ring-wrap { width: 172px; height: 172px; margin: 16px auto 22px; }
.result-ring-score { font-size: 46px; }
.result-score-grid { gap: 8px; margin-top: 16px; }
.result-stat { padding: 12px 8px; }
.result-stat-value { font-size: 20px; }
.result-parts-card { padding: 20px 16px; }
.result-btn { padding: 14px 20px; font-size: 15px; }
}
.result-btn.primary {
background: var(--yellow);
color: var(--navy);
box-shadow: 0 4px 12px rgba(255,192,0,0.3);
}
.result-btn.primary:hover { background: var(--yellow-dark); }
.result-btn.secondary {
background: var(--bg-alt);
color: var(--text-sub);
border: 1px solid var(--border-mid);
}
.result-btn.secondary:hover { background: #e2e8f0; }
/* ── Progress ring ── */
.result-ring-wrap {
position: relative;
width: 200px;
height: 200px;
margin: 20px auto 24px;
}
.result-ring-svg { width: 100%; height: 100%; }
.result-ring-progress { transition: stroke-dashoffset 1.2s cubic-bezier(0.4, 0, 0.2, 1); }
.result-ring-inner {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
pointer-events: none;
}
.result-ring-score {
font-size: 54px;
font-weight: 800;
line-height: 1;
letter-spacing: -2px;
}
/* ═══════════════════════════════════════════════════════════════
AUTH / LOCK PAGE
═══════════════════════════════════════════════════════════════ */
.auth-page {
min-height: 100vh;
background:
radial-gradient(ellipse at 20% 20%, rgba(255,192,0,0.10) 0%, transparent 60%),
radial-gradient(ellipse at 80% 80%, rgba(29,111,242,0.08) 0%, transparent 60%),
var(--bg);
display: flex;
align-items: center;
justify-content: center;
padding: 20px;
}
[data-theme="dark"] .auth-card { background: rgba(30,41,59,0.97); }
.auth-card {
background: rgba(255,255,255,0.97);
border-radius: var(--radius-xl);
padding: 48px 40px;
max-width: 400px;
width: 100%;
text-align: center;
box-shadow: var(--shadow-lg);
}
.auth-lock-icon {
display: flex;
justify-content: center;
margin-bottom: 16px;
color: var(--navy-light);
}
.auth-title {
font-size: 22px;
font-weight: 700;
color: var(--navy);
margin-bottom: 8px;
}
.auth-sub {
font-size: 14px;
color: var(--text-sub);
margin-bottom: 28px;
line-height: 1.6;
}
.btn-google-login {
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
width: 100%;
background: var(--white);
border: 1.5px solid var(--border-mid);
border-radius: var(--radius-md);
padding: 13px 20px;
font-family: inherit;
font-size: 15px;
font-weight: 600;
color: var(--text-main);
cursor: pointer;
transition: var(--transition);
margin-bottom: 12px;
box-shadow: var(--shadow-sm);
}
.btn-google-login:hover { background: var(--bg-alt); border-color: var(--navy); }
.btn-google-login img { width: 20px; height: 20px; }
.btn-upgrade {
width: 100%;
background: var(--yellow);
color: var(--navy);
border: none;
border-radius: var(--radius-md);
padding: 13px 20px;
font-family: inherit;
font-size: 15px;
font-weight: 700;
cursor: pointer;
transition: var(--transition);
box-shadow: 0 4px 12px rgba(255,192,0,0.3);
}
.btn-upgrade:hover { background: var(--yellow-dark); }
.auth-divider {
font-size: 12px;
color: var(--text-hint);
margin: 12px 0;
}
/* ═══════════════════════════════════════════════════════════════
UTILITIES
═══════════════════════════════════════════════════════════════ */
.hidden { display: none !important; }
/* Spinner loading */
.spinner-wrap {
display: flex;
align-items: center;
justify-content: center;
min-height: 200px;
}
.spinner {
width: 36px; height: 36px;
border: 3px solid rgba(29,111,242,0.1);
border-top-color: var(--navy);
border-radius: 50%;
animation: spin 0.75s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
/* ═══════════════════════════════════════════════════════════════
RESPONSIVE — MOBILE
═══════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
/* Trang chọn part */
.select-page { padding: 24px 16px 60px; }
.select-title { font-size: 20px; }
.select-body { padding: 20px 16px 16px; }
.part-grid { grid-template-columns: repeat(4, 1fr); gap: 6px; }
/* Topbar — trên màn hẹp, nút Thoát+logo+cài đặt+game+song ngữ+timer+điều hướng+nộp bài
không đủ chỗ đứng thành 1 hàng. Thay vì để tràn ra ngoài và bị khuất (không bấm được),
cho cả thanh cuộn ngang được — kéo qua lại là thấy hết nút. */
.topbar {
--btn-h: 32px; padding: 0 16px; gap: 8px;
overflow-x: auto; overflow-y: hidden;
-webkit-overflow-scrolling: touch;
scrollbar-width: none; -ms-overflow-style: none;
}
.topbar::-webkit-scrollbar { display: none; }
/* Không cho item nào bị bóp nhỏ/co lại khi thiếu chỗ — ép chúng giữ nguyên kích
thước gốc để overflow kích hoạt cuộn ngang thay vì làm vỡ layout icon. */
.topbar > * { flex-shrink: 0; }
.topbar-logo-text { font-size: 13px; }
.topbar-title { display: none; }
.topbar-review-label { display: none; }
.topbar-right { margin-left: auto; }
.topbar-btn { padding: 0 10px; font-size: 12px; }
.timer { font-size: 13px; min-width: 58px; padding: 4px 8px; }
/* Nút Từ vựng trên mobile: chỉ hiện icon, ẩn chữ để tiết kiệm chỗ — giữ nguyên thứ tự
DOM gốc (đứng trước cụm chuyển câu/Nộp bài) giống hệt desktop, không đảo vị trí. */
.vocab-fab-label { display: none; }
.vocab-fab { width: var(--btn-h); padding: 0; }
/* Nút tròn 32px này không đủ chỗ chứa thêm nút X (.tg-pill-x) khi panel đang mở —
X không có tác dụng bấm (chưa gắn handler riêng) nên ẩn hẳn trên mobile thay vì
để nó tràn ra ngoài viền tròn, đè lên nút Nộp bài bên cạnh. Nền xanh của .active
đã đủ báo hiệu panel đang mở. */
.vocab-fab .tg-pill-x { display: none; }
/* Nút Cài đặt (icon bánh răng, mở menu chế độ/tuỳ chỉnh) trên mobile: đẩy ra sau
nút Nộp bài, đúng vị trí như nút Cài đặt bên desktop (nằm ngoài cùng bên phải).
Áp cho cả 2 dạng: #settingsFab (Part không có game) và .topbar-game-slot
(Part 1-4, lúc đó #settingsFab bị ẩn, thay bằng nút sliders/gear trong slot này). */
.settings-fab, .topbar-game-slot { order: 10; }
/* Vùng nội dung bên dưới audio — scroll độc lập, không kéo audio lên theo */
.left-scroll-zone {
overflow-y: auto;
align-self: stretch;
align-items: flex-start;
gap: 14px;
padding-bottom: 16px;
}
/* Game pill trên mobile: chỉ hiện icon (+ nút X khi active), ẩn chữ để tiết kiệm chỗ */
.tg-pill-label { display: none; }
.tg-pill { padding: 0 9px; }
/* Song ngữ toggle trên mobile: chỉ hiện icon globe */
.bi-toggle-btn span { display: none; }
.bi-toggle-btn { padding: 0 8px; }
/* Ẩn chữ logo, giữ hình — thu gọn nút Nộp bài */
.topbar-logo-text { display: none; }
.topbar-logo { gap: 0; }
.submit-btn {
font-size: 0; width: var(--btn-h); height: var(--btn-h); padding: 0; border-radius: 8px;
display: inline-flex; align-items: center; justify-content: center;
}
.submit-btn::after { content: '✓'; font-size: 16px; font-weight: 700; }
/* Settings FAB chỉ ẩn khi có game slot (Part 1-4) vì menu game đã bao gồm cỡ chữ */
body:has(.topbar-game-slot) #settingsFab { display: none; }
/* Answer sheet */
.answer-sheet { width: 100%; }
.sheet-cell { width: 32px; height: 32px; font-size: 10px; }
/* Layout chia đôi dọc trên mobile — kéo thay đổi tỷ lệ trên/dưới */
/* body.exam-page có min-height:100vh (quy tắc chung ở trên) nhưng nội dung thật
(topbar fixed + exam-body lấp phần còn lại) chỉ vừa 1 màn hình — phần dư ra
tạo khoảng trống rỗng dưới đáy + kéo theo thanh cuộn dọc CẢ TRANG dù
screen-left/screen-right đã tự cuộn riêng rồi.
Từng khoá cứng bằng 100dvh, nhưng dvh không được hỗ trợ trong 1 số in-app
browser (Zalo/FB/TikTok — xem CLAUDE.md) nên fallback về 100vh, và 100vh
trên các webview này không khớp vùng nhìn thấy thật → đẩy topbar/audio-wrap
dính (sticky/fixed) lên trên, bị khuất phía trên, ĐỒNG THỜI vẫn dư khoảng
trống dưới đáy. Dùng position:fixed;inset:0 cho body thay vì height theo
đơn vị vh/dvh — kích thước body luôn khớp đúng vùng nhìn thấy thật (cùng hệ
quy chiếu với .topbar cũng position:fixed), không phụ thuộc dvh có được hỗ
trợ hay không. */
body.exam-page { position: fixed; inset: 0; width: 100%; min-height: 0; overflow: hidden; }
/* exam-body lấp phần còn lại dưới topbar bằng flex (đã có margin-top:56px +
flex:1 ở quy tắc chung) — để flexbox tự tính chiều cao đúng theo box thật
của body (giờ đã pin theo viewport) thay vì tự tính lại bằng calc(vh/dvh). */
.exam-body { flex: 1; min-height: 0; overflow: hidden; }
.exam-screen.active { flex-direction: column; height: 100%; min-height: unset; overflow: hidden; }
.screen-left {
width: 100% !important;
flex-shrink: 0;
min-height: 80px;
overflow-y: auto;
overflow-x: hidden;
position: static;
padding: 16px;
border-right: none; /* đường viền dọc của desktop không có nghĩa khi chia ngang */
}
.screen-right {
width: 100%; min-width: 0;
flex: 1; min-height: 80px;
overflow-y: auto;
padding: 16px;
}
/* Resizer nằm ngang — thay cursor + hit area. Có line 1px để thấy rõ ranh giới
chia màn hình (trước đây height:0 nên chỉ có grip nổi, không rõ đường chia) */
.screen-resizer {
display: block;
width: 100%; height: 1px;
background: var(--border);
cursor: row-resize;
touch-action: none; /* tắt scroll gesture để pointer events hoạt động */
}
.screen-resizer::after { top: -14px; bottom: -14px; left: 0; right: 0; cursor: row-resize; touch-action: none; }
.screen-resizer .resize-grip { transform: translate(-50%, -50%) rotate(90deg); }
/* Kết quả */
.result-header { padding: 16px 20px; }
.result-container { padding: 24px 16px 0; }
.result-score-card { padding: 24px 20px; }
.result-score-main { font-size: 48px; }
.result-parts-card { padding: 20px; }
/* Auth */
.auth-card { padding: 32px 24px; }
/* Part 5 mobile: không có passage nên bỏ hẳn panel trái + resizer,
dồn toàn bộ chiều cao cho câu hỏi/đáp án/giải thích (1 cột duy nhất) */
.exam-screen.p5-mobile-solo .screen-left,
.exam-screen.p5-mobile-solo .screen-resizer { display: none; }
/* Khi nội dung câu hỏi (screen-right) ngắn hơn không gian được chia — co vừa đủ nội dung,
phần dư được JS gán trực tiếp cho screen-left (đọc bài) qua left.style.height */
.exam-screen.rz-fit .screen-right { flex: 0 0 auto; }
}
@media (max-width: 400px) {
.part-grid { grid-template-columns: repeat(2, 1fr); }
.result-score-grid { grid-template-columns: 1fr; }
}
/* ── LINE SPACING ── */
.q-text, .opt-text { line-height: var(--eh, 1.7); }
/* ── SETTINGS FAB ── */
.settings-fab {
-webkit-appearance: none;
appearance: none;
background: var(--bg-alt);
border: 1px solid #e2e8f0;
color: #64748b;
display: flex;
align-items: center;
gap: 6px;
height: var(--btn-h);
padding: 0 8px;
border-radius: 999px;
font-family: inherit;
font-size: 12.5px;
font-weight: 600;
white-space: nowrap;
cursor: pointer;
transition: var(--transition);
flex-shrink: 0;
}
.settings-fab-label { display: none; }
/* Desktop: đẩy nút Cài đặt ra rìa phải ngoài cùng của topbar (sau topbar-right),
thay vì đứng cạnh logo — không đụng vào mobile vì topbar-game-slot vẫn chèn
ngay sau #settingsFab trong DOM (fab.after(slot) ở exam-engine.js) */
@media (min-width: 769px) {
.trial-badge { order: 9; }
.settings-fab { order: 10; }
}
.settings-fab:hover { background: #e2e8f0; color: #475569; }
[data-theme="dark"] .settings-fab { background: #0f172a; border-color: #334155; color: #94a3b8; }
[data-theme="dark"] .settings-fab:hover { background: #1e293b; color: #cbd5e1; }
.trial-badge {
position: relative;
display: flex;
align-items: center;
gap: 8px;
height: var(--btn-h);
padding: 0 12px;
border-radius: 999px;
background: #fffbeb;
border: 1px solid #fde68a;
color: #92400e;
font-size: 12.5px;
font-weight: 600;
white-space: nowrap;
flex-shrink: 0;
cursor: pointer;
text-decoration: none;
transition: background 0.2s, border-color 0.2s;
}
.trial-badge:hover { background: #fef3c7; border-color: #f5cf6b; }
[data-theme="dark"] .trial-badge { background: #292213; border-color: #57460f; color: #fbbf24; }
[data-theme="dark"] .trial-badge:hover { background: #3a2f15; }
@media (max-width: 768px) { .trial-badge { display: none; } }
.trial-badge-icon { flex-shrink: 0; opacity: 0.9; }
/* Hết cả 2 nhóm lượt trong ngày — badge đổi hẳn sang CTA nâng cấp thay vì 2 thanh gauge rỗng
vô nghĩa, viền/nền ngả cam để nổi bật hơn trạng thái còn lượt (xem updateTrialBadge). */
.trial-badge-depleted { background: #fff7ed; border-color: #fdba74; color: #9a3412; }
.trial-badge-depleted:hover { background: #ffedd5; border-color: #fb923c; }
[data-theme="dark"] .trial-badge-depleted { background: #2e1a0d; border-color: #7c3f12; color: #fb923c; }
[data-theme="dark"] .trial-badge-depleted:hover { background: #3d2311; }
.trial-badge-cta { display: flex; align-items: center; gap: 4px; font-weight: 700; }
/* Thang ngang tụt dần theo lượt trải nghiệm còn lại — Nghe/Đọc tách riêng vì mỗi nhóm
một quota (xem tryConsumeTrial). Màu chuyển xanh→vàng→cam→đỏ theo % còn lại để nhìn
là biết sắp hết, không cần đọc số. Cỡ chữ/khoảng cách nén lại để 2 dòng vừa khít
trong var(--btn-h), thẳng mép trên/dưới với các nút cùng hàng trong topbar. */
.trial-badge-gauges { display: flex; flex-direction: column; justify-content: center; gap: 3px; }
.trial-badge-gauge-row { display: flex; align-items: center; gap: 5px; line-height: 1; }
.trial-badge-gauge-lbl { font-size: 10px; font-weight: 700; width: 24px; flex-shrink: 0; opacity: 0.85; line-height: 1; }
.trial-badge-gauge-track {
position: relative;
width: 40px;
height: 4px;
border-radius: 2px;
background: rgba(146,64,14,0.15);
overflow: hidden;
flex-shrink: 0;
}
[data-theme="dark"] .trial-badge-gauge-track { background: rgba(251,191,36,0.18); }
.trial-badge-gauge-fill {
position: absolute; left: 0; top: 0; bottom: 0;
border-radius: 2px;
background: #22c55e;
transition: width 0.3s ease, background-color 0.3s ease;
}
.trial-badge-gauge-fill.lvl-ok { background: #22c55e; }
.trial-badge-gauge-fill.lvl-mid { background: #f59e0b; }
.trial-badge-gauge-fill.lvl-low { background: #f97316; }
.trial-badge-gauge-fill.lvl-empty { background: #ef4444; }
.trial-badge-gauge-frac { font-size: 10px; font-weight: 700; width: 28px; text-align: right; flex-shrink: 0; line-height: 1; font-variant-numeric: tabular-nums; }
/* Tooltip giải thích lượt trải nghiệm khi hover */
.trial-badge::after {
content: attr(data-tooltip);
position: absolute;
top: calc(100% + 10px);
right: 0;
width: 200px;
white-space: normal;
background: #1e293b;
color: #f1f5f9;
font-size: 12px;
font-weight: 500;
line-height: 1.5;
padding: 10px 12px;
border-radius: 10px;
box-shadow: 0 8px 24px rgba(0,0,0,0.18);
opacity: 0;
transform: translateY(-4px);
pointer-events: none;
transition: opacity 0.15s ease, transform 0.15s ease;
z-index: 50;
}
.trial-badge::before {
content: '';
position: absolute;
top: calc(100% + 4px);
right: 14px;
width: 8px;
height: 8px;
background: #1e293b;
transform: rotate(45deg);
opacity: 0;
transition: opacity 0.15s ease;
z-index: 50;
}
.trial-badge:hover::after,
.trial-badge:hover::before {
opacity: 1;
transform: none;
}
@media (max-width: 480px) {
.trial-badge::after { width: 200px; right: -20px; }
}
/* Tooltip riêng cho trạng thái hết lượt trong ngày — tắt tooltip chữ thường ở trên (::after/
attr() không render được in đậm/icon), thay bằng thẻ thật (.tb-depleted-tip) để trông đẹp
như thông báo hết lượt Nghe/Đọc (.login-prompt-toast): thẻ trắng nổi, icon ngôi sao,
dòng CTA in đậm màu cam. */
.trial-badge-depleted::after,
.trial-badge-depleted::before { display: none; }
.tb-depleted-tip {
position: absolute;
top: calc(100% + 10px);
right: 0;
width: 240px;
display: flex;
align-items: flex-start;
gap: 10px;
background: #fff;
color: #334155;
font-size: 12.5px;
font-weight: 500;
line-height: 1.45;
padding: 12px 14px;
border-radius: 14px;
box-shadow: 0 10px 28px rgba(0,0,0,.16), 0 2px 8px rgba(0,0,0,.08);
opacity: 0;
transform: translateY(-4px);
pointer-events: none;
transition: opacity 0.15s ease, transform 0.15s ease;
z-index: 50;
white-space: normal;
}
.tb-depleted-tip svg { flex-shrink: 0; margin-top: 1px; }
.tb-depleted-tip-lines { display: flex; flex-direction: column; gap: 3px; }
.tb-depleted-tip-cta { font-weight: 700; color: #c2410c; }
.tb-depleted-tip::before {
content: '';
position: absolute;
top: -4px;
right: 14px;
width: 8px;
height: 8px;
background: #fff;
transform: rotate(45deg);
}
.trial-badge-depleted:hover .tb-depleted-tip {
opacity: 1;
transform: none;
}
[data-theme="dark"] .tb-depleted-tip {
background: #1e293b;
color: #e2e8f0;
box-shadow: 0 10px 28px rgba(0,0,0,.35), 0 2px 8px rgba(0,0,0,.2);
}
[data-theme="dark"] .tb-depleted-tip::before { background: #1e293b; }
[data-theme="dark"] .tb-depleted-tip-cta { color: #fb923c; }
@media (max-width: 480px) {
.tb-depleted-tip { width: 220px; right: -20px; }
}
.settings-fab-icon { display: inline-flex; }
/* ── SETTINGS PANEL ── */
.settings-panel {
position: fixed;
top: 64px;
left: 20px;
z-index: 999;
/* top/left được ghi đè động bằng JS bám theo vị trí nút cài đặt (positionPanel) */
background: var(--surface);
border: 1.5px solid var(--border-mid);
border-radius: var(--radius-md);
padding: 14px;
width: 228px;
box-shadow: var(--shadow-lg);
display: none;
flex-direction: column;
gap: 10px;
}
.settings-panel.open { display: flex; }
.sp-title {
font-size: 13px;
font-weight: 700;
color: var(--text-main);
display: flex;
align-items: center;
gap: 6px;
justify-content: space-between;
padding-bottom: 8px;
border-bottom: 1px solid var(--border);
}
.sp-title-left { display: flex; align-items: center; gap: 6px; }
.sp-close-btn {
background: none;
border: none;
cursor: pointer;
color: var(--text-sub);
font-size: 15px;
line-height: 1;
padding: 3px 5px;
border-radius: var(--radius-sm);
transition: var(--transition);
display: flex;
align-items: center;
flex-shrink: 0;
}
.sp-close-btn:hover { background: var(--border); color: var(--text-main); }
.sp-row {
display: flex;
align-items: center;
justify-content: space-between;
}
.sp-label {
font-size: 13px;
color: var(--text-sub);
}
.sp-label-icon { display: inline-flex; align-items: center; gap: 6px; }
.sp-font-ctrl {
display: flex;
align-items: center;
gap: 8px;
}
.sp-font-val {
font-size: 13px;
font-weight: 600;
color: var(--text-main);
min-width: 34px;
text-align: center;
}
.sp-btn {
-webkit-appearance: none;
appearance: none;
background: var(--bg);
border: 1.5px solid var(--border-mid);
border-radius: var(--radius-sm);
padding: 5px 10px;
font-size: 13px;
font-weight: 600;
font-family: inherit;
color: var(--text-main);
cursor: pointer;
transition: var(--transition);
line-height: 1;
}
.sp-btn:hover { background: var(--border); }
.sp-btn.sp-full { width: 100%; text-align: left; }
/* ── RATIO CONTROL ── */
.sp-ratio-ctrl { display: flex; gap: 3px; }
.sp-ratio-btn {
-webkit-appearance: none;
appearance: none;
background: var(--bg);
border: 1.5px solid var(--border-mid);
border-radius: var(--radius-sm);
padding: 4px 7px;
font-size: 14px;
font-weight: 600;
font-family: inherit;
color: var(--text-sub);
cursor: pointer;
transition: var(--transition);
line-height: 1;
min-width: 30px;
text-align: center;
}
.sp-ratio-btn:hover { background: var(--border); color: var(--text-main); }
.sp-ratio-btn.active { background: #16a34a; border-color: #16a34a; color: #fff; }
.sp-toggle-btn {
-webkit-appearance: none;
appearance: none;
background: none;
border: none;
padding: 0;
cursor: pointer;
flex-shrink: 0;
}
.sp-toggle-track {
display: block;
width: 38px;
height: 22px;
border-radius: 11px;
background: var(--border-mid);
position: relative;
transition: background 0.25s;
}
.sp-toggle-thumb {
position: absolute;
top: 3px;
left: 3px;
width: 16px;
height: 16px;
border-radius: 50%;
background: #fff;
box-shadow: 0 1px 4px rgba(0,0,0,0.25);
transition: transform 0.25s;
}
.sp-toggle-btn.on .sp-toggle-track { background: var(--green); }
.sp-toggle-btn.on .sp-toggle-thumb { transform: translateX(16px); }
.sp-row--locked { opacity: 0.55; }
.sp-row--locked .sp-toggle-btn { cursor: not-allowed; }
.tg-menu-row--locked .tg-menu-lbl { color: #92400e; }
[data-theme="dark"] .tg-menu-row--locked .tg-menu-lbl { color: #fbbf24; }
.sp-divider {
height: 1px;
background: var(--border);
margin: 2px 0;
}
.sp-section-label {
font-size: 10px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--text-hint);
}
.sp-shortcuts {
display: flex;
flex-direction: column;
gap: 5px;
}
.sp-sc-row {
display: flex;
align-items: center;
gap: 8px;
font-size: 12px;
color: var(--text-sub);
}
.sp-sc-row kbd {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 24px;
height: 22px;
padding: 0 5px;
background: var(--bg);
border: 1.5px solid var(--border-mid);
border-bottom-width: 2.5px;
border-radius: 4px;
font-size: 11px;
font-family: inherit;
font-weight: 600;
color: var(--text-main);
flex-shrink: 0;
user-select: none;
}
.sp-sc-row kbd.sp-key-wide { min-width: 46px; }
/* ══════════════════════════════════════════════════════
FULL SENTENCE P5 (hiện kết quả)
══════════════════════════════════════════════════════ */
.full-sent-en {
font-size: calc(var(--ef) - 1px);
font-weight: 500;
color: #1e3a5f;
background: #eff6ff;
border: 1px solid #bfdbfe;
border-radius: var(--radius-md);
padding: 8px 12px;
margin: 6px 0 4px;
line-height: 1.6;
}
.full-sent-vi {
font-size: var(--ef);
font-weight: 400;
color: #94a3b8;
border-left: 3px solid #cbd5e1;
padding-left: 8px;
margin: 2px 0 8px;
line-height: 1.6;
}
[data-theme="dark"] .full-sent-vi { color: #94a3b8; border-left-color: #334155; }
/* ══════════════════════════════════════════════════════
Q-TRANS: dịch câu hỏi — ngay dưới q-text (amber)
══════════════════════════════════════════════════════ */
.q-trans {
font-size: var(--ef);
font-weight: 400;
color: #94a3b8;
border-left: 3px solid #cbd5e1;
padding-left: 8px;
margin: 2px 0 8px;
line-height: 1.55;
}
[data-theme="dark"] .q-trans { color: #94a3b8; border-left-color: #334155; }
/* Ghi chú câu hỏi Part 7 — ngay dưới q-trans */
.q-note {
font-size: var(--ef);
font-weight: 400;
color: #94a3b8;
margin: 2px 0 8px;
line-height: 1.55;
}
/* ══════════════════════════════════════════════════════
OPT-TRANS / OPT-NOTE: bên dưới mỗi đáp án
══════════════════════════════════════════════════════ */
.option-item { flex-wrap: wrap; row-gap: 0; }
.opt-trans {
flex-basis: 100%;
margin-left: 38px;
border-left: 3px solid #cbd5e1;
padding: 3px 0 2px 8px;
font-size: var(--ef);
color: #94a3b8;
line-height: 1.5;
}
[data-theme="dark"] .opt-trans { color: #94a3b8; border-left-color: #334155; }
.opt-note {
flex-basis: 100%;
margin-left: 38px;
border-left: 3px solid #cbd5e1;
padding: 3px 0 2px 8px;
font-size: var(--ef);
font-weight: 400;
color: #94a3b8;
line-height: 1.5;
}
[data-theme="dark"] .opt-note { border-left-color: #334155; }
.option-item.correct .opt-trans { color: #4CAF50; }
.option-item.wrong .opt-trans { color: #ef5350; }
.option-item.missed-correct .opt-trans { color: #4CAF50; }
/* Part 1/2 — dịch đáp án, có gạch dọc (chỉ hiện khi xem đáp án) */
.opt-trans-vi {
flex-basis: 100%;
margin-left: 38px;
border-left: 3px solid #cbd5e1;
padding: 3px 0 2px 8px;
font-size: var(--ef);
color: #94a3b8;
line-height: 1.5;
}
[data-theme="dark"] .opt-trans-vi { color: #94a3b8; border-left-color: #334155; }
.option-item.correct .opt-trans-vi { color: #4CAF50; border-left-color: #86efac; }
.option-item.wrong .opt-trans-vi { color: #ef5350; border-left-color: #fca5a5; }
.option-item.missed-correct .opt-trans-vi { color: #4CAF50; border-left-color: #86efac; }
/* Part 2 — dịch câu hỏi, có gạch dọc */
.p12-q-vi {
font-size: var(--ef);
font-weight: 400;
color: #94a3b8;
line-height: 1.55;
border-left: 3px solid #cbd5e1;
padding-left: 8px;
margin-top: 5px;
}
[data-theme="dark"] .p12-q-vi { color: #94a3b8; border-left-color: #334155; }
/* ══════════════════════════════════════════════════════
TAB SONG NGỮ — COLT ĐÔI (biGrid)
══════════════════════════════════════════════════════ */
.biGrid-pane {
display: grid;
grid-template-columns: 1fr 1fr;
align-content: start;
}
.screen-left .biGrid-pane {
flex-shrink: 0;
border-radius: var(--radius-md);
overflow: hidden;
}
/* Part 3,4 trả phí — xen kẽ từng dòng (tái dùng .p6-sent-pair/en/vi của Part 6,7), bọc khung nền
cho đẹp tương đương khối "Dịch bài" free (.free-trans-sec). */
.screen-left .script-interleaved {
flex-shrink: 0;
padding: 12px 16px;
background: #f0f6ff;
border: 1px solid #d5e6ff;
border-radius: var(--radius-md);
}
[data-theme="dark"] .screen-left .script-interleaved { background: #16233a; border-color: #26364f; }
/* Part 6,7 — khối Song ngữ (bài đọc xen kẽ), chỉ viền, không tô nền (bài dài, tô nền dễ nặng mắt) */
.screen-left .bi-pane-grid {
padding: 12px 16px;
border: 1px solid #d5e6ff;
border-radius: var(--radius-md);
}
[data-theme="dark"] .screen-left .bi-pane-grid { border-color: #26364f; }
.biGrid-cell {
padding: 6px 14px;
font-size: calc(var(--ef) - 1px);
line-height: 1.72;
border-bottom: 1px solid rgba(0,0,0,0.06);
overflow-wrap: break-word;
word-break: break-word;
}
.biGrid-en { color: #1e3a5f; background: #f0f6ff; border-right: 2px solid var(--border-mid); }
.biGrid-vi { color: #78350f; font-style: italic; background: #fffdf5; }
.biGrid-stripe.biGrid-en { background: #eff6ff; }
.biGrid-stripe.biGrid-vi { background: #fffbeb; }
.bi-qnum {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 1.45em;
height: 1.45em;
padding: 0 0.35em;
background: #64748b;
color: #fff;
border: none;
border-radius: 20px;
font-weight: 700;
font-style: normal;
font-size: calc(var(--ef) - 3px);
line-height: 1;
letter-spacing: 0;
vertical-align: middle;
margin-right: 4px;
}
/* Màu badge standalone theo câu (dùng shade đậm khớp màu highlight) */
.bi-qnum-c0 { background: #713F12; }
.bi-qnum-c1 { background: #0C4A6E; }
.bi-qnum-c2 { background: #831843; }
.bi-qnum-c3 { background: #14532D; }
.bi-qnum-c4 { background: #4C1D95; }
.bi-kw {
background: #d1fae5;
color: #065f46;
border-radius: 2px;
padding: 0 2px;
font-weight: 600;
font-style: normal;
}
.biGrid-quoted {
background: #f0ebff !important;
border-right-color: #8b5cf6 !important;
}
.bi-quoted {
background: #c4b5fd;
color: #3b0764;
border-radius: 2px;
padding: 0 2px;
font-weight: 600;
font-style: normal;
}
/* ── Evidence card (Dẫn chứng Part 3+4) ── */
.evidence-card {
border: 1.5px solid #e2e8f0;
border-radius: 8px;
overflow: hidden;
margin-top: 10px;
}
[data-theme="dark"] .evidence-card { border-color: #334155; }
.ev-section {
padding: 9px 14px 11px;
border-left: 3px solid transparent;
}
.ev-section + .ev-section {
border-top: 1.5px solid #e2e8f0;
}
[data-theme="dark"] .ev-section + .ev-section { border-top-color: #334155; }
.ev-section-dc {
background: #f0f7ff;
border-left-color: #3b82f6;
}
.ev-section-gt {
background: #f0f7ff;
border-left-color: #f59e0b;
}
[data-theme="dark"] .ev-section-dc,
[data-theme="dark"] .ev-section-gt { background: #16233a; }
.ev-section-label {
font-size: calc(var(--ef) - 3px);
font-weight: 800;
text-transform: uppercase;
letter-spacing: .09em;
margin-bottom: 7px;
}
.ev-section-dc .ev-section-label { color: #2563eb; }
.ev-section-gt .ev-section-label { color: #b45309; }
.ev-row {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 4px;
margin-top: 6px;
}
.ev-row:first-of-type { margin-top: 0; }
.evidence-phrase {
background: #d1fae5;
color: inherit;
border-radius: 4px;
padding: 2px 8px;
font-weight: 400;
font-size: var(--ef);
line-height: 1.5;
word-break: break-word;
min-width: 0;
}
.evidence-trans {
color: #94a3b8;
font-size: var(--ef);
font-weight: 400;
font-style: normal;
line-height: 1.5;
min-width: 0;
border-left: 3px solid #cbd5e1;
padding-left: 8px;
margin-top: 4px;
}
.evidence-trans::before {
content: '';
}
/* ── P7 Evidence card phrase — block, flush left ── */
.ev-section-dc .evidence-phrase {
display: block;
padding-left: 0;
margin-top: 4px;
}
/* ── P7 Evidence card translation & gap — cùng kiểu gạch dọc/thụt vào như .evidence-trans (Part 3/4) ── */
.ev-dc-trans {
color: #94a3b8;
font-size: var(--ef);
font-weight: 400;
font-style: normal;
line-height: 1.5;
border-left: 3px solid #cbd5e1;
padding-left: 8px;
margin-top: 4px;
}
[data-theme="dark"] .ev-dc-trans { color: #9ca3af; border-left-color: #334155; }
.ev-phrase-gap { height: 8px; }
/* ── P7 Evidence Highlight — 5 màu, chỉ hiện khi reveal đáp án ── */
mark.hl-p7 { background: transparent; border-radius: 3px; padding: 1px 2px; color: inherit; font-style: inherit; }
mark.hl-p7.hl-visible.hl-c0 { background: #FEF08A; }
mark.hl-p7.hl-visible.hl-c1 { background: #A5F3FC; }
mark.hl-p7.hl-visible.hl-c2 { background: #FBCFE8; }
mark.hl-p7.hl-visible.hl-c3 { background: #BBF7D0; }
mark.hl-p7.hl-visible.hl-c4 { background: #DDD6FE; }
/* Badge ẩn khi chưa reveal */
mark.hl-p7:not(.hl-visible) .bi-qnum { display: none; }
/* Pulse animation khi scroll-to-mark */
@keyframes hl-ping {
0% { box-shadow: 0 0 0 0 rgba(0,0,0,0.22); }
55% { box-shadow: 0 0 0 9px rgba(0,0,0,0); }
100% { box-shadow: 0 0 0 0 transparent; }
}
mark.hl-p7.hl-ping { animation: hl-ping 0.75s cubic-bezier(0,.6,.4,1); }
mark.ev-hl.hl-ping { animation: hl-ping 0.75s cubic-bezier(0,.6,.4,1); }
/* Chớp viền cả đoạn/dòng chứa dẫn chứng khi cuộn tới (nút "Dẫn chứng") — giúp nhận ra ngay
đoạn nào đúng khi vị trí cuộn rơi vào ranh giới giữa 2 đoạn. */
/* Viền phát sáng BÊN NGOÀI khung (không dùng inset) — khối thường (không nền/không viền riêng)
lẫn khối thẻ lớn (email/chat/web, có nền trắng + viền xám riêng) đều thấy rõ như nhau, vì viền
phát sáng nằm ngoài, không bị nền/nội dung bên trong che mất. */
@keyframes p7-para-flash {
0% { box-shadow: 0 0 0 3px rgba(29,111,242,.65); }
70% { box-shadow: 0 0 0 3px rgba(29,111,242,0); }
100% { box-shadow: 0 0 0 3px rgba(29,111,242,0); }
}
.p7-para-flash { animation: p7-para-flash 1.1s ease-out; border-radius: 6px; }
/* Evidence phrase P7 — clickable để scroll tới mark trong bài */
.ev-phrase-scroll {
cursor: pointer;
transition: filter 0.15s;
}
.ev-phrase-scroll::after {
content: ' ↗';
font-size: 0.85em;
font-weight: 700;
opacity: 0.6;
transition: opacity 0.15s;
vertical-align: 0.05em;
font-style: normal;
}
.ev-phrase-scroll:hover { filter: brightness(0.88); }
.ev-phrase-scroll:hover::after { opacity: 1; }
/* ── Evidence phrase màu theo câu hỏi (Part 3/4/7) ── */
.evidence-phrase.hl-c0 { background: #FEF08A; }
.evidence-phrase.hl-c1 { background: #A5F3FC; }
.evidence-phrase.hl-c2 { background: #FBCFE8; }
.evidence-phrase.hl-c3 { background: #BBF7D0; }
.evidence-phrase.hl-c4 { background: #DDD6FE; }
/* Chưa bấm "Dẫn chứng" — hiện dạng chữ thường, không tô màu (Part 7) */
.evidence-phrase.ev-phrase-dim { background: transparent !important; }
/* ── Highlight dẫn chứng trong script (Part 3/4) ── */
mark.ev-hl { display: inline; vertical-align: baseline; background: none; border-radius: 4px; padding: 2px 5px; font-style: normal; font-weight: inherit; color: inherit; }
mark.ev-hl.ev-hl-c0 { background: #FEF08A; }
mark.ev-hl.ev-hl-c1 { background: #A5F3FC; }
mark.ev-hl.ev-hl-c2 { background: #FBCFE8; }
mark.ev-hl.ev-hl-c3 { background: #BBF7D0; }
mark.ev-hl.ev-hl-c4 { background: #DDD6FE; }
/* Nền highlight luôn pastel sáng dù dark mode — ép chữ tối để không bị chói/mất chữ.
CHỈ áp khi thực sự có nền màu (hl-visible / có class hl-cN) — nếu chưa "mở khoá"
(nền transparent, chờ bấm xem đáp án) thì phải để chữ inherit màu sáng như bình
thường, nếu không chữ tối sẽ chìm mất trên nền trang tối. */
[data-theme="dark"] mark.ev-hl,
[data-theme="dark"] mark.hl-p7.hl-visible,
[data-theme="dark"] .evidence-phrase:not(.ev-phrase-dim) { color: #1a2a2e; }
/* ── Giải thích trong evidence card ── */
.evidence-expl {
color: #374151;
font-size: var(--ef);
line-height: 1.6;
}
[data-theme="dark"] .evidence-expl { color: #cbd5e1; }
/* ── Explanation Card (Part 5/6) — unified badge design ── */
.expl-card {
background: var(--bg-alt);
border: 1.5px solid #e2e8f0;
border-top: 3px solid #1a2a2e;
border-radius: 10px;
overflow: hidden;
margin-top: 14px;
}
[data-theme="dark"] .expl-card { border-color: #334155; border-top-color: #475569; }
.expl-section {
padding: 12px 16px;
border-bottom: 1px solid #edf0f4;
}
.expl-section:last-child { border-bottom: none; }
[data-theme="dark"] .expl-section { border-bottom-color: #1e293b; }
.expl-badge {
display: inline-block;
font-size: var(--ef);
font-weight: 700;
padding: 2px 10px;
border-radius: 20px;
margin-bottom: 8px;
}
.expl-badge-main { background: #1a2a2e; color: #ffffff; }
.expl-badge-bilingual { background: #2563eb; color: #ffffff; }
.expl-badge-vocab { background: #d97706; color: #ffffff; }
.expl-sec-body {
font-size: var(--ef);
color: #374151;
line-height: 1.65;
}
[data-theme="dark"] .expl-sec-body { color: #cbd5e1; }
.expl-bilingual-en {
font-size: var(--ef);
font-weight: 500;
color: #1e293b;
line-height: 1.6;
margin-bottom: 4px;
}
[data-theme="dark"] .expl-bilingual-en { color: #e2e8f0; }
.answer-hl {
background: #fef08a;
border-radius: 3px;
padding: 0 2px;
font-weight: 700;
color: #1a1a2e;
}
.expl-bilingual-vi {
font-size: calc(var(--ef) - 1px);
color: #64748b;
font-style: italic;
line-height: 1.6;
}
[data-theme="dark"] .expl-bilingual-vi { color: #94a3b8; }
.expl-vocab-item {
display: flex;
align-items: baseline;
gap: 7px;
font-size: var(--ef);
color: #374151;
line-height: 1.7;
}
[data-theme="dark"] .expl-vocab-item { color: #cbd5e1; }
.expl-vocab-item::before {
content: '•';
color: #d97706;
font-size: 14px;
flex-shrink: 0;
line-height: 1;
}
/* New simple format: "- Header:" lines */
.expl-new-body {
padding: 10px 12px;
display: flex;
flex-direction: column;
gap: 8px;
}
.expl-ns {
border-left: 3px solid transparent;
border-radius: 0 6px 6px 0;
padding: 10px 12px;
}
.expl-ns-main { border-left-color: #334155; background: var(--bg-alt); }
.expl-ns-bilingual { border-left-color: #2563eb; background: #eff6ff; }
.expl-ns-vocab { border-left-color: #d97706; background: #fffbeb; }
[data-theme="dark"] .expl-ns-bilingual { background: #10233d; }
[data-theme="dark"] .expl-ns-vocab { background: #2a2113; }
.expl-new-header {
font-weight: 700;
font-size: var(--ef);
color: #1a2a2e;
letter-spacing: 0.03em;
margin-bottom: 7px;
}
[data-theme="dark"] .expl-new-header { color: #e2e8f0; }
.expl-new-line {
font-size: var(--ef);
color: #374151;
line-height: 1.7;
padding-left: 8px;
margin-bottom: 2px;
}
[data-theme="dark"] .expl-new-line { color: #cbd5e1; }
.expl-ns .expl-vocab-item {
padding-left: 8px;
margin-bottom: 2px;
}
/* Structured explanation (Cách làm / Giải thích / Từ vựng) */
.expl-structured {
padding: 12px 16px;
display: flex;
flex-direction: column;
gap: 10px;
}
.expl-str-sec + .expl-str-sec {
padding-top: 10px;
border-top: 1px solid #edf0f4;
}
.expl-str-lbl {
font-size: var(--ef);
font-weight: 600;
margin-bottom: 5px;
letter-spacing: 0.01em;
}
.expl-str-lbl[data-type="method"] { color: #2563eb; }
.expl-str-lbl[data-type="explain"] { color: #059669; }
.expl-str-lbl[data-type="bilingual"] { color: #2563eb; }
.expl-str-lbl[data-type="vocab"] { color: #d97706; }
.expl-str-body { display: flex; flex-direction: column; gap: 2px; }
.expl-str-line {
font-size: var(--ef);
color: #374151;
line-height: 1.65;
}
[data-theme="dark"] .expl-str-sec + .expl-str-sec { border-top-color: #1e293b; }
[data-theme="dark"] .expl-str-lbl[data-type="method"] { color: #60a5fa; }
[data-theme="dark"] .expl-str-lbl[data-type="explain"] { color: #34d399; }
[data-theme="dark"] .expl-str-lbl[data-type="bilingual"] { color: #60a5fa; }
[data-theme="dark"] .expl-str-lbl[data-type="vocab"] { color: #fbbf24; }
[data-theme="dark"] .expl-str-line { color: #cbd5e1; }
.biGrid-spacer {
height: 22px;
grid-column: 1 / -1;
background: transparent;
border-bottom: none;
position: relative;
}
.biGrid-spacer::before {
content: '';
position: absolute;
left: 0;
right: 0;
top: 50%;
transform: translateY(-50%);
height: 1.5px;
background: var(--border-mid);
border-radius: 1px;
}
/* ══════════════════════════════════════════════════════
TAB SONG NGỮ — THEO ĐOẠN (biAccord)
══════════════════════════════════════════════════════ */
.biAccord-pane { overflow-y: auto; height: 100%; }
.biAccord-controls {
padding: 8px 14px;
border-bottom: 1px solid var(--border);
position: sticky; top: 0;
background: var(--white); z-index: 2;
}
.biAccord-btn-all {
font-size: 12px; padding: 4px 14px; border-radius: 20px;
border: 1.5px solid #fde68a; background: #fffbeb; color: #78350f;
cursor: pointer; font-weight: 600; transition: background 0.15s;
}
.biAccord-btn-all:hover { background: #fef3c7; }
.biAccord-para { border-bottom: 1px solid var(--border); }
.biAccord-en {
padding: 10px 14px; font-size: calc(var(--ef) - 1px); color: #1e3a5f; line-height: 1.75;
cursor: pointer; display: flex; gap: 8px; align-items: flex-start;
background: #f8faff; transition: background 0.15s; user-select: none;
white-space: pre-wrap;
}
.biAccord-en:hover { background: #eff6ff; }
.bi-accord-icon {
flex-shrink: 0; color: #94a3b8; font-size: 12px; margin-top: 3px;
transition: transform 0.2s; display: inline-block;
}
.biAccord-en.open .bi-accord-icon { transform: rotate(180deg); }
.biAccord-vi {
padding: 8px 14px 12px 36px; font-size: calc(var(--ef) - 2px); color: #78350f;
font-style: italic; line-height: 1.75; background: #fffbeb;
border-left: 3px solid #fde68a;
white-space: pre-wrap;
}
/* ══════════════════════════════════════════════════════
SONG NGỮ TAB (P6/P7) — legacy
══════════════════════════════════════════════════════ */
.bilingual-pane {
display: flex;
gap: 0;
height: 100%;
overflow: hidden;
}
.bilingual-col {
flex: 1;
overflow-y: auto;
padding: 14px 16px;
font-size: calc(var(--ef) - 1px);
line-height: 1.75;
}
.bilingual-col + .bilingual-col {
border-left: 1.5px solid var(--border);
}
.bilingual-col.bilingual-en {
color: #1e3a5f;
background: #f8faff;
}
.bilingual-col.bilingual-vi {
color: #78350f;
background: #fffdf5;
font-style: italic;
}
.bilingual-col p { margin: 0 0 6px; }
.bilingual-col p:empty { margin: 0; height: 8px; }
/* ══════════════════════════════════════════════════════
CLOZE GAME — Nghe Khuyết — Sky Blue
══════════════════════════════════════════════════════ */
/* Overlay cột trái khi game active */
.screen-left.cloze-game-active {
background: rgba(239,246,255,0.6);
}
/* Banner vào game — solid blue button */
.cloze-banner {
display: inline-flex; align-items: center; gap: 8px;
margin: 10px 12px 0;
padding: 10px 24px;
background: #3B82F6;
border: none;
border-radius: 12px;
color: #ffffff;
font-size: 13.5px; font-weight: 600;
cursor: pointer; user-select: none;
transition: background 0.2s ease, transform 0.2s ease;
}
.cloze-banner:hover {
background: #2563EB;
transform: translateY(-1px);
}
/* Card game — white card */
.cloze-area {
position: relative;
margin: 10px 12px 0;
padding: 24px 24px 20px;
background: #ffffff;
border: 1.5px solid #BFDBFE;
border-radius: 20px;
box-shadow: 0 4px 24px rgba(59,130,246,0.08);
animation: clozeCardIn 0.3s ease;
}
[data-theme="dark"] .cloze-area { background: #16233a; border-color: #2a3f66; }
@keyframes clozeCardIn {
from { opacity: 0; transform: translateY(12px); }
to { opacity: 1; transform: translateY(0); }
}
/* Game help button */
.game-help-wrap { position: relative; flex-shrink: 0; }
.game-help-drop {
position: absolute; top: calc(100% + 8px); left: 0; z-index: 200;
background: #fff; border: 1px solid #e2e8f0; border-radius: 14px;
box-shadow: 0 8px 28px rgba(0,0,0,.13); padding: 8px 4px; min-width: 270px;
}
.game-help-row {
display: flex; align-items: center; gap: 10px;
padding: 9px 14px;
}
.game-help-divider { border-top: 1px solid #f1f5f9; }
.game-help-keys { display: flex; gap: 4px; flex-shrink: 0; }
.game-kbd-pill {
font-family: inherit; font-size: 11.5px; font-weight: 700; color: #334155;
background: var(--bg-alt); border: 1px solid #e2e8f0; border-radius: 6px;
padding: 2px 7px; box-shadow: 0 2px 0 #dde3ea; line-height: 1.5;
}
.game-help-desc { font-size: 12.5px; color: #64748b; }
[data-theme="dark"] .game-help-drop { background:#1e293b; border-color:#334155; }
[data-theme="dark"] .game-help-divider { border-color:#334155; }
[data-theme="dark"] .game-kbd-pill { background:#0f172a; border-color:#334155; color:#e2e8f0; box-shadow:0 2px 0 #1e293b; }
[data-theme="dark"] .game-help-desc { color:#94a3b8; }
/* Menu button — góc trên phải card */
/* Menu button + dropdown wrapper — positioned absolute in card corner */
.cloze-menu-wrap {
position: relative;
flex-shrink: 0;
}
.cloze-menu-btn {
height: 32px; padding: 0 12px; border-radius: 8px; gap: 5px;
display: inline-flex; align-items: center; justify-content: center;
font-size: 13px; font-weight: 600; white-space: nowrap;
background: var(--bg-alt); border: 1.5px solid #e2e8f0;
color: #475569; cursor: pointer;
transition: background 0.15s, color 0.15s, border-color 0.15s, box-shadow 0.15s;
font-family: inherit; flex-shrink: 0;
}
.cloze-menu-btn:hover {
background: #eef2ff; color: #6366f1;
border-color: #a5b4fc;
box-shadow: 0 1px 5px rgba(99,102,241,0.15);
}
[data-theme="dark"] .cloze-menu-btn { color: #94a3b8; border-color: #334155; }
[data-theme="dark"] .cloze-menu-btn:hover { background: #1e2247; color: #a5b4fc; border-color: #4338ca; }
/* Dropdown — opens below the menu button, right-aligned */
.cloze-dropdown {
position: absolute; top: calc(100% + 6px); right: 0;
transform: none;
background: rgba(255,255,255,0.98);
border: 1px solid #e2e8f0;
border-radius: 12px;
box-shadow: 0 8px 28px rgba(0,0,0,0.13);
backdrop-filter: blur(8px);
min-width: 148px;
z-index: 100;
overflow: hidden;
}
.cloze-dropdown-item {
display: flex; align-items: center; gap: 10px;
padding: 10px 14px;
font-size: 13px; cursor: pointer; color: #374151;
transition: background 0.12s;
}
.cloze-dropdown-item:hover { background: var(--bg-alt); }
.cloze-dropdown-item.active { background: #e0e7ff; color: #6366f1; font-weight: 600; }
.cloze-dot {
width: 8px; height: 8px; border-radius: 50%;
border: 1.5px solid #a5b4fc; flex-shrink: 0;
transition: background 0.15s, border-color 0.15s;
}
.cloze-dropdown-item.active .cloze-dot { background: #6366f1; border-color: #6366f1; }
.cloze-dropdown-divider { height: 1px; background: var(--bg-alt); margin: 2px 0; }
.cloze-dropdown-quit { color: #94a3b8; }
.cloze-dropdown-quit:hover { background: #fff5f5; color: #ef4444; }
[data-theme="dark"] .cloze-dropdown { background: rgba(30,41,59,0.98); border-color: #334155; }
[data-theme="dark"] .cloze-dropdown-item { color: #cbd5e1; }
[data-theme="dark"] .cloze-dropdown-item.active { background: #1e2247; color: #a5b4fc; }
[data-theme="dark"] .cloze-dropdown-item.active .cloze-dot { background: #818cf8; border-color: #818cf8; }
[data-theme="dark"] .cloze-dropdown-quit:hover { background: #3a1414; color: #f87171; }
/* Top row — nút điều khiển game */
.cloze-top-row {
display: flex; align-items: center; justify-content: space-between;
gap: 8px; margin-bottom: 12px; margin-top: 4px;
}
.cloze-top-row .cloze-redo-btn,
.cloze-top-row .typing-ctrl-btn { flex-shrink: 0; }
.cloze-top-row .cloze-menu-wrap { margin-left: auto; }
.cloze-redo-btn {
display: inline-flex; align-items: center;
height: 32px; padding: 0 14px; border-radius: 8px;
border: 1.5px solid #818cf8;
background: #e0e7ff; color: #6366f1;
font-size: 13px; font-weight: 600;
cursor: pointer; transition: background 0.18s, border-color 0.18s;
font-family: inherit; white-space: nowrap;
}
.cloze-redo-btn:hover { background: #c7d2fe; border-color: #6366f1; }
.cloze-redo-btn svg { display: block; }
.game-trans-btn.game-trans-open {
background: #6366f1;
border-color: #6366f1;
color: #fff;
}
.game-trans-btn.game-trans-open:hover { background: #4f46e5; border-color: #4f46e5; }
.game-trans-panel {
margin: 10px 0 8px;
border-radius: 10px;
overflow-y: auto;
max-height: 220px;
border: 1px solid #d1fae5;
background: #f0fdf4;
}
.game-trans-pair {
padding: 7px 14px 5px;
border-bottom: 1px solid rgba(0,0,0,0.05);
}
.game-trans-pair:last-child { border-bottom: none; }
.game-trans-pair:nth-child(even) { background: rgba(255,255,255,0.55); }
.game-trans-en {
font-size: calc(var(--ef) - 1px);
color: #1e3a5f;
line-height: 1.6;
}
.game-trans-vi {
font-size: calc(var(--ef) - 1.5px);
color: #065f46;
font-style: italic;
line-height: 1.5;
margin-top: 1px;
opacity: 0.85;
}
.cloze-score-pill {
display: inline-flex; align-items: center;
height: 32px; padding: 0 14px; border-radius: 8px;
border: 1.5px solid #6ee7b7;
background: #d1fae5; color: #059669;
font-size: 13px; font-weight: 600;
user-select: none; pointer-events: none; white-space: nowrap;
}
/* Progress bar */
.cloze-progress-wrap { margin-bottom: 18px; }
.cloze-progress-track {
height: 4px; background: #EFF6FF; border-radius: 999px; overflow: hidden;
}
.cloze-progress-fill {
height: 100%; width: 0%;
background: linear-gradient(90deg, #3B82F6, #60A5FA);
border-radius: 999px;
transition: width 0.4s ease;
}
/* Text hiển thị trong game */
.cloze-display { font-size: var(--ef); color: #1E293B; }
[data-theme="dark"] .cloze-display { color: #e2e8f0; }
.cloze-line {
display: flex; flex-wrap: wrap; align-items: baseline;
row-gap: 10px; column-gap: 6px; margin-bottom: 14px;
}
.cloze-line:last-child { margin-bottom: 0; }
/* Baseline anchor — giữ pill thẳng baseline với chữ thường */
.cloze-pill::before {
content: '\200b';
font-size: var(--ef);
line-height: 1;
}
.cloze-sentline { padding-left: 0; }
.cloze-trail { margin-left: -6px; }
.cloze-hyphen { margin: 0 -5px; }
.cloze-flow-sep {
display: inline-block; width: 0;
border-left: 1.5px solid #cbd5e1;
height: 0.9em; vertical-align: middle;
margin: 0 6px;
}
.cloze-fixed {
display: inline-block;
padding: 1px 8px; border-radius: 6px;
background: #FEF9C3; color: #92400E;
font-weight: 700; font-size: calc(var(--ef) - 1px);
}
.cloze-punct { margin-left: -4px; }
/* Topbar game slot — 2 pill buttons */
.topbar-game-slot {
display: inline-flex; align-items: center; gap: 16px;
}
.tg-pill {
display: inline-flex; align-items: center;
height: var(--btn-h); padding: 0 12px;
border: 1px solid transparent; border-radius: 16px;
background: var(--white);
color: #1e4f9c;
cursor: pointer; overflow: hidden;
white-space: nowrap;
font-family: inherit; line-height: 1;
transition: background 0.2s, color 0.2s, border-color 0.2s;
}
.tg-pill:hover { background: #dbe9ff; }
.tg-pill-locked {
background: #fffbeb;
border-color: #fde68a;
color: #92400e;
}
.tg-pill-locked:hover { background: #fef3c7; color: #78350f; }
[data-theme="dark"] .tg-pill-locked {
background: #292213;
border-color: #57460f;
color: #fbbf24;
}
[data-theme="dark"] .tg-pill-locked:hover { background: #3a2f15; }
.tg-pill-icon { display: inline-flex; align-items: center; flex-shrink: 0; margin-right: 2px; }
.tg-pill-icon.pop { animation: tg-pill-icon-pop 0.45s cubic-bezier(.34,1.56,.64,1); }
.tg-pill-label {
font-size: 12.5px; font-weight: 600;
margin-left: 8px;
overflow: hidden; white-space: nowrap;
}
.tg-pill-x {
display: inline-flex; align-items: center; justify-content: center;
width: 18px; height: 18px; border-radius: 50%;
cursor: pointer; flex-shrink: 0; user-select: none;
background: rgba(255,255,255,0.9); color: var(--primary, #1d6ff2);
overflow: hidden; max-width: 0; opacity: 0; margin-left: 0;
transition: max-width 0.28s ease, opacity 0.15s ease 0.08s, margin 0.28s ease, background 0.15s, color 0.15s;
}
.tg-pill-x:hover { background: #fff; color: var(--primary-dark, #1558c8); }
.tg-pill.active {
background: var(--primary, #1d6ff2); color: #fff;
}
.tg-pill.active .tg-pill-x { max-width: 18px; opacity: 1; margin-left: 6px; }
.tg-pill.no-trans,
.tg-pill.no-trans .tg-pill-label,
.tg-pill.no-trans .tg-pill-x { transition: none !important; }
@keyframes tg-pill-icon-pop {
0% { transform: scale(1) rotate(0deg); }
45% { transform: scale(1.3) rotate(-14deg); }
75% { transform: scale(0.92) rotate(8deg); }
100% { transform: scale(1) rotate(0deg); }
}
@keyframes tg-pill-nudge {
0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(29,111,242,0); }
28% { transform: scale(1.15); box-shadow: 0 0 0 6px rgba(29,111,242,0.4); }
58% { transform: scale(0.96); box-shadow: 0 0 0 2px rgba(29,111,242,0.15); }
82% { transform: scale(1.05); box-shadow: 0 0 0 3px rgba(29,111,242,0.2); }
100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(29,111,242,0); }
}
.tg-pill.nudge { animation: tg-pill-nudge 0.65s ease-out; }
/* ── Song ngữ toggle (Part 6/7) ── */
.bi-toggle-btn {
display: flex; align-items: center; gap: 5px;
height: var(--btn-h); padding: 0 10px; border-radius: 8px; flex-shrink: 0;
background: var(--white); border: 1px solid #c9dcfa;
color: #1e4f9c; cursor: pointer; font-size: 12.5px; font-weight: 600;
font-family: inherit; line-height: 1; white-space: nowrap;
transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.bi-toggle-btn:hover { background: #dbe9ff; }
.bi-toggle-btn.bi-toggle-on { background: var(--primary, #1d6ff2); color: #fff; border-color: var(--primary, #1d6ff2); }
.bi-toggle-btn.bi-toggle-on:hover { background: var(--primary-dark, #1558c8); border-color: var(--primary-dark, #1558c8); }
.bi-toggle-btn.bi-toggle-locked { background: #fffbeb; border-color: #fde68a; color: #92400e; }
.bi-toggle-btn.bi-toggle-locked:hover { background: #fef3c7; color: #78350f; }
[data-theme="dark"] .bi-toggle-btn.bi-toggle-locked { background: #292213; border-color: #57460f; color: #fbbf24; }
[data-theme="dark"] .bi-toggle-btn.bi-toggle-locked:hover { background: #3a2f15; }
/* ── Mobile combined menu button (thay 2 pill + settings) ── */
.tg-menu-btn {
display: inline-flex; align-items: center; justify-content: center;
width: 32px; height: 32px; border-radius: 8px; flex-shrink: 0;
background: var(--white); border: 1px solid #c9dcfa;
color: #1e4f9c; cursor: pointer; transition: background 0.15s;
}
.tg-menu-btn:hover { background: #dbe9ff; }
.tg-menu-btn.has-active,
.tg-menu-btn.has-active:hover,
[data-theme="dark"] .tg-menu-btn.has-active,
[data-theme="dark"] .tg-menu-btn.has-active:hover { background: #ffc000; color: #1a2a2e; border-color: #ffc000; }
.tg-menu-drop {
position: fixed; z-index: 1100;
background: #fff; border-radius: 14px;
box-shadow: 0 8px 32px rgba(0,0,0,0.18); border: 1px solid #e2e8f0;
padding: 10px 14px; width: 250px;
}
[data-theme="dark"] .tg-menu-drop { background: #1e293b; border-color: #334155; }
.tg-menu-row {
display: flex; align-items: center; justify-content: space-between;
padding: 9px 0; gap: 10px;
}
.tg-menu-row--action { cursor: pointer; margin: 0 -14px; padding: 9px 14px; border-radius: 8px; }
.tg-menu-row--action:hover { background: var(--bg-alt, #f1f5f9); }
[data-theme="dark"] .tg-menu-row--action:hover { background: #334155; }
.tg-menu-lbl {
display: flex; align-items: center; gap: 8px;
font-size: 14px; font-weight: 500; color: #1e293b; flex: 1; white-space: nowrap;
}
[data-theme="dark"] .tg-menu-lbl { color: #e2e8f0; }
.tg-menu-icon { opacity: 0.65; display: flex; align-items: center; }
.tg-menu-tog {
width: 44px; height: 24px; border-radius: 12px; flex-shrink: 0;
background: #cbd5e1; border: none; cursor: pointer; position: relative;
transition: background 0.2s;
}
.tg-menu-tog::after {
content: ''; position: absolute; top: 2px; left: 2px;
width: 20px; height: 20px; border-radius: 50%; background: #fff;
transition: left 0.2s; box-shadow: 0 1px 4px rgba(0,0,0,0.2);
}
.tg-menu-tog.on { background: #6366f1; }
.tg-menu-tog.on::after { left: 22px; }
.tg-menu-divider { height: 1px; background: #e2e8f0; margin: 2px 0; }
[data-theme="dark"] .tg-menu-divider { background: #334155; }
.tg-menu-font-ctrl { display: flex; align-items: center; gap: 6px; }
.tg-menu-font-btn {
width: 30px; height: 28px; border-radius: 6px; flex-shrink: 0;
background: var(--bg-alt); border: 1px solid #e2e8f0;
font-size: 11px; font-weight: 700; color: #475569; cursor: pointer;
display: inline-flex; align-items: center; justify-content: center;
}
.tg-menu-font-btn:hover { background: #e0e7ff; border-color: #a5b4fc; color: #4338ca; }
[data-theme="dark"] .tg-menu-font-btn { background: #334155; border-color: #475569; color: #94a3b8; }
.tg-menu-font-val { font-size: 12px; color: #64748b; min-width: 34px; text-align: center; }
[data-theme="dark"] .tg-menu-font-val { color: #94a3b8; }
.tg-menu-ratio-btn {
width: 30px; height: 28px; border-radius: 6px; flex-shrink: 0;
background: var(--bg-alt); border: 1px solid #e2e8f0;
font-size: 13px; color: #475569; cursor: pointer;
display: inline-flex; align-items: center; justify-content: center;
}
.tg-menu-ratio-btn:hover { background: #e0e7ff; border-color: #a5b4fc; color: #4338ca; }
.tg-menu-ratio-btn.active { background: #4f46e5; border-color: #4f46e5; color: #fff; }
[data-theme="dark"] .tg-menu-ratio-btn { background: #334155; border-color: #475569; color: #94a3b8; }
[data-theme="dark"] .tg-menu-ratio-btn.active { background: #6366f1; border-color: #6366f1; color: #fff; }
/* Pill — pop fade reveal */
.cloze-pill {
display: inline-flex; align-items: center; justify-content: center;
height: 28px; border-radius: 10px;
cursor: pointer;
flex-shrink: 0; position: relative;
transition: transform 0.15s ease;
}
.cloze-pill:not(.opened):hover { filter: brightness(0.94); }
.cloze-pill-inner {
width: 100%; height: 100%;
position: relative;
}
.cloze-pill-front, .cloze-pill-back {
position: absolute; inset: 0; border-radius: 10px;
display: flex; align-items: center; justify-content: center;
}
.cloze-pill-front {
background: linear-gradient(to bottom, #e0e7ff, #c7d2fe);
border: 1px solid #818cf8;
box-shadow: inset 0 2px 4px rgba(99,102,241,0.12);
}
.cloze-pill:not(.opened):hover .cloze-pill-front { background: #a5b4fc; }
.cloze-pill.opened .cloze-pill-front { opacity: 0; }
.cloze-pill-back {
background: #dcfce7;
border: 1px solid #22c55e;
color: #15803d; font-weight: 400; font-size: var(--ef);
line-height: 1; opacity: 0;
}
.cloze-pill.auto-opened .cloze-pill-back {
background: #fef3c7;
border-color: #f59e0b;
color: #92400e;
}
@keyframes clozeReveal {
from { opacity: 0; transform: scale(0.82); }
to { opacity: 1; transform: scale(1); }
}
/* ── Celebration ── */
.celeb-overlay {
position: fixed; inset: 0; z-index: 9999;
display: flex; align-items: center; justify-content: center;
pointer-events: none;
}
@keyframes celebFall {
0% { transform: translateY(0) rotate(0deg) scale(1); opacity: 1; }
80% { opacity: 1; }
100% { transform: translateY(105vh) rotate(600deg) scale(.6); opacity: 0; }
}
@keyframes celebCardIn {
0% { opacity: 0; transform: scale(.55) translateY(20px); }
65% { transform: scale(1.06) translateY(-4px); }
100% { opacity: 1; transform: scale(1) translateY(0); }
}
@keyframes celebIconPop {
0%,100% { transform: scale(1) rotate(-8deg); }
50% { transform: scale(1.25) rotate(8deg); }
}
@keyframes celebFadeOut {
to { opacity: 0; transform: scale(.92); }
}
[data-theme="dark"] .celeb-card { background: #1e293b; }
.celeb-card {
background: #fff;
border-radius: 32px;
padding: 48px 68px 46px;
text-align: center;
box-shadow: 0 28px 72px rgba(0,0,0,.2), 0 4px 20px rgba(99,102,241,.15);
animation: celebCardIn .45s cubic-bezier(.34,1.56,.64,1) forwards;
position: relative;
overflow: hidden;
}
.celeb-card::before {
content: '';
position: absolute;
inset: 0;
background: radial-gradient(ellipse at 50% 0%, rgba(99,102,241,.07) 0%, transparent 70%);
pointer-events: none;
}
.celeb-icon {
font-size: 72px; line-height: 1;
margin-bottom: 20px;
display: block;
animation: celebIconPop .7s ease-in-out infinite;
}
.celeb-title {
font-size: 34px; font-weight: 900; letter-spacing: -.5px;
background: linear-gradient(135deg, #6366f1 0%, #a855f7 50%, #f59e0b 100%);
-webkit-background-clip: text; -webkit-text-fill-color: transparent;
background-clip: text;
margin: 0;
line-height: 1.15;
}
.cloze-pill.opened .cloze-pill-back { animation: clozeReveal 0.12s ease-out forwards; }
/* Ripple on reveal */
.cloze-ripple {
position: absolute;
width: 60px; height: 60px; border-radius: 50%;
top: 50%; left: 50%;
transform: translate(-50%, -50%) scale(0);
background: rgba(255,255,255,0.35);
pointer-events: none;
animation: clozeRipple 0.3s ease-out forwards;
}
@keyframes clozeRipple {
from { transform: translate(-50%, -50%) scale(0); opacity: 0.5; }
to { transform: translate(-50%, -50%) scale(1.5); opacity: 0; }
}
/* Mobile */
@media (max-width: 768px) {
.cloze-banner { padding: 8px 18px; font-size: 13px; }
.cloze-area { padding: 18px 16px; border-radius: 14px; margin: 8px 8px 0; }
/* Đồng nhất chiều cao 28px cho tất cả nút trong game controls */
.cloze-redo-btn, .cloze-score-pill, .typing-ctrl-btn { height: 28px; padding: 0 10px; font-size: 12px; }
/* Đồng nhất chiều cao 30px cho audio bar */
.ap-play { width: 30px; height: 30px; }
.ap-rewind { height: 30px; padding: 0 8px; display: inline-flex; align-items: center; justify-content: center; }
.ap-speed-btn { height: 30px; padding: 0 9px; display: inline-flex; align-items: center; justify-content: center; }
/* Cho phép các nút điều khiển game xuống dòng thay vì tràn ngang */
.cloze-top-row { gap: 8px; flex-wrap: wrap; }
.cloze-display { font-size: 13px; }
.cloze-pill { min-width: 2.5em; }
/* Icon-only trên mobile: ẩn chữ, bỏ margin-right SVG */
.btn-label { display: none; }
/* Giữ nguyên "50% ▾" gọn trên mobile, không thêm chữ "Khuyết" */
.cloze-menu-pct-label { display: none; }
.cloze-redo-btn svg, .typing-ctrl-btn svg, .game-help-btn svg { margin-right: 0 !important; }
/* ── GAME ACTIVE LAYOUT (mobile) ── */
/* Audio bar: clean strip, ngăn cách với action strip bằng border dưới */
.exam-screen.game-active .audio-wrap {
position: fixed;
top: 56px; left: 0; right: 0; z-index: 50;
background: #eef2ff;
border: none; border-bottom: 1px solid #dde6ff; border-radius: 0;
padding: 7px 14px; margin: 0;
}
/* Nav bar: border đồng nhất với các zone khác */
.exam-screen.game-active .game-nav-row {
position: fixed;
bottom: 0; left: 0; right: 0; z-index: 49;
background: #fff;
border: none; border-top: 1px solid #e2e8f0;
padding: 8px 14px calc(8px + env(safe-area-inset-bottom, 0px));
display: flex; align-items: center; justify-content: space-between;
margin: 0;
}
/* screen-left: full height, no padding */
.exam-screen.game-active .screen-left {
height: 100% !important; padding: 0 !important;
align-items: stretch; display: flex;
flex-direction: column; overflow: hidden !important;
}
.exam-screen.game-active .left-scroll-zone {
overflow: hidden; flex: 1; min-height: 0;
}
/* Game area: fixed giữa audio và nav */
.exam-screen.game-active .cloze-area,
.exam-screen.game-active .typing-area {
position: fixed !important;
top: 106px; /* 56px topbar + ~50px audio-wrap */
bottom: calc(50px + env(safe-area-inset-bottom, 0px));
left: 0; right: 0;
background: #fff;
display: flex; flex-direction: column; overflow: hidden;
padding: 0;
transition: bottom 0.18s ease;
width: auto !important; max-width: none !important;
height: auto !important; max-height: none !important;
flex: none; margin: 0; border-radius: 0;
}
/* Control strip: top-row + progress, cùng nền với audio */
.exam-screen.game-active .cloze-top-row {
background: #eef2ff;
border-bottom: none;
padding: 7px 14px 6px; margin: 0;
gap: 6px; flex-wrap: wrap; flex-shrink: 0;
justify-content: flex-start;
}
.exam-screen.game-active .cloze-top-row .cloze-menu-wrap {
margin-left: auto;
}
.exam-screen.game-active .cloze-progress-wrap {
background: #eef2ff;
padding: 0; margin: 0;
border: none; border-bottom: 1px solid #e2e8f0;
position: relative; z-index: 2;
flex-shrink: 0;
}
.exam-screen.game-active .cloze-progress-track {
border-radius: 0; height: 3px; margin: 0;
background: #dde6ff;
}
/* Text area: padding thoáng, font nhất quán */
.exam-screen.game-active .cloze-display,
.exam-screen.game-active .typing-display {
flex: 1; overflow-y: auto; min-height: 0;
padding: 14px 16px 24px;
font-size: 14px; line-height: 1.6;
scroll-padding-bottom: 48px;
}
/* Đồng nhất chiều cao ô khuyết với chiều cao dòng chữ */
.exam-screen.game-active .cloze-line {
align-items: center;
row-gap: 6px; margin-bottom: 10px;
}
.exam-screen.game-active .cloze-pill {
height: 1.65em; min-width: 3em;
}
/* Song ngữ panel */
.exam-screen.game-active .game-trans-panel {
overflow-y: auto; min-height: 0;
}
/* Khoá scroll ngoài khi game active */
html.game-scroll-lock, html.game-scroll-lock body {
overflow: hidden !important; overscroll-behavior: none;
}
html.game-scroll-lock .cloze-display,
html.game-scroll-lock .typing-display { overscroll-behavior: contain; }
/* ── Dark mode ── */
[data-theme="dark"] .exam-screen.game-active .audio-wrap {
background: #1e293b; border-bottom: 1px solid #334155;
}
[data-theme="dark"] .exam-screen.game-active .cloze-top-row,
[data-theme="dark"] .exam-screen.game-active .cloze-progress-wrap {
background: #1e293b; border-bottom-color: #334155;
}
[data-theme="dark"] .exam-screen.game-active .cloze-progress-track {
background: #334155;
}
[data-theme="dark"] .exam-screen.game-active .cloze-progress-wrap {
border-bottom-color: #334155;
}
[data-theme="dark"] .exam-screen.game-active .cloze-area,
[data-theme="dark"] .exam-screen.game-active .typing-area {
background: #0f172a;
}
[data-theme="dark"] .exam-screen.game-active .game-nav-row {
background: #0f172a; border: none; border-top: 1px solid #334155;
}
}
/* ══════════════════════════════════════════════════════
TYPING GAME — Điền Khuyết — Game 2
══════════════════════════════════════════════════════ */
.typing-hidden-input {
position: fixed; opacity: 0; pointer-events: none;
width: 1px; height: 1px; top: -9999px; left: -9999px;
}
/* Container — reuse cloze card styles */
.typing-area {
background: #fff; border: 1.5px solid #e0e7ff;
border-radius: 18px; padding: 24px 24px 20px;
box-shadow: 0 2px 16px rgba(99,102,241,0.08);
margin-top: 10px; position: relative;
animation: clozeCardIn 0.3s ease;
}
[data-theme="dark"] .typing-area { background: #1a1f3a; border-color: #322a66; }
/* Control buttons */
.typing-ctrl-btn {
display: inline-flex; align-items: center;
height: 32px; padding: 0 14px; border-radius: 8px; border: 1.5px solid #818cf8;
background: #e0e7ff; color: #6366f1; font-size: 13px; font-weight: 600;
cursor: pointer; transition: background 0.18s, border-color 0.18s;
white-space: nowrap; font-family: inherit;
}
.typing-ctrl-btn:hover { background: #c7d2fe; border-color: #6366f1; }
/* VNI hint */
.vni-modal {
display: none; position: fixed; inset: 0; z-index: 9999;
background: rgba(0,0,0,0.48);
align-items: center; justify-content: center;
}
.vni-modal.show { display: flex; }
.vni-modal-card {
background: #fff; border-radius: 20px;
padding: 36px 40px 32px; max-width: 400px; width: 88%;
position: relative; text-align: center;
box-shadow: 0 12px 48px rgba(0,0,0,0.22);
animation: vni-modal-in 0.18s ease-out;
}
@keyframes vni-modal-in {
from { opacity: 0; transform: scale(0.88); }
to { opacity: 1; transform: scale(1); }
}
.vni-modal-icon { font-size: 38px; margin-bottom: 14px; }
.vni-modal-msg {
font-size: 18px; font-weight: 600; color: #1e293b;
line-height: 1.55;
}
.vni-modal-msg strong { color: #7c3aed; }
.vni-modal-close {
position: absolute; top: 12px; right: 14px;
background: none; border: none; cursor: pointer;
font-size: 24px; line-height: 1; color: #94a3b8;
padding: 2px 6px; border-radius: 6px;
}
.vni-modal-close:hover { color: #1e293b; background: var(--bg-alt); }
[data-theme="dark"] .vni-modal-card { background: #1e293b; }
[data-theme="dark"] .vni-modal-msg { color: #f1f5f9; }
[data-theme="dark"] .vni-modal-close { color: #64748b; }
[data-theme="dark"] .vni-modal-close:hover { color: #f1f5f9; background: #334155; }
/* Display area */
.typing-display {
font-size: var(--ef); line-height: 1.9; color: #1e293b;
margin-top: 12px;
display: flex; flex-direction: column; gap: 7px;
}
.typing-line { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 5px; }
/* Baseline anchor for typing pill — compensate gap so anchor takes zero visual space */
.typing-pill::before {
content: '\200b';
font-size: var(--ef);
line-height: 1;
margin-right: -5px;
}
.typing-sentline { margin-top: 2px; }
.typing-word { color: #334155; }
.typing-fixed { color: #64748b; font-weight: 500; }
[data-theme="dark"] .typing-display { color: #e2e8f0; }
[data-theme="dark"] .typing-word { color: #e2e8f0; }
[data-theme="dark"] .typing-fixed { color: #94a3b8; }
/* Pill (blank slot) */
.typing-pill {
display: inline-flex; align-items: center; justify-content: center;
gap: 3px; padding: 3px 8px; border-radius: 8px;
border: 1.5px solid #cbd5e1; background: var(--bg-alt);
cursor: pointer; min-height: 28px; min-width: 30px;
line-height: 1;
transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
vertical-align: middle; flex-shrink: 0;
}
.typing-pill.t-active {
border-color: #6366f1; background: #eef2ff;
box-shadow: 0 0 0 3px rgba(99,102,241,0.18);
}
.typing-pill.t-complete {
border-color: #22c55e; background: #dcfce7;
color: #15803d; font-weight: 400; font-size: var(--ef);
cursor: default;
}
@keyframes t-pill-pop {
0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(34,197,94,0); }
35% { transform: scale(1.18); box-shadow: 0 0 0 5px rgba(34,197,94,0.32); }
65% { transform: scale(0.95); box-shadow: 0 0 0 2px rgba(34,197,94,0.1); }
100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(34,197,94,0); }
}
.typing-pill.t-pop { animation: t-pill-pop 0.32s ease-out; }
@keyframes progress-fill-bump {
0% { filter: brightness(1); }
45% { filter: brightness(1.5); }
100% { filter: brightness(1); }
}
.cloze-progress-fill.bump { animation: progress-fill-bump 0.4s ease-out; }
.typing-pill.t-opened {
border-color: #f59e0b; background: #fef3c7;
color: #92400e; font-weight: 400; font-size: var(--ef);
cursor: default;
}
/* Individual char inside pill */
.tchar {
display: inline-flex; align-items: center; justify-content: center;
flex-shrink: 0;
}
.tc-dot {
width: 7px; height: 7px; border-radius: 50%;
background: #94a3b8; flex-shrink: 0;
transition: background 0.1s;
}
.tc-cur {
background: #6366f1;
animation: tc-blink 1s step-end infinite;
}
@keyframes tc-blink { 50% { opacity: 0.25; } }
.tc-ok {
font-size: var(--ef); font-weight: 700; color: #16a34a;
line-height: 1; text-align: center;
}
.tc-err {
font-size: var(--ef); font-weight: 700; color: #dc2626;
line-height: 1; text-align: center;
animation: tc-shake 0.25s ease;
}
@keyframes tc-shake {
0%,100% { transform: translateX(0); }
33% { transform: translateX(-3px); }
66% { transform: translateX(3px); }
}
/* VNI warning shake */
@media (max-width: 768px) {
.typing-area { padding: 18px 16px; border-radius: 14px; }
.typing-ctrl-btn { height: 28px; padding: 0 10px; font-size: 12px; }
}
/* ── Part access lock (free/paid gate) ── */
.part-access-lock {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100%;
min-height: 320px;
padding: 40px 32px;
text-align: center;
gap: 14px;
}
.pal-icon { color: var(--border-mid, #cbd5e1); line-height: 1; }
.pal-title {
font-size: 17px;
font-weight: 700;
color: var(--text-main, #1a2a2e);
line-height: 1.4;
}
.pal-sub {
font-size: 13.5px;
color: var(--text-sub, #475569);
line-height: 1.7;
max-width: 340px;
}
.pal-cta {
display: inline-flex;
align-items: center;
gap: 6px;
margin-top: 6px;
padding: 10px 24px;
background: linear-gradient(90deg, #6366f1, #8b5cf6);
color: #fff;
border-radius: 10px;
font-size: 14px;
font-weight: 700;
text-decoration: none;
transition: opacity .15s, transform .15s;
}
.pal-cta:hover { opacity: .9; transform: translateY(-1px); }
/* ═══════════════════════════════════════════════════════════════
LOGIN PROMPT TOAST (hiện sau N câu cho user chưa đăng nhập)
═══════════════════════════════════════════════════════════════ */
.login-prompt-toast {
position: fixed;
bottom: 0;
left: 0;
right: 0;
z-index: 5000;
padding: 0 12px max(16px, env(safe-area-inset-bottom));
transform: translateY(calc(100% + 8px));
transition: transform .3s cubic-bezier(.4,0,.2,1);
pointer-events: none;
}
.login-prompt-toast.show {
transform: translateY(0);
pointer-events: auto;
}
.lpt-body {
background: #fff;
border-radius: 16px 16px 10px 10px;
padding: 14px 16px;
box-shadow: 0 -4px 20px rgba(0,0,0,.10), 0 2px 12px rgba(0,0,0,.08);
display: flex;
align-items: center;
gap: 10px;
max-width: 680px;
margin: 0 auto;
}
.lpt-text {
flex: 1;
display: flex;
align-items: flex-start;
gap: 8px;
font-size: .875rem;
color: #334155;
line-height: 1.45;
}
.lpt-actions {
display: flex;
align-items: center;
gap: 6px;
flex-shrink: 0;
}
.lpt-btn-login {
background: #4285f4;
color: #fff;
border: none;
border-radius: 8px;
padding: 8px 14px;
font-size: .82rem;
font-weight: 600;
cursor: pointer;
white-space: nowrap;
font-family: inherit;
transition: background .15s;
}
.lpt-btn-login:hover { background: #3367d6; }
.lpt-btn-login:active { background: #2a56c6; }
.tdt-lines { display: flex; flex-direction: column; gap: 3px; }
.tdt-lines .tdt-cta-line { font-weight: 700; color: #c2410c; margin-top: 2px; }
[data-theme="dark"] .tdt-lines .tdt-cta-line { color: #fb923c; }
.lpt-btn-upgrade {
background: linear-gradient(135deg, #fbbf24, #f97316);
color: #fff;
border: none;
border-radius: 8px;
padding: 8px 14px;
font-size: .82rem;
font-weight: 700;
cursor: pointer;
white-space: nowrap;
text-decoration: none;
display: inline-flex;
align-items: center;
gap: 6px;
font-family: inherit;
box-shadow: 0 2px 8px rgba(249,115,22,.35);
transition: transform .15s, box-shadow .15s, opacity .15s;
}
.lpt-btn-upgrade:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(249,115,22,.45); }
.lpt-btn-upgrade:active { transform: translateY(0); box-shadow: 0 2px 6px rgba(249,115,22,.35); }
.lpt-btn-close {
background: none;
border: none;
cursor: pointer;
color: #94a3b8;
font-size: .95rem;
width: 30px;
height: 30px;
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
line-height: 1;
font-family: inherit;
transition: color .15s, background .15s;
}
.lpt-btn-close:hover { color: #475569; background: var(--bg-alt); }
[data-theme="dark"] .lpt-body {
background: #1e293b;
box-shadow: 0 -4px 20px rgba(0,0,0,.28), 0 2px 12px rgba(0,0,0,.2);
}
[data-theme="dark"] .lpt-text { color: #e2e8f0; }
[data-theme="dark"] .lpt-btn-close { color: #64748b; }
[data-theme="dark"] .lpt-btn-close:hover { color: #94a3b8; background: #334155; }
@media (max-width: 480px) {
.lpt-body {
flex-wrap: wrap;
gap: 10px 8px;
}
.lpt-text {
width: 100%;
font-size: .82rem;
}
.lpt-actions { margin-left: auto; }
}
/* ═══════════════════════════════════════════════════════════════
LOGIN GATE (bắt buộc đăng nhập mới xem được đề — trang làm bài)
═══════════════════════════════════════════════════════════════ */
.login-gate-overlay {
position: fixed;
inset: 0;
background: rgba(15,23,42,.5);
display: flex;
align-items: center;
justify-content: center;
z-index: 600;
padding: 16px;
opacity: 0;
transition: opacity .18s ease;
}
.login-gate-overlay.show { opacity: 1; }
.login-gate-card {
position: relative;
background: var(--surface);
border-radius: var(--radius-xl);
padding: 32px 28px;
max-width: 360px;
width: 100%;
box-shadow: var(--shadow-lg);
text-align: center;
transform: translateY(12px) scale(.97);
transition: transform .22s cubic-bezier(.34,1.56,.64,1);
}
.login-gate-overlay.show .login-gate-card { transform: translateY(0) scale(1); }
.login-gate-close {
position: absolute;
top: 10px;
right: 10px;
width: 28px;
height: 28px;
border: none;
border-radius: 50%;
background: var(--bg-alt);
color: var(--text-hint);
cursor: pointer;
font-size: 16px;
line-height: 1;
display: flex;
align-items: center;
justify-content: center;
transition: background .15s, color .15s;
}
.login-gate-close:hover { background: var(--border); color: var(--text-main); }
.login-gate-icon {
width: 56px;
height: 56px;
margin: 0 auto 16px;
border-radius: 50%;
background: linear-gradient(135deg, var(--navy), var(--navy-mid));
display: flex;
align-items: center;
justify-content: center;
font-size: 24px;
}
.login-gate-title { font-size: 17px; font-weight: 700; color: var(--text-main); margin-bottom: 8px; }
.login-gate-desc { font-size: 13.5px; color: var(--text-sub); margin-bottom: 22px; line-height: 1.6; }
.login-gate-btn {
width: 100%;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 11px 20px;
background: var(--white);
color: var(--text-main);
border: 1px solid var(--border-mid);
border-radius: var(--radius-md);
cursor: pointer;
font-size: 14px;
font-weight: 600;
transition: background .15s, box-shadow .15s;
}
.login-gate-btn:hover { background: var(--bg-alt); box-shadow: var(--shadow-sm); }
/* ═══════════════════════════════════════════════════════════════
MODULE: LISTENING — overrides (Part 1–4 only)
═══════════════════════════════════════════════════════════════ */
.module-listening .part-grid {
display: flex;
flex-wrap: wrap;
gap: 6px;
}
.module-listening .part-btn {
padding: 6px 12px;
border-radius: var(--radius-sm);
}
.module-listening .select-back-btn {
gap: 5px;
padding: 10px 16px;
font-size: .82rem;
color: #64748b;
border-bottom: 1px solid #f1f5f9;
}
.module-listening .select-back-btn:hover { color: #1e293b; background: var(--bg-alt); }
[data-theme="dark"] .module-listening .select-back-btn:hover { color: #e2e8f0; }
@media (max-width: 768px) {
.module-listening .topbar { padding: 0 16px; gap: 8px; }
.module-listening .topbar-btn { padding: 5px 10px; font-size: 12px; }
}