/* ===== BASE STYLES ===== */
.bg-url {
  background-image: url("../assets/image/statistic-bar.png");
  background-repeat: no-repeat;
  padding-top: 13px;
  padding-bottom: 13px;
  height: 149px;
}

.line-height-p-100 {
  line-height: 100%;
}

@media (max-width: 1023px) {
  .bg-url {
    padding-bottom: 51px;
    padding-top: 39px;
    background-image: url("../assets/image/statistic-bar-mobile.png");
    background-size: cover;
    background-position: center;
    height: 547px;
  }
  .wrapper-bg-mobile {
    transform: translateX(-10px);
  }
  .line {
    margin-bottom: 15px;
  }
  .text-wight-button {
    margin-top: 43px;
    border-radius: 25px;
  }
  .lineHeight {
    line-height: 1;
  }
}

.bg-url-mobile {
  background-image: url("../assets/image/statistic-bar-mobile.png");
  background-repeat: no-repeat;
  height: auto;
}

.bg-book {
  background-image: url("../assets/image/background-book.png");
  background-size: cover;
  background-position: center;
}

.bg-nav {
  background-image: url("../assets/image/background-nav.png");
  background-size: cover;
  background-position: center;
}

.hide-scrollbar {
  overflow: auto;
  -ms-overflow-style: none; /* IE */
  scrollbar-width: none; /* Firefox */
}

.hide-scrollbar::-webkit-scrollbar {
  display: none; /* Chrome, Safari */
}

.outline-dashed-sir {
  outline: none;
  position: relative;
}

.outline-dashed-sir::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;

  margin: -2px; /* khoảng cách giữa outline và element */
  padding: 2px; /* độ dày đường viền */

  /* màu trắng + dashed thưa */
  background: repeating-linear-gradient(
        90deg,
        white 0,
        white 10px,
        transparent 10px,
        transparent 20px
      )
      0 0/100% 2px no-repeat,
    repeating-linear-gradient(
        180deg,
        white 0,
        white 10px,
        transparent 10px,
        transparent 20px
      )
      100% 0/2px 100% no-repeat,
    repeating-linear-gradient(
        90deg,
        white 0,
        white 10px,
        transparent 10px,
        transparent 20px
      )
      0 100%/100% 2px no-repeat,
    repeating-linear-gradient(
        180deg,
        white 0,
        white 10px,
        transparent 10px,
        transparent 20px
      )
      0 0/2px 100% no-repeat;

  pointer-events: none;
}

@media (max-width: 574px) {
  .height-535px {
    height: 535px !important;
  }

  .text-header-nav {
    font-size: 14px !important  ;
  }

  .text-high-wight-img-header {
    height: 30px !important;
    width: 30px !important;
  }

  .hader-pading {
    padding-left: 25px !important;
    padding-right: 25px !important;
  }

  .car-item-padding {
    padding-left: 30px !important;
    padding-right: 30px !important;
  }

  .cart-item-button-right {
    right: -20 !important;
  }

  .cart-item-button-left {
    left: -20 !important;
  }

  .see-more-button {
    font-size: 14px !important;
  }

  .text-title-header {
    font-size: 18px !important;
  }

  .nav-item > ul > li {
    width: 50% !important;
    font-size: 16px !important;
    padding: 10px 0 !important;
    display: flex !important;
    justify-content: center !important;
  }

  .pading-0-system {
    padding: 0 !important;
  }

  .pading-px-button {
    padding-left: 30px !important;
    padding-right: 30px !important;
    padding-top: 10px !important;
    padding-bottom: 10px !important;
    font-size: 14px !important;
  }

  .pading-px-form {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }

  .title-company {
    font-size: 20px !important;
  }

  .title-introduce {
    font-size: 18px !important;
  }

  .title-introduce-content {
    font-size: 16px !important;
  }

  .text-wight-button {
    font-size: 14px !important;
    width: 100px !important;
    height: 35px !important;
  }

  .bg-book-width {
    width: 100% !important;
  }

  .book-nav {
    display: block !important;
  }

  .border-none-book {
    display: none !important;
  }

  /* Thêm quy tắc cho section này */
  .w-full.lg\:w-1\/2.h-\[630px\].lg\:h-\[882px\] {
    height: 500px !important;
  }

  .hidden.lg\:flex.absolute.top-\[70px\].lg\:top-\[28px\].right-0.w-full.lg\:w-\[75\%\] {
    display: none !important; /* Ẩn phần này trên mobile */
  }

  .relative.bg-nav.bg-book-width.w-\[398px\].lg\:w-\[558px\].h-full.z-10 {
    width: 60% !important;
    height: 100% !important;
  }

  /* Điều chỉnh vị trí các phần tử bên trong */
  /* .absolute.left-\[62px\].lg\:left-\[250px\].top-\[58px\].lg\:top-\[206px\] {
    left: 0px !important;
    top: 50px !important;
  } */

  .left-bobile-book {
    left: 16px !important;
  }

  .top-bobile-book {
    top: 220px !important;
  }

  /* .absolute.left-\[62px\].lg\:left-\[250px\].top-\[235px\].lg\:top-\[391px\] {
    left: 250px !important;
    top: 190px !important;
  }

  .absolute.left-\[62px\].lg\:left-\[250px\].bottom-\[58px\].lg\:bottom-\[156px\] {
    left: 0px !important;
    bottom: 60px !important;
  } */

  /* Giảm kích thước hình tròn và text */
  .h-\[150px\].w-\[150px\].bg-white.rounded-full {
    height: 100px !important;
    width: 100px !important;
  }

  .h-\[120px\].lg\:h-\[94px\].w-\[368px\].lg\:w-\[507px\] {
    height: 80px !important;
    width: 280px !important;
  }

  .text-3xl {
    font-size: 1.5rem !important;
  }

  .explore-highlight {
    height: auto !important;
    font-size: 16px !important;
  }

  .explore-highlight p {
    font-size: 16px !important;
  }

  .explore-highlight > button {
    font-size: 14px !important;
    margin-bottom: 10px !important;
    padding: 8px 16px !important;
  }

  .pading-system {
    padding-left: 35px !important;
    padding-right: 35px !important;
  }

  .producut-slide-mobile {
    padding-left: 8px !important;
    padding-right: 8px !important;
  }

  .hight-new-item {
    height: 1260px !important;
  }

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

  .text-size-14px {
    font-size: 14px !important;
  }

  .text-size-16px {
    font-size: 16px !important;
  }

  .text-size-18px {
    font-size: 18px !important;
  }

  .text-size-20px-mobile {
    font-size: 20px !important;
  }

  .text-size-24px {
    font-size: 24px !important;
  }

  .text-size-40px {
    font-size: 40px !important;
  }

  .pading-x-20px-mobile {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }

  .button-padding-font-size-14-mobile {
    padding: 3px 16px !important;
    width: auto !important;
    height: auto !important;
    font-size: 14px !important;
  }

  .button-padding {
    padding: 7px 16px !important;
    width: auto !important;
    height: auto !important;
    font-size: 14px !important;
  }

  .height-250px {
    height: 250px !important;
  }

  .height-auto-media-574px {
    height: auto !important;
  }

  .margin-top-100px {
    margin-top: 100px !important;
  }

  .w-100-pc-1024 {
    width: 100% !important;
  }

  .font-text-16px-media-574px {
    font-size: 16px !important;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .w-150px-h-180px {
    width: 150px !important;
    height: 180px !important;
  }
}

@media (min-width: 1573px) and (max-width: 1650px) {
  .right--22px {
    right: -22px !important;
  }
}
@media (min-width: 1651px) and (max-width: 1720px) {
  .right--22px {
    right: -67px !important;
  }
}

@media (min-width: 1024px) and (max-width: 1572px) {
  /* .flex-direction-column {
    flex-direction: column !important;
  } */

  .justify-content-center {
    justify-content: center !important;
  }

  .w-100-1024px-1600px {
    width: 96% !important;
  }

  .h-750px-1024px-1600px {
    height: 750px !important;
  }

  .hidden-1024px-1600px {
    display: none !important;
  }

  .flex-120px-1024px-1600px {
    display: flex !important;
  }

  .text-font-20px-pc {
    font-size: 20px !important;
  }

  .text-font-24px-pc {
    font-size: 20px !important;
  }

  .w-100-pc-1024 {
    width: 80% !important;
  }

  .w-450px {
    width: 450px !important;
  }

  .right--6px {
    right: 6px !important;
  }

  .bottom--90px {
    bottom: -90px !important;
  }

  .left-54px {
    left: 54px !important;
  }

  .left-27px {
    left: 27px !important;
  }

  .hieght-400px {
    height: 415px !important;
  }

  .w-h {
    width: 180px !important;
    height: 200px !important;
  }

  .w-400px {
    width: 400px !important;
  }

  .text-30px-media-1572px {
    font-size: 30px !important;
  }

  .left-46rem-media-1572px {
    left: 46rem !important;
  }
}

@media (min-width: 1024px) and (max-width: 1300px) {
  .text-media-1300px-18px {
    font-size: 18px !important;
  }

  .height-860px-media-1300px {
    height: 856px !important;
  }

  .media-1300-h-w {
    height: 120px !important;
    width: 120px !important;
  }

  .media-1300-left-70px {
    left: 70px !important;
  }

  .pading-x-20px-media-1300 {
    padding-left: 20px !important;
    padding-right: 20px !important;
    padding-top: 60px !important;
  }

  .left-46rem-media-1572px {
    left: 39rem !important;
  }
}

@media (max-width: 1800px) {
  .laptop-right-0px {
    right: 0px !important;
  }
}

@media (min-width: 1024px) and (max-width: 1850px) {
  .hieght-340px {
    height: 340px !important;
  }
  .header-1280px {
    max-width: 1280px !important;
    justify-content: space-between !important;
  }
  .text-font-20px-pc {
    font-size: 20px !important;
  }
  .header-1280px .text-title-header {
    font-size: 16px !important;
  }

  .icon-header {
    font-size: 16px !important;
  }

  .header-1280px .nav-item > ul > li {
    font-size: 12px !important;
    padding: 5px 8px !important;
    display: flex !important;
    justify-content: center !important;
  }

  .image-header {
    width: 40px !important;
    height: 40px !important;
  }

  .magin-top-0px {
    margin-top: 0px !important;
  }
  .magin-bottom-0px {
    margin-bottom: 0px !important;
  }

  .line-height-p {
    line-height: 26px !important;
  }

  .border-banner-h-1 {
    height: 10px !important;
  }

  .border-banner-h-2 {
    height: 20px !important;
  }

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

  .text-size-14px {
    font-size: 14px !important;
  }

  .text-size-16px {
    font-size: 16px !important;
  }

  .text-size-18px {
    font-size: 18px !important;
  }

  .text-size-20px {
    font-size: 20px !important;
  }

  .text-size-24px {
    font-size: 24px !important;
  }

  .text-size-40px {
    font-size: 40px !important;
  }

  .button-padding-font-size-14 {
    margin-top: 20px !important;
    width: 110px !important;
    padding: 8px 16px !important;
    font-size: 14px !important;
  }

  .pading-x-20px {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }

  .padding-x-10px {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }

  .pading-y-10px {
    padding-top: 10px !important;
    padding-bottom: 10px !important;
  }
  .bg-url {
    padding-bottom: 31px;
    padding-top: 29px;
    background-image: url("../assets/image/statistic-bar.png");
    background-size: cover;
    background-position: center;
    height: auto;
  }

  .w-1-3-pc {
    width: 33.333333% !important;
  }

  .pading-0-system {
    padding: 0 !important;
  }

  .gap-0-px {
    gap: 0px !important;
  }

  .w-40-pc {
    width: 40% !important;
  }

  .z-index-10 {
    z-index: 10 !important;
  }

  .z-index-15 {
    z-index: 15 !important;
  }

  .bottom-150px {
    bottom: 60px !important;
  }

  .left-0-px {
    left: 0px !important;
  }

  .magin-bottom-0px {
    margin-bottom: 0px !important;
  }

  .hight-auto {
    height: auto !important;
  }

  .w-400px {
    width: 400px !important;
  }

  .hight-178px {
    height: 178px !important;
  }

  .right-0px {
    right: 0px !important;
  }

  .left-0px {
    left: 0px !important;
  }

  .left--16px {
    left: -16px !important;
  }
  .bottom-148px {
    bottom: -148px !important;
  }

  .left-138px {
    left: 138px !important;
  }

  .left--28px {
    left: -28px !important;
  }

  .w-auto-h-auto {
    width: auto !important;
    height: auto !important;
  }

  .height-100-percent {
    height: 100% !important;
  }

  .left-100-px {
    left: 100px !important;
  }

  .max-w-100 {
    max-width: 100% !important;
  }

  .padding-x-24px {
    padding-left: 24px !important;
    padding-right: 24px !important;
  }

  .w-90-pc {
    width: 90% !important;
  }

  .flex-center-content {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
  }

  .w-1-2-pc {
    width: 50% !important;
  }

  .padding-20px-pc-1024 {
    padding-left: 30px !important;
    padding-right: 30px !important;
  }
}

.line-height-100-news {
  line-height: 100% !important;
}

@media (max-width: 450px) {
  .text-14px-450px {
    font-size: 14px !important;
  }

  .text-16px-450px {
    font-size: 16px !important;
  }

  .text-size-18px-450px {
    font-size: 18px !important;
    line-height: 26px !important;
  }

  .pading-buttom-450px {
    padding: 8px 30px !important;
  }

  .pading-left-20px-450px {
    padding-left: 20px !important;
  }

  .pading-left-15px-450px {
    padding-left: 15px !important;
  }

  .pading-left-35px-450px {
    padding-left: 35px !important;
  }

  .height-width-450px {
    height: 40px !important;
    width: 45px !important;
  }

  .left-75px-450px {
    left: 70px !important;
  }

  .text-20px-450px {
    font-size: 20px !important;
  }

  .pading-px-button {
    padding-left: 30px !important;
    padding-right: 30px !important;
    padding-top: 10px !important;
    padding-bottom: 10px !important;
    font-size: 14px !important;
  }
}

@media (min-width: 1024px) and (max-width: 1250px) {
  .text-font-16px-1250px {
    font-size: 16px !important;
  }

  .padding-1250px {
    padding-left: 40px !important;
    padding-right: 40px !important;
    padding-top: 40px;
  }

  .left-70px-1250px {
    left: 70px !important;
  }

  .w-335px-1250px {
    width: 425px !important;
  }

  .text-26px-1250px {
    font-size: 26px !important;
  }

  .left-485px-1250px {
    left: 485px !important;
  }

  .left-31rem-1250px {
    left: 31rem !important;
  }
}

@media (min-width: 1024px) and (max-width: 1200px) {
  .gap-50px-1250px {
    gap: 30px !important;
  }
}