html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  background: #fff;
  max-height: 100%;
}
.spinner {
	    border: 4px solid #f3f3f3;
	    border-top: 4px solid #3498db;
	    border-radius: 50%;
	    width: 28px;
	    height: 28px;
	    animation: spin 1s linear infinite;
	    display: inline-block;
	    vertical-align: middle;
	  }

	  .bubble {
      width: 18px;
      height: 18px;
      background: radial-gradient(circle at 30% 30%, #232020, #544d4d);
      border-radius: 50%;
      animation: breath 3s infinite ease-in-out;
      /*box-shadow: 0 0 20px rgba(73, 68, 68, 0.6);*/
      display: inline-block;
	    vertical-align: middle;
    }

    @keyframes breath {
      0% {
        transform: scale(1);
        opacity: 1;
      }
      50% {
        transform: scale(1.4);
        opacity: 0.8;
      }
      100% {
        transform: scale(1);
        opacity: 1;
      }
    }

	  @keyframes spin {
	    0% { transform: rotate(0deg); }
	    100% { transform: rotate(360deg); }
	  }

	  .loading-text {
	    display: inline-block;
	    margin-left: 10px;
	    font-style: italic;
	    color: gray;
	  }
    #chat-box { border: 1px solid #ccc; padding: 10px; overflow-y: auto; }
    .user { font-weight: bold; color: blue; }
    .bot { font-weight: bold; color: green; }
    .msg { margin-bottom: 10px; }
 		
 			.cao {
			    height: 98vh;
				  
			 }

			 /*riêng cho ios*/
			 .ios-device .cao {
				  height: 89vh;
				  overflow: hidden;
				}
 		
 		.rounded-4{
 				border-radius: 20px;
 		 }

 		 input,select,button, textarea, ul, li, a:focus{
		    -webkit-box-shadow: none!important;
		    box-shadow: none!important;
		    outline: 0;
		}

		.dropdown-toggle::after {
			    
			    border-top: 0em solid;
			    border-right: 0em solid transparent;
			    border-bottom: 0;
			    border-left:0em solid transparent;
			}
			
			.hu_bg:hover{
				background-color: rgba(50, 50, 50, 0.1);
				cursor: pointer;
			}
			.hu_text:hover{
				color: blue !important;
				cursor: pointer;
			}
			.thanh_top{
				position: fixed;
				z-index: 10;
				top: 0px;
				left: 0px;
				width: 100%;
			}
			.offcanvas-end {
			    top: 0;
			    right: 0;
			    width: 80%;
			    border-left: 1px solid rgba(0, 0, 0, .2);
			    transform: translateX(100%);
			}
			.user{
				text-align: right;
				color: black;
				margin-left: auto;
				font-weight: 400;
				padding: 3px 10px ;
				background-color: rgba(50, 50, 50, 0.2);
				border-radius: 2vw;
				max-width: 80%;
			}
			.bot{
				color: black;
				max-width: 80%;
				font-weight: 400;
			}
			.khung_chat{
				position: absolute;
				width: 90%;
				bottom: 1%;
				left: 5%;
				z-index: 20;
			}
			.khung_chat_t{
				position: absolute;
				width: 90%;
				bottom: 1%;
				left: 5%;
			}
			
	.mt-6{
				margin-top: 100px !important;
			}

	.msg.bot img {
	  max-width: 120px;
	  max-height: 90px;
	  border-radius: 6px;
	  margin: 4px;
	  display: inline-block;
	  object-fit: cover;
	}


/* Tin nhắn bot đẹp như ChatGPT */
.message.bot {
  background: #f7f7f8;
  border-radius: 12px;
  padding: 12px 16px;
  margin: 8px 0;
  line-height: 1.6;
}

/* Code block đẹp */
.message pre {
  background: #1e1e2f;
  color: #eee;
  padding: 12px;
  border-radius: 8px;
  overflow-x: auto;
  font-size: 14px;
}

/* Inline code */
.message code {
  background: #f0f0f5;
  padding: 2px 6px;
  border-radius: 4px;
  font-family: monospace;
}

/* Link giống ChatGPT */
.message a {
  color: #0077ff;
  text-decoration: underline;
}

/* Ảnh trong Markdown */
.message img {
  max-width: 100%;
  border-radius: 10px;
  margin-top: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

/* Bảng đẹp hơn */
.markdown-table {
  border-collapse: collapse;
  width: 100%;
  margin-top: 10px;
}
.markdown-table th, .markdown-table td {
  border: 1px solid #ddd;
  padding: 8px;
}
.markdown-table th {
  background: #f0f0f5;
}









	

	@media(min-width: 768px){
		.mt-6{
				margin-top: 0px;
		}

	
		
		.thanh_top{
				position: absolute;
				z-index: 10;
				top: 0px;
				left: 0px;
				width: 100%;
			}
		.khung_chat{
				position: absolute;
				width: 90%;
				bottom: 1%;
				left: 5%;
				transition-duration: 0.4s;
			}
			.khung_chat_t{
				position: absolute;
				width: 90%;
				bottom: 30%;
				left: 5%;
			}
		.cao{
			height: 100vh;
		}

		 #chat-box { border: 1px solid #ccc; padding: 10px; overflow-y: auto; }
	   

	}

	@media (min-width: 1200px){
	   
	}
	@media (min-width: 1400px){
	   
	}