/*
=============================================================
 NOM.CSS - GIAO DIỆN BỘ GÕ CHỮ NHO DÙNG CHUNG
=============================================================
*/

#nomSuggest {
    position: fixed;
    display: none;
    z-index: 99999;

    background: #fff;
    border: 1px solid #999;
    border-radius: 6px;
    padding: 4px;

    box-shadow: 0 2px 10px rgba(0,0,0,.25);

    max-width: calc(100vw - 10px);
    max-height: 45vh;

    overflow-y: auto;
    overflow-x: hidden;

    white-space: nowrap;
}

#nomSuggest .nomChar {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    min-width: 44px;
    min-height: 44px;

    margin: 2px;
    padding: 3px 7px;

    border: 1px solid #ccc;
    border-radius: 5px;

    background: #fff;
    color: #111;

    font-family:
        "Han Nom",
        "Noto Serif CJK SC",
        "Times New Roman",
        serif;

    font-size: 30px;
    line-height: 1;

    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
}

#nomSuggest .nomChar:hover {
    background: #ffefd5;
    border-color: #7a4b23;
}

#nomSuggest .nomChar:active {
    background: #7a4b23;
    color: #fff;
}

@media (max-width: 600px) {

    #nomSuggest {
        max-width: calc(100vw - 10px);
        max-height: 40vh;
    }

    #nomSuggest .nomChar {
        min-width: 42px;
        min-height: 42px;
        font-size: 28px;
    }
}