/* Nút liên hệ nổi (album `cta`): desktop = cột icon nhỏ bên phải, mobile = thanh nút dưới đáy */
.tq-cta { position: fixed; z-index: 400; font-family: var(--tq-font) }
.tq-cta__item { position: relative; color: var(--tq-text) }
.tq-cta__ic { display: block; line-height: 0 }
.tq-cta__ic img { display: block; object-fit: contain }
.tq-cta__ic--mask { background: currentColor; -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center }

/* Hiệu ứng rung lắc: rung ~0.8s rồi nghỉ, các nút lệch nhịp nhau; tắt khi rê chuột hoặc người dùng chọn giảm chuyển động */
@keyframes tq-cta-shake {
    0%, 55%, 100% { transform: rotate(0) }
    5%, 15%, 25%, 35%, 45% { transform: rotate(-14deg) }
    10%, 20%, 30%, 40%, 50% { transform: rotate(14deg) }
}
.tq-cta__item:not(.tq-cta__cart) { animation: tq-cta-shake 2.4s ease-in-out infinite }
.tq-cta__item:nth-child(2) { animation-delay: .3s }
.tq-cta__item:nth-child(3) { animation-delay: .6s }
.tq-cta__item:nth-child(n+4) { animation-delay: .9s }
.tq-cta__item:hover { animation: none }
@media (prefers-reduced-motion: reduce) { .tq-cta__item, .tq-cta__ic { animation: none !important } }

/* Desktop: cột icon tròn 40px, nhãn hiện khi rê chuột */
@media (min-width: 992px) {
    .tq-cta { right: 25px; bottom: 120px; display: flex; flex-direction: column; gap: 10px }
    .tq-cta__item:not(.tq-cta__item--d) { display: none }
    .tq-cta__item { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; background: #fff; box-shadow: 0 2px 8px rgba(0, 0, 0, .22); transition: transform .15s }
    .tq-cta__item:hover { transform: scale(1.1) }
    .tq-cta__item.is-active { box-shadow: 0 0 0 2px var(--color-primary), 0 2px 8px rgba(0, 0, 0, .22) }
    .tq-cta__ic img { width: 40px; height: 40px; border-radius: 50% }
    .tq-cta__ic--mask { width: 22px; height: 22px }
    .tq-cta__cart { background: #4b4f56 }
    .tq-cta__cart .tq-cta__ic img { width: 20px; height: 20px; filter: brightness(0) invert(1) }
    .tq-cta__cart .tq-badge { position: absolute; top: -6px; right: -6px }
    .tq-cta__name { position: absolute; right: calc(100% + 10px); top: 50%; transform: translateY(-50%); padding: 4px 10px; border-radius: 6px; background: var(--tq-text); color: #fff; font: 500 12px/16px var(--tq-font); white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity .15s }
    .tq-cta__item:hover .tq-cta__name, .tq-cta__item:focus-visible .tq-cta__name { opacity: 1 }
}

/* Mobile/tablet: thanh nút dưới đáy, ô bo góc xám, ô đang mở màu cam (vuốt ngang khi quá nhiều nút) */
@media (max-width: 991.98px) {
    .tq-cta { left: 0; right: 0; bottom: 0; display: flex; gap: 6px; padding: 8px 8px calc(8px + env(safe-area-inset-bottom)); overflow-x: auto; background: #fff; box-shadow: 0 -2px 10px rgba(0, 0, 0, .1); scrollbar-width: none }
    .tq-cta::-webkit-scrollbar { display: none }
    .tq-cta:not(:has(.tq-cta__item--m)) { display: none }
    .tq-cta__item:not(.tq-cta__item--m) { display: none }
    .tq-cta__item { display: flex; flex: 1 0 56px; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-width: 56px; height: 58px; padding: 0 2px; border-radius: 10px; background: #EEF1F4 }
    .tq-cta__item.is-active { background: #FFE8DC; color: #F26B1D }
    .tq-cta__item:not(.tq-cta__cart) { animation: none }
    .tq-cta__item:not(.tq-cta__cart) .tq-cta__ic { animation: tq-cta-shake 2.4s ease-in-out infinite; animation-delay: inherit }
    .tq-cta__ic img { width: 24px; height: 24px }
    .tq-cta__ic--mask { width: 24px; height: 24px }
    .tq-cta__name { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 600 10px/14px var(--tq-font) }
    body:has(.tq-cta__item--m) { padding-bottom: calc(74px + env(safe-area-inset-bottom, 0px)) !important } /* base.css đặt body padding:0 !important */
    body:has(.tq-cta__item--m) .scrollToTop { bottom: 84px }
    body:has(.tq-cta__item--m) .cart-fixed { bottom: 150px }
}