/* Hỗ trợ trực tuyến: nút tròn nổi góc phải dưới → bấm mở bảng danh sách liên hệ. Theme có thể ghi đè màu / vị trí. */

.aomua-sp {
    --of-primary: #0066B2;
    --sp-primary-dark: #004f8a;
    position: fixed; right: 16px; bottom: 72px; z-index: 90;   /* nằm trên nút "Lên đầu trang" */
    display: flex; flex-direction: column; align-items: flex-end; gap: 14px;
    pointer-events: none;   /* vùng trống không chặn bấm; chỉ nút + bảng đang mở nhận */
    box-sizing: border-box;
}
.aomua-sp *, .aomua-sp *::before, .aomua-sp *::after { box-sizing: border-box; }

.aomua-sp-panel { width: 320px; max-width: calc(100vw - 32px); border-radius: 18px; background: #fff; box-shadow: 0 18px 50px rgba(0, 0, 0, 0.22); overflow: hidden; opacity: 0; visibility: hidden; transform: translateY(16px) scale(0.92); transform-origin: bottom right; transition: opacity .22s ease, transform .24s cubic-bezier(.2, .8, .3, 1), visibility .24s; }
.aomua-sp.is-open .aomua-sp-panel { opacity: 1; visibility: visible; transform: none; pointer-events: auto; }
.aomua-sp-head { display: flex; flex-direction: column; gap: 2px; padding: 16px 18px 14px; background: linear-gradient(135deg, var(--of-primary), var(--sp-primary-dark)); color: #fff; }
.aomua-sp-head span { font-size: 15px; font-weight: 700; }
.aomua-sp-head small { font-size: 12px; opacity: 0.85; }
.aomua-sp-list { padding: 6px; }

.aomua-sp-item { position: relative; display: flex; align-items: center; gap: 13px; padding: 11px 12px; border-radius: 12px; color: inherit; text-decoration: none; transition: background .16s ease; }
.aomua-sp-item:hover { background: #f3f4f6; }
.aomua-sp-item:not(:last-child)::after { content: ""; position: absolute; left: 61px; right: 12px; bottom: 0; height: 1px; background: #eef0f2; }   /* đường ngăn, thụt sau biểu tượng */
.aomua-sp-ico { display: flex; flex: none; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; color: #fff; overflow: hidden; }
.aomua-sp-ico img { width: 100%; height: 100%; object-fit: cover; }
.aomua-sp-ico svg { display: block; }
.aomua-sp-text { display: flex; flex: 1 1 auto; flex-direction: column; min-width: 0; line-height: 1.25; }
.aomua-sp-text b { color: #1f2430; font-size: 14.5px; font-weight: 700; }
.aomua-sp-text small { color: #6b7280; font-size: 13px; font-weight: 600; letter-spacing: 0.2px; overflow-wrap: anywhere; }
.aomua-sp-arrow { flex: none; color: #c2c7cf; transition: transform .16s ease, color .16s ease; }
.aomua-sp-item:hover .aomua-sp-arrow { color: var(--of-primary); transform: translateX(3px); }
@media (max-width: 767px) { .aomua-sp-item--pc { display: none; } }
@media (min-width: 768px) { .aomua-sp-item--mobile { display: none; } }

.aomua-sp-toggle { position: relative; display: flex; align-items: center; justify-content: center; width: 54px; height: 54px; padding: 0; border: 0; border-radius: 50%; background: var(--of-primary); color: #fff; cursor: pointer; pointer-events: auto; transition: background .2s ease, transform .2s ease; }
.aomua-sp-toggle:hover { transform: scale(1.06); }
.aomua-sp-toggle:focus-visible { outline: 3px solid #93c5fd; outline-offset: 2px; }
.aomua-sp-toggle::before { content: ""; position: absolute; inset: 0; border-radius: 50%; box-shadow: 0 0 0 0 color-mix(in srgb, var(--of-primary) 55%, transparent); animation: aomua-sp-pulse 2s ease-out infinite; pointer-events: none; }   /* vòng lan toả khi đang đóng */
@keyframes aomua-sp-pulse { to { box-shadow: 0 0 0 18px transparent; } }
.aomua-sp-open, .aomua-sp-close { position: absolute; display: flex; transition: opacity .2s ease, transform .25s ease; }
.aomua-sp-close { opacity: 0; transform: rotate(-90deg) scale(0.6); }
.aomua-sp.is-open .aomua-sp-toggle { background: #6b7280; }
.aomua-sp.is-open .aomua-sp-toggle::before { animation: none; opacity: 0; }
.aomua-sp.is-open .aomua-sp-open { opacity: 0; transform: rotate(90deg) scale(0.6); }
.aomua-sp.is-open .aomua-sp-close { opacity: 1; transform: none; }

/* Đang mở menu trượt / xem ảnh / popup thì giấu nút nổi để không đè lên các lớp đó */
body.ld-lock .aomua-sp, body.aomua-lb-lock .aomua-sp, body.aomua-popup-lock .aomua-sp { display: none; }

@media (max-width: 600px) {
    .aomua-sp { right: 12px; bottom: 66px; }
    .aomua-sp-toggle { width: 50px; height: 50px; }
}
@media (prefers-reduced-motion: reduce) {
    .aomua-sp-toggle::before { animation: none; }
    .aomua-sp-panel, .aomua-sp-open, .aomua-sp-close, .aomua-sp-toggle { transition: none; }
}
@media print { .aomua-sp { display: none; } }