.loading-bar {
  /* ... (CSS cho hình dạng ở trên) ... */
  overflow: hidden;
  /* Quan trọng: che giấu hiệu ứng bên ngoài */
  position: relative;
}

.loading-bar::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, var(--color-text-primary), transparent);
  animation: loading-shimmer 1.5s infinite linear;
}

@keyframes loading-shimmer {
  0% {
    left: -100%;
  }

  100% {
    left: 100%;
  }
}

#side-menu {
  transform: translateX(-100%);
  transition: transform 0.5s ease-in-out;
  /* Adjust the duration and timing function as you like */
}

#side-menu.show {
  transform: translateX(0);
}

#suggestions {
  background: linear-gradient(to bottom, transparent 1.5rem, var(--color-page-background) 0);
  border-radius: 0px 0px 1.5rem 1.5rem;
}

.break_word {
  white-space: normal;
  /* Cho phép xuống dòng bình thường */
  word-wrap: break-word;
  /* Ngắt từ khi quá dài */
  overflow-wrap: break-word;
}

.break_word {
  white-space: normal;
  /* Cho phép xuống dòng bình thường */
  word-wrap: break-word;
  /* Ngắt từ khi quá dài */
  overflow-wrap: break-word;
}

.text_ellipsis {
  white-space: nowrap;
  /* Không cho xuống dòng */
  overflow: hidden;
  /* Ẩn phần bị tràn */
  text-overflow: ellipsis;
  /* Thêm dấu ... */
}

.text-wrapper {
  overflow: hidden;
  transition: max-height 0.6s ease;
  /* hiệu ứng sổ xuống */
}

.text-clamp-5 {
  display: -webkit-box;
  -webkit-line-clamp: 6;
  /* Giới hạn 8 dòng */
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  max-height: 180px;
}

.text-full {
  display: block;
  -webkit-line-clamp: unset;
  /* bỏ clamp */
  -webkit-box-orient: unset;
  overflow: visible;
  text-overflow: unset;
  max-height: 1000px;
  /* đủ lớn để chứa full text */
}

.ai_mobile {
  display: none;
}

/* Khi màn hình <= 768px thì: */
@media (max-width: 768px) {
  .ai_desktop {
    display: none;
    /* Ẩn desktop */
  }

  .ai_mobile {
    display: block;
    /* Hiện mobile */
  }
}



.loader-contender {
  z-index: 0;

  &::before {
    content: '';
    display: block;
    position: absolute;
    width: 100%;
    /* height: 100%; */
    background-color: rgba(0, 0, 0, .0);
    top: 0;
    left: 0;
    z-index: -1;
  }

  display: flex;
  align-items: center;
  justify-content: left;
  /* height: 100%; */
  padding: 0;
  margin: 0;
}
.loader-contender-search {
  z-index: 0;

  &::before {
    content: '';
    display: block;
    position: absolute;
    width: 100%;
    /* height: 100%; */
    background-color: rgba(0, 0, 0, .0);
    top: 0;
    left: 0;
    z-index: -1;
  }

  display: flex;
  align-items: center;
  justify-content: center;
  /* height: 100%; */
  padding: 0;
  margin: 0;
}


.loading {
  font-family: monospace;
  font-size: 14px;
  animation: blink 1.32s ease-out infinite;
  color: var(--color-primary);
  ;
  position: absolute;
  padding: 3px;
}

#hexa-box {
  fill: rgba(0, 0, 0, .15);
}

.hexagon {
  stroke-dasharray: 17;
  animation: dash 1.7s linear infinite;
}

@keyframes dash {
  to {
    stroke-dashoffset: 136;
  }
}

@keyframes blink {
  80% {
    opacity: 0;
  }
}


.svg {
  width: 300px;
  height: 300px;
}

.hex {
  fill: var(--color-text-primary);
  animation: fadein 3.3s infinite;
  opacity: 0;
  transform-origin: 50% 50%;
}

.hex:nth-child(2) {
  animation-delay: .2s;
}

.hex:nth-child(3) {
  animation-delay: .4s;
}

.hex:nth-child(4) {
  animation-delay: .6s;
}

.hex:nth-child(5) {
  animation-delay: .8s;
}

.hex:nth-child(6) {
  animation-delay: 1.0s;
}

.hex:nth-child(7) {
  animation-delay: 1.2s;
}

@keyframes fadein {

  0%,
  100% {
    transform: scale(0.001, 0.001);
    opacity: 0;
  }

  33%,
  66% {
    transform: scale(.9, .9);
    opacity: 1;
  }
}

.ppChatbox {
  justify-content: right;
  display: flex;
}

.textChatbox {
  max-width: 100%;
  width: auto;
  white-space: normal;
  word-wrap: break-word;
  text-align: right;
  height: auto;
  border-radius: 8px;
}

.ai_desktop {
  /* max-height: calc(100vh - 150px); */
  max-width: 100%;
  width: 100%;
  max-height: fit-content;
  border-radius: 8px;
  top: 100px;
  height: calc(100vh - 120px);
  position: sticky !important;
  top: 100px;
}

.ai_desktop .bg-page-background {
  padding-left: 10px;
  padding-top: 10px;
  padding-right: 10px;
  ;
}

.ai_mobile .bg-page-background {
  /* padding-left: 5px; */
  padding-top: 5px;
  /* padding-right: 5px; */
}

.ai_desktop .content {
  overflow-y: auto;
  height: calc(100vh - 220px);
  margin-bottom: -50px;
  padding-bottom: 60px;
}

.ai_mobile .content {
  overflow-y: auto;
  height: calc(100vh - 220px);
  margin-bottom: -50px;
  padding-bottom: 60px;
}

.ai_mobile {
  width: auto;
  height: calc(100vh - 120px);
  max-height: fit-content;
  border-radius: 0px;
  margin: 2px;
}

.aiChatbox {
  max-height: fit-content;
  margin-right: 15px;
  border-radius: 8px;
  padding: 8px;
  background-color: var(--color-surface-soft);
}

:root {
  --color-page-background2: #ff00ff;
}

.footerview {
  padding-right: 10px;
  margin-top: 10px;
  position: relative;
  z-index: 99999;
  background: linear-gradient(to top,
      color-mix(in srgb, var(--color-page-background) 95%, transparent) 0%,
      color-mix(in srgb, var(--color-page-background) 95%, transparent) 25%,
      color-mix(in srgb, var(--color-page-background) 95%, transparent) 80%,
      transparent 100%);
  border-radius: 8px;
}

.y4VEUd {
  width: 100%;
  padding: 8px;
  background: linear-gradient(to top,
      color-mix(in srgb, var(--color-page-background) 95%, transparent) 0%,
      color-mix(in srgb, var(--color-page-background) 95%, transparent) 25%,
      color-mix(in srgb, var(--color-page-background) 95%, transparent) 80%,
      transparent 100%);
}

.ai_mobile .ai-search-result-container {
  margin-right: 5px;
}

.ai_mobile .ai-header {
  width: 100%;
  padding-left: 8px;
  /* background: linear-gradient(to bottom,
 color-mix(in srgb, var(--color-page-background2) 95%, transparent) 0%,
  color-mix(in srgb, var(--color-page-background2) 95%, transparent) 25%,
  color-mix(in srgb, var(--color-page-background2) 60%, transparent) 60%,
  transparent 100%
              ); */
}

.rainbow-border {
  width: 100%;
  position: relative;
  padding: 1px;
  border-radius: 9999px;
  /* background: linear-gradient(90deg,
      red,
      orange,
      yellow,
      green,
      blue,
      indigo,
      violet,
      red); */
  background: var(--color-primary-light);
  background-size: 400% 400%;
  animation: moveBorder 10s linear infinite;
  display: inline-block;
}

.input-inner {
  width: 100%;
  outline: none;
  /* border-radius: 9999px;
  background: var(--color-page-background); */
  ;
}

@keyframes moveBorder {
  0% {
    background-position: 0% 50%;
  }

  100% {
    background-position: 400% 50%;
  }
}

.list-disc {
  margin-top: 10px;
}

.ai-header {
  display: flex;
  justify-content: space-between;
  /* đẩy tiêu đề trái, select sang phải */
  align-items: center;
}

#ai_model {
  background-color: var(--color-page-background);
  /* nền tối */
  color: var(--color-text-primary);
  /* chữ sáng */
  border: 1px solid var(--color-line-faint);
  border-radius: 0.5rem;
  /* bo tròn */
  padding: 0.35rem 0.75rem;
  font-size: 0.9rem;
  cursor: pointer;
  transition: all 0.2s ease-in-out;
  min-width: 110px;
  /* độ rộng tối thiểu để đẹp */
}

/* Hover */
#ai_model:hover {
  border-color: #6366f1;
  color: var(--color-text-primary);
}

/* Focus */
#ai_model:focus {
  outline: none;
  border-color: #818cf8;
  box-shadow: 0 0 0 2px rgba(129, 140, 248, 0.4);
}

/* Option */
#ai_model option {
  background-color: var(--color-page-background);
  color: var(--color-text-primary);
}

.ai-search-result-container {
  background-color: var(--color-surface-soft);
  color: var(--color-type);
  border-color: var(--color-border);
  border-color: var(--color-border);
  border-style: var(--tw-border-style);
  border-width: 1px;
  font-family: Arial, sans-serif;
  padding: 10px;
  border-radius: 8px;
  max-width: 800px;
  margin: auto;
  margin-right: 20px;
}

.ai-search-result-container hr {
  margin-bottom: 7px;
  margin-top: 7px;
}

.ai-search-result-container h4 {
  margin: 8px 0px 8px 0px;
  color: var(--color-type);
  font-size: var(--text-xl);
  line-height: var(--tw-leading, var(--text-xl--line-height));
  font-family: var(--font-sans);
  --tw-font-weight: var(--font-weight-bold);
  font-weight: var(--font-weight-bold);
}

.ai-search-result-container p {
  font-size: 15px;
  color: var(--color-type);
}

.ai-search-result-container ul li {
  background-color: var(--color-page-background);
  ;
  color: var(--color-type);
  padding: 10px;
  border-radius: 6px;
  margin-bottom: 12px;
}

.ai-search-result-container ul li a {
  color: var(--color-serp-title);
}


@media (max-width: 600px) {

  .ai-search-result-container h2 {
    font-size: 18px;
  }
}

:root {
  --size-2xs: 2px;
  --size-xs: 4px;
  --size-sm: 8px;
  --size-md: 16px;
  --size-ml: 24px;
  --size-lg: 32px;
  --size-xl: 48px;
}

.ml-10 {
  margin-left: 30px;
}


:before,
:after {
  box-sizing: border-box;
  border-width: 0;
  border-style: solid;
  border-color: oklch(var(--foreground-subtler-color));
}

:before,
:after {
  --tw-content: "";
}

a {
  color: inherit;
  text-decoration: inherit;
}

table {
  text-indent: 0;
  border-color: inherit;
  border-collapse: collapse;
}

:disabled {
  cursor: default;
}

* {
  scrollbar-color: initial;
  scrollbar-width: initial;
}


.prose :where(a):not(:where([class~=not-prose], [class~=not-prose] *)) {
  color: var(--tw-prose-links);
  text-decoration: none;
  font-weight: 500;
}

.prose :where(table):not(:where([class~=not-prose], [class~=not-prose] *)) {
  width: 100%;
  table-layout: auto;
  text-align: start;
  margin-top: 2em;
  margin-bottom: 2em;
  font-size: .875em;
  line-height: 1.7142857;
}

.prose :where(thead):not(:where([class~=not-prose], [class~=not-prose] *)) {
  border-bottom-width: 1px;
  border-bottom-color: var(--tw-prose-th-borders);
}

.prose :where(thead th):not(:where([class~=not-prose], [class~=not-prose] *)) {
  color: var(--tw-prose-headings);
  font-weight: 600;
  vertical-align: bottom;
  padding-inline-end: .5714286em;
  padding-bottom: .5714286em;
  padding-inline-start: .5714286em;
}

.prose :where(tbody tr):not(:where([class~=not-prose], [class~=not-prose] *)) {
  border-bottom-width: 1px;
  border-bottom-color: var(--tw-prose-td-borders);
}

.prose :where(tbody tr:last-child):not(:where([class~=not-prose], [class~=not-prose] *)) {
  border-bottom-width: 0;
}

.prose :where(tbody td):not(:where([class~=not-prose], [class~=not-prose] *)) {
  vertical-align: baseline;
}

.prose :where(thead th:first-child):not(:where([class~=not-prose], [class~=not-prose] *)) {
  padding-inline-start: 0;
}

.prose :where(thead th:last-child):not(:where([class~=not-prose], [class~=not-prose] *)) {
  padding-inline-end: 0;
}

.prose :where(tbody td, tfoot td):not(:where([class~=not-prose], [class~=not-prose] *)) {
  padding-top: .5714286em;
  padding-inline-end: .5714286em;
  padding-bottom: .5714286em;
  padding-inline-start: .5714286em;
}

.prose :where(tbody td:first-child, tfoot td:first-child):not(:where([class~=not-prose], [class~=not-prose] *)) {
  padding-inline-start: 0;
}

.prose :where(tbody td:last-child, tfoot td:last-child):not(:where([class~=not-prose], [class~=not-prose] *)) {
  padding-inline-end: 0;
}

.prose :where(th):not(:where([class~=not-prose], [class~=not-prose] *)) {
  font-weight: 550;
}

.relative {
  position: relative;
}

.my-\[1em\] {
  margin-top: 1em;
  margin-bottom: 1em;
}

.-mt-px {
  margin-top: -1px;
}


.mr-px {
  margin-right: 1px;
}

.inline-block {
  display: inline-block;
}

.inline {
  display: inline;
}

.min-w-4 {
  min-width: 1rem;
}

.min-w-\[48px\] {
  min-width: 48px;
}

.max-w-\[25ch\] {
  max-width: 25ch;
}

.table-auto {
  table-layout: auto;
}

.border-separate {
  border-collapse: separate;
}

.border-spacing-0 {
  --tw-border-spacing-x: 0px;
  --tw-border-spacing-y: 0px;
  border-spacing: var(--tw-border-spacing-x) var(--tw-border-spacing-y);
}

.cursor-pointer {
  cursor: pointer;
}

.select-none {
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}

.divide-subtlest>:not([hidden])~:not([hidden]) {
  border-color: oklch(var(--foreground-subtlest-color));
}

.overflow-hidden {
  overflow: hidden;
}

.whitespace-nowrap {
  white-space: nowrap;
}

.break-normal {
  overflow-wrap: normal;
  word-break: normal;
}

.rounded-badge {
  border-radius: .3125rem;
}

.border-b {
  border-bottom-width: 1px;
}

.border-l {
  border-left-width: 1px;
}

.border-r {
  border-right-width: 1px;
}

.border-t {
  border-top-width: 1px;
}

.border-subtler {
  border-color: oklch(var(--foreground-subtler-color));
}

.border-subtlest {
  border-color: oklch(var(--foreground-subtlest-color));
}

.bg-subtle {
  background-color: oklch(var(--background-subtle-color));
}

.bg-subtler {
  background-color: oklch(var(--background-subtler-color));
}

.p-sm {
  padding: var(--size-sm);
}

.px-\[0\.3rem\] {
  padding-left: .3rem;
  padding-right: .3rem;
}

.px-sm {
  padding-left: var(--size-sm);
  padding-right: var(--size-sm);
}

.py-\[0\.1875rem\] {
  padding-top: .1875rem;
  padding-bottom: .1875rem;
}

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

li::marker {
  content: none;
  /* xóa marker */
}

.text-center {
  text-align: center;
}

.align-top {
  vertical-align: top;
}

.align-middle {
  vertical-align: middle;
}

.text-3xs {
  font-size: 10px;
  line-height: .625rem;
}

.text-base {
  font-size: 1rem;
  line-height: 1.5rem;
}

.tabular-nums {
  --tw-numeric-spacing: tabular-nums;
  font-variant-numeric: var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction);
}

.leading-snug {
  line-height: 1.375;
}

.text-foreground {
  color: oklch(var(--foreground-color));
}

.opacity-50 {
  opacity: .5;
}

.ring-subtlest {
  --tw-ring-color: oklch(var(--foreground-subtlest-color));
}

[data-color-scheme=dark] .prose :where(a):not(:where([class~=not-prose], [class~=not-prose] *)) {
  font-weight: inherit;
}

:is(code, .font-mono),
:is(.ace_placeholder.ace_comment, .font-mono) {
  font-synthesis: none;
}

.prose .citation:before {
  content: " ";
}

.selection\:bg-super\/50 *::selection {
  background-color: oklch(var(--super-color) / .5);
}

.selection\:text-foreground *::selection {
  color: oklch(var(--foreground-color));
}

.selection\:bg-super\/50::selection {
  background-color: oklch(var(--super-color) / .5);
}

.selection\:text-foreground::selection {
  color: oklch(var(--foreground-color));
}


@media (max-width: 768px) {
  body {
    min-height: 120vh;
  }

  .rbb {
    border-bottom-width: 2px;
    padding-bottom: 5px;
  }

  .rbt {
    border-top-width: 2px;
  }
}

.hin_content {
  opacity: 0;
  transition: opacity 1s;
}

.footerview input {
  padding-left: 15px !important;
  padding-right: 5px !important;
  padding-top: 0px !important;
  padding-bottom: 5px !important;
  justify-content: center;
  display: flex;
}

code.language-json {
  display: block;
  background-color: var(--color-page-background);
  /* nền tối */
  color: var(--color-text-primary);
  /* chữ sáng */
  /* màu chữ chính */
  font-family: "Fira Code", "JetBrains Mono", monospace;
  font-size: 14px;
  line-height: 1.6;
  padding: 12px 16px;
  border-radius: 8px;
  overflow-x: auto;
  scrollbar-width: thin;
  border: 1px solid #313244;
  white-space: pre-wrap;
  word-break: break-word;
}

/* Scrollbar tuỳ biến */
code.language-json::-webkit-scrollbar {
  height: 8px;
}

code.language-json::-webkit-scrollbar-thumb {
  background: #45475a;
  border-radius: 4px;
}

code.language-json::-webkit-scrollbar-track {
  background: transparent;
}

/* Highlight key / value JSON */
code.language-json .string {
  color: #a6e3a1;
}

/* string */
code.language-json .number {
  color: #fab387;
}

/* số */
code.language-json .boolean {
  color: #89b4fa;
}

/* true/false */
code.language-json .null {
  color: #f38ba8;
}

/* null */
code.language-json .key {
  color: #f9e2af;
}

/* key */



.dot {
  fill: var(--color-type);
  transform-origin: 50% 50%;
  -webkit-transform-origin: 50% 50%;
  -webkit-animation: bouncedelay 1s infinite ease-in-out both;
  animation: bouncedelay 1s infinite ease-in-out both;
}

.dot-1 {
  -webkit-animation-delay: -.54s;
  animation-delay: -.54s
}

.dot-2 {
  -webkit-animation-delay: -.48s;
  animation-delay: -.48s
}

.dot-3 {
  -webkit-animation-delay: -.32s;
  animation-delay: -.32s
}

@-webkit-keyframes bouncedelay {

  0%,
  80%,
  100% {
    -webkit-transform: scale(0.8);
  }

  40% {
    -webkit-transform: scale(1);
  }
}

@keyframes bouncedelay {

  0%,
  80%,
  100% {
    transform: scale(0.8);
  }

  40% {
    transform: scale(1);
  }
}