.product-container {
  color: #333333;
  font-weight: 400;
  width: 1400px;
  margin: 0 auto;
  padding: 0 44px;
  font-size: 18px;
  .row {
    margin-left: -16px;
    margin-right: -16px;
    .col {
      padding-left: 16px;
      padding-right: 16px;
      color: inherit;
    }
    .left-side {
      margin-top: 97px;
      margin-bottom: 97px;
      flex: 0 0 294px;
      .filter {
        font-size: 18.5px;
        margin-bottom: 45px;
      }
      .text-search {
        margin-bottom: 10px;
      }
      .form-control {
        margin-bottom: 36px;
        border-radius: 0;
        border-color: #1c1c1c;
        height: 48px;
        background: url('/assets/front/images/search3.png') no-repeat right 10px center;
      }
      .category {
        background: #f9f9f9;
        height: 41px;
        padding-left: 11px;
        display: flex;
        align-items: center;
        margin-bottom: 25px;
      }
      .check {
        display: flex;
        flex-direction: column;
        gap: 60px;
        margin-bottom: 39px;
      }
      .list-check {
        display: flex;
        flex-direction: column;
        gap: 12px;
        > div {

        }

        .chk {
          appearance: none;
          -webkit-appearance: none;
          -moz-appearance: none;
          width: 18px; height: 18px;
          margin-right: 8px;
          cursor: pointer;
          border: 1px solid #1c1c1c;
          border-radius: 2px;
          display: inline-grid;
          place-content: center;
          background: #fff;
          transition: border-color .2s, background-color .2s, box-shadow .2s;
          vertical-align: middle; /* giữ thẳng hàng text */
        }

        .chk:focus {
          outline: none;
          /*box-shadow: 0 0 0 3px rgba(34,197,94,0.3);*/
        }

        .chk:checked {
          background: #2fa41f;
          border: 1px solid #9ca3af;
        }

        /* Checkmark không làm thay đổi layout */
        .chk::after {
          content: "";
          width: 6px; height: 10px;
          transform: rotate(45deg);
          border-right: 2px solid transparent;
          border-bottom: 2px solid transparent;
          margin-bottom: 2px;
        }

        .chk:checked::after {
          border-right-color: #fff;
          border-bottom-color: #fff;
        }

        label {
          display: inline-flex;
          align-items: center;
          gap: 8px;
          cursor: pointer;
        }
      }

      .btn-search {
        width: 100%;
        background: #161718;
        color: #fff;
        font-size: 16px;
        font-weight: 300;
        display: flex;
        justify-content: center;
        align-items: center;
        height: 45px;
        border-radius: 20px;
      }
    }

    .right-side {
      .col {
        margin-bottom: 18px;
      }
      .form-select {
        width: 222px;
        border: 1px solid #1c1c1c;
        border-radius: 0;
        height: 56px;
        font-size: 17.5px;
        font-weight: 400;
      }
      .product-top {
        padding-bottom: 25px;
        border-bottom: 2px solid #e3e7e7;
      }
      .product-content {
        padding-top: 47px;
        padding-bottom: 70px;
        .img-fluid {
          min-height: 200px;
          max-height: 200px;
          object-fit: contain;
        }
        .product-detail {
          padding-top: 18px;
          .title {
            font-size: 20px;
            font-weight: 500;
          }
          .description {
            font-size: 14px;
            font-weight: 400;
            padding-bottom: 38px;
          }
          .brand-image {
            min-width: 45px;
            max-width: 45px;
            object-fit: contain;
            border: 1px solid #bbbbbb;
          }
        }
      }

      .category {
        display: flex;
        flex-direction: row;
        gap: 7px;
        .category-item {
          width: 77px;
          height: 29px;
          display: flex;
          align-items: center;
          border: 1px solid #d4d4d4;
          font-size: 14px;
          font-weight: 400;
          justify-content: center;
        }
      }

      .price {
        font-size: 21px;
        font-weight: 500;
        small {
          font-size: 15px;
        }
      }

      .pagination {
        display: flex;
        ul {
          margin-left: auto;
          list-style: none;
          display: flex;
          flex-direction: row;
          gap: 5px;
          li {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 40px;
            height: 40px;
            font-size: 19px;
            font-weight: 400;
            border: 1px solid #e8e8e8;
            cursor: pointer;
            a {
              display: inline-flex;
              align-items: center;
              justify-content: center;
              width: 100%;
              height: 100%;
              text-decoration: none;
              color: inherit;
            }
            &.active {
              background: #2fa41f;
              border-color: #2fa41f;
              color: #fff;
            }
            &.next {
              background: url("/assets/front/images/paging-next.png") no-repeat center center;
            }
            &.previous {
              background: url("/assets/front/images/paging-next.png") no-repeat center center;
              transform: rotate(180deg);
            }
            &.disabled {
              opacity: 0.5;
              cursor: not-allowed;
              pointer-events: none;
            }
          }
        }
      }
    }
  }
  h1 {
    font-size: 30px;
    font-weight: 500;
  }
}