/* chat container */
	/* Overlay */
	#chat-overlay {
	  position: fixed;
	  inset: 0;
	  background: rgba(0,0,0,0.4);
	  display: none;
	  z-index: 99999;
	  opacity: 0;
	  transition: opacity 0.3s ease;
	}
	#chat-overlay.active {
	  display: block;
	  opacity: 1;
	}

	/* Chat Container */
	#chat-container {
		position: fixed;
		bottom: 20px;
		left: 20px;
		width: 400px;
		height: 600px;
		background: #fff;
		border-radius: 10px;
		box-shadow: 0 4px 12px rgba(0,0,0,0.2);
		display: flex;
		flex-direction: column;
		overflow: hidden;
		z-index: 99999;

		opacity: 0;
		transform: translateY(30px);
		pointer-events: none;
		transition: all 0.3s ease;
	}

	/* Khi chat được bật */
	#chat-container.active {
		opacity: 1;
		transform: translateY(0);
		pointer-events: auto;
	}

	/* Fullscreen */
	#chat-container.fullscreen {
		top: 0 !important;
		left: 0 !important;
		bottom: 0 !important;
		right: 0 !important;
		width: 100% !important;
		height: 100% !important;
		border-radius: 0 !important;
	}

	/* Header với nút fullscreen */
	#chat-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 8px 12px;
		background: #007bff;
		color: #fff;
		font-size:.8em;
		flex-shrink: 0;
	}

	/* Nút fullscreen */
	#chat-fullscreen-btn {
		background: transparent;
		border: none;
		color: #fff;
		font-size: 18px;
		cursor: pointer;
		margin-left:auto;
	}
	#chat-close-btn { background: unset; border: unset; color: #FFF; font-size: 1.2em; margin-left: 5px; }

	/* Mobile full màn hình */
	@media (max-width: 768px) {
	  #chat-container {
		bottom: 0;
		left: 0;
		width: 80%;
		height: 70%;
		border-radius: 0;

		opacity: 0;
		transform: scale(0.9) translateY(30px);
		pointer-events: none;
		transition: transform 0.35s ease, opacity 0.3s ease;
	  }
	  #chat-container.active {
		opacity: 1;
		transform: scale(1) translateY(0);
		pointer-events: auto;
	  }
	}

	/* Chat content */
	#chat-box {
	  flex: 1;
	  padding: 10px;
	  overflow-y: auto;
	  font-size: 14px;
	}
	#input-container {
	  display: flex;
	  border-top: 1px solid #ddd;
	}
	#input-container input {
	  flex: 1;
	  padding: 8px;
	  border: none;
	  outline: none;
	}
	#input-container button {
	  padding: 8px 12px;
	  border: none;
	  background: #0078ff;
	  color: #fff;
	  cursor: pointer;
	}

	/* Chat Icon */
	#chat-icon {
	  position: fixed;
	  bottom: 0;
	  left: 0;
	  width: 130px;
	  height: auto;
	  border-radius: 50%;
	  display: flex;
	  align-items: center;
	  justify-content: center;
	  color: #fff;
	  font-size: 28px;
	  cursor: pointer;
	  z-index: 1003;

	  animation: chatIconBounce 3s ease-in-out, chatIconWait 5s linear infinite;
	}

	/* Ẩn icon khi cần */
	#chat-icon.hidden {
	  display: none;
	}

	#chat-icon img {
	  width: 100%;
	  height: auto;
	  display: inline-block;
	  vertical-align: top;
	}

	/* Animation nhảy */
	@keyframes chatIconBounce {
	  0%, 100% { transform: translateY(0); }
	  30% { transform: translateY(-8px); }
	  60% { transform: translateY(4px); }
	}

	/* Trick: tạo vòng lặp có delay */
	@keyframes chatIconWait {
	  0%   { transform: translateY(0); animation-timing-function: ease-in-out; }
	  5%   { transform: translateY(-8px); }
	  10%  { transform: translateY(4px); }
	  15%  { transform: translateY(0); }
	  100% { transform: translateY(0); }
	}

	/* Tooltip */
	#chat-tip {
		position: fixed;
		bottom: 140px;
		left: 20px;
		background: #fff;
		color: #333;
		padding: 6px 10px;
		border-radius: 6px;
		box-shadow: 0 2px 6px rgba(0,0,0,0.2);
		font-size: 13px;
		white-space: nowrap;
		display: none;
		z-index: 1004;
		text-align:left;
		font-size: .8em;
		line-height: 1.5em;
		font-weight: bold;
		color: var(--c-main);
	}
	#chat-tip.show {
	  display: block;
	  animation: fadeIn 0.4s ease;
	}
	@keyframes fadeIn {
	  from { opacity: 0; transform: translateY(5px); }
	  to { opacity: 1; transform: translateY(0); }
	}
	/* / chat container */

	#chat-box {
		flex: 1;
		padding: 15px;
		overflow-y: auto;
		background-color: #f9f9f9;
	}
	.message {
	  display: inline-block;
	  max-width: 90%;
	  padding: 8px 12px;
	  margin: 6px 0;
	  border-radius: 12px;
	  word-wrap: break-word;
	  font-size: 14px;
	  line-height: 1.4;
	  clear: both;
	  text-align: left;
	  animation: fadeInUp 0.3s ease;
	}
	.message a { font-weight:bold; color:var(--c-blue); transition:all .3s; }
	.message a:hover { color:#0AC1FA; }

	/* USER (bên phải) */
	.user-message {
	  background: #4da3ff;      /* xanh nhẹ */
	  color: #fff;              /* chữ trắng */
	  float: right;
	  border-bottom-right-radius: 4px;
	}

	/* BOT (bên trái, có avatar) */
	.gemini-wrapper {
	  display: flex;
	  align-items: flex-start;
	  flex-direction:column;
	  float: left;
	  clear: both;
	  margin: 6px 0;
	}
	.gemini-wrapper, gemini-message { width:100%; }

	.gemini-wrapper .chatbot-avatar, .gemini-message .chatbot-avatar {
	  width: 50px;
	  height: auto;
	  border-radius: 50%;
	  overflow: hidden;
	  margin-right: 6px;
	  flex-shrink: 0;
	}

	.gemini-wrapper .chatbot-avatar img, .gemini-message .chatbot-avatar img {
	  width: 100%;
	  height: 100%;
	  object-fit: cover;
	}

	.gemini-wrapper .gemini-message {
	  background: #f1f1f1;      /* xám nhạt */
	  color: #222;
	  border-radius: 12px;
	  border-bottom-left-radius: 4px;
	  padding: 8px 12px;
	  line-height: 1.4;
	  width: 100%;
	  max-width:600px;
	  box-sizing:border-box;
	}
	 
	/* Input + button */
	#input-container {
	  display: flex;
	  padding: 10px;
	  background-color: #fff;
	  border-top: 1px solid #ccc;
	}

	#user-input {
	  flex: 1;
	  padding: 10px;
	  border: 1px solid #ccc;
	  border-radius: 20px;
	  margin-right: 10px;
	  outline: none;
	}

	#send-button {
	  padding: 10px 15px;
	  border: none;
	  background-color: #007bff;
	  color: white;
	  border-radius: 20px;
	  cursor: pointer;
	  transition: background-color 0.3s;
	}

	#send-button:hover {
	  background-color: #0056b3;
	}

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

	.typing .dot {
		display:inline-block;
		width:6px;
		height:6px;
		margin:0 2px;
		background:#666;
		border-radius:50%;
		animation: blink 1.4s infinite both;
	}

	.typing .dot:nth-child(2) { animation-delay: 0.2s; }
	.typing .dot:nth-child(3) { animation-delay: 0.4s; }

	@keyframes blink {
		0%, 80%, 100% {opacity:0.2;}
		40% {opacity:1;}
	}
	
	.chatbot-package-list {
	  display: grid;
	  grid-template-columns: 1fr;
	  gap: 12px;
	  margin: 16px 0;
	}
	.chatbot-package-item {
	  /* background: #fff;
	  border: 1px solid #ddd;
	  border-radius: 12px;
	  padding: 12px;
	  margin-bottom: 10px;
	  box-shadow: 0 2px 6px rgba(0,0,0,0.05); */
	}

	.chatbot-package-title {
	  font-weight: bold;
	  font-size: 15px;
	  color: #333;
	}

	.chatbot-package-price {
	  font-size: 14px;
	  color: #0078ff;
	  margin-bottom: 6px;
	}

	.chatbot-package-desc {
	  font-size: 13px;
	  color: #555;
	  line-height: 1.4;
	}