/* Bàn phím mô phỏng dưới khung gõ (js/neon-keyboard.js). Chỉ hiện trên máy có bàn phím + chuột. */
.neon-kb { display: none; }

@media (min-width: 900px) and (hover: hover) and (pointer: fine) {
    .neon-kb {
        display: block;
        position: relative;
        height: 285px;
        margin-top: 12px;
        overflow: hidden;
        border-radius: 14px;
        background: radial-gradient(90% 120% at 30% 100%, rgba(255, 77, 125, .13), transparent 60%),
                    radial-gradient(90% 120% at 70% 100%, rgba(79, 220, 255, .13), transparent 60%),
                    #0b0c16;
    }
    .neon-kb canvas { display: block; width: 100%; height: 100%; }
    .neon-kb__toggle {
        position: absolute;
        top: 8px;
        right: 10px;
        padding: 3px 10px;
        border: 1px solid rgba(255, 255, 255, .22);
        border-radius: 999px;
        background: rgba(11, 12, 22, .6);
        color: #dfe3ff;
        font-size: 12px;
        line-height: 1.4;
        cursor: pointer;
    }
    .neon-kb__toggle:hover { background: rgba(255, 255, 255, .12); }
    .neon-kb.is-off { height: auto; min-height: 30px; background: none; overflow: visible; }
    .neon-kb.is-off canvas { display: none; }
    .neon-kb.is-off .neon-kb__toggle { position: static; display: block; margin-left: auto; color: #4b5563; border-color: #cfd8e3; background: transparent; }
}