/* icon chat */
.chat-icon{
position:fixed;
bottom:20px;
right:20px;
background:#ff6b6b;
color:white;
font-size:24px;
padding:15px;
border-radius:50%;
cursor:pointer;
box-shadow:0 4px 10px rgba(0,0,0,0.3);
animation: bounce 2s infinite;
}

/* hiệu ứng bounce */
@keyframes bounce{
0%{transform:translateY(0);}
50%{transform:translateY(-10px);}
100%{transform:translateY(0);}
}

.chat-box{
position:fixed;
bottom:80px;
right:20px;
width:300px;
height:400px;
background:white;
border:1px solid #ddd;
border-radius:10px;
display:none;
flex-direction:column;
}

.chat-header{
background:#ff6b6b;
color:white;
padding:10px;
font-weight:bold;
}

.chat-messages{
height:280px;
overflow-y:auto;
padding:10px;
}

.user{
text-align:right;
background:#e1f5fe;
margin:5px;
padding:8px;
border-radius:8px;
}

.bot{
background:#f1f1f1;
padding:10px;
border-radius:10px;
margin:5px 0;
line-height:1.6;
max-width:80%;
word-wrap:break-word;
}

.chat-input{
display:flex;
border-top:1px solid #ddd;
}

.chat-input input{
flex:1;
padding:8px;
border:none;
}

.chat-input button{
background:#ff6b6b;
color:white;
border:none;
padding:8px 12px;
cursor:pointer;
}
.chat-tip{
position:fixed;
bottom:80px;
right:20px;
background:white;
padding:10px 15px;
border-radius:10px;
box-shadow:0 2px 10px rgba(0,0,0,0.2);
font-size:14px;
animation: fadeIn 1s;
}

@keyframes fadeIn{
from{opacity:0; transform:translateY(10px);}
to{opacity:1; transform:translateY(0);}
}