.pagination{
  display: flex;
  align-items: center;
  justify-content: center;
}
.pagination .page-item {
  width: 44px;
  height: 44px;
  margin: 0 7px;
}
.pagination .disabled .page-link {
  border: 1px solid rgba(244, 244, 244, 1) !important;
}
.pagination .page-item.active .page-link {
  background-color: #008243;
  border: 1px solid var(--main-clr);
  color: #fff;
  height: 40px;
}
.pagination .page-item .page-link {
  border-radius: 8px;
  text-align: center;
  font-size: 14px;
  font-style: normal;
  line-height: 26px;
  font-weight: 500;
  padding: 0px;
  width: unset;
  background-color: #fff;
  border: 1px solid #c9c9c9;
  color: #000;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.detail-content {
  overflow: hidden;
  height: 500px;
}

/* Rating Star Widgets Style */
.rating-stars ul {
  list-style-type:none;
  padding:0;

  -moz-user-select:none;
  -webkit-user-select:none;
}
.rating-stars ul > li.star {
  display:inline-block;

}

/* Idle State of the stars */
.rating-stars ul > li.star > svg {
  margin: 0 5px;
  fill :#ccc;
}

/* Hover state of the stars */
.rating-stars ul > li.star.hover > svg {
  fill: #FFBF00;
}

/* Selected state of the stars */
.rating-stars ul > li.star.selected > svg {
  fill: #FFBF00;
}
.mySwiperBot .swiper-slide-thumb-active {
  opacity: 1;
}
.detail-content {
  text-align: justify;
}

.detail-content p, .detail-content span {
  font-size: 16px !important;
}
.detail-content p {
  margin-bottom: 1rem;
}
.detail-content h1 {
  font-size: 24px;
}
.detail-content h2 {
  font-size: 22px;
}
.detail-content h3 {
  font-size: 20px;
}
.detail-content img {
  max-width: 800px !important;
  display: block;
  margin: 5px auto;
}

.detail-page {
  text-align: justify;
}

.detail-page h1 {
  font-size: 24px;
}
.detail-page h2 {
  font-size: 22px;
}
.detail-page h3 {
  font-size: 20px;
}
.detail-page img {
  display: block;
  margin: 5px auto;
}

#cart_items{
  position: absolute;
  top: -0.2rem;
  right: 3.9875rem;
  width: 17px;
  height: 17px;
  border-radius: 50%;
  color: #fff;
  font-size: 12px;
  font-weight: 500;
  text-align: center;
  line-height: 17px;
  background: red;
}
.navigator-menu{
  position: fixed;
  top: 0;
  bottom: 0;
  left: -300px;
  transition: left;
  transition-duration: 0.3s;
  transition-timing-function: linear;
}

.sideslip-room-detail{
  position: fixed;
  top: 0;
  bottom: 0;
  right: -700px;
  transition: right;
  transition-duration: 0.3s;
  transition-timing-function: linear;
}

.navigator-menu.sideslip{
  left: 0;
  animation: sideslip;
  animation-duration: 0.3s;
  animation-timing-function: linear;
}

.sideslip-room-detail.sideSlipRight{
  right: 0;
  animation: sideSlipRight;
  animation-duration: 0.3s;
  animation-timing-function: linear;
}

@keyframes sideslip {
  from{
    left: -300px;
  }
  to{
    left: 0;
  }
}

@keyframes sideSlipRight {
  from{
    right: -700px;
  }
  to{
    right: 0;
  }
}

.swal2-popup.swal2-toast.swal2-show{
  flex-direction: row !important;
}

.swal2-popup{
  border-radius: 12px;
}

.swal2-icon{
  width: 64px;
  height: 64px;
  margin: 1rem auto;
}

.swal2-input{
  margin-bottom: 0;
}

[type='text']{
  border-color: #ccc !important;
}

[type='text']:focus{
  outline: 2px solid transparent;
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) #008243;
   --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) #008243;
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  border-color: #008243;
}

.swal2-icon.swal2-warning{
border-color: #FFBF00;
color: #FFBF00;
}

.swal2-title{
font-size: 20px;
line-height: 30px;
}

.swal2-styled.swal2-deny{
  background-color: #C4CDD5 !important;
}

.description_table{
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.name-traveler{
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.infoContainerReport{
  display: grid;
}

.infoContainerReport.hide{
  display: none;
}

.list-item-route{
  position: relative;
  background: url('../../images/bg-list-item.jpeg');
  background-attachment: scroll;
}

.list-item-route::before{
  content: "";
  position: absolute;
  top: 0px;
  left: 0px;
  right: 0px;
  bottom: 0px;
  z-index: 0;
  background-image: linear-gradient(rgba(255,255,255,0.5), rgba(255,255,255,0.9));
  border-radius: 0.75rem;
}

/*mobile S*/
@media screen and (max-width: 375px){
  .detail-content img {
    max-width: 340px !important;
    height: unset !important;
    display: block;
    margin: 5px auto;
  }
  .pagination .page-item {
    width: 24px;
    height: 24px;
    margin: 0 7px;
  }
}

/*mobile M*/
@media screen and (min-width: 376px) and (max-width: 460px){
  .detail-content img {
    max-width: 394px !important;
    height: unset !important;
    display: block;
    margin: 5px auto;
  }
  .pagination .page-item {
    width: 24px;
    height: 24px;
    margin: 0 7px;
  }
  .pagination .page-item.active .page-link {
    height: 24px;
  }
  .pagination .page-item .page-link {
    font-size: 12px;
    height: 24px;
    background-color: #fff;
  }

}

/*tablet*/
@media screen and (min-width: 461px) and (max-width: 768px){
  .detail-content img {
    max-width: 600px !important;
    height: unset !important;
    display: block;
    margin: 5px auto;
  }
}
.bg-gradient-custom {
  background: linear-gradient(
    to bottom,
    rgba(41, 128, 185, 0.6), /* Màu #2980B9 với độ trong suốt 60% */
    rgba(147, 249, 185, 0.6) /* Màu #93F9B9 với độ trong suốt 60% */
  );
}