/* FT Virtual Keyboard — bottom-sheet bàn phím ảo cho kiosk panel (ft-kiosk). z-index 2000 nằm trên MudDialog/MudPopover/MudSnackbar (MudBlazor ~1400-1600). body.ftk-open: đẩy nội dung trang + dồn MudDialog lên để ô nhập không bị che. Dark mode theo html[data-ft-dark="true"] (chuẩn FT — xem App.razor). */ .ftk-root { position: fixed; left: 0; right: 0; bottom: 0; z-index: 2000; background: #f5f5f5; border-top: 1px solid rgba(0, 0, 0, 0.12); box-shadow: 0 -6px 18px rgba(0, 0, 0, 0.18); padding: 6px 6px max(8px, env(safe-area-inset-bottom)) 6px; transform: translateY(100%); transition: transform 220ms ease-out; user-select: none; -webkit-user-select: none; touch-action: manipulation; font-family: Roboto, "Segoe UI", sans-serif; } .ftk-root--open { transform: translateY(0); } .ftk-keys { display: flex; flex-direction: column; gap: 4px; max-width: 1100px; margin: 0 auto; } .ftk-row { display: flex; gap: 4px; justify-content: center; } .ftk-key { flex: 1 1 0; min-width: 0; height: 48px; padding: 0; border: 1px solid rgba(0, 0, 0, 0.15); border-radius: 6px; background: #fff; color: #212121; font-size: 18px; font-weight: 500; cursor: pointer; transition: background 80ms, transform 80ms; -webkit-tap-highlight-color: transparent; } .ftk-key:hover { background: #eeeeee; } /* pointerdown bị preventDefault (giữ focus ở input) nên :active của browser không kích hoạt — JS tự gắn/gỡ class pressed để có phản hồi chạm tin cậy */ .ftk-key--pressed { background: #d0d0d0; transform: scale(0.96); } .ftk-key--wide { flex: 1.6 1 0; font-size: 16px; color: #555; } .ftk-key--space { flex: 6 1 0; } .ftk-key--accent { background: #2E7D32; color: #fff; border-color: #2E7D32; } .ftk-key--accent:hover { background: #1B5E20; } .ftk-key--accent.ftk-key--pressed { background: #1B5E20; } .ftk-key--telex { flex: 1.2 1 0; color: #757575; font-size: 16px; } .ftk-key--active { background: #1565C0; color: #fff; border-color: #1565C0; } .ftk-key--active:hover { background: #0d47a1; } /* ── Layout số: 4 cột đều nhau, phím 0 chiếm 2 cột ── */ .ftk-keys--numeric { max-width: 520px; } .ftk-keys--numeric .ftk-key { flex: 1 1 0; height: 56px; font-size: 22px; font-weight: 600; } .ftk-keys--numeric .ftk-key--wide, .ftk-keys--numeric .ftk-key--space, .ftk-keys--numeric .ftk-key--telex { flex: 1 1 0; font-size: 22px; } .ftk-keys--numeric .ftk-row:last-child .ftk-key[data-key="0"] { flex: 2 1 0; } /* Đẩy nội dung trang lên để ô nhập không bị che. ~290px = QWERTY 5 hàng × 48px + gap + padding. */ body.ftk-open { padding-bottom: 290px !important; transition: padding-bottom 220ms ease-out; } /* MudDialog là position:fixed — body padding KHÔNG đẩy được nó (cải thiện #6): dồn dialog lên đỉnh + giới hạn chiều cao + cho cuộn để ô nhập trong dialog còn thấy. */ body.ftk-open .mud-dialog-container { align-items: flex-start !important; padding-top: 12px; } body.ftk-open .mud-dialog { max-height: calc(100vh - 310px); overflow-y: auto; } /* ── Tablet / màn nhỏ ── */ @media (max-width: 600px) { .ftk-key { height: 42px; font-size: 16px; } .ftk-key--wide, .ftk-key--telex { font-size: 14px; } body.ftk-open { padding-bottom: 250px !important; } body.ftk-open .mud-dialog { max-height: calc(100vh - 270px); } } /* ── Dark mode (chuẩn FT: data-ft-dark trên ) ── */ html[data-ft-dark="true"] .ftk-root { background: #2a2a2a; border-top-color: rgba(255, 255, 255, 0.12); box-shadow: 0 -6px 18px rgba(0, 0, 0, 0.45); } html[data-ft-dark="true"] .ftk-key { background: #3a3a3a; color: #e0e0e0; border-color: rgba(255, 255, 255, 0.1); } html[data-ft-dark="true"] .ftk-key:hover { background: #4a4a4a; } html[data-ft-dark="true"] .ftk-key--pressed { background: #555; } html[data-ft-dark="true"] .ftk-key--wide { color: #bbb; } html[data-ft-dark="true"] .ftk-key--accent { background: #388E3C; border-color: #388E3C; color: #fff; } html[data-ft-dark="true"] .ftk-key--accent:hover, html[data-ft-dark="true"] .ftk-key--accent.ftk-key--pressed { background: #2E7D32; } html[data-ft-dark="true"] .ftk-key--telex { color: #aaa; }