html,
body {
  height: 100%;
  margin: 0;
}

/*/////////////////////	*/

.msg.ai.typing {
  display: flex;
  gap: 4px;
  padding: 8px;
  align-items: center;
}

.msg.ai.typing .dot {
  width: 8px;
  height: 8px;
  background: #666;
  border-radius: 50%;
  animation: blink 1.4s infinite both;
}

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

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

@keyframes blink {
  0% {
    opacity: 0.2;
    transform: scale(0.8);
  }

  20% {
    opacity: 1;
    transform: scale(1);
  }

  100% {
    opacity: 0.2;
    transform: scale(0.8);
  }
}

/*//////////////////////*/
#chat-box span.link {
  color: rgb(26, 115, 232)
}

.menumain {
  /*position: fixed;*/
  /* cố định vị trí */
  top: 0;
  /* dính sát trên cùng */
  left: 0;
  /* dính sát bên trái */
  width: 100%;
  /* trải hết chiều ngang */
  z-index: 1000;
  /* nằm trên các phần tử khác */
  background: #fff;
  /* nên set màu nền để che nội dung phía sau */

}

.menumain img.logo {
  height: 65px;
}

.menumain .navbar-nav a {
  color:
}

#chat-box {
  height: 70vh;
  /* chiếm 70% chiều cao màn hình */
  overflow-y: auto;
}

#chat-form #user-input {
  width: 100%;
  border: 1px solid rgba(205, 205, 205, 1);
  height: 50px;
  border-radius: 90px;
  padding: 10px;
}

#chat-form .bt-submit {
  position: absolute;
  right: 4px;
  top: 3px;
  background: #000;
  color: #fff;
  border-radius: 90px;
  padding: 8px 20px;
}

#chat-form .bt-submit:hover {
  background: rgba(0, 0, 0, 0.8);
}

.text-logo .f {
  color: #f44336;
  font-weight: bold;
  font-size: 14px !important;
}

.text-logo .s {
  color: #f44336;
  font-size: 10px !important;
}


@media (max-width: 768px) {
  .text-logo {
    font-size: 14px;
  }
}



.speak-btn:hover {
  transform: scale(1.1);
  /* phóng to 110% */
  transition: transform 0.3s ease-in-out;
}

/*  text-logo #chat-container {   background: #fff; border-radius: 8px; box-shadow: 0 0 10px rgba(0,0,0,0.1); padding: 20px; }*/
#chat-box {
  max-height: 400px;
  overflow-y: auto;
  padding: 0px;
  border: 1px solid rgba(249, 251, 255, 1);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.6);
}

#chat-box::-webkit-scrollbar-track {
  background: #f1f1f1;
  /* màu nền track */
  border-radius: 10px;
}

#chat-box::-webkit-scrollbar-thumb {
  background: #5aa9e6;
  /* màu thanh kéo */
  border-radius: 10px;
}

.msg {
  margin: 8px 0;
  padding: 10px 14px;
  border-radius: 12px;
}

.msg.user {
  background: #e9e9e980;
  text-align: right;
}

.msg.ai {
  text-align: left;
}

/*.msg.ai b{ display: block }*/
#chat-form {
  margin-top: 10px;
  display: flex;
  gap: 10px;
}

#user-input {
  flex: 1;
  padding: 10px;
  font-size: 16px;
  border: 1px solid #ccc;
  border-radius: 6px;
}

button {
  padding: 8px 16px;
  font-size: 16px;
  border: none;
  border-radius: 6px;
  cursor: pointer;
}

button[type="submit"] {
  background: #2196f3;
  color: white;
}

.option-btn {
  display: block;
  margin: 6px 0;
  padding: 8px 12px;
  background: #ffecb3;
  border: 1px solid #ff9800;
  color: #333;
  border-radius: 6px;
  cursor: pointer;
  text-align: left;
}

.option-btn:hover {
  background: #ffe082;
}

#debug-box,
#history-box {
  margin-top: 15px;
  padding: 10px;
  border: 1px solid #ccc;
  background: #fff;
  border-radius: 6px;
  font-size: 14px;
  white-space: pre-wrap;
}

#debug-box {
  background: #fff3e0;
}

#history-box {
  background: #e8f5e9;
  max-height: 200px;
  overflow-y: auto;
}

#reset-btn {
  background: #f44336;
  color: #fff;
  margin-top: 10px;
}


@media (min-width: 992px) {
  .navbar-expand-lg .navbar-nav .dropdown:hover .dropdown-menu {
    display: block;
  }
}

body img {
  max-width: 100%
}

.tophead {
  background: url("img/new-baner-header-hcm.png")
}

.c-blue {
  color: #003bd2
}

.mainmenu {
  background-color: transparent;
  background-image: linear-gradient(90deg, #017BFE 0%, #1248CE 100%);
}

.mainmenu a,
.mainmenu i {
  color: #fff
}

.mainmenu .dropdown-menu a {
  color: #000
}

.mainmenu .nav-link {
  text-transform: uppercase
}

.main-content {
  /*background: linear-gradient(to bottom left, rgba(121, 199, 197, 0.3) 10%, rgba(249, 251, 255, 0.5) 70%) */
  /*#eaf1ff*/
  ;
  /*min-height: 750px;margin-top: 90px;*/
}

.main-page {
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  padding: 20px;
}

/*/////////////index*/
.boxchat {

  min-height: 500px
}

.block-right {
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

#chat-container .trolyai {
  width: 50px
}

.choose-btn {
  text-align: left;
  padding: 0px 7px;
  line-height: 27px;
  /*font-size: 14px;*/
  background: #fff;
  border-bottom: 1px solid #cdcdcd;
  margin: 0px;
  width: 100%;
}

.detail-btn {
  text-align: left;
  padding: 0px 7px 0px 0px;
  line-height: 27px;
  /*font-size: 14px;*/
  background: #fff;
  border-bottom: 1px solid #cdcdcd;
  margin: 0px;
  width: 100%;
}

/*/////////////////////////////////*/

.block-right .trolyai {
  width: 90px
}

.block-right .banner {
  border-radius: 10px;
}

/*//////////box arrow*/
.rbox {
  border-radius: 10px;
  padding: 15px 0px;
  text-transform: uppercase;
  align-content: center;
  color: #fff;
}

.rbox .text-f {
  text-transform: none
}

.rbox .text-s {
  font-size: 15px;
}

.rbox span {
  font-weight: 500;
}

.rbox i {
  font-size: 30px;
  color: rgba(255, 255, 255, 0.7);
  padding: 0px 7px;
  margin-right: 7px;
}

.b-orange {
  background: rgb(255, 167, 38)
}

.b-blue {
  background: rgb(66, 165, 245)
}

.b-green {
  background: rgb(102, 187, 106)
}

.box {
  width: 100%;
  border-radius: 10px;
  border: 1px solid #8ed9f6;
  height: auto;
  background-color: #e3f7fc;
  color: #000;
  padding: 20px;
  position: relative;
}

.box.arrow-left:after {
  content: " ";
  position: absolute;
  left: -15px;
  top: 15px;
  border-top: 15px solid transparent;
  border-right: 15px solid #8ed9f6;
  border-left: none;
  border-bottom: 15px solid transparent;
}

@media only screen and (min-width:240px) and (max-width: 768px) {
  .box {
    display: block;
    float: none;

  }
}

/*/////////////////////////////////////////*/

/* Thêm hiệu ứng fadeIn khi tin nhắn xuất hiện */
.msg {
  opacity: 0;
  transform: translateY(10px);
  animation: fadeInUp 0.5s ease-out forwards;
}

/* Hiệu ứng khi tin nhắn xuất hiện */
@keyframes fadeInUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Cải thiện hiển thị chat-box */
#chat-box {
  max-height: none;
  /* bỏ giới hạn */
  height: auto;
  /* để nội dung đẩy chiều cao tự nhiên */
  overflow: visible;
  /* không dùng thanh cuộn riêng */
  /*max-height: 500px;
    overflow-y: auto;*/
}

/*/////////////////////////////robot*/
/* Áp dụng animation cho robot */
.robot {
  width: 150px;
  /* Điều chỉnh kích thước robot nếu cần */

  /* Dòng quan trọng nhất: áp dụng animation */
  animation: dance 5s infinite ease-in-out;
}

/* Định nghĩa các bước chuyển động */
@keyframes dance {
  0% {
    /* Trạng thái ban đầu: đứng yên */
    transform: translateY(0) rotate(0);
  }

  25% {
    /* Lắc lư sang trái */
    transform: rotate(-8deg);
  }

  50% {
    /* Nhảy nhẹ lên và lắc lư sang phải */
    transform: translateY(-25px) rotate(8deg);
  }

  75% {
    /* Tiếp đất và lắc lư lại sang trái */
    transform: rotate(-8deg);
  }

  100% {
    /* Trở về trạng thái ban đầu */
    transform: translateY(0) rotate(0);
  }
}