/*
 * Cụm nút liên hệ nổi — chép nguyên kiểu dáng + màu của rubybox.vn (plugin Global Chat Widget 1.6.0), chủ shop yêu cầu
 * giống 100%: không áp theme hầm rượu. Khác bản gốc: z-index cụm 150 / hộp gọi 195 (khớp thang z-index của app.css),
 * ở mobile cụm nằm trên thanh .bnav. HTML: render_contact_cluster() trong app/widgets.php; hành vi: assets/widgets.js.
 * Sửa file → tăng ASSET_VER trong app/view.php.
 */
.chat-widgets-container { position: fixed; bottom: 120px; right: 30px; z-index: 150; display: flex; flex-direction: column; gap: 12px; }
.chat-widget { cursor: pointer; }

/* Nhãn hiện bên trái icon khi hover (desktop); mốc định vị đặt ở chính phần tử bấm */
.chat-widget [data-gcw-label] { position: relative; }
.chat-widget [data-gcw-label]::after {
    content: attr(data-gcw-label); position: absolute; top: 50%; right: 66px; transform: translateY(-50%) translateX(8px);
    background: rgba(33, 37, 41, 0.92); color: #fff; font-size: 13px; font-weight: 600;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif; line-height: 1; white-space: nowrap;
    padding: 8px 12px; border-radius: 8px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18); opacity: 0; visibility: hidden; pointer-events: none;
    transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s;
}
.chat-widget [data-gcw-label]:hover::after { opacity: 1; visibility: visible; transform: translateY(-50%) translateX(0); }
.chat-widget a { outline: none; display: block; color: inherit; }

.phone-call-trigger:hover .phone-call-svg, .messenger-chat-widget a:hover .messenger-svg, .gcw-zalo a:hover .zalo-svg {
    transform: scale(1.1); box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
}

/* Zalo */
.zalo-svg { width: 55px; height: 55px; border-radius: 50%; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); transition: all 0.3s ease; display: flex; align-items: center; justify-content: center; background: #fff; user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent; }
.zalo-svg svg { width: 100%; height: 100%; pointer-events: none; }
.zalo-svg--oa { background: linear-gradient(135deg, #0091FF, #0050D1); }
.zalo-svg--personal { background: #fff; border: 1px solid rgba(0, 104, 255, 0.14); }

/* Messenger */
.messenger-svg { width: 55px; height: 55px; border-radius: 50%; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); transition: all 0.3s ease; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, #00B2FF, #006AFF); user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent; }
.messenger-svg svg { width: 36px; height: 36px; pointer-events: none; }

/* Điện thoại */
.phone-call-trigger { display: block; cursor: pointer; outline: none; }
.phone-call-svg { width: 55px; height: 55px; border-radius: 50%; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); transition: all 0.3s ease; display: flex; align-items: center; justify-content: center; cursor: pointer; user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent; background: linear-gradient(135deg, #4CAF50, #46a148); }
.phone-call-svg svg { width: 28px; height: 28px; fill: #fff; pointer-events: none; }
.phone-call-trigger:hover .phone-call-svg { animation: gcw-phone-pulse 1s ease-in-out; }

/* Thứ tự hiển thị (trên → dưới): Zalo OA, Zalo cá nhân, Messenger, Gọi, Nhắn tin hỗ trợ (chủ shop: nút hỗ trợ nằm cuối) */
.gcw-zalo--slot1 { order: 1; } .gcw-zalo--slot2 { order: 2; } .messenger-chat-widget { order: 3; } .phone-call-widget { order: 4; } .support-chat-widget { order: 5; }

/* Hover: Zalo lắc, Messenger đung đưa (giữ scale 1.1 trong keyframe để không bị :hover transform ghi đè) */
.gcw-zalo a:hover .zalo-svg { animation: gcw-wiggle 0.5s ease-in-out; }
.messenger-chat-widget a:hover .messenger-svg { animation: gcw-swing 0.6s ease-out; }
@keyframes gcw-wiggle { 0% { transform: scale(1) rotate(0deg); } 20% { transform: scale(1.1) rotate(8deg); } 50% { transform: scale(1.1) rotate(-8deg); } 75% { transform: scale(1.1) rotate(6deg); } 100% { transform: scale(1.1) rotate(0deg); } }
@keyframes gcw-swing { 0% { transform: scale(1) rotate(-10deg); } 100% { transform: scale(1.1) rotate(0deg); } }
@keyframes gcw-phone-pulse { 0% { box-shadow: 0 4px 12px rgba(0,0,0,.15), 0 0 0 0 rgba(76, 175, 80, .7); } 70% { box-shadow: 0 4px 12px rgba(0,0,0,.15), 0 0 0 14px rgba(76, 175, 80, 0); } 100% { box-shadow: 0 4px 12px rgba(0,0,0,.15), 0 0 0 0 rgba(76, 175, 80, 0); } }

/* Hộp "Gọi ngay" */
.phone-modal { display: none; position: fixed; z-index: 195; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.6); backdrop-filter: blur(5px); animation: gcw-fade-in 0.3s ease; }
.phone-modal.show { display: block; }
.phone-modal-content { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background: linear-gradient(145deg, #ffffff, #f8f9fa); border-radius: 20px; padding: 0; width: 90%; max-width: 400px; box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1); animation: gcw-slide-up 0.3s ease; overflow: hidden; }
.phone-modal-header { position: relative; padding: 15px 20px 0; text-align: right; }
.phone-modal-close { color: #aaa; font-size: 28px; font-weight: bold; cursor: pointer; transition: color 0.3s ease; line-height: 1; }
.phone-modal-close:hover { color: #333; }
.phone-modal-body { padding: 20px 30px 40px; text-align: center; }
.phone-icon-container { margin-bottom: 25px; }
.phone-icon-wrapper { display: inline-flex; align-items: center; justify-content: center; width: 80px; height: 80px; background: linear-gradient(135deg, #4CAF50, #46a148); border-radius: 50%; margin-bottom: 20px; animation: gcw-pulse 2s infinite; }
.phone-icon { width: 40px; height: 40px; fill: white; }
.phone-modal-title { font-size: 22px; font-weight: 600; color: #333; margin: 0 0 15px 0; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; }
.phone-number { margin: 20px 0; }
.phone-link { font-size: 28px; font-weight: bold; color: #4CAF50; font-family: 'Courier New', monospace; letter-spacing: 2px; transition: color 0.3s ease; }
.phone-link:hover { color: #46a148; }
.phone-modal-subtitle { color: #666; font-size: 16px; margin: 20px 0 30px 0; line-height: 1.5; }
.phone-modal-buttons { display: flex; gap: 15px; justify-content: center; flex-wrap: wrap; }
.phone-modal-buttons .btn-call-now, .phone-modal-buttons .btn-cancel { min-width: 140px; justify-content: center; text-align: center; box-sizing: border-box; }
.btn-call-now { display: inline-flex; align-items: center; gap: 8px; background: linear-gradient(135deg, #4CAF50, #46a148); color: white; padding: 12px 25px; border: none; border-radius: 25px; font-size: 16px; font-weight: 600; cursor: pointer; transition: all 0.3s ease; box-shadow: 0 4px 12px rgba(76, 175, 80, 0.3); }
.btn-call-now:hover { background: linear-gradient(135deg, #46a148, #4CAF50); transform: translateY(-2px); box-shadow: 0 6px 16px rgba(76, 175, 80, 0.4); color: white; }
.btn-cancel { background: transparent; color: #666; padding: 12px 25px; border: 2px solid #ddd; border-radius: 25px; font-size: 16px; font-weight: 500; cursor: pointer; transition: all 0.3s ease; font-family: inherit; }
.btn-cancel:hover { background: #f5f5f5; border-color: #bbb; color: #333; }
@keyframes gcw-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes gcw-slide-up { from { opacity: 0; transform: translate(-50%, -30%); } to { opacity: 1; transform: translate(-50%, -50%); } }
@keyframes gcw-pulse { 0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(76, 175, 80, 0.7); } 70% { transform: scale(1.05); box-shadow: 0 0 0 10px rgba(76, 175, 80, 0); } 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(76, 175, 80, 0); } }

/* Nút "Nhắn tin hỗ trợ" của website: cùng dạng nút tròn, hai bong bóng trên nền cam (cùng rubybox.vn) */
.support-chat-trigger { display: block; outline: none; }
.support-chat-btn { width: 55px; height: 55px; border-radius: 50%; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); transition: all 0.3s ease; display: flex; align-items: center; justify-content: center; cursor: pointer; user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent; background-color: #f57c1f; background-image: linear-gradient(135deg, #ffb52e, #f0541e); box-sizing: border-box; }
.support-chat-btn svg { width: 34px; height: 34px; pointer-events: none; }
.support-chat-trigger:hover .support-chat-btn, .support-chat-trigger:focus-visible .support-chat-btn { transform: scale(1.08); box-shadow: 0 6px 16px rgba(0, 0, 0, 0.25); }
.support-chat-badge { position: absolute; top: -4px; right: -4px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 10px; background: #d0021b; color: #fff; font: 700 12px/20px -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif; text-align: center; box-shadow: 0 0 0 2px #fff; box-sizing: border-box; }
.support-chat-badge[hidden] { display: none; }

/* Mobile: cụm nằm trên thanh điều hướng dưới (.bnav), không nhãn hover */
@media (max-width: 820px) {
    .chat-widgets-container { bottom: calc(var(--bnav-h, 58px) + 16px + env(safe-area-inset-bottom)); right: 10px; }
    .phone-call-svg, .messenger-svg, .zalo-svg, .support-chat-btn { width: 50px; height: 50px; }
    .chat-widget [data-gcw-label]::after { display: none; }
    .phone-call-svg svg { width: 26px; height: 26px; }
    .messenger-svg svg { width: 33px; height: 33px; }
    .support-chat-btn svg { width: 30px; height: 30px; }
    .phone-modal-content { width: 95%; margin: 0; }
    .phone-modal-body { padding: 15px 20px 30px; }
    .phone-modal-title { font-size: 20px; }
    .phone-link { font-size: 24px; }
    .phone-modal-buttons { flex-direction: column; align-items: center; }
    .btn-call-now, .btn-cancel { width: 100%; max-width: 200px; justify-content: center; }
}
/* Màn hình thấp (laptop nhỏ, điện thoại xoay ngang): cột 5 nút đụng header → xếp thành HÀNG NGANG sát đáy phải,
   nhãn hover hiện phía trên nút; hộp chat (.sp-panel, app.css) kê lên trên hàng này. */
@media (max-height: 600px) {
    .chat-widgets-container { flex-direction: row; align-items: flex-end; bottom: 16px; right: 16px; gap: 10px; }
    .phone-call-svg, .messenger-svg, .zalo-svg, .support-chat-btn { width: 46px; height: 46px; }
    .phone-call-svg svg { width: 24px; height: 24px; } .messenger-svg svg { width: 30px; height: 30px; } .support-chat-btn svg { width: 28px; height: 28px; }
    .chat-widget [data-gcw-label]::after { display: block; right: 50%; top: auto; bottom: 54px; transform: translateX(50%) translateY(6px); }
    .chat-widget [data-gcw-label]:hover::after { transform: translateX(50%) translateY(0); }
}
/* Mobile + màn thấp (điện thoại xoay ngang): hàng ngang vẫn phải kê trên thanh .bnav, không đè menu dưới */
@media (max-height: 600px) and (max-width: 820px) {
    .chat-widgets-container { bottom: calc(var(--bnav-h, 58px) + 10px + env(safe-area-inset-bottom)); right: 10px; gap: 8px; }
    .phone-call-svg, .messenger-svg, .zalo-svg, .support-chat-btn { width: 42px; height: 42px; }
    .chat-widget [data-gcw-label]::after { display: none; }
}
@media (max-width: 480px) {
    .phone-icon-wrapper { width: 70px; height: 70px; }
    .phone-icon { width: 35px; height: 35px; }
    .phone-link { font-size: 22px; letter-spacing: 1px; }
}