@charset "utf-8";
 
 
hr {
    margin: 0 0;
    color: #e3e9ef;
    background-color: currentColor;
    border: 0;
    opacity: 1
}
hr:not([size]) {
    height: 1px
}
h6, .h6, h5, .h5, h4, .h4, h3, .h3, h2, .h2, h1, .h1 {
    margin-top: 0;
    margin-bottom: 0.75rem;
    font-weight: 500;
    line-height: 1.2;
    color: #333;
}
h1, .h1 {
    font-size: calc(1.375rem + 1.5vw)
}
.bg-dark {
    --cz-dark-rgb: 55, 63, 80;
    --cz-bg-opacity: 1;
    background-color: rgba(var(--cz-dark-rgb), var(--cz-bg-opacity)) !important;
}
.bg-darker {
    --cz-bg-opacity: 1;
    background-color: #2b3445 !important;
}
.widget-title {
    margin-bottom: 1.125rem;
    font-size: 1.0625rem;
    font-weight: 500;
}
.text-light {
    --cz-text-opacity: 1;
    --cz-light-rgb: 255, 255, 255;
    color: rgba(var(--cz-light-rgb), var(--cz-text-opacity)) !important;
}
.widget-list {
    margin: 0;
    padding: 0;
    list-style: none;
}
.widget-list-item {
    margin-bottom: 0.5rem;
}
.widget-light .widget-list-link {
    color: rgba(255, 255, 255, .65);
}
.widget-list-link {
    display: block;
    transition: color .25s ease-in-out;
    color: #4b566b;
    font-size: .875rem;
    font-weight: normal;
}


/*Cart empty dùng cho cart*/
.empty-cart-wrapper {
  margin: 0 auto 30px;
  display: flex;
  justify-content: center;
}

.empty-cart-svg {
  width: 120px;
  height: 120px;
  animation: float-cart 3s ease-in-out infinite;
}

@keyframes float-cart {

  0%,
  100% {
    transform: translateY(0px);
  }

  50% {
    transform: translateY(-15px);
  }
}

.empty-cart-svg .cart-item {
  animation: swing-item 0.8s ease-in-out infinite;
  transform-origin: top center;
}

.empty-cart-svg .cart-item:nth-child(2) {
  animation-delay: 0.2s;
}

.empty-cart-svg .cart-item:nth-child(3) {
  animation-delay: 0.4s;
}

@keyframes swing-item {

  0%,
  100% {
    transform: rotate(0deg);
  }

  25% {
    transform: rotate(-2deg);
  }

  75% {
    transform: rotate(2deg);
  }
}

.empty-cart-svg .cart-wheel {
  animation: spin-wheel 1s linear infinite;
  transform-origin: center;
}

@keyframes spin-wheel {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}
/*/Cart empty dùng cho cart*/




footer h5 {
    --cz-text-opacity: 1;
    --cz-light-rgb: 255, 255, 255;
    color: rgba(var(--cz-light-rgb), var(--cz-text-opacity)) !important;
}
footer p {
    color: #9599a2;
}
footer .text-primary {
    --cz-text-opacity: 1;
    --cz-primary-rgb: 254, 105, 106;
    color: rgba(var(--cz-primary-rgb), var(--cz-text-opacity)) !important;
}

.btn-social.bs-light {
    background-color: rgba(255, 255, 255, .08);
    color: #fff;
}
.btn-social {
    display: inline-block;
    width: 2.25rem;
    height: 2.25rem;
    padding: 0;
    border: 1px solid rgba(0, 0, 0, 0);
    transition: border-color .25s ease-in-out, background-color .25s ease-in-out, color .25s ease-in-out, box-shadow .25s ease-in-out;
    border-radius: 0.3125rem;
    background-color: #f3f5f9;
    color: #4b566b;
    font-size: .875rem;
    text-align: center;
    text-decoration: none !important;
}
.btn-social>i, .btn-social>svg{
    line-height: 2.125rem;
    height: 2.125rem;
    width: 1rem;
}
.btn-wishlist {
    width: 2.75rem;
    height: 2.75rem;
    padding: 0 !important;
    transition: color .25s ease-in-out,background-color .25s ease-in-out,border-color .25s ease-in-out,box-shadow .2s ease-in-out;
    border: 0;
    border-radius: 50%;
    background-color: #f3f5f9;
    color: #333;
    text-align: center;
    position: absolute;
      top: .75rem;
      right: .75rem;
      z-index: 5
}
.btn-wishlist.btn-sm,
 .btn-group-sm>.btn-wishlist.btn {
    width: 2rem;
    height: 2rem;
}
.btn-wishlist.btn-sm>i,
 .btn-group-sm>.btn-wishlist.btn>i {
    font-size: .8125rem;
    line-height: 2rem;
}
@media (min-width: 768px) {
    .text-md-nowrap {
        white-space: nowrap !important;
    }
}
@media (min-width: 768px) {
    .text-md-start {
        text-align: left !important;
    }
}
.pb-grid-gutter {
    padding-bottom: 1.875rem !important;
}
.mb-grid-gutter {
    margin-bottom: 1.875rem !important;
}
 
 
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;
    }
}
h5,
.h5 {
    font-size: 1.25rem;
}
h6,
.h6 {
    font-size: 1.0625rem;
}
p {
    margin-top: 0;
    margin-bottom: 1rem;
}
.bg-position-center {
    background-position: center !important;
}
.bg-size-cover {
    background-size: cover !important;
}
.bg-accent {
    --bs-bg-opacity: 1;
    background-color: rgba(var(--bs-accent-rgb), var(--bs-bg-opacity)) !important;
}
.text-muted {
    color: #aaa !important;
}
button:not(:disabled),
[type="button"]:not(:disabled),
[type="reset"]:not(:disabled),
[type="submit"]:not(:disabled) {
    cursor: pointer;
}
.btn-tag {
    display: inline-block;
    padding: 0.375rem 0.5625rem;
    transition: color .25s ease-in-out, background-color .25s ease-in-out, border-color .25s ease-in-out, box-shadow .2s ease-in-out;
    border: 1px solid #e3e9ef;
    border-radius: 0.25rem;
    color: #4b566b;
    font-size: .75rem;
    white-space: nowrap;
}
.btn-otakul{
  background-color: var(--primary-color);
}
.btn-otakul.btn-shadow {
    box-shadow: 0 0.5rem 1.125rem -0.5rem #0d6efd;
}
.btn-accent {
    color: #fff;
    background-color: #4e54c8;
    border-color: #4e54c8;
    box-shadow: unset;
}
.btn-outline-accent {
    border-color: rgba(78, 84, 200, .35);
}
.btn-outline-accent {
    color: #4e54c8;
    border-color: #4e54c8;
}
.navbar .nav-item:hover .dropdown-toggle::after{
    color: #ffffffd1;
    vertical-align: 0.07em;
}
.navbar .nav-item .dropdown-menu .dropdown-item:hover .icon-arrow::after {
    transition: all 0.4s ease;
}
.navbar .nav-item .dropdown-menu .dropdown-item:hover .icon-arrow::after {
    margin-left: 20px;
}
.navbar.bg-pink .dropdown-toggle::after{
    color: #ffffff80;
    transition: all 0.2s ease;
}
 .btn-pink{
    background-color:  #e85902;
    color:#e3e9ef
 }
 .btn-pink:hover{
    background-color:  #ff8902;
    color:#fff
}
 .text-pink{
    color:  #e85902
 }
 .bg-pink{
  background-color:  #e85902
 }
 .bg-pink .nav-link {
    color: #fff
 }
.text-col-4 {
    -webkit-column-count: 4; /* Chrome, Safari, Opera */
    -moz-column-count: 4; /* Firefox */
    column-count: 4;
  }
  @media (max-width: 800px) {
    .text-col-lg-4 {
      -webkit-column-count: 2; /* Chrome, Safari, Opera */
      -moz-column-count: 2; /* Firefox */
      column-count: 2;
    }
  }
  @media (max-width: 500px) {
    .text-col-md-4 {
      -webkit-column-count: 1; /* Chrome, Safari, Opera */
      -moz-column-count: 1; /* Firefox */
      column-count: 1;
    }
  }



  /* --- MEGA MENU --- */
  .mega-menu {
    width: 800px;
    padding: 20px;
    border: none;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
  }

  @media (max-width: 991.98px) {
    .mega-menu {
      width: 100%;
      box-shadow: none;
      padding: 10px 20px;
    }

    .offcanvas-body .nav-link {
      color: #333 !important;
      border-bottom: 1px solid #eee;
    }

    /* Trên Mobile không cần màu nền cho Blog để đồng nhất menu dọc */
    .nav-blog-highlight {
      background-color: transparent !important;
      color: #333 !important;
    }
  }

  .mega-menu-img {
    width: 100%;
    height: 120px;
    object-fit: cover;
    border-radius: 4px;
  }

  /* --- HEADER MOBILE --- */
  .header-mobile {
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 15px;
    position: relative;
  }

  #mobileSearchOverlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--primary-color);
    display: none;
    align-items: center;
    padding: 0 15px;
    z-index: 1050;
  }


  /* Icon SVG */
  .icon-svg {
    width: 24px;
    height: 24px;
    fill: currentColor;
  }

  /*heaer navabar hiễn thị ở tất cả các trang */