/* Focus mode — khi người dùng bắt đầu gõ thì làm TỐI mọi thứ xung quanh (header, sidebar, quảng cáo, bảng xếp hạng, footer…), chỉ chừa vùng gõ sáng. Dùng chung cho /typing-test, /daily-typing-test và /time. Bật/tắt bởi wwwroot/js/focus-mode.js: class .typing-focus trên . Tầng z-index (sidebar mobile của site đang ở 9999 nên phải vượt lên trên): 10000 — màn phủ tối .fm-backdrop 10001 — vùng gõ .fm-panel và chuỗi cha .fm-lift */ .fm-backdrop { position: fixed; inset: 0; z-index: 10000; background: rgba(8, 12, 22, .86); opacity: 0; pointer-events: none; transition: opacity .35s ease; } body.typing-focus .fm-backdrop { opacity: 1; } /* Mọi thứ ngoài vùng gõ: hạ opacity để phần nào lỡ nằm trên màn phủ (sidebar fixed, popup…) cũng biến mất theo. */ .fm-dimmable { transition: opacity .35s ease; } body.typing-focus .fm-dimmable { opacity: .12; pointer-events: none; } /* Chuỗi phần tử cha của vùng gõ — nâng lên trên màn phủ. */ body.typing-focus .fm-lift { position: relative; z-index: 10001; } /* Vùng gõ: giữ nền sáng để chữ vẫn đọc được trên nền tối. Vành sáng tạo bằng box-shadow spread nên KHÔNG làm xê dịch layout. */ body.typing-focus .fm-panel { position: relative; z-index: 10001; background: #fff; border-radius: 16px; box-shadow: 0 0 0 22px #fff, 0 30px 90px rgba(0, 0, 0, .65); } /* Con trỏ chuột biến mất khi đang tập trung — rê chuột sẽ hiện lại (JS tắt focus). */ body.typing-focus, body.typing-focus #inputfield, body.typing-focus #time-input { cursor: none; } @media (prefers-reduced-motion: reduce) { .fm-backdrop, .fm-dimmable { transition: none; } }