/* Reset styles for Bootstrap 5 */

/* Remove all margins and paddings */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

/* Reset body styles */
body {
  background-color: #fff;
  color: inherit;
  font-family: inherit;
  font-size: 100%;
  line-height: 1.5;
  margin: 0;
  overflow-x: hidden;
}

/* Reset headings */
h1, h2, h3, h4, h5, h6 {
  margin: 0;

}

.h1,
h1 {
  font-size: calc(1.375rem + 1.5vw);
}
@media (min-width: 1200px) {
  .h1,
  h1 {
    font-size: 2.5rem;
  }
}
.h2,
h2 {
  font-size: calc(1.325rem + 0.9vw);
}
@media (min-width: 1200px) {
  .h2,
  h2 {
    font-size: 2rem;
  }
}
.h3,
h3 {
  font-size: calc(1.3rem + 0.6vw);
}
@media (min-width: 1200px) {
  .h3,
  h3 {
    font-size: 1.75rem;
  }
}
.h4,
h4 {
  font-size: calc(1.275rem + 0.3vw);
}
@media (min-width: 1200px) {
  .h4,
  h4 {
    font-size: 1.5rem;
  }
}

/* Reset lists */
ul, ol {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Reset links */
a {
  text-decoration: none;
  color: inherit;
}

/* Reset images */
img {
  max-width: 100%;
  height: auto;
  border: 0;
}

/* Reset tables */
table {
  border-collapse: collapse;
  border-spacing: 0;
}

/* Reset buttons */
button {
  all: unset;
  cursor: pointer;
}

/* Reset forms */
input, textarea, select, button {
  font: inherit;
  color: inherit;
}

/* Reset fieldsets */
fieldset {
  border: 0;
  margin: 0;
  padding: 0;
}
/* Shadow */
.shadow {
  box-shadow: 0 .375rem 1.5rem 0 rgba(140,152,164,.125)!important
}

.shadow-sm {
  box-shadow: 0 .375rem .75rem rgba(140,152,164,.075)!important
}

.shadow-lg {
  box-shadow: 0 .6125rem 2.5rem .6125rem rgba(140,152,164,.175)!important
}

.shadow-none {
  box-shadow: none!important
}

.shadow-xl {
  box-shadow: 0 3.75rem 5rem 0 rgba(140,152,164,.3)!important
}

/* Spacing */

.pt-120 {
  padding-top: 120px;
}
.pb-120 {
  padding-bottom: 120px;
}
.p-120 {
  padding: 120px 0px;
}

.pt-64 {
  padding-top: 64px;
}
.pb-64 {
  padding-bottom: 64px;
}
.p-64 {
  padding: 64px 0px;
}

.pt-48 {
  padding-top: 48px;
}
.pb-48 {
  padding-bottom: 48px;
}
.p-48 {
  padding: 48px 0px;
}

@media (min-width: 576px) { 
}

@media (min-width: 768px) { 
}

@media (min-width: 992px) { 
  .pt-lg-120 {
    padding-top: 120px;
  }
  .pb-lg-120 {
    padding-bottom: 120px;
  }
  .p-lg-120 {
    padding: 120px 0px;
  }
  
  .pt-lg-64 {
    padding-top: 64px;
  }
  .pb-lg-64 {
    padding-bottom: 64px;
  }
  .p-lg-64 {
    padding: 64px 0px;
  }
  
  .pt-lg-48 {
    padding-top: 48px;
  }
  .pb-lg-48 {
    padding-bottom: 48px;
  }
  .p-lg-48 {
    padding: 48px 0px;
  }

}


/* Font size */
.fs-xs {
  font-size: 14px !important;

}
.fs-sm {
  font-size: 12px !important;

}
.fs-10 {
  font-size: 10px !important;

}


.bg-success {
  background-color:#10B981 !important ;
}

.bg-success-soft {
  background-color:#10b98121 !important ;
}

.bg-primary-soft {
  background-color:#82c2ff26 !important

}

.bg-warning-soft {
  background-color:#fdf39326 !important

}
.bg-info-soft {
 background-color: rgba(51, 74, 192, .1);

}

.bg-card-services-03 {
  background-color:#EDFFDB !important;

}
.bg-card-services-04 {
  background-color:#FFF2C9 !important;

}
.bg-card-services-05 {
  background-color:#FFDFDF !important;

}

/* ================== Content Templates ================== */


body {
font-family: "Inter", sans-serif;

}
::-webkit-scrollbar-track
{
	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
	background-color: #F5F5F5;
	border-radius: 10px;
}

::-webkit-scrollbar
{
	width: 10px;
	background-color: #F5F5F5;
}

::-webkit-scrollbar-thumb
{
	border-radius: 10px;
	background-image: -webkit-gradient(linear,
									   left bottom,
									   left top,
									   color-stop(0.44, rgb(0 83 255)),
									   color-stop(0.72, rgb(0 114 255)),
									   color-stop(0.86, rgb(0 120 255)));
}

.card-img-overlay {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  height: 100%;
}

/* ===== Button Back Top ===== */

.back-top a {
  position: relative;
  bottom: 70px;
  right: 0;
  border: 2px solid #10b981;
  background-color: #10b981;
  width: 40px;
  height: 40px;
  line-height: 40px;
  text-align: center;
  font-size: 24px;
  z-index: 100;
  color: #fff;
  opacity: 0;
  transition: all 0.9s linear 0s;
  border-radius: 10px;
  display: block;
  text-align: center;
  margin: auto;
}
.back-top a::after {
  z-index: -1;
  content: "";
  position: absolute;
  left: -2px;
  top: -2px;
  width: 40px;
  height: 40px;
  animation: ripple 1.6s ease-out infinite;
  opacity: 1;
  background-color: #08e79d;
  border-radius: 10px;
}
@-webkit-keyframes ripple {
  0% {
    transform: scale(0);
    opacity: 1;
  }
  100% {
    transform: scale(1.5);
    opacity: 0;
  }
}
.back-top {
 position: fixed;
 right: 16px;
 bottom: 0px;
 width: 80px;
 text-align: center;
 margin: auto;
}
.back-top.active a {
  opacity: 1;
}
.back-top a:hover {
  background-color: #10b981;
  border: 2px solid #10b981;
  color: #fff;
}


/* ================== Components =========================
 =======================================================
*/


.header-dark {
  position: fixed;
  left: 0;
  right: 0;
  z-index: 99999;
  background: transparent;
  transition: all 0.4s;
}
.header-dark .languages .dropdown-toggle a {
  color: #fff;
}

.header-dark .navbar-nav .nav-link {
  color: #ffffffbf;
  transition: all 0.4s;
  font-size: 15px;
}
.header-dark .navbar-nav .nav-link:hover {
  color: #ffffff;
  transition: all 0.4s;
}

.header-dark .navbar-nav .nav-link.active {
  color: #ffffff;
}
.header-dark-fix {
  background: #fff;
  box-shadow: 0 4px 30px rgba(0, 0, 0, .1);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
}

.header-dark-fix .navbar-toggler-icon, .navbar-toggler-icon::before, .navbar-toggler-icon::after {
  position: absolute;
  width: 1.375rem;
  height: .125rem;
  background-color: #000000;
  transition-property: transform;
  }

  .header-dark-fix .navbar-toggler-icon::before, .header-dark-fix .navbar-toggler-icon::after {
    background-color: #000000;
  }


.header-dark.header-dark-fix .navbar-nav .nav-link {
  color: #000000;
  transition: all 0.4s;
}
.header-dark.header-dark-fix .navbar-nav .nav-link:hover {

  color: #006CCF;
  transition: all 0.4s;
}
.header-dark.header-dark-fix .navbar-nav .nav-link.active {

  color: #006CCF;
  transition: all 0.4s;
}


.header-dark.header-dark-fix .languages .dropdown-toggle a {
  color: #000000;
}
@media (max-width: 667px) {
  .header-dark .navbar-nav .nav-link {
    color: #000000;
    transition: all 0.4s;
  }
  .header-dark .navbar-nav .nav-link:hover {
    color: #000000;
    transition: all 0.4s;
  }
 }



@media (min-width: 992px) {
 /* Ẩn header */
.header-hidden {
  transform: translateY(-100%);
}

/* Hiện header */
.header-visible {
  transform: translateY(0);
}


.mega-nav {
  width: 500px;
}

}

/* ================== Navbar ================== */
.dropdown-toggle::after {
  display: none;
}

@media (min-width: 992px) {
  .navbar-expand-lg .dropdown:hover>.dropdown-menu {
      display: block;
      animation: dropdown-show .25s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  }
}


@keyframes dropdown-show {
  from {
    opacity: 0;
    transform: scale(.9);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
.navbar {
  transition: transform 0.3s ease-in-out;

}
.logodark {
  display: none;
}
.logowhite {
  display: block;
}
.navbar-nav .nav-item {
  padding-right: 24px;
}

.navbar-nav .nav-link.show {
  color: #006CCF;
}

.navbar-toggler:focus {
  box-shadow: none;
}
.navbar-toggler {
  position: relative;
  width: 1.875rem;
  height: 2.25rem;
  border: 0;
  padding: 0;
  display: flex;
  justify-content: center;
}

.navbar-toggler-icon {
top: 50%;
display: block;
margin-top: -0.0625rem;
transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
transition-duration: .075s;
}

.navbar-toggler-icon {display: inline-block;width: 1.5em;height: 1.5em;vertical-align: middle;background-repeat: no-repeat;background-position: center;background-size: 100%;background-color: #ffffff;background-image: none;}

.navbar-toggler-icon::before {
top: -0.4375rem;
transition: top .075s .12s ease, opacity .075s ease, width .15s ease-in-out;
}
.navbar-toggler-icon::before, .navbar-toggler-icon::after {
display: block;
width: .9625rem;
content: "";
}
.navbar-toggler-icon, .navbar-toggler-icon::before, .navbar-toggler-icon::after {
position: absolute;
width: 1.375rem;
height: .125rem;
background-color: #ffffff;
transition-property: transform;
}

.navbar-toggler-icon::after {
right: 0;
bottom: -0.4375rem;
transition: bottom .075s .12s ease, transform .075s cubic-bezier(0.55, 0.055, 0.675, 0.19), width .15s ease-in-out;
}

.navbar-toggler-icon::before, .navbar-toggler-icon::after {display: block;width: .9625rem;content: "";background-color: #ffffff;}

.btn-close:focus {
  box-shadow: none;
}

.nav-link:focus, .nav-link:hover {
  color: #006CCF;
}



.theme-dark .nav-link:focus, .theme-dark .nav-link:hover {
  color: #ffffff;
}
.theme-dark .btn.dropdown-toggle {
color: #fff;
}


.flag-icon {
  width: 22px;
  height: 22px;
  object-fit: cover;
  margin-right: 6px;
}
.dropdown-item img {
  margin-right: 8px;
}


.dropdown-menu {
  border: 0;


}
.dropdown-menu.show {
  animation: dropdown-show .25s cubic-bezier(.68, -.55, .265, 1.55);

}
.btn.dropdown-toggle.show {
  border-color: #ccc;
}


@keyframes dropdown-show {
from {
  opacity: 0;
  transform: scale(.9);
}
to {
  opacity: 1;
  transform: scale(1);
}
}

@keyframes fade-in  {
from { opacity: 0; }
to { opacity: 1; }
}



/* Switch Dark Mode  */
.form-switch.mode-switch {
  display: flex;
  align-items: center;
  padding-left: 0;
  margin-bottom: 0;
}
.form-switch .form-check-input {
  height: 1.5rem;
  margin-top: unset;
  background-color: #006CCF;
  filter: none;
  border: unset;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='rgba%28255, 255, 255, 1%29'/%3e%3c/svg%3e");

}
.form-switch .form-check-input {
  width: 2.875em;
  margin-left: -3.375em;
  background-position: left center;
  border-radius: 2.875em;
  transition: background-position .15s ease-in-out;
}
.form-switch.mode-switch .form-check-input {
  order: 2;
  margin-left: 0;

}
.form-check-input:focus {
  border-color: #86b7fe;
  outline: 0;
  box-shadow: 0 0 0 0rem rgba(13, 110, 253, 0.25);
}
.form-switch.mode-switch .form-check-label:first-of-type {
  order: 1;
  margin-right: .625rem;
  line-height: 17px;
}
.form-switch.mode-switch .form-check-label:last-of-type {
  order: 3;
  margin-left: .625rem;
  line-height: 17px;
}



/* ================== Buttons ================== */

.btn-icon .fa-arrow-right {
  display: inline-block;             /* Cho phép transform hoạt động chính xác */
  transition: transform 0.3s ease;    /* Thời gian và kiểu chuyển động :contentReference[oaicite:3]{index=3} */
}

/* Khi hover lên button, di chuyển icon 5px sang phải */
.btn-icon:hover .fa-arrow-right {
  transform: translateX(5px);        /* Dịch chuyển trên trục X :contentReference[oaicite:4]{index=4} */
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  padding:0.825rem 1.75rem ;
  font-size: 0.875rem;
}


.btn-lg {
  padding: 1rem 2rem;
  font-size: 1rem;

}

.btn-sm {
  padding:0.575rem 1.25rem ;
  font-size: 0.75rem;

}
.btn-primary {
  background-color: #006ccf;
  border: 2px solid #006ccf;
}

.btn-primary:hover {
  background-color: #006ccf;

  box-shadow: 0 6px 12px #006bcf67;

}

.btn-secondary {
  background-color: #51596C;
  border: 2px solid #51596C;
}

.btn-secondary:hover {
  background-color: #51596C;
  border: 2px solid #51596C;
  box-shadow: 0 6px 12px #51596c6f;

}

.btn-success {
  background-color: #077C76;
  border: 2px solid #077C76;
}

.btn-success:hover {
  background-color: #077C76;
  border: 2px solid #077C76;
  box-shadow: 0 6px 12px #077c766d;

}
.btn-danger {
  background-color: #692340;
  border: 2px solid #692340;
}

.btn-danger:hover {
  background-color: #692340;
  border: 2px solid #692340;
  box-shadow: 0 6px 12px #69234073;

}

.btn-warning {
  background-color: #eaa81b;
  border: 2px solid #eaa81b;
}

.btn-warning:hover {
  background-color: #eaa81b;
  border: 2px solid #eaa81b;
  box-shadow: 0 6px 12px #eaa81b83;

}

.btn-info {
  color: #fff;
  background-color: #334AC0;
  border: 2px solid #334AC0;
}

.btn-info:hover {
  color: #fff;
  background-color: #334AC0;
  border: 2px solid #334AC0;
  box-shadow: 0 6px 12px #334bc075;

}

.btn-light {
  color: #212121;
  background-color: #F9FAFC;
  border: 2px solid #F9FAFC;
}

.btn-light:hover {
  color: #212121;
  background-color: #F9FAFC;
  border: 2px solid #F9FAFC;
  box-shadow: 0 6px 12px #7e7e7e3b;

}
.btn-dark {
  color: #ffffff;
  background-color: #00221C;
  border: 2px solid #00221C;
}

.btn-dark:hover {
  color: #ffffff;
  background-color: #00221C;
  border: 2px solid #00221C;
  box-shadow: 0 6px 12px #00221c5e;

}


.btn-outline-primary {
  border: 2px solid #006ccf;
  color: #006ccf;
}
.btn-outline-primary:hover {
  background-color: #006ccf !important;
  border: 2px solid #006ccf !important;
  color: #ffffff !important;
}
.btn-outline-light {
  border: 2px solid #F9FAFC;
  color: #111111;
}
.btn-outline-light:hover {
  background-color: #F9FAFC;
  border: 2px solid #F9FAFC;
  color: #111111;
}

.btn-soft-primary {
    color: #006ccf;
    background-color: #006bcf26;
    border-color: transparent
}
.btn-soft-secondary {
    color: #51596c;
    background-color: rgba(81,89,108,.1);
    border-color: transparent
}
.btn-soft-success {
    color: #077c76;
    background-color: rgba(7,124,118,.1);
    border-color: transparent
}
.btn-soft-danger {
    color: #692340;
    background-color: rgba(105,35,64,.1);
    border-color: transparent
}
.btn-soft-warning {
    color: #f1b980;
    background-color: rgba(241,185,128,.1);
    border-color: transparent
}
.btn-soft-info {
    color: #334ac0;
    background-color: rgba(51, 74, 192, .1);
    border-color: transparent;
}
.btn-soft-light {
    color: #0e0e0e;
     background-color: #F9FAFC;
    border-color: transparent;
}
.btn-soft-dark {
    color: #00221c;
    background-color: rgba(0, 34, 28, .1);
    border-color: transparent;
}

/* Card */
#articles-container .card-body {
  
    max-height: 280px;
}

.card-hover-primary {
  transition: all 0.4s;

}
.card-hover-primary:hover {

background-color: #DFEEFF !important;

border-color: #DFEEFF;

cursor: pointer;

color: #212121;
}
.card-hover-primary:hover .card-title h4 {
color: #006ccf;
}

.card-hover-primary:hover .card-title p {
  color: #05274C;
  }

.hover-card-pricing {
  transition: all 0.4s;
  border-width: 2px;
  border-style: solid;
  border-image: linear-gradient(to bottom, rgb(255 255 255 / 0%), rgba(255, 255, 255, 0)) 1;
}


.hover-card-pricing:hover {
  border-width: 2px;
    border-style: solid;
    border-image: linear-gradient(to bottom, rgb(0 126 255 / 48%), rgba(0, 0, 0, 0)) 1;
    cursor: pointer;

}



.line-about {
  height: 100%;
}

.vr {
  width: 2px;
  min-height: 2px;
  background: #56CCF2;
  background: -webkit-linear-gradient(to right, #2F80ED, #56CCF2);
  background: linear-gradient(to right, #b6d5ff00, #7daef94f);
  opacity: 1;
}

.border-gradient {

border-width: 2px; /* Độ rộng viền */

border-style: solid; /* Kiểu viền */

border-image: linear-gradient(to bottom, rgb(0 126 255 / 48%), rgba(0, 0, 0, 0)) 1; /* Áp dụng gradient */
}



/* // Flip effect */

.card-flip {
  display: block;
  height: 100%;
  text-decoration: none;
  background-color: transparent;
  border: 0;
  border-radius: 0;
  perspective: 1000px;
}

.card-flip-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transition: transform .5s ease-in-out;
  transform-style: preserve-3d;
}

.card-flip-front,
.card-flip-back {
  height: 100%;
  padding: 10px;
  backface-visibility: hidden;
  transform: rotateX(0deg);
}
.card-flip-front {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  background-size: cover;
  
}

.card-flip-back {
  position: relative;
  background-color: #ccc;
  transform: rotateY(180deg);
}

.card-flip:hover {
  .card-flip-inner {
    transform: rotateY(180deg);
  }
}


/* Accordion */

.accordion {
  box-shadow: 0 .375rem 1.5rem 0 rgba(140,152,164,.125)
}

.accordion-item {
  border: none;
  background: #EDF8FF;
}
.accordion-button {
  font-weight: 600;
}
.accordion-button:not(.collapsed) {
  box-shadow:none;
  background: #EDF8FF;
  color: #006CCF;
}
/* Alerts */
.alert-primary {
    color: #fff;
    background-color: #006ccf;
    border-color: #006ccf;
}
.alert-secondary {
    color: #fff;
    background-color: #51596c;
    border-color: #51596c
}
.alert-success {
    color: #fff;
    background-color: #077c76;
    border-color: #077c76
}


.alert-info {
    color: #fff;
    background-color: #334ac0;
    border-color: #334ac0
}


.alert-warning {
    color: #000;
    background-color: #f1b980;
    border-color: #f1b980
}



.alert-danger {
    color: #fff;
    background-color: #692340;
    border-color: #692340
}



.alert-light {
    color: #000;
    background-color: #f9fafc;
    border-color: #f9fafc
}


.alert-dark {
    color: #fff;
    background-color: #00221c;
    border-color: #00221c
}


.alert-soft-primary {
    color: #006ccf;
    background-color: #006ccf29;
}

.alert-soft-secondary {
    color: #51596c;
    background-color: rgba(81,89,108,.15)
}



.alert-soft-success {
    color: #077c76;
    background-color: rgba(7,124,118,.15)
}



.alert-soft-info {
    color: #334ac0;
    background-color: rgba(51,74,192,.15)
}


.alert-soft-warning {
    color: #f1b980;
    background-color: rgba(241,185,128,.15)
}

.alert-soft-danger {
    color: #692340;
    background-color: rgba(105,35,64,.15)
}

.alert-soft-light {
    color: #646464;
    background-color: rgba(249,250,252,.15)
}


.alert-soft-dark {
    color: #00221c;
    background-color: rgba(0,34,28,.15)
}




.badge {
  padding: 8px 14px;
  box-shadow: none;
  font-weight: 600;
}

.text-bg-primary {
  background-color: #006CCF !important;
}


/* Tabs */

.nav-tab-products button.nav-link {
  background-color: #cccccc17;
  padding: 24px 20px;
  color: #212121;
  display: flex;
  align-items: center;
  
}
.nav-tab-products .nav-link.active {
  background-color: #EFF7FF;
  color: #006ccf;
  padding: 24px 20px;
  }

.scroll-wrapper
{
  min-height: 100% !important;
}

/* Áp dụng cho màn hình nhỏ (xs) */
@media (max-width: 576px) {
     /* 1. Ẩn scrollbar cho Chrome, Safari, Edge mới */
     .scroll-container::-webkit-scrollbar {
      display: none; /* :contentReference[oaicite:0]{index=0} */
    }
    /* 2. Ẩn scrollbar cho Firefox */
    .scroll-container {
      scrollbar-width: none; /* :contentReference[oaicite:1]{index=1} */
      overflow-x: auto;
      scroll-behavior: smooth;
      -webkit-overflow-scrolling: touch;
    }
    /* 3. Wrapper để đặt nút mũi tên */
    .scroll-wrapper {
      position: relative;
    }
    .scroll-btn {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      z-index: 10;
      background: rgba(255, 255, 255, 0.8);
      border: none;
      width: 32px; height: 32px;
      border-radius: 50%;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1.25rem;
      line-height: 1;
    }
    .scroll-btn:disabled {
      opacity: 0.4;
      cursor: default;
    }
    .left-btn  { 
      left: 5px; 
      display: flex !important;
    }
    .right-btn { 
      right: 5px; 
      display: flex !important;
    }
    /* 4. Đảm bảo nav-item không co lại */
    .scroll-container .nav-item {
      flex: 0 0 auto;
      display: inline-block;
      float: none;
    }

    .nav.nav-pills .nav-item {
      width: 100%;
    }

 .overlay-scroll-tabs   {
      position: absolute;
      width: 30px;
      height: 100%;
      top: 0;
      right: 0;
      background-image: linear-gradient(to right, rgba(255, 255, 255, 0) 0, #fff 50%);
      display: block !important;
  }
  .heading-custom {
    font-size: 18px;
    line-height: 26px;
  }
  
}
.left-btn  { 
  display: none;
 }
    .right-btn { 
      display: none;
    }
   
    .overlay-scroll-tabs {
      display: none;
    }
    @media (max-width: 767.98px) {
      .cards-wrapper {
        display: flex;
        flex-wrap: nowrap;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        gap: 1rem;
        padding-bottom: 1rem;
        scroll-padding-left: 1rem;
        position: relative;
      }
    
      .cards-wrapper::-webkit-scrollbar {
        display: none; /* Ẩn scrollbar trên Chrome, Safari */
      }
      .cards-wrapper {
        -ms-overflow-style: none; /* IE và Edge */
        scrollbar-width: none; /* Firefox */
      }
    
      .cards-wrapper .card {
        flex: 0 0 80%;
        min-width: 300px;
        scroll-snap-align: center;
        scroll-snap-stop: always;
      }
      .overlay-card-blog {
        position: absolute;
        top: 0;
        right: 0;
        width: 100px;
        background-image: linear-gradient(to right, rgba(255, 255, 255, 0) 0, #ffffffc7 50%);
        height: 100%;
        display: block !important;

      }
    
      /* Style cho nút mũi tên */
      .scroll-button {
        position: absolute;
        top: 40%;
        transform: translateY(-50%);
        background: rgba(255,255,255,0.8);
        border: none;
        padding: 8px 10px;
        border-radius: 50%;
        box-shadow: 0 2px 8px rgba(0,0,0,0.2);
        z-index: 10;
      }
      .scroll-button.left {
        left: -10px;
      }
      .scroll-button.right {
        right: -10px;
      }
    }
    

    .overlay-card-blog {
      display: none;
    }

/* ================== Pages ============================
 =======================================================
*/

.hero-page {
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  min-height: 800px;
}

.bg-hero-tms {
  background: url(/assets-v2/images/bg-hero-track-tms.png);
 
}
.bg-hero-track-tms {
  background: url(/assets-v2/images/bg-hero-track-tms1.jpg);
}

.bg-hero-map-api {
  background-image: url(/assets-v2/images/bg-hero-map-api.jpg);
}

.bg-hero-news
{
  background: url(/assets-v2/images/bg-hero-news.png);
}

.bg-services {
  background: url(/assets-v2/images/bg-hero-dichvu.png);
}


.bg-hero-contact
{
  background: url(/assets-v2/images/bg-hero-contact.png);
}

.text-slide {
  position: relative;
  z-index: 1;
}

.bg-hero-company
{
  background: url(/assets-v2/images/bg-hero-company.png);
  background-repeat: no-repeat;
  background-position: center;


}

.bg-hero-bang-gia
{
  background: url(/assets-v2/images/bg-hero-bang-gia.png);
  background-repeat: no-repeat;
  background-position: center;


}



.bg-hero-affiliate
{
  background: url(/assets-v2/images/bg-hero-lien-ket.png);
  background-repeat: no-repeat;
  background-position: center;


}
.bg-hero-support-center
{
  background-color: #000000;


}
.bg-hero-content-update
{
  background: url(/assets-v2/images/bg-hero-content-update.png);
  background-repeat: no-repeat;
  background-position: center;


}

.img-bg-company {
  background: url(/assets-v2/images/img-about-us.png);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  min-height: 500px;
  background-attachment: fixed;
}

.cta-trackasia-tms {
  background: url(/assets-v2/images/bg-cta-trackasia-tms.png);
  background-repeat: no-repeat;

  background-position: top;
  min-height: 400px;
  background-attachment: fixed;
}

.download-app {
  background: url(/assets-v2/images/bg-down-app.png);
  background-repeat: no-repeat;

  background-position: center;
  min-height: 400px;
  background-attachment: fixed;
}

/* Hero  */

.hero {
  background: url(/assets-v2/images/bg-hero-2.png);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  min-height: 900px;
  background-attachment: fixed;
}


.hero-sing {
  background: url(/assets-v2/images/img-hero-sing.png);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  min-height: 900px;
  background-attachment: fixed;
}

.hero-thai {
  background: url(/assets-v2/images/img-hero-thai.png);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  min-height: 900px;
  background-attachment: fixed;
}

.badge-hero {
  background-color: #ccc;
  display: inline-block;
  border-radius: 8px;
}

.btn-hero {
  font-size: 18px;
  font-weight: 600;
  padding: 14px 48px;
  background-color: #10b981;
  border: 1px solid #10b981;

}
.btn-hero .fa-arrow-right {
  display: inline-block;             /* Cho phép transform hoạt động chính xác */
  transition: transform 0.3s ease;    /* Thời gian và kiểu chuyển động :contentReference[oaicite:3]{index=3} */
}

/* Khi hover lên button, di chuyển icon 5px sang phải */
.btn-hero:hover .fa-arrow-right {
  transform: translateX(5px);        /* Dịch chuyển trên trục X :contentReference[oaicite:4]{index=4} */
}

.btn-hero:hover {
  background-color: #34d399;
  box-shadow: 0 6px 12px rgb(10 177 136 / 91%);
  border: 1px solid #34d399;
}
.btn-hero:active {
  background-color: #34d399 !important;
  box-shadow: 0 6px 12px rgb(10 177 136 / 91%);
}
.btn-hero:focus-visible {
  background-color: #34d399 !important;
  box-shadow: 0 6px 12px rgb(10 177 136 / 91%);
}

.effect-glass {
  background: #6ea6f914;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  color: #fff;
}

.effect-glass1 {
  background-image: linear-gradient(to top, #ffffff00, #18274575, #172744b8);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  color: #fff;
}

/* About Us  */

.text-gradient {
  background: #56CCF2;  /* fallback for old browsers */
  background: -webkit-linear-gradient(to right, #2F80ED, #56CCF2);  /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(to right, #2F80ED, #56CCF2); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.arrow {
  position: absolute;
  top: 500px;
  left: 50%;
  transform: translate(-50%, -50%);
  transform: rotate(0deg);
  cursor: pointer;
}

.arrow span {
  display: block;
  width: 30px;
  height: 30px;
  border-bottom: 5px solid white;
  border-right: 5px solid white;
  transform: rotate(45deg);
  margin: -10px;
  animation: animate 2s infinite;
}

.arrow span:nth-child(2) {
  animation-delay: -0.2s;
}

.arrow span:nth-child(3) {
  animation-delay: -0.4s;
}

@keyframes animate {
  0% {
      opacity: 0;
      transform: rotate(45deg) translate(-20px, -20px);
  }
  50% {
      opacity: 1;
  }
  100% {
      opacity: 0;
      transform: rotate(45deg) translate(20px, 20px);
  }
}

.map-solution {

  position: relative; /* Để giới hạn sticky trong phạm vi phần tử cha */
}

.img-map {
  position: sticky;
  position: -webkit-sticky;
  top: 20px; /* Khoảng cách từ trên cùng của trang */
}


.map-services  {
  background-image: url(/assets-v2/images/bg-api-services.png);
  background-repeat: no-repeat;
  background-size: cover;
}

.table {
  width: 100%;
  margin-bottom: 1rem;
  vertical-align: top;
  border-color: #dee2e670; /* Màu viền bảng */
  background-color: #ffffff00; /* Màu nền bảng */
  color: #212529; /* Màu chữ */
}

.table > :not(caption) > * > * {
  padding: 0.5rem 0.5rem;
  color: #212529; /* Màu chữ bên trong bảng */
  background-color: #ffffff00; /* Màu nền các ô */
  border-bottom: 1px solid #83bcf51a; /* Đường viền giữa các ô */
  box-shadow: inset 0 0 0 9999px transparent; /* Không dùng hiệu ứng */
}

.border-gradient-full {
  border: 2px solid #0852a6;
  border-radius: 10px;
}


.footer {
  background: url(/assets-v2/images/bg-footer.png);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}

.shape-container {
  position: relative;
}

.shape-bottom {
  bottom: 0;
  left: 0;
  right: 0;
}
.shape {
  position: absolute;
  z-index: -1;
}


/*===== Preloader =====*/

.spinner-wrapper {
  position: fixed;
  z-index: 999999;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: #fff;
}
.spinner {
  display: block;
  height: 40px;
  text-align: center;
  font-size: 10px;
}
.spinner > div {
  height: 100%;
  width: 6px;
  display: inline-block;
  -webkit-animation: sk-stretchdelay 1.2s infinite ease-in-out;
  animation: sk-stretchdelay 1.2s infinite ease-in-out;
  background: #006CCF;
}
.spinner .rect2 {
  -webkit-animation-delay: -1.1s;
  animation-delay: -1.1s;
}
.spinner .rect3 {
  -webkit-animation-delay: -1.0s;
  animation-delay: -1.0s;
}
.spinner .rect4 {
  -webkit-animation-delay: -0.9s;
  animation-delay: -0.9s;
}
.spinner .rect5 {
  -webkit-animation-delay: -0.8s;
  animation-delay: -0.8s;
}
@-webkit-keyframes sk-stretchdelay {
  0%, 40%, 100% {
    -webkit-transform: scaleY(0.4)
  }
  20% {
    -webkit-transform: scaleY(1.0)
  }
}
@keyframes sk-stretchdelay {
  0%, 40%, 100% {
    transform: scaleY(0.4);
    -webkit-transform: scaleY(0.4);
  }
  20% {
    transform: scaleY(1.0);
    -webkit-transform: scaleY(1.0);
  }
}


.water-round-container {
  margin: 0 auto;
  overflow: hidden;
  position: relative;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  border: 0px solid #c0c0c000;
  text-align: center;
  line-height: 50px;
  animation: water-waves linear infinite;
  top: 0;
  left: 0;
  opacity: 1;
}
.water-wave1 {
  position: absolute;
  top: 40%;
  left: -25%;
  background: #006ccf3d;
  opacity: 0.7;
  width: 200%;
  height: 200%;
  border-radius: 40%;
  animation: inherit;
  animation-duration: 5s;
}

.water-wave2 {
  position: absolute;
  top: 45%;
  left: -35%;
  background: #e9f8ff;
  opacity: 0.5;
  width: 200%;
  height: 200%;
  border-radius: 35%;
  animation: inherit;
  animation-duration: 7s;
}

.water-wave3 {
  position: absolute;
  top: 50%;
  left: -35%;
  background: #f0f6fc;
  opacity: 0.3;
  width: 200%;
  height: 200%;
  border-radius: 33%;
  animation: inherit;
  animation-duration: 11s;
}

@keyframes water-waves {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}


/* Glitch style */
.glitch {
  position: relative;
  padding: 0px 3px;
  outline: 0px;
  overflow: hidden;
  cursor: pointer;
  z-index: 0;
}

.glitch::before,
.glitch::after {
  position: absolute;
  top: 0;
  left: 0;
  content: attr(data-text);
  width: 100%;
  height: 100%;
  opacity: 0;
  overflow: hidden;
  animation-duration: 1000ms;
  animation-delay: 0ms;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-direction: alternate-reverse;
  z-index: 1;
}

.glitch::before {
  padding-right: 2px;
  text-shadow: -2px 0 red;
  animation-name: glitch-animation-red;
  height: 150%;
}

.glitch::after {
  padding-left: 2px;
  text-shadow: 2px 0 #2000ff;
  animation-name: glitch-animation-blue;
}

.glitch:hover::before {
  animation-name: glitch-animation-red;
}

.glitch:hover::after {
  animation-name: glitch-animation-blue;
}

@keyframes glitch-animation-blue {
  0% {
    opacity: 1;
    clip-path: inset(20% 0% 50% 0%);
  }
  20% {
    opacity: 1;
    clip-path: inset(10% 0% 60% 0%);
  }
  40% {
    opacity: 1;
    clip-path: inset(30% 0% 40% 0%);
  }
  60% {
    opacity: 1;
    clip-path: inset(25% 0% 55% 0%);
  }
  80% {
    opacity: 1;
    clip-path: inset(15% 0% 45% 0%);
  }
  100% {
    opacity: 1;
    clip-path: inset(20% 0% 50% 0%);
  }
}

@keyframes glitch-animation-red {
  0% {
    opacity: 1;
    clip-path: inset(25% 0% 45% 0%);
  }
  20% {
    opacity: 1;
    clip-path: inset(15% 0% 55% 0%);
  }
  40% {
    opacity: 1;
    clip-path: inset(35% 0% 35% 0%);
  }
  60% {
    opacity: 1;
    clip-path: inset(30% 0% 50% 0%);
  }
  80% {
    opacity: 1;
    clip-path: inset(20% 0% 40% 0%);
  }
  100% {
    opacity: 1;
    clip-path: inset(25% 0% 45% 0%);
  }
}




/* Parallax */
/* -------------------------------------------------- */

/* Background image / video parallax based on https://github.com/nk-o/jarallax */

.jarallax {
  position: relative;
  z-index: 0;
}
.jarallax .jarallax-img {
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  background-position: center;
  background-size: cover;
}

/* Disable element parallax on different breakpoints */

[data-disable-parallax-down="xs"] {
  opacity: 1 !important;
  transform: none !important;
}
@media (max-width: 575.98px) {
  [data-disable-parallax-down="xs"] {
    opacity: 1 !important;
    transform: none !important;
  }
}
@media (max-width: 767.98px) {
  [data-disable-parallax-down="sm"] {
    opacity: 1 !important;
    transform: none !important;
  }
}
@media (max-width: 991.98px) {
  [data-disable-parallax-down="md"] {
    opacity: 1 !important;
    transform: none !important;
  }
}
@media (max-width: 1199.98px) {
  [data-disable-parallax-down="lg"] {
    opacity: 1 !important;
    transform: none !important;
  }
}
@media (min-width: 576px) {
  [data-disable-parallax-up="sm"] {
    opacity: 1 !important;
    transform: none !important;
  }
}
@media (min-width: 768px) {
  [data-disable-parallax-up="md"] {
    opacity: 1 !important;
    transform: none !important;
  }
}
@media (min-width: 992px) {
  [data-disable-parallax-up="lg"] {
    opacity: 1 !important;
    transform: none !important;
  }
}
@media (min-width: 1200px) {
  [data-disable-parallax-up="xl"] {
    opacity: 1 !important;
    transform: none !important;
  }
}


.dropdown-item.active, .dropdown-item:active {
  background-color: #ffffff00;
  color: #006ccf;
}

.bg-hero-solution {
  display: inline;
}

@media screen and (min-width: 992px) {
  .connections-section-container {
      display:grid;
      grid-template-columns: 1fr 1fr;
  }

  .orbit-container {
      min-height: 516px;
  }

  .ring-1 {
      height: 205px;
      width: 205px;
  }

  .ring-2 {
      height: 315px;
      width: 315px;
  }

  .ring-3 {
      height: 425px;
      width: 425px;
  }
}

.connections-section-container {
  display:grid;
  grid-template-columns: 1fr 1fr;
}

.orbit-container {
  min-height: 516px;
}

.ring-1 {
  height: 205px;
  width: 205px;
}

.ring-2 {
  height: 315px;
  width: 315px;
}

.ring-3 {
  height: 425px;
  width: 425px;
}

.middle-icon {
  display: flex;
  text-align: center;
  width: 64px;
  height: 64px;
  background: #fff;
  border: 1px solid #93cff4;
  box-shadow: 0 100px 80px rgba(139,197,255,.07),0 64.8148px 46.8519px rgba(139,197,255,.053),0 38.5185px 25.4815px rgba(139,197,255,.043),0 20px 13px rgba(139,197,255,.035),0 8.14815px 6.51852px rgba(139,197,255,.027),0 3px 11px rgba(139,197,255,.29);
  /* padding: 12px 16px; */
  position: absolute;
  z-index: 4;
}

.middle-icon img {
  text-align: center;
  margin: auto;
  width: 48px;
}

.ring-1 {
  box-shadow: 0 4px 37px rgba(73,175,239,.36);
  height: 150px;
  width: 150px;
  z-index: 3;
}

.ring-1,.ring-2 {
  background: #e9f7ff;
  position: absolute;
}

.ring-2 {
  box-shadow: 0 0 50px rgba(147,207,244,.66);
  height: 230px;
  width: 230px;
  z-index: 2;
}

.ring-3 {
  background: #f4fbff;
  box-shadow: 0 0 75px rgba(73,175,239,.19);
  height: 300px;
  position: absolute;
  width: 300px;
  z-index: 1;
}

.middle-icon,.ring-1,.ring-2,.ring-3 {
  border-radius: 50%;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
}

.icon-container-1 {
  height: 190px;
  left: 50%;
  margin-left: -20px;
  position: absolute;
  top: -15px;
  width: 40px;
}

.icon-content {
  align-items: center;
  background: #fff;
  border: 1px solid #93cff4;
  border-radius: 50%;
  box-shadow: 0 100px 80px rgba(139,197,255,.07),0 64.8148px 46.8519px rgba(139,197,255,.053),0 38.5185px 25.4815px rgba(139,197,255,.043),0 20px 13px rgba(139,197,255,.035),0 8.14815px 6.51852px rgba(139,197,255,.027),0 3px 11px rgba(139,197,255,.29);
  display: flex;
  height: 55px;
  justify-content: center;
  padding: 12px;
  width: 55px;
}

.icon-content img {
  height: 24px;
  width: 24px;
}

.icon-container-2 {
  height: 270px;
  left: 50%;
  margin-left: -20px;
  position: absolute;
  top: -25px;
  width: 40px;
}

.icon-container-2:before {
  background: #fff;
  border: 1px solid #93cff4;
  border-radius: 50%;
  box-shadow: 0 100px 80px rgba(139,197,255,.07),0 64.8148px 46.8519px rgba(139,197,255,.053),0 38.5185px 25.4815px rgba(139,197,255,.043),0 20px 13px rgba(139,197,255,.035),0 8.14815px 6.51852px rgba(139,197,255,.027),0 3px 11px rgba(139,197,255,.29);
  display: block;
  height: 64px;
  width: 64px;
}

.orbit-container {
  align-items: center;
  display: flex;
;
  flex: 1;
  justify-content: center;
  position: relative;
}

.icon--1 {
  animation: rotateCounterClockwise 25s linear infinite;
}

.icon--1-counter-rotate {
  animation: rotateClockwise 25s linear infinite;
}

.icon--2 {
  animation: rotateClockwise 20s linear infinite;
}

.icon--2-counter-rotate {
  animation: rotateCounterClockwise 20s linear infinite;
}

.icon--3 {
  animation: rotateCounterClockwise 21s linear infinite;
}

.icon--3-counter-rotate {
  animation: rotateClockwise 21s linear infinite;
}

@keyframes rotateClockwise {
  to {
      transform: rotate(1turn);
  }
}

@keyframes rotateCounterClockwise {
  to {
      transform: rotate(-1turn);
  }
}

@keyframes fadeIn {
  to {
      transform: rotate(1turn);
  }
}

@keyframes fadeOut {
  to {
      opacity: rotate(1turn);
  }
}

.custom-submit-link {
  all: unset;
  display: block;
  width: 100%;
  background-color: #007bff;
  color: white;
  padding: 12px 0px;
  border: none;
  border-radius: 4px;
  font-size: 16px;
  font-weight: bold;
  text-align: center;
  cursor: pointer;
}

.custom-submit-link:hover {
  background-color: #0b5ed7;
  border-color: #0a58ca;
}

.custom-submit-link:active {
  background-color: #0a58ca;
  border-color: #0a53be;
}

/* apply trong bài viết: "Hướng dẫn đăng ký và tích hợp TrackAsia Map vào website hay ứng dụng của bạn"  */
.article-hight-light {
  font-weight: bold;
}
.article-underline {
  text-decoration: underline;
}
/* end  */
.scroll-menu {
  display: flex;
  overflow-x: auto;
  white-space: nowrap;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none; /* Ẩn scrollbar trên Firefox */
}

@media (max-width: 991px) { 
  .scroll-menu {
    display: flex;
    overflow-x: auto;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none; /* Ẩn scrollbar trên Firefox */
  }
  .scroll-menu::-webkit-scrollbar {
    display: none; /* Ẩn scrollbar trên Chrome, Safari */
  }
}


.chat-center {
  position: fixed;
  right: 16px;
  bottom: 140px;
  width: 80px;
  text-align: center;
}

.chat-center img {
  background: hsla(0, 0%, 100%, .2);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);

  border-radius: 100px;
}



.chat-center a:hover{
  cursor: pointer;
}

.track-ai {
 
position: relative;
 
width: 100%;
 
margin: auto;
 
text-align: center;
 
background: hsla(0, 0%, 100%, .2);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
   
 
border-radius: 12px;
height: 100%;
}
.track-ai video {
  width: 42px;
  height: 42px;
}

.spinner-wrap {
  position: relative;
  width: 42px;
  height: 42px;
  margin: auto;
}

.spinner-item {
  /* background: red; */ /* Uncomment nếu cần */
  border: 1px solid rgb(0, 17, 255);
  border-radius: 50%;
  height: 48px;
  width: 48px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  opacity: 0;
  animation: zoom 2s linear 0.75s infinite;
}

.spinner-item--2 {
  animation-delay: 1.25s;
}

.spinner-item--3 {
  animation-delay: 1.75s;
}

@keyframes zoom {
  0% {
    transform: translate(-50%, -50%) scale(0.2);
    opacity: 0;
  }
  50% {
    opacity: 0.9;
  }
  100% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 0;
  }
}




/* Chatbot */
.botIcon {
  bottom: 190px;
  right: 16px;
  position: fixed;
  z-index: 9999;
  }
.iconInner {-webkit-align-items: center;-ms-align-items: center;align-items: center;background: #a54bf400;background: -webkit-linear-gradient(to left, #00dade00, #fb00ff00, #00dade00, #fb00ff00);background: -o-linear-gradient(to left, #00dbde, #fc00ff, #00dbde, #fc00ff);background: -moz-linear-gradient(to left,#00dbde, #fc00ff, #00dbde,#fc00ff);background: linear-gradient(to left, #00dbde, #fc00ff00, #00dbde00, #fc00ff);background-position: 50%;background-size: 300%;border-radius: 50%;cursor: pointer;display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-flex-wrap: wrap;-ms-flex-wrap: wrap;flex-wrap: wrap;height: 80px;justify-content: center;width: 80px;}
.botSubject, .messages, .showBotSubject .botIconContainer, .showMessenger .botIconContainer {display: none;}

.botIcon .Messages, .botIcon .Messages_list {-webkit-box-flex: 1;-webkit-flex-grow: 1;-ms-flex-positive: 1;flex-grow: 1;}
.chat_close_icon {color: #000000;cursor: pointer;font-size: 16px;position: absolute;right: 12px;z-index: 9;}
.chat_on {background-color: #8a57cf;bottom: 20px;border-radius: 50%;box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12) !important;color: #fff;cursor: pointer;display: block;height: 45px;padding: 9px;position: fixed;right: 15px;text-align: center;width: 45px;z-index: 10;}
.chat_on_icon {color: #fff;font-size: 25px;text-align: center;}
.botIcon .Layout {-webkit-animation: appear .15s cubic-bezier(.25, .25, .5, 1.1);-ms-animation: appear .15s cubic-bezier(.25, .25, .5, 1.1);animation: appear .15s cubic-bezier(.25, .25, .5, 1.1);-webkit-animation-fill-mode: forwards;-ms-animation-fill-mode: forwards;animation-fill-mode: forwards;background-color: rgb(255 255 255);bottom: 20px;right: 0px;box-shadow: 5px 0 20px 5px rgba(0, 0, 0, .1);box-sizing: content-box !important;color: rgb(255, 255, 255);display: -webkit-box;display: -webkit-flex;display: -ms-flexbox;display: flex;-webkit-box-orient: vertical;-webkit-box-direction: normal;-webkit-flex-direction: column;-ms-flex-direction: column;flex-direction: column;-webkit-box-pack: end;-webkit-justify-content: flex-end;-ms-flex-pack: end;justify-content: flex-end;max-height: 30px;max-width: 300px;min-width: 50px;opacity: 0;pointer-events: auto;position: fixed;-webkit-transition: right .1s cubic-bezier(.25, .25, .5, 1), bottom .1s cubic-bezier(.25, .25, .5, 1), min-width .2s cubic-bezier(.25, .25, .5, 1), max-width .2s cubic-bezier(.25, .25, .5, 1), min-height .2s cubic-bezier(.25, .25, .5, 1), max-height .2s cubic-bezier(.25, .25, .5, 1), border-radius 50ms cubic-bezier(.25, .25, .5, 1) .15s, background-color 50ms cubic-bezier(.25, .25, .5, 1) .15s, color 50ms cubic-bezier(.25, .25, .5, 1) .15s;-ms-transition: right .1s cubic-bezier(.25, .25, .5, 1), bottom .1s cubic-bezier(.25, .25, .5, 1), min-width .2s cubic-bezier(.25, .25, .5, 1), max-width .2s cubic-bezier(.25, .25, .5, 1), min-height .2s cubic-bezier(.25, .25, .5, 1), max-height .2s cubic-bezier(.25, .25, .5, 1), border-radius 50ms cubic-bezier(.25, .25, .5, 1) .15s, background-color 50ms cubic-bezier(.25, .25, .5, 1) .15s, color 50ms cubic-bezier(.25, .25, .5, 1) .15s;transition: right .1s cubic-bezier(.25, .25, .5, 1), bottom .1s cubic-bezier(.25, .25, .5, 1), min-width .2s cubic-bezier(.25, .25, .5, 1), max-width .2s cubic-bezier(.25, .25, .5, 1), min-height .2s cubic-bezier(.25, .25, .5, 1), max-height .2s cubic-bezier(.25, .25, .5, 1), border-radius 50ms cubic-bezier(.25, .25, .5, 1) .15s, background-color 50ms cubic-bezier(.25, .25, .5, 1) .15s, color 50ms cubic-bezier(.25, .25, .5, 1) .15s;z-index: 999999999;}
.botIcon .Layout-open {border-radius: 10px;color: #fff;height: 500px;max-height: 500px;max-width: 300px;overflow: hidden;-webkit-transition: right .1s cubic-bezier(.25, .25, .5, 1), bottom .1s cubic-bezier(.25, .25, .5, 1.1), min-width .2s cubic-bezier(.25, .25, .5, 1.1), max-width .2s cubic-bezier(.25, .25, .5, 1.1), max-height .2s cubic-bezier(.25, .25, .5, 1.1), min-height .2s cubic-bezier(.25, .25, .5, 1.1), border-radius 0ms cubic-bezier(.25, .25, .5, 1.1), background-color 0ms cubic-bezier(.25, .25, .5, 1.1), color 0ms cubic-bezier(.25, .25, .5, 1.1);-ms-transition: right .1s cubic-bezier(.25, .25, .5, 1), bottom .1s cubic-bezier(.25, .25, .5, 1.1), min-width .2s cubic-bezier(.25, .25, .5, 1.1), max-width .2s cubic-bezier(.25, .25, .5, 1.1), max-height .2s cubic-bezier(.25, .25, .5, 1.1), min-height .2s cubic-bezier(.25, .25, .5, 1.1), border-radius 0ms cubic-bezier(.25, .25, .5, 1.1), background-color 0ms cubic-bezier(.25, .25, .5, 1.1), color 0ms cubic-bezier(.25, .25, .5, 1.1);transition: right .1s cubic-bezier(.25, .25, .5, 1), bottom .1s cubic-bezier(.25, .25, .5, 1.1), min-width .2s cubic-bezier(.25, .25, .5, 1.1), max-width .2s cubic-bezier(.25, .25, .5, 1.1), max-height .2s cubic-bezier(.25, .25, .5, 1.1), min-height .2s cubic-bezier(.25, .25, .5, 1.1), border-radius 0ms cubic-bezier(.25, .25, .5, 1.1), background-color 0ms cubic-bezier(.25, .25, .5, 1.1), color 0ms cubic-bezier(.25, .25, .5, 1.1);width: 100%;}
.botIcon .Layout-expand {display: none;height: 400px;max-height: 100vh;min-height: 300px;}
.showBotSubject.botIcon .Layout-expand {display: block;}
.botIcon .Layout-mobile {bottom: 10px}
.botIcon .Layout-mobile.Layout-open {min-width: calc(100% - 20px);width: calc(100% - 20px);}
.botIcon .Layout-mobile.Layout-expand {border-radius: 0 !important;bottom: 0;height: 100%;min-height: 100%;min-width: 100%;width: 100%;}
.botIcon .Messenger_messenger {height: 100%;-webkit-box-orient: vertical;-webkit-box-direction: normal;-webkit-flex-direction: column;-ms-flex-direction: column;flex-direction: column;position: relative;width: 100%;}
.botIcon .Messenger_header, .botIcon .Messenger_messenger {display: -webkit-box;display: -webkit-flex;display: -ms-flexbox;display: flex;}
.botIcon .Messenger_header {-webkit-box-align: center;-webkit-align-items: center;-ms-flex-align: center;align-items: center;background-color: rgb(22 46 98 / 0%);color: rgb(0 0 0);-webkit-flex-shrink: 0;-ms-flex-negative: 0;flex-shrink: 0;height: 40px;padding-left: 10px;padding-right: 40px;}

.botIcon .Messenger_header h4 {-webkit-animation: slidein .15s .3s;-ms-animation: slidein .15s .3s;animation: slidein .15s .3s;-webkit-animation-fill-mode: forwards;-ms-animation-fill-mode: forwards;animation-fill-mode: forwards;opacity: 0;}
.botIcon .Messenger_prompt {font-weight: 400;line-height: 18px;margin: 0;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}
.botIcon .Messenger_content {background-color: #fff;display: -webkit-box;display: -webkit-flex;display: -ms-flexbox;display: flex;-webkit-box-orient: vertical;-webkit-box-direction: normal;-webkit-flex-direction: column;-ms-flex-direction: column;flex-direction: column;-webkit-box-flex: 1;-webkit-flex-grow: 1;-ms-flex-positive: 1;flex-grow: 1;height: 80px;}
.botIcon .Messages {background-color: #fff;display: -webkit-box;display: -webkit-flex;display: -ms-flexbox;display: flex;-webkit-flex-direction: column;-ms-flex-direction: column;flex-direction: column;-webkit-box-orient: vertical;-webkit-box-direction: normal;-webkit-flex-shrink: 1;-ms-flex-negative: 1;flex-shrink: 1;overflow-x: hidden;overflow-y: auto;padding: 10px;position: relative;-webkit-overflow-scrolling: touch;}
.botIcon .Input {background-color: #fff;border-top: 1px solid #e6ebea;color: #96aab4;-webkit-box-flex: 0;-webkit-flex-grow: 0;-ms-flex-positive: 0;flex-grow: 0;-webkit-flex-shrink: 0;-ms-flex-negative: 0;flex-shrink: 0;padding-bottom: 15px;padding-top: 17px;position: relative;width: 100%;}
.botIcon .Input-blank .Input_field {max-height: 20px;}
.botIcon .Input_field {background-color: transparent;border: none;outline: none;padding-left: 20px;padding-right: 45px;resize: none;width: 100%;font-size: 14px;line-height: 20px;min-height: 20px !important;}
.botIcon .Input_button-emoji {right: 45px;}
.botIcon .Input_button {background-color: transparent;border: none;bottom: 15px;cursor: pointer;height: 20px;outline: none;padding: 0;position: absolute;width: 20px;}
.botIcon .Input_button-send {right: 15px;}
.botIcon .Input-emoji .Input_button-emoji .Icon, .botIcon .Input_button:hover .Icon {-webkit-transform: scale(1.1);-ms-transform: scale(1.1);transform: scale(1.1);-webkit-transition: all .1s ease-in-out;-ms-transition: all .1s ease-in-out;transition: all .1s ease-in-out;}
.botIcon .Input-emoji .Input_button-emoji .Icon path, .botIcon .Input_button:hover .Icon path {fill: #2c2c46;}
.Icon svg {height: auto;width: 100%;}

.msg {display: -webkit-box;display: -webkit-flex;display: -ms-flexbox;display: flex;align-self: center;align-items: center;}
.msg.user {-webkit-box-direction: row-reverse;-webkit-flex-direction: row-reverse;-ms-flex-direction: row-reverse;flex-direction: row-reverse;}
.msg + .msg {margin-top: 15px;}
span.responsText {color: #000;display: inline-block;margin-left: 10px;vertical-align: top;max-width: calc(100% - 50px);}
.msg.user span.responsText {margin-left: 0;margin-right: 10px;}
span.avtr {display: flex;width: 32px;align-self: center;align-items: center;}
span.avtr figure {background-position: center;background-repeat: no-repeat;background-size: cover;border-radius: 50%;display: block;margin: 0;padding-bottom: 100%;}

@-webkit-keyframes appear {
    0% {opacity: 0;-webkit-transform: scale(0);transform: scale(0);}
    100% {opacity: 1;-webkit-transform: scale(1);transform: scale(1);}
}
@-ms-keyframes appear {
    0% {opacity: 0;-ms-transform: scale(0);transform: scale(0);}
    100% {opacity: 1;-ms-transform: scale(1);transform: scale(1);}
}
@keyframes appear {
    0% {opacity: 0;-webkit-transform: scale(0);transform: scale(0);}
    100% {opacity: 1;-webkit-transform: scale(1);transform: scale(1);}
}
@-webkit-keyframes slidein {
    0% {opacity: 0;-webkit-transform: translateX(10px);transform: translateX(10px);}
    100% {opacity: 1;-webkit-transform: translateX(0);transform: translateX(0);}
}
@-ms-keyframes slidein {
    0% {opacity: 0;-ms-transform: translateX(10px);transform: translateX(10px);}
    100% {opacity: 1;-ms-transform: translateX(0);transform: translateX(0);}
}
@keyframes slidein {
    0% {opacity: 0;-webkit-transform: translateX(10px);transform: translateX(10px);}
    100% {opacity: 1;-webkit-transform: translateX(0);transform: translateX(0);}
}

@media only screen and (max-width: 412px) {
	.botIcon .Layout-open {width: 250px;}
}

.icon-support-center {
 position: relative;
 
}

.parallax {
  position: relative;
}
@media (max-width: 768px) { 
  .offcanvas-body {
    overflow-y: visible;
    background: #fff;
    min-height: 1000%;
  }
  
}

/* Toàn bộ thanh cuộn */
.table-responsive::-webkit-scrollbar {
  height: 8px;            /* chiều cao của thanh cuộn ngang */
}

/* Nền (track) */
.table-responsive::-webkit-scrollbar-track {
  background: #f0f0f0;    /* màu nền */
  border-radius: 4px;     /* bo góc */
}

/* Cần kéo (thumb) */
.table-responsive::-webkit-scrollbar-thumb {
  background-color: #888; /* màu thumb */
  border-radius: 4px;     /* bo góc */
  border: 2px solid #f0f0f0; /* tạo viền “khe” */
}

/* Thumb khi hover */
.table-responsive::-webkit-scrollbar-thumb:hover {
  background-color: #555;
}
@media (max-width: 991.98px) {
  .pricing-scroll {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 1rem;

    /* Ẩn scrollbar */
    scrollbar-width: none;     /* Firefox */
    -ms-overflow-style: none;  /* IE10+ */
  }
  .pricing-scroll::-webkit-scrollbar {
    display: none;             /* WebKit */
  }

  /* Thiết lập thứ tự rõ ràng: M1 (0), M2 (1), M3 (2) */
  .pricing-col-m1 { order: 0; }
  .pricing-col-m2 { order: 1; }
  .pricing-col-m3 { order: 2; }

  /* Kích thước và khoảng cách mỗi card */
  .pricing-scroll .col-lg-4 {
    flex: 0 0 auto;
    width: 80%;
    margin-right: 1rem;
  }
  .pricing-scroll .col-lg-4:last-child {
    margin-right: 0;
  }
}

.nav-pills.tab-component {

    position: relative;
    background-color: #f8fafd;
    padding: .25rem .25rem;
    border-radius: .3125rem;
}

.tab-component .nav-link {
color: #51596c;
    font-size: .8125rem;
    padding: .5rem .875rem;
    border-radius: .3125rem;

}
.tab-component .nav-link.active {
color: #00221c;
    background-color: #fff;
    box-shadow: 0 .1875rem .375rem 0 rgba(140, 152, 164, .25);
}
  /* === Custom Horizontal Scrollbar for WebKit === */
    .code-toolbar {
      position: relative;
      overflow-x: auto; /* bật cuộn ngang */
    }
    .code-toolbar::-webkit-scrollbar {
      height: 8px; /* độ cao scrollbar ngang :contentReference[oaicite:0]{index=0} */
    }
    .code-toolbar::-webkit-scrollbar-track:horizontal {
      background-color: #f0f0f0;
      border-radius: 4px;
    }
    .code-toolbar::-webkit-scrollbar-thumb:horizontal {
      background-color: #007bff;
      border-radius: 4px;
      border: 2px solid #f0f0f0;
    }

    /* === Scrollbar cho Firefox === */
    .code-toolbar {
      scrollbar-width: thin;
      scrollbar-color: #007bff #f0f0f0; /* thumb màu xanh, track màu xám nhạt :contentReference[oaicite:1]{index=1} */
    }

    /* === Styles cho nút Copy === */
    .copy-btn {
      position: absolute;
      top: 0.5rem;
      right: 0.5rem;
      background: #007bff;
      color: #fff;
      border: none;
      padding: 0.25rem 0.5rem;
      font-size: 0.875rem;
      border-radius: 4px;
      cursor: pointer;
      opacity: 0.7;
      transition: opacity 0.2s ease;
    }
    .copy-btn:hover {
      opacity: 1;
    }









    /*------------------------------------
  Documentation
------------------------------------*/

:focus, a:focus, button:focus {
  outline: 0;
}

code {
  font-size: 100%;
}



.tab-content :not(pre) > code[class*="language-"],
.tab-content pre[class*="language-"] {
  border-bottom-right-radius: .3125rem;
  border-bottom-left-radius: .3125rem;
}

code[class*="language-"],
pre[class*="language-"] {
  color: #fff;
  font-size: .9375em;
  margin: 0;
  white-space: pre-wrap;
  word-spacing: normal;
  word-break: normal;
  word-wrap: normal;

  -webkit-hyphens: none;
  -moz-hyphens: none;
  -ms-hyphens: none;
  hyphens: none;
}

pre[class*="language-"]::-moz-selection, pre[class*="language-"] ::-moz-selection,
code[class*="language-"]::-moz-selection, code[class*="language-"] ::-moz-selection {
  text-shadow: none;
  background: #b3d4fc;
}

pre[class*="language-"]::selection, pre[class*="language-"] ::selection,
code[class*="language-"]::selection, code[class*="language-"] ::selection {
  text-shadow: none;
  background: #b3d4fc;
}

@media print {
  code[class*="language-"],
  pre[class*="language-"] {
    text-shadow: none;
  }
}

/* Code blocks */
pre[class*="language-"] {
  padding: 1.5rem;
  overflow: auto;
}

:not(pre) > code[class*="language-"],
pre[class*="language-"] {
  background: #142140;
}

/* Light Theme */
.prism-light:not(pre) > .prism-light code[class*="language-"],
pre.prism-light[class*="language-"] {
  background: #f9fafc;
}

.prism-light code[class*="language-"],
pre.prism-light[class*="language-"] {
  color: #142140;
}

/* Inline code */
:not(pre) > code[class*="language-"] {
  padding: .1em;
  border-radius: .3em;
  white-space: normal;
}

.token.comment,
.token.prolog,
.token.doctype,
.token.cdata {
  color: slategray;
}

.token.punctuation {
  color: #2f6f9f;
}

.token.namespace {
  opacity: .7;
}

.token.property,
.token.tag,
.token.boolean,
.token.number,
.token.constant,
.token.symbol,
.token.deleted {
  color: #2f6f9f;
}

.token.selector,
.token.attr-name,
.token.string,
.token.char,
.token.builtin,
.token.inserted {
  color: #26a5b5;
}

.token.operator,
.token.entity,
.token.url,
.language-css .token.string,
.style .token.string {
  color: #d09a5c;
  background: transparent;
}

.token.atrule,
.token.attr-value,
.token.keyword {
  color: #d44950;
}

.token.function,
.token.class-name {
  color: #DD4A68;
}

.token.regex,
.token.important,
.token.variable {
  color: #e90;
}

.token.important,
.token.bold {
  font-weight: bold;
}

.token.italic {
  font-style: italic;
}

.token.entity {
  cursor: help;
}

div.code-toolbar {
  position: relative;
}

div.code-toolbar > .toolbar {
  position: absolute;
  top: 1.0625rem;
  right: .75rem;
  transition: opacity 0.3s ease-in-out;
}

div.code-toolbar:hover > .toolbar {
  opacity: 1;
}

div.code-toolbar > .toolbar .toolbar-item {
  display: inline-block;
}

div.code-toolbar > .toolbar a {
  cursor: pointer;
}

div.code-toolbar > .toolbar button {
  background: none;
  border: 0;
  color: inherit;
  font: inherit;
  line-height: normal;
  overflow: visible;
  padding: 0;
  -webkit-user-select: none; /* for button */
  -moz-user-select: none;
  -ms-user-select: none;
}

div.code-toolbar > .toolbar a,
div.code-toolbar > .toolbar button,
div.code-toolbar > .toolbar span {
  color: #fff;
  padding: .5rem 1rem;
  background-color: rgba(255, 255, 255, .1);
  border-radius: .3125em;
  transition: all .2s ease-in-out;
  font-size: 14px;
  font-weight: bold;
}

div.code-toolbar > .toolbar a:hover,
div.code-toolbar > .toolbar a:focus,
div.code-toolbar > .toolbar button:hover,
div.code-toolbar > .toolbar button:focus,
div.code-toolbar > .toolbar span:hover,
div.code-toolbar > .toolbar span:focus {
  color: #fff;
  background-color: #0d6efd;
}

/* Light Theme  */
div.code-toolbar > .prism-light + .toolbar a,
div.code-toolbar > .prism-light + .toolbar button,
div.code-toolbar > .prism-light + .toolbar span {
  color: #E7EAF3;
  background-color: transparent;
}

div.code-toolbar > .prism-light + .toolbar a:hover,
div.code-toolbar > .prism-light + .toolbar a:focus,
div.code-toolbar > .prism-light + .toolbar button:hover,
div.code-toolbar > .prism-light + .toolbar button:focus,
div.code-toolbar > .prism-light + .toolbar span:hover,
div.code-toolbar > .prism-light + .toolbar span:focus {
  color: #00221C;
  background-color: #006ccf;
}

/* AnchorJS Link */
.hs-docs-heading {
  margin-top: 3rem;
  margin-bottom: 1rem;
}

.hs-docs-heading ~ p {
  margin-top: -.5rem;
}

.hs-docs-heading::before {
  display: block;
  height: 6rem;
  margin-top: -6rem;
  content: "";
}

[data-anchorjs-icon]::after {
  content: attr(data-anchorjs-icon);
}

.anchorjs-link {
  padding-left: .5rem;
  font-size: 90%;
  color: rgba(0, 128, 96, .5) !important;
  transition: color .16s linear;
  opacity: 0;
}

.anchorjs-link:hover {
  color: rgba(0, 128, 96, 1) !important;
}

.hs-docs-heading:hover .anchorjs-link {
  opacity: 1;
}

/* Copy to clipboard style */
.hs-docs-copy-to-clipboard-text {
  font-size: 80%;
  color: #77838f;
}

.hs-docs-copy-to-clipboard:hover .hs-docs-copy-to-clipboard-text {
  color: #fff;
  background-color: #008060;
}

/* Content Divider */
.content-divider {
  padding-bottom: 1.5rem;
  border-bottom: 1px solid rgba(0,0,0, .1);
}

.content-divider:last-child {
  padding-bottom: 0;
  border-bottom-width: 0;
}


/* Scrollspy */
.scrollspy-example {
  position: relative;
  height: 200px;
  margin-top: .5rem;
  overflow: auto;
}


/* Card */
.card-header {
  border-width: 1px;
}


/* Page Header */
.docs-page-header {
  border-bottom: 0.0625rem solid #e7eaf3;
  padding-bottom: 1.75rem;
  margin-bottom: 2.25rem;
}

.docs-page-header-title {
  margin-bottom: 0.5rem;
}

.docs-page-header-text {
  font-size: 1.125rem;
  margin-bottom: 0.75rem;
}

.docs-page-header-text:last-child {
  margin-bottom: 0;
}

/* Navbar */
.docs-navbar {
  z-index: auto;
}

/* Navbar Sidebar */
@media (min-width: 991px) {
  .docs-navbar-sidebar-container {
    max-width: 17rem;
  }
}

@media (min-width: 767.98px) {
  .docs-navbar-sidebar-aside-body {
    padding-top: 8.5rem !important;
  }
}

/* Text Highlight */
[class*=text-highlight-] {
  background: left 1em/1em 0.2em;
  background-repeat: repeat-x;
}

.text-highlight-warning {
  background-image: linear-gradient(to bottom, rgba(241, 185, 128, 0.5), rgba(241, 185, 128, 0.5));
}

.sidebar-components .nav-link.active {

background: #cccccc00;

color: #0d6efd;
font-weight:700;
}

.sidebar-components .nav-link {
  
color: #242424;
}

@media (min-width: 1280px) { 
  .problem-tms {
    padding-top: 0px;
  }
  
}

.btn-dang-ky .fa-arrow-right {
  display: inline-block;             /* Cho phép transform hoạt động chính xác */
  transition: transform 0.3s ease;    /* Thời gian và kiểu chuyển động :contentReference[oaicite:3]{index=3} */
}

/* Khi hover lên button, di chuyển icon 5px sang phải */
.btn-dang-ky:hover .fa-arrow-right {
  transform: translateX(5px);        /* Dịch chuyển trên trục X :contentReference[oaicite:4]{index=4} */
}


.container .content-with-bullets .language-plaintext{
  background: #1e1e1e;
    color: #ccc;
    border-radius: 8px;
    padding: 12px;
    font-family: monospace;
    font-size: 14px;
    white-space: pre-wrap;
    word-break: break-word;
    border-left: 4px solid #666;
}

.container .content-with-bullets pre{
  overflow: inherit;
}

.custom-img {
  max-height: 192px;
  align-items: center;
  overflow: hidden;
}
.custom-h-52 {
  max-height: 52px;
  display: flex;
  align-items: center;
  min-height: 60px;
}

.custom-img-370 {
  max-height: 370px;
}
.swiper-wrapper {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 16px;
}

.news-card {
  height: 100%;
  display: flex;
  flex-direction: column;
}