* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'UTM Avo', sans-serif;
    /* background-color: #242222; */
    background-color: #f0f0f0;
    color: #333;
    height: 100vh;
    overflow: hidden;
}

/* Ẩn than cuộn */
.hidden-scroll {
    scrollbar-width: none;      /* Firefox */
    -ms-overflow-style: none;   /* IE, Edge cũ */
}

.hidden-scroll::-webkit-scrollbar { 
    width: 0 !important;
    display: none;              /* Chrome, Safari, Edge mới */
}


/* Chiều cao phần tử bằng screen view tuyệt đối */
.height-abs-full-screen {
  height: 100dvh;
  height: 100svh;    /* dùng trên Android Chrome mới */
  height: 100lvh;    /* logical viewport height (trình duyệt hiện đại) */
}

/* Chiều cao phần tử ít nhất bằng screen view */
.height-min-full-screen {
  height: 100dvh;
  height: 100svh;    /* dùng trên Android Chrome mới */
  height: 100lvh;    /* logical viewport height (trình duyệt hiện đại) */
}


/* Nhúng font Regular */
@font-face {
    font-family: 'UTM Avo';
    src: url('https://cdn.nexlify.vn/font/UTM Avo.ttf') format('truetype');
    font-weight: normal; /* 400 */
    font-style: normal;
}

/* Nhúng font Bold */
@font-face {
    font-family: 'UTM Avo';
    src: url('https://cdn.nexlify.vn/font/UTM AvoBold.ttf') format('truetype');
    font-weight: bold; /* 700 */
    font-style: normal;
}

/* Nhúng font Italic */
@font-face {
    font-family: 'UTM Avo';
    src: url('https://cdn.nexlify.vn/font/UTM AvoItalic.ttf') format('truetype');
    font-weight: normal; /* 400 */
    font-style: italic;
}

/* Nhúng font Bold Italic */
@font-face {
    font-family: 'UTM Avo';
    src: url('https://cdn.nexlify.vn/font/UTM AvoBold_Italic.ttf') format('truetype');
    font-weight: bold; /* 700 */
    font-style: italic;
}


/* Animation cho popup sử dụng tailwind */
@layer utilities {
  .animate-scaleIn {
    animation: scaleIn 0.18s cubic-bezier(.4,0,.2,1);
  }
}
@keyframes scaleIn {
  from { transform: scale(0.96); opacity: 0; }
  to   { transform: scale(1); opacity: 1; }
}


/* Sử dụng cho loading animation trong phần chatbot message */
.LOADING_THREE_DOT {
  width: 20px;
  aspect-ratio: 2;
  --_g: no-repeat radial-gradient(circle closest-side,#515151 90%,#0000);
  background: 
      var(--_g) 0%   50%,
      var(--_g) 50%  50%,
      var(--_g) 100% 50%;
  background-size: calc(100%/3) 50%;
  animation: l3 1s infinite linear;
  margin-left: 2px;
}
@keyframes l3 {
  20%{background-position:0%   0%, 50%  50%,100%  50%}
  40%{background-position:0% 100%, 50%   0%,100%  50%}
  60%{background-position:0%  50%, 50% 100%,100%   0%}
  80%{background-position:0%  50%, 50%  50%,100% 100%}
}


/* Sử dụng cho loading animation trong load trang */

.LOADING_PAGE {
  width: 50px;
  aspect-ratio: 1;
  display:grid;
  -webkit-mask: conic-gradient(from 15deg,#0000,#000);
  animation: l26 1s infinite steps(12);
}
.LOADING_PAGE,
.LOADING_PAGE:before,
.LOADING_PAGE:after{
  background:
    radial-gradient(closest-side at 50% 12.5%,
     #17365a 96%,#0000) 50% 0/20% 80% repeat-y,
    radial-gradient(closest-side at 12.5% 50%,
     #17365a 96%,#0000) 0 50%/80% 20% repeat-x;
}
.LOADING_PAGE:before,
.LOADING_PAGE:after {
  content: "";
  grid-area: 1/1;
  transform: rotate(30deg);
}
.LOADING_PAGE:after {
  transform: rotate(60deg);
}

@keyframes l26 {
  100% {transform:rotate(1turn)}
}