/* Truy cập nhanh (xem Views/Shared/_QuickFab.cshtml): nút ＋ nổi, 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.
   Sau khi đăng nhập (.qf-app) nút LUÔN hiện, mọi cỡ màn hình; ở trang công khai (khách) chỉ hiện trên điện thoại ≤ 760px. */
.qf, .qf-scrim { display: none; }
.qf.qf-all { display: block; }
@media (max-width: 760px) {
    .qf { display: block; }
    .qf-hide { display: none !important; }
}

.qf { --qf-bottom: 22px; position: fixed; right: 16px; bottom: calc(var(--qf-bottom) + env(safe-area-inset-bottom)); z-index: 28; }
.qf.qf-app { --qf-bottom: 28px; }
@media (max-width: 760px) { .qf.qf-app { --qf-bottom: 88px; } }              /* trên thanh menu dưới của điện thoại */
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 { position: fixed; inset: 0; background: rgba(15, 20, 40, .5); z-index: 59; }
.qf-scrim:not([hidden]) { display: block; }

.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, box-shadow .2s; }
.qf-main:hover { box-shadow: 0 10px 24px rgba(31, 95, 214, .5), 0 0 0 4px rgba(255, 255, 255, .7); }
.qf-main:focus-visible { outline: 3px solid #1c2540; outline-offset: 3px; }
.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-item:hover .qf-lbl { color: var(--accent, #1f5fd6); }
.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); transition: transform .12s; }
.qf-item:hover .qf-ic { transform: scale(1.07); }
.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, .qf-ic { transition: none; } }
@media print { .qf, .qf-scrim { display: none !important; } }