/* =============================================================
   SITE-CUSTOM.CSS — SusHebe
   Tất cả CSS inline từ _Layout.cshtml đã được trích ra đây.
   Cấu hình / chỉnh sửa tại file này.
   ============================================================= */

/* ---- Floating Contact Stack ---- */
.floating-contact-stack {
    position: fixed;
    right: 25px;
    bottom: 25px;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    transition: bottom 0.35s cubic-bezier(0.165, 0.84, 0.44, 1);
}
.floating-contact-stack.has-scrollup { bottom: 90px; }

.contact-item {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    text-decoration: none !important;
    cursor: pointer;
    transition: all 0.3s ease;
}
.contact-label {
    background-color: rgba(255,255,255,0.95);
    color: #333;
    border: 1px solid #eef0f2;
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 600;
    margin-right: 12px;
    white-space: nowrap;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    transition: all 0.3s ease;
    pointer-events: none;
    user-select: none;
    opacity: 0.9;
}
.contact-item:hover .contact-label {
    opacity: 1;
    box-shadow: 0 6px 16px rgba(0,0,0,0.12);
    color: #f80e63;
    transform: translateX(-3px);
}
.contact-icon-wrapper {
    position: relative;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    transition: all 0.3s ease;
}
.contact-item:hover .contact-icon-wrapper {
    transform: scale(1.08);
    box-shadow: 0 6px 16px rgba(0,0,0,0.22);
}
.phone-item .contact-icon-wrapper { background-color: #f80e63; color: #fff; }
.phone-item .contact-icon svg {
    width: 22px; height: 22px; fill: #fff;
    animation: phoneWiggle 0.5s infinite alternate;
}
.messenger-item .contact-icon-wrapper { background-color: #0084ff; color: #fff; }
.messenger-item .contact-icon svg { width: 24px; height: 24px; fill: #fff; display: block; }
.zalo-item .contact-icon-wrapper { background: transparent !important; box-shadow: none !important; padding: 0 !important; }

.floating-contact-stack .zalo-item,
.floating-contact-stack .messenger-item {
    opacity: 0; visibility: hidden; pointer-events: none;
    max-height: 0; margin-top: 0;
    transform: scale(0.8) translateY(15px);
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
}
.floating-contact-stack.has-scrollup .zalo-item,
.floating-contact-stack.has-scrollup .messenger-item {
    opacity: 1; visibility: visible; pointer-events: auto;
    max-height: 100px; margin-top: 15px;
    transform: scale(1) translateY(0);
}
.floating-contact-stack.has-scrollup .zalo-item { transition-delay: 0s; }
.floating-contact-stack.has-scrollup .messenger-item { transition-delay: 0.07s; }

@keyframes phoneWiggle {
    0%   { transform: rotate(-10deg) scale(1); }
    100% { transform: rotate(10deg) scale(1.05); }
}

.phone-pulse-effect {
    position: absolute; width: 100%; height: 100%;
    background-color: rgba(248,14,99,0.4);
    border-radius: 50%; top: 0; left: 0; z-index: -1;
    animation: phonePulse 2s infinite ease-out;
    pointer-events: none;
}
@keyframes phonePulse {
    0%   { transform: scale(1); opacity: 1; }
    100% { transform: scale(1.6); opacity: 0; }
}

#scrollUp {
    right: 25px !important; bottom: 25px !important;
    height: 50px !important; width: 50px !important;
    border-radius: 50% !important; background: #f80e63 !important;
    border: none !important; z-index: 9999 !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15) !important;
    transition: all 0.3s ease !important;
    display: flex !important; align-items: center !important; justify-content: center !important;
}
#scrollUp:hover {
    background: #d0074e !important;
    transform: scale(1.08) !important;
    box-shadow: 0 6px 16px rgba(0,0,0,0.22) !important;
}
#scrollUp i { color: #fff !important; font-size: 20px !important; line-height: 1 !important; display: inline-block !important; margin-top: -2px; }

@media (max-width: 767px) {
    .contact-label { display: none !important; }
    .floating-contact-stack { right: 15px; bottom: 20px; }
    .floating-contact-stack.has-scrollup { bottom: 80px; }
    .floating-contact-stack.has-scrollup .messenger-item { margin-top: 12px; }
    #scrollUp { right: 15px !important; bottom: 20px !important; }
}

/* ---- Chat Widget ---- */
#chatToggle {
    position: fixed; bottom: 25px; left: 25px;
    width: 58px; height: 58px; border-radius: 50%;
    background: linear-gradient(135deg, #f80e63, #ff4d8f);
    border: none; cursor: pointer;
    box-shadow: 0 6px 24px rgba(248,14,99,0.45);
    display: flex; align-items: center; justify-content: center;
    z-index: 9997;
    transition: transform 0.3s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.3s;
}
#chatToggle:hover { transform: scale(1.12); box-shadow: 0 10px 30px rgba(248,14,99,0.55); }
#chatToggle .icon-chat { transition: transform 0.3s, opacity 0.3s; }
#chatToggle .icon-close { position: absolute; transform: scale(0) rotate(-90deg); opacity: 0; transition: transform 0.3s, opacity 0.3s; }
#chatToggle.open .icon-chat { transform: scale(0) rotate(90deg); opacity: 0; }
#chatToggle.open .icon-close { transform: scale(1) rotate(0deg); opacity: 1; }
#chatBadge {
    position: absolute; top: -3px; right: -3px;
    width: 18px; height: 18px;
    background: #ff3b30; border-radius: 50%; border: 2px solid #fff;
    font-size: 10px; font-weight: 800; color: #fff;
    display: flex; align-items: center; justify-content: center;
    animation: badgePop 2s infinite;
}
@keyframes badgePop { 0%,100%{transform:scale(1)} 50%{transform:scale(1.25)} }
#chatPanel {
    position: fixed; bottom: 95px; left: 25px;
    width: 310px; background: #fff; border-radius: 20px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.18);
    z-index: 9996; overflow: hidden;
    transform: translateY(20px) scale(0.95); opacity: 0; visibility: hidden;
    transition: transform 0.35s cubic-bezier(0.34,1.56,0.64,1), opacity 0.3s, visibility 0.3s;
    transform-origin: bottom left;
}
#chatPanel.open { transform: translateY(0) scale(1); opacity: 1; visibility: visible; }
.chat-hd { background: linear-gradient(135deg,#f80e63 0%,#ff6b9d 100%); padding: 18px 18px 28px; position: relative; }
.chat-hd-ava { width:46px;height:46px;border-radius:50%;border:3px solid rgba(255,255,255,0.35);display:flex;align-items:center;justify-content:center;font-size:22px;margin-bottom:10px; }
.chat-hd h4 { color:#fff;font-size:15px;font-weight:800;margin:0 0 3px; }
.chat-hd p  { color:rgba(255,255,255,0.85);font-size:12px;margin:0; }
.chat-dot   { display:inline-block;width:8px;height:8px;background:#4ade80;border-radius:50%;margin-right:5px;box-shadow:0 0 6px rgba(74,222,128,0.8); }
.chat-x { position:absolute;top:12px;right:14px;background:rgba(255,255,255,0.2);border:none;border-radius:50%;width:28px;height:28px;cursor:pointer;color:#fff;font-size:16px;display:flex;align-items:center;justify-content:center;transition:background 0.2s; }
.chat-x:hover { background:rgba(255,255,255,0.35); }
.chat-bd { padding:16px 14px 14px;background:#f8f9fb;margin-top:-14px;border-radius:14px 14px 0 0; }
.chat-bubble-row { display:flex;align-items:flex-end;gap:8px;margin-bottom:14px; }
.chat-ava-sm { width:30px;height:30px;border-radius:50%;background:linear-gradient(135deg,#f80e63,#ff6b9d);display:flex;align-items:center;justify-content:center;font-size:14px;flex-shrink:0; }
.chat-bubble { background:#fff;border-radius:16px 16px 16px 4px;padding:10px 14px;font-size:13px;color:#1e293b;line-height:1.55;box-shadow:0 2px 8px rgba(0,0,0,0.07);max-width:220px; }
.chat-bubble strong { color:#f80e63; }
.chat-chs { display:flex;flex-direction:column;gap:8px;padding:0 14px 14px; }
.chat-ch { display:flex;align-items:center;gap:12px;padding:11px 14px;border-radius:12px;text-decoration:none !important;border:none;font-size:13px;font-weight:700;color:#fff !important;transition:transform 0.2s,box-shadow 0.2s; }
.chat-ch:hover { transform:translateY(-2px); }
.chat-ch.zalo { background:linear-gradient(135deg,#0068ff,#0050cc);box-shadow:0 4px 14px rgba(0,104,255,0.3); }
.chat-ch.zalo:hover { box-shadow:0 8px 20px rgba(0,104,255,0.4); }
.chat-ch.fb   { background:linear-gradient(135deg,#0084ff,#0066d6);box-shadow:0 4px 14px rgba(0,132,255,0.3); }
.chat-ch.fb:hover { box-shadow:0 8px 20px rgba(0,132,255,0.4); }
.ch-ico  { width:30px;height:30px;background:rgba(255,255,255,0.2);border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0; }
.ch-info { display:flex;flex-direction:column; }
.ch-name { font-size:13px;font-weight:800; }
.ch-sub  { font-size:11px;opacity:0.85;font-weight:500; }
@media(max-width:480px){ #chatPanel{ width:calc(100vw - 40px); } }

/* ---- Purchase Toast ---- */
#purchaseToast {
    position:fixed;bottom:100px;left:25px;right:auto;width:300px;
    background:#fff;border-radius:14px;
    box-shadow:0 8px 32px rgba(0,0,0,0.14),0 2px 8px rgba(0,0,0,0.08);
    z-index:9995;display:flex;align-items:center;gap:12px;padding:12px 14px;
    transform:translateY(20px) scale(0.95);opacity:0;visibility:hidden;
    transition:transform 0.4s cubic-bezier(0.34,1.56,0.64,1),opacity 0.35s ease,visibility 0.35s;
    cursor:pointer;border-left:4px solid #f80e63;
}
#purchaseToast.show { transform:translateY(0) scale(1);opacity:1;visibility:visible; }
#purchaseToast:hover { box-shadow:0 12px 40px rgba(0,0,0,0.18); }
.toast-img  { width:52px;height:52px;border-radius:10px;object-fit:cover;flex-shrink:0;border:1px solid #f1f5f9;background:#f8f9fb; }
.toast-body { flex:1;min-width:0; }
.toast-title   { font-size:12px;font-weight:800;color:#f80e63;display:flex;align-items:center;gap:4px;margin-bottom:3px; }
.toast-product { font-size:12px;color:#1e293b;font-weight:600;line-height:1.35;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden; }
.toast-time    { font-size:11px;color:#94a3b8;margin-top:4px; }
.toast-close-btn { position:absolute;top:7px;right:9px;background:none;border:none;cursor:pointer;color:#cbd5e1;font-size:14px;line-height:1;padding:2px 4px;transition:color 0.2s; }
.toast-close-btn:hover { color:#64748b; }
.toast-progress { position:absolute;bottom:0;left:0;height:3px;background:linear-gradient(90deg,#f80e63,#ff6b9d);border-radius:0 0 0 10px;width:100%;transform-origin:left;animation:toastProgress 5s linear forwards; }
@keyframes toastProgress { from{transform:scaleX(1)} to{transform:scaleX(0)} }
@media(max-width:480px){ #purchaseToast{ width:calc(100vw - 50px);left:25px;right:auto; } }

/* ---- Search Suggestion Box ---- */
.search-suggest-box {
    position:absolute;top:calc(100% + 6px);left:0;right:0;
    background:#fff;border-radius:14px;
    box-shadow:0 8px 32px rgba(0,0,0,0.14),0 2px 8px rgba(0,0,0,0.06);
    padding:14px 16px 16px;z-index:9999;border:1px solid #f1f5f9;
    animation:suggestFadeIn 0.2s ease;
}
@keyframes suggestFadeIn { from{opacity:0;transform:translateY(-6px)} to{opacity:1;transform:translateY(0)} }
.search-suggest-title { font-size:12px;font-weight:800;color:#64748b;text-transform:uppercase;letter-spacing:0.6px;margin-bottom:10px; }
.search-suggest-tags  { display:flex;flex-wrap:wrap;gap:8px; }
.suggest-tag {
    display:inline-flex;align-items:center;gap:5px;padding:6px 12px;
    border-radius:50px;background:#fff0f6;border:1.5px solid rgba(248,14,99,0.2);
    color:#f80e63;font-size:13px;font-weight:700;text-decoration:none !important;
    cursor:pointer;transition:all 0.2s;white-space:nowrap;
}
.suggest-tag:hover { background:linear-gradient(135deg,#f80e63,#ff4d8f);color:#fff !important;border-color:transparent;transform:translateY(-1px);box-shadow:0 4px 12px rgba(248,14,99,0.28); }
.suggest-tag svg { flex-shrink:0; }

/* History */
.search-history-list { display:flex;flex-direction:column;gap:2px;margin-bottom:4px; }
.sh-history-item { display:flex;align-items:center;justify-content:space-between;padding:6px 4px;border-radius:8px;transition:background 0.15s; }
.sh-history-item:hover { background:#fdf2f8; }
.sh-history-kw { display:flex;align-items:center;gap:8px;color:#334155;font-size:13px;font-weight:500;text-decoration:none !important;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;background:none;border:none;cursor:pointer;padding:0;text-align:left; }
.sh-history-kw svg { flex-shrink:0;color:#94a3b8; }
.sh-history-del { background:none;border:none;cursor:pointer;color:#94a3b8;font-size:18px;line-height:1;padding:0 4px;border-radius:50%;transition:color 0.15s,background 0.15s;flex-shrink:0; }
.sh-history-del:hover { color:#f80e63;background:#ffe4ef; }
.sh-clear-all { background:none;border:none;cursor:pointer;color:#f80e63;font-size:12px;font-weight:700;padding:4px 12px;border-radius:20px;transition:background 0.15s; }
.sh-clear-all:hover { background:#fff0f6; }
.sh-divider { height:1px;background:#f1f5f9;margin:8px 0 10px; }

@media(max-width:991px){
    .search-suggest-box { border-radius:12px;padding:12px 12px 14px; }
    .suggest-tag { font-size:12px;padding:5px 10px; }
}