/* Truy cập nhanh trên điện thoại (xem Views/Shared/_QuickFab.cshtml): nút ＋ nổi ở mọi trang, kéo đi chỗ khác được; bấm ra Trao đổi · Tạo note · Tra từ điển · Làm bài test · Đăng bài */
.qf, .qf-scrim { display: none; }
@media (max-width: 760px) {
    .qf-hide { display: none !important; }
    .qf { display: block; position: fixed; right: 16px; bottom: calc(var(--qf-bottom, 22px) + env(safe-area-inset-bottom)); z-index: 28; }
    body:has(.hw-fab:not([hidden])) .qf { --qf-bottom: 150px; }       /* trang Handwrite có nút tròn riêng ở cùng góc */
    .qf.open, .qf.drag { z-index: 60; }
    .qf-scrim { display: block; position: fixed; inset: 0; background: rgba(15, 20, 40, .5); z-index: 59; }
    .qf-scrim[hidden] { display: none; }

    .qf-main { position: relative; width: 56px; height: 56px; border-radius: 50%; border: 0; padding: 0; display: grid; place-items: center; color: #fff; cursor: grab; touch-action: none; -webkit-tap-highlight-color: transparent;
        background: linear-gradient(145deg, #5b86f2, #2f5fd6); box-shadow: 0 8px 20px rgba(31, 95, 214, .42), 0 0 0 4px rgba(255, 255, 255, .55); transition: transform .2s; }
    .qf.drag .qf-main { cursor: grabbing; transform: scale(1.08); box-shadow: 0 14px 28px rgba(31, 95, 214, .5), 0 0 0 4px rgba(255, 255, 255, .6); }
    .qf-main svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; pointer-events: none; }
    .qf.open .qf-main { transform: rotate(45deg); }
    .qf-mb, .qf-ic .nav-badge { position: absolute; top: -5px; right: -5px; margin: 0; box-shadow: 0 0 0 2px #fff; }
    .qf.open .qf-mb { transform: rotate(-45deg); }

    .qf-menu { position: absolute; right: 4px; bottom: 70px; display: flex; flex-direction: column; align-items: flex-end; gap: 12px; visibility: hidden; opacity: 0; transform: translateY(12px); pointer-events: none; transition: opacity .18s, transform .18s, visibility .18s; }
    .qf.left .qf-menu { right: auto; left: 4px; align-items: flex-start; }
    .qf.down .qf-menu { bottom: auto; top: 70px; flex-direction: column-reverse; transform: translateY(-12px); }
    .qf.open .qf-menu { visibility: visible; opacity: 1; transform: none; pointer-events: auto; }

    .qf-hint { white-space: nowrap; padding: 4px 12px; border-radius: 999px; background: rgba(0, 0, 0, .38); color: #fff; font-size: 12px; line-height: 1.3; text-align: center; }
    .qf-item { display: flex; align-items: center; gap: 10px; text-decoration: none; -webkit-tap-highlight-color: transparent; }
    .qf.left .qf-item { flex-direction: row-reverse; }
    .qf-lbl { background: var(--card, #fff); color: var(--ink, #1c2540); border-radius: 999px; padding: 8px 15px; font-size: 14px; font-weight: 700; line-height: 1.2; white-space: nowrap; box-shadow: 0 4px 14px rgba(0, 0, 0, .22); }
    .qf-ic { position: relative; width: 48px; height: 48px; flex: none; border-radius: 50%; display: grid; place-items: center; color: #fff; box-shadow: 0 5px 14px rgba(0, 0, 0, .28), inset 0 1px 0 rgba(255, 255, 255, .35); }
    .qf-ic svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; display: block; }
    .qf-ic.chat { background: linear-gradient(145deg, #9a7cf5, #6a47d6); }
    .qf-ic.note { background: linear-gradient(145deg, #f6c15a, #e0961a); }
    .qf-ic.dict { background: linear-gradient(145deg, #5b9af5, #2f6fdc); }
    .qf-ic.test { background: linear-gradient(145deg, #4fcb86, #2a9e5e); }
    .qf-ic.post { background: linear-gradient(145deg, #f27aa3, #d8467a); }
    .qf-item:active .qf-ic { transform: scale(.93); }
}
@media (prefers-reduced-motion: reduce) { .qf-main, .qf-menu { transition: none; } }