@nyris/nyris-webapp 0.2.5 → 0.3.2

package/src/modules/LandingPage/common.scss

@@ -0,0 +1,1304 @@
+// TODO: CSS common all repo
+* {
+  margin: 0;
+  padding: 0;
+  font-family: "Montserrat" !important;
+}
+.w-100 {
+  width: 100% !important;
+}
+.w-50 {
+  width: 50% !important;
+}
+.textarea-ct {
+  padding: 5px 10px;
+}
+.bg-dark {
+  background-color: #2b2c46 !important;
+}
+.bg-pink2 {
+  background-color: #e31b5d !important;
+}
+a {
+  text-decoration: none !important;
+  &:hover {
+    color: #3e36dc !important;
+  }
+}
+.text-gray2 {
+  color: #55566b !important;
+}
+
+.box-gray2 {
+  background-color: #e9e9ec;
+}
+
+button {
+  min-width: auto !important;
+}
+.ml-auto {
+  margin-left: auto !important;
+}
+.mr-auto {
+  margin-right: auto !important;
+}
+.mt-auto {
+  margin-top: auto !important;
+}
+.w-100 {
+  width: 100%;
+}
+
+.fw-500 {
+  font-weight: 500 !important;
+}
+.fw-600 {
+  font-weight: 600 !important;
+}
+.fw-700 {
+  font-weight: 700 !important;
+}
+.text-dark {
+  color: #1e1f31;
+}
+.text-dark2 {
+  color: #2b2c46;
+}
+.text-white {
+  color: #fff !important;
+}
+
+.text-gray {
+  color: #55566b;
+}
+
+.text-f40 {
+  font-size: 40px !important;
+  line-height: 37px !important;
+}
+
+.text-btn-small {
+  font-family: "Montserrat";
+  font-weight: 500 !important;
+  font-size: 11px !important;
+  line-height: 14px !important;
+  text-transform: initial !important;
+}
+.bg-pink {
+  background-color: #f9d1df !important;
+}
+.text-red {
+  color: #e31b5d !important;
+}
+
+.text-f8 {
+  font-family: "Montserrat" !important;
+  font-weight: 500 !important;
+  font-size: 11px !important;
+  line-height: 14px !important;
+}
+
+.text-f9 {
+  font-family: "Montserrat";
+  font-size: 11px !important;
+  line-height: 14px !important;
+}
+
+.text-f12 {
+  font-size: 12px !important;
+  line-height: 16px !important;
+}
+.text-f13 {
+  font-size: 13px !important;
+  line-height: 16px !important;
+}
+
+.text-f40 {
+  font-size: 40px !important;
+  line-height: 37px !important;
+}
+
+.text-f16 {
+  font-size: 16px;
+  line-height: 17px;
+}
+.max-line-1 {
+  word-break: break-word;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  max-height: 33px; /* fallback */
+  -webkit-line-clamp: 1; /* number of lines to show */
+  -webkit-box-orient: vertical;
+}
+
+.max-line-3 {
+  word-break: break-word;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  // max-height: 33px; /* fallback */
+  -webkit-line-clamp: 3; /* number of lines to show */
+  -webkit-box-orient: vertical;
+  min-height: 42px;
+}
+
+.btn-ct {
+  border-right: 1px solid #e9e9ec;
+  font-weight: 500;
+  font-size: 11 !important;
+  line-height: 14px !important;
+  color: #2b2c46 !important;
+  font-family: "Montserrat" !important;
+  padding: 0 10px;
+  &::before,
+  &::after {
+    border: 0px !important;
+  }
+  .MuiSelect-select {
+    &:focus {
+      background-color: initial;
+    }
+  }
+}
+.box-wrap-loading {
+  position: absolute;
+  background: #00000075;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 100;
+  top: 0;
+}
+
+.loadingSpinCT {
+  position: absolute;
+  width: 104px;
+  height: 104px;
+  top: calc(-104px / 2);
+  // background: #fff;
+  border-radius: 100%;
+  z-index: 111;
+  left: 0;
+  right: 0;
+  margin: auto;
+  &::after {
+    content: "loading";
+    position: absolute;
+    top: 0;
+    margin: auto;
+    bottom: 0;
+    width: 87%;
+    height: 87%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    z-index: 112;
+    font-size: 14px !important;
+    line-height: 38px;
+    font-weight: 500;
+    color: #fff;
+    background: rgba(43, 44, 70, 1);
+    margin: auto;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    border-radius: 100%;
+  }
+  &::before {
+    content: "";
+  }
+  .box-content-spin {
+    width: 104px;
+    height: 104px;
+    position: absolute;
+    border-radius: 100%;
+    animation: spin 2s linear infinite;
+    &:before {
+      content: "";
+      position: absolute;
+      top: 0;
+      right: 0;
+      bottom: 0;
+      left: 0;
+      z-index: 0;
+      border-radius: 100%;
+      // background: linear-gradient(
+      //   180deg,
+      //   #3e36dc 0%,
+      //   #e31b5d 44.27%,
+      //   rgba(255, 255, 255, 0) 100%
+      // );
+      background: conic-gradient(
+        from 90deg at 50.46% 50.46%,
+        #322bb0 -30.73deg,
+        #3e36dc 111.58deg,
+        #00ff94 212.7deg,
+        #322bb0 329.27deg,
+        #3e36dc 471.58deg
+      );
+      box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.25);
+    }
+    @-webkit-keyframes spin {
+      0% {
+        -webkit-transform: rotate(0deg);
+      }
+      100% {
+        -webkit-transform: rotate(360deg);
+      }
+    }
+
+    @keyframes spin {
+      0% {
+        transform: rotate(0deg);
+      }
+      100% {
+        transform: rotate(360deg);
+      }
+    }
+  }
+}
+
+.box-modal-default {
+  height: 80%;
+  width: 40%;
+  min-height: 468px;
+  min-width: 330px;
+  display: flex;
+  flex-direction: column;
+  // justify-content: space-between;
+  background-color: #fff;
+  position: relative;
+  &.box-modal-share {
+    min-height: 192px;
+    width: 186px;
+    box-shadow: 0px 0px 13px rgba(30, 31, 49, 0.3);
+    border-radius: 5px;
+    .box-content-box-share {
+      padding: 0px 10px 10px 10px;
+      .box-input {
+        display: flex;
+        padding: 5px 10px;
+        box-shadow: initial;
+        background-color: #f3f3f5;
+        input {
+          color: #55566b !important;
+        }
+      }
+      .box-media-share {
+        button {
+          width: 100%;
+          padding: 0;
+          .MuiButton-label {
+            justify-content: flex-start !important;
+          }
+        }
+        p {
+          text-transform: initial;
+        }
+      }
+    }
+  }
+  .icon-ct {
+    font-size: 11px;
+  }
+
+  .btn-carousel-left {
+    position: absolute;
+    top: 0;
+    left: -10px;
+    bottom: 0;
+    margin: auto;
+    z-index: 11;
+
+    &:hover {
+      background-color: initial !important;
+    }
+  }
+
+  .btn-carousel-right {
+    position: absolute;
+    top: 0;
+    right: -10px;
+    bottom: 0;
+    margin: auto;
+    z-index: 11;
+    &:hover {
+      background-color: initial !important;
+    }
+  }
+
+  .box-carosel {
+    height: 60%;
+    padding: 0px 14px;
+    min-height: 330px;
+    position: relative;
+    .carousel-root {
+      height: 100%;
+      .carousel-slider {
+        height: 100%;
+      }
+    }
+    .slider-wrapper{
+      height: 100%;
+      .slider{
+        height: 100%;
+      }
+    }
+    .icon-style {
+      border-radius: 100%;
+      position: absolute;
+      bottom: 16px;
+      left: 16px;
+      button {
+        padding: 0;
+      }
+      img {
+        width: 32px !important;
+        height: 32px;
+        padding: 0;
+      }
+    }
+    img {
+      width: fit-content !important;
+      // height: 330px;
+      // padding-bottom: 20px;
+      // max-width: 310px;
+    }
+    // overflow: hidden;
+    .control-dots {
+      margin: 0px;
+      li.dot {
+        box-shadow: none !important;
+        width: 5px;
+        height: 5px;
+        padding: 0;
+        background: #aaabb5;
+        &.active {
+          background: #55566b;
+        }
+      }
+    }
+  }
+
+  .box-content {
+    background-color: #fafafa;
+    padding: 16px;
+    min-height: 138px;
+    margin-top: auto;
+    height: 40%;
+    .MuiIconButton-label {
+      width: 100% !important;
+    }
+    .box-bottom {
+      margin-top: auto;
+      .btn-item {
+        width: fit-content !important;
+        min-width: auto !important;
+        img {
+          width: 20px;
+        }
+        padding: 0 5px;
+        &:first-child {
+          padding-left: 0;
+        }
+        &:last-child {
+          padding-right: 0;
+        }
+      }
+    }
+    .box-gray {
+      background: linear-gradient(180deg, #aaabb5 0%, #55566b 100%);
+      &.box-support {
+        width: 21px;
+        height: 21px;
+        border-radius: 100%;
+      }
+      img {
+        width: 10px;
+        height: 10px;
+      }
+    }
+  }
+
+  .box-btn-next-item {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    width: 140%;
+    margin: auto;
+    height: 36px;
+    left: -20%;
+    z-index: 22;
+    .icon-left,
+    .icon-right {
+      border-radius: 100%;
+      width: 32px;
+      height: 32px;
+      background: linear-gradient(0deg, #cc1854 0%, #e31b5d 100%);
+      .style-icon {
+        font-size: 11px;
+        color: #fff;
+      }
+    }
+  }
+}
+
+.wrap-main-item-result {
+  .box-top {
+    position: relative;
+    .box-icon-modal {
+      bottom: 10px;
+      left: 10px;
+      position: absolute;
+      border-radius: 100%;
+      filter: drop-shadow(0px 0px 2.66667px rgba(85, 86, 107, 0.502974));
+      display: block;
+      overflow: hidden;
+      z-index: 11;
+      button {
+        padding: 0px;
+      }
+    }
+    .box-image {
+      text-align: center;
+      background-color: #fff;
+      height: 159px;
+      z-index: 10;
+      position: relative;
+      .img-style {
+        // width: 160px !important;
+        height: 153px !important;
+      }
+      &:hover .box-hover {
+        display: flex;
+      }
+      .box-hover {
+        position: absolute;
+        top: 0;
+        right: 0;
+        z-index: 10;
+        background: #56576cb3;
+        width: 100%;
+        height: 100%;
+        display: none;
+        justify-content: center;
+        align-items: center;
+        button {
+          font-size: 11px;
+          font-weight: 600;
+          line-height: 14px;
+          color: #fafafa;
+          text-transform: initial;
+        }
+      }
+    }
+  }
+
+  .box-content {
+    background-color: #e9e9ec;
+    padding: 8px 12px;
+    min-height: 82px;
+    justify-content: space-between;
+    .box-top {
+      .btn-item {
+        width: fit-content !important;
+        min-width: auto !important;
+        padding: 0 5px;
+        &:first-child {
+          padding-left: 0;
+        }
+        &:last-child {
+          padding-right: 0;
+        }
+      }
+    }
+    .box-bottom {
+      .btn-item {
+        width: fit-content !important;
+        min-width: auto !important;
+        padding: 0 5px;
+        &:first-child {
+          padding-left: 0;
+        }
+        &:last-child {
+          padding-right: 0;
+        }
+      }
+    }
+    .box-gray {
+      background: linear-gradient(180deg, #aaabb5 0%, #55566b 100%);
+      &.box-support {
+        width: 21px;
+        height: 21px;
+        border-radius: 100%;
+      }
+      img {
+        width: 10px;
+        height: 10px;
+      }
+    }
+  }
+}
+
+.box-content-main {
+  position: relative;
+  &.loading {
+    &::before {
+      content: "";
+      position: absolute;
+      width: 100%;
+      height: 100%;
+      background: rgba(43, 44, 70, 0.8);
+      z-index: 111;
+    }
+
+    z-index: 111;
+  }
+  .box-thumb {
+    .box-camera,
+    .box-qr {
+      width: 42px;
+      height: 42px;
+      background: #d8d7f8;
+      border-radius: 2px;
+      margin-right: 5px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      button {
+        padding: 0;
+        width: 100%;
+        height: 100%;
+      }
+    }
+    .exampleImages {
+      padding-bottom: 0px !important;
+      display: flex;
+      justify-content: center;
+    }
+    .useExampleImg {
+      margin-top: 0px !important;
+
+      .title-box {
+        font-size: 11px;
+        font-family: "Montserrat" !important;
+        line-height: 21px;
+        color: #fff !important;
+        text-align: center;
+        font-weight: 700;
+      }
+      .exImagesWrap {
+        img {
+          width: 42px;
+          height: 42px;
+          opacity: 1 !important;
+        }
+      }
+    }
+  }
+
+  .text-tractor {
+    font-size: 32px;
+    line-height: 21px;
+    color: #ffffff;
+    font-weight: 300;
+    font-family: "Montserrat";
+  }
+  .text-drop-file {
+    font-family: "Montserrat";
+    font-weight: 700;
+    font-size: 32px;
+    line-height: 21px;
+    color: #ffffff;
+  }
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  align-items: center;
+  height: 100%;
+  background: #fff;
+  .box-content_top {
+    width: 100%;
+    min-height: calc(100% - 341px);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-direction: column;
+    padding-bottom: 100px;
+    .box-logo {
+      width: 64px;
+      height: 64px;
+      background: linear-gradient(180deg, #fafafa 0%, #e9e9ec 100%);
+      border-radius: 100%;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+    .box-input {
+      margin-top: 27px;
+      max-width: 640px;
+    }
+    .box-bottom {
+      margin-top: 26px;
+      .text-bottom {
+        font-family: "Montserrat";
+        font-weight: 600;
+        font-size: 11px;
+        line-height: 14px;
+        color: #55566b;
+      }
+    }
+  }
+  .box-content_bottom {
+    width: 100%;
+    height: 100%;
+    position: relative;
+    @media screen and (min-width: 2047px)  {
+      position: initial;
+      .loadingSpinCT{
+        top: 0;
+        bottom: 0;
+      }
+    }
+
+    .box-content-drop {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+    }
+    .box-image {
+      width: 64px;
+      height: 64px;
+      background: linear-gradient(180deg, #56577c 0%, #2b2c46 100%);
+      border-radius: 100%;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      margin-bottom: 16px;
+    }
+    .box-content-main-drop {
+      background: linear-gradient(180deg, #3e36dc 0%, #2b2c46 100%);
+      padding: 21px;
+      height: 100%;
+      animation: gradient 15s ease infinite;
+      position: relative;
+      background-size: 100% 100%;
+      @media screen and (min-width: 2047px)  {
+        position: initial;
+      }
+      @keyframes gradient {
+        0% {
+          background-position: 0% 50%;
+        }
+        50% {
+          background-position: 100% 50%;
+        }
+        100% {
+          background-position: 0% 50%;
+        }
+      }
+    }
+    .box-content-main {
+      background: #1e1f31;
+      padding: 21px;
+      height: 100%;
+      @media screen and (min-width: 2047px)  {
+        position: inherit;
+      }
+    }
+    .box-border {
+      border: 2px dashed #aaabb5;
+      height: 100%;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      color: #fff;
+      width: 100%;
+      flex-direction: column;
+    }
+  }
+}
+.btn-input-search {
+  background: #f7f7f7;
+  border: 0px;
+  width: 32px;
+  height: 32px;
+  border-radius: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  cursor: pointer;
+}
+
+.inputFile {
+  // display: block !important;
+}
+.text-blue {
+  color: #3e36dc !important;
+}
+
+.box-blue {
+  background: #3e36dc;
+  box-shadow: 1.33333px 1.33333px 13.3333px rgba(0, 0, 0, 0.3);
+  border-radius: 16px;
+  padding: 5px;
+}
+.text-f20 {
+  font-family: "Montserrat";
+  font-size: 16px;
+  line-height: 21px;
+}
+.text-bold {
+  font-weight: 600 !important;
+}
+
+.text-center {
+  text-align: center !important;
+}
+
+// TODO: css result component
+.box-wrap-result-component {
+  min-height: calc(100vh - 32px);
+  display: flex;
+  justify-content: space-between;
+  flex-direction: column;
+  // height: calc(100vh - 32px);
+  background-color: #fafafa;
+  .box-search {
+    margin: 0px auto;
+    padding: 32px 0;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    background-color: #fff;
+    flex-direction: column;
+    width: 100%;
+    .box-filter {
+      margin-top: 26px;
+      background: #f3f3f5;
+      max-width: 1083px;
+      width: 100%;
+      min-height: 32px;
+    }
+  }
+  .box-result {
+    // max-width: 1280px;
+    // height: calc(100% - 164px - 32px);
+    // overflow: hidden;
+    height: calc(100vh - 164px - 104px);
+    // width: 1280px;
+    display: flex;
+    justify-content: space-between;
+    // margin: auto;
+    overflow: auto;
+    .col-left {
+      width: fit-content;
+      height: fit-content;
+      margin-right: 62px;
+      // width: 517px;
+      min-height: 462px;
+      // transform: rotate(90deg);
+      // transition: ease-in-out 0.5s;
+      position: relative;
+      &.toggle {
+        .box-title_col-left {
+          display: none;
+        }
+      }
+      .box-title_col-left {
+        position: absolute;
+        bottom: 10px;
+        left: 0;
+        right: 0;
+        margin: auto;
+        width: fit-content;
+      }
+      &.toggle {
+        width: 32px;
+        padding: 0px;
+        div {
+          // display: none;
+        }
+        .box-preview {
+          border: 0px;
+          .preview-item {
+          }
+        }
+        .button-toggle {
+          right: -5px;
+        }
+      }
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      background: #1e1f31;
+      padding: 32px;
+      .box-preview {
+        width: 100%;
+        // border: 2px dashed #55566b;
+        display: flex;
+        justify-content: center;
+        align-content: center;
+        height: 100%;
+        position: relative;
+        // transition: ease-in-out 0.5s;
+        .preview-item {
+          // height: 100%;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          // width: 100%;
+          max-width: 500px;
+          max-height: 500px;
+        }
+      }
+      .button-toggle {
+        height: 32px;
+        width: 10px;
+        padding: 0px;
+        min-width: auto;
+        position: absolute;
+        right: -37px;
+        top: 0;
+        bottom: 0;
+        margin: auto;
+        background-color: #e9e9ec;
+        box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.5);
+        border-radius: 5px;
+        // transition: ease-in-out 1s;
+      }
+    }
+    .col-right {
+      width: calc(100% - 462px);
+      // overflow: auto;
+      .box-item-result {
+        max-width: 714px;
+        @media screen and (min-width: 2047px) {
+          max-width: 1300px;
+        }
+        margin: 16px 0;
+        // margin-right: auto !important;
+        ul {
+          padding: 0;
+          display: flex;
+          flex-wrap: wrap;
+          // justify-content: center;
+          li {
+            list-style: none;
+            width: 174px;
+            &:last-child {
+              margin-right: auto !important;
+            }
+          }
+        }
+        .ais-InfiniteHits-loadMore {
+          display: none;
+        }
+      }
+    }
+  }
+
+  .box-notify {
+    height: 32px;
+    background: #f3f3f5;
+    border-top: 1px solid #e9e9ec;
+    .item-notify {
+      height: 100%;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+  }
+}
+
+.box-main-filter {
+  .item {
+    width: calc(44% - 20px);
+    padding: 0 10px;
+    .btn-ct {
+      padding: 2px !important;
+      border: 0px;
+    }
+  }
+  .item-one {
+    min-width: 243px;
+  }
+  .item-tow {
+    min-width: 122px;
+  }
+  .item-three {
+    min-width: 259px;
+  }
+  .item-four {
+    min-width: 125px;
+  }
+  .item-five {
+    min-width: 123px;
+  }
+  .item-six {
+    min-width: 115px;
+  }
+  .item-seven {
+    min-width: 94px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+}
+
+// TODO: search history
+.wrap-main-search-history {
+  background-color: #fafafa;
+  height: 100%;
+  .box-main-top {
+    background-color: #fff;
+    padding: 32px 0;
+    margin: auto;
+    display: flex;
+    justify-content: center;
+  }
+
+  .box-main-bottom {
+    padding: 20px 16px;
+    height: calc(100% - 106px);
+    display: flex;
+    .col-left {
+      .box-time {
+        padding: 0;
+        li {
+          list-style-type: none;
+          padding: 0;
+          margin: 0;
+          .active {
+            font-weight: 700;
+          }
+          button {
+            padding: 0;
+          }
+        }
+      }
+    }
+    .col-right {
+      min-width: 568px;
+      margin-left: auto;
+      margin-right: auto;
+      // background-color: aquamarine;
+      overflow: auto;
+      .box-image-search {
+        width: 32px;
+        height: 32px;
+        border-radius: 2px;
+        background-color: #fff;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        margin-right: 10px;
+        img {
+          max-width: fit-content !important;
+        }
+      }
+      .MuiDataGrid-root {
+        flex: none !important;
+        border: 0 !important;
+        .MuiDataGrid-columnHeader:focus-within,
+        .MuiDataGrid-root .MuiDataGrid-cell:focus-within {
+          outline: none !important;
+        }
+        .MuiDataGrid-columnHeaderTitleContainer {
+          justify-content: space-between;
+        }
+        .MuiDataGrid-sortIcon {
+          opacity: 1;
+        }
+        .MuiDataGrid-window {
+          top: 43px !important;
+          // height: f;
+        }
+        .MuiDataGrid-iconSeparator {
+          display: none !important;
+        }
+        .MuiDataGrid-columnsContainer {
+          background: #aaabb5;
+          min-height: auto !important;
+          line-height: 12px !important;
+          .MuiSvgIcon-root {
+            color: #fff !important;
+          }
+        }
+        .MuiDataGrid-row {
+          max-width: inherit !important;
+          min-height: inherit !important;
+          &.Mui-selected {
+            background-color: inherit !important;
+          }
+        }
+        .MuiDataGrid-cell--textLeft.MuiDataGrid-cell--withRenderer,
+        .MuiDataGrid-cell--textCenter.MuiDataGrid-cell--withRenderer {
+          line-height: inherit !important;
+          min-height: inherit !important;
+          max-height: inherit !important;
+        }
+        .MuiDataGrid-cell {
+          border: 0px !important;
+          &:last-child {
+            display: none;
+          }
+        }
+      }
+    }
+  }
+}
+
+// Todo: css page saved
+.wrap-main-saved {
+  height: 100%;
+  background-color: #fafafa;
+  .box-main-top {
+    .box-top {
+      background-color: #fff;
+      padding: 32px 0;
+    }
+    .box-bottom {
+      margin-top: 26px;
+      text-align: center;
+      display: flex;
+      justify-content: center;
+    }
+  }
+
+  .box-main-bottom {
+    max-width: 726px;
+    width: 726px;
+    margin-left: auto;
+    margin-right: auto;
+  }
+}
+
+// TODO: css page Profile
+
+.wrap-main-profile {
+  max-width: 1280px;
+  margin: auto;
+  .box-col-left {
+    .box-top {
+      min-height: 170px;
+      display: flex;
+      justify-content: center;
+      align-items: flex-start;
+      flex-direction: column;
+      padding: 0 94px;
+      background-color: #fff;
+    }
+    .box-bottom {
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      align-items: center;
+      height: calc(100% - 170px);
+      background: #fafafa;
+      .box-content {
+        width: 242px;
+        span {
+          font-size: 11px !important;
+          line-height: 14px !important;
+          color: #2b2c46 !important;
+          font-weight: 500 !important;
+          margin-bottom: 5px;
+        }
+        input {
+          min-height: 21px !important;
+          background: #f3f3f5 !important;
+          width: 100% !important;
+          border: 0px !important;
+        }
+        .btn-log-out {
+          background: #2b2c46;
+          border-radius: 0px !important;
+          padding: 10px 35px 10px 10px;
+          span {
+            color: #fff !important;
+            font-size: 11px !important;
+            line-height: 14px !important;
+            font-weight: bold !important;
+            margin: 0;
+            padding: 0;
+          }
+        }
+      }
+    }
+  }
+  .box-col-right {
+    .box-bg-image {
+      // background-image: url("/common/assets/images/Rectangle.png");
+    }
+  }
+}
+.wrap-input-search {
+  width: 640px;
+  .box-input-search {
+    justify-content: space-between;
+    background: #ffffff;
+    box-shadow: 0px 0px 6.66667px rgba(0, 0, 0, 0.2);
+    border-radius: 21px;
+    padding: 5px 10px !important;
+    height: 42px;
+    form {
+      width: 100%;
+      display: flex;
+    }
+    .input-search {
+      padding: 0 6px;
+      width: 100%;
+      border: 0px !important;
+      &::-webkit-search-cancel-button {
+        position: relative;
+        right: 20px;
+
+        -webkit-appearance: none;
+        height: 20px;
+        width: 20px;
+        border-radius: 10px;
+        background: red;
+      }
+      &:focus-visible {
+        outline: none !important;
+      }
+      &::before,
+      &::after {
+        display: none !important;
+      }
+    }
+    .btn-clear-text {
+      width: 32px;
+      height: 32px;
+      border-radius: 100%;
+      background-color: #f3f3f5;
+      z-index: 10;
+      cursor: pointer !important;
+    }
+  }
+}
+
+.box-panigation {
+  .ais-Pagination-list {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    margin-bottom: 22px;
+    li {
+      list-style-type: none;
+      margin: 0px !important;
+      padding: 0px 5px !important;
+      a {
+        font-weight: 500 !important;
+      }
+
+      font-size: 12px;
+      &.ais-Pagination-item--selected {
+        a {
+          font-weight: 700 !important;
+        }
+
+        font-size: 13px;
+      }
+    }
+  }
+}
+
+.wrap-main-result {
+  position: relative;
+  &.loading {
+    .loadingSpinCT {
+      display: block;
+      position: absolute;
+      top: 0;
+      bottom: 0;
+      margin: auto;
+      left: 0;
+      right: 0;
+    }
+  }
+  .loadingSpinCT {
+    display: none;
+  }
+}
+
+.wrap-main-support-page {
+  // background-color: red;
+  min-height: calc(100vh - 32px);
+  // max-width: 1280px;
+  margin: auto;
+  .col-left {
+    width: 50%;
+    background-color: #322bb0;
+    .col-left__top {
+      background-color: #3e36dc;
+      min-height: 170px;
+    }
+
+    .col-left__bottom {
+      .box-form {
+        max-width: 224px;
+        margin-left: auto;
+        margin-right: auto;
+        margin-top: 74px;
+        .MuiButton-label {
+          justify-content: flex-start !important;
+        }
+      }
+      .box-btn-upload {
+        .btn-upload {
+          background-color: #2b2c46;
+          border-radius: 3px;
+        }
+        .MuiIconButton-label {
+          width: 122px;
+          font-weight: 700 !important;
+          font-size: 11px !important;
+          line-height: 14px !important;
+          display: flex;
+          color: #fff;
+          justify-content: space-between;
+        }
+      }
+      .box-preview-image {
+        .box-image {
+          position: relative;
+          width: fit-content !important;
+          height: 106px !important;
+          border-radius: 2px;
+          padding: 5px 7px;
+          text-align: center;
+
+          .btn-close {
+            position: absolute;
+            top: 5px;
+            right: 5px;
+            padding: 0px;
+            .MuiButton-label {
+              justify-content: flex-end !important;
+            }
+          }
+        }
+      }
+    }
+  }
+  .col-right {
+    width: 50%;
+    background-image: url("../../common/assets/images/bg-support-page.svg");
+    background-size: cover;
+    background-repeat: no-repeat;
+  }
+}
+
+.border-rd-0 {
+  border-radius: 0px !important;
+}
+
+.hide-btn-arrow {
+  .btn-carousel-right,
+  .btn-carousel-left {
+    display: none !important;
+  }
+}