/* ==================================================
   RESPONSIVE SYSTEM (Refactor)
   Breakpoints:
   - Mobile: <= 739px
   - Tablet: 740px – 1023px
   - Desktop: >= 1024px
   - Desktop Large: >= 1920px
   ================================================== */

/* ==================================================
   MOBILE + TABLET (<=1023px)
   ================================================== */
@media (max-width: 1023px) {
  /* Hệ thống */
  .hethong-wrap:nth-of-type(3n + 1) .hethong-card {
    border-left: 2px solid #bfbfbf;
    padding-left: 18px;
  }

  /* Info */
  .info-card {
    border-bottom: 2px solid #fff;
  }

  .info-item:nth-child(odd) .info-item--detail {
    padding-left: 0;
  }

  .info-item:nth-child(even) .info-item--detail {
    padding-right: 0;
  }

  .info-detail-1 {
    padding-left: 0;
  }

  .info-detail-2 {
    padding-right: 0;
  }

  .info:nth-child(odd) .flex-on-mobile {
    flex-direction: column-reverse;
  }

  /* Layout */
  .flex-column-reverse {
    flex-direction: column-reverse;
  }

  .product-item {
    margin-bottom: 40px;
  }

  .category-product-detail-odd,
  .category-product-detail-even {
    padding: 0 10px;
  }

  .product-other-title {
    margin: 0;
  }

  /* Album */
  .album-slide .swiper-slide {
    opacity: 1;
  }

  /* Contact */
  .contact__right,
  .contact__right-social {
    right: 5px;
  }
}

/* ==================================================
   TABLET ONLY (740px – 1023px)
   ================================================== */
@media (min-width: 740px) and (max-width: 1023px) {
  .news-item {
    height: 400px;
  }
}

/* ==================================================
   MOBILE ONLY (<=739px)
   ================================================== */
@media (max-width: 739px) {
  .certificate-item {
    justify-content: start;
    margin: 10px 0;
    border: none;
  }
  .infoleader-wrapper .cell-1-3.tab-cell-1-1,
  .duan-wrapper .cell-1-4.tab-cell-1-1 {
    margin-bottom: 10px;
  }
  .pagecat-title {
    width: 100% !important;
  }
}

/* ==================================================
   DESKTOP LARGE (>=1920px)
   ================================================== */
@media (min-width: 1920px) {
  .grid {
    width: 100%;
    max-width: 1300px;
    margin: 0 auto;
  }

  .gallery-thumbs-height {
    height: 505px;
  }
}