/* ===== Bong bong chat Zalo (moi trang) - ASCII only ===== */
.zalo-fab { position: fixed; right: 22px; bottom: 22px; z-index: 140; display: flex; align-items: center; gap: 10px; text-decoration: none; }
.zalo-fab-btn { position: relative; width: 60px; height: 60px; border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center;
    color: #fff; background: linear-gradient(145deg, #2D8CFF, #0068FF); box-shadow: 0 12px 28px rgba(0, 104, 255, .42), 0 2px 6px rgba(0, 0, 0, .12);
    transition: transform .18s ease, box-shadow .18s ease; }
.zalo-fab-btn svg { width: 38px; height: 38px; margin-top: 2px; }
.zalo-fab-btn b { position: absolute; top: 21px; left: 0; right: 0; text-align: center; font-size: 10px; font-weight: 800; color: #0068FF; letter-spacing: -.3px;
    font-family: Arial, Helvetica, sans-serif; }
.zalo-fab-btn::before { content: ""; position: absolute; inset: -6px; border-radius: 50%; border: 2px solid rgba(0, 104, 255, .45);
    animation: zaloPulse 2.4s ease-out infinite; }
.zalo-fab:hover .zalo-fab-btn { transform: translateY(-2px) scale(1.04); box-shadow: 0 16px 34px rgba(0, 104, 255, .5); }
.zalo-fab:focus-visible { outline: none; }
.zalo-fab:focus-visible .zalo-fab-btn { box-shadow: 0 0 0 4px rgba(0, 104, 255, .35); }
.zalo-fab-tip { display: flex; flex-direction: column; padding: 8px 14px; border-radius: 14px; background: #fff; color: #0F1E3D; font-size: 13.5px; font-weight: 700;
    line-height: 1.25; white-space: nowrap; box-shadow: 0 10px 26px rgba(15, 30, 61, .18); opacity: 0; transform: translateX(8px); pointer-events: none;
    transition: opacity .18s ease, transform .18s ease; }
.zalo-fab-tip small { font-size: 12px; font-weight: 600; color: #0068FF; }
.zalo-fab:hover .zalo-fab-tip, .zalo-fab:focus-visible .zalo-fab-tip { opacity: 1; transform: none; }
@keyframes zaloPulse { 0% { transform: scale(.92); opacity: .9; } 70% { transform: scale(1.25); opacity: 0; } 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .zalo-fab-btn::before { animation: none; display: none; } }
/* Dien thoai: nam tren thanh menu duoi cung, nho hon */
@media (max-width: 768px) {
    .zalo-fab { right: 14px; bottom: calc(86px + env(safe-area-inset-bottom)); }
    .zalo-fab-btn { width: 52px; height: 52px; }
    .zalo-fab-btn svg { width: 34px; height: 34px; }
    .zalo-fab-btn b { top: 18px; font-size: 9px; }
    .zalo-fab-tip { display: none; }
}
/* Trang khong co thanh menu duoi (trang cong khai, dang nhap) */
.pub .zalo-fab, body.auth-body .zalo-fab, body.pub-body .zalo-fab { bottom: calc(18px + env(safe-area-inset-bottom)); }
/* Tranh de len goi y cai ung dung / hop thoai */
body:has([data-install-banner]:not([hidden])) .zalo-fab { display: none; }
body.dialog-open .zalo-fab { display: none; }
@media print { .zalo-fab { display: none !important; } }
html[data-theme="dark"] .zalo-fab-tip { background: #1D2940; color: #E6ECF8; }
html[data-theme="dark"] .zalo-fab-tip small { color: #7DB3FF; }
/* Chua khoang trong cuoi trang de bong bong khong che nut cua dong cuoi */
.content-area { padding-bottom: 150px; }
@media (max-width: 768px) { .content-area { padding-bottom: calc(200px + env(safe-area-inset-bottom)); } }
.auth-body .auth-page { padding-bottom: 88px; }
.zalo-fab { transition: transform .25s ease, opacity .25s ease; }
.zalo-fab.is-away { transform: translateX(84px); opacity: 0; pointer-events: none; }

/* ===== Nut noi Widget (tren bong bong Zalo, chi trang ung dung) ===== */
.wg-fab { position: fixed; right: 28px; bottom: 98px; z-index: 141; transition: transform .25s ease, opacity .25s ease; }
.wg-fab > summary { list-style: none; width: 48px; height: 48px; border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer;
    background: #fff; color: #2563EB; box-shadow: 0 10px 24px rgba(20, 44, 85, .2), 0 0 0 1px rgba(37, 99, 235, .14); position: relative;
    transition: transform .18s ease, box-shadow .18s ease; }
.wg-fab > summary::-webkit-details-marker { display: none; }
.wg-fab > summary .ic { width: 22px; height: 22px; }
.wg-fab > summary:hover { transform: translateY(-2px); box-shadow: 0 14px 30px rgba(20, 44, 85, .26), 0 0 0 1px rgba(37, 99, 235, .25); }
.wg-fab > summary:focus-visible { outline: none; box-shadow: 0 0 0 4px rgba(37, 99, 235, .35); }
.wg-fab[open] > summary { background: #2563EB; color: #fff; }
.wg-fab-tip { position: absolute; right: calc(100% + 10px); top: 50%; transform: translate(8px, -50%); padding: 7px 12px; border-radius: 12px; background: #fff;
    color: #0F1E3D; font-size: 13px; font-weight: 700; white-space: nowrap; box-shadow: 0 10px 26px rgba(15, 30, 61, .18); opacity: 0; pointer-events: none;
    transition: opacity .18s ease, transform .18s ease; }
.wg-fab:not([open]) > summary:hover .wg-fab-tip { opacity: 1; transform: translate(0, -50%); }
.wg-fab-menu { position: absolute; right: 0; bottom: calc(100% + 10px); width: 280px; padding: 6px; border-radius: 16px; background: #fff;
    box-shadow: 0 18px 44px rgba(15, 30, 61, .22); display: flex; flex-direction: column; gap: 2px; animation: wgFabIn .16s ease; }
@keyframes wgFabIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.wg-fab-menu a { display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 8px 10px; border-radius: 12px; text-decoration: none; color: #142C55; }
.wg-fab-menu a:hover, .wg-fab-menu a:focus-visible { background: #F3F6FC; outline: none; }
.wg-fab-menu a > .ic { width: 34px; height: 34px; padding: 8px; box-sizing: border-box; border-radius: 10px; background: #EAF2FF; color: #2563EB; flex-shrink: 0; }
.wg-fab-menu span { display: flex; flex-direction: column; line-height: 1.3; }
.wg-fab-menu strong { font-size: 13.5px; }
.wg-fab-menu small { font-size: 12px; color: #64748B; }
.wg-fab.is-away { transform: translateX(84px); opacity: 0; pointer-events: none; }
@media (max-width: 768px) {
    .wg-fab { right: 18px; bottom: calc(148px + env(safe-area-inset-bottom)); }
    .wg-fab > summary { width: 44px; height: 44px; }
    .wg-fab-tip { display: none; }
    .wg-fab-menu { width: min(280px, calc(100vw - 36px)); }
}
body:has([data-install-banner]:not([hidden])) .wg-fab, body.dialog-open .wg-fab { display: none; }
@media print { .wg-fab { display: none !important; } }
html[data-theme="dark"] .wg-fab > summary { background: #1D2940; color: #93C5FD; box-shadow: 0 10px 24px rgba(0, 0, 0, .4), 0 0 0 1px rgba(147, 197, 253, .2); }
html[data-theme="dark"] .wg-fab[open] > summary { background: #2563EB; color: #fff; }
html[data-theme="dark"] .wg-fab-menu, html[data-theme="dark"] .wg-fab-tip { background: #1D2940; color: #E6ECF8; }
html[data-theme="dark"] .wg-fab-menu a { color: #E6ECF8; }
html[data-theme="dark"] .wg-fab-menu a:hover { background: #26324D; }
html[data-theme="dark"] .wg-fab-menu a > .ic { background: #1E2B4D; color: #93C5FD; }
html[data-theme="dark"] .wg-fab-menu small { color: #9AA7C2; }