@media (max-width: 767px) {
  html,
  body,
  #app {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
  }

  body {
    position: relative;
  }

  img,
  video,
  canvas {
    max-width: 100%;
  }

  .fixed.top-0.left-0.right-0 {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
  }

  .header-inner {
    padding-left: 12px !important;
    padding-right: 12px !important;
    gap: 8px !important;
  }

  .header-inner > * {
    min-width: 0 !important;
  }

  .nav-bar {
    justify-content: flex-start !important;
    gap: 8px !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
    scroll-padding-left: 12px !important;
    -webkit-overflow-scrolling: touch;
  }

  .nav-bar .nav-link {
    padding-left: 10px !important;
    padding-right: 10px !important;
    font-size: 13px !important;
  }

  .slick-slider,
  .slick-list {
    max-width: 100% !important;
    overflow: hidden !important;
  }

  .slick-track {
    max-width: none !important;
  }

  .w-full.max-w-\[1216px\],
  .w-full.max-w-\[1200px\],
  .max-w-\[1216px\],
  .max-w-\[1200px\] {
    width: 100% !important;
    max-width: 100% !important;
  }

  .bg-\[\#fafafa\] {
    overflow-x: hidden !important;
  }

  .baseFooter {
    width: 100% !important;
    max-width: 100% !important;
    padding: 22px 16px !important;
    overflow-x: hidden !important;
  }

  .baseFooter > div {
    width: 100% !important;
    max-width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 16px !important;
    text-align: center !important;
  }

  .baseFooter .flex-end,
  .baseFooter .flex {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
  }

  .baseFooter .ml-\[32px\] {
    margin-left: 0 !important;
    font-size: 14px !important;
    line-height: 1.6 !important;
  }

  .baseFooter img {
    width: 78px !important;
    height: 78px !important;
    object-fit: contain !important;
  }

  .pnp-soft-section {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  .pnp-soft-title h2 {
    font-size: 24px !important;
  }

  .pnp-soft-card {
    width: 100% !important;
    min-height: 0 !important;
    padding: 16px 14px 22px !important;
  }

  .pnp-soft-icon {
    width: 100% !important;
    max-width: 260px !important;
    height: 145px !important;
  }

  .pnp-soft-name {
    font-size: 22px !important;
    white-space: normal !important;
  }

  .pnp-soft-desc {
    white-space: normal !important;
  }

  .pnp-soft-modal-card {
    max-height: calc(100vh - 32px) !important;
    overflow-y: auto !important;
    padding: 18px !important;
  }
}