@charset "UTF-8";
i,
html {
  margin: 0;
  padding: 0;
  line-height: normal;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  height: 100%;
  scroll-behavior: smooth;
}

* {
  border: 0;
  padding: 0;
  margin: 0;
  list-style: none;
  font-style: normal;
  line-height: normal;
}

img {
  max-width: 100%;
  height: auto;
  vertical-align: bottom;
  display: inline-block;
}

input, textarea, select, select option, button {
  outline-style: none;
}

button, input[type=submit] {
  cursor: pointer;
}

input:focus {
  outline: 0;
}

li,
a {
  text-decoration: none;
  transition: all 0.3s ease-in-out;
  outline: 0;
}

li {
  transition: none;
}

*,
*:before,
*:after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

:root {
  --green-color: '#007e46';
  --red-color: 'red';
  --header-color: '';
  --header2-color: '';
  --back1-color: #fff;
  --widget-color: '';
  --single-color: '';
  --back2-color: #F6F8FB;
  --back3-color: #F1F4F9;
  --back4-color: '';
}

body {
  direction: rtl;
  font-size: 12px;
  max-width: 100dvw;
  overflow-x: hidden;
  margin: 0;
  padding: 0;
  text-align: right;
  background-color: var(--back4-color);
  background-position: center center;
  background-repeat: repeat;
  background-size: cover;
}
body .hidden, body .hiddenSeo {
  display: none;
}
body .width {
  width: 70%;
}
body .width2 {
  width: 80%;
}
@media screen and (max-width: 1800px) {
  body .width {
    width: 85%;
  }
}
@media screen and (max-width: 1600px) {
  body .width {
    width: 90%;
  }
}
@media screen and (max-width: 1400px) {
  body .width {
    width: 97%;
  }
}
@media screen and (max-width: 700px) {
  body .width, body .width2 {
    width: 95%;
  }
}

.allIndex .indexContainer .stairI {
  margin: auto;
}
.allIndex .indexContainer .widgetIndex {
  margin-top: 3rem;
}
@media screen and (max-width: 1000px) {
  .allIndex .indexContainer .widgetIndex {
    margin-top: 2rem;
  }
}

.listIndex {
  position: relative;
  padding: 1rem 0;
  background-attachment: fixed;
}
.listIndex .block {
  margin: auto;
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 17rem 1fr;
}
.listIndex .block .title1 {
  background: black;
  border-radius: 20px;
  font-size: 1.4rem;
  font-weight: 900;
  color: white;
  display: grid;
  align-content: center;
  text-align: center;
  padding: 1rem;
}
.listIndex .block .title1 a {
  display: grid;
  position: relative;
  font-size: 1rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.73);
  text-align: center;
  padding: 0.5rem 1rem;
  border-radius: 10px;
}
.listIndex .block .title1 a:before {
  content: "";
  position: absolute;
  bottom: -0.3rem;
  right: 0;
  left: 0;
  margin: auto;
  width: 2rem;
  background: var(--green-color);
  height: 4px;
  border-radius: 5px;
}
.listIndex .block .title1 .pic {
  margin-top: 4rem;
  display: grid;
  align-items: center;
  justify-items: center;
}
.listIndex .block .title1 .pic img {
  height: 10rem;
  object-fit: contain;
}
.listIndex .block .li {
  position: relative;
  padding-right: 1rem;
}
.listIndex .block .slider-lists {
  display: grid;
}
.listIndex .block .slider-lists .owl-item {
  padding: 0.5rem 0;
}
.listIndex .block .slider-lists .item {
  border-radius: 15px;
  display: grid;
  overflow: hidden;
  box-shadow: 0 5px 5px rgba(0, 0, 0, 0.03);
  padding: 1rem;
  background: white;
}
.listIndex .block .slider-lists .item .pic {
  position: relative;
  transition: all 0.3s ease-in-out;
}
.listIndex .block .slider-lists .item .pic img {
  height: 12rem;
  object-fit: contain;
  width: 100%;
}
.listIndex .block .slider-lists .item .pic .off {
  position: absolute;
  left: 0.5rem;
  top: 0.5rem;
  font-size: 0.8rem;
  font-weight: 700;
  color: white;
  background: black;
  border-radius: 5rem;
  padding: 0.2rem 1rem;
}
.listIndex .block .slider-lists .item .des {
  overflow: hidden;
}
.listIndex .block .slider-lists .item .des .cats {
  margin-bottom: 1rem;
  font-size: 0.8rem;
  font-weight: 500;
  color: #444;
  opacity: 0.7;
  margin-top: 0.5rem;
  text-align: center;
}
.listIndex .block .slider-lists .item .des .title2 {
  font-size: 0.9rem;
  font-weight: 700;
  color: #444;
  height: 3rem;
  text-align: center;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  text-overflow: ellipsis;
  margin-top: 1rem;
}
.listIndex .block .slider-lists .item .des .price1 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem;
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid #eee;
  height: 3.5rem;
}
.listIndex .block .slider-lists .item .des .price1 .prices s {
  font-size: 0.8rem;
  font-weight: 300;
  color: #444;
}
.listIndex .block .slider-lists .item .des .price1 .prices .priceF {
  text-align: left;
  font-size: 1.2rem;
  font-weight: 700;
  color: black;
  line-height: 8px;
}
.listIndex .block .slider-lists .item .des .price1 .prices .priceF span {
  font-size: 0.8rem;
  opacity: 0.7;
}
.listIndex .block .slider-lists .item .des .price1 .next {
  display: grid;
  align-items: center;
  background: var(--green-color);
  padding: 0.5rem;
  border-radius: 10px;
}
.listIndex .block .slider-lists .item .des .price1 .next i {
  display: grid;
  align-items: center;
}
.listIndex .block .slider-lists .item .des .price1 .next i svg {
  width: 1.4rem;
  height: 1.4rem;
  color: white;
}
.listIndex .block .slider-lists .item .des .content {
  display: flex;
  align-items: end;
  height: 3.5rem;
  border-top: 1px solid #eee;
  margin-top: 1rem;
  font-size: 1rem;
  font-weight: 700;
  color: #000;
}
.listIndex .block .slider-lists .item .des .content span {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
.listIndex .block .slider-lists .owl-next, .listIndex .block .slider-lists .owl-prev {
  padding: 0.5rem;
  background: black;
  position: absolute;
  top: 0;
  bottom: 2rem;
  margin: auto;
  right: -1rem;
  width: 3rem;
  height: 6rem;
  opacity: 0;
  line-height: 1rem;
}
.listIndex .block .slider-lists .owl-next span, .listIndex .block .slider-lists .owl-prev span {
  line-height: 1rem;
  color: white !important;
}
.listIndex .block .slider-lists .owl-next {
  left: 0;
  right: auto;
  height: 3rem;
  font-size: 2rem;
  border-radius: 50%;
  opacity: 1;
}
.listIndex .block .iconR {
  position: absolute;
  pointer-events: none;
  top: 0;
  bottom: 0;
  z-index: 5;
  display: grid;
  align-items: center;
  left: auto;
  right: -1px;
  transform: rotate(180deg);
}
.listIndex .block .iconR path {
  fill: black;
}
.listIndex .block .iconR svg {
  width: 3rem;
}
.listIndex .pt {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  opacity: 0.95;
}
@media screen and (max-width: 800px) {
  .listIndex .block {
    grid-template-columns: 1fr;
  }
  .listIndex .block .title1 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-radius: 10px;
    font-size: 1rem;
    padding: 0.5rem;
  }
  .listIndex .block .title1 a {
    font-size: 0.9rem;
    padding: 0.5rem;
  }
  .listIndex .block .title1 a:before {
    display: none;
  }
  .listIndex .block .title1 .pic {
    display: none;
  }
  .listIndex .block .li {
    position: relative;
    padding-right: 0;
  }
  .listIndex .block .slider-lists .owl-item {
    padding: 0.5rem 0;
  }
  .listIndex .block .slider-lists .item {
    border-radius: 10px;
    padding: 0.5rem;
  }
  .listIndex .block .slider-lists .item .pic img {
    height: 10rem;
  }
  .listIndex .block .slider-lists .item .pic .off {
    left: 0;
    top: 0;
    font-size: 0.7rem;
    padding: 0.2rem 0.5rem;
  }
  .listIndex .block .slider-lists .item .des .cats {
    margin-bottom: 0.5rem;
    font-size: 0.7rem;
  }
  .listIndex .block .slider-lists .item .des .title2 {
    font-size: 0.75rem;
    height: 2.5rem;
    margin-top: 0.5rem;
  }
  .listIndex .block .slider-lists .item .des .price1 {
    margin-top: 0.5rem;
    padding-top: 0.5rem;
    height: 3rem;
  }
  .listIndex .block .slider-lists .item .des .price1 .prices s {
    font-size: 0.7rem;
  }
  .listIndex .block .slider-lists .item .des .price1 .prices .priceF {
    font-size: 1rem;
  }
  .listIndex .block .slider-lists .item .des .price1 .prices .priceF span {
    font-size: 0.7rem;
  }
  .listIndex .block .slider-lists .item .des .price1 .next i svg {
    width: 1rem;
    height: 1rem;
  }
  .listIndex .block .slider-lists .item .des .content {
    height: 3rem;
    margin-top: 0.5rem;
    font-size: 0.8rem;
  }
  .listIndex .block .slider-lists .owl-next, .listIndex .block .slider-lists .owl-prev {
    display: none;
  }
  .listIndex .block .iconR {
    display: none;
  }
}

.AllAboutIndex {
  margin: auto;
  display: grid;
  grid-gap: 1rem;
  grid-template-columns: 1fr auto;
}
.AllAboutIndex .right {
  display: grid;
  justify-content: center;
  width: 270px;
  border-radius: 15px;
  overflow: hidden;
}
.AllAboutIndex .right img {
  height: 100%;
  object-fit: cover;
}
.AllAboutIndex .left .title {
  font-size: 1.5rem;
  font-weight: 900;
  color: #000;
}
.AllAboutIndex .left p {
  margin-top: 1rem;
  font-size: 1rem;
  font-weight: 500;
  color: #444;
  white-space: pre-wrap;
  opacity: 0.8;
}
.AllAboutIndex .left .options {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 1rem;
  margin-top: 1rem;
}
.AllAboutIndex .left .options .option {
  padding: 1rem;
  border-radius: 10px;
  background: #f7f7f7;
}
.AllAboutIndex .left .options .option .name {
  font-size: 0.9rem;
  font-weight: 900;
  color: #000;
}
.AllAboutIndex .left .options .option .body {
  font-size: 0.8rem;
  font-weight: 500;
  color: #444;
  margin-top: 0.5rem;
}
@media screen and (max-width: 1000px) {
  .AllAboutIndex {
    display: flex;
    flex-direction: column-reverse;
    gap: 0.5rem;
  }
  .AllAboutIndex .right {
    width: 100%;
  }
  .AllAboutIndex .left .title {
    font-size: 1.2rem;
  }
  .AllAboutIndex .left p {
    margin-top: 0.5rem;
    font-size: 0.85rem;
  }
  .AllAboutIndex .left .options {
    grid-template-columns: repeat(2, 1fr);
    grid-gap: 0.5rem;
    margin-top: 0.5rem;
  }
  .AllAboutIndex .left .options .option {
    padding: 0.5rem;
  }
  .AllAboutIndex .left .options .option .name {
    font-size: 0.75rem;
  }
  .AllAboutIndex .left .options .option .body {
    font-size: 0.7rem;
  }
}

.allAdsIndex {
  margin: auto;
}
.allAdsIndex .items {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  grid-gap: 1rem;
}
.allAdsIndex .items .item {
  border-radius: 15px;
  overflow: hidden;
}
.allAdsIndex .items .item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
@media screen and (max-width: 1000px) {
  .allAdsIndex .items {
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
  }
  .allAdsIndex .items .item {
    border-radius: 10px;
  }
}

@media screen and (max-width: 1000px) {
  .single .items {
    grid-template-columns: 1fr !important;
  }
}

.AllMapIndex {
  margin: auto;
}
.AllMapIndex .allMaps {
  position: relative;
}
.AllMapIndex .allMaps .map1 {
  border-radius: 20px;
  overflow: hidden;
  z-index: 80;
  position: relative;
}
.AllMapIndex .allMaps .map1 #map4 {
  height: 80vh;
}
.AllMapIndex .allMaps .map1 .leaflet-control-attribution.leaflet-control {
  display: none;
}
.AllMapIndex .allMaps .boxes {
  position: absolute;
  top: 0;
  bottom: 0;
  display: grid;
  align-items: center;
  right: 1rem;
  z-index: 100;
}
.AllMapIndex .allMaps .boxes .box {
  backdrop-filter: blur(4px);
  background-color: rgba(255, 255, 255, 0.5294117647);
  padding: 1rem;
  border-radius: 20px;
  width: 22rem;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
  overflow-y: scroll;
}
.AllMapIndex .allMaps .boxes .titles {
  margin-bottom: 1rem;
  font-weight: 500;
  font-size: 1.5rem;
  color: #444;
  text-align: center;
}
.AllMapIndex .allMaps .boxes .body {
  font-weight: 500;
  font-size: 1rem;
  color: #444;
  opacity: 0.9;
  text-align: center;
}
@media screen and (max-width: 1000px) {
  .AllMapIndex .allMaps .map1 #map4 {
    height: 50vh;
  }
  .AllMapIndex .allMaps .boxes {
    bottom: auto;
    right: 0;
    left: 0;
  }
  .AllMapIndex .allMaps .boxes .box {
    padding: 0.5rem;
    width: 100%;
  }
  .AllMapIndex .allMaps .boxes .titles {
    font-size: 1rem;
  }
  .AllMapIndex .allMaps .boxes .body {
    font-size: 0.8rem;
  }
}

.AllCatIndex {
  margin: auto;
}
.AllCatIndex .title1 {
  text-align: center;
  font-size: 1.8rem;
  font-weight: 700;
  color: #444;
}
.AllCatIndex .body1 {
  text-align: center;
  font-size: 1rem;
  font-weight: 500;
  color: #000;
}
.AllCatIndex .items {
  margin: auto;
  margin-top: 2rem;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-gap: 1rem;
  position: relative;
}
.AllCatIndex .items .box {
  background: white;
  box-shadow: 0 5px 5px rgba(0, 0, 0, 0.05);
  border-radius: 20px;
  padding: 1rem;
  position: relative;
  z-index: 2;
}
.AllCatIndex .items .box .pic {
  display: grid;
  align-items: center;
  justify-items: center;
}
.AllCatIndex .items .box .pic img {
  width: 100%;
  height: 5rem;
  object-fit: contain;
}
.AllCatIndex .items .box .title2 {
  font-size: 1rem;
  text-align: center;
  font-weight: 500;
  color: #444;
  margin-top: 1rem;
}
.AllCatIndex .items .box .body {
  font-size: 0.9rem;
  text-align: center;
  font-weight: 300;
  opacity: 0.6;
  color: #000;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  overflow: hidden;
  -webkit-box-orient: vertical;
  text-overflow: ellipsis;
  margin-top: 0.5rem;
}
.AllCatIndex .items:after {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 11rem;
  border-radius: 20px;
  background: linear-gradient(to left, var(--green-color), black, var(--green-color));
}
@media screen and (max-width: 700px) {
  .AllCatIndex .title1 {
    font-size: 1.2rem;
  }
  .AllCatIndex .body1 {
    font-size: 0.9rem;
  }
  .AllCatIndex .items {
    margin-top: 1rem;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 0.5rem;
  }
  .AllCatIndex .items .box {
    border-radius: 10px;
    padding: 0.5rem;
  }
  .AllCatIndex .items .box .pic img {
    height: 3rem;
  }
  .AllCatIndex .items .box .title2 {
    font-size: 0.7rem;
    margin-top: 0.5rem;
  }
  .AllCatIndex .items .box .body {
    font-size: 0.6rem;
  }
  .AllCatIndex .items:after {
    content: "";
    position: absolute;
    z-index: 1;
    right: 1rem;
    left: 1rem;
    bottom: 1rem;
    top: 1rem;
    border-radius: 10px;
  }
}

.AllCatIndex2 {
  margin: auto;
}
.AllCatIndex2 .width {
  margin: auto;
  display: flex;
  justify-content: right;
  gap: 1rem;
  align-items: center;
}
.AllCatIndex2 .items {
  position: relative;
  margin-top: 1rem;
}
.AllCatIndex2 .items a {
  font-size: 0.9rem;
  font-weight: 700;
  color: white;
  background: black;
  border-radius: 5rem;
  position: relative;
  z-index: 1;
  padding: 0.5rem 1rem;
}
.AllCatIndex2 .items:after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  z-index: 0;
  bottom: 0;
  margin: auto;
  height: 1px;
  width: 100%;
  border-bottom: 3px dashed #d1d1d1;
}
.AllCatIndex2 .items:first-child {
  margin-top: 0;
}
.AllCatIndex2 .left .width {
  justify-content: left;
}
@media screen and (max-width: 700px) {
  .AllCatIndex2 .width {
    flex-wrap: wrap;
    justify-content: center !important;
  }
  .AllCatIndex2 .items a {
    font-size: 0.7rem;
    padding: 0.5rem;
  }
  .AllCatIndex2 .items:after {
    content: unset;
  }
  .AllCatIndex2 .items:first-child {
    margin-top: 0;
  }
}

.AllCatIndex3 {
  margin: auto;
}
.AllCatIndex3 .slider-cat3 {
  border-radius: 20px;
  overflow: hidden;
  background: white;
}
.AllCatIndex3 .slider-cat3 .item {
  border-left: 1px solid #eee;
  padding: 1rem;
}
.AllCatIndex3 .slider-cat3 .item .title .name {
  font-size: 1.1rem;
  font-weight: 900;
  color: #000;
  margin-bottom: 2px;
}
.AllCatIndex3 .slider-cat3 .item .title .body {
  font-size: 0.7rem;
  font-weight: 300;
  color: #000;
  opacity: 0.7;
}
.AllCatIndex3 .slider-cat3 .item .products {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: start;
  margin: 1rem 0;
  height: 18rem;
}
.AllCatIndex3 .slider-cat3 .item .products .product {
  padding: 0.5rem;
}
.AllCatIndex3 .slider-cat3 .item .products .product img {
  height: 8rem;
}
.AllCatIndex3 .slider-cat3 .item .products .product:nth-child(1), .AllCatIndex3 .slider-cat3 .item .products .product:nth-child(3) {
  border-left: 1px solid #eee;
}
.AllCatIndex3 .slider-cat3 .item .products .product:nth-child(1), .AllCatIndex3 .slider-cat3 .item .products .product:nth-child(2) {
  border-bottom: 1px solid #eee;
}
.AllCatIndex3 .slider-cat3 .item .more {
  display: grid;
  justify-content: center;
}
.AllCatIndex3 .slider-cat3 .item .more a {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.8rem;
  font-weight: 500;
  border-radius: 5rem;
  border: 1px solid var(--green-color);
  color: var(--green-color);
  padding: 0.2rem 0.5rem;
}
.AllCatIndex3 .slider-cat3 .item .more a i {
  display: grid;
  align-items: center;
}
.AllCatIndex3 .slider-cat3 .item .more a i svg {
  transition: all 0.3s ease-in-out;
  width: 1rem;
  height: 1rem;
  fill: var(--green-color);
}
.AllCatIndex3 .slider-cat3 .item .more a:hover {
  color: white;
  background: var(--green-color);
}
.AllCatIndex3 .slider-cat3 .item .more a:hover i svg {
  fill: white;
}
.AllCatIndex3 .slider-cat3 .owl-next, .AllCatIndex3 .slider-cat3 .owl-prev {
  padding: 0.5rem;
  background: white !important;
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto;
  right: 0.5rem;
  width: 2.5rem;
  border: 2px solid black !important;
  font-size: 1.5rem !important;
  border-radius: 50%;
  color: black !important;
  height: 2.5rem;
  transition: all 0.3s ease-in-out;
}
.AllCatIndex3 .slider-cat3 .owl-next:hover, .AllCatIndex3 .slider-cat3 .owl-prev:hover {
  background: black !important;
  color: white !important;
}
.AllCatIndex3 .slider-cat3 .owl-next {
  left: 0.5rem;
  right: auto;
}
.AllCatIndex4 {
  margin: auto;
  border: 1px solid #eee;
  background: white;
  border-radius: 20px;
  overflow: hidden;
  padding: 1rem;
  box-shadow: 0 10px 10px rgba(0, 0, 0, 0.03);
}
.AllCatIndex4 .slider-cat4 {
  min-width: 0;
}
.AllCatIndex4 .slider-cat4 .owl-stage-outer {
  padding-right: 1px;
}
.AllCatIndex4 .slider-cat4 .item {
  display: grid;
  border-left: 1px solid #eee;
}
.AllCatIndex4 .slider-cat4 .item .pic {
  margin-bottom: 1rem;
}
.AllCatIndex4 .slider-cat4 .item .pic img {
  height: 5rem;
  object-fit: contain;
}
.AllCatIndex4 .slider-cat4 .item .name {
  font-size: 0.9rem;
  font-weight: 900;
  color: var(--green-color);
  text-align: center;
  margin-bottom: 2px;
}
.AllCatIndex4 .slider-cat4 .owl-next, .AllCatIndex4 .slider-cat4 .owl-prev {
  padding: 0.5rem;
  background: white !important;
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto;
  right: 0.5rem;
  width: 2.5rem;
  border: 2px solid black !important;
  font-size: 1.5rem !important;
  border-radius: 50%;
  color: black !important;
  height: 2.5rem;
  transition: all 0.3s ease-in-out;
}
.AllCatIndex4 .slider-cat4 .owl-next:hover, .AllCatIndex4 .slider-cat4 .owl-prev:hover {
  background: black !important;
  color: white !important;
}
.AllCatIndex4 .slider-cat4 .owl-next {
  left: 0.5rem;
  right: auto;
}
@media screen and (max-width: 700px) {
  .AllCatIndex4 {
    padding: 0.5rem;
  }
  .AllCatIndex4 .slider-cat4 .owl-next, .AllCatIndex4 .slider-cat4 .owl-prev {
    width: 2rem;
    height: 2rem;
    right: 0;
    font-size: 1.2rem !important;
  }
  .AllCatIndex4 .slider-cat4 .owl-next {
    right: auto;
    left: 0;
  }
}

.AllCatIndex5 {
  margin: auto;
}
.AllCatIndex5 .items {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
}
.AllCatIndex5 .items .item {
  display: grid;
  justify-content: center;
  width: 6rem;
}
.AllCatIndex5 .items .item .pic {
  display: grid;
  justify-content: center;
  margin-bottom: 1rem;
  border-radius: 50%;
  width: 6rem;
  height: 6rem;
  padding: 1rem;
  background: #f1f1f1;
  align-items: center;
}
.AllCatIndex5 .items .item .pic img {
  height: 100%;
  width: 100%;
  object-fit: contain;
}
.AllCatIndex5 .items .item .name {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  font-size: 0.9rem;
  font-weight: 900;
  color: #000;
  text-align: center;
}
@media screen and (max-width: 700px) {
  .AllCatIndex5 .items {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
  }
  .AllCatIndex5 .items .item {
    width: auto;
  }
  .AllCatIndex5 .items .item .pic {
    width: auto;
    height: auto;
    padding: 0.5rem;
    overflow: hidden;
  }
  .AllCatIndex5 .items .item .pic img {
    height: 100%;
    width: 100%;
  }
  .AllCatIndex5 .items .item .name {
    font-size: 0.7rem;
  }
}

.AllCatIndex6 {
  margin: auto;
}
.AllCatIndex6 .slider-cat6 .item {
  margin-bottom: 0.5rem;
}
.AllCatIndex6 .slider-cat6 .item .title {
  display: grid;
  justify-items: right;
}
.AllCatIndex6 .slider-cat6 .item .title .name {
  position: relative;
  font-size: 1.1rem;
  font-weight: 900;
  color: #000;
  margin-bottom: 2px;
}
.AllCatIndex6 .slider-cat6 .item .title .body {
  font-size: 0.6rem;
  font-weight: 500;
  color: white;
  padding: 0.1rem 0.5rem;
  border-radius: 5rem;
  background: var(--green-color);
}
.AllCatIndex6 .slider-cat6 .item .products {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  align-items: start;
  margin-top: 0.5rem;
  height: 18rem;
  border-radius: 15px;
  border: 1.5px solid #eee;
  box-shadow: 0 4px 16px 0 rgba(36, 43, 61, 0.1);
}
.AllCatIndex6 .slider-cat6 .item .products .product {
  padding: 0.5rem;
  border-left: 1.5px solid #eee;
  border-bottom: 1.5px solid #eee;
}
.AllCatIndex6 .slider-cat6 .item .products .product img {
  height: 8rem;
  object-fit: contain;
}
.AllCatIndex6 .slider-cat6 .item .products .product:nth-child(3), .AllCatIndex6 .slider-cat6 .item .products .product:nth-child(6) {
  border-left: 0;
}
.AllCatIndex6 .slider-cat6 .item .products .product:nth-child(4), .AllCatIndex6 .slider-cat6 .item .products .product:nth-child(5), .AllCatIndex6 .slider-cat6 .item .products .product:nth-child(6) {
  border-bottom: 0;
}
.AllCatIndex6 .slider-cat6 .item .more {
  display: grid;
  justify-content: left;
  margin-left: 1rem;
  margin-top: -1rem;
}
.AllCatIndex6 .slider-cat6 .item .more a {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.8rem;
  font-weight: 500;
  border-radius: 10px;
  border: 1.5px solid #ddd;
  background: #f7f7f7;
  color: #444;
  padding: 0.3rem 0.8rem;
}
.AllCatIndex6 .slider-cat6 .item .more a i {
  display: grid;
  align-items: center;
}
.AllCatIndex6 .slider-cat6 .item .more a i svg {
  transition: all 0.3s ease-in-out;
  width: 0.8rem;
  height: 0.8rem;
  fill: #444;
}
.AllCatIndex6 .slider-cat6 .item .more a:hover {
  color: white;
  background: var(--green-color);
}
.AllCatIndex6 .slider-cat6 .item .more a:hover i svg {
  fill: white;
}
.AllCatIndex6 .slider-cat6 .owl-next, .AllCatIndex6 .slider-cat6 .owl-prev {
  padding: 0.5rem;
  background: white !important;
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto;
  right: 0.5rem;
  width: 2.5rem;
  border: 2px solid black !important;
  font-size: 1.5rem !important;
  border-radius: 50%;
  color: black !important;
  height: 2.5rem;
  transition: all 0.3s ease-in-out;
}
.AllCatIndex6 .slider-cat6 .owl-next:hover, .AllCatIndex6 .slider-cat6 .owl-prev:hover {
  background: black !important;
  color: white !important;
}
.AllCatIndex6 .slider-cat6 .owl-next {
  left: 0.5rem;
  right: auto;
}
.AllCatIndex7 {
  margin: auto;
}
.AllCatIndex7 .items {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 2rem;
}
.AllCatIndex7 .items .item {
  display: grid;
  justify-content: center;
  width: 9rem;
  height: 9rem;
  border-radius: 50%;
  padding: 1rem;
  box-shadow: 0 10px 10px rgba(0, 0, 0, 0.05);
  background: white;
}
.AllCatIndex7 .items .item .pic {
  display: grid;
  justify-content: center;
  align-items: center;
  margin-bottom: 0.5rem;
}
.AllCatIndex7 .items .item .pic img {
  width: 7rem;
  height: 4rem;
  object-fit: contain;
}
.AllCatIndex7 .items .item .name {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  font-size: 0.9rem;
  font-weight: 900;
  color: #000;
  text-align: center;
}
@media screen and (max-width: 700px) {
  .AllCatIndex7 .items {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.5rem;
  }
  .AllCatIndex7 .items .item {
    width: 100%;
    height: 100%;
    border-radius: 10px;
    padding: 0.5rem;
  }
  .AllCatIndex7 .items .item .pic img {
    width: 6rem;
    height: 3rem;
  }
  .AllCatIndex7 .items .item .name {
    font-size: 0.7rem;
  }
}

.AllCatIndex8 {
  margin: auto;
}
.AllCatIndex8 .title {
  position: relative;
}
.AllCatIndex8 .title .nameEn {
  font-size: 0.95rem;
  font-weight: 700;
  opacity: 0.5;
  color: #444;
}
.AllCatIndex8 .title .name {
  font-size: 1.5rem;
  font-weight: 900;
  color: #000;
}
.AllCatIndex8 .title .name span {
  color: var(--green-color);
}
.AllCatIndex8 .title:before {
  content: "";
  position: absolute;
  bottom: -0.5rem;
  width: 3rem;
  background: var(--green-color);
  height: 3px;
}
.AllCatIndex8 .items {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr));
  justify-content: right;
  gap: 0.5rem;
  margin-top: 2rem;
}
.AllCatIndex8 .items .item {
  display: flex;
  align-items: center;
  justify-content: right;
  border-radius: 15px;
  gap: 0.5rem;
  padding: 1.5rem;
  background: white;
  border: 1px solid #eee;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
}
.AllCatIndex8 .items .item .pic {
  display: grid;
  justify-content: center;
  align-items: center;
}
.AllCatIndex8 .items .item .pic img {
  width: 8rem;
  height: 5rem;
  object-fit: contain;
}
.AllCatIndex8 .items .item .name {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  font-size: 0.9rem;
  font-weight: 900;
  color: #000;
  text-align: center;
}
@media screen and (max-width: 1000px) {
  .AllCatIndex8 .title .nameEn {
    font-size: 0.75rem;
  }
  .AllCatIndex8 .title .name {
    font-size: 1.2rem;
  }
  .AllCatIndex8 .title:before {
    bottom: -0.5rem;
    width: 3rem;
    height: 2px;
  }
  .AllCatIndex8 .items {
    margin-top: 1rem;
    grid-template-columns: 1fr 1fr;
  }
  .AllCatIndex8 .items .item {
    padding: 1rem 0.5rem;
  }
  .AllCatIndex8 .items .item .pic img {
    width: 2rem;
    height: 2rem;
  }
  .AllCatIndex8 .items .item .name {
    font-size: 0.8rem;
    font-weight: 500;
  }
}

.AllCatIndex9 {
  margin: auto;
}
.AllCatIndex9 .slider-cat9 .item {
  padding: 1rem;
  display: grid;
  position: relative;
}
.AllCatIndex9 .slider-cat9 .item .pic img {
  height: 3rem;
  object-fit: contain;
}
.AllCatIndex9 .slider-cat9 .item .name {
  font-size: 0.8rem;
  font-weight: 700;
  text-align: center;
  margin-top: 0.5rem;
  color: #000;
}
.AllCatIndex9 .slider-cat9 .item:before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  height: 2rem;
  width: 2px;
  background: #eee;
}
.AllCatIndex9 .slider-cat9 .owl-next, .AllCatIndex9 .slider-cat9 .owl-prev {
  padding: 0.5rem;
  background: white !important;
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto;
  right: -1.5rem;
  border: 2px solid #eee !important;
  font-size: 1.5rem !important;
  border-radius: 5px;
  color: #000 !important;
  height: 2.6rem;
  display: grid;
  align-items: center;
  justify-content: center;
  width: 2.6rem;
}
.AllCatIndex9 .slider-cat9 .owl-next span, .AllCatIndex9 .slider-cat9 .owl-prev span {
  font-size: 2.6rem;
  line-height: 1rem;
}
.AllCatIndex9 .slider-cat9 .owl-next {
  left: -1.5rem;
  right: auto;
}
@media screen and (max-width: 800px) {
  .AllCatIndex9 .slider-cat9 .item {
    padding: 0.5rem;
  }
  .AllCatIndex9 .slider-cat9 .item .name {
    font-size: 0.8rem;
  }
  .AllCatIndex9 .slider-cat9 .owl-next, .AllCatIndex9 .slider-cat9 .owl-prev {
    padding: 0.2rem;
    font-size: 1rem !important;
    height: 2rem;
    width: 2rem;
    right: 0;
  }
  .AllCatIndex9 .slider-cat9 .owl-next span, .AllCatIndex9 .slider-cat9 .owl-prev span {
    font-size: 2rem;
  }
  .AllCatIndex9 .slider-cat9 .owl-next {
    right: auto;
    left: 0;
  }
}

.AllCatIndex10 {
  margin: auto;
}
.AllCatIndex10 .slider-cat10 .item {
  display: grid;
  justify-content: center;
  position: relative;
}
.AllCatIndex10 .slider-cat10 .item .pic {
  border-radius: 50%;
  padding: 3px;
  border: 3px solid var(--green-color);
}
.AllCatIndex10 .slider-cat10 .item .pic img {
  border-radius: 50%;
  height: 7rem;
  width: 7rem;
  object-fit: contain;
}
.AllCatIndex10 .slider-cat10 .item .name {
  font-size: 1rem;
  font-weight: 500;
  text-align: center;
  margin-top: 0.5rem;
  color: #000;
}
.AllCatIndex10 .slider-cat10 .owl-next, .AllCatIndex10 .slider-cat10 .owl-prev {
  padding: 0.5rem;
  background: white !important;
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto;
  right: -1.5rem;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
  font-size: 1.5rem !important;
  border-radius: 50%;
  color: #000 !important;
  height: 2.6rem;
  display: grid;
  align-items: center;
  justify-content: center;
  width: 2.6rem;
}
.AllCatIndex10 .slider-cat10 .owl-next span, .AllCatIndex10 .slider-cat10 .owl-prev span {
  font-size: 2.7rem;
  line-height: 2.8rem;
}
.AllCatIndex10 .slider-cat10 .owl-next {
  left: -1.5rem;
  right: auto;
}
@media screen and (max-width: 800px) {
  .AllCatIndex10 .slider-cat10 .item .pic {
    padding: 1px;
    border: 1px solid var(--green-color);
  }
  .AllCatIndex10 .slider-cat10 .item .name {
    font-size: 0.85rem;
  }
  .AllCatIndex10 .slider-cat10 .owl-next, .AllCatIndex10 .slider-cat10 .owl-prev {
    padding: 0.2rem;
    font-size: 1rem !important;
    height: 2rem;
    width: 2rem;
    right: 0;
  }
  .AllCatIndex10 .slider-cat10 .owl-next span, .AllCatIndex10 .slider-cat10 .owl-prev span {
    font-size: 2rem;
    line-height: 2rem;
  }
  .AllCatIndex10 .slider-cat10 .owl-next {
    right: auto;
    left: 0;
  }
}

.AllAdIndex13 {
  margin: auto;
}
.AllAdIndex13 .title {
  font-size: 1.3rem;
  font-weight: 700;
  color: #000;
  margin-bottom: 1rem;
}
.AllAdIndex13 .items {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
}
.AllAdIndex13 .items .item {
  border-left: 1px solid #eee;
  border-top: 1px solid #eee;
  padding: 1rem;
}
.AllAdIndex13 .items .item .pic {
  position: relative;
  border-radius: 10px;
  overflow: hidden;
}
.AllAdIndex13 .items .item .pic img {
  height: 100%;
  width: 100%;
  object-fit: contain;
}
.AllAdIndex13 .items .item .pic .name {
  position: absolute;
  bottom: -100%;
  right: 0;
  left: 0;
  font-size: 0.9rem;
  font-weight: 500;
  text-align: center;
  margin-top: 0.5rem;
  color: white;
  padding: 0.3rem 0;
  background: var(--green-color);
  transition: all 0.3s ease-in-out;
}
.AllAdIndex13 .items .item .pic:hover .name {
  bottom: 0;
}
.AllAdIndex13 .items .item:nth-child(7n) {
  border-left: 0;
}
.AllAdIndex13 .items .item:nth-child(1), .AllAdIndex13 .items .item:nth-child(2), .AllAdIndex13 .items .item:nth-child(3), .AllAdIndex13 .items .item:nth-child(4), .AllAdIndex13 .items .item:nth-child(5), .AllAdIndex13 .items .item:nth-child(6), .AllAdIndex13 .items .item:nth-child(7) {
  border-top: 0;
}
@media screen and (max-width: 800px) {
  .AllAdIndex13 .title {
    font-size: 1rem;
  }
  .AllAdIndex13 .items {
    grid-template-columns: repeat(3, 1fr);
  }
  .AllAdIndex13 .items .item {
    padding: 0.5rem;
  }
  .AllAdIndex13 .items .item .pic .name {
    font-size: 0.75rem;
    padding: 0.2rem 0;
  }
  .AllAdIndex13 .items .item:nth-child(3n) {
    border-left: 0;
  }
  .AllAdIndex13 .items .item:nth-child(7n) {
    border-left: 1px solid #eee;
  }
  .AllAdIndex13 .items .item:nth-child(4), .AllAdIndex13 .items .item:nth-child(5), .AllAdIndex13 .items .item:nth-child(6), .AllAdIndex13 .items .item:nth-child(7) {
    border-top: 1px solid #eee;
  }
}

.AllSearchIndex1 {
  margin: 7rem auto;
  position: relative;
}
.AllSearchIndex1 .top1 .box {
  box-shadow: 0 0 30px rgba(0, 0, 0, 0.05);
  background: white;
  position: relative;
  z-index: 2;
  border-radius: 15px;
  padding: 2rem;
  display: grid;
  grid-template-columns: 1fr repeat(4, 1.5fr);
  align-items: center;
  grid-gap: 1rem;
}
.AllSearchIndex1 .top1 .box .title .name1 {
  font-size: 1.5rem;
  font-weight: 900;
  color: #000;
  line-height: 2rem;
  margin-bottom: 1rem;
}
.AllSearchIndex1 .top1 .box .title .name2 {
  font-size: 1.5rem;
  font-weight: 900;
  line-height: 1rem;
  color: var(--green-color);
}
.AllSearchIndex1 .top1 .box .item select, .AllSearchIndex1 .top1 .box .item input {
  width: 100%;
  border: 1px solid #eee;
  padding: 0.8rem;
  font-size: 1rem;
  font-weight: 700;
  color: #000;
  border-radius: 10px;
  background: transparent;
}
.AllSearchIndex1 .top1 .box .button {
  background: var(--green-color);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  color: white;
  font-size: 1rem;
  font-weight: 500;
  padding: 0.8rem 1rem;
  border-radius: 8px;
  cursor: pointer;
}
.AllSearchIndex1 .top1 .box .button i {
  display: grid;
  align-items: center;
  border-right: 2px solid #eee;
  padding-right: 1rem;
}
.AllSearchIndex1 .top1 .box .button i svg {
  width: 1rem;
  height: 1rem;
  fill: white;
}
.AllSearchIndex1 .top1 .pic {
  z-index: 1;
  position: absolute;
  right: -3rem;
  top: -2rem;
  opacity: 0.5;
}
.AllSearchIndex1 .top1 .pic img {
  height: 9rem;
  filter: grayscale(10);
}
.AllSearchIndex1 .products {
  margin-top: 1rem;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
  grid-gap: 1rem;
}
.AllSearchIndex1 .products .product {
  border-radius: 15px;
  display: grid;
  overflow: hidden;
  box-shadow: 0 5px 5px rgba(0, 0, 0, 0.03);
  padding: 1rem;
  background: white;
  margin-bottom: 0.5rem;
}
.AllSearchIndex1 .products .product .pic {
  position: relative;
  transition: all 0.3s ease-in-out;
}
.AllSearchIndex1 .products .product .pic img {
  height: 12rem;
  object-fit: contain;
  width: 100%;
}
.AllSearchIndex1 .products .product .pic .off {
  position: absolute;
  left: 0.5rem;
  top: 0.5rem;
  font-size: 0.8rem;
  font-weight: 700;
  color: white;
  background: black;
  border-radius: 5rem;
  padding: 0.2rem 1rem;
}
.AllSearchIndex1 .products .product .des {
  overflow: hidden;
}
.AllSearchIndex1 .products .product .des .cats {
  margin-bottom: 1rem;
  margin-top: 0.5rem;
  font-size: 0.8rem;
  font-weight: 500;
  color: #444;
  opacity: 0.7;
  text-align: center;
}
.AllSearchIndex1 .products .product .des .title2 {
  font-size: 0.9rem;
  font-weight: 700;
  color: #444;
  height: 3rem;
  text-align: center;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  text-overflow: ellipsis;
  margin-top: 1rem;
}
.AllSearchIndex1 .products .product .des .price1 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem;
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid #eee;
  height: 3.5rem;
}
.AllSearchIndex1 .products .product .des .price1 .prices s {
  font-size: 0.8rem;
  font-weight: 300;
  color: #444;
}
.AllSearchIndex1 .products .product .des .price1 .prices .priceF {
  text-align: left;
  font-size: 1.2rem;
  font-weight: 700;
  color: black;
  line-height: 8px;
}
.AllSearchIndex1 .products .product .des .price1 .prices .priceF span {
  font-size: 0.8rem;
  opacity: 0.7;
}
.AllSearchIndex1 .products .product .des .price1 .next {
  display: grid;
  align-items: center;
  background: var(--green-color);
  padding: 0.5rem;
  border-radius: 10px;
}
.AllSearchIndex1 .products .product .des .price1 .next i {
  display: grid;
  align-items: center;
}
.AllSearchIndex1 .products .product .des .price1 .next i svg {
  width: 1.4rem;
  height: 1.4rem;
  color: white;
}
.AllSearchIndex1 .products .product .des .content {
  display: flex;
  align-items: end;
  height: 3.5rem;
  border-top: 1px solid #eee;
  margin-top: 1rem;
  font-size: 1rem;
  font-weight: 700;
  color: #000;
}
.AllSearchIndex1 .products .product .des .content span {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
@media screen and (max-width: 1000px) {
  .AllSearchIndex1 {
    margin: 0 auto;
  }
  .AllSearchIndex1 .top1 .box {
    padding: 1rem;
    grid-template-columns: 1fr;
    grid-gap: 1rem;
  }
  .AllSearchIndex1 .top1 .box .title {
    display: flex;
    gap: 0.5rem;
  }
  .AllSearchIndex1 .top1 .box .title .name1 {
    font-size: 1.2rem;
    line-height: 1rem;
    margin-bottom: 0;
  }
  .AllSearchIndex1 .top1 .box .title .name2 {
    font-size: 1.2rem;
  }
  .AllSearchIndex1 .top1 .box .item select, .AllSearchIndex1 .top1 .box .item input {
    padding: 0.5rem;
    font-size: 0.85rem;
    border-radius: 5px;
  }
  .AllSearchIndex1 .top1 .box .button {
    gap: 0.5rem;
    font-size: 0.9rem;
    padding: 0.8rem;
    border-radius: 5px;
  }
  .AllSearchIndex1 .top1 .box .button i {
    padding-right: 0.5rem;
  }
  .AllSearchIndex1 .top1 .box .button i svg {
    width: 1rem;
    height: 1rem;
  }
  .AllSearchIndex1 .top1 .pic {
    display: none;
  }
}

.AllBigIndex {
  position: relative;
  z-index: 0;
}
.AllBigIndex .width {
  position: absolute;
  right: 0;
  left: 0;
  margin: auto;
  top: 0;
  bottom: 0;
  z-index: 4;
  display: grid;
  grid-template-columns: 1fr 25rem;
  align-items: center;
  grid-gap: 1rem;
}
.AllBigIndex .width .right .title1 {
  font-size: 2rem;
  font-weight: 900;
  color: white;
  margin-bottom: 1rem;
}
.AllBigIndex .width .right p {
  font-size: 1.5rem;
  font-weight: 500;
  color: white;
  opacity: 0.7;
  margin-bottom: 1rem;
}
.AllBigIndex .width .right .searches {
  margin-top: 3rem;
  display: grid;
  justify-content: right;
}
.AllBigIndex .width .right .searches .search {
  display: grid;
  grid-template-columns: 1fr auto auto;
  background: white;
  border-radius: 5rem;
}
.AllBigIndex .width .right .searches .search label {
  padding: 1rem;
  display: grid;
  grid-template-columns: 1fr auto;
  grid-gap: 10px;
}
.AllBigIndex .width .right .searches .search label i {
  display: grid;
  align-items: center;
}
.AllBigIndex .width .right .searches .search label i svg {
  width: 1.3rem;
  height: 1.3rem;
  fill: #000;
}
.AllBigIndex .width .right .searches .search label input {
  background: transparent;
  font-size: 1rem;
}
.AllBigIndex .width .right .searches .search select, .AllBigIndex .width .right .searches .search button {
  background: transparent;
  border: 1px solid #ddd;
  padding: 0.5rem 1rem;
  border-radius: 5rem;
  margin: 0.5rem;
  font-size: 1rem;
}
.AllBigIndex .width .right .searches .search button {
  margin-right: 0;
  background: var(--green-color);
  color: white;
  border: 1px solid var(--green-color);
}
.AllBigIndex .width .left .items {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 1rem;
}
.AllBigIndex .width .left .items .item img {
  width: 100%;
  height: 12rem;
  border-radius: 20px;
  border: 1px solid white;
}
.AllBigIndex .width .left .items .item:first-child img {
  border-bottom-left-radius: 0;
}
.AllBigIndex .width .left .items .item:nth-child(2) img {
  border-bottom-right-radius: 0;
}
.AllBigIndex .width .left .items .item:nth-child(3) img {
  border-top-left-radius: 0;
}
.AllBigIndex .width .left .items .item:nth-child(4) img {
  border-top-right-radius: 0;
}
.AllBigIndex .slider-big1 {
  position: relative;
  z-index: 1;
}
.AllBigIndex .slider-big1 img {
  width: 100%;
  min-height: 500px;
  object-fit: cover;
}
.AllBigIndex:after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  z-index: 2;
  background: rgba(0, 8, 44, 0.8);
}
@media screen and (max-width: 1000px) {
  .AllBigIndex .slider-big1 img {
    min-height: auto;
    height: 300px;
  }
  .AllBigIndex .width {
    display: block;
  }
  .AllBigIndex .width .right .title1 {
    font-size: 1.2rem;
    margin-top: 1rem;
    text-align: center;
  }
  .AllBigIndex .width .right p {
    text-align: center;
    font-size: 0.9rem;
  }
  .AllBigIndex .width .right .searches {
    margin-top: 2rem;
    display: block;
  }
  .AllBigIndex .width .right .searches .search {
    display: grid;
    grid-template-columns: 1fr auto auto;
    background: white;
    border-radius: 5rem;
  }
  .AllBigIndex .width .right .searches .search label {
    display: block;
    padding: 0.5rem;
  }
  .AllBigIndex .width .right .searches .search label i {
    display: none;
  }
  .AllBigIndex .width .right .searches .search label input {
    font-size: 0.8rem;
    height: 100%;
  }
  .AllBigIndex .width .right .searches .search select, .AllBigIndex .width .right .searches .search button {
    padding: 0.2rem 0.3rem;
    font-size: 0.8rem;
  }
  .AllBigIndex .width .left {
    display: none;
  }
}

.AllBigIndex2 {
  position: relative;
  z-index: 0;
  border-radius: 20px;
  overflow: hidden;
  margin: auto;
  margin-top: 1rem;
}
.AllBigIndex2 .flow2 {
  position: absolute;
  right: 0;
  left: 0;
  top: 0;
  bottom: 0;
  display: grid;
  align-items: center;
  z-index: 4;
}
.AllBigIndex2 .flow2 .block {
  background: white;
  width: 50%;
  margin: auto;
  border-radius: 20px;
  padding: 1rem;
}
.AllBigIndex2 .flow2 .block form {
  border: 2px solid #eee;
  border-radius: 5rem;
  overflow: hidden;
}
.AllBigIndex2 .flow2 .block form label {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  padding: 0.5rem;
}
.AllBigIndex2 .flow2 .block form label input {
  font-size: 1rem;
  font-weight: 500;
  color: #444;
}
.AllBigIndex2 .flow2 .block form label button {
  background: transparent;
}
.AllBigIndex2 .flow2 .block form label i {
  display: grid;
  align-items: center;
}
.AllBigIndex2 .flow2 .block form label i svg {
  width: 1rem;
  height: 1rem;
  color: #000;
}
.AllBigIndex2 .flow2 .block .history .name {
  margin: 0.5rem 0;
  font-size: 0.9rem;
  font-weight: 700;
  color: #000;
  text-align: center;
}
.AllBigIndex2 .flow2 .block .history ul {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.AllBigIndex2 .flow2 .block .history ul li a {
  display: grid;
  font-size: 0.8rem;
  font-weight: 500;
  color: #000;
  border: 2px solid #eee;
  padding: 0.5rem 1rem;
  border-radius: 5rem;
}
.AllBigIndex2 .flow2 .block .history ul li a:hover {
  background: var(--green-color);
  color: white;
}
.AllBigIndex2 .flow2 .block .more {
  display: grid;
  justify-content: center;
  margin-top: 1rem;
}
.AllBigIndex2 .flow2 .block .more a {
  font-size: 0.9rem;
  font-weight: 700;
  color: white;
  border-radius: 5rem;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0.5rem 1rem;
  background: black;
}
.AllBigIndex2 .flow2 .block .more a i {
  display: grid;
  align-items: center;
}
.AllBigIndex2 .flow2 .block .more a i svg {
  width: 1rem;
  height: 1rem;
  fill: white;
}
.AllBigIndex2 .flow2 .block .about {
  padding-top: 1rem;
  margin-top: 1rem;
  border-top: 2px solid #eee;
  text-align: center;
  font-size: 0.9rem;
  font-weight: 700;
  color: #000;
}
.AllBigIndex2 .slider-big1 {
  position: relative;
  z-index: 1;
  min-height: 500px;
}
.AllBigIndex2 .slider-big1 img {
  width: 100%;
  min-height: 500px;
  object-fit: cover;
}
.AllBigIndex2:after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  z-index: 2;
  background: rgba(0, 0, 0, 0.6);
}
@media screen and (max-width: 1000px) {
  .AllBigIndex2 .slider-big1 {
    display: none !important;
  }
  .AllBigIndex2 .flow2 {
    position: relative;
  }
  .AllBigIndex2 .flow2 .block {
    width: 100%;
    padding: 0.5rem;
  }
  .AllBigIndex2 .flow2 .block form {
    border: 2px solid #eee;
    border-radius: 5rem;
    overflow: hidden;
  }
  .AllBigIndex2 .flow2 .block form label {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    padding: 0.5rem;
  }
  .AllBigIndex2 .flow2 .block form label input {
    font-size: 1rem;
    font-weight: 500;
    color: #444;
  }
  .AllBigIndex2 .flow2 .block form label button {
    background: transparent;
  }
  .AllBigIndex2 .flow2 .block form label i {
    display: grid;
    align-items: center;
  }
  .AllBigIndex2 .flow2 .block form label i svg {
    width: 1rem;
    height: 1rem;
    color: #000;
  }
  .AllBigIndex2 .flow2 .block .history .name {
    margin: 0.5rem 0;
    font-size: 0.9rem;
    font-weight: 700;
    color: #000;
    text-align: center;
  }
  .AllBigIndex2 .flow2 .block .history ul {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
  }
  .AllBigIndex2 .flow2 .block .history ul li a {
    display: grid;
    font-size: 0.8rem;
    font-weight: 500;
    color: #000;
    border: 2px solid #eee;
    padding: 0.5rem 1rem;
    border-radius: 5rem;
  }
  .AllBigIndex2 .flow2 .block .history ul li a:hover {
    background: var(--green-color);
    color: white;
  }
  .AllBigIndex2 .flow2 .block .more {
    display: grid;
    justify-content: center;
    margin-top: 1rem;
  }
  .AllBigIndex2 .flow2 .block .more a {
    font-size: 0.9rem;
    font-weight: 700;
    color: white;
    border-radius: 5rem;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0.5rem 1rem;
    background: black;
  }
  .AllBigIndex2 .flow2 .block .more a i {
    display: grid;
    align-items: center;
  }
  .AllBigIndex2 .flow2 .block .more a i svg {
    width: 1rem;
    height: 1rem;
    fill: white;
  }
  .AllBigIndex2 .flow2 .block .about {
    padding-top: 1rem;
    margin-top: 1rem;
    border-top: 2px solid #eee;
    text-align: center;
    font-size: 0.9rem;
    font-weight: 700;
    color: #000;
  }
}

.AllBigIndex4 {
  margin: auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 1rem;
  margin-top: 2rem;
}
.AllBigIndex4 .right .title {
  font-size: 1.8rem;
  font-weight: 700;
  color: black;
}
.AllBigIndex4 .right .name {
  font-size: 4rem;
  font-weight: 900;
  color: var(--green-color);
}
.AllBigIndex4 .right .body {
  font-size: 1rem;
  font-weight: 500;
  line-height: 2.5rem;
  color: #000;
  text-align: justify;
}
.AllBigIndex4 .right .buttons {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-top: 1rem;
}
.AllBigIndex4 .right .buttons .button {
  font-size: 1rem;
  font-weight: 500;
  cursor: pointer;
  color: white;
  background: var(--green-color);
  border-radius: 10px;
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.5rem 1rem;
}
.AllBigIndex4 .right .buttons .button i {
  display: grid;
  align-items: center;
}
.AllBigIndex4 .right .buttons .button i svg {
  width: 1.5rem;
  height: 1.5rem;
  fill: white;
}
.AllBigIndex4 .right .buttons .button:last-child {
  background: var(--red-color);
}
.AllBigIndex4 .left {
  display: grid;
  justify-content: left;
}
.AllBigIndex4 .left img {
  height: 23rem;
}
@media screen and (max-width: 1000px) {
  .AllBigIndex4 {
    display: flex;
    flex-direction: column-reverse;
    margin-top: 0;
  }
  .AllBigIndex4 .right {
    text-align: center;
  }
  .AllBigIndex4 .right .title {
    font-size: 1rem;
    font-weight: 700;
    color: black;
  }
  .AllBigIndex4 .right .name {
    font-size: 2rem;
  }
  .AllBigIndex4 .right .body {
    font-size: 0.8rem;
    line-height: 2rem;
  }
  .AllBigIndex4 .right .buttons {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
  .AllBigIndex4 .right .buttons a {
    font-size: 0.9rem;
    border-radius: 5px;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.5rem;
  }
  .AllBigIndex4 .right .buttons a i svg {
    width: 1.2rem;
    height: 1.2rem;
  }
  .AllBigIndex4 .left {
    justify-content: center;
  }
  .AllBigIndex4 .left img {
    height: 100%;
  }
}

.listIndex2 {
  position: relative;
  padding: 1rem;
  margin: auto;
}
.listIndex2 .block {
  position: relative;
  z-index: 3;
}
.listIndex2 .block .title1 {
  font-size: 1.8rem;
  font-weight: 900;
  color: white;
  display: grid;
  grid-template-columns: 1fr;
  align-content: center;
  align-items: center;
  grid-gap: 0.5rem;
  text-align: center;
}
.listIndex2 .block .title1 .pic {
  display: grid;
  align-items: center;
  justify-items: center;
  position: relative;
  z-index: 1;
}
.listIndex2 .block .title1 .pic img {
  height: 6rem;
  width: 6rem;
  position: relative;
  z-index: 2;
  border-radius: 50%;
  object-fit: contain;
}
.listIndex2 .block .title1 a {
  font-size: 1rem;
  font-weight: 500;
  color: white;
  text-align: center;
}
.listIndex2 .block .slider-lists2 {
  padding-bottom: 1.5rem;
  padding-top: 0.5rem;
  display: grid;
}
.listIndex2 .block .slider-lists2 .owl-item {
  padding: 0.5rem 0;
}
.listIndex2 .block .slider-lists2 .item {
  border-radius: 20px;
  display: grid;
  overflow: hidden;
  box-shadow: 0 5px 5px rgba(0, 0, 0, 0.03);
  background: white;
}
.listIndex2 .block .slider-lists2 .item .pic {
  position: relative;
  transition: all 0.3s ease-in-out;
  padding: 0.5rem;
}
.listIndex2 .block .slider-lists2 .item .pic img {
  height: 15rem;
  object-fit: contain;
  width: 100%;
}
.listIndex2 .block .slider-lists2 .item .pic .off2 {
  position: absolute;
  left: 0.5rem;
  top: 0.5rem;
}
.listIndex2 .block .slider-lists2 .item .pic .off2 .off {
  position: relative;
}
.listIndex2 .block .slider-lists2 .item .pic .off2 .off i {
  display: grid;
  align-items: center;
  animation: shine 3s ease-in-out infinite;
  width: 2.7rem;
  height: 2.7rem;
}
@keyframes shine {
  0% {
    transform: rotate(0deg);
  }
  50% {
    transform: rotate(360deg);
  }
  100% {
    transform: rotate(0);
  }
}
.listIndex2 .block .slider-lists2 .item .pic .off2 .off i svg {
  width: 2.7rem;
  height: 2.7rem;
  fill: red;
}
.listIndex2 .block .slider-lists2 .item .pic .off2 .off span {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  font-size: 0.9rem;
  font-weight: 500;
  color: white;
  margin: auto;
  display: grid;
  align-items: center;
  justify-content: center;
  z-index: 2;
}
.listIndex2 .block .slider-lists2 .item .pic .cover {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  background: white;
  opacity: 0;
  transition: all 0.2s ease-in-out;
}
.listIndex2 .block .slider-lists2 .item .pic .lottery {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  background: red;
  padding: 5px 10px;
  color: white;
  font-size: 0.7rem;
  font-weight: 700;
  border-radius: 5rem;
  box-shadow: 0 5px 5px rgba(0, 0, 0, 0.2);
}
.listIndex2 .block .slider-lists2 .item .des {
  overflow: hidden;
  padding: 0.5rem;
}
.listIndex2 .block .slider-lists2 .item .des .title {
  font-size: 1rem;
  font-weight: 700;
  color: #444;
  height: 3rem;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  text-overflow: ellipsis;
}
.listIndex2 .block .slider-lists2 .item .des .prices {
  margin-top: 1rem;
  height: 3rem;
}
.listIndex2 .block .slider-lists2 .item .des .prices .offer {
  gap: 0.5rem;
  text-align: left;
}
.listIndex2 .block .slider-lists2 .item .des .prices .offer s {
  font-size: 0.8rem;
  font-weight: 300;
  color: #444;
}
.listIndex2 .block .slider-lists2 .item .des .prices .priceF {
  text-align: left;
  font-size: 1.2rem;
  font-weight: 700;
  color: black;
}
.listIndex2 .block .slider-lists2 .item .des .prices .priceF span {
  font-size: 0.8rem;
  opacity: 0.7;
}
.listIndex2 .block .slider-lists2 .item .des .content {
  display: grid;
  align-items: end;
  font-size: 0.95rem;
  font-weight: 900;
  color: #000;
  height: 3rem;
  margin-top: 1rem;
}
.listIndex2 .block .slider-lists2 .item .des .content span {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
.listIndex2 .block .slider-lists2 .item:hover .pic .cover {
  opacity: 1;
}
.listIndex2 .block .slider-lists2 .owl-next, .listIndex2 .block .slider-lists2 .owl-prev {
  padding: 0.5rem;
  background: white !important;
  position: absolute;
  top: 0;
  bottom: 2rem;
  margin: auto;
  right: 1rem;
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  border: 2px solid #eee !important;
}
.listIndex2 .block .slider-lists2 .owl-next span, .listIndex2 .block .slider-lists2 .owl-prev span {
  font-size: 2rem;
  line-height: 2rem;
}
.listIndex2 .block .slider-lists2 .owl-next {
  left: 1rem;
  right: auto;
}
.listIndex2 .pc1 .pc11 {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  height: 65%;
  z-index: 1;
}
.listIndex2 .pc1 .pc12 {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  height: 70%;
  border-radius: 20px;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
  z-index: 2;
  opacity: 0.9;
}
@media screen and (max-width: 700px) {
  .listIndex2 {
    padding: 0.5rem;
  }
  .listIndex2 .block .title1 {
    font-size: 1rem;
  }
  .listIndex2 .block .title1 .pic img {
    height: 3rem;
    width: 100%;
  }
  .listIndex2 .block .title1 a {
    font-size: 1rem;
    font-weight: 500;
    color: white;
    text-align: center;
  }
  .listIndex2 .block .slider-lists2 {
    padding-bottom: 0.5rem;
  }
  .listIndex2 .block .slider-lists2 .item {
    border-radius: 10px;
  }
  .listIndex2 .block .slider-lists2 .item .pic img {
    height: 8rem;
  }
  .listIndex2 .block .slider-lists2 .item .pic .off2 .off i {
    width: 2rem;
    height: 2rem;
  }
  .listIndex2 .block .slider-lists2 .item .pic .off2 .off i svg {
    width: 2rem;
    height: 2rem;
  }
  .listIndex2 .block .slider-lists2 .item .pic .off2 .off span {
    font-size: 0.7rem;
  }
  .listIndex2 .block .slider-lists2 .item .des .title {
    font-size: 0.8rem;
    height: auto;
  }
  .listIndex2 .block .slider-lists2 .item .des .prices {
    margin-top: 0.5rem;
  }
  .listIndex2 .block .slider-lists2 .item .des .prices .offer s {
    font-size: 0.7rem;
  }
  .listIndex2 .block .slider-lists2 .item .des .prices .priceF {
    font-size: 0.9rem;
  }
  .listIndex2 .block .slider-lists2 .item .des .prices .priceF span {
    font-size: 0.7rem;
  }
  .listIndex2 .block .slider-lists2 .owl-next, .listIndex2 .block .slider-lists2 .owl-prev {
    right: 0;
    width: 2rem;
    height: 2rem;
  }
  .listIndex2 .block .slider-lists2 .owl-next span, .listIndex2 .block .slider-lists2 .owl-prev span {
    font-size: 1.3rem;
    line-height: 1.3rem;
  }
  .listIndex2 .block .slider-lists2 .owl-next {
    left: 0;
    right: auto;
  }
  .listIndex2 .pc1 .pc11 {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    height: 65%;
    z-index: 1;
  }
  .listIndex2 .pc1 .pc12 {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    height: 70%;
    border-radius: 20px;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
    z-index: 2;
    opacity: 0.9;
  }
}

.listIndex3 {
  position: relative;
  padding: 2rem;
  margin: auto;
  border-radius: 10px;
  overflow: hidden;
}
.listIndex3 .block {
  display: grid;
  grid-template-columns: 1fr 2fr auto;
  align-items: center;
  position: relative;
  grid-gap: 2rem;
  z-index: 3;
}
.listIndex3 .block .title1 .name {
  font-size: 1.5rem;
  font-weight: 700;
  color: white;
  margin-bottom: 0.5rem;
}
.listIndex3 .block .title1 p {
  font-size: 1rem;
  font-weight: 300;
  color: white;
  opacity: 0.7;
}
.listIndex3 .block .slider-lists3 {
  display: grid;
}
.listIndex3 .block .slider-lists3 .item {
  display: grid;
}
.listIndex3 .block .slider-lists3 .item .pic {
  background: white;
  display: grid;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  overflow: hidden;
}
.listIndex3 .block .slider-lists3 .item .pic img {
  width: 100%;
  height: 4rem;
  object-fit: contain;
}
.listIndex3 .block .slider-lists3 .item .off1 {
  display: grid;
  justify-content: center;
  margin-top: 0.5rem;
}
.listIndex3 .block .slider-lists3 .item .off1 .off {
  background: var(--green-color);
  border-radius: 5rem;
  color: white;
  font-size: 0.7rem;
  padding: 0 0.5rem;
}
.listIndex3 .block .mores .tp {
  text-align: center;
  font-size: 0.9rem;
  font-weight: 300;
  color: white;
  margin-bottom: 5px;
}
.listIndex3 .block .mores i {
  display: grid;
  align-items: center;
  background: var(--green-color);
  padding: 2px 1rem;
  border-radius: 5rem;
}
.listIndex3 .block .mores i svg {
  width: 1rem;
  height: 1rem;
  fill: white;
}
.listIndex3 .pc1 .pc11 {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  height: 100%;
  z-index: 1;
  border-radius: 20px;
}
.listIndex3 .pc1 .pc12 {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  height: 100%;
  border-radius: 20px;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
  z-index: 2;
  opacity: 0.85;
}
@media screen and (max-width: 700px) {
  .listIndex3 {
    padding: 0.5rem;
  }
  .listIndex3 .block {
    grid-template-columns: 1fr;
    grid-gap: 1rem;
    overflow: hidden;
  }
  .listIndex3 .block .title1 .name {
    font-size: 1rem;
    text-align: center;
  }
  .listIndex3 .block .title1 p {
    font-size: 0.8rem;
    text-align: center;
  }
  .listIndex3 .block .slider-lists3 {
    display: grid;
  }
  .listIndex3 .block .slider-lists3 .item {
    display: grid;
  }
  .listIndex3 .block .slider-lists3 .item .pic {
    background: white;
    display: grid;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    overflow: hidden;
  }
  .listIndex3 .block .slider-lists3 .item .pic img {
    width: 100%;
    height: 4rem;
    object-fit: contain;
  }
  .listIndex3 .block .slider-lists3 .item .off1 {
    display: grid;
    justify-content: center;
    margin-top: 0.5rem;
  }
  .listIndex3 .block .slider-lists3 .item .off1 .off {
    background: var(--green-color);
    border-radius: 5rem;
    color: white;
    font-size: 0.7rem;
    padding: 0 0.5rem;
  }
  .listIndex3 .block .mores {
    display: flex;
    gap: 0.5rem;
    justify-content: center;
    margin-top: 0.5rem;
  }
  .listIndex3 .block .mores .tp {
    font-size: 0.8rem;
  }
  .listIndex3 .block .mores i {
    padding: 2px 0.5rem;
  }
}

.listIndex4 {
  position: relative;
  overflow: hidden;
  background: black;
}
.listIndex4 .wave svg {
  width: 100%;
  height: 100%;
  fill: var(--back4-color);
  transform: translateY(-3.8rem);
}
.listIndex4 .block {
  align-items: center;
  position: relative;
  z-index: 3;
  transform: translateY(-2rem);
}
.listIndex4 .block .title1 {
  display: grid;
  justify-content: center;
  padding-bottom: 2rem;
}
.listIndex4 .block .title1 .name {
  font-size: 1.5rem;
  font-weight: 700;
  color: white;
  text-align: center;
  margin-bottom: 0.5rem;
}
.listIndex4 .block .title1 p {
  font-size: 1rem;
  font-weight: 300;
  text-align: center;
  color: white;
  opacity: 0.7;
}
.listIndex4 .block .slider-lists4 .item {
  border-radius: 20px;
  display: grid;
  overflow: hidden;
  box-shadow: 0 5px 5px rgba(0, 0, 0, 0.03);
  background: white;
}
.listIndex4 .block .slider-lists4 .item .pic {
  position: relative;
  transition: all 0.3s ease-in-out;
  padding: 0.5rem;
}
.listIndex4 .block .slider-lists4 .item .pic img {
  height: 15rem;
  object-fit: contain;
  width: 100%;
}
.listIndex4 .block .slider-lists4 .item .pic .off2 {
  position: absolute;
  left: 0.5rem;
  top: 0.5rem;
}
.listIndex4 .block .slider-lists4 .item .pic .off2 .off {
  position: relative;
}
.listIndex4 .block .slider-lists4 .item .pic .off2 .off i {
  display: grid;
  align-items: center;
  animation: shine 3s ease-in-out infinite;
  width: 2.7rem;
  height: 2.7rem;
}
@keyframes shine {
  0% {
    transform: rotate(0deg);
  }
  50% {
    transform: rotate(360deg);
  }
  100% {
    transform: rotate(0);
  }
}
.listIndex4 .block .slider-lists4 .item .pic .off2 .off i svg {
  width: 2.7rem;
  height: 2.7rem;
  fill: red;
}
.listIndex4 .block .slider-lists4 .item .pic .off2 .off span {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  font-size: 0.9rem;
  font-weight: 500;
  color: white;
  margin: auto;
  display: grid;
  align-items: center;
  justify-content: center;
  z-index: 2;
}
.listIndex4 .block .slider-lists4 .item .pic .cover {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  background: white;
  opacity: 0;
  transition: all 0.2s ease-in-out;
}
.listIndex4 .block .slider-lists4 .item .pic .lottery {
  position: absolute;
  top: 1rem;
  right: 1rem;
  background: red;
  padding: 5px 10px;
  color: white;
  font-size: 0.7rem;
  font-weight: 700;
  border-radius: 5rem;
  box-shadow: 0 5px 5px rgba(0, 0, 0, 0.2);
}
.listIndex4 .block .slider-lists4 .item .des {
  overflow: hidden;
  padding: 1rem;
}
.listIndex4 .block .slider-lists4 .item .des .title {
  font-size: 1rem;
  font-weight: 700;
  color: #444;
  height: 3rem;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  text-overflow: ellipsis;
}
.listIndex4 .block .slider-lists4 .item .des .prices {
  margin-top: 1rem;
  height: 3rem;
}
.listIndex4 .block .slider-lists4 .item .des .prices .offer {
  gap: 0.5rem;
  text-align: left;
}
.listIndex4 .block .slider-lists4 .item .des .prices .offer s {
  font-size: 0.8rem;
  font-weight: 300;
  color: #444;
}
.listIndex4 .block .slider-lists4 .item .des .prices .priceF {
  text-align: left;
  font-size: 1.2rem;
  font-weight: 700;
  color: black;
}
.listIndex4 .block .slider-lists4 .item .des .prices .priceF span {
  font-size: 0.8rem;
  opacity: 0.7;
}
.listIndex4 .block .slider-lists4 .item .des .content {
  display: grid;
  align-items: end;
  font-size: 1rem;
  font-weight: 900;
  color: #000;
  height: 3rem;
}
.listIndex4 .block .slider-lists4 .item .des .content span {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
.listIndex4 .block .slider-lists4 .item .des .content {
  margin-top: 1rem;
}
.listIndex4 .block .slider-lists4 .item:hover .pic .cover {
  opacity: 1;
}
.listIndex4 .block .slider-lists4 .owl-next, .listIndex4 .block .slider-lists4 .owl-prev {
  padding: 0.5rem;
  background: white;
  position: absolute;
  top: 0;
  bottom: 2rem;
  margin: auto;
  right: 1rem;
  width: 3rem;
  height: 3rem;
  font-size: 2rem;
  border-radius: 50%;
  box-shadow: 0 5px 5px rgba(0, 0, 0, 0.2);
}
.listIndex4 .block .slider-lists4 .owl-next {
  left: 1rem;
  right: auto;
}
@media screen and (max-width: 800px) {
  .listIndex4 .wave svg {
    transform: translateY(0);
    margin-top: -4rem;
  }
  .listIndex4 .block {
    padding: 0 0.5rem;
  }
  .listIndex4 .block .title1 .name {
    font-size: 1.2rem;
  }
  .listIndex4 .block .title1 p {
    font-size: 0.8rem;
  }
  .listIndex4 .block .slider-lists4 .item {
    border-radius: 10px;
  }
  .listIndex4 .block .slider-lists4 .item .pic {
    padding: 0.2rem;
  }
  .listIndex4 .block .slider-lists4 .item .pic img {
    height: 10rem;
  }
  .listIndex4 .block .slider-lists4 .item .pic .off2 {
    left: 0.2rem;
    top: 0.2rem;
  }
  .listIndex4 .block .slider-lists4 .item .pic .off2 .off i {
    width: 2rem;
    height: 2rem;
  }
  .listIndex4 .block .slider-lists4 .item .pic .off2 .off i svg {
    width: 2rem;
    height: 2rem;
  }
  .listIndex4 .block .slider-lists4 .item .pic .off2 .off span {
    font-size: 0.7rem;
  }
  .listIndex4 .block .slider-lists4 .item .des {
    padding: 0.5rem;
  }
  .listIndex4 .block .slider-lists4 .item .des .title {
    font-size: 0.8rem;
    height: auto;
  }
  .listIndex4 .block .slider-lists4 .item .des .prices {
    margin-top: 0.5rem;
  }
  .listIndex4 .block .slider-lists4 .item .des .prices .offer s {
    font-size: 0.7rem;
  }
  .listIndex4 .block .slider-lists4 .item .des .prices .priceF {
    font-size: 1rem;
  }
  .listIndex4 .block .slider-lists4 .item .des .prices .priceF span {
    font-size: 0.7rem;
  }
  .listIndex4 .block .slider-lists4 .item:hover .pic .cover {
    opacity: 1;
  }
  .listIndex4 .block .slider-lists4 .owl-next, .listIndex4 .block .slider-lists4 .owl-prev {
    right: 0;
    width: 2rem;
    height: 2rem;
    font-size: 1.5rem;
  }
  .listIndex4 .block .slider-lists4 .owl-next {
    right: auto;
    left: 0;
  }
}

.listIndex5 {
  margin: auto;
  background: white;
  border-radius: 20px;
  overflow: hidden;
  border: 1px solid #eee;
}
.listIndex5 .title1 {
  padding: 1rem;
}
.listIndex5 .title1 .name {
  font-size: 1.5rem;
  font-weight: 900;
  color: #000;
  text-align: center;
  border-radius: 5px;
}
.listIndex5 .items {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
}
.listIndex5 .items .item {
  display: grid;
  overflow: hidden;
  background: white;
  border-left: 1px solid #eee;
  border-top: 1px solid #eee;
  position: relative;
}
.listIndex5 .items .item .pic {
  padding: 0.5rem;
}
.listIndex5 .items .item .pic img {
  height: 10rem;
  object-fit: contain;
  width: 100%;
}
.listIndex5 .items .item .pic .lottery {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  background: red;
  padding: 5px 10px;
  color: white;
  font-size: 0.7rem;
  font-weight: 700;
  border-radius: 5rem;
  box-shadow: 0 5px 5px rgba(0, 0, 0, 0.2);
}
.listIndex5 .items .item .des {
  overflow: hidden;
  padding: 0.5rem;
}
.listIndex5 .items .item .des .title {
  font-size: 1rem;
  font-weight: 700;
  color: #444;
  height: 3rem;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  text-overflow: ellipsis;
}
.listIndex5 .items .item .des .prices {
  margin-top: 1rem;
}
.listIndex5 .items .item .des .prices .offer {
  gap: 0.5rem;
  display: flex;
  justify-content: left;
}
.listIndex5 .items .item .des .prices .offer .off {
  background: red;
  color: white;
  padding: 2px 10px;
  border-radius: 5rem;
}
.listIndex5 .items .item .des .prices .offer s {
  font-size: 0.9rem;
  font-weight: 300;
  color: #444;
}
.listIndex5 .items .item .des .prices .priceF {
  text-align: left;
  font-size: 1.2rem;
  font-weight: 700;
  color: black;
}
.listIndex5 .items .item .des .prices .priceF span {
  font-size: 0.8rem;
  opacity: 0.7;
}
.listIndex5 .items .item .des .content {
  display: grid;
  align-items: end;
  font-size: 0.95rem;
  font-weight: 900;
  color: #000;
  height: 3rem;
}
.listIndex5 .items .item .des .content span {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
.listIndex5 .items .item .des .content {
  margin-top: 1rem;
}
.listIndex5 .items .item:nth-child(6n) {
  border-left: 0;
}
.listIndex5 .items .owl-next, .listIndex5 .items .owl-prev {
  padding: 0.5rem;
  background: white;
  position: absolute;
  top: 0;
  bottom: 2rem;
  margin: auto;
  right: 1rem;
  width: 3rem;
  height: 3rem;
  font-size: 2rem;
  border-radius: 50%;
  box-shadow: 0 5px 5px rgba(0, 0, 0, 0.2);
}
.listIndex5 .items .owl-next {
  left: 1rem;
  right: auto;
}
@media screen and (max-width: 800px) {
  .listIndex5 {
    border-radius: 10px;
  }
  .listIndex5 .title1 {
    padding: 0.5rem;
  }
  .listIndex5 .title1 .name {
    font-size: 1rem;
  }
  .listIndex5 .items {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
  }
  .listIndex5 .items .item .pic {
    padding: 0.2rem;
  }
  .listIndex5 .items .item .pic img {
    height: 7rem;
  }
  .listIndex5 .items .item .des {
    padding: 0.2rem;
  }
  .listIndex5 .items .item .des .title {
    font-size: 0.8rem;
    height: auto;
  }
  .listIndex5 .items .item .des .prices {
    margin-top: 0.5rem;
  }
  .listIndex5 .items .item .des .prices .offer .off {
    padding: 2px 5px;
  }
  .listIndex5 .items .item .des .prices .offer s {
    font-size: 0.7rem;
  }
  .listIndex5 .items .item .des .prices .priceF {
    font-size: 1rem;
  }
  .listIndex5 .items .item .des .prices .priceF span {
    font-size: 0.6rem;
  }
  .listIndex5 .items .item:nth-child(2n) {
    border-left: 0;
  }
}

.listIndex6 {
  background: white;
}
.listIndex6 .items {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1px;
}
.listIndex6 .items .item {
  display: grid;
  overflow: hidden;
  position: relative;
}
.listIndex6 .items .item .pic {
  box-shadow: inset 0 -40px 20px rgba(0, 0, 0, 0.5);
  background-size: contain;
  background-repeat: no-repeat;
  height: 20rem;
}
.listIndex6 .items .item .priceF {
  position: absolute;
  bottom: 0.5rem;
  right: 0.5rem;
  font-size: 1.2rem;
  font-weight: 900;
  color: white;
}

.allQuickAdd {
  background: rgba(0, 0, 0, 0.8);
  z-index: 200;
  position: fixed;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-columns: 1fr;
  justify-content: center;
}
.allQuickAdd .showQ {
  width: 60%;
  margin: auto;
  display: grid;
  grid-template-columns: 1fr;
  border-radius: 20px;
  overflow: hidden;
}
.allQuickAdd .showQ .botQ {
  background: white;
  border-radius: 10px;
  box-shadow: 0 -10px 10px rgba(0, 0, 0, 0.1);
  position: relative;
  z-index: 2;
}
.allQuickAdd .showQ .botQ .productQ {
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.allQuickAdd .showQ .botQ .productQ .pic {
  display: grid;
  background: black;
  justify-content: center;
  height: 90vh;
  position: relative;
}
.allQuickAdd .showQ .botQ .productQ .pic img {
  object-fit: contain;
  width: 100%;
  height: 100%;
}
.allQuickAdd .showQ .botQ .productQ .pic .closeQ {
  position: absolute;
  top: 0.5rem;
  left: 0.5rem;
  cursor: pointer;
}
.allQuickAdd .showQ .botQ .productQ .pic .closeQ svg {
  width: 1.5rem;
  height: 1.5rem;
  fill: white;
}
.allQuickAdd .showQ .botQ .productQ .detailQ {
  overflow-y: scroll;
  height: 90vh;
  border-right: 1px solid #eee;
}
.allQuickAdd .showQ .botQ .productQ .detailQ .users {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  padding: 0.5rem;
  border-bottom: 1px solid #eee;
}
.allQuickAdd .showQ .botQ .productQ .detailQ .users .logo {
  display: grid;
  align-items: center;
  border-radius: 50%;
  overflow: hidden;
}
.allQuickAdd .showQ .botQ .productQ .detailQ .users .logo img {
  width: 2rem;
  height: 2rem;
  object-fit: cover;
}
.allQuickAdd .showQ .botQ .productQ .detailQ .users .nameU {
  font-size: 0.9rem;
  font-weight: 500;
  color: #000;
}
.allQuickAdd .showQ .botQ .productQ .detailQ .des {
  padding: 0.5rem;
  border-bottom: 1px solid #eee;
}
.allQuickAdd .showQ .botQ .productQ .detailQ .des .title {
  font-size: 1.1rem;
  font-weight: 900;
  color: #444;
  margin-bottom: 0.5rem;
}
.allQuickAdd .showQ .botQ .productQ .detailQ .des .optionAdd {
  display: grid;
  grid-template-columns: 3rem 1fr;
  grid-gap: 0.5rem;
  align-items: center;
  margin-bottom: 1rem;
}
.allQuickAdd .showQ .botQ .productQ .detailQ .des .optionAdd label {
  font-size: 0.9rem;
  font-weight: 500;
  color: #000;
}
.allQuickAdd .showQ .botQ .productQ .detailQ .des .optionAdd select {
  padding: 0.3rem;
  border-radius: 5px;
  font-size: 0.8rem;
  font-weight: 300;
  color: #000;
  background: #f5f5f5;
}
.allQuickAdd .showQ .botQ .productQ .detailQ .des .price1 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem;
}
.allQuickAdd .showQ .botQ .productQ .detailQ .des .price1 .right .topP {
  display: flex;
  justify-content: right;
  align-items: center;
  gap: 0.3rem;
}
.allQuickAdd .showQ .botQ .productQ .detailQ .des .price1 .right .topP s {
  color: #444;
  font-size: 0.7rem;
  font-weight: 300;
}
.allQuickAdd .showQ .botQ .productQ .detailQ .des .price1 .right .topP .off {
  background: var(--green-color);
  padding: 0.1rem 0.3rem;
  color: white;
  font-size: 0.7rem;
  border-radius: 5px;
}
.allQuickAdd .showQ .botQ .productQ .detailQ .des .price1 .right .price {
  font-weight: 300;
  color: #444;
  font-size: 0.8rem;
}
.allQuickAdd .showQ .botQ .productQ .detailQ .des .price1 .right .price span {
  font-size: 1.2rem;
  margin-left: 5px;
  font-weight: 900;
}
.allQuickAdd .showQ .botQ .productQ .detailQ .des .price1 .left button {
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--green-color);
  padding: 0.3rem 2rem;
  border-radius: 5rem;
  background: transparent;
  border: 1px solid var(--green-color);
}
.allQuickAdd .showQ .botQ .productQ .detailQ .allComments {
  padding: 0.5rem;
}
.allQuickAdd .showQ .botQ .productQ .detailQ .allComments .getCommentItem {
  border-bottom: 1px solid #eee;
  margin-bottom: 0.5rem;
  padding-bottom: 0.5rem;
}
.allQuickAdd .showQ .botQ .productQ .detailQ .allComments .getCommentItem .rightComment {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.5rem;
}
.allQuickAdd .showQ .botQ .productQ .detailQ .allComments .getCommentItem .rightComment .topRight {
  display: flex;
  justify-content: right;
  align-items: center;
  grid-gap: 0.5rem;
}
.allQuickAdd .showQ .botQ .productQ .detailQ .allComments .getCommentItem .rightComment .topRight h4 {
  font-size: 0.9rem;
  font-weight: 500;
  color: #000;
}
.allQuickAdd .showQ .botQ .productQ .detailQ .allComments .getCommentItem .rightComment .topRight .rates {
  display: flex;
  justify-content: right;
  align-items: center;
}
.allQuickAdd .showQ .botQ .productQ .detailQ .allComments .getCommentItem .rightComment .topRight .rates .rateItem {
  display: grid;
  align-items: center;
}
.allQuickAdd .showQ .botQ .productQ .detailQ .allComments .getCommentItem .rightComment .topRight .rates .rateItem img {
  width: 0.8rem;
  height: 0.8rem;
}
.allQuickAdd .showQ .botQ .productQ .detailQ .allComments .getCommentItem .rightComment .topRight .rates .rateItem {
  -webkit-transform: scaleX(-1);
  transform: scaleX(-1);
}
.allQuickAdd .showQ .botQ .productQ .detailQ .allComments .getCommentItem .rightComment .time {
  font-size: 0.65rem;
  font-weight: 300;
  color: #000;
  border-radius: 5px;
  opacity: 0.6;
}
.allQuickAdd .showQ .botQ .productQ .detailQ .allComments .getCommentItem .botC .body1 {
  font-size: 0.8rem;
  font-weight: 500;
  color: #000;
  opacity: 0.6;
}
.allQuickAdd .showQ .botQ .productQ .detailQ .allComments .getCommentItem .botC .getCommentDatas {
  display: flex;
  grid-gap: 1rem;
}
.allQuickAdd .showQ .botQ .productQ .detailQ .allComments .getCommentItem .botC .getCommentData {
  margin-top: 1rem;
}
.allQuickAdd .showQ .botQ .productQ .detailQ .allComments .getCommentItem .botC .getCommentData h5 {
  font-size: 0.9rem;
  font-weight: 500;
  color: #000;
  margin-bottom: 0.5rem;
}
.allQuickAdd .showQ .botQ .productQ .detailQ .allComments .getCommentItem .botC .getCommentData .items {
  display: grid;
  grid-gap: 0.5rem;
}
.allQuickAdd .showQ .botQ .productQ .detailQ .allComments .getCommentItem .botC .getCommentData .items .item {
  display: grid;
  grid-template-columns: auto 1fr;
  justify-content: right;
  align-items: center;
  grid-gap: 0.5rem;
  color: #000;
  font-weight: 300;
  font-size: 0.8rem;
  opacity: 0.7;
}
.allQuickAdd .showQ .botQ .productQ .detailQ .allComments .getCommentItem .botC .getCommentData .items .item i {
  display: grid;
  justify-content: center;
  align-items: center;
}
.allQuickAdd .showQ .botQ .productQ .detailQ .allComments .getCommentItem .botC .getCommentData .items .item i svg {
  fill: green;
  width: 0.5rem;
  height: 0.5rem;
}
.allQuickAdd .showQ .botQ .productQ .detailQ .allComments .getCommentItem .botC .bad .items .item i svg {
  fill: red;
}
.allQuickAdd .showQ .botQ .productQ .detailQ .allComments .getCommentItem:last-child {
  border-bottom: 0;
  padding-bottom: 0;
  margin-bottom: 0;
}
.allQuickAdd .showQ .botQ .productQ .detailQ .allComments .emptyComments {
  display: none;
  text-align: center;
  font-size: 0.8rem;
  font-weight: 300;
  color: #000;
  opacity: 0.7;
}
.allQuickAdd .showQ .flowN {
  position: absolute;
  bottom: 0;
  top: 0;
  right: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  z-index: 1;
}
.allQuickAdd .showQ .flowN button {
  padding: 1rem 0.2rem;
  font-size: 1rem;
  font-weight: 700;
  color: white;
  background: var(--green-color);
  text-orientation: mixed;
  writing-mode: vertical-rl;
}
.allQuickAdd .showQ .flowN button:first-child {
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;
}
.allQuickAdd .showQ .flowN button:last-child {
  border-top-right-radius: 10px;
  border-bottom-right-radius: 10px;
}
@media screen and (max-width: 600px) {
  .allQuickAdd .showQ {
    width: 100%;
    border-radius: 0;
  }
  .allQuickAdd .showQ .botQ {
    background: white;
    height: 100vh;
    border-radius: 0;
    padding-bottom: 3rem;
  }
  .allQuickAdd .showQ .botQ .productQ {
    display: block;
  }
  .allQuickAdd .showQ .botQ .productQ .pic {
    height: auto;
  }
  .allQuickAdd .showQ .botQ .productQ .pic img {
    width: 100%;
    height: 40vh;
  }
  .allQuickAdd .showQ .botQ .productQ .detailQ {
    height: 100%;
  }
  .allQuickAdd .showQ .flowN {
    top: auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    z-index: 3;
  }
  .allQuickAdd .showQ .flowN button {
    padding: 0.3rem;
    font-size: 0.8rem;
    font-weight: 700;
    color: white;
    background: black;
    text-orientation: unset;
    writing-mode: unset;
  }
  .allQuickAdd .showQ .flowN button:first-child {
    border-radius: 0;
  }
  .allQuickAdd .showQ .flowN button:last-child {
    border-radius: 0;
  }
}

@media screen and (max-width: 1000px) {
  .listIndex6 .items {
    grid-template-columns: 1fr;
  }
}
.listIndex7 {
  position: relative;
  margin: auto;
}
.listIndex7 .block {
  border-radius: 20px;
  padding: 1rem;
  background: white;
  z-index: 2;
  position: relative;
}
.listIndex7 .block .titles {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1rem;
}
.listIndex7 .block .titles .name {
  font-size: 1.5rem;
  font-weight: 900;
  color: #000;
  position: relative;
}
.listIndex7 .block .titles .name span {
  position: relative;
  z-index: 2;
}
.listIndex7 .block .titles .name:before {
  content: "";
  width: 100%;
  height: 6px;
  background: var(--green-color);
  opacity: 0.5;
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  margin: auto;
  z-index: 1;
  display: grid;
}
.listIndex7 .block .titles a {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 1rem;
  font-weight: 500;
  color: black;
  padding: 0.3rem 1rem;
  border-radius: 5rem;
  border: 1px solid black;
}
.listIndex7 .block .titles a i {
  display: grid;
  align-items: center;
}
.listIndex7 .block .titles a i svg {
  width: 1rem;
  height: 1rem;
  fill: black;
  transition: all 0.3s ease-in-out;
}
.listIndex7 .block .titles a:hover {
  background: black;
  color: white;
}
.listIndex7 .block .titles a:hover i svg {
  fill: white;
}
.listIndex7 .block .items {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr));
  grid-gap: 1rem;
  position: relative;
  z-index: 2;
}
.listIndex7 .block .items .item {
  padding: 1rem;
  border-radius: 10px;
  border: 2px solid #eee;
  position: relative;
}
.listIndex7 .block .items .item .pic {
  display: grid;
  justify-content: center;
}
.listIndex7 .block .items .item .pic img {
  height: 9rem;
  object-fit: cover;
  border-radius: 10px;
}
.listIndex7 .block .items .item .pic .off {
  position: absolute;
  left: 0.3rem;
  top: 0.3rem;
  font-size: 0.8rem;
  font-weight: 900;
  color: white;
  padding: 0.2rem 0.5rem;
  background: rgb(255, 57, 57);
  border-radius: 5rem;
}
.listIndex7 .block .items .item .pic .lottery {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  background: red;
  padding: 5px 10px;
  color: white;
  font-size: 0.7rem;
  font-weight: 700;
  border-radius: 5rem;
  box-shadow: 0 5px 5px rgba(0, 0, 0, 0.2);
}
.listIndex7 .block .items .item .title1 {
  font-size: 0.9rem;
  font-weight: 300;
  color: #000;
  text-align: center;
  margin: 0.5rem 0;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  text-overflow: ellipsis;
  transition: all 0.3s ease-in-out;
}
.listIndex7 .block .items .item .prices {
  text-align: left;
}
.listIndex7 .block .items .item .prices s {
  font-size: 0.7rem;
  font-weight: 300;
  color: #444;
  opacity: 0.7;
}
.listIndex7 .block .items .item .prices .price {
  font-size: 0.9rem;
  font-weight: 900;
  color: #000;
}
.listIndex7 .block .items .item .prices .price span {
  font-size: 0.7rem;
}
.listIndex7 .block .items .item .addCart {
  margin-top: 0.5rem;
}
.listIndex7 .block .items .item .addCart .addToCart {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.4rem 1rem;
  text-align: center;
  font-size: 0.8rem;
  color: var(--green-color);
  border-radius: 10px;
  border: 1px solid var(--green-color);
  transition: all 0.3s ease-in-out;
}
.listIndex7 .block .items .item .addCart .addToCart i {
  display: grid;
  align-items: center;
}
.listIndex7 .block .items .item .addCart .addToCart i svg {
  width: 0.9rem;
  height: 0.9rem;
  fill: var(--green-color);
  transition: all 0.3s ease-in-out;
}
.listIndex7 .block .items .item .addCart .addToCart:hover {
  background: var(--green-color);
  color: white;
}
.listIndex7 .block .items .item .addCart .addToCart:hover i svg {
  fill: white;
}
.listIndex7 .block .items .item .content {
  display: grid;
  align-items: end;
  font-size: 0.95rem;
  font-weight: 900;
  color: #000;
  height: 3rem;
}
.listIndex7 .block .items .item .content span {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
.listIndex7 .block .items .item .content {
  margin-top: 1rem;
}
.listIndex7 .block .items .item:hover .title1 {
  color: var(--green-color);
}
.listIndex7 .pattern1 {
  position: absolute;
  top: 4rem;
  right: -2rem;
  opacity: 0.2;
  z-index: 1;
}
.listIndex7 .pattern1 svg {
  width: 5rem;
  height: 5rem;
  fill: #777;
}
.listIndex7 .pattern2 {
  position: absolute;
  height: 5rem;
  bottom: 5rem;
  left: -3rem;
  opacity: 0.2;
  transform: rotate(45deg);
  z-index: 1;
}
.listIndex7 .pattern2 svg {
  width: 5rem;
  height: 5rem;
  fill: #777;
}

@media screen and (max-width: 1000px) {
  .listIndex7 .block {
    padding: 0.5rem;
  }
  .listIndex7 .block .titles .name {
    font-size: 1.2rem;
  }
  .listIndex7 .block .titles a {
    font-size: 0.8rem;
    padding: 0.3rem;
  }
  .listIndex7 .block .items {
    grid-template-columns: 1fr 1fr;
    grid-gap: 0.5rem;
  }
  .listIndex7 .block .items .item {
    padding: 0.5rem;
  }
  .listIndex7 .block .items .item .pic img {
    height: 8rem;
  }
  .listIndex7 .block .items .item .title1 {
    font-size: 0.75rem;
  }
  .listIndex7 .block .items .item .prices s {
    font-size: 0.65rem;
  }
  .listIndex7 .block .items .item .prices .price {
    font-size: 1rem;
  }
  .listIndex7 .block .items .item .prices .price span {
    font-size: 0.7rem;
  }
  .listIndex7 .block .items .item .addCart .addToCart {
    padding: 0.4rem 0.5rem;
    font-size: 0.7rem;
  }
  .listIndex7 .block .items .item .addCart .addToCart i svg {
    width: 0.8rem;
    height: 0.8rem;
  }
  .listIndex7 .pattern1, .listIndex7 .pattern2 {
    display: none;
  }
}
.listIndex8 {
  margin: auto;
  border-radius: 20px;
  display: grid;
  grid-template-columns: 10rem 1fr;
  grid-gap: 1rem;
  padding: 1rem;
}
.listIndex8 .title {
  display: grid;
  align-content: center;
}
.listIndex8 .title .name {
  font-size: 1.1rem;
  font-weight: 900;
  color: white;
  text-align: center;
}
.listIndex8 .title .pic {
  display: grid;
  justify-content: center;
  margin: 1rem 0;
}
.listIndex8 .title .pic img {
  height: 5rem;
  object-fit: contain;
}
.listIndex8 .title a {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  align-items: center;
  color: white;
  font-size: 0.9rem;
  font-weight: 500;
}
.listIndex8 .title a i {
  display: grid;
  align-items: center;
}
.listIndex8 .title a i svg {
  width: 1rem;
  height: 1rem;
  fill: white;
}
.listIndex8 .slider-product8 {
  background: white;
  border-radius: 10px;
  overflow: hidden;
}
.listIndex8 .slider-product8 .item {
  padding: 0.5rem;
  border-left: 1px solid #eee;
  display: grid;
  position: relative;
}
.listIndex8 .slider-product8 .item .pic img {
  height: 9rem;
  object-fit: contain;
}
.listIndex8 .slider-product8 .item .pic .lottery {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  background: red;
  padding: 5px 10px;
  color: white;
  font-size: 0.7rem;
  font-weight: 700;
  border-radius: 5rem;
  box-shadow: 0 5px 5px rgba(0, 0, 0, 0.2);
}
.listIndex8 .slider-product8 .item .title1 {
  font-size: 0.9rem;
  font-weight: 300;
  color: #000;
  margin: 0.5rem 0;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  text-overflow: ellipsis;
  transition: all 0.3s ease-in-out;
}
.listIndex8 .slider-product8 .item .prices {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem;
}
.listIndex8 .slider-product8 .item .prices .off {
  background: red;
  padding: 0.1rem 0.5rem;
  border-radius: 5rem;
  color: white;
  font-size: 0.7rem;
  font-weight: 900;
}
.listIndex8 .slider-product8 .item .prices .price {
  font-size: 1rem;
  font-weight: 900;
  color: #000;
}
.listIndex8 .slider-product8 .item .prices .price span {
  font-size: 0.8rem;
  font-weight: 500;
}
.listIndex8 .slider-product8 .item .content {
  display: grid;
  align-items: end;
  font-size: 0.85rem;
  font-weight: 900;
  color: #000;
}
.listIndex8 .slider-product8 .item .content span {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
.listIndex8 .slider-product8 .item .content {
  margin-top: 1rem;
}
.listIndex8 .slider-product8 .item s {
  display: flex;
  justify-content: left;
  gap: 2px;
  font-size: 0.7rem;
  color: #444;
}
.listIndex8 .slider-product8 .item:hover .title1 {
  color: var(--green-color);
}
@media screen and (max-width: 700px) {
  .listIndex8 {
    padding: 0.5rem;
    grid-template-columns: 1fr;
  }
}

.listIndex9 {
  margin: auto;
  display: grid;
  grid-template-columns: 1fr 18rem;
  grid-gap: 1rem;
}
.listIndex9 .ads .slider-ad2 {
  display: grid;
}
.listIndex9 .ads .slider-ad2 a {
  display: grid;
}
.listIndex9 .ads .slider-ad2 a img {
  height: 20.5rem;
  object-fit: cover;
  border-radius: 20px;
}
.listIndex9 .left {
  padding: 5px;
  background: linear-gradient(var(--back4-color), var(--back4-color), var(--green-color), var(--back4-color), var(--back4-color));
  border-radius: 15px;
  border: 1px solid transparent;
  background-clip: padding-box;
  transition: 0.3s all ease;
}
.listIndex9 .left .box {
  padding: 1rem;
  background: white;
  border-radius: 15px;
}
.listIndex9 .left .box .titles {
  margin-bottom: 1rem;
  text-align: center;
  font-size: 1.1rem;
  font-weight: 900;
  color: #000;
}
.listIndex9 .left .box .slider-product9 .owl-carousel.owl-loaded {
  display: grid !important;
}
.listIndex9 .left .box .slider-product9 button.owl-prev {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  opacity: 0;
  visibility: hidden;
}
.listIndex9 .left .box .slider-product9 button.owl-next {
  position: absolute;
  left: 1rem;
  top: 0;
  bottom: 0;
  opacity: 0;
  visibility: hidden;
}
.listIndex9 .left .box .slider-product9 .owl-dots {
  position: absolute;
  opacity: 0;
  visibility: hidden;
}
.listIndex9 .left .box .slider-product9 a .timer {
  margin-bottom: 1rem;
  border-radius: 5px;
  position: relative;
  overflow: hidden;
  height: 5px;
}
.listIndex9 .left .box .slider-product9 a .timer:before {
  height: 5px;
  background: #f5f5f5;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  content: "";
  box-sizing: inherit;
}
.listIndex9 .left .box .slider-product9 a .timer:after {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 5px;
  background: -webkit-gradient(linear, left top, right top, from(#f5f5f5), to(rgb(255, 0, 0)));
  background: linear-gradient(90deg, #f5f5f5, rgb(255, 0, 0));
  content: "";
  transition: all 8s ease-in-out;
  box-shadow: 0 0 5px rgba(255, 0, 0, 0.1);
}
.listIndex9 .left .box .slider-product9 a .pic {
  transition: all 0.5s ease-in-out;
}
.listIndex9 .left .box .slider-product9 a .pic img {
  width: 100%;
  height: 9rem;
  object-fit: contain;
}
.listIndex9 .left .box .slider-product9 a .title2 {
  font-size: 0.9rem;
  font-weight: 300;
  text-align: center;
  color: #000;
  margin: 1rem 0;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  text-overflow: ellipsis;
}
.listIndex9 .left .box .slider-product9 a .price1 {
  letter-spacing: 0.1px;
  font-size: 1.1rem;
  font-weight: 900;
  text-align: left;
  color: #000;
}
.listIndex9 .left .box .slider-product9 a .price1 span {
  font-size: 0.8rem;
  font-weight: 300;
}
.listIndex9 .left .box .slider-product9 .owl-item.active .timer:after {
  width: 100%;
}
@media screen and (max-width: 700px) {
  .listIndex9 {
    display: block;
  }
  .listIndex9 .ads .slider-ad2 a img {
    border-radius: 10px;
    height: 100%;
  }
  .listIndex9 .left {
    margin-top: 0.5rem;
  }
  .listIndex9 .left .box {
    padding: 0.5rem;
  }
  .listIndex9 .left .box .titles {
    margin-bottom: 0.5rem;
    font-size: 1rem;
  }
}

.listIndex10 {
  margin: auto;
  display: grid;
  grid-template-columns: 20rem 1fr;
  gap: 1rem;
}
.listIndex10 .title {
  padding: 1rem;
  border-radius: 15px;
  display: grid;
  align-content: center;
}
.listIndex10 .title .pic {
  display: grid;
  justify-content: center;
  margin-bottom: 1rem;
}
.listIndex10 .title .pic img {
  height: 5rem;
  object-fit: contain;
}
.listIndex10 .title .name {
  font-size: 1.1rem;
  font-weight: 900;
  color: white;
  text-align: center;
}
.listIndex10 .title .body {
  padding: 1rem 0;
  margin: 1rem 0;
  color: rgba(255, 255, 255, 0.6);
  border-top: 2px solid rgba(255, 255, 255, 0.2);
  border-bottom: 2px solid rgba(255, 255, 255, 0.2);
  text-align: center;
  font-size: 1rem;
  font-weight: 500;
}
.listIndex10 .title a {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  align-items: center;
  color: white;
  font-size: 0.9rem;
  font-weight: 500;
  background: rgba(255, 255, 255, 0.1);
  padding: 0.7rem;
  border-radius: 10px;
}
.listIndex10 .title a i {
  display: grid;
  align-items: center;
}
.listIndex10 .title a i svg {
  width: 1rem;
  height: 1rem;
  fill: white;
}
.listIndex10 .slider-product10 {
  background: white;
  border: 1px solid #eee;
  padding: 1rem;
  box-shadow: 0 10px 10px rgba(0, 0, 0, 0.03);
  border-radius: 15px;
  min-width: 0;
}
.listIndex10 .slider-product10 .owl-stage-outer {
  overflow: hidden;
}
.listIndex10 .slider-product10 .item {
  display: grid;
  border: 1px solid #eee;
  padding: 1rem;
  border-radius: 15px;
  position: relative;
}
.listIndex10 .slider-product10 .item .pic img {
  height: 10rem;
  object-fit: contain;
}
.listIndex10 .slider-product10 .item .pic .lottery {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  background: red;
  padding: 5px 10px;
  color: white;
  font-size: 0.7rem;
  font-weight: 700;
  border-radius: 5rem;
  box-shadow: 0 5px 5px rgba(0, 0, 0, 0.2);
}
.listIndex10 .slider-product10 .item .titleEn {
  font-size: 0.8rem;
  font-weight: 500;
  color: #444;
  opacity: 0.7;
  margin-top: 0.5rem;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  text-overflow: ellipsis;
  overflow: hidden;
}
.listIndex10 .slider-product10 .item .title1 {
  font-size: 0.9rem;
  font-weight: 500;
  color: #000;
  height: 3rem;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  text-overflow: ellipsis;
}
.listIndex10 .slider-product10 .item .rate1 {
  display: flex;
  align-items: center;
  justify-content: left;
  gap: 0.5rem;
  font-size: 0.7rem;
  font-weight: 900;
  color: var(--green-color);
  margin-top: 0.5rem;
}
.listIndex10 .slider-product10 .item .rate1 i {
  display: grid;
  align-items: center;
}
.listIndex10 .slider-product10 .item .rate1 i svg {
  width: 0.7rem;
  height: 0.7rem;
  fill: var(--green-color);
}
.listIndex10 .slider-product10 .item .prices {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  align-items: center;
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 2px solid #eee;
}
.listIndex10 .slider-product10 .item .prices .off {
  border: 1px solid red;
  border-radius: 10px;
  padding: 0.5rem;
  font-size: 0.8rem;
  font-weight: 700;
  color: red;
}
.listIndex10 .slider-product10 .item .prices .price {
  display: grid;
  grid-template-columns: 1fr;
  grid-gap: 5px;
  text-align: left;
}
.listIndex10 .slider-product10 .item .prices .price s {
  font-size: 0.8rem;
  font-weight: 300;
  color: #444;
}
.listIndex10 .slider-product10 .item .prices .price .val {
  font-size: 0.8rem;
  font-weight: 900;
  color: #000;
  line-height: 0.7rem;
}
.listIndex10 .slider-product10 .item .prices .price .val span {
  font-size: 1rem;
  margin-left: 5px;
  line-height: 0.7rem;
}
.listIndex10 .slider-product10 .item .content {
  display: grid;
  align-items: end;
  font-size: 1rem;
  font-weight: 900;
  height: 3.5rem;
  color: #000;
  padding-top: 1rem;
  border-top: 2px solid #eee;
}
.listIndex10 .slider-product10 .item .content span {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
.listIndex10 .slider-product10 .item .content {
  margin-top: 1rem;
}
.listIndex10 .slider-product10 .owl-next, .listIndex10 .slider-product10 .owl-prev {
  padding: 0.5rem;
  background: white !important;
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto;
  right: 0.5rem;
  width: 2.5rem;
  border: 2px solid black !important;
  font-size: 1.5rem !important;
  border-radius: 50%;
  color: black !important;
  height: 2.5rem;
  transition: all 0.3s ease-in-out;
}
.listIndex10 .slider-product10 .owl-next:hover, .listIndex10 .slider-product10 .owl-prev:hover {
  background: black !important;
  color: white !important;
}
.listIndex10 .slider-product10 .owl-next {
  left: 0.5rem;
  right: auto;
}
@media screen and (max-width: 700px) {
  .listIndex10 {
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
  }
  .listIndex10 .title {
    padding: 0.5rem;
  }
  .listIndex10 .title .name {
    font-size: 1rem;
  }
  .listIndex10 .title .body {
    padding: 1rem 0;
    margin: 1rem 0;
    font-size: 0.9rem;
  }
  .listIndex10 .slider-product10 {
    padding: 0;
  }
  .listIndex10 .slider-product10 .item {
    border: 0;
    padding: 0.5rem;
  }
  .listIndex10 .slider-product10 .item .pic {
    height: 11rem;
  }
  .listIndex10 .slider-product10 .item .titleEn {
    font-size: 0.7rem;
  }
  .listIndex10 .slider-product10 .item .title1 {
    font-size: 0.8rem;
    height: 2.6rem;
  }
  .listIndex10 .slider-product10 .item .rate1 {
    font-size: 0.6rem;
  }
  .listIndex10 .slider-product10 .item .rate1 i svg {
    width: 0.6rem;
    height: 0.6rem;
  }
  .listIndex10 .slider-product10 .item .prices {
    gap: 0.5rem;
  }
  .listIndex10 .slider-product10 .item .prices .off {
    padding: 0.5rem;
    font-size: 0.7rem;
  }
  .listIndex10 .slider-product10 .item .prices .price s {
    font-size: 0.7rem;
  }
  .listIndex10 .slider-product10 .item .prices .price .val {
    font-size: 0.7rem;
  }
  .listIndex10 .slider-product10 .item .prices .price .val span {
    font-size: 1rem;
  }
  .listIndex10 .slider-product10 .owl-next, .listIndex10 .slider-product10 .owl-prev {
    padding: 0.5rem;
    background: white !important;
    position: absolute;
    top: 0;
    bottom: 0;
    margin: auto;
    right: 0.5rem;
    width: 2.5rem;
    border: 2px solid black !important;
    font-size: 1.5rem !important;
    border-radius: 50%;
    color: black !important;
    height: 2.5rem;
    transition: all 0.3s ease-in-out;
  }
  .listIndex10 .slider-product10 .owl-next:hover, .listIndex10 .slider-product10 .owl-prev:hover {
    background: black !important;
    color: white !important;
  }
  .listIndex10 .slider-product10 .owl-next {
    left: 0.5rem;
    right: auto;
  }
}

.listIndex11 {
  margin: auto;
}
.listIndex11 .title {
  padding: 1rem;
  border-radius: 10px;
  margin-bottom: 1rem;
  display: flex;
  background: white;
  border: 1px solid #eee;
  align-content: center;
  justify-content: space-between;
}
.listIndex11 .title .name {
  display: flex;
  justify-content: right;
  align-items: center;
  gap: 0.5rem;
  font-size: 1rem;
  font-weight: 900;
  color: #000;
  text-align: center;
}
.listIndex11 .title .name:before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--green-color);
  display: grid;
}
.listIndex11 .title a {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  align-items: center;
  color: var(--green-color);
  font-size: 0.9rem;
  font-weight: 500;
  background: #f9f9f9;
  padding: 0.3rem 0.5rem;
  border-radius: 10px;
}
.listIndex11 .title a i {
  display: grid;
  align-items: center;
}
.listIndex11 .title a i svg {
  width: 1rem;
  height: 1rem;
  fill: var(--green-color);
}
.listIndex11 .slider-product11 {
  min-width: 0;
}
.listIndex11 .slider-product11 .item {
  display: grid;
  border: 1px solid #eee;
  box-shadow: 0 10px 10px rgba(0, 0, 0, 0.03);
  background: white;
  padding: 1rem;
  border-radius: 15px;
  position: relative;
}
.listIndex11 .slider-product11 .item .pic img {
  height: 10rem;
  object-fit: contain;
}
.listIndex11 .slider-product11 .item .pic .lottery {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  background: red;
  padding: 5px 10px;
  color: white;
  font-size: 0.7rem;
  font-weight: 700;
  border-radius: 5rem;
  box-shadow: 0 5px 5px rgba(0, 0, 0, 0.2);
}
.listIndex11 .slider-product11 .item .titleEn {
  font-size: 0.8rem;
  font-weight: 500;
  color: #444;
  opacity: 0.7;
  margin-top: 0.5rem;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  text-overflow: ellipsis;
  overflow: hidden;
}
.listIndex11 .slider-product11 .item .title1 {
  font-size: 0.9rem;
  font-weight: 500;
  color: #000;
  height: 3rem;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  text-overflow: ellipsis;
}
.listIndex11 .slider-product11 .item .rate1 {
  display: flex;
  align-items: center;
  justify-content: left;
  gap: 0.5rem;
  font-size: 0.7rem;
  font-weight: 900;
  color: var(--green-color);
  margin-top: 0.5rem;
}
.listIndex11 .slider-product11 .item .rate1 i {
  display: grid;
  align-items: center;
}
.listIndex11 .slider-product11 .item .rate1 i svg {
  width: 0.7rem;
  height: 0.7rem;
  fill: var(--green-color);
}
.listIndex11 .slider-product11 .item .prices {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  align-items: center;
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 2px solid #eee;
}
.listIndex11 .slider-product11 .item .prices .off {
  border: 1px solid red;
  border-radius: 10px;
  padding: 0.5rem;
  font-size: 0.8rem;
  font-weight: 700;
  color: red;
}
.listIndex11 .slider-product11 .item .prices .price {
  display: grid;
  grid-template-columns: 1fr;
  grid-gap: 5px;
  text-align: left;
}
.listIndex11 .slider-product11 .item .prices .price s {
  font-size: 0.8rem;
  font-weight: 300;
  color: #444;
}
.listIndex11 .slider-product11 .item .prices .price .val {
  font-size: 0.8rem;
  font-weight: 900;
  color: #000;
  line-height: 0.7rem;
}
.listIndex11 .slider-product11 .item .prices .price .val span {
  font-size: 1rem;
  margin-left: 5px;
  line-height: 0.7rem;
}
.listIndex11 .slider-product11 .item .content {
  display: grid;
  align-items: end;
  font-size: 1rem;
  font-weight: 900;
  height: 3.5rem;
  color: #000;
  padding-top: 1rem;
  border-top: 2px solid #eee;
}
.listIndex11 .slider-product11 .item .content span {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
.listIndex11 .slider-product11 .item .content {
  margin-top: 1rem;
}
.listIndex11 .slider-product11 .owl-next, .listIndex11 .slider-product11 .owl-prev {
  padding: 0.5rem;
  background: white !important;
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto;
  right: 0.5rem;
  width: 2.5rem;
  border: 2px solid black !important;
  font-size: 1.5rem !important;
  border-radius: 50%;
  color: black !important;
  height: 2.5rem;
  transition: all 0.3s ease-in-out;
}
.listIndex11 .slider-product11 .owl-next:hover, .listIndex11 .slider-product11 .owl-prev:hover {
  background: black !important;
  color: white !important;
}
.listIndex11 .slider-product11 .owl-next {
  left: 0.5rem;
  right: auto;
}
@media screen and (max-width: 700px) {
  .listIndex11 .title {
    padding: 0.5rem;
    margin-bottom: 0.5rem;
  }
  .listIndex11 .title .name {
    font-size: 0.85rem;
  }
  .listIndex11 .title .name:before {
    width: 6px;
    height: 6px;
  }
  .listIndex11 .title a {
    font-size: 0.8rem;
  }
  .listIndex11 .title a i svg {
    width: 0.85rem;
    height: 0.85rem;
  }
  .listIndex11 .slider-product11 .item {
    border: 0;
    padding: 0.5rem;
  }
  .listIndex11 .slider-product11 .item .titleEn {
    font-size: 0.7rem;
  }
  .listIndex11 .slider-product11 .item .title1 {
    font-size: 0.8rem;
    height: 2.6rem;
  }
  .listIndex11 .slider-product11 .item .rate1 {
    font-size: 0.6rem;
  }
  .listIndex11 .slider-product11 .item .rate1 i svg {
    width: 0.6rem;
    height: 0.6rem;
  }
  .listIndex11 .slider-product11 .item .prices {
    gap: 0.5rem;
  }
  .listIndex11 .slider-product11 .item .prices .off {
    padding: 0.5rem;
    font-size: 0.7rem;
  }
  .listIndex11 .slider-product11 .item .prices .price s {
    font-size: 0.7rem;
  }
  .listIndex11 .slider-product11 .item .prices .price .val {
    font-size: 0.7rem;
  }
  .listIndex11 .slider-product11 .item .prices .price .val span {
    font-size: 1rem;
  }
  .listIndex11 .slider-product11 .owl-next, .listIndex11 .slider-product11 .owl-prev {
    padding: 0.5rem;
    background: white !important;
    position: absolute;
    top: 0;
    bottom: 0;
    margin: auto;
    right: 0.5rem;
    width: 2.5rem;
    border: 2px solid black !important;
    font-size: 1.5rem !important;
    border-radius: 50%;
    color: black !important;
    height: 2.5rem;
    transition: all 0.3s ease-in-out;
  }
  .listIndex11 .slider-product11 .owl-next:hover, .listIndex11 .slider-product11 .owl-prev:hover {
    background: black !important;
    color: white !important;
  }
  .listIndex11 .slider-product11 .owl-next {
    left: 0.5rem;
    right: auto;
  }
}

.listIndex12 {
  margin: auto;
}
.listIndex12 .title {
  padding: 1rem;
  border-radius: 10px;
  margin-bottom: 1rem;
  display: flex;
  background: white;
  border: 1px solid #eee;
  align-content: center;
  justify-content: space-between;
}
.listIndex12 .title .name {
  display: flex;
  justify-content: right;
  align-items: center;
  gap: 0.5rem;
  font-size: 1rem;
  font-weight: 900;
  color: #000;
  text-align: center;
}
.listIndex12 .title .name:before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--green-color);
  display: grid;
}
.listIndex12 .title a {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  align-items: center;
  color: var(--green-color);
  font-size: 0.9rem;
  font-weight: 500;
  background: #f9f9f9;
  padding: 0.3rem 0.5rem;
  border-radius: 10px;
}
.listIndex12 .title a i {
  display: grid;
  align-items: center;
}
.listIndex12 .title a i svg {
  width: 1rem;
  height: 1rem;
  fill: var(--green-color);
}
.listIndex12 .items {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}
.listIndex12 .items .item {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1rem;
  border: 1px solid #eee;
  box-shadow: 0 10px 10px rgba(0, 0, 0, 0.03);
  background: white;
  padding: 1rem;
  border-radius: 15px;
  position: relative;
}
.listIndex12 .items .item .pic {
  display: grid;
  align-items: center;
}
.listIndex12 .items .item .pic img {
  height: 7rem;
  width: 7rem;
  object-fit: contain;
}
.listIndex12 .items .item .pic .lottery {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  background: red;
  padding: 5px 10px;
  color: white;
  font-size: 0.7rem;
  font-weight: 700;
  border-radius: 5rem;
  box-shadow: 0 5px 5px rgba(0, 0, 0, 0.2);
}
.listIndex12 .items .item .des .titleEn {
  font-size: 0.8rem;
  font-weight: 500;
  color: #444;
  opacity: 0.7;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  text-overflow: ellipsis;
}
.listIndex12 .items .item .des .title1 {
  font-size: 0.9rem;
  font-weight: 500;
  color: #000;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  text-overflow: ellipsis;
}
.listIndex12 .items .item .des .rate1 {
  display: flex;
  align-items: center;
  justify-content: left;
  gap: 0.5rem;
  font-size: 0.7rem;
  font-weight: 900;
  color: var(--green-color);
  margin-top: 0.5rem;
}
.listIndex12 .items .item .des .rate1 i {
  display: grid;
  align-items: center;
}
.listIndex12 .items .item .des .rate1 i svg {
  width: 0.7rem;
  height: 0.7rem;
  fill: var(--green-color);
}
.listIndex12 .items .item .des .prices {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  align-items: center;
  margin-top: 0.5rem;
  padding-top: 0.5rem;
  border-top: 2px solid #eee;
}
.listIndex12 .items .item .des .prices .off {
  border: 1px solid red;
  border-radius: 10px;
  padding: 0.5rem;
  font-size: 0.8rem;
  font-weight: 700;
  color: red;
}
.listIndex12 .items .item .des .prices .price {
  display: grid;
  grid-template-columns: 1fr;
  grid-gap: 5px;
  text-align: left;
}
.listIndex12 .items .item .des .prices .price s {
  font-size: 0.8rem;
  font-weight: 300;
  color: #444;
}
.listIndex12 .items .item .des .prices .price .val {
  font-size: 0.8rem;
  font-weight: 900;
  color: #000;
  line-height: 0.7rem;
}
.listIndex12 .items .item .des .prices .price .val span {
  font-size: 1rem;
  margin-left: 5px;
  line-height: 0.7rem;
}
.listIndex12 .items .item .des .content {
  display: grid;
  align-items: end;
  font-size: 1rem;
  font-weight: 900;
  height: 2.5rem;
  color: #000;
  margin-top: 0.5rem;
  padding-top: 0.5rem;
  border-top: 2px solid #eee;
}
.listIndex12 .items .item .des .content span {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
.listIndex12 .items .owl-next, .listIndex12 .items .owl-prev {
  padding: 0.5rem;
  background: white !important;
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto;
  right: 0.5rem;
  width: 2.5rem;
  border: 2px solid black !important;
  font-size: 1.5rem !important;
  border-radius: 50%;
  color: black !important;
  height: 2.5rem;
  transition: all 0.3s ease-in-out;
}
.listIndex12 .items .owl-next:hover, .listIndex12 .items .owl-prev:hover {
  background: black !important;
  color: white !important;
}
.listIndex12 .items .owl-next {
  left: 0.5rem;
  right: auto;
}
@media screen and (max-width: 700px) {
  .listIndex12 .title {
    padding: 0.5rem;
    margin-bottom: 0.5rem;
  }
  .listIndex12 .title .name {
    font-size: 0.85rem;
  }
  .listIndex12 .title .name:before {
    width: 6px;
    height: 6px;
  }
  .listIndex12 .title a {
    font-size: 0.8rem;
  }
  .listIndex12 .title a i svg {
    width: 0.85rem;
    height: 0.85rem;
  }
  .listIndex12 .items {
    grid-template-columns: 1fr;
    gap: 0.5rem;
  }
  .listIndex12 .items .item {
    gap: 0.5rem;
    padding: 0.8rem;
  }
  .listIndex12 .items .item .pic img {
    height: 6rem;
    width: 6rem;
  }
  .listIndex12 .items .item .des .titleEn {
    font-size: 0.7rem;
  }
  .listIndex12 .items .item .des .title1 {
    font-size: 0.8rem;
  }
  .listIndex12 .items .item .des .rate1 {
    font-size: 0.6rem;
  }
  .listIndex12 .items .item .des .rate1 i svg {
    width: 0.6rem;
    height: 0.6rem;
  }
  .listIndex12 .items .item .des .prices {
    gap: 0.5rem;
  }
  .listIndex12 .items .item .des .prices .off {
    font-size: 0.7rem;
  }
  .listIndex12 .items .item .des .prices .price s {
    font-size: 0.7rem;
  }
  .listIndex12 .items .item .des .prices .price .val {
    font-size: 0.7rem;
  }
  .listIndex12 .items .item .des .prices .price .val span {
    font-size: 1rem;
  }
  .listIndex12 .items .owl-next, .listIndex12 .items .owl-prev {
    padding: 0.5rem;
    background: white !important;
    position: absolute;
    top: 0;
    bottom: 0;
    margin: auto;
    right: 0.5rem;
    width: 2.5rem;
    border: 2px solid black !important;
    font-size: 1.5rem !important;
    border-radius: 50%;
    color: black !important;
    height: 2.5rem;
    transition: all 0.3s ease-in-out;
  }
  .listIndex12 .items .owl-next:hover, .listIndex12 .items .owl-prev:hover {
    background: black !important;
    color: white !important;
  }
  .listIndex12 .items .owl-next {
    left: 0.5rem;
    right: auto;
  }
}

.listIndex13 {
  margin: auto;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1rem;
  background: #f7f7f7;
  border-radius: 15px;
  padding: 1rem;
}
.listIndex13 .title {
  width: calc(270px - 1rem);
  border-radius: 15px;
  display: grid;
  align-content: center;
}
.listIndex13 .title .pic {
  display: grid;
  justify-content: center;
}
.listIndex13 .title .pic img {
  height: 5rem;
  object-fit: contain;
}
.listIndex13 .title .name {
  font-size: 1.3rem;
  margin: 1rem 0;
  font-weight: 900;
  color: #000;
  text-align: center;
}
.listIndex13 .title .body {
  color: #444;
  border-top: 1px dashed #ccc;
  border-bottom: 1px dashed #ccc;
  margin-bottom: 1rem;
  text-align: center;
  font-size: 1rem;
  font-weight: 500;
  padding: 1rem 0;
}
.listIndex13 .title .body p {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  text-overflow: ellipsis;
  overflow: hidden;
}
.listIndex13 .title a {
  display: flex;
  justify-content: left;
  align-items: center;
  color: white;
  font-size: 0.9rem;
  font-weight: 500;
  background: var(--green-color);
  box-shadow: 0 5px 5px rgba(0, 0, 0, 0.2);
  border-radius: 5rem;
  overflow: hidden;
  position: relative;
}
.listIndex13 .title a span {
  position: absolute;
  right: 0;
  left: 1.7rem;
  bottom: 0;
  top: 0;
  background: var(--green-color);
  border-radius: 5rem;
  display: grid;
  align-items: center;
  justify-content: center;
}
.listIndex13 .title a i {
  background: white;
  display: grid;
  padding: 1rem;
  padding-left: 0.5rem;
  width: 3rem;
  align-items: center;
  justify-content: left;
}
.listIndex13 .title a i svg {
  width: 1rem;
  height: 1rem;
  fill: #000;
}
.listIndex13 .slider-product13 {
  min-width: 0;
}
.listIndex13 .slider-product13 .owl-stage-outer {
  overflow: hidden;
}
.listIndex13 .slider-product13 .item {
  display: grid;
  background: var(--green-color);
  border-radius: 15px;
  overflow: hidden;
  position: relative;
  padding: 2rem 1rem;
  background: var(--green-color);
}
.listIndex13 .slider-product13 .item .cover {
  position: relative;
  z-index: 2;
}
.listIndex13 .slider-product13 .item .pic img {
  height: 10rem;
  object-fit: contain;
}
.listIndex13 .slider-product13 .item .lottery {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  z-index: 10;
  background: red;
  padding: 5px 10px;
  color: white;
  font-size: 0.7rem;
  font-weight: 700;
  border-radius: 5rem;
  box-shadow: 0 5px 5px rgba(0, 0, 0, 0.2);
}
.listIndex13 .slider-product13 .item .title1 {
  font-size: 0.9rem;
  font-weight: 500;
  color: #000;
  margin-top: 1rem;
  height: 3rem;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  text-overflow: ellipsis;
}
.listIndex13 .slider-product13 .item .prices {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  align-items: center;
  margin-top: 1rem;
}
.listIndex13 .slider-product13 .item .prices .off {
  background: rgba(255, 0, 0, 0.2);
  border-radius: 5rem;
  padding: 0.2rem 0.8rem;
  font-size: 0.8rem;
  font-weight: 700;
  color: red;
  transition: all 0.3s ease-in-out;
}
.listIndex13 .slider-product13 .item .prices .price1 {
  display: flex;
  justify-content: left;
  align-items: center;
}
.listIndex13 .slider-product13 .item .prices .price1 .price {
  display: grid;
  grid-template-columns: 1fr;
  grid-gap: 2px;
  text-align: left;
}
.listIndex13 .slider-product13 .item .prices .price1 .price .val {
  font-size: 0.8rem;
  font-weight: 900;
  color: #000;
  transition: all 0.3s ease-in-out;
}
.listIndex13 .slider-product13 .item .prices .price1 .price .val span {
  font-size: 1rem;
  line-height: 0.7rem;
}
.listIndex13 .slider-product13 .item .prices .price1 .price s {
  font-size: 0.8rem;
  font-weight: 300;
  color: #444;
  line-height: 0.8rem;
  transition: all 0.3s ease-in-out;
}
.listIndex13 .slider-product13 .item .prices .price1 .currency {
  font-size: 1rem;
  font-weight: 300;
  transition: all 0.3s ease-in-out;
  color: #444;
  opacity: 0.3;
  text-orientation: mixed;
  writing-mode: vertical-rl;
}
.listIndex13 .slider-product13 .item .content {
  display: grid;
  align-items: end;
  font-size: 0.95rem;
  font-weight: 900;
  color: #000;
  height: 2rem;
}
.listIndex13 .slider-product13 .item .content span {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
.listIndex13 .slider-product13 .item:before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  height: 100%;
  background: white;
  border-radius: 15px;
  transition: all 0.3s ease-in-out;
}
.listIndex13 .slider-product13 .item:hover:before {
  height: 16.5rem;
}
.listIndex13 .slider-product13 .item:hover .prices .off {
  background: white;
}
.listIndex13 .slider-product13 .item:hover .prices .price1 .price .val {
  color: white;
}
.listIndex13 .slider-product13 .item:hover .prices .price1 .price s {
  color: white;
}
.listIndex13 .slider-product13 .item:hover .prices .price1 .currency {
  color: white;
}
.listIndex13 .slider-product13 .item:hover .content {
  color: white;
}
.listIndex13 .slider-product13 .owl-next, .listIndex13 .slider-product13 .owl-prev {
  padding: 0.5rem;
  background: white !important;
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto;
  right: 0.5rem;
  width: 2.5rem;
  border: 2px solid black !important;
  font-size: 1.5rem !important;
  border-radius: 50%;
  color: black !important;
  height: 2.5rem;
  transition: all 0.3s ease-in-out;
}
.listIndex13 .slider-product13 .owl-next:hover, .listIndex13 .slider-product13 .owl-prev:hover {
  background: black !important;
  color: white !important;
}
.listIndex13 .slider-product13 .owl-next {
  left: 0.5rem;
  right: auto;
}
@media screen and (max-width: 700px) {
  .listIndex13 {
    padding: 0.5rem;
    grid-gap: 0.5rem;
    grid-template-columns: 1fr 1fr;
  }
  .listIndex13 .title {
    width: 100%;
  }
  .listIndex13 .title .pic img {
    height: 3rem;
  }
  .listIndex13 .title .name {
    font-size: 1rem;
  }
  .listIndex13 .title .body {
    font-size: 0.8rem;
    padding: 0.5rem 0;
  }
  .listIndex13 .title a {
    font-size: 0.7rem;
  }
  .listIndex13 .title a i {
    padding: 0.5rem;
  }
  .listIndex13 .slider-product13 .item {
    border-radius: 10px;
    padding: 0.5rem;
  }
  .listIndex13 .slider-product13 .item .pic img {
    height: 8rem;
  }
  .listIndex13 .slider-product13 .item .title1 {
    font-size: 0.8rem;
    margin-top: 0.5rem;
    height: 2.4rem;
  }
  .listIndex13 .slider-product13 .item .prices {
    gap: 0.5rem;
  }
  .listIndex13 .slider-product13 .item .prices .off {
    padding: 0.2rem 0.5rem;
    font-size: 0.7rem;
  }
  .listIndex13 .slider-product13 .item .prices .price1 .price .val {
    font-size: 0.7rem;
  }
  .listIndex13 .slider-product13 .item .prices .price1 .price .val span {
    font-size: 0.9rem;
  }
  .listIndex13 .slider-product13 .item .prices .price1 .price s {
    font-size: 0.65rem;
  }
  .listIndex13 .slider-product13 .item .prices .price1 .currency {
    font-size: 0.8rem;
  }
  .listIndex13 .slider-product13 .item:before {
    border-radius: 10px;
  }
  .listIndex13 .slider-product13 .item:hover:before {
    height: 11.5rem;
  }
}

.listIndex14 {
  margin: auto;
  background: #f7f7f7;
  border-radius: 15px;
  padding: 1rem;
}
.listIndex14 .title {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 1rem;
  justify-content: space-between;
  align-items: center;
  align-content: center;
  margin-bottom: 1rem;
}
.listIndex14 .title .name {
  font-size: 1.3rem;
  font-weight: 900;
  color: #000;
  text-align: center;
}
.listIndex14 .title .bar {
  height: 2px;
  background: #eee;
}
.listIndex14 .title a {
  display: flex;
  justify-content: left;
  align-items: center;
  color: white;
  font-size: 0.9rem;
  font-weight: 500;
  background: var(--green-color);
  box-shadow: 0 5px 5px rgba(0, 0, 0, 0.1);
  border-radius: 5rem;
  overflow: hidden;
  position: relative;
  width: 12rem;
}
.listIndex14 .title a span {
  position: absolute;
  right: 0;
  left: 1.7rem;
  bottom: 0;
  top: 0;
  background: var(--green-color);
  border-radius: 5rem;
  display: grid;
  align-items: center;
  justify-content: center;
}
.listIndex14 .title a i {
  background: white;
  display: grid;
  padding: 0.7rem;
  padding-left: 0.5rem;
  width: 3rem;
  align-items: center;
  justify-content: left;
}
.listIndex14 .title a i svg {
  width: 1rem;
  height: 1rem;
  fill: #000;
}
.listIndex14 .slider-product14 {
  min-width: 0;
}
.listIndex14 .slider-product14 .owl-stage-outer {
  overflow: hidden;
}
.listIndex14 .slider-product14 .item {
  display: grid;
  background: var(--green-color);
  border-radius: 15px;
  overflow: hidden;
  position: relative;
  padding: 2rem 1rem;
  background: var(--green-color);
}
.listIndex14 .slider-product14 .item .cover {
  position: relative;
  z-index: 2;
}
.listIndex14 .slider-product14 .item .pic img {
  height: 10rem;
  object-fit: contain;
}
.listIndex14 .slider-product14 .item .lottery {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  background: red;
  padding: 5px 10px;
  color: white;
  z-index: 10;
  font-size: 0.7rem;
  font-weight: 700;
  border-radius: 5rem;
  box-shadow: 0 5px 5px rgba(0, 0, 0, 0.2);
}
.listIndex14 .slider-product14 .item .title1 {
  font-size: 0.9rem;
  font-weight: 500;
  color: #000;
  margin-top: 1rem;
  height: 3rem;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  text-overflow: ellipsis;
}
.listIndex14 .slider-product14 .item .prices {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  align-items: center;
  margin-top: 1rem;
}
.listIndex14 .slider-product14 .item .prices .off {
  background: rgba(255, 0, 0, 0.2);
  border-radius: 5rem;
  padding: 0.2rem 0.8rem;
  font-size: 0.8rem;
  font-weight: 700;
  color: red;
  transition: all 0.3s ease-in-out;
}
.listIndex14 .slider-product14 .item .prices .price1 {
  display: flex;
  justify-content: left;
  align-items: center;
}
.listIndex14 .slider-product14 .item .prices .price1 .price {
  display: grid;
  grid-template-columns: 1fr;
  grid-gap: 2px;
  text-align: left;
}
.listIndex14 .slider-product14 .item .prices .price1 .price .val {
  font-size: 0.8rem;
  font-weight: 900;
  color: #000;
  transition: all 0.3s ease-in-out;
}
.listIndex14 .slider-product14 .item .prices .price1 .price .val span {
  font-size: 1rem;
  line-height: 0.7rem;
}
.listIndex14 .slider-product14 .item .prices .price1 .price s {
  font-size: 0.8rem;
  font-weight: 300;
  color: #444;
  line-height: 0.8rem;
  transition: all 0.3s ease-in-out;
}
.listIndex14 .slider-product14 .item .prices .price1 .currency {
  font-size: 1rem;
  font-weight: 300;
  transition: all 0.3s ease-in-out;
  color: #444;
  opacity: 0.3;
  text-orientation: mixed;
  writing-mode: vertical-rl;
}
.listIndex14 .slider-product14 .item .content {
  display: grid;
  align-items: end;
  font-size: 0.95rem;
  font-weight: 900;
  color: #000;
  height: 2.3rem;
  margin-top: 1rem;
}
.listIndex14 .slider-product14 .item .content span {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
.listIndex14 .slider-product14 .item:before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  height: 100%;
  background: white;
  border-radius: 15px;
  transition: all 0.3s ease-in-out;
}
.listIndex14 .slider-product14 .item:hover:before {
  height: 16.5rem;
}
.listIndex14 .slider-product14 .item:hover .prices .off {
  background: white;
}
.listIndex14 .slider-product14 .item:hover .prices .price1 .price .val {
  color: white;
}
.listIndex14 .slider-product14 .item:hover .prices .price1 .price s {
  color: white;
}
.listIndex14 .slider-product14 .item:hover .prices .price1 .currency {
  color: white;
}
.listIndex14 .slider-product14 .item:hover .content {
  color: white;
}
.listIndex14 .slider-product14 .owl-nav {
  position: absolute;
  top: -3.4rem;
  left: 13rem;
  display: flex;
  gap: 0.5rem;
}
.listIndex14 .slider-product14 .owl-nav .owl-prev, .listIndex14 .slider-product14 .owl-nav .owl-next {
  width: 2.3rem;
  height: 2.3rem;
  display: grid;
  border-radius: 50%;
  align-items: center;
  font-size: 1.4rem;
  border: 1px solid #444;
  background: #f7f7f7;
  transition: all 0.3s ease-in-out;
}
.listIndex14 .slider-product14 .owl-nav .owl-prev:hover, .listIndex14 .slider-product14 .owl-nav .owl-next:hover {
  background: var(--green-color);
}
.listIndex14 .slider-product14 .owl-nav .owl-prev:hover span, .listIndex14 .slider-product14 .owl-nav .owl-next:hover span {
  color: white;
}
@media screen and (max-width: 700px) {
  .listIndex14 {
    padding: 0.5rem;
  }
  .listIndex14 .title {
    display: flex;
    justify-content: space-between;
    gap: 0.5rem;
  }
  .listIndex14 .title .name {
    font-size: 1rem;
  }
  .listIndex14 .title .bar {
    display: none;
  }
  .listIndex14 .title a {
    font-size: 0.6rem;
    width: 8rem;
  }
  .listIndex14 .title a i {
    padding: 0.5rem;
  }
  .listIndex14 .slider-product14 {
    position: relative;
  }
  .listIndex14 .slider-product14 .item {
    border-radius: 10px;
    padding: 0.5rem;
  }
  .listIndex14 .slider-product14 .item .pic img {
    height: 8rem;
  }
  .listIndex14 .slider-product14 .item .title1 {
    font-size: 0.8rem;
    margin-top: 0.5rem;
    height: 2.4rem;
  }
  .listIndex14 .slider-product14 .item .prices {
    gap: 0.5rem;
  }
  .listIndex14 .slider-product14 .item .prices .off {
    padding: 0.2rem 0.5rem;
    font-size: 0.7rem;
  }
  .listIndex14 .slider-product14 .item .prices .price1 .price .val {
    font-size: 0.7rem;
  }
  .listIndex14 .slider-product14 .item .prices .price1 .price .val span {
    font-size: 0.9rem;
  }
  .listIndex14 .slider-product14 .item .prices .price1 .price s {
    font-size: 0.65rem;
  }
  .listIndex14 .slider-product14 .item .prices .price1 .currency {
    font-size: 0.8rem;
  }
  .listIndex14 .slider-product14 .item:before {
    border-radius: 10px;
  }
  .listIndex14 .slider-product14 .item:hover:before {
    height: 11.5rem;
  }
  .listIndex14 .slider-product14 .owl-nav {
    display: flex;
    position: unset;
  }
  .listIndex14 .slider-product14 .owl-nav .owl-prev, .listIndex14 .slider-product14 .owl-nav .owl-next {
    width: 2.3rem;
    height: 2.3rem;
    position: absolute;
    top: 40%;
  }
  .listIndex14 .slider-product14 .owl-nav .owl-prev:hover, .listIndex14 .slider-product14 .owl-nav .owl-next:hover {
    background: var(--green-color);
  }
  .listIndex14 .slider-product14 .owl-nav .owl-prev:hover span, .listIndex14 .slider-product14 .owl-nav .owl-next:hover span {
    color: white;
  }
  .listIndex14 .slider-product14 .owl-nav .owl-next {
    left: 0;
  }
}

.listIndex15 .width {
  padding: 1rem 0;
  margin: auto;
}
.listIndex15 .width .title {
  display: flex;
  gap: 1rem;
  justify-content: space-between;
  align-items: center;
  align-content: center;
  margin-bottom: 1rem;
}
.listIndex15 .width .title .name {
  display: flex;
  gap: 5px;
  align-items: center;
  font-size: 1.5rem;
  font-weight: 900;
  color: white;
  text-align: center;
}
.listIndex15 .width .title .name:before {
  width: 20px;
  height: 5px;
  display: grid;
  background: white;
  border-radius: 5rem;
  content: "";
}
.listIndex15 .width .title a {
  display: flex;
  justify-content: left;
  align-items: center;
  color: white;
  font-size: 0.9rem;
  font-weight: 500;
  background: var(--green-color);
  box-shadow: 0 5px 5px rgba(0, 0, 0, 0.1);
  border-radius: 5rem;
  overflow: hidden;
  position: relative;
  width: 12rem;
}
.listIndex15 .width .title a span {
  position: absolute;
  right: 0;
  left: 1.7rem;
  bottom: 0;
  top: 0;
  background: black;
  border-radius: 5rem;
  display: grid;
  align-items: center;
  justify-content: center;
}
.listIndex15 .width .title a i {
  background: white;
  display: grid;
  padding: 0.7rem;
  padding-left: 0.5rem;
  width: 3rem;
  align-items: center;
  justify-content: left;
}
.listIndex15 .width .title a i svg {
  width: 1rem;
  height: 1rem;
  fill: #000;
}
.listIndex15 .width .slider-product15 {
  min-width: 0;
}
.listIndex15 .width .slider-product15 .owl-stage-outer {
  overflow: hidden;
}
.listIndex15 .width .slider-product15 .item {
  display: grid;
  background: var(--green-color);
  border-radius: 15px;
  overflow: hidden;
  position: relative;
  padding: 2rem 1rem;
  background: var(--green-color);
}
.listIndex15 .width .slider-product15 .item .cover {
  position: relative;
  z-index: 2;
}
.listIndex15 .width .slider-product15 .item .lottery {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  background: red;
  padding: 5px 10px;
  color: white;
  z-index: 10;
  font-size: 0.7rem;
  font-weight: 700;
  border-radius: 5rem;
  box-shadow: 0 5px 5px rgba(0, 0, 0, 0.2);
}
.listIndex15 .width .slider-product15 .item .pic img {
  height: 10rem;
  object-fit: contain;
}
.listIndex15 .width .slider-product15 .item .title1 {
  font-size: 0.9rem;
  font-weight: 500;
  color: #000;
  margin-top: 1rem;
  height: 3rem;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  text-overflow: ellipsis;
}
.listIndex15 .width .slider-product15 .item .prices {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  align-items: center;
  margin-top: 1rem;
}
.listIndex15 .width .slider-product15 .item .prices .off {
  background: rgba(255, 0, 0, 0.2);
  border-radius: 5rem;
  padding: 0.2rem 0.8rem;
  font-size: 0.8rem;
  font-weight: 700;
  color: red;
  transition: all 0.3s ease-in-out;
}
.listIndex15 .width .slider-product15 .item .prices .price1 {
  display: flex;
  justify-content: left;
  align-items: center;
}
.listIndex15 .width .slider-product15 .item .prices .price1 .price {
  display: grid;
  grid-template-columns: 1fr;
  grid-gap: 2px;
  text-align: left;
}
.listIndex15 .width .slider-product15 .item .prices .price1 .price .val {
  font-size: 0.8rem;
  font-weight: 900;
  color: #000;
  transition: all 0.3s ease-in-out;
}
.listIndex15 .width .slider-product15 .item .prices .price1 .price .val span {
  font-size: 1rem;
  line-height: 0.7rem;
}
.listIndex15 .width .slider-product15 .item .prices .price1 .price s {
  font-size: 0.8rem;
  font-weight: 300;
  color: #444;
  line-height: 0.8rem;
  transition: all 0.3s ease-in-out;
}
.listIndex15 .width .slider-product15 .item .prices .price1 .currency {
  font-size: 1rem;
  font-weight: 300;
  transition: all 0.3s ease-in-out;
  color: #444;
  opacity: 0.3;
  text-orientation: mixed;
  writing-mode: vertical-rl;
}
.listIndex15 .width .slider-product15 .item .content {
  display: grid;
  align-items: end;
  font-size: 0.95rem;
  font-weight: 900;
  color: #000;
  height: 2.3rem;
  margin-top: 1rem;
}
.listIndex15 .width .slider-product15 .item .content span {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
.listIndex15 .width .slider-product15 .item:before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  height: 100%;
  background: white;
  border-radius: 15px;
  transition: all 0.3s ease-in-out;
}
.listIndex15 .width .slider-product15 .item:hover:before {
  height: 16.5rem;
}
.listIndex15 .width .slider-product15 .item:hover .prices .off {
  background: white;
}
.listIndex15 .width .slider-product15 .item:hover .prices .price1 .price .val {
  color: white;
}
.listIndex15 .width .slider-product15 .item:hover .prices .price1 .price s {
  color: white;
}
.listIndex15 .width .slider-product15 .item:hover .prices .price1 .currency {
  color: white;
}
.listIndex15 .width .slider-product15 .owl-nav {
  position: absolute;
  top: -3.4rem;
  left: 13rem;
  display: flex;
  gap: 0.5rem;
}
.listIndex15 .width .slider-product15 .owl-nav .owl-prev, .listIndex15 .width .slider-product15 .owl-nav .owl-next {
  width: 2.3rem;
  height: 2.3rem;
  display: grid;
  border: 2px solid white;
  border-radius: 50%;
  align-items: center;
  font-size: 1.4rem;
  background: transparent;
  transition: all 0.3s ease-in-out;
}
.listIndex15 .width .slider-product15 .owl-nav .owl-prev span, .listIndex15 .width .slider-product15 .owl-nav .owl-next span {
  color: white;
}
.listIndex15 .width .slider-product15 .owl-nav .owl-prev:hover, .listIndex15 .width .slider-product15 .owl-nav .owl-next:hover {
  background: white;
}
.listIndex15 .width .slider-product15 .owl-nav .owl-prev:hover span, .listIndex15 .width .slider-product15 .owl-nav .owl-next:hover span {
  color: var(--green-color);
}
@media screen and (max-width: 700px) {
  .listIndex15 .width .title {
    display: flex;
    justify-content: space-between;
    gap: 0.5rem;
  }
  .listIndex15 .width .title .name {
    font-size: 1rem;
  }
  .listIndex15 .width .title .bar {
    display: none;
  }
  .listIndex15 .width .title a {
    font-size: 0.6rem;
    width: 8rem;
  }
  .listIndex15 .width .title a i {
    padding: 0.5rem;
  }
  .listIndex15 .width .slider-product15 {
    position: relative;
  }
  .listIndex15 .width .slider-product15 .item {
    border-radius: 10px;
    padding: 0.5rem;
  }
  .listIndex15 .width .slider-product15 .item .pic img {
    height: 8rem;
  }
  .listIndex15 .width .slider-product15 .item .title1 {
    font-size: 0.8rem;
    margin-top: 0.5rem;
    height: 2.4rem;
  }
  .listIndex15 .width .slider-product15 .item .prices {
    gap: 0.5rem;
  }
  .listIndex15 .width .slider-product15 .item .prices .off {
    padding: 0.2rem 0.5rem;
    font-size: 0.7rem;
  }
  .listIndex15 .width .slider-product15 .item .prices .price1 .price .val {
    font-size: 0.7rem;
  }
  .listIndex15 .width .slider-product15 .item .prices .price1 .price .val span {
    font-size: 0.9rem;
  }
  .listIndex15 .width .slider-product15 .item .prices .price1 .price s {
    font-size: 0.65rem;
  }
  .listIndex15 .width .slider-product15 .item .prices .price1 .currency {
    font-size: 0.8rem;
  }
  .listIndex15 .width .slider-product15 .item:before {
    border-radius: 10px;
  }
  .listIndex15 .width .slider-product15 .item:hover:before {
    height: 11.5rem;
  }
  .listIndex15 .width .slider-product15 .owl-nav {
    display: flex;
    position: unset;
  }
  .listIndex15 .width .slider-product15 .owl-nav .owl-prev, .listIndex15 .width .slider-product15 .owl-nav .owl-next {
    width: 2.3rem;
    height: 2.3rem;
    position: absolute;
    top: 40%;
    border: 1px solid #444;
    background: white;
  }
  .listIndex15 .width .slider-product15 .owl-nav .owl-prev span, .listIndex15 .width .slider-product15 .owl-nav .owl-next span {
    color: #444;
  }
  .listIndex15 .width .slider-product15 .owl-nav .owl-prev:hover, .listIndex15 .width .slider-product15 .owl-nav .owl-next:hover {
    background: var(--green-color);
  }
  .listIndex15 .width .slider-product15 .owl-nav .owl-prev:hover span, .listIndex15 .width .slider-product15 .owl-nav .owl-next:hover span {
    color: white;
  }
  .listIndex15 .width .slider-product15 .owl-nav .owl-next {
    left: 0;
  }
}

.listIndex16 {
  position: relative;
  margin: auto;
}
.listIndex16 .title {
  display: flex;
  gap: 1rem;
  justify-content: space-between;
  align-items: center;
  align-content: center;
  margin-bottom: 1rem;
}
.listIndex16 .title .name {
  display: flex;
  gap: 5px;
  align-items: center;
  font-size: 1.5rem;
  font-weight: 900;
  line-height: 0.7rem;
  color: #000;
  text-align: center;
}
.listIndex16 .title .name:before {
  width: 5px;
  height: 30px;
  display: grid;
  background: linear-gradient(var(--green-color), var(--back1-color));
  border-radius: 5px;
  content: "";
  box-shadow: 5px 0 10px var(--green-color);
}
.listIndex16 .title a {
  display: flex;
  justify-content: left;
  align-items: center;
  color: var(--green-color);
  font-size: 0.9rem;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  font-weight: 500;
  border: 1.5px solid var(--green-color);
  border-radius: 10px;
  overflow: hidden;
  position: relative;
}
.listIndex16 .title a i {
  display: grid;
  align-items: center;
}
.listIndex16 .title a i svg {
  width: 1rem;
  height: 1rem;
  fill: var(--green-color);
}
.listIndex16 .slider-product16 {
  min-width: 0;
}
.listIndex16 .slider-product16 .owl-stage-outer {
  overflow: hidden;
}
.listIndex16 .slider-product16 .itemB {
  padding: 0.5rem;
}
.listIndex16 .slider-product16 .item {
  display: grid;
  background: var(--green-color);
  border-radius: 15px;
  box-shadow: 0px 4px 16px 0px rgba(36, 43, 61, 0.1);
  overflow: hidden;
  position: relative;
  padding: 1rem;
  background: var(--green-color);
}
.listIndex16 .slider-product16 .item .cover {
  position: relative;
  z-index: 2;
}
.listIndex16 .slider-product16 .item .pic img {
  height: 10rem;
  object-fit: contain;
}
.listIndex16 .slider-product16 .item .pic .lottery {
  position: absolute;
  top: 0;
  left: 0;
  background: red;
  padding: 5px 10px;
  color: white;
  font-size: 0.7rem;
  font-weight: 700;
  border-radius: 5rem;
  box-shadow: 0 5px 5px rgba(0, 0, 0, 0.2);
}
.listIndex16 .slider-product16 .item .title1 {
  font-size: 0.9rem;
  font-weight: 500;
  color: #000;
  margin-top: 1rem;
  height: 3rem;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  text-overflow: ellipsis;
}
.listIndex16 .slider-product16 .item .prices {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  align-items: center;
  height: 2.7rem;
  margin-top: 1rem;
}
.listIndex16 .slider-product16 .item .prices .off {
  background: red;
  border-radius: 5rem;
  padding: 0 0.5rem;
  font-size: 0.9rem;
  font-weight: 900;
  color: white;
  transition: all 0.3s ease-in-out;
}
.listIndex16 .slider-product16 .item .prices .price {
  display: grid;
  grid-template-columns: 1fr;
  grid-gap: 2px;
  text-align: left;
  align-items: end;
}
.listIndex16 .slider-product16 .item .prices .price .val {
  font-size: 0.8rem;
  font-weight: 900;
  color: #000;
  transition: all 0.3s ease-in-out;
}
.listIndex16 .slider-product16 .item .prices .price .val span {
  font-size: 1.2rem;
}
.listIndex16 .slider-product16 .item .prices .price s {
  font-size: 0.8rem;
  font-weight: 300;
  color: #444;
  line-height: 0.8rem;
  transition: all 0.3s ease-in-out;
}
.listIndex16 .slider-product16 .item .content {
  display: grid;
  align-items: end;
  font-size: 1rem;
  font-weight: 900;
  color: #000;
  height: 2.7rem;
}
.listIndex16 .slider-product16 .item .content span {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
.listIndex16 .slider-product16 .item .content {
  margin-top: 1rem;
}
.listIndex16 .slider-product16 .item:before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  height: 100%;
  background: white;
  border-radius: 15px;
  transition: all 0.3s ease-in-out;
}
.listIndex16 .slider-product16 .item:hover:before {
  height: 15.5rem;
}
.listIndex16 .slider-product16 .item:hover .prices .off {
  background: white;
  color: red;
}
.listIndex16 .slider-product16 .item:hover .prices .price .val {
  color: white;
}
.listIndex16 .slider-product16 .item:hover .prices .price s {
  color: white;
}
.listIndex16 .slider-product16 .item:hover .content {
  color: white;
}
.listIndex16 .slider-product16 .owl-nav {
  position: absolute;
  top: -3.4rem;
  left: 13rem;
  display: flex;
  gap: 0.5rem;
}
.listIndex16 .slider-product16 .owl-nav .owl-prev, .listIndex16 .slider-product16 .owl-nav .owl-next {
  width: 2.3rem;
  height: 2.3rem;
  display: grid;
  border: 2px solid white;
  border-radius: 50%;
  align-items: center;
  font-size: 1.4rem;
  background: transparent;
  transition: all 0.3s ease-in-out;
}
.listIndex16 .slider-product16 .owl-nav .owl-prev span, .listIndex16 .slider-product16 .owl-nav .owl-next span {
  color: white;
}
.listIndex16 .slider-product16 .owl-nav .owl-prev:hover, .listIndex16 .slider-product16 .owl-nav .owl-next:hover {
  background: white;
}
.listIndex16 .slider-product16 .owl-nav .owl-prev:hover span, .listIndex16 .slider-product16 .owl-nav .owl-next:hover span {
  color: var(--green-color);
}
.listIndex16:before {
  content: "";
  position: absolute;
  right: 0;
  left: 0;
  top: 0;
  bottom: 0;
  height: 10rem;
  border-radius: 10px;
  margin: auto;
  background: linear-gradient(var(--green-color), var(--back1-color));
}
@media screen and (max-width: 700px) {
  .listIndex16 .title {
    gap: 0.5rem;
    margin-bottom: 0.5rem;
  }
  .listIndex16 .title .name {
    font-size: 1rem;
  }
  .listIndex16 .title .name:before {
    height: 20px;
  }
  .listIndex16 .title a {
    font-size: 0.7rem;
    padding: 0.2rem 0.5rem;
    border: 1px solid var(--green-color);
  }
  .listIndex16 .title a i svg {
    width: 0.8rem;
    height: 0.8rem;
  }
  .listIndex16 .slider-product16 .itemB {
    padding: 0.35rem;
  }
  .listIndex16 .slider-product16 .item {
    border-radius: 10px;
    padding: 0.5rem;
  }
  .listIndex16 .slider-product16 .item .pic img {
    height: 8rem;
  }
  .listIndex16 .slider-product16 .item .title1 {
    font-size: 0.8rem;
    margin-top: 0.5rem;
    height: auto;
  }
  .listIndex16 .slider-product16 .item .prices {
    gap: 0.5rem;
    height: 2.5rem;
    margin-top: 0.5rem;
  }
  .listIndex16 .slider-product16 .item .prices .off {
    padding: 0 0.5rem;
    font-size: 0.7rem;
  }
  .listIndex16 .slider-product16 .item .prices .price .val {
    font-size: 0.6rem;
  }
  .listIndex16 .slider-product16 .item .prices .price .val span {
    font-size: 0.9rem;
  }
  .listIndex16 .slider-product16 .item .prices .price s {
    font-size: 0.7rem;
    line-height: 0.7rem;
  }
  .listIndex16 .slider-product16 .item:before {
    border-radius: 10px;
  }
  .listIndex16 .slider-product16 .item:hover:before {
    height: 11.5rem;
  }
  .listIndex16 .slider-product16 .item:hover .prices .off {
    background: white;
    color: red;
  }
  .listIndex16 .slider-product16 .item:hover .prices .price .val {
    color: white;
  }
  .listIndex16 .slider-product16 .item:hover .prices .price s {
    color: white;
  }
  .listIndex16 .slider-product16 .owl-nav {
    display: none;
  }
  .listIndex16:before {
    top: 4rem;
  }
}

.listIndex17 {
  margin: auto;
  border-radius: 20px;
  display: grid;
  grid-template-columns: 13rem 1fr;
  grid-gap: 1rem;
  padding: 1rem;
}
.listIndex17 .title {
  display: grid;
  align-content: center;
}
.listIndex17 .title .name {
  font-size: 1.5rem;
  font-weight: 900;
  color: white;
  text-align: center;
  text-shadow: 0 10px 5px rgba(0, 0, 0, 0.2);
}
.listIndex17 .title .pic {
  display: grid;
  justify-content: center;
  margin: 1rem 0;
}
.listIndex17 .title .pic img {
  height: 5rem;
  object-fit: contain;
}
.listIndex17 .title a {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  align-items: center;
  color: white;
  font-size: 1rem;
  font-weight: 700;
  background: rgba(0, 0, 0, 0.1);
  margin-top: 2rem;
  padding: 0.5rem;
  border-radius: 10px;
}
.listIndex17 .title a i {
  display: grid;
  align-items: center;
}
.listIndex17 .title a i svg {
  width: 1rem;
  height: 1rem;
  fill: white;
}
.listIndex17 .slider-product17 {
  overflow: hidden;
}
.listIndex17 .slider-product17 .item {
  padding: 1rem;
  background: white;
  border-radius: 20px;
  display: grid;
  position: relative;
}
.listIndex17 .slider-product17 .item .pic img {
  height: 10rem;
  object-fit: contain;
}
.listIndex17 .slider-product17 .item .pic .lottery {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  background: red;
  padding: 5px 10px;
  color: white;
  font-size: 0.7rem;
  font-weight: 700;
  border-radius: 5rem;
  box-shadow: 0 5px 5px rgba(0, 0, 0, 0.2);
}
.listIndex17 .slider-product17 .item .title1 {
  font-size: 0.9rem;
  font-weight: 500;
  color: #000;
  margin-top: 1rem;
  height: 3rem;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  text-overflow: ellipsis;
}
.listIndex17 .slider-product17 .item .prices {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.5rem;
  height: 3rem;
}
.listIndex17 .slider-product17 .item .prices .off {
  background: red;
  padding: 0 0.5rem;
  border-radius: 5rem;
  color: white;
  font-size: 0.9rem;
  font-weight: 900;
}
.listIndex17 .slider-product17 .item .prices .price {
  font-size: 1.2rem;
  font-weight: 900;
  color: #000;
}
.listIndex17 .slider-product17 .item .prices .price span {
  font-size: 0.8rem;
  font-weight: 500;
}
.listIndex17 .slider-product17 .item .content {
  display: grid;
  align-items: end;
  font-size: 0.95rem;
  font-weight: 900;
  color: #000;
  height: 2.5rem;
  margin-top: 1rem;
}
.listIndex17 .slider-product17 .item .content span {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
.listIndex17 .slider-product17 .item s {
  display: flex;
  justify-content: left;
  gap: 2px;
  font-size: 0.7rem;
  color: #444;
}
.listIndex17 .slider-product17 .item:hover .title1 {
  color: var(--green-color);
}
@media screen and (max-width: 700px) {
  .listIndex17 {
    padding: 0.5rem;
    grid-template-columns: 1fr;
    border-radius: 10px;
    grid-gap: 0.5rem;
  }
  .listIndex17 .title .name {
    font-size: 1rem;
  }
  .listIndex17 .title .pic {
    margin: 0.5rem 0;
  }
  .listIndex17 .title .pic img {
    height: 3rem;
  }
  .listIndex17 .title a {
    font-size: 0.8rem;
    margin-top: 1rem;
  }
  .listIndex17 .title a i svg {
    width: 0.8rem;
    height: 0.8rem;
  }
  .listIndex17 .slider-product17 .item {
    padding: 0.5rem;
    border-radius: 10px;
  }
  .listIndex17 .slider-product17 .item .pic img {
    height: 8rem;
  }
  .listIndex17 .slider-product17 .item .title1 {
    font-size: 0.7rem;
    margin-top: 0.5rem;
    height: auto;
  }
  .listIndex17 .slider-product17 .item .prices {
    height: 2.5rem;
  }
  .listIndex17 .slider-product17 .item .prices .off {
    font-size: 0.7rem;
  }
  .listIndex17 .slider-product17 .item .prices .price {
    font-size: 0.8rem;
  }
  .listIndex17 .slider-product17 .item .prices .price span {
    font-size: 0.7rem;
  }
}

.listIndex18 {
  margin: auto;
}
.listIndex18 .title {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  font-size: 1.5rem;
  font-weight: 900;
  color: #000;
  position: relative;
}
.listIndex18 .title:before {
  width: 5px;
  height: 30px;
  display: grid;
  background: linear-gradient(var(--green-color), var(--back1-color));
  border-radius: 5px;
  content: "";
  box-shadow: 5px 0 17px var(--green-color);
}
.listIndex18 .slider-product18 {
  box-shadow: 0 4px 16px 0 rgba(36, 43, 61, 0.1);
  border: 1px solid #eee;
  border-radius: 15px;
  margin-top: 1rem;
}
.listIndex18 .slider-product18 .items a {
  display: grid;
  overflow: hidden;
  border-bottom: 1px solid #eee;
  border-left: 1px solid #eee;
  padding: 0.5rem;
}
.listIndex18 .slider-product18 .items a article {
  display: grid;
  grid-template-columns: auto 1fr;
}
.listIndex18 .slider-product18 .items a article .pic {
  display: grid;
  align-items: center;
}
.listIndex18 .slider-product18 .items a article .pic img {
  width: 5rem;
  height: 5rem;
  object-fit: contain;
}
.listIndex18 .slider-product18 .items a article .content {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem;
}
.listIndex18 .slider-product18 .items a article .num {
  color: var(--green-color);
  text-shadow: 0 5px 5px rgba(0, 0, 0, 0.2);
  font-size: 1.8rem;
  font-weight: 900;
}
.listIndex18 .slider-product18 .items a article .name1 {
  color: #444;
  font-size: 0.8rem;
  font-weight: 500;
  line-height: 2rem;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}
.listIndex18 .slider-product18 .items a:last-child {
  border-bottom: 0;
}
.listIndex18 .slider-product18 .owl-nav {
  position: absolute;
  top: -3.5rem;
  left: 0;
  display: flex;
  gap: 0.5rem;
}
.listIndex18 .slider-product18 .owl-nav .owl-prev, .listIndex18 .slider-product18 .owl-nav .owl-next {
  width: 2.5rem;
  height: 2.5rem;
  display: grid;
  border: 1.5px solid var(--green-color);
  border-radius: 5rem;
  align-items: center;
  font-size: 1.5rem;
  background: transparent;
  transition: all 0.3s ease-in-out;
}
.listIndex18 .slider-product18 .owl-nav .owl-prev span, .listIndex18 .slider-product18 .owl-nav .owl-next span {
  line-height: 1px;
  color: var(--green-color);
}
.listIndex18 .slider-product18 .owl-nav .owl-prev:hover, .listIndex18 .slider-product18 .owl-nav .owl-next:hover {
  background: var(--green-color);
}
.listIndex18 .slider-product18 .owl-nav .owl-prev:hover span, .listIndex18 .slider-product18 .owl-nav .owl-next:hover span {
  color: white;
}
@media screen and (max-width: 800px) {
  .listIndex18 .title {
    font-size: 1.2rem;
  }
  .listIndex18 .title:before {
    height: 20px;
  }
  .listIndex18 .slider-product18 {
    border-radius: 10px;
  }
  .listIndex18 .slider-product18 .items a article {
    display: block;
  }
  .listIndex18 .slider-product18 .items a article .pic {
    display: grid;
    justify-content: center;
  }
  .listIndex18 .slider-product18 .items a article .pic img {
    width: 100%;
    height: 4rem;
  }
  .listIndex18 .slider-product18 .items a article .content {
    display: block;
    text-align: center;
    padding: 0.5rem;
  }
  .listIndex18 .slider-product18 .items a article .num {
    font-size: 1.2rem;
  }
  .listIndex18 .slider-product18 .items a article .name1 {
    font-size: 0.8rem;
    line-height: 1rem;
  }
  .listIndex18 .slider-product18 .items a:last-child {
    border-bottom: 0;
  }
  .listIndex18 .slider-product18 .owl-nav {
    top: -2.6rem;
  }
  .listIndex18 .slider-product18 .owl-nav .owl-prev, .listIndex18 .slider-product18 .owl-nav .owl-next {
    width: 1.7rem;
    height: 1.7rem;
    font-size: 0.9rem;
  }
}

.listIndex19 {
  margin: auto;
}
.listIndex19 .title {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  font-size: 1.5rem;
  font-weight: 900;
  color: #000;
  position: relative;
}
.listIndex19 .title:before {
  width: 5px;
  height: 30px;
  display: grid;
  background: linear-gradient(var(--green-color), var(--back1-color));
  border-radius: 5px;
  content: "";
  box-shadow: 5px 0 17px var(--green-color);
}
.listIndex19 .items {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  border: 1px solid #eee;
  background: white;
  box-shadow: 0 4px 16px 0 rgba(36, 43, 61, 0.1);
  border-radius: 15px;
  margin-top: 1rem;
  overflow: hidden;
}
.listIndex19 .items a {
  overflow: hidden;
  border-top: 1px solid #eee;
  border-left: 1px solid #eee;
  padding: 0.5rem;
  position: relative;
  z-index: 1;
}
.listIndex19 .items a article .pic {
  display: grid;
  justify-content: center;
  position: relative;
}
.listIndex19 .items a article .pic img {
  width: 100%;
  height: 10rem;
  object-fit: contain;
}
.listIndex19 .items a article .pic .ori {
  position: absolute;
  left: 0;
  top: 0;
  padding: 0.2rem 0.8rem;
  border-radius: 5rem;
  color: #444;
  font-weight: 700;
  background: white;
  border: 1px solid #ddd;
  font-size: 0.8rem;
}
.listIndex19 .items a article .lottery {
  position: absolute;
  top: 0;
  right: 0;
  background: red;
  padding: 5px 10px;
  color: white;
  font-size: 0.7rem;
  font-weight: 700;
  border-radius: 5rem;
  box-shadow: 0 5px 5px rgba(0, 0, 0, 0.2);
}
.listIndex19 .items a article .price1 {
  text-align: left;
}
.listIndex19 .items a article .price1 .prices {
  margin-top: 1rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 2px;
}
.listIndex19 .items a article .price1 .prices .off {
  background: red;
  color: white;
  padding: 0 0.5rem;
  border-radius: 5rem;
  font-size: 0.8rem;
  font-weight: 700;
}
.listIndex19 .items a article .price1 .prices .price {
  font-size: 1.2rem;
  font-weight: 900;
  color: #000;
}
.listIndex19 .items a article .price1 .prices .price span {
  font-size: 0.7rem;
}
.listIndex19 .items a article .price1 s {
  font-size: 0.8rem;
  font-weight: 500;
  color: #444;
  opacity: 0.5;
}
.listIndex19 .items a article .price1 s span {
  font-size: 0.7rem;
}
.listIndex19 .items a article .content {
  display: grid;
  align-items: end;
  font-size: 0.95rem;
  font-weight: 900;
  color: #000;
  height: 3rem;
  margin-top: 1rem;
}
.listIndex19 .items a article .content span {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
.listIndex19 .items a:nth-child(1), .listIndex19 .items a:nth-child(2), .listIndex19 .items a:nth-child(3), .listIndex19 .items a:nth-child(4), .listIndex19 .items a:nth-child(5), .listIndex19 .items a:nth-child(6) {
  border-top: 0;
}
@media screen and (max-width: 800px) {
  .listIndex19 .title {
    font-size: 1.2rem;
  }
  .listIndex19 .title:before {
    height: 20px;
  }
  .listIndex19 .items {
    grid-template-columns: repeat(2, 1fr);
    border-radius: 10px;
  }
  .listIndex19 .items a article .pic img {
    height: 8rem;
  }
  .listIndex19 .items a article .pic .ori {
    padding: 0.2rem 0.5rem;
    font-size: 0.7rem;
  }
  .listIndex19 .items a article .price1 .prices {
    margin-top: 0.5rem;
  }
  .listIndex19 .items a article .price1 .prices .off {
    font-size: 0.7rem;
  }
  .listIndex19 .items a article .price1 .prices .price {
    font-size: 0.9rem;
  }
  .listIndex19 .items a article .price1 .prices .price span {
    font-size: 0.7rem;
  }
  .listIndex19 .items a article .price1 s {
    font-size: 0.7rem;
  }
  .listIndex19 .items a article .price1 s span {
    font-size: 0.6rem;
  }
  .listIndex19 .items a:nth-child(3), .listIndex19 .items a:nth-child(4), .listIndex19 .items a:nth-child(5), .listIndex19 .items a:nth-child(6) {
    border-top: 1px solid #eee;
  }
}

.listIndex20 {
  margin: auto;
}
.listIndex20 .title {
  font-size: 1.3rem;
  text-align: center;
  font-weight: 900;
  color: #000;
}
.listIndex20 .title .des {
  font-size: 1rem;
  text-align: center;
  font-weight: 300;
  color: #000;
  margin-top: 0.5rem;
}
.listIndex20 .products {
  padding: 1rem 2rem;
  margin-top: 1rem;
  position: relative;
}
.listIndex20 .products .slider-product20 .item {
  display: grid;
  justify-content: center;
  justify-items: center;
}
.listIndex20 .products .slider-product20 .item .pic {
  border-radius: 50%;
  background: white;
  height: 8rem;
  width: 8rem;
  display: grid;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
}
.listIndex20 .products .slider-product20 .item .pic img {
  height: 5rem;
  width: 100%;
  object-fit: contain;
}
.listIndex20 .products .slider-product20 .item .title {
  text-align: center;
  font-size: 0.9rem;
  font-weight: 300;
  color: #000;
  height: 3rem;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  text-overflow: ellipsis;
  margin: 0.5rem 0;
}
.listIndex20 .products .slider-product20 .item .content {
  text-align: center;
  font-size: 0.9rem;
  font-weight: 900;
  color: #000;
}
.listIndex20 .products .slider-product20 .item .price {
  text-align: center;
  font-size: 1rem;
  font-weight: 900;
  color: #000;
}
.listIndex20 .products .slider-product20 .owl-dots {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  margin-top: 2rem;
}
.listIndex20 .products .slider-product20 .owl-dots button span {
  width: 8px;
  border: 1px solid var(--green-color);
  height: 8px;
  display: grid;
  border-radius: 50%;
}
.listIndex20 .products .slider-product20 .owl-dots .active span {
  background: var(--green-color);
  width: 25px;
  border-radius: 5rem;
}
.listIndex20 .products:before {
  position: absolute;
  content: "";
  top: 4.5rem;
  bottom: 0;
  right: 0;
  left: 0;
  border-top-right-radius: 15px;
  border-top-left-radius: 15px;
  background: linear-gradient(var(--red-color), var(--red-color), var(--back4-color));
  height: 12rem;
}
@media screen and (max-width: 800px) {
  .listIndex20 .title {
    font-size: 1.2rem;
  }
  .listIndex20 .title .des {
    font-size: 0.8rem;
  }
  .listIndex20 .products {
    padding: 0.5rem;
    margin-top: 0;
  }
  .listIndex20 .products .slider-product20 .item .pic {
    height: 7rem;
    width: 7rem;
  }
  .listIndex20 .products .slider-product20 .item .pic img {
    height: 4rem;
  }
  .listIndex20 .products .slider-product20 .item .title {
    font-size: 0.8rem;
    height: 2.5rem;
  }
  .listIndex20 .products .slider-product20 .item .content {
    font-size: 0.8rem;
  }
  .listIndex20 .products .slider-product20 .item .price {
    font-size: 0.9rem;
  }
  .listIndex20 .products .slider-product20 .owl-dots {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    margin-top: 2rem;
  }
  .listIndex20 .products .slider-product20 .owl-dots button span {
    width: 8px;
    border: 1px solid var(--green-color);
    height: 8px;
    display: grid;
    border-radius: 50%;
  }
  .listIndex20 .products .slider-product20 .owl-dots .active span {
    background: var(--green-color);
    width: 25px;
    border-radius: 5rem;
  }
  .listIndex20 .products:before {
    position: absolute;
    content: "";
    top: 4.5rem;
    bottom: 0;
    right: 0;
    left: 0;
    border-top-right-radius: 15px;
    border-top-left-radius: 15px;
    background: linear-gradient(var(--red-color), var(--red-color), var(--back4-color));
    height: 12rem;
  }
}

.listIndex21 {
  margin: auto;
}
.listIndex21 .titles {
  display: grid;
  grid-template-columns: auto 1fr;
  font-size: 1rem;
  font-weight: 900;
  color: #000;
}
.listIndex21 .titles .name {
  background: var(--red-color);
}
.listIndex21 .titles .name span {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--back4-color);
  border-bottom-left-radius: 15px;
  padding: 1rem;
  font-size: 1rem;
  font-weight: 700;
  color: #000;
}
.listIndex21 .titles .name span i {
  display: grid;
  align-items: center;
}
.listIndex21 .titles .name span i svg {
  width: 1.3rem;
  height: 1.3rem;
  fill: #000;
}
.listIndex21 .titles .cats {
  border-top-right-radius: 15px;
  background: var(--red-color);
  border-top-left-radius: 15px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding: 0 1rem;
}
.listIndex21 .titles .cats .item {
  font-size: 0.9rem;
  font-weight: 700;
  color: #000;
  background: white;
  padding: 0.5rem 1rem;
  border-radius: 5rem;
}
.listIndex21 .products {
  padding: 1rem 2rem;
  position: relative;
  background: var(--red-color);
  border-radius: 15px;
  border-top-left-radius: 0;
}
.listIndex21 .products .slider-product21 .item {
  display: grid;
  justify-content: center;
  justify-items: center;
  background: white;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
  padding: 1rem;
  border-radius: 15px;
}
.listIndex21 .products .slider-product21 .item .pic {
  display: grid;
  align-items: center;
  justify-content: center;
  position: relative;
}
.listIndex21 .products .slider-product21 .item .pic img {
  height: 10rem;
  width: 100%;
  object-fit: contain;
}
.listIndex21 .products .slider-product21 .item .pic .off {
  position: absolute;
  top: -0.5rem;
  right: -0.5rem;
  background: var(--green-color);
  color: white;
  border-radius: 5rem;
  padding: 2px 15px;
  font-size: 0.9rem;
  font-weight: 700;
}
.listIndex21 .products .slider-product21 .item .title {
  text-align: center;
  font-size: 0.9rem;
  font-weight: 300;
  color: #000;
  height: 3rem;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  text-overflow: ellipsis;
  margin-top: 1rem;
}
.listIndex21 .products .slider-product21 .item .stars {
  margin: 1rem 0;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.2rem;
  color: var(--green-color);
  font-size: 0.9rem;
  font-weight: 700;
  line-height: 1px;
}
.listIndex21 .products .slider-product21 .item .stars i {
  display: grid;
  align-items: center;
}
.listIndex21 .products .slider-product21 .item .stars i svg {
  width: 0.8rem;
  height: 0.8rem;
  fill: var(--green-color);
}
.listIndex21 .products .slider-product21 .item .content {
  text-align: center;
  font-size: 0.9rem;
  font-weight: 900;
  color: #000;
}
.listIndex21 .products .slider-product21 .item .price {
  text-align: center;
  font-size: 1rem;
  font-weight: 900;
  color: #000;
}
@media screen and (max-width: 800px) {
  .listIndex21 .titles {
    grid-template-columns: 1fr;
  }
  .listIndex21 .titles .name span {
    font-size: 1rem;
  }
  .listIndex21 .titles .cats {
    padding: 0.5rem;
  }
  .listIndex21 .titles .cats .item {
    font-size: 0.75rem;
    padding: 0.5rem;
  }
  .listIndex21 .products {
    padding: 0.5rem;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
  }
  .listIndex21 .products .slider-product21 .item {
    padding: 0.5rem;
    border-radius: 10px;
  }
  .listIndex21 .products .slider-product21 .item .pic img {
    height: 8rem;
  }
  .listIndex21 .products .slider-product21 .item .pic .off {
    padding: 2px 10px;
    font-size: 0.8rem;
    top: 0;
    right: 0;
  }
  .listIndex21 .products .slider-product21 .item .title {
    text-align: center;
    font-size: 0.9rem;
    height: 3rem;
  }
  .listIndex21 .products .slider-product21 .item .stars {
    margin: 0.5rem 0;
    font-size: 0.8rem;
  }
  .listIndex21 .products .slider-product21 .item .stars i svg {
    width: 0.7rem;
    height: 0.7rem;
  }
  .listIndex21 .products .slider-product21 .item .content {
    font-size: 0.8rem;
  }
  .listIndex21 .products .slider-product21 .item .price {
    font-size: 0.9rem;
  }
}

.listIndex22 {
  margin: auto;
}
.listIndex22 .titles {
  font-size: 1.3rem;
  text-align: center;
  font-weight: 900;
  color: #000;
}
.listIndex22 .titles p {
  font-size: 1rem;
  text-align: center;
  font-weight: 300;
  color: #444;
  margin-top: 0.5rem;
}
.listIndex22 .products {
  margin-top: 2rem;
}
.listIndex22 .products .slider-product22 .item {
  display: grid;
  justify-content: center;
  justify-items: center;
  grid-template-columns: 10rem 1fr;
  grid-gap: 1rem;
}
.listIndex22 .products .slider-product22 .item .pic {
  display: grid;
  align-items: center;
  justify-content: center;
  position: relative;
  background: white;
  padding: 0.5rem;
  border-radius: 50%;
  overflow: hidden;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
}
.listIndex22 .products .slider-product22 .item .pic img {
  height: 9rem;
  width: 100%;
  object-fit: contain;
}
.listIndex22 .products .slider-product22 .item .des {
  display: grid;
  justify-items: right;
  align-content: center;
}
.listIndex22 .products .slider-product22 .item .des .title {
  font-size: 0.9rem;
  font-weight: 700;
  color: #444;
  height: 3rem;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  text-overflow: ellipsis;
}
.listIndex22 .products .slider-product22 .item .des .content {
  font-size: 0.9rem;
  font-weight: 900;
  color: #000;
  margin: 1rem 0;
}
.listIndex22 .products .slider-product22 .item .des .price {
  font-size: 1rem;
  font-weight: 900;
  color: #000;
  margin: 1rem 0;
}
.listIndex22 .products .slider-product22 .item .des .add {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.3rem 1rem;
  border-radius: 5rem;
  background: var(--green-color);
  font-size: 0.8rem;
  font-weight: 500;
  color: white;
}
.listIndex22 .products .slider-product22 .item .des .add i {
  display: grid;
  align-items: center;
}
.listIndex22 .products .slider-product22 .item .des .add i svg {
  width: 1rem;
  height: 1rem;
  fill: white;
}
@media screen and (max-width: 800px) {
  .listIndex22 .titles {
    font-size: 1.2rem;
  }
  .listIndex22 .titles p {
    font-size: 0.7rem;
  }
  .listIndex22 .products {
    margin-top: 1rem;
  }
  .listIndex22 .products .slider-product22 .item {
    grid-template-columns: 8rem 1fr;
    grid-gap: 0.5rem;
  }
  .listIndex22 .products .slider-product22 .item .pic img {
    height: 7rem;
    width: 100%;
    object-fit: contain;
  }
  .listIndex22 .products .slider-product22 .item .des .title {
    font-size: 0.85rem;
    height: 2.5rem;
  }
  .listIndex22 .products .slider-product22 .item .des .content {
    font-size: 0.7rem;
    margin: 0.5rem 0;
  }
  .listIndex22 .products .slider-product22 .item .des .price {
    margin: 0.5rem 0;
  }
  .listIndex22 .products .slider-product22 .item .des .add {
    padding: 0.2rem 0.5rem;
  }
  .listIndex22 .products .slider-product22 .item .des .add i svg {
    width: 0.85rem;
    height: 0.85rem;
  }
}

.listIndex23 .title {
  margin: auto;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
}
.listIndex23 .title .right {
  position: relative;
}
.listIndex23 .title .right .nameEn {
  font-size: 0.95rem;
  font-weight: 700;
  opacity: 0.5;
  color: #444;
}
.listIndex23 .title .right .name {
  font-size: 1.5rem;
  font-weight: 900;
  color: #000;
}
.listIndex23 .title .right .name span {
  color: var(--green-color);
}
.listIndex23 .title .right:before {
  content: "";
  position: absolute;
  bottom: -0.5rem;
  width: 3rem;
  background: var(--green-color);
  height: 3px;
}
.listIndex23 .title .left {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: #444;
  font-size: 1rem;
  font-weight: 500;
  opacity: 0.8;
}
.listIndex23 .title .left i {
  display: grid;
  align-items: center;
}
.listIndex23 .title .left i svg {
  width: 1.3rem;
  height: 1.3rem;
  color: #444;
}
.listIndex23 .products {
  margin-top: 2rem;
  padding: 1rem 0;
}
.listIndex23 .products .width {
  margin: auto;
}
.listIndex23 .products .width .slider-product23 .item {
  border-radius: 15px;
  display: grid;
  overflow: hidden;
  box-shadow: 0 5px 5px rgba(0, 0, 0, 0.03);
  padding: 1rem;
  background: white;
  margin-bottom: 0.5rem;
}
.listIndex23 .products .width .slider-product23 .item .pic {
  position: relative;
  transition: all 0.3s ease-in-out;
}
.listIndex23 .products .width .slider-product23 .item .pic img {
  height: 12rem;
  object-fit: contain;
  width: 100%;
}
.listIndex23 .products .width .slider-product23 .item .pic .off {
  position: absolute;
  left: 0.5rem;
  top: 0.5rem;
  font-size: 0.8rem;
  font-weight: 700;
  color: white;
  background: black;
  border-radius: 5rem;
  padding: 0.2rem 1rem;
}
.listIndex23 .products .width .slider-product23 .item .des {
  overflow: hidden;
}
.listIndex23 .products .width .slider-product23 .item .des .cats {
  margin-bottom: 1rem;
  margin-top: 0.5rem;
  font-size: 0.8rem;
  font-weight: 500;
  color: #444;
  opacity: 0.7;
  text-align: center;
}
.listIndex23 .products .width .slider-product23 .item .des .title2 {
  font-size: 0.9rem;
  font-weight: 700;
  color: #444;
  height: 3rem;
  text-align: center;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  text-overflow: ellipsis;
  margin-top: 1rem;
}
.listIndex23 .products .width .slider-product23 .item .des .price1 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem;
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid #eee;
  height: 3.5rem;
}
.listIndex23 .products .width .slider-product23 .item .des .price1 .prices s {
  font-size: 0.8rem;
  font-weight: 300;
  color: #444;
}
.listIndex23 .products .width .slider-product23 .item .des .price1 .prices .priceF {
  text-align: left;
  font-size: 1.2rem;
  font-weight: 700;
  color: black;
  line-height: 8px;
}
.listIndex23 .products .width .slider-product23 .item .des .price1 .prices .priceF span {
  font-size: 0.8rem;
  opacity: 0.7;
}
.listIndex23 .products .width .slider-product23 .item .des .price1 .next {
  display: grid;
  align-items: center;
  background: var(--green-color);
  padding: 0.5rem;
  border-radius: 10px;
}
.listIndex23 .products .width .slider-product23 .item .des .price1 .next i {
  display: grid;
  align-items: center;
}
.listIndex23 .products .width .slider-product23 .item .des .price1 .next i svg {
  width: 1.4rem;
  height: 1.4rem;
  color: white;
}
.listIndex23 .products .width .slider-product23 .item .des .content {
  display: flex;
  align-items: end;
  height: 3.5rem;
  border-top: 1px solid #eee;
  margin-top: 1rem;
  font-size: 1rem;
  font-weight: 700;
  color: #000;
}
.listIndex23 .products .width .slider-product23 .item .des .content span {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
.listIndex23 .products .width .slider-product23 .owl-nav {
  display: block !important;
}
.listIndex23 .products .width .slider-product23 .owl-nav .owl-next, .listIndex23 .products .width .slider-product23 .owl-nav .owl-prev {
  padding: 0.5rem;
  background: white;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
  border: 1px solid #eee;
  position: absolute;
  top: 0;
  bottom: 2rem;
  margin: auto;
  right: 0;
  width: 2.5rem;
  height: 2.5rem;
  line-height: 1rem;
  border-radius: 50%;
  font-size: 2rem;
}
.listIndex23 .products .width .slider-product23 .owl-nav .owl-next span, .listIndex23 .products .width .slider-product23 .owl-nav .owl-prev span {
  line-height: 1rem;
  color: #000 !important;
}
.listIndex23 .products .width .slider-product23 .owl-nav .owl-next {
  left: 0;
  right: auto;
}
@media screen and (max-width: 800px) {
  .listIndex23 .title .right .nameEn {
    font-size: 0.8rem;
  }
  .listIndex23 .title .right .name {
    font-size: 1.2rem;
  }
  .listIndex23 .title .right:before {
    width: 3rem;
    height: 1px;
  }
  .listIndex23 .title .left {
    font-size: 0.85rem;
  }
  .listIndex23 .title .left i svg {
    width: 1rem;
    height: 1rem;
  }
  .listIndex23 .products {
    margin-top: 1rem;
    padding: 0.5rem 0;
  }
  .listIndex23 .products .width .slider-product23 .item {
    border-radius: 10px;
    padding: 0.5rem;
  }
  .listIndex23 .products .width .slider-product23 .item .pic img {
    height: 9rem;
  }
  .listIndex23 .products .width .slider-product23 .item .pic .off {
    position: absolute;
    left: 0;
    top: 0;
    font-size: 0.7rem;
    padding: 0.2rem 0.5rem;
  }
  .listIndex23 .products .width .slider-product23 .item .des .cats {
    margin-bottom: 0.5rem;
    font-size: 0.7rem;
  }
  .listIndex23 .products .width .slider-product23 .item .des .title2 {
    font-size: 0.8rem;
    height: 2.5rem;
    margin-top: 0.5rem;
  }
  .listIndex23 .products .width .slider-product23 .item .des .price1 {
    margin-top: 0.5rem;
    padding-top: 0.5rem;
    height: 3rem;
  }
  .listIndex23 .products .width .slider-product23 .item .des .price1 .prices s {
    font-size: 0.7rem;
  }
  .listIndex23 .products .width .slider-product23 .item .des .price1 .prices .priceF {
    font-size: 0.9rem;
  }
  .listIndex23 .products .width .slider-product23 .item .des .price1 .prices .priceF span {
    font-size: 0.7rem;
  }
  .listIndex23 .products .width .slider-product23 .item .des .price1 .next i svg {
    width: 1rem;
    height: 1rem;
  }
  .listIndex23 .products .width .slider-product23 .item .des .content {
    height: 3rem;
    margin-top: 0.5rem;
    font-size: 0.8rem;
  }
  .listIndex23 .products .width .slider-product23 .owl-nav .owl-next, .listIndex23 .products .width .slider-product23 .owl-nav .owl-prev {
    padding: 0.2rem;
    bottom: 1rem;
    width: 2rem;
    height: 2rem;
    line-height: 0.8rem;
    font-size: 1.5rem;
  }
  .listIndex23 .products .width .slider-product23 .owl-nav .owl-next span, .listIndex23 .products .width .slider-product23 .owl-nav .owl-prev span {
    line-height: 1rem;
  }
}

.listIndex26 {
  margin: auto;
  border: 1px solid #eee;
  padding: 1.5rem;
  border-radius: 15px;
}
.listIndex26 .title {
  margin: auto;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
}
.listIndex26 .title .names .name {
  font-size: 1.1rem;
  font-weight: 900;
  color: #000;
}
.listIndex26 .title .names p {
  font-size: 0.9rem;
  margin-top: 0.5rem;
  font-weight: 500;
  color: #000;
}
.listIndex26 .title .more {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--green-color);
  font-size: 1rem;
  font-weight: 900;
}
.listIndex26 .title .more i {
  display: grid;
  align-items: center;
}
.listIndex26 .title .more i svg {
  width: 1.5rem;
  height: 1.5rem;
  color: var(--green-color);
}
.listIndex26 .products {
  margin-top: 1rem;
}
.listIndex26 .products .slider-product26 .item {
  border-radius: 15px;
  display: grid;
  overflow: hidden;
  background: white;
  border: 1px solid #eee;
}
.listIndex26 .products .slider-product26 .item .pic img {
  height: 12rem;
  object-fit: contain;
  width: 100%;
}
.listIndex26 .products .slider-product26 .item .des {
  overflow: hidden;
  padding: 0.5rem;
}
.listIndex26 .products .slider-product26 .item .des .title2 {
  font-size: 0.85rem;
  font-weight: 700;
  color: #000;
  height: 3rem;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  text-overflow: ellipsis;
  margin-top: 1rem;
}
.listIndex26 .products .slider-product26 .item .des .seller {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  opacity: 0.8;
  font-size: 0.75rem;
  font-weight: 300;
  color: #000;
  margin: 0.5rem 0;
}
.listIndex26 .products .slider-product26 .item .des .seller i {
  display: grid;
  align-items: center;
}
.listIndex26 .products .slider-product26 .item .des .seller i svg {
  width: 1rem;
  height: 1rem;
  fill: #444;
}
.listIndex26 .products .slider-product26 .item .des .seller span {
  opacity: 0.5;
}
.listIndex26 .products .slider-product26 .item .des .rate {
  display: flex;
  align-items: center;
  gap: 0.2rem;
  font-size: 0.8rem;
  font-weight: 900;
  color: #444;
  margin-bottom: 1rem;
}
.listIndex26 .products .slider-product26 .item .des .rate i {
  display: grid;
  align-items: center;
}
.listIndex26 .products .slider-product26 .item .des .rate i svg {
  width: 0.8rem;
  height: 0.8rem;
  fill: orangered;
}
.listIndex26 .products .slider-product26 .item .des .rate span {
  font-weight: 300;
  color: #000;
  font-size: 0.75rem;
}
.listIndex26 .products .slider-product26 .item .des .offContent {
  background: #fff5f0;
  padding: 0.5rem;
  border-radius: 5px;
}
.listIndex26 .products .slider-product26 .item .des .offContent .off {
  display: flex;
  align-items: center;
  justify-content: left;
}
.listIndex26 .products .slider-product26 .item .des .offContent .off small {
  font-size: 0.8rem;
  font-weight: 700;
  color: red;
}
.listIndex26 .products .slider-product26 .item .des .offContent .off span {
  font-size: 1rem;
  font-weight: 900;
  color: red;
}
.listIndex26 .products .slider-product26 .item .des .offContent .off s {
  font-size: 0.9rem;
  font-weight: 700;
  color: #444;
  opacity: 0.6;
  margin-left: 0.5rem;
}
.listIndex26 .products .slider-product26 .item .des .offContent .price {
  height: auto;
}
.listIndex26 .products .slider-product26 .item .des .price {
  display: flex;
  justify-content: left;
  align-items: center;
  gap: 3px;
  font-size: 1.1rem;
  font-weight: 900;
  color: #000;
  height: 4.5rem;
}
.listIndex26 .products .slider-product26 .item .des .price:after {
  opacity: 0.5;
  content: "\f06c︎";
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  font-weight: 400;
  letter-spacing: normal;
  font-family: digikala;
  font-size: 1.1rem;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-style: normal;
  font-variant: normal;
  font-weight: 400;
  text-decoration: none;
  text-transform: none;
  line-height: 1;
  box-sizing: inherit;
}
.listIndex26 .products .slider-product26 .item .des .content {
  display: flex;
  align-items: end;
  height: 3.5rem;
  border-top: 1px solid #eee;
  margin-top: 1rem;
  font-size: 1rem;
  font-weight: 700;
  color: #000;
}
.listIndex26 .products .slider-product26 .item .des .content span {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
.listIndex26 .products .slider-product26 .owl-nav {
  display: block !important;
}
.listIndex26 .products .slider-product26 .owl-nav .owl-next, .listIndex26 .products .slider-product26 .owl-nav .owl-prev {
  padding: 0.5rem;
  background: white !important;
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto;
  right: -3rem;
  border: 2px solid #eee !important;
  font-size: 1.5rem !important;
  border-radius: 5px;
  color: #000 !important;
  height: 2.6rem;
  display: grid;
  align-items: center;
  justify-content: center;
  width: 2.6rem;
}
.listIndex26 .products .slider-product26 .owl-nav .owl-next span, .listIndex26 .products .slider-product26 .owl-nav .owl-prev span {
  font-size: 2.6rem;
  line-height: 1rem;
}
.listIndex26 .products .slider-product26 .owl-nav .owl-next {
  left: -3rem;
  right: auto;
}
@media screen and (max-width: 800px) {
  .listIndex26 {
    width: 100% !important;
    border-right: 0;
    border-left: 0;
    padding: 1rem 0.5rem;
    border-radius: 0;
  }
  .listIndex26 .title .names .name {
    font-size: 0.9rem;
  }
  .listIndex26 .title .names p {
    font-size: 0.8rem;
  }
  .listIndex26 .title .more {
    gap: 0.2rem;
    font-size: 0.8rem;
  }
  .listIndex26 .title .more i svg {
    width: 1.2rem;
    height: 1.2rem;
  }
  .listIndex26 .products .slider-product26 .item {
    border-radius: 10px;
  }
  .listIndex26 .products .slider-product26 .item .pic img {
    height: 10rem;
  }
  .listIndex26 .products .slider-product26 .item .des .title2 {
    font-size: 0.8rem;
  }
  .listIndex26 .products .slider-product26 .owl-nav {
    display: none !important;
  }
}

.listIndex27 {
  position: relative;
  padding: 1rem;
  margin: auto;
}
.listIndex27 .block {
  position: relative;
  z-index: 3;
}
.listIndex27 .block .title1 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  grid-gap: 0.5rem;
  text-align: center;
  padding: 1rem 0;
}
.listIndex27 .block .title1 .right {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem;
  font-size: 1.5rem;
  font-weight: 900;
  color: white;
}
.listIndex27 .block .title1 .right .pic {
  display: grid;
  align-items: center;
}
.listIndex27 .block .title1 .right .pic img {
  width: 2rem;
  height: 2rem;
}
.listIndex27 .block .title1 a {
  font-size: 1rem;
  font-weight: 500;
  color: white;
  text-align: center;
  padding: 0.5rem 2rem;
  background: var(--green-color);
  border-radius: 5px;
}
.listIndex27 .block .cats1 {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1rem;
}
.listIndex27 .block .cats1 .item {
  background: white;
  border-radius: 5rem;
  padding: 0.3rem 1rem;
  font-size: 0.8rem;
  font-weight: 500;
  color: #000;
}
.listIndex27 .block .slider-lists27 {
  display: grid;
}
.listIndex27 .block .slider-lists27 .owl-item {
  padding: 1rem 0.5rem;
}
.listIndex27 .block .slider-lists27 .item {
  display: grid;
}
.listIndex27 .block .slider-lists27 .item .pic {
  position: relative;
  transition: all 0.3s ease-in-out;
  border-radius: 15px;
  overflow: hidden;
  border: 1px solid #eee;
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.05);
  background: white;
}
.listIndex27 .block .slider-lists27 .item .pic img {
  height: 16rem;
  object-fit: cover;
  width: 100%;
}
.listIndex27 .block .slider-lists27 .item .pic .cover {
  position: absolute;
  inset: 0;
  background: white;
  opacity: 0;
  transition: all 0.2s ease-in-out;
}
.listIndex27 .block .slider-lists27 .item .pic .lottery {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  background: red;
  padding: 5px 10px;
  color: white;
  font-size: 0.7rem;
  font-weight: 700;
  border-radius: 5rem;
  box-shadow: 0 5px 5px rgba(0, 0, 0, 0.2);
}
.listIndex27 .block .slider-lists27 .item .des {
  overflow: hidden;
  padding: 0.5rem;
}
.listIndex27 .block .slider-lists27 .item .des .title {
  font-size: 0.85rem;
  font-weight: 500;
  color: #000;
  height: 3rem;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  text-overflow: ellipsis;
}
.listIndex27 .block .slider-lists27 .item .des .prices {
  margin-top: 0.5rem;
}
.listIndex27 .block .slider-lists27 .item .des .prices .offer {
  display: flex;
  justify-content: left;
  gap: 0.5rem;
}
.listIndex27 .block .slider-lists27 .item .des .prices .offer s {
  font-size: 0.8rem;
  font-weight: 300;
  color: #444;
}
.listIndex27 .block .slider-lists27 .item .des .prices .offer span {
  background: red;
  border-radius: 8px;
  font-weight: 900;
  color: white;
  display: grid;
  box-shadow: 0 0 10px rgba(255, 0, 0, 0.3);
  align-items: center;
  line-height: 0.7rem;
  padding: 2px 5px;
  font-size: 0.7rem;
}
.listIndex27 .block .slider-lists27 .item .des .prices .priceF {
  text-align: left;
  font-size: 1rem;
  font-weight: 900;
  color: black;
}
.listIndex27 .block .slider-lists27 .item .des .prices .priceF span {
  font-size: 0.6rem;
  opacity: 0.6;
}
.listIndex27 .block .slider-lists27 .item .des .content {
  display: grid;
  align-items: end;
  font-size: 0.95rem;
  font-weight: 900;
  color: #000;
  margin-top: 1rem;
}
.listIndex27 .block .slider-lists27 .item .des .content span {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
.listIndex27 .block .slider-lists27 .item:hover .pic .cover {
  opacity: 1;
}
.listIndex27 .block .slider-lists27 .owl-next, .listIndex27 .block .slider-lists27 .owl-prev {
  padding: 0.5rem;
  background: white !important;
  position: absolute;
  top: 0;
  bottom: 2rem;
  margin: auto;
  right: 1rem;
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  border: 2px solid #eee !important;
}
.listIndex27 .block .slider-lists27 .owl-next span, .listIndex27 .block .slider-lists27 .owl-prev span {
  font-size: 2rem;
  line-height: 2rem;
}
.listIndex27 .block .slider-lists27 .owl-next {
  left: 1rem;
  right: auto;
}
.listIndex27 .pc1 .pc12 {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  height: 50%;
  border-radius: 20px;
  z-index: 2;
}
@media screen and (max-width: 700px) {
  .listIndex27 {
    padding: 0.5rem;
  }
  .listIndex27 .block .title1 {
    padding: 0.5rem 0;
  }
  .listIndex27 .block .title1 .right {
    font-size: 1rem;
  }
  .listIndex27 .block .title1 .right .pic img {
    width: 1.5rem;
    height: 1.5rem;
  }
  .listIndex27 .block .title1 a {
    font-size: 0.8rem;
    padding: 0.3rem 0.5rem;
  }
  .listIndex27 .block .cats1 .item {
    border-radius: 5rem;
    font-size: 0.75rem;
  }
  .listIndex27 .block .slider-lists27 .owl-item {
    padding: 0.5rem 0.3rem;
  }
  .listIndex27 .block .slider-lists27 .item {
    display: grid;
  }
  .listIndex27 .block .slider-lists27 .item .pic {
    padding: 0.5rem;
    border-radius: 10px;
  }
  .listIndex27 .block .slider-lists27 .item .pic img {
    height: 10rem;
  }
  .listIndex27 .block .slider-lists27 .item .pic .cover {
    inset: 0.5rem;
  }
  .listIndex27 .block .slider-lists27 .item .pic .lottery {
    display: none;
  }
  .listIndex27 .block .slider-lists27 .item .des {
    padding: 0.5rem;
  }
  .listIndex27 .block .slider-lists27 .item .des .title {
    font-size: 0.8rem;
  }
  .listIndex27 .block .slider-lists27 .item .des .prices .offer s {
    font-size: 0.7rem;
  }
  .listIndex27 .block .slider-lists27 .item .des .prices .offer span {
    font-size: 0.6rem;
  }
  .listIndex27 .block .slider-lists27 .item .des .prices .priceF {
    font-size: 0.9rem;
  }
  .listIndex27 .block .slider-lists27 .item .des .content {
    font-size: 0.9rem;
  }
  .listIndex27 .block .slider-lists27 .owl-next, .listIndex27 .block .slider-lists27 .owl-prev {
    padding: 0.3rem;
    bottom: 0;
    right: 0;
    width: 2.5rem;
    height: 2.5rem;
  }
  .listIndex27 .block .slider-lists27 .owl-next span, .listIndex27 .block .slider-lists27 .owl-prev span {
    font-size: 2rem;
    line-height: 2rem;
  }
  .listIndex27 .block .slider-lists27 .owl-next {
    left: 0;
    right: auto;
  }
  .listIndex27 .pc1 .pc12 {
    height: 50%;
    border-radius: 10px;
  }
}

.listIndex28 {
  position: relative;
  padding: 1rem;
  margin: auto;
}
.listIndex28 .block {
  position: relative;
  z-index: 3;
}
.listIndex28 .block .title1 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  grid-gap: 0.5rem;
  text-align: center;
  padding: 1rem 0;
}
.listIndex28 .block .title1 .right {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem;
  font-size: 1.5rem;
  font-weight: 900;
  color: #000;
}
.listIndex28 .block .title1 .right .pic {
  display: grid;
  align-items: center;
}
.listIndex28 .block .title1 .right .pic img {
  width: 2rem;
  height: 2rem;
}
.listIndex28 .block .title1 a {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 1rem;
  font-weight: 700;
  color: var(--green-color);
}
.listIndex28 .block .title1 a i {
  display: grid;
  align-items: center;
}
.listIndex28 .block .title1 a i svg {
  width: 1.5rem;
  height: 1.5rem;
  fill: var(--green-color);
}
.listIndex28 .block .cats1 {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1rem;
}
.listIndex28 .block .cats1 .item {
  background: white;
  border-radius: 5rem;
  padding: 0.3rem 1rem;
  font-size: 0.8rem;
  font-weight: 500;
  color: #000;
}
.listIndex28 .block .slider-lists28 {
  display: grid;
}
.listIndex28 .block .slider-lists28 .owl-item {
  padding: 1rem 0.5rem;
}
.listIndex28 .block .slider-lists28 .item {
  display: grid;
}
.listIndex28 .block .slider-lists28 .item .pic {
  position: relative;
  transition: all 0.3s ease-in-out;
  border-radius: 15px;
  overflow: hidden;
  border: 1px solid #eee;
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.05);
  background: white;
}
.listIndex28 .block .slider-lists28 .item .pic img {
  height: 16rem;
  object-fit: cover;
  width: 100%;
}
.listIndex28 .block .slider-lists28 .item .pic .cover {
  position: absolute;
  inset: 0;
  background: white;
  opacity: 0;
  transition: all 0.2s ease-in-out;
}
.listIndex28 .block .slider-lists28 .item .pic .lottery {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  background: red;
  padding: 5px 10px;
  color: white;
  font-size: 0.7rem;
  font-weight: 700;
  border-radius: 5rem;
  box-shadow: 0 5px 5px rgba(0, 0, 0, 0.2);
}
.listIndex28 .block .slider-lists28 .item .des {
  overflow: hidden;
  padding: 0.5rem;
}
.listIndex28 .block .slider-lists28 .item .des .title {
  font-size: 0.85rem;
  font-weight: 500;
  color: #000;
  height: 3rem;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  text-overflow: ellipsis;
}
.listIndex28 .block .slider-lists28 .item .des .prices {
  margin-top: 0.5rem;
}
.listIndex28 .block .slider-lists28 .item .des .prices .offer {
  display: flex;
  justify-content: left;
  gap: 0.5rem;
}
.listIndex28 .block .slider-lists28 .item .des .prices .offer s {
  font-size: 0.8rem;
  font-weight: 300;
  color: #444;
}
.listIndex28 .block .slider-lists28 .item .des .prices .offer span {
  background: red;
  border-radius: 8px;
  font-weight: 900;
  color: white;
  display: grid;
  box-shadow: 0 0 10px rgba(255, 0, 0, 0.3);
  align-items: center;
  line-height: 0.7rem;
  padding: 2px 5px;
  font-size: 0.7rem;
}
.listIndex28 .block .slider-lists28 .item .des .prices .priceF {
  text-align: left;
  font-size: 1rem;
  font-weight: 900;
  color: black;
}
.listIndex28 .block .slider-lists28 .item .des .prices .priceF span {
  font-size: 0.6rem;
  opacity: 0.6;
}
.listIndex28 .block .slider-lists28 .item .des .content {
  display: grid;
  align-items: end;
  font-size: 0.95rem;
  font-weight: 900;
  color: #000;
  margin-top: 1rem;
}
.listIndex28 .block .slider-lists28 .item .des .content span {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
.listIndex28 .block .slider-lists28 .item:hover .pic .cover {
  opacity: 1;
}
.listIndex28 .block .slider-lists28 .owl-next, .listIndex28 .block .slider-lists28 .owl-prev {
  padding: 0.5rem;
  background: white !important;
  position: absolute;
  top: 0;
  bottom: 2rem;
  margin: auto;
  right: 1rem;
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  border: 2px solid #eee !important;
}
.listIndex28 .block .slider-lists28 .owl-next span, .listIndex28 .block .slider-lists28 .owl-prev span {
  font-size: 2rem;
  line-height: 2rem;
}
.listIndex28 .block .slider-lists28 .owl-next {
  left: 1rem;
  right: auto;
}
.listIndex28 .pc1 .pc12 {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  height: 50%;
  border-radius: 20px;
  z-index: 2;
}
@media screen and (max-width: 700px) {
  .listIndex28 {
    padding: 0.5rem;
  }
  .listIndex28 .block .title1 {
    padding: 0.5rem 0;
  }
  .listIndex28 .block .title1 .right {
    font-size: 1rem;
  }
  .listIndex28 .block .title1 .right .pic img {
    width: 1.5rem;
    height: 1.5rem;
  }
  .listIndex28 .block .title1 a {
    font-size: 0.8rem;
    padding: 0.3rem 0.5rem;
  }
  .listIndex28 .block .cats1 .item {
    border-radius: 5rem;
    font-size: 0.75rem;
    flex: 1 auto;
    text-align: center;
  }
  .listIndex28 .block .slider-lists28 .owl-item {
    padding: 0.5rem 0.3rem;
  }
  .listIndex28 .block .slider-lists28 .item {
    display: grid;
  }
  .listIndex28 .block .slider-lists28 .item .pic {
    padding: 0.5rem;
    border-radius: 10px;
  }
  .listIndex28 .block .slider-lists28 .item .pic img {
    height: 10rem;
  }
  .listIndex28 .block .slider-lists28 .item .pic .cover {
    inset: 0.5rem;
  }
  .listIndex28 .block .slider-lists28 .item .pic .lottery {
    display: none;
  }
  .listIndex28 .block .slider-lists28 .item .des {
    padding: 0.5rem;
  }
  .listIndex28 .block .slider-lists28 .item .des .title {
    font-size: 0.8rem;
  }
  .listIndex28 .block .slider-lists28 .item .des .prices .offer s {
    font-size: 0.7rem;
  }
  .listIndex28 .block .slider-lists28 .item .des .prices .offer span {
    font-size: 0.6rem;
  }
  .listIndex28 .block .slider-lists28 .item .des .prices .priceF {
    font-size: 0.9rem;
  }
  .listIndex28 .block .slider-lists28 .item .des .content {
    font-size: 0.9rem;
  }
  .listIndex28 .block .slider-lists28 .owl-next, .listIndex28 .block .slider-lists28 .owl-prev {
    padding: 0.3rem;
    bottom: 0;
    right: 0;
    width: 2.5rem;
    height: 2.5rem;
  }
  .listIndex28 .block .slider-lists28 .owl-next span, .listIndex28 .block .slider-lists28 .owl-prev span {
    font-size: 2rem;
    line-height: 2rem;
  }
  .listIndex28 .block .slider-lists28 .owl-next {
    left: 0;
    right: auto;
  }
  .listIndex28 .pc1 .pc12 {
    height: 50%;
    border-radius: 10px;
  }
}

.listIndex29 {
  position: relative;
  padding: 0.8rem;
  margin: auto;
  border: 2px solid #eee;
  border-radius: 20px;
}
.listIndex29 .block {
  position: relative;
  z-index: 3;
}
.listIndex29 .block .title1 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  grid-gap: 0.5rem;
  text-align: center;
  padding: 0.5rem 1rem;
  border-radius: 10px;
}
.listIndex29 .block .title1 .right {
  font-size: 1.3rem;
  font-weight: 900;
  color: white;
}
.listIndex29 .block .title1 a {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 1rem;
  font-weight: 700;
  color: white;
}
.listIndex29 .block .title1 a i {
  display: grid;
  align-items: center;
}
.listIndex29 .block .title1 a i svg {
  width: 1.2rem;
  height: 1.2rem;
  fill: white;
}
.listIndex29 .block .slider-lists29 {
  display: grid;
  margin-top: 1rem;
}
.listIndex29 .block .slider-lists29 .owl-item {
  padding: 0 0.5rem;
  border-left: 1px solid #eee;
}
.listIndex29 .block .slider-lists29 .item {
  display: grid;
  background: white;
  border-radius: 10px;
}
.listIndex29 .block .slider-lists29 .item .pic {
  position: relative;
  transition: all 0.3s ease-in-out;
  overflow: hidden;
}
.listIndex29 .block .slider-lists29 .item .pic img {
  height: 12rem;
  object-fit: contain;
  width: 100%;
}
.listIndex29 .block .slider-lists29 .item .pic .cover {
  position: absolute;
  inset: 0;
  background: white;
  opacity: 0;
  transition: all 0.2s ease-in-out;
}
.listIndex29 .block .slider-lists29 .item .pic .lottery {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  background: red;
  padding: 5px 10px;
  color: white;
  font-size: 0.7rem;
  font-weight: 700;
  border-radius: 5rem;
  box-shadow: 0 5px 5px rgba(0, 0, 0, 0.2);
}
.listIndex29 .block .slider-lists29 .item .des {
  overflow: hidden;
  padding: 0.5rem;
}
.listIndex29 .block .slider-lists29 .item .des .title {
  font-size: 0.85rem;
  font-weight: 500;
  color: #000;
  height: 3rem;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  text-overflow: ellipsis;
}
.listIndex29 .block .slider-lists29 .item .des .prices {
  margin-top: 1rem;
  display: grid;
  align-items: end;
  height: 3rem;
  text-align: left;
}
.listIndex29 .block .slider-lists29 .item .des .prices .offer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem;
}
.listIndex29 .block .slider-lists29 .item .des .prices .offer .priceF {
  text-align: left;
  font-size: 1rem;
  font-weight: 900;
  color: black;
}
.listIndex29 .block .slider-lists29 .item .des .prices .offer .priceF span {
  font-size: 0.6rem;
}
.listIndex29 .block .slider-lists29 .item .des .prices .offer .off {
  background: red;
  border-radius: 4px;
  font-weight: 900;
  color: white;
  display: grid;
  box-shadow: 0 0 10px rgba(255, 0, 0, 0.3);
  align-items: center;
  line-height: 0.7rem;
  padding: 0 5px;
  height: 20px;
  font-size: 0.7rem;
}
.listIndex29 .block .slider-lists29 .item .des .prices s {
  font-size: 0.8rem;
  font-weight: 700;
  color: #444;
  opacity: 0.7;
}
.listIndex29 .block .slider-lists29 .item .des .prices s span {
  font-weight: 900;
  font-size: 0.6rem;
}
.listIndex29 .block .slider-lists29 .item .des .content {
  display: grid;
  align-items: end;
  font-size: 0.95rem;
  font-weight: 900;
  color: #000;
  height: 3rem;
  margin-top: 1rem;
}
.listIndex29 .block .slider-lists29 .item .des .content span {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
.listIndex29 .block .slider-lists29 .item:hover .pic .cover {
  opacity: 1;
}
.listIndex29 .block .slider-lists29 .owl-next, .listIndex29 .block .slider-lists29 .owl-prev {
  padding: 0.5rem;
  background: white !important;
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto;
  right: 1rem;
  width: 2.3rem;
  height: 2.3rem;
  border-radius: 50%;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}
.listIndex29 .block .slider-lists29 .owl-next span, .listIndex29 .block .slider-lists29 .owl-prev span {
  font-size: 2.5rem;
  line-height: 2.5rem;
}
.listIndex29 .block .slider-lists29 .owl-next {
  left: 1rem;
  right: auto;
}
.listIndex29 .pc1 .pc12 {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  height: 50%;
  border-radius: 20px;
  z-index: 2;
}
@media screen and (max-width: 700px) {
  .listIndex29 {
    padding: 1rem 0.5rem;
    border-radius: 0;
    width: 100% !important;
    border-right: 0;
    border-left: 0;
  }
  .listIndex29 .block .title1 {
    padding: 0.5rem;
  }
  .listIndex29 .block .title1 .right {
    font-size: 1rem;
  }
  .listIndex29 .block .title1 a {
    font-size: 0.8rem;
    grid-gap: 0.1rem;
  }
  .listIndex29 .block .title1 a i svg {
    width: 0.9rem;
    height: 0.9rem;
  }
  .listIndex29 .block .slider-lists29 .owl-item {
    border-left: 1px solid #eee;
  }
  .listIndex29 .block .slider-lists29 .item {
    border-radius: 5px;
  }
  .listIndex29 .block .slider-lists29 .item .pic img {
    height: 10rem;
  }
  .listIndex29 .block .slider-lists29 .item .pic .lottery {
    top: 0.2rem;
    right: 0.2rem;
    padding: 5px;
  }
  .listIndex29 .block .slider-lists29 .item .des {
    padding: 0.3rem;
  }
  .listIndex29 .block .slider-lists29 .item .des .title {
    font-size: 0.8rem;
  }
  .listIndex29 .block .slider-lists29 .item .des .prices .offer .priceF {
    font-size: 0.85rem;
  }
  .listIndex29 .block .slider-lists29 .item .des .prices .offer .priceF span {
    font-size: 0.55rem;
  }
  .listIndex29 .block .slider-lists29 .item .des .prices .offer .off {
    height: 15px;
    font-size: 0.65rem;
  }
  .listIndex29 .block .slider-lists29 .item .des .prices s {
    font-size: 0.7rem;
  }
  .listIndex29 .block .slider-lists29 .item .des .prices s span {
    font-size: 0.55rem;
  }
  .listIndex29 .block .slider-lists29 .item .des .content {
    font-size: 0.85rem;
  }
  .listIndex29 .block .slider-lists29 .owl-next, .listIndex29 .block .slider-lists29 .owl-prev {
    padding: 0.3rem;
    right: 0;
    width: 2rem;
    height: 2rem;
  }
  .listIndex29 .block .slider-lists29 .owl-next span, .listIndex29 .block .slider-lists29 .owl-prev span {
    font-size: 2rem;
    line-height: 2rem;
  }
  .listIndex29 .block .slider-lists29 .owl-next {
    left: 0.5rem;
    right: auto;
  }
  .listIndex29 .pc1 .pc12 {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    height: 50%;
    border-radius: 20px;
    z-index: 2;
  }
}

.listIndex30 {
  position: relative;
  padding: 0.8rem;
  margin: auto;
  border: 1px solid rgb(145, 158, 188);
  border-radius: 20px;
}
.listIndex30 .block {
  position: relative;
  z-index: 3;
}
.listIndex30 .block .title1 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  grid-gap: 0.5rem;
  text-align: center;
  padding: 0.5rem 1rem;
  border-radius: 10px;
}
.listIndex30 .block .title1 .right {
  font-size: 1.3rem;
  font-weight: 900;
  color: #000;
}
.listIndex30 .block .title1 a {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 1rem;
  font-weight: 700;
  color: #000;
}
.listIndex30 .block .title1 a i {
  display: grid;
  align-items: center;
}
.listIndex30 .block .title1 a i svg {
  width: 1.2rem;
  height: 1.2rem;
  fill: #000;
}
.listIndex30 .block .slider-lists30 {
  display: grid;
  margin-top: 1rem;
}
.listIndex30 .block .slider-lists30 .owl-item {
  padding: 0 0.5rem;
  border-left: 1px solid #eee;
}
.listIndex30 .block .slider-lists30 .item {
  display: grid;
  background: white;
  border-radius: 10px;
}
.listIndex30 .block .slider-lists30 .item .pic {
  position: relative;
  transition: all 0.3s ease-in-out;
  overflow: hidden;
}
.listIndex30 .block .slider-lists30 .item .pic img {
  height: 12rem;
  object-fit: contain;
  width: 100%;
}
.listIndex30 .block .slider-lists30 .item .pic .cover {
  position: absolute;
  inset: 0;
  background: white;
  opacity: 0;
  transition: all 0.2s ease-in-out;
}
.listIndex30 .block .slider-lists30 .item .pic .lottery {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  background: red;
  padding: 5px 10px;
  color: white;
  font-size: 0.7rem;
  font-weight: 700;
  border-radius: 5rem;
  box-shadow: 0 5px 5px rgba(0, 0, 0, 0.2);
}
.listIndex30 .block .slider-lists30 .item .des {
  overflow: hidden;
  padding: 0.5rem;
}
.listIndex30 .block .slider-lists30 .item .des .title {
  font-size: 0.85rem;
  font-weight: 500;
  color: #000;
  height: 3rem;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  text-overflow: ellipsis;
}
.listIndex30 .block .slider-lists30 .item .des .prices {
  margin-top: 1rem;
  display: grid;
  align-items: end;
  text-align: left;
  height: 3rem;
}
.listIndex30 .block .slider-lists30 .item .des .prices .offer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem;
}
.listIndex30 .block .slider-lists30 .item .des .prices .offer .priceF {
  text-align: left;
  font-size: 1rem;
  font-weight: 900;
  color: black;
}
.listIndex30 .block .slider-lists30 .item .des .prices .offer .priceF span {
  font-size: 0.6rem;
}
.listIndex30 .block .slider-lists30 .item .des .prices .offer .off {
  background: red;
  border-radius: 4px;
  font-weight: 900;
  color: white;
  display: grid;
  box-shadow: 0 0 10px rgba(255, 0, 0, 0.3);
  align-items: center;
  line-height: 0.7rem;
  padding: 0 5px;
  height: 20px;
  font-size: 0.7rem;
}
.listIndex30 .block .slider-lists30 .item .des .prices s {
  font-size: 0.8rem;
  font-weight: 700;
  color: #444;
  opacity: 0.7;
}
.listIndex30 .block .slider-lists30 .item .des .prices s span {
  font-weight: 900;
  font-size: 0.6rem;
}
.listIndex30 .block .slider-lists30 .item .des .content {
  display: grid;
  align-items: end;
  font-size: 0.95rem;
  font-weight: 900;
  color: #000;
  margin-top: 1rem;
  height: 3rem;
}
.listIndex30 .block .slider-lists30 .item .des .content span {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
.listIndex30 .block .slider-lists30 .item:hover .pic .cover {
  opacity: 1;
}
.listIndex30 .block .slider-lists30 .owl-next, .listIndex30 .block .slider-lists30 .owl-prev {
  padding: 0.5rem;
  background: white !important;
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto;
  right: 1rem;
  width: 2.3rem;
  height: 2.3rem;
  border-radius: 50%;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}
.listIndex30 .block .slider-lists30 .owl-next span, .listIndex30 .block .slider-lists30 .owl-prev span {
  font-size: 2.5rem;
  line-height: 2.5rem;
}
.listIndex30 .block .slider-lists30 .owl-next {
  left: 1rem;
  right: auto;
}
.listIndex30 .pc1 .pc12 {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  height: 50%;
  border-radius: 20px;
  z-index: 2;
}
@media screen and (max-width: 700px) {
  .listIndex30 {
    padding: 1rem 0.5rem;
    border-radius: 0;
    width: 100% !important;
    border: 2px solid #eee;
    border-right: 0;
    border-left: 0;
  }
  .listIndex30 .block .title1 {
    padding: 0.5rem;
  }
  .listIndex30 .block .title1 .right {
    font-size: 1rem;
  }
  .listIndex30 .block .title1 a {
    font-size: 0.8rem;
    grid-gap: 0.1rem;
  }
  .listIndex30 .block .title1 a i svg {
    width: 0.9rem;
    height: 0.9rem;
  }
  .listIndex30 .block .slider-lists30 .owl-item {
    border-left: 1px solid #eee;
  }
  .listIndex30 .block .slider-lists30 .item {
    border-radius: 5px;
  }
  .listIndex30 .block .slider-lists30 .item .pic img {
    height: 10rem;
  }
  .listIndex30 .block .slider-lists30 .item .pic .lottery {
    top: 0.2rem;
    right: 0.2rem;
    padding: 5px;
  }
  .listIndex30 .block .slider-lists30 .item .des {
    padding: 0.3rem;
  }
  .listIndex30 .block .slider-lists30 .item .des .title {
    font-size: 0.8rem;
  }
  .listIndex30 .block .slider-lists30 .item .des .prices .offer .priceF {
    font-size: 0.85rem;
  }
  .listIndex30 .block .slider-lists30 .item .des .prices .offer .priceF span {
    font-size: 0.55rem;
  }
  .listIndex30 .block .slider-lists30 .item .des .prices .offer .off {
    height: 15px;
    font-size: 0.65rem;
  }
  .listIndex30 .block .slider-lists30 .item .des .prices s {
    font-size: 0.7rem;
  }
  .listIndex30 .block .slider-lists30 .item .des .prices s span {
    font-size: 0.55rem;
  }
  .listIndex30 .block .slider-lists30 .item .des .content {
    font-size: 0.85rem;
  }
  .listIndex30 .block .slider-lists30 .owl-next, .listIndex30 .block .slider-lists30 .owl-prev {
    padding: 0.3rem;
    right: 0;
    width: 2rem;
    height: 2rem;
  }
  .listIndex30 .block .slider-lists30 .owl-next span, .listIndex30 .block .slider-lists30 .owl-prev span {
    font-size: 2rem;
    line-height: 2rem;
  }
  .listIndex30 .block .slider-lists30 .owl-next {
    left: 0.5rem;
    right: auto;
  }
  .listIndex30 .pc1 .pc12 {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    height: 50%;
    border-radius: 20px;
    z-index: 2;
  }
}

.allStoryIndex5 {
  margin: auto;
  border: 1px solid #eee;
  padding: 1.5rem;
  border-radius: 15px;
}
.allStoryIndex5 .stories .title1 .name {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 1.1rem;
  font-weight: 900;
  color: #000;
}
.allStoryIndex5 .stories .title1 .name i {
  display: grid;
  align-items: center;
}
.allStoryIndex5 .stories .title1 .name i svg {
  width: 1.5rem;
  height: 1.5rem;
  fill: var(--green-color);
}
.allStoryIndex5 .stories .stories-row5 {
  align-items: center;
  margin-top: 1rem;
}
.allStoryIndex5 .stories .stories-row5 .story-item {
  text-align: center;
  cursor: pointer;
  position: relative;
  border-radius: 10px;
  overflow: hidden;
}
.allStoryIndex5 .stories .stories-row5 .story-item .story-thumb {
  height: 22rem;
  overflow: hidden;
  background: white;
  display: flex;
  align-items: center;
  justify-content: center;
}
.allStoryIndex5 .stories .stories-row5 .story-item .story-thumb .story-pic {
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.allStoryIndex5 .stories .stories-row5 .story-item .story-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.allStoryIndex5 .stories .stories-row5 .story-item .user1 {
  position: absolute;
  bottom: 0;
  right: 0;
  left: 0;
  padding: 0.5rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.8rem;
  font-weight: 700;
  color: white;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.5));
}
.allStoryIndex5 .stories .stories-row5 .story-item .user1 img {
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  object-fit: cover;
}
.allStoryIndex5 .stories .stories-row5 .story-item .story-i {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  display: grid;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  height: 1.5rem;
  width: 1.5rem;
}
.allStoryIndex5 .stories .stories-row5 .story-item .story-i svg {
  width: 1.5rem;
  height: 1.5rem;
  fill: white;
}
.allStoryIndex5 .stories .stories-row5 .owl-nav {
  display: block !important;
}
.allStoryIndex5 .stories .stories-row5 .owl-nav .owl-next, .allStoryIndex5 .stories .stories-row5 .owl-nav .owl-prev {
  padding: 0.5rem;
  background: white !important;
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto;
  right: -3rem;
  border: 2px solid #eee !important;
  font-size: 1.5rem !important;
  border-radius: 5px;
  color: #000 !important;
  height: 2.6rem;
  display: grid;
  align-items: center;
  justify-content: center;
  width: 2.6rem;
}
.allStoryIndex5 .stories .stories-row5 .owl-nav .owl-next span, .allStoryIndex5 .stories .stories-row5 .owl-nav .owl-prev span {
  font-size: 2.6rem;
  line-height: 1rem;
}
.allStoryIndex5 .stories .stories-row5 .owl-nav .owl-next {
  left: -3rem;
  right: auto;
}
.allStoryIndex5 .stories .next .name {
  font-size: 1rem;
  font-weight: 500;
  color: #000;
}
.allStoryIndex5 .stories .next .more {
  display: flex;
  gap: 0.5rem;
  justify-content: right;
  align-items: center;
  font-size: 0.95rem;
  font-weight: 900;
  color: var(--green-color);
  margin-top: 0.5rem;
}
.allStoryIndex5 .stories .next .more i {
  display: grid;
  align-items: center;
}
.allStoryIndex5 .stories .next .more i svg {
  width: 1.5rem;
  height: 1.5rem;
  fill: var(--green-color);
}
.allStoryIndex5 .nav-btn {
  background: #111;
  color: white;
  border: none;
  padding: 8px 10px;
  border-radius: 8px;
  cursor: pointer;
  margin: 0 6px;
}
.allStoryIndex5 .story-viewer {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.85);
  display: none;
  z-index: 9999;
}
.allStoryIndex5 .viewer-inner {
  width: 420px;
  max-width: 98%;
  height: 720px;
  max-height: 92%;
  background: #000;
  border-radius: 12px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
.allStoryIndex5 .viewer-header {
  padding: 10px;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 8px;
  align-items: center;
}
.allStoryIndex5 .progresses {
  flex: 1;
  display: flex;
  gap: 6px;
}
.allStoryIndex5 .progress {
  height: 4px;
  background: rgba(255, 255, 255, 0.25);
  flex: 1;
  border-radius: 2px;
  overflow: hidden;
}
.allStoryIndex5 .progress > i {
  display: block;
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, #fff, #ddd);
}
.allStoryIndex5 .viewer-meta {
  display: flex;
  gap: 10px;
  align-items: center;
}
.allStoryIndex5 .viewer-meta img {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
}
.allStoryIndex5 .viewer-meta .name {
  font-size: 1rem;
  font-weight: 700;
  color: white;
}
.allStoryIndex5 .viewer-body {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.allStoryIndex5 .viewer-body img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}
.allStoryIndex5 .viewer-body video {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}
.allStoryIndex5 .viewer-controls {
  padding: 10px;
  display: flex;
  justify-content: center;
  gap: 8px;
  position: absolute;
  bottom: 1rem;
  right: 0;
  left: 0;
  z-index: 10;
}
.allStoryIndex5 .viewer-controls button {
  background: white;
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #000;
  padding: 6px 10px;
  border-radius: 8px;
  cursor: pointer;
}
@media screen and (max-width: 1000px) {
  .allStoryIndex5 {
    width: 100% !important;
    border-right: 0;
    border-left: 0;
    border-radius: 0;
    padding: 1rem 0.5rem;
  }
  .allStoryIndex5 .stories .title1 .name {
    font-size: 1rem;
  }
  .allStoryIndex5 .stories .title1 .name i svg {
    width: 1.3rem;
    height: 1.3rem;
  }
  .allStoryIndex5 .stories .stories-row5 .story-item .story-thumb {
    height: 18rem;
  }
  .allStoryIndex5 .stories .stories-row5 .story-item .user1 {
    padding: 0.4rem;
    gap: 0.2rem;
    font-size: 0.7rem;
  }
  .allStoryIndex5 .stories .stories-row5 .story-item .user1 img {
    width: 1.5rem;
    height: 1.5rem;
  }
  .allStoryIndex5 .stories .stories-row5 .owl-nav {
    display: none !important;
  }
  .allStoryIndex5 .viewer-inner {
    width: 100%;
    max-width: 100%;
    height: 100%;
    max-height: 100%;
    left: auto;
    top: auto;
    inset: 0;
    transform: unset;
  }
}

.AllAboutIndex2 {
  margin: auto;
  display: grid;
  grid-gap: 3rem;
  grid-template-columns: 1.5fr 1fr;
}
.AllAboutIndex2 .right .title {
  position: relative;
  margin-bottom: 2rem;
}
.AllAboutIndex2 .right .title .nameEn {
  font-size: 0.95rem;
  font-weight: 700;
  opacity: 0.5;
  color: #444;
}
.AllAboutIndex2 .right .title .name {
  font-size: 1.5rem;
  font-weight: 900;
  color: #000;
}
.AllAboutIndex2 .right .title .name span {
  color: var(--green-color);
}
.AllAboutIndex2 .right .title:before {
  content: "";
  position: absolute;
  bottom: -0.5rem;
  width: 3rem;
  background: var(--green-color);
  height: 3px;
}
.AllAboutIndex2 .right p {
  font-size: 0.9rem;
  font-weight: 500;
  color: #444;
  text-align: justify;
  margin-bottom: 1rem;
}
.AllAboutIndex2 .right .button {
  display: grid;
  justify-content: right;
}
.AllAboutIndex2 .right .button a {
  padding: 0.5rem 2rem;
  border-radius: 5px;
  background: var(--green-color);
  color: white;
  font-size: 0.9rem;
  font-weight: 500;
}
.AllAboutIndex2 .left .titles {
  margin: auto;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  margin-bottom: 2rem;
}
.AllAboutIndex2 .left .titles .title {
  position: relative;
}
.AllAboutIndex2 .left .titles .title .nameEn {
  font-size: 0.95rem;
  font-weight: 700;
  opacity: 0.5;
  color: #444;
}
.AllAboutIndex2 .left .titles .title .name {
  font-size: 1.5rem;
  font-weight: 900;
  color: #000;
}
.AllAboutIndex2 .left .titles .title .name span {
  color: var(--green-color);
}
.AllAboutIndex2 .left .titles .title:before {
  content: "";
  position: absolute;
  bottom: -0.5rem;
  width: 3rem;
  background: var(--green-color);
  height: 3px;
}
.AllAboutIndex2 .left .titles a {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: #444;
  font-size: 1rem;
  font-weight: 500;
  opacity: 0.8;
}
.AllAboutIndex2 .left .titles a i {
  display: grid;
  align-items: center;
}
.AllAboutIndex2 .left .titles a i svg {
  width: 1.3rem;
  height: 1.3rem;
  color: #444;
}
.AllAboutIndex2 .left .slider-about2 {
  display: grid;
}
.AllAboutIndex2 .left .slider-about2 .owl-item {
  padding-right: 1px;
}
.AllAboutIndex2 .left .slider-about2 .item {
  border: 1px solid #eee;
  border-radius: 15px;
  background: white;
}
.AllAboutIndex2 .left .slider-about2 .item .pic img {
  height: 10rem;
  object-fit: cover;
  border-radius: 15px;
}
.AllAboutIndex2 .left .slider-about2 .item .des {
  padding: 0.5rem;
}
.AllAboutIndex2 .left .slider-about2 .item .name {
  font-size: 0.9rem;
  font-weight: 700;
  color: #444;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  text-overflow: ellipsis;
  margin-bottom: 1rem;
}
.AllAboutIndex2 .left .slider-about2 .item .time {
  font-size: 0.75rem;
  font-weight: 500;
  color: #444;
  opacity: 0.7;
  text-align: center;
}
.AllAboutIndex2 .left .slider-about2 .item .more {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
  color: var(--green-color);
  font-size: 0.85rem;
  font-weight: 500;
  margin-top: 1rem;
}
.AllAboutIndex2 .left .slider-about2 .item .more i {
  display: grid;
  align-items: center;
}
.AllAboutIndex2 .left .slider-about2 .item .more i svg {
  color: var(--green-color);
  width: 1.3rem;
  height: 1.3rem;
}
@media screen and (max-width: 1000px) {
  .AllAboutIndex2 {
    display: block;
  }
  .AllAboutIndex2 .right {
    width: 100%;
    margin-bottom: 2rem;
  }
  .AllAboutIndex2 .right .title .nameEn {
    font-size: 0.8rem;
  }
  .AllAboutIndex2 .right .title .name {
    font-size: 1.2rem;
  }
  .AllAboutIndex2 .right .title:before {
    width: 3rem;
    height: 1px;
  }
  .AllAboutIndex2 .right .button a {
    padding: 0.5rem 1rem;
    font-size: 0.8rem;
  }
  .AllAboutIndex2 .left .titles {
    margin-bottom: 1rem;
  }
  .AllAboutIndex2 .left .titles .title .nameEn {
    font-size: 0.8rem;
  }
  .AllAboutIndex2 .left .titles .title .name {
    font-size: 1.2rem;
  }
  .AllAboutIndex2 .left .titles .title:before {
    width: 3rem;
    height: 1px;
  }
  .AllAboutIndex2 .left .titles a {
    font-size: 0.9rem;
  }
  .AllAboutIndex2 .left .titles a i svg {
    width: 1rem;
    height: 1rem;
  }
  .AllAboutIndex2 .left .slider-about2 .item {
    border-radius: 10px;
  }
  .AllAboutIndex2 .left .slider-about2 .item .pic img {
    height: 8rem;
    border-radius: 10px;
  }
  .AllAboutIndex2 .left .slider-about2 .item .name {
    font-size: 0.8rem;
    margin-bottom: 0.5rem;
  }
  .AllAboutIndex2 .left .slider-about2 .item .time {
    font-size: 0.7rem;
  }
  .AllAboutIndex2 .left .slider-about2 .item .more {
    font-size: 0.75rem;
    margin-top: 0.5rem;
  }
  .AllAboutIndex2 .left .slider-about2 .item .more i svg {
    width: 1rem;
    height: 1rem;
  }
}

.brandIndex {
  background: white;
  border-radius: 20px;
  margin: auto;
  overflow: hidden;
  border: 1px solid #eee;
}
.brandIndex .title1 {
  font-size: 1.5rem;
  font-weight: 900;
  color: #444;
  text-align: center;
  padding: 1rem;
  border-bottom: 1px solid #eee;
}
.brandIndex .slider-brand .item {
  padding: 1rem;
  border-left: 1px solid #eee;
}
.brandIndex .slider-brand .item .pic img {
  height: 8rem;
  width: 100%;
  object-fit: contain;
}
.brandIndex .slider-brand .owl-next, .brandIndex .slider-brand .owl-prev {
  padding: 0.5rem;
  background: white !important;
  position: absolute;
  top: 0;
  bottom: 2rem;
  margin: auto;
  right: 1rem;
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  border: 2px solid #eee !important;
}
.brandIndex .slider-brand .owl-next span, .brandIndex .slider-brand .owl-prev span {
  font-size: 2rem;
  line-height: 2rem;
}
.brandIndex .slider-brand .owl-next {
  left: 1rem;
  right: auto;
}
@media screen and (max-width: 700px) {
  .brandIndex {
    border-radius: 10px;
  }
  .brandIndex .title1 {
    font-size: 1rem;
    padding: 0.5rem;
  }
  .brandIndex .slider-brand .item {
    padding: 0.5rem;
  }
  .brandIndex .slider-brand .item .pic img {
    height: 6rem;
  }
  .brandIndex .slider-brand .owl-next, .brandIndex .slider-brand .owl-prev {
    right: 0;
    width: 2rem;
    height: 2rem;
  }
  .brandIndex .slider-brand .owl-next span, .brandIndex .slider-brand .owl-prev span {
    font-size: 1.3rem;
    line-height: 1.3rem;
  }
  .brandIndex .slider-brand .owl-next {
    left: 0;
    right: auto;
  }
}

.brandIndex2 {
  background: white;
  border-radius: 20px;
  margin: auto;
  overflow: hidden;
}
.brandIndex2 .titles {
  display: grid;
  justify-content: right;
  padding: 1rem;
  border-bottom: 1px solid #eee;
}
.brandIndex2 .titles .title1 {
  font-size: 1.3rem;
  font-weight: 900;
  color: #000;
  position: relative;
}
.brandIndex2 .titles .title1 span {
  position: relative;
  z-index: 2;
}
.brandIndex2 .titles .title1:before {
  content: "";
  width: 100%;
  height: 6px;
  background: var(--green-color);
  opacity: 0.3;
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  margin: auto;
  z-index: 1;
  display: grid;
}
.brandIndex2 .slider-brand2 .owl-stage-outer {
  padding: 1rem;
}
.brandIndex2 .slider-brand2 .item {
  padding: 1rem;
  border-radius: 10px;
  border: 1px solid #eee;
}
.brandIndex2 .slider-brand2 .item .pic img {
  height: 6rem;
  width: 100%;
  object-fit: contain;
}
.brandIndex2 .slider-brand2 .item .name {
  font-size: 0.9rem;
  font-weight: 500;
  color: #000;
  text-align: center;
  margin: 0.5rem 0;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
.brandIndex2 .slider-brand2 .item .count {
  display: grid;
  justify-content: center;
}
.brandIndex2 .slider-brand2 .item .count span {
  background: var(--green-color);
  padding: 0.2rem 0.5rem;
  border-radius: 5rem;
  color: white;
}
.brandIndex2 .slider-brand2 .owl-next, .brandIndex2 .slider-brand2 .owl-prev {
  padding: 0.5rem;
  background: white !important;
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto;
  right: 0.5rem;
  width: 2.5rem;
  border: 2px solid black !important;
  font-size: 1.5rem !important;
  border-radius: 50%;
  color: black !important;
  height: 2.5rem;
  transition: all 0.3s ease-in-out;
}
.brandIndex2 .slider-brand2 .owl-next:hover, .brandIndex2 .slider-brand2 .owl-prev:hover {
  background: black !important;
  color: white !important;
}
.brandIndex2 .slider-brand2 .owl-next {
  left: 0.5rem;
  right: auto;
}
@media screen and (max-width: 700px) {
  .brandIndex2 .slider-brand2 .owl-stage-outer {
    padding: 0;
  }
  .brandIndex2 .slider-brand2 .item {
    border-radius: 0;
    border-top: 0;
    border-right: 0;
    border-bottom: 0;
  }
  .brandIndex2 .slider-brand2 .owl-next, .brandIndex2 .slider-brand2 .owl-prev {
    padding: 0.5rem;
    background: white !important;
    position: absolute;
    top: 0;
    bottom: 0;
    margin: auto;
    right: 0.5rem;
    width: 2.5rem;
    border: 2px solid black !important;
    font-size: 1.5rem !important;
    border-radius: 50%;
    color: black !important;
    height: 2.5rem;
    transition: all 0.3s ease-in-out;
  }
  .brandIndex2 .slider-brand2 .owl-next:hover, .brandIndex2 .slider-brand2 .owl-prev:hover {
    background: black !important;
    color: white !important;
  }
  .brandIndex2 .slider-brand2 .owl-next {
    left: 0.5rem;
    right: auto;
  }
}

.brandIndex3 {
  margin: auto;
}
.brandIndex3 .titles {
  display: grid;
  justify-content: right;
}
.brandIndex3 .titles .title1 {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  font-size: 1.5rem;
  font-weight: 900;
  color: #000;
  position: relative;
}
.brandIndex3 .titles .title1:before {
  width: 5px;
  height: 30px;
  display: grid;
  background: linear-gradient(var(--green-color), var(--back1-color));
  border-radius: 5px;
  content: "";
  box-shadow: 5px 0 17px var(--green-color);
}
.brandIndex3 .slider-brand3 {
  border: 1px solid #eee;
  box-shadow: 0 4px 16px 0 rgba(36, 43, 61, 0.1);
  background: white;
  margin-top: 1rem;
  border-radius: 15px;
}
.brandIndex3 .slider-brand3 .item a {
  padding: 1rem;
  border-left: 1px solid #eee;
  display: grid;
}
.brandIndex3 .slider-brand3 .item a .pic {
  display: grid;
  justify-content: center;
}
.brandIndex3 .slider-brand3 .item a .pic img {
  height: 4rem;
  object-fit: contain;
}
.brandIndex3 .slider-brand3 .item a .name {
  font-size: 1rem;
  font-weight: 900;
  color: #000;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  margin-top: 1rem;
}
.brandIndex3 .slider-brand3 .item a .count {
  display: grid;
  justify-content: center;
  margin-top: 0.5rem;
}
.brandIndex3 .slider-brand3 .item a .count span {
  padding: 0.2rem 0.7rem;
  color: #444;
  background: #eee;
  font-size: 0.75rem;
  font-weight: 700;
  border-radius: 5rem;
}
.brandIndex3 .slider-brand3 .owl-nav {
  position: absolute;
  top: -3.5rem;
  left: 0;
  display: flex;
  gap: 0.5rem;
}
.brandIndex3 .slider-brand3 .owl-nav .owl-prev, .brandIndex3 .slider-brand3 .owl-nav .owl-next {
  width: 2.5rem;
  height: 2.5rem;
  display: grid;
  border: 1.5px solid var(--green-color);
  border-radius: 50%;
  align-items: center;
  font-size: 1.5rem;
  background: transparent;
  transition: all 0.3s ease-in-out;
}
.brandIndex3 .slider-brand3 .owl-nav .owl-prev span, .brandIndex3 .slider-brand3 .owl-nav .owl-next span {
  line-height: 1px;
  color: var(--green-color);
}
.brandIndex3 .slider-brand3 .owl-nav .owl-prev:hover, .brandIndex3 .slider-brand3 .owl-nav .owl-next:hover {
  background: var(--green-color);
}
.brandIndex3 .slider-brand3 .owl-nav .owl-prev:hover span, .brandIndex3 .slider-brand3 .owl-nav .owl-next:hover span {
  color: white;
}
@media screen and (max-width: 700px) {
  .brandIndex3 .titles .title1 {
    font-size: 1.2rem;
  }
  .brandIndex3 .titles .title1:before {
    height: 20px;
  }
  .brandIndex3 .slider-brand3 .item a {
    padding: 0.5rem;
  }
  .brandIndex3 .slider-brand3 .item a .pic img {
    height: 4rem;
  }
  .brandIndex3 .slider-brand3 .item a .name {
    font-size: 0.85rem;
    margin-top: 0.5rem;
  }
  .brandIndex3 .slider-brand3 .item a .count span {
    padding: 0.2rem 0.5rem;
    font-size: 0.7rem;
  }
  .brandIndex3 .slider-brand3 .owl-nav {
    top: -2.6rem;
  }
  .brandIndex3 .slider-brand3 .owl-nav .owl-prev, .brandIndex3 .slider-brand3 .owl-nav .owl-next {
    width: 1.7rem;
    height: 1.7rem;
    font-size: 0.9rem;
  }
}

.brandIndex4 .title {
  position: relative;
  margin: auto;
}
.brandIndex4 .title .nameEn {
  font-size: 0.95rem;
  font-weight: 700;
  opacity: 0.5;
  color: #444;
}
.brandIndex4 .title .name {
  font-size: 1.5rem;
  font-weight: 900;
  color: #000;
}
.brandIndex4 .title .name span {
  color: var(--green-color);
}
.brandIndex4 .title:before {
  content: "";
  position: absolute;
  bottom: -0.5rem;
  width: 3rem;
  background: var(--green-color);
  height: 3px;
}
.brandIndex4 .brands {
  margin: auto;
  margin-top: 2rem;
}
.brandIndex4 .brands .slider-brand4 {
  margin: auto;
}
.brandIndex4 .brands .slider-brand4 .item a {
  display: grid;
  background: white;
  border: 1px solid #eee;
  border-radius: 10px;
  padding: 0.5rem;
}
.brandIndex4 .brands .slider-brand4 .item a .pic {
  display: grid;
  justify-content: center;
}
.brandIndex4 .brands .slider-brand4 .item a .pic img {
  height: 4rem;
  object-fit: contain;
}
.brandIndex4 .brands .slider-brand4 .item a .name {
  font-size: 1rem;
  font-weight: 900;
  color: #000;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  margin-top: 1rem;
}
.brandIndex4 .brands .slider-brand4 .item a .count {
  display: grid;
  justify-content: center;
  margin-top: 0.5rem;
}
.brandIndex4 .brands .slider-brand4 .item a .count span {
  padding: 0.2rem 0.7rem;
  color: white;
  background: var(--green-color);
  font-size: 0.75rem;
  font-weight: 700;
  border-radius: 5rem;
}
@media screen and (max-width: 1000px) {
  .brandIndex4 .title .nameEn {
    font-size: 0.8rem;
  }
  .brandIndex4 .title .name {
    font-size: 1.2rem;
  }
  .brandIndex4 .title:before {
    width: 3rem;
    height: 1px;
  }
  .brandIndex4 .brands {
    margin-top: 1rem;
  }
}

.brandIndex5 {
  margin: auto;
}
.brandIndex5 .title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 1.5rem;
  font-weight: 900;
  color: #000;
  margin-bottom: 1rem;
}
.brandIndex5 .title .pic {
  display: grid;
  align-items: center;
}
.brandIndex5 .title .pic img {
  height: 2rem;
  width: 2rem;
}
.brandIndex5 .items {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(25rem, 1fr));
  grid-gap: 0.5rem;
}
.brandIndex5 .items .item a .pic img {
  border-radius: 10px;
  height: 100%;
  width: 100%;
  object-fit: cover;
}
@media screen and (max-width: 1000px) {
  .brandIndex5 .title {
    font-size: 1.2rem;
  }
  .brandIndex5 .title .pic img {
    height: 1.5rem;
    width: 1.5rem;
  }
  .brandIndex5 .items {
    grid-template-columns: 1fr 1fr;
  }
}

.brandIndex6 {
  margin: auto;
}
.brandIndex6 .title {
  text-align: center;
  font-size: 1.5rem;
  font-weight: 900;
  color: #000;
  margin-bottom: 1rem;
}
.brandIndex6 .items {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  grid-gap: 1rem;
}
.brandIndex6 .items .item a {
  display: grid;
  justify-content: center;
}
.brandIndex6 .items .item a .pic img {
  border-radius: 10px;
  height: 100%;
  width: 100%;
  object-fit: cover;
}
.brandIndex6 .items .item a span {
  font-size: 1rem;
  font-weight: 700;
  text-align: center;
  color: #000;
}
@media screen and (max-width: 1000px) {
  .brandIndex6 .title {
    font-size: 1rem;
  }
  .brandIndex6 .items {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 1rem;
  }
  .brandIndex6 .items .item a span {
    font-size: 0.85rem;
    font-weight: 500;
  }
}

.linkIndex {
  margin: auto;
}
.linkIndex ul {
  display: flex;
  justify-content: center;
  gap: 1rem;
}
.linkIndex ul li {
  flex: 1 auto;
}
.linkIndex ul li .pic img {
  height: 100%;
  width: 100%;
  object-fit: contain;
}
.linkIndex ul li .name {
  font-size: 0.7rem;
  font-weight: 700;
  color: #000;
  text-align: center;
  margin-top: 0.5rem;
}
@media screen and (max-width: 1000px) {
  .linkIndex ul {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.5rem;
  }
  .linkIndex ul li {
    flex: unset;
  }
}

.linkIndex2 {
  margin: auto;
}
.linkIndex2 ul {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
  gap: 1rem;
}
.linkIndex2 ul li a {
  display: grid;
  border-radius: 15px;
  border: 1px solid #eee;
  box-shadow: 3px 3px 6px 0px rgba(0, 0, 0, 0.08);
  padding: 1rem;
  background: white;
  transition: all 0.3s ease-in-out;
}
.linkIndex2 ul li a .pic img {
  height: 7rem;
  width: 100%;
  object-fit: contain;
}
.linkIndex2 ul li a:hover .pic {
  animation: ringAnim 5s ease-in-out infinite;
}
@media screen and (max-width: 1000px) {
  .linkIndex2 ul {
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
  }
  .linkIndex2 ul li a {
    border-radius: 10px;
    padding: 0.5rem;
  }
  .linkIndex2 ul li a .pic img {
    height: 5rem;
  }
}

.bestIndex {
  background: white;
  border-radius: 10px;
  margin: auto;
  overflow: hidden;
}
.bestIndex .bestTitle {
  display: grid;
  grid-template-columns: auto auto;
  justify-content: center;
  align-items: center;
  grid-gap: 0.5rem;
  font-size: 1.3rem;
  font-weight: 700;
  opacity: 0.8;
  margin-top: 1rem;
  color: #000;
}
.bestIndex .bestTitle svg {
  width: 1.8rem;
  height: 1.8rem;
  fill: #000;
}
.bestIndex .slider-bestIndex {
  padding: 1rem;
}
.bestIndex .slider-bestIndex .owl-carousel.owl-loaded {
  display: grid !important;
}
.bestIndex .slider-bestIndex button.owl-prev {
  position: absolute;
  right: 1rem;
  top: 0;
  bottom: 0;
}
.bestIndex .slider-bestIndex button.owl-prev span {
  font-size: 2.5rem;
}
.bestIndex .slider-bestIndex button.owl-next {
  position: absolute;
  left: 1rem;
  top: 0;
  bottom: 0;
}
.bestIndex .slider-bestIndex button.owl-next span {
  font-size: 2.5rem;
}
.bestIndex .slider-bestIndex .owl-dots {
  position: absolute;
}
.bestIndex .slider-bestIndex .bestItems a {
  display: grid;
  border-radius: 10px;
  background: var(--green-color);
  margin-top: 1rem;
  overflow: hidden;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
.bestIndex .slider-bestIndex .bestItems a article {
  display: grid;
  grid-template-columns: auto 1fr;
}
.bestIndex .slider-bestIndex .bestItems a article .pic {
  display: grid;
  align-items: center;
  background: white;
}
.bestIndex .slider-bestIndex .bestItems a article .pic img {
  width: 6.5rem;
  height: 6.5rem;
  object-fit: contain;
}
.bestIndex .slider-bestIndex .bestItems a article .content {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem;
}
.bestIndex .slider-bestIndex .bestItems a article .num {
  color: #00bfd6;
  font-size: 2.5rem;
  font-weight: 900;
}
.bestIndex .slider-bestIndex .bestItems a article .name1 {
  color: white;
  font-size: 1rem;
  font-weight: 500;
  line-height: 2rem;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}
.bestIndex .slider-bestIndex .bestItems a:last-child {
  border-bottom: 0;
}
@media screen and (max-width: 800px) {
  .bestIndex .bestTitle {
    font-size: 0.9rem;
  }
  .bestIndex .bestTitle svg {
    width: 1rem;
    height: 1rem;
  }
  .bestIndex .slider-bestIndex {
    padding: 0.5rem;
  }
  .bestIndex .slider-bestIndex button.owl-prev span {
    font-size: 2rem;
  }
  .bestIndex .slider-bestIndex button.owl-next span {
    font-size: 2rem;
  }
  .bestIndex .slider-bestIndex .bestItems a {
    margin-top: 0.5rem;
  }
  .bestIndex .slider-bestIndex .bestItems a article .pic img {
    width: 5rem;
    height: 5rem;
  }
  .bestIndex .slider-bestIndex .bestItems a article .content {
    gap: 0.5rem;
    padding: 0.5rem;
  }
  .bestIndex .slider-bestIndex .bestItems a article .num {
    color: #00bfd6;
    font-size: 1.5rem;
  }
  .bestIndex .slider-bestIndex .bestItems a article .name1 {
    font-size: 0.8rem;
  }
}

.stairAd {
  position: relative;
}
.stairAd .block {
  margin: auto;
  border-radius: 20px;
  padding: 1rem 0;
  position: relative;
  overflow: hidden;
}
.stairAd .block .title1 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
  z-index: 2;
  margin-bottom: 1rem;
}
.stairAd .block .title1 .name {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: white;
  font-size: 1.3rem;
  font-weight: 700;
}
.stairAd .block .title1 .name i {
  display: grid;
  align-items: center;
}
.stairAd .block .title1 .name i svg {
  width: 1.5rem;
  height: 1.5rem;
  fill: white;
}
.stairAd .block .title1 a {
  background: white;
  color: #000;
  padding: 0.3rem 1rem;
  font-size: 1rem;
  font-weight: 500;
  border-radius: 5px;
}
.stairAd .block .slider-ad .item {
  border-radius: 20px;
  display: grid;
  overflow: hidden;
  box-shadow: 0 5px 5px rgba(0, 0, 0, 0.03);
  background: white;
}
.stairAd .block .slider-ad .item .pic {
  position: relative;
  transition: all 0.3s ease-in-out;
  padding: 0.5rem;
}
.stairAd .block .slider-ad .item .pic img {
  height: 15rem;
  object-fit: contain;
  width: 100%;
}
.stairAd .block .slider-ad .item .pic .cover {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  background: white;
  opacity: 0;
  transition: all 0.2s ease-in-out;
}
.stairAd .block .slider-ad .item .pic .lottery {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  background: red;
  padding: 5px 10px;
  color: white;
  font-size: 0.7rem;
  font-weight: 700;
  border-radius: 5rem;
  box-shadow: 0 5px 5px rgba(0, 0, 0, 0.2);
}
.stairAd .block .slider-ad .item .des {
  overflow: hidden;
  padding: 0.5rem;
}
.stairAd .block .slider-ad .item .des .title {
  font-size: 1rem;
  font-weight: 700;
  color: #444;
  height: 3rem;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  text-overflow: ellipsis;
}
.stairAd .block .slider-ad .item .des .prices {
  margin-top: 1rem;
  height: 4rem;
}
.stairAd .block .slider-ad .item .des .prices .offer {
  display: flex;
  align-items: center;
  justify-content: left;
  gap: 0.5rem;
}
.stairAd .block .slider-ad .item .des .prices .offer s {
  font-size: 0.8rem;
  font-weight: 300;
  color: #444;
}
.stairAd .block .slider-ad .item .des .prices .offer .off {
  position: relative;
}
.stairAd .block .slider-ad .item .des .prices .offer .off i {
  display: grid;
  align-items: center;
  animation: shine 3s ease-in-out infinite;
  width: 2.2rem;
  height: 2.2rem;
}
@keyframes shine {
  0% {
    transform: rotate(0deg);
  }
  50% {
    transform: rotate(360deg);
  }
  100% {
    transform: rotate(0);
  }
}
.stairAd .block .slider-ad .item .des .prices .offer .off i svg {
  width: 2.2rem;
  height: 2.2rem;
  fill: red;
}
.stairAd .block .slider-ad .item .des .prices .offer .off span {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  font-size: 0.8rem;
  font-weight: 500;
  color: white;
  margin: auto;
  display: grid;
  align-items: center;
  justify-content: center;
  z-index: 2;
}
.stairAd .block .slider-ad .item .des .prices .priceF {
  text-align: left;
  font-size: 1.2rem;
  font-weight: 700;
  color: black;
}
.stairAd .block .slider-ad .item .des .prices .priceF span {
  font-size: 0.8rem;
  opacity: 0.7;
}
.stairAd .block .slider-ad .item .des .content {
  display: grid;
  align-items: end;
  font-size: 0.95rem;
  font-weight: 900;
  color: #000;
  height: 4rem;
}
.stairAd .block .slider-ad .item .des .content span {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
.stairAd .block .slider-ad .item .des .content {
  margin-top: 1rem;
}
.stairAd .block .slider-ad .item:hover .pic .cover {
  opacity: 1;
}
.stairAd .block .slider-ad .owl-next, .stairAd .block .slider-ad .owl-prev {
  padding: 0.5rem;
  background: white;
  position: absolute;
  top: 0;
  bottom: 2rem;
  margin: auto;
  right: -1rem;
  width: 3rem;
  height: 6rem;
  opacity: 0;
}
.stairAd .block .slider-ad .owl-next {
  left: -1rem;
  right: auto;
}
.stairAd .block .iconL, .stairAd .block .iconR {
  position: absolute;
  left: -1px;
  pointer-events: none;
  top: 0;
  bottom: 0;
  z-index: 5;
  display: grid;
  align-items: center;
}
.stairAd .block .iconL svg, .stairAd .block .iconR svg {
  width: 3rem;
  stroke: white;
}
.stairAd .block .iconR {
  left: auto;
  right: -1px;
  transform: rotate(180deg);
}
.stairAd .shape1 {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 48vw;
  border-top-left-radius: 10rem;
  border-bottom-left-radius: 10rem;
}
.stairAd .shape2 {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 48vw;
  border-top-right-radius: 10rem;
  border-bottom-right-radius: 10rem;
}
@media screen and (max-width: 800px) {
  .stairAd .block {
    padding: 0.5rem 0;
  }
  .stairAd .block .title1 .name {
    font-size: 0.9rem;
  }
  .stairAd .block .title1 .name i {
    display: none;
  }
  .stairAd .block .title1 a {
    padding: 0.2rem 0.5rem;
    font-size: 0.8rem;
  }
  .stairAd .block .slider-ad .item {
    border-radius: 10px;
  }
  .stairAd .block .slider-ad .item .pic img {
    height: 8rem;
  }
  .stairAd .block .slider-ad .item .des {
    overflow: hidden;
    padding: 0.5rem;
  }
  .stairAd .block .slider-ad .item .des .title {
    font-size: 0.85rem;
    height: auto;
  }
  .stairAd .block .slider-ad .item .des .prices {
    margin-top: 0.5rem;
  }
  .stairAd .block .slider-ad .item .des .prices .offer s {
    font-size: 0.7rem;
  }
  .stairAd .block .slider-ad .item .des .prices .offer .off span {
    font-size: 0.7rem;
  }
  .stairAd .block .slider-ad .item .des .prices .priceF {
    text-align: left;
    font-size: 0.9rem;
  }
  .stairAd .block .slider-ad .item .des .prices .priceF span {
    font-size: 0.6rem;
  }
  .stairAd .block .slider-ad .owl-next, .stairAd .block .slider-ad .owl-prev {
    padding: 0.5rem;
    background: white;
    position: absolute;
    top: 0;
    bottom: 2rem;
    margin: auto;
    right: -1rem;
    width: 3rem;
    height: 6rem;
    opacity: 0;
  }
  .stairAd .block .slider-ad .owl-next {
    left: -1rem;
    right: auto;
  }
  .stairAd .block .iconL svg, .stairAd .block .iconR svg {
    width: 1.7rem;
    stroke: white;
  }
  .stairAd .shape1 {
    border-top-left-radius: 20px;
    border-bottom-left-radius: 20px;
    width: 49.5vw;
  }
  .stairAd .shape2 {
    width: 49.5vw;
    border-top-right-radius: 20px;
    border-bottom-right-radius: 20px;
  }
}

.allTextIndex {
  padding: 1rem 0;
  transition: all 0.8s ease-in-out;
}
.allTextIndex p {
  display: flex;
  align-items: baseline;
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  color: white;
  font-size: 20px;
  font-weight: 300;
  text-align: center;
}
.allTextIndex p span {
  padding-right: 30px;
  animation: textAnime 5s linear infinite;
  animation-duration: 6s;
}
@-webkit-keyframes textAnime {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(100%);
  }
}
@keyframes textAnime {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(100%);
  }
}

@media screen and (max-width: 920px) {
  .allTextIndex {
    padding: 1rem 0;
  }
  .allTextIndex p {
    font-size: 1rem;
  }
}
.blogIndex1 {
  position: relative;
}
.blogIndex1 .width {
  margin: auto;
}
.blogIndex1 .titles {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
}
.blogIndex1 .titles .title1 {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}
.blogIndex1 .titles .title1 .name {
  font-size: 1.3rem;
  font-weight: 900;
  color: #000;
}
.blogIndex1 .titles .title1 a {
  display: flex;
  align-items: center;
  gap: 3px;
  color: white;
  border-radius: 5rem;
  font-size: 0.8rem;
  font-weight: 500;
  background: var(--green-color);
  padding: 2px 6px;
}
.blogIndex1 .titles .title1 a i {
  display: grid;
  align-items: center;
}
.blogIndex1 .titles .title1 a i svg {
  width: 0.8rem;
  height: 0.8rem;
  fill: white;
}
.blogIndex1 .titles .left {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  align-items: center;
  justify-content: left;
}
.blogIndex1 .titles .left a {
  border: 1px solid #444;
  color: #444;
  font-size: 0.9rem;
  font-weight: 700;
  padding: 0.3rem 1rem;
  border-radius: 5rem;
}
.blogIndex1 .slider-blog .item a {
  display: grid;
  padding: 1rem;
  border-radius: 20px;
  background: white;
}
.blogIndex1 .slider-blog .item a .pic img {
  height: 9rem;
  width: 100%;
  object-fit: cover;
}
.blogIndex1 .slider-blog .item a .name {
  font-size: 1rem;
  font-weight: 900;
  color: #000;
  text-align: center;
  margin: 0.5rem 0;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
.blogIndex1 .slider-blog .item a .body {
  font-size: 0.9rem;
  font-weight: 500;
  color: #444;
  text-align: center;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  text-overflow: ellipsis;
}
.blogIndex1 .slider-blog .item a .time {
  text-align: center;
  margin-top: 1rem;
}
.blogIndex1 .slider-blog .item a .time span {
  font-size: 0.8rem;
  font-weight: 300;
  color: #444;
  background: #f5f5f5;
  border-radius: 5rem;
  padding: 0.2rem 0.5rem;
}
.blogIndex1 .slider-blog .owl-next, .blogIndex1 .slider-blog .owl-prev {
  padding: 0.5rem;
  background: white !important;
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto;
  right: 0.5rem;
  width: 2.5rem;
  border: 2px solid black !important;
  font-size: 1.5rem !important;
  border-radius: 50%;
  color: black !important;
  height: 2.5rem;
  transition: all 0.3s ease-in-out;
}
.blogIndex1 .slider-blog .owl-next:hover, .blogIndex1 .slider-blog .owl-prev:hover {
  background: black !important;
  color: white !important;
}
.blogIndex1 .slider-blog .owl-next {
  left: 0.5rem;
  right: auto;
}
.blogIndex1:before {
  content: "";
  background-repeat: no-repeat;
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto;
  right: -1rem;
  height: 10rem;
  left: -1rem;
  background-image: url("/img/shape1.svg");
  background-position: 50%;
}
@media screen and (max-width: 700px) {
  .blogIndex1 .titles .title1 {
    gap: 0.5rem;
  }
  .blogIndex1 .titles .title1 .name {
    font-size: 1.1rem;
  }
  .blogIndex1 .titles .title1 a {
    font-size: 0.7rem;
  }
  .blogIndex1 .titles .left {
    gap: 0.5rem;
  }
  .blogIndex1 .titles .left a {
    font-size: 0.75rem;
    padding: 0.3rem 0.5rem;
  }
  .blogIndex1 .slider-blog .item a {
    padding: 0.5rem;
  }
  .blogIndex1 .slider-blog .item a .pic img {
    height: 7rem;
  }
  .blogIndex1 .slider-blog .item a .name {
    font-size: 0.85rem;
  }
  .blogIndex1 .slider-blog .item a .body {
    font-size: 0.7rem;
  }
  .blogIndex1 .slider-blog .item a .time span {
    font-size: 0.7rem;
  }
}

.blogIndex2 {
  margin: auto;
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 1rem;
}
.blogIndex2 .right .item {
  border: 1px solid #eee;
  box-shadow: 0 10px 10px rgba(0, 0, 0, 0.03);
  background: white;
  padding: 1rem;
  border-radius: 15px;
}
.blogIndex2 .right .item .pic {
  border-radius: 15px;
  overflow: hidden;
}
.blogIndex2 .right .item .pic img {
  height: 25rem;
  width: 100%;
  object-fit: cover;
}
.blogIndex2 .right .item .name {
  font-size: 1rem;
  font-weight: 700;
  color: #000;
  margin-top: 1rem;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  margin-bottom: 0.5rem;
}
.blogIndex2 .right .item .body {
  font-size: 0.9rem;
  font-weight: 500;
  color: #444;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  height: 4.5rem;
  margin-bottom: 1rem;
  -webkit-box-orient: vertical;
  text-overflow: ellipsis;
}
.blogIndex2 .right .item .detail {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
}
.blogIndex2 .right .item .detail .right1 {
  display: flex;
  align-items: center;
}
.blogIndex2 .right .item .detail .right1 .writer {
  font-size: 0.8rem;
  font-weight: 500;
  color: #444;
  border-left: 3px solid #eee;
  padding-left: 0.5rem;
}
.blogIndex2 .right .item .detail .right1 .created {
  font-size: 0.8rem;
  font-weight: 500;
  color: #444;
  margin-right: 1rem;
}
.blogIndex2 .right .item .detail .cat {
  display: grid;
  padding: 0.2rem 0.5rem;
  border: 2px solid var(--green-color);
  color: var(--green-color);
  font-size: 0.8rem;
  font-weight: 500;
  border-radius: 10px;
}
.blogIndex2 .left {
  border: 1px solid #eee;
  box-shadow: 0 10px 10px rgba(0, 0, 0, 0.03);
  background: white;
  padding: 1rem;
  padding-top: 0;
  border-radius: 15px;
}
.blogIndex2 .left .title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 4rem;
  border-bottom: 2px solid #eee;
}
.blogIndex2 .left .title .name {
  display: flex;
  justify-content: right;
  align-items: center;
  gap: 0.5rem;
  font-size: 1rem;
  font-weight: 900;
  color: #000;
  text-align: center;
}
.blogIndex2 .left .title .name:before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--green-color);
  display: grid;
}
.blogIndex2 .left .title a {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  align-items: center;
  color: var(--green-color);
  font-size: 0.9rem;
  font-weight: 500;
  background: #f9f9f9;
  padding: 0.3rem 0.5rem;
  border-radius: 10px;
}
.blogIndex2 .left .title a i {
  display: grid;
  align-items: center;
}
.blogIndex2 .left .title a i svg {
  width: 1rem;
  height: 1rem;
  fill: var(--green-color);
}
.blogIndex2 .left .items {
  height: 32rem;
  overflow-y: scroll;
}
.blogIndex2 .left .items .item {
  margin-top: 1rem;
}
.blogIndex2 .left .items .item a {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1rem;
}
.blogIndex2 .left .items .item a .pic {
  border-radius: 10px;
  overflow: hidden;
}
.blogIndex2 .left .items .item a .pic img {
  height: 100%;
  width: 6rem;
  object-fit: cover;
}
.blogIndex2 .left .items .item a .des .name {
  font-size: 1rem;
  font-weight: 700;
  color: #000;
  margin-bottom: 0.5rem;
}
.blogIndex2 .left .items .item a .des .created {
  font-size: 0.8rem;
  font-weight: 700;
  color: #444;
  opacity: 0.7;
}
@media screen and (max-width: 700px) {
  .blogIndex2 {
    grid-template-columns: 1fr;
    gap: 0.5rem;
  }
  .blogIndex2 .right .item {
    padding: 0.5rem;
  }
  .blogIndex2 .right .item .pic img {
    height: 10rem;
  }
  .blogIndex2 .left {
    padding: 0.5rem;
  }
  .blogIndex2 .left .title {
    height: 3rem;
  }
  .blogIndex2 .left .title .name {
    font-size: 0.9rem;
  }
  .blogIndex2 .left .title .name:before {
    width: 6px;
    height: 6px;
  }
  .blogIndex2 .left .title a {
    font-size: 0.8rem;
  }
  .blogIndex2 .left .title a i svg {
    width: 0.9rem;
    height: 0.9rem;
  }
  .blogIndex2 .left .items {
    height: auto;
  }
  .blogIndex2 .left .items .item {
    margin-top: 0.5rem;
  }
  .blogIndex2 .left .items .item a {
    gap: 0.5rem;
  }
  .blogIndex2 .left .items .item a .pic img {
    height: 3rem;
    width: 5rem;
  }
  .blogIndex2 .left .items .item a .des .name {
    font-size: 0.9rem;
  }
  .blogIndex2 .left .items .item a .des .created {
    font-size: 0.7rem;
  }
}

.blogIndex3 {
  margin: auto;
  background: #f7f7f7;
  border-radius: 15px;
  padding: 1rem;
}
.blogIndex3 .title {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 1rem;
  justify-content: space-between;
  align-items: center;
  align-content: center;
  margin-bottom: 1rem;
}
.blogIndex3 .title .name {
  font-size: 1.3rem;
  font-weight: 900;
  color: #000;
  text-align: center;
}
.blogIndex3 .title .bar {
  height: 2px;
  background: #eee;
}
.blogIndex3 .title a {
  display: flex;
  justify-content: left;
  align-items: center;
  color: white;
  font-size: 0.9rem;
  font-weight: 500;
  background: var(--green-color);
  box-shadow: 0 5px 5px rgba(0, 0, 0, 0.1);
  border-radius: 5rem;
  overflow: hidden;
  position: relative;
  width: 12rem;
}
.blogIndex3 .title a span {
  position: absolute;
  right: 0;
  left: 1.7rem;
  bottom: 0;
  top: 0;
  background: var(--green-color);
  border-radius: 5rem;
  display: grid;
  align-items: center;
  justify-content: center;
}
.blogIndex3 .title a i {
  background: white;
  display: grid;
  padding: 0.7rem;
  padding-left: 0.5rem;
  width: 3rem;
  align-items: center;
  justify-content: left;
}
.blogIndex3 .title a i svg {
  width: 1rem;
  height: 1rem;
  fill: #000;
}
.blogIndex3 .slider-blog3 .item a {
  display: grid;
  padding: 1rem;
  border-radius: 15px;
  background: white;
}
.blogIndex3 .slider-blog3 .item a .pic {
  border-radius: 15px;
  overflow: hidden;
}
.blogIndex3 .slider-blog3 .item a .pic img {
  height: 10rem;
  object-fit: cover;
}
.blogIndex3 .slider-blog3 .item a .name {
  font-size: 0.9rem;
  font-weight: 500;
  color: #000;
  margin: 0.5rem 0;
  transition: all 0.3s ease-in-out;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  text-overflow: ellipsis;
  overflow: hidden;
}
.blogIndex3 .slider-blog3 .item a p {
  font-size: 0.8rem;
  font-weight: 300;
  color: #444;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  text-overflow: ellipsis;
  overflow: hidden;
}
.blogIndex3 .slider-blog3 .item a .cat {
  margin-top: 1rem;
}
.blogIndex3 .slider-blog3 .item a .cat span {
  background: #f7f7f7;
  color: #444;
  font-size: 0.8rem;
  font-weight: 500;
  padding: 0.3rem 1rem;
  border-radius: 5rem;
  border: 1px solid #eee;
  transition: all 0.3s ease-in-out;
}
.blogIndex3 .slider-blog3 .item a:hover .name {
  color: var(--green-color);
}
.blogIndex3 .slider-blog3 .item a:hover .cat span {
  background: var(--green-color);
  border: 1px solid var(--green-color);
  color: white;
}
.blogIndex3 .slider-blog3 .owl-nav {
  position: absolute;
  top: -3.4rem;
  left: 13rem;
  display: flex;
  gap: 0.5rem;
}
.blogIndex3 .slider-blog3 .owl-nav .owl-prev, .blogIndex3 .slider-blog3 .owl-nav .owl-next {
  width: 2.3rem;
  height: 2.3rem;
  display: grid;
  border: 1px solid #444;
  border-radius: 50%;
  align-items: center;
  font-size: 1.4rem;
  background: #f7f7f7;
  transition: all 0.3s ease-in-out;
}
.blogIndex3 .slider-blog3 .owl-nav .owl-prev:hover, .blogIndex3 .slider-blog3 .owl-nav .owl-next:hover {
  background: var(--green-color);
}
.blogIndex3 .slider-blog3 .owl-nav .owl-prev:hover span, .blogIndex3 .slider-blog3 .owl-nav .owl-next:hover span {
  color: white;
}
@media screen and (max-width: 700px) {
  .blogIndex3 {
    padding: 0.5rem;
  }
  .blogIndex3 .title {
    display: flex;
    justify-content: space-between;
    gap: 0.5rem;
  }
  .blogIndex3 .title .name {
    font-size: 1rem;
  }
  .blogIndex3 .title .bar {
    display: none;
  }
  .blogIndex3 .title a {
    font-size: 0.6rem;
    width: 8rem;
  }
  .blogIndex3 .title a i {
    padding: 0.5rem;
  }
  .blogIndex3 .slider-blog3 .item a {
    padding: 0.5rem;
    border-radius: 10px;
  }
  .blogIndex3 .slider-blog3 .item a .pic {
    border-radius: 10px;
  }
  .blogIndex3 .slider-blog3 .item a .pic img {
    height: 8rem;
  }
  .blogIndex3 .slider-blog3 .item a .name {
    font-size: 0.8rem;
  }
  .blogIndex3 .slider-blog3 .item a p {
    font-size: 0.7rem;
  }
  .blogIndex3 .slider-blog3 .item a .cat {
    margin-top: 0.5rem;
  }
  .blogIndex3 .slider-blog3 .item a .cat span {
    font-size: 0.7rem;
    padding: 0.3rem 0.5rem;
  }
  .blogIndex3 .slider-blog3 .owl-nav {
    display: flex;
    position: unset;
  }
  .blogIndex3 .slider-blog3 .owl-nav .owl-prev, .blogIndex3 .slider-blog3 .owl-nav .owl-next {
    width: 2.3rem;
    height: 2.3rem;
    position: absolute;
    top: 40%;
  }
  .blogIndex3 .slider-blog3 .owl-nav .owl-prev:hover, .blogIndex3 .slider-blog3 .owl-nav .owl-next:hover {
    background: var(--green-color);
  }
  .blogIndex3 .slider-blog3 .owl-nav .owl-prev:hover span, .blogIndex3 .slider-blog3 .owl-nav .owl-next:hover span {
    color: white;
  }
  .blogIndex3 .slider-blog3 .owl-nav .owl-next {
    left: 0;
  }
}

.blogIndex4 {
  margin: auto;
}
.blogIndex4 .title {
  display: flex;
  gap: 0.5rem;
  justify-content: space-between;
  align-items: center;
  align-content: center;
  margin-bottom: 1rem;
}
.blogIndex4 .title .name {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  font-size: 1.5rem;
  font-weight: 900;
  color: #000;
  position: relative;
}
.blogIndex4 .title .name:before {
  width: 5px;
  height: 30px;
  display: grid;
  background: linear-gradient(var(--green-color), var(--back1-color));
  border-radius: 5px;
  content: "";
  box-shadow: 5px 0 17px var(--green-color);
}
.blogIndex4 .title a {
  display: flex;
  justify-content: left;
  align-items: center;
  color: var(--green-color);
  font-size: 0.9rem;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  font-weight: 500;
  border: 1.5px solid var(--green-color);
  border-radius: 10px;
  overflow: hidden;
  position: relative;
}
.blogIndex4 .title a i {
  display: grid;
  align-items: center;
}
.blogIndex4 .title a i svg {
  width: 1rem;
  height: 1rem;
  fill: var(--green-color);
}
.blogIndex4 .slider-blog4 {
  border: 1px solid #eee;
  background: white;
  border-radius: 15px;
  box-shadow: 0 4px 16px 0 rgba(36, 43, 61, 0.1);
}
.blogIndex4 .slider-blog4 .item a {
  display: grid;
  padding: 1rem;
  border-left: 1px solid #eee;
}
.blogIndex4 .slider-blog4 .item a .pic {
  border-radius: 15px;
  overflow: hidden;
}
.blogIndex4 .slider-blog4 .item a .pic img {
  height: 10rem;
  object-fit: cover;
}
.blogIndex4 .slider-blog4 .item a .name {
  font-size: 0.9rem;
  font-weight: 500;
  color: #000;
  margin: 0.5rem 0;
  transition: all 0.3s ease-in-out;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  text-overflow: ellipsis;
  overflow: hidden;
}
.blogIndex4 .slider-blog4 .item a p {
  font-size: 0.8rem;
  font-weight: 300;
  color: #444;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  text-overflow: ellipsis;
  overflow: hidden;
}
.blogIndex4 .slider-blog4 .item a .cat {
  margin-top: 1rem;
}
.blogIndex4 .slider-blog4 .item a .cat span {
  background: #f7f7f7;
  color: #444;
  font-size: 0.8rem;
  font-weight: 500;
  padding: 0.3rem 1rem;
  border-radius: 5rem;
  border: 1px solid #eee;
  transition: all 0.3s ease-in-out;
}
.blogIndex4 .slider-blog4 .item a:hover .name {
  color: var(--green-color);
}
.blogIndex4 .slider-blog4 .item a:hover .cat span {
  background: var(--green-color);
  border: 1px solid var(--green-color);
  color: white;
}
.blogIndex4 .slider-blog4 .owl-nav {
  position: absolute;
  top: -3.4rem;
  left: 13rem;
  display: flex;
  gap: 0.5rem;
}
.blogIndex4 .slider-blog4 .owl-nav .owl-prev, .blogIndex4 .slider-blog4 .owl-nav .owl-next {
  width: 2.3rem;
  height: 2.3rem;
  display: grid;
  border: 1px solid #444;
  border-radius: 50%;
  align-items: center;
  font-size: 1.4rem;
  background: #f7f7f7;
  transition: all 0.3s ease-in-out;
}
.blogIndex4 .slider-blog4 .owl-nav .owl-prev:hover, .blogIndex4 .slider-blog4 .owl-nav .owl-next:hover {
  background: var(--green-color);
}
.blogIndex4 .slider-blog4 .owl-nav .owl-prev:hover span, .blogIndex4 .slider-blog4 .owl-nav .owl-next:hover span {
  color: white;
}
@media screen and (max-width: 700px) {
  .blogIndex4 {
    padding: 0.5rem;
  }
  .blogIndex4 .title .name {
    font-size: 1.2rem;
  }
  .blogIndex4 .title .name:before {
    height: 20px;
  }
  .blogIndex4 .title a {
    font-size: 0.8rem;
    padding: 0.5rem;
    border: 1px solid var(--green-color);
  }
  .blogIndex4 .title a i svg {
    width: 0.8rem;
    height: 0.8rem;
  }
  .blogIndex4 .slider-blog4 {
    border-radius: 10px;
  }
  .blogIndex4 .slider-blog4 .item a {
    padding: 0.5rem;
  }
  .blogIndex4 .slider-blog4 .item a .pic img {
    height: 8rem;
  }
  .blogIndex4 .slider-blog4 .item a .name {
    font-size: 0.7rem;
  }
  .blogIndex4 .slider-blog4 .item a p {
    font-size: 0.7rem;
  }
  .blogIndex4 .slider-blog4 .item a .cat {
    margin-top: 0.5rem;
  }
  .blogIndex4 .slider-blog4 .item a .cat span {
    font-size: 0.7rem;
    padding: 0.3rem 0.5rem;
  }
  .blogIndex4 .slider-blog4 .owl-nav {
    display: none;
  }
}

.blogIndex5 {
  margin: auto;
  display: grid;
  grid-template-columns: 30rem 1fr;
  grid-gap: 1rem;
}
.blogIndex5 .right .titles .name {
  text-align: center;
  font-size: 2.5rem;
  font-weight: 900;
  position: relative;
  margin-bottom: 2rem;
}
.blogIndex5 .right .titles .name:before {
  content: "";
  position: absolute;
  top: 100%;
  width: 5rem;
  right: 0;
  left: 0;
  margin: auto;
  background: var(--red-color);
  height: 7px;
  border-radius: 10px;
  box-shadow: 0 5px 5px rgba(0, 0, 0, 0.1);
}
.blogIndex5 .right .body {
  font-size: 1rem;
  opacity: 0.7;
  text-align: justify;
  font-weight: 500;
  color: #000;
  margin-bottom: 1.5rem;
}
.blogIndex5 .right a {
  font-size: 0.9rem;
  background: var(--green-color);
  padding: 0.5rem 1rem;
  color: white;
  border-radius: 15px;
}
.blogIndex5 .left {
  display: grid;
}
.blogIndex5 .left .slider-blog5 {
  display: grid;
}
.blogIndex5 .left .slider-blog5 .item {
  position: relative;
  z-index: 1;
  padding: 0.5rem;
}
.blogIndex5 .left .slider-blog5 .item .des {
  position: relative;
  z-index: 2;
  background: white;
  border-radius: 15px;
}
.blogIndex5 .left .slider-blog5 .item .des a {
  display: grid;
  padding: 1rem;
}
.blogIndex5 .left .slider-blog5 .item .des a .pic {
  border-radius: 15px;
  overflow: hidden;
}
.blogIndex5 .left .slider-blog5 .item .des a .pic img {
  height: 10rem;
  object-fit: cover;
}
.blogIndex5 .left .slider-blog5 .item .des a .name {
  font-size: 0.9rem;
  font-weight: 500;
  color: #000;
  margin: 0.5rem 0;
  transition: all 0.3s ease-in-out;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  text-overflow: ellipsis;
  overflow: hidden;
}
.blogIndex5 .left .slider-blog5 .item .des a p {
  font-size: 0.8rem;
  font-weight: 300;
  color: #444;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  text-overflow: ellipsis;
  overflow: hidden;
}
.blogIndex5 .left .slider-blog5 .item .des a .cat {
  margin-top: 1rem;
}
.blogIndex5 .left .slider-blog5 .item .des a .cat span {
  background: #f7f7f7;
  color: #444;
  font-size: 0.8rem;
  font-weight: 500;
  padding: 0.3rem 1rem;
  border-radius: 5rem;
  border: 1px solid #eee;
  transition: all 0.3s ease-in-out;
}
.blogIndex5 .left .slider-blog5 .item .des a:hover .name {
  color: var(--green-color);
}
.blogIndex5 .left .slider-blog5 .item .des a:hover .cat span {
  background: var(--green-color);
  border: 1px solid var(--green-color);
  color: white;
}
.blogIndex5 .left .slider-blog5 .item:before {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 1rem;
  box-shadow: 0 0 20px var(--red-color);
  opacity: 0.2;
  border-radius: 15px;
}
.blogIndex5 .left .slider-blog5 .owl-nav {
  display: grid;
}
.blogIndex5 .left .slider-blog5 .owl-nav .owl-prev, .blogIndex5 .left .slider-blog5 .owl-nav .owl-next {
  width: 2.5rem;
  height: 2.5rem;
  display: grid;
  border-radius: 50%;
  align-items: center;
  font-size: 3rem;
  background: white;
  box-shadow: 0 0 30px rgba(0, 0, 0, 0.2);
  transition: all 0.3s ease-in-out;
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto;
  right: -0.7rem;
}
.blogIndex5 .left .slider-blog5 .owl-nav .owl-prev span, .blogIndex5 .left .slider-blog5 .owl-nav .owl-next span {
  line-height: 2.7rem;
}
.blogIndex5 .left .slider-blog5 .owl-nav .owl-prev:hover, .blogIndex5 .left .slider-blog5 .owl-nav .owl-next:hover {
  background: var(--green-color);
}
.blogIndex5 .left .slider-blog5 .owl-nav .owl-prev:hover span, .blogIndex5 .left .slider-blog5 .owl-nav .owl-next:hover span {
  color: white;
}
.blogIndex5 .left .slider-blog5 .owl-nav .owl-next {
  right: auto;
  left: -0.7rem;
}
@media screen and (max-width: 1000px) {
  .blogIndex5 {
    margin-top: 5rem;
    display: block;
  }
  .blogIndex5 .right {
    margin-bottom: 2rem;
    text-align: center;
  }
  .blogIndex5 .right .titles .name {
    font-size: 1.8rem;
    margin-bottom: 1rem;
  }
  .blogIndex5 .right .titles .name:before {
    width: 2rem;
    height: 5px;
  }
  .blogIndex5 .right .body {
    font-size: 0.9rem;
    margin-bottom: 1rem;
  }
  .blogIndex5 .right a {
    font-size: 0.8rem;
    padding: 0.5rem 1rem;
    border-radius: 10px;
  }
  .blogIndex5 .left .slider-blog5 .item {
    padding: 0.3rem;
  }
  .blogIndex5 .left .slider-blog5 .item .des {
    border-radius: 10px;
  }
  .blogIndex5 .left .slider-blog5 .item .des a {
    padding: 0.5rem;
  }
  .blogIndex5 .left .slider-blog5 .item .des a .pic {
    border-radius: 10px;
  }
  .blogIndex5 .left .slider-blog5 .item .des a .pic img {
    height: 8rem;
  }
  .blogIndex5 .left .slider-blog5 .item .des a .name {
    font-size: 0.8rem;
    margin: 0.5rem 0;
  }
  .blogIndex5 .left .slider-blog5 .item .des a p {
    font-size: 0.75rem;
  }
  .blogIndex5 .left .slider-blog5 .item:before {
    inset: 0.5rem;
    opacity: 0.1;
  }
  .blogIndex5 .left .slider-blog5 .owl-nav .owl-prev, .blogIndex5 .left .slider-blog5 .owl-nav .owl-next {
    width: 2rem;
    height: 2rem;
    font-size: 2rem;
    right: 0;
  }
  .blogIndex5 .left .slider-blog5 .owl-nav .owl-prev span, .blogIndex5 .left .slider-blog5 .owl-nav .owl-next span {
    line-height: 2rem;
  }
  .blogIndex5 .left .slider-blog5 .owl-nav .owl-next {
    right: auto;
    left: 0;
  }
}

.blogIndex6 {
  margin: auto;
}
.blogIndex6 .titles {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
}
.blogIndex6 .titles .right {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem;
  font-size: 1.5rem;
  font-weight: 900;
  color: #000;
}
.blogIndex6 .titles .right .pic {
  display: grid;
  align-items: center;
}
.blogIndex6 .titles .right .pic img {
  width: 2rem;
  height: 2rem;
}
.blogIndex6 .titles a {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 1rem;
  font-weight: 700;
  color: var(--green-color);
}
.blogIndex6 .titles a i {
  display: grid;
  align-items: center;
}
.blogIndex6 .titles a i svg {
  width: 1.5rem;
  height: 1.5rem;
  fill: var(--green-color);
}
.blogIndex6 .slider-blog6 {
  display: grid;
}
.blogIndex6 .slider-blog6 .item {
  display: grid;
  border-radius: 15px;
  overflow: hidden;
  border: 1px solid #eee;
}
.blogIndex6 .slider-blog6 .item .pic img {
  height: 13rem;
  object-fit: cover;
}
.blogIndex6 .slider-blog6 .item .name {
  font-size: 0.9rem;
  font-weight: 500;
  color: #000;
  padding: 0.5rem;
  transition: all 0.3s ease-in-out;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  text-overflow: ellipsis;
  overflow: hidden;
  height: 4rem;
}
.blogIndex6 .slider-blog6 .item:hover .name {
  color: var(--green-color);
}
.blogIndex6 .slider-blog6 .item:hover .cat span {
  background: var(--green-color);
  border: 1px solid var(--green-color);
  color: white;
}
.blogIndex6 .slider-blog6 .owl-nav {
  display: grid;
}
.blogIndex6 .slider-blog6 .owl-nav .owl-prev, .blogIndex6 .slider-blog6 .owl-nav .owl-next {
  width: 2.5rem;
  height: 2.5rem;
  display: grid;
  border-radius: 50%;
  align-items: center;
  font-size: 3rem;
  background: white;
  box-shadow: 0 0 30px rgba(0, 0, 0, 0.2);
  transition: all 0.3s ease-in-out;
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto;
  right: -0.7rem;
}
.blogIndex6 .slider-blog6 .owl-nav .owl-prev span, .blogIndex6 .slider-blog6 .owl-nav .owl-next span {
  line-height: 2.7rem;
}
.blogIndex6 .slider-blog6 .owl-nav .owl-prev:hover, .blogIndex6 .slider-blog6 .owl-nav .owl-next:hover {
  background: var(--green-color);
}
.blogIndex6 .slider-blog6 .owl-nav .owl-prev:hover span, .blogIndex6 .slider-blog6 .owl-nav .owl-next:hover span {
  color: white;
}
.blogIndex6 .slider-blog6 .owl-nav .owl-next {
  right: auto;
  left: -0.7rem;
}
@media screen and (max-width: 1000px) {
  .blogIndex6 {
    margin-top: 5rem;
    display: block;
  }
  .blogIndex6 .titles {
    gap: 0.5rem;
    margin-bottom: 0.5rem;
  }
  .blogIndex6 .titles .right {
    gap: 0.5rem;
    font-size: 1.2rem;
  }
  .blogIndex6 .titles .right .pic img {
    width: 1.5rem;
    height: 1.5rem;
  }
  .blogIndex6 .titles a {
    font-size: 0.8rem;
  }
  .blogIndex6 .titles a i svg {
    width: 1.2rem;
    height: 1.2rem;
  }
  .blogIndex6 .slider-blog6 .item {
    border-radius: 10px;
  }
  .blogIndex6 .slider-blog6 .item .pic img {
    height: 9rem;
  }
  .blogIndex6 .slider-blog6 .item .name {
    font-size: 0.8rem;
    height: 100%;
  }
  .blogIndex6 .slider-blog6 .owl-nav {
    display: none;
  }
}

.blogIndex7 {
  padding: 2rem;
  margin: auto;
  border: 2px solid rgb(34, 60, 120);
  border-radius: 20px;
}
.blogIndex7 .titles {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
}
.blogIndex7 .titles .right {
  font-size: 1.3rem;
  font-weight: 900;
  color: #000;
}
.blogIndex7 .titles a {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.9rem;
  font-weight: 700;
  color: #000;
}
.blogIndex7 .titles a i {
  display: grid;
  align-items: center;
}
.blogIndex7 .titles a i svg {
  width: 1.1rem;
  height: 1.1rem;
  fill: #000;
}
.blogIndex7 .slider-blog7 {
  display: grid;
}
.blogIndex7 .slider-blog7 .item {
  display: grid;
  border-radius: 10px;
  overflow: hidden;
}
.blogIndex7 .slider-blog7 .item .pic img {
  height: 9rem;
  object-fit: cover;
}
.blogIndex7 .slider-blog7 .item .name {
  font-size: 0.9rem;
  font-weight: 500;
  color: white;
  padding: 0.5rem;
  transition: all 0.3s ease-in-out;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  text-overflow: ellipsis;
  overflow: hidden;
  height: 4rem;
}
.blogIndex7 .slider-blog7 .owl-nav {
  display: grid;
}
.blogIndex7 .slider-blog7 .owl-nav .owl-prev, .blogIndex7 .slider-blog7 .owl-nav .owl-next {
  width: 2.5rem;
  height: 2.5rem;
  display: grid;
  border-radius: 50%;
  align-items: center;
  font-size: 3rem;
  background: white;
  box-shadow: 0 0 30px rgba(0, 0, 0, 0.2);
  transition: all 0.3s ease-in-out;
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto;
  right: -0.7rem;
}
.blogIndex7 .slider-blog7 .owl-nav .owl-prev span, .blogIndex7 .slider-blog7 .owl-nav .owl-next span {
  line-height: 2.7rem;
}
.blogIndex7 .slider-blog7 .owl-nav .owl-prev:hover, .blogIndex7 .slider-blog7 .owl-nav .owl-next:hover {
  background: var(--green-color);
}
.blogIndex7 .slider-blog7 .owl-nav .owl-prev:hover span, .blogIndex7 .slider-blog7 .owl-nav .owl-next:hover span {
  color: white;
}
.blogIndex7 .slider-blog7 .owl-nav .owl-next {
  right: auto;
  left: -0.7rem;
}
@media screen and (max-width: 1000px) {
  .blogIndex7 {
    margin-top: 5rem;
    display: block;
    border-radius: 0;
    border-right: 0;
    border-left: 0;
    width: 100% !important;
    padding: 1rem;
    border-top: 2px solid #eee;
    border-bottom: 2px solid #eee;
  }
  .blogIndex7 .titles .right {
    font-size: 1rem;
  }
  .blogIndex7 .titles a {
    gap: 0.2rem;
    font-size: 0.8rem;
  }
  .blogIndex7 .titles a i svg {
    width: 0.9rem;
    height: 0.9rem;
  }
  .blogIndex7 .slider-blog7 .item .pic img {
    height: 8rem;
  }
  .blogIndex7 .slider-blog7 .item .name {
    font-size: 0.8rem;
    height: 3.5rem;
  }
  .blogIndex7 .slider-blog7 .owl-nav {
    display: none;
  }
}

.allStoryIndex2 .stories-row2 {
  padding: 16px;
  overflow: hidden;
  align-items: center;
}
.allStoryIndex2 .stories {
  margin: auto;
}
.allStoryIndex2 .story-item {
  width: 90px;
  text-align: center;
  cursor: pointer;
}
.allStoryIndex2 .story-item .story-thumb {
  width: 90px;
  height: 90px;
  border-radius: 50%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 3px;
  background: linear-gradient(to right, white 20%, var(--green-color) 40%, var(--green-color) 60%, white 80%);
  background-size: 200% auto;
  animation: shine6 2s linear infinite;
}
@keyframes shine6 {
  to {
    background-position: 200% center;
  }
}
.allStoryIndex2 .story-item .story-thumb .story-p {
  border-radius: 50%;
  width: 100%;
  padding: 3px;
  background: white;
  height: 100%;
}
.allStoryIndex2 .story-item .story-thumb .story-p img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
}
.allStoryIndex2 .story-item .story-name {
  margin-top: 5px;
  font-size: 0.9rem;
  font-weight: 500;
  color: #000;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
.allStoryIndex2 .nav-btn {
  background: #111;
  color: white;
  border: none;
  padding: 8px 10px;
  border-radius: 8px;
  cursor: pointer;
  margin: 0 6px;
}
.allStoryIndex2 .story-viewer {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.85);
  display: none;
  z-index: 9999;
}
.allStoryIndex2 .viewer-inner {
  width: 420px;
  max-width: 98%;
  height: 720px;
  max-height: 92%;
  background: #000;
  border-radius: 12px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
.allStoryIndex2 .viewer-header {
  padding: 10px;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 8px;
  align-items: center;
}
.allStoryIndex2 .progresses {
  flex: 1;
  display: flex;
  gap: 6px;
}
.allStoryIndex2 .progress {
  height: 4px;
  background: rgba(255, 255, 255, 0.25);
  flex: 1;
  border-radius: 2px;
  overflow: hidden;
}
.allStoryIndex2 .progress > i {
  display: block;
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, #fff, #ddd);
}
.allStoryIndex2 .viewer-meta {
  display: flex;
  gap: 10px;
  align-items: center;
}
.allStoryIndex2 .viewer-meta img {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
}
.allStoryIndex2 .viewer-meta .name {
  font-size: 1rem;
  font-weight: 700;
  color: white;
}
.allStoryIndex2 .viewer-body {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.allStoryIndex2 .viewer-body img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}
.allStoryIndex2 .viewer-body video {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}
.allStoryIndex2 .viewer-controls {
  padding: 10px;
  display: flex;
  justify-content: center;
  gap: 8px;
  position: absolute;
  bottom: 1rem;
  right: 0;
  left: 0;
  z-index: 10;
}
.allStoryIndex2 .viewer-controls button {
  background: white;
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #000;
  padding: 6px 10px;
  border-radius: 8px;
  cursor: pointer;
}
@media screen and (max-width: 1000px) {
  .allStoryIndex2 .story-item {
    width: 75px;
  }
  .allStoryIndex2 .story-item .story-thumb {
    width: 75px;
    height: 75px;
  }
  .allStoryIndex2 .story-item .story-name {
    font-size: 0.8rem;
  }
}

.allStoryIndex3 {
  margin: auto;
}
.allStoryIndex3 .stories .title2 {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  font-size: 1.5rem;
  font-weight: 900;
  color: #000;
  position: relative;
}
.allStoryIndex3 .stories .title2:before {
  width: 5px;
  height: 30px;
  display: grid;
  background: linear-gradient(var(--green-color), var(--back1-color));
  border-radius: 5px;
  content: "";
  box-shadow: 5px 0 17px var(--green-color);
}
.allStoryIndex3 .stories .stories-row3 {
  margin-top: 1rem;
}
.allStoryIndex3 .stories .stories-row3 .story-item {
  text-align: center;
  cursor: pointer;
  position: relative;
  border-radius: 15px;
  overflow: hidden;
}
.allStoryIndex3 .stories .stories-row3 .story-item .story-thumb {
  height: 18rem;
  overflow: hidden;
}
.allStoryIndex3 .stories .stories-row3 .story-item .story-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.allStoryIndex3 .stories .stories-row3 .story-item .story-name {
  position: absolute;
  bottom: 0.5rem;
  right: 0;
  left: 0;
  font-size: 1rem;
  font-weight: 700;
  color: white;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  pointer-events: none;
  z-index: 2;
}
.allStoryIndex3 .stories .stories-row3 .story-item:before {
  content: "";
  pointer-events: none;
  position: absolute;
  bottom: 0;
  right: 0;
  left: 0;
  top: 0;
  background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.7));
  z-index: 1;
}
.allStoryIndex3 .stories .stories-row3 .owl-nav {
  position: absolute;
  top: -3.5rem;
  left: 0;
  display: flex;
  gap: 0.5rem;
}
.allStoryIndex3 .stories .stories-row3 .owl-nav .owl-prev, .allStoryIndex3 .stories .stories-row3 .owl-nav .owl-next {
  width: 2.5rem;
  height: 2.5rem;
  display: grid;
  border: 1.5px solid var(--green-color);
  border-radius: 5rem;
  align-items: center;
  font-size: 1.5rem;
  background: transparent;
  transition: all 0.3s ease-in-out;
}
.allStoryIndex3 .stories .stories-row3 .owl-nav .owl-prev span, .allStoryIndex3 .stories .stories-row3 .owl-nav .owl-next span {
  line-height: 1px;
  color: var(--green-color);
}
.allStoryIndex3 .stories .stories-row3 .owl-nav .owl-prev:hover, .allStoryIndex3 .stories .stories-row3 .owl-nav .owl-next:hover {
  background: var(--green-color);
}
.allStoryIndex3 .stories .stories-row3 .owl-nav .owl-prev:hover span, .allStoryIndex3 .stories .stories-row3 .owl-nav .owl-next:hover span {
  color: white;
}
.allStoryIndex3 .nav-btn {
  background: #111;
  color: white;
  border: none;
  padding: 8px 10px;
  border-radius: 8px;
  cursor: pointer;
  margin: 0 6px;
}
.allStoryIndex3 .story-viewer {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.85);
  display: none;
  z-index: 9999;
}
.allStoryIndex3 .viewer-inner {
  width: 420px;
  max-width: 98%;
  height: 720px;
  max-height: 92%;
  background: #000;
  border-radius: 12px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
.allStoryIndex3 .viewer-header {
  padding: 10px;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 8px;
  align-items: center;
}
.allStoryIndex3 .progresses {
  flex: 1;
  display: flex;
  gap: 6px;
}
.allStoryIndex3 .progress {
  height: 4px;
  background: rgba(255, 255, 255, 0.25);
  flex: 1;
  border-radius: 2px;
  overflow: hidden;
}
.allStoryIndex3 .progress > i {
  display: block;
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, #fff, #ddd);
}
.allStoryIndex3 .viewer-meta {
  display: flex;
  gap: 10px;
  align-items: center;
}
.allStoryIndex3 .viewer-meta img {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
}
.allStoryIndex3 .viewer-meta .name {
  font-size: 1rem;
  font-weight: 700;
  color: white;
}
.allStoryIndex3 .viewer-body {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.allStoryIndex3 .viewer-body img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}
.allStoryIndex3 .viewer-body video {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}
.allStoryIndex3 .viewer-controls {
  padding: 10px;
  display: flex;
  justify-content: center;
  gap: 8px;
  position: absolute;
  bottom: 1rem;
  right: 0;
  left: 0;
  z-index: 10;
}
.allStoryIndex3 .viewer-controls button {
  background: white;
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #000;
  padding: 6px 10px;
  border-radius: 8px;
  cursor: pointer;
}
@media screen and (max-width: 1000px) {
  .allStoryIndex3 .stories .title2 {
    font-size: 1.2rem;
  }
  .allStoryIndex3 .stories .title2:before {
    height: 20px;
  }
  .allStoryIndex3 .stories .stories-row3 .story-item .story-thumb {
    height: 13rem;
  }
  .allStoryIndex3 .stories .stories-row3 .owl-nav {
    top: -2.5rem;
  }
  .allStoryIndex3 .stories .stories-row3 .owl-nav .owl-prev, .allStoryIndex3 .stories .stories-row3 .owl-nav .owl-next {
    width: 3rem;
    height: 1.5rem;
    font-size: 1rem;
  }
  .allStoryIndex3 .viewer-inner {
    width: 100%;
    max-width: 100%;
    height: 100%;
    max-height: 100%;
    left: auto;
    top: auto;
    inset: 0;
    transform: unset;
  }
}

.allStoryIndex4 {
  margin: auto;
  margin-top: 1rem;
}
.allStoryIndex4 .stories {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  grid-gap: 1rem;
  margin: auto;
}
.allStoryIndex4 .stories .stories-row4 {
  overflow: hidden;
  align-items: center;
}
.allStoryIndex4 .stories .stories-row4 .story-item {
  width: 100px;
  text-align: center;
  cursor: pointer;
  padding: 3px;
  position: relative;
}
.allStoryIndex4 .stories .stories-row4 .story-item .story-thumb {
  width: 94px;
  height: 94px;
  border-radius: 50%;
  overflow: hidden;
  background: white;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--green-color);
  padding: 3px;
}
.allStoryIndex4 .stories .stories-row4 .story-item .story-thumb .story-pic {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: white;
  padding: 3px;
  overflow: hidden;
}
.allStoryIndex4 .stories .stories-row4 .story-item .story-thumb img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
}
.allStoryIndex4 .stories .stories-row4 .story-item .story-i {
  position: absolute;
  top: 0;
  right: 8px;
  background: white;
  border: 3px solid var(--green-color);
  display: grid;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  height: 1.8rem;
  width: 1.8rem;
}
.allStoryIndex4 .stories .stories-row4 .story-item .story-i svg {
  width: 1rem;
  height: 1rem;
  fill: var(--green-color);
}
.allStoryIndex4 .stories .stories-row4 .story-item .story-name {
  margin-top: 2px;
  text-align: center;
  font-size: 0.9rem;
  font-weight: 700;
  color: #000;
}
.allStoryIndex4 .stories .next .name {
  font-size: 1rem;
  font-weight: 500;
  color: #000;
}
.allStoryIndex4 .stories .next .more {
  display: flex;
  gap: 0.5rem;
  justify-content: right;
  align-items: center;
  font-size: 0.95rem;
  font-weight: 900;
  color: var(--green-color);
  margin-top: 0.5rem;
}
.allStoryIndex4 .stories .next .more i {
  display: grid;
  align-items: center;
}
.allStoryIndex4 .stories .next .more i svg {
  width: 1.5rem;
  height: 1.5rem;
  fill: var(--green-color);
}
.allStoryIndex4 .nav-btn {
  background: #111;
  color: white;
  border: none;
  padding: 8px 10px;
  border-radius: 8px;
  cursor: pointer;
  margin: 0 6px;
}
.allStoryIndex4 .story-viewer {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.85);
  display: none;
  z-index: 9999;
}
.allStoryIndex4 .viewer-inner {
  width: 420px;
  max-width: 98%;
  height: 720px;
  max-height: 92%;
  background: #000;
  border-radius: 12px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
.allStoryIndex4 .viewer-header {
  padding: 10px;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 8px;
  align-items: center;
}
.allStoryIndex4 .progresses {
  flex: 1;
  display: flex;
  gap: 6px;
}
.allStoryIndex4 .progress {
  height: 4px;
  background: rgba(255, 255, 255, 0.25);
  flex: 1;
  border-radius: 2px;
  overflow: hidden;
}
.allStoryIndex4 .progress > i {
  display: block;
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, #fff, #ddd);
}
.allStoryIndex4 .viewer-meta {
  display: flex;
  gap: 10px;
  align-items: center;
}
.allStoryIndex4 .viewer-meta img {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
}
.allStoryIndex4 .viewer-meta .name {
  font-size: 1rem;
  font-weight: 700;
  color: white;
}
.allStoryIndex4 .viewer-body {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.allStoryIndex4 .viewer-body img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}
.allStoryIndex4 .viewer-body video {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}
.allStoryIndex4 .viewer-controls {
  padding: 10px;
  display: flex;
  justify-content: center;
  gap: 8px;
  position: absolute;
  bottom: 1rem;
  right: 0;
  left: 0;
  z-index: 10;
}
.allStoryIndex4 .viewer-controls button {
  background: white;
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #000;
  padding: 6px 10px;
  border-radius: 8px;
  cursor: pointer;
}
@media screen and (max-width: 1000px) {
  .allStoryIndex4 .stories {
    grid-gap: 0.5rem;
  }
  .allStoryIndex4 .stories .stories-row4 .story-item {
    width: 90px;
    padding: 2px;
  }
  .allStoryIndex4 .stories .stories-row4 .story-item .story-thumb {
    width: 84px;
    height: 84px;
    border-radius: 50%;
    overflow: hidden;
    background: white;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--green-color);
    padding: 3px;
  }
  .allStoryIndex4 .stories .stories-row4 .story-item .story-thumb .story-pic {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: white;
    padding: 3px;
    overflow: hidden;
  }
  .allStoryIndex4 .stories .stories-row4 .story-item .story-thumb img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
  }
  .allStoryIndex4 .stories .stories-row4 .story-item .story-i {
    height: 1.5rem;
    width: 1.5rem;
  }
  .allStoryIndex4 .stories .stories-row4 .story-item .story-i svg {
    width: 0.8rem;
    height: 0.8rem;
  }
  .allStoryIndex4 .stories .stories-row4 .story-item .story-name {
    font-size: 0.75rem;
  }
  .allStoryIndex4 .stories .next .name {
    font-size: 0.85rem;
  }
  .allStoryIndex4 .stories .next .more {
    font-size: 0.75rem;
  }
  .allStoryIndex4 .stories .next .more i svg {
    width: 1.3rem;
    height: 1.3rem;
  }
  .allStoryIndex4 .viewer-inner {
    width: 100%;
    max-width: 100%;
    height: 100%;
    max-height: 100%;
    left: auto;
    top: auto;
    inset: 0;
    transform: unset;
  }
}

.allSellerIndex1 {
  margin: auto;
  border: 1px solid #eee;
  padding: 1.5rem;
  border-radius: 15px;
}
.allSellerIndex1 .title {
  margin: auto;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
}
.allSellerIndex1 .title .names .name {
  font-size: 1.1rem;
  font-weight: 900;
  color: #000;
}
.allSellerIndex1 .title .more {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--green-color);
  font-size: 1rem;
  font-weight: 900;
}
.allSellerIndex1 .title .more i {
  display: grid;
  align-items: center;
}
.allSellerIndex1 .title .more i svg {
  width: 1.5rem;
  height: 1.5rem;
  color: var(--green-color);
}
.allSellerIndex1 .slider-seller1 {
  margin-top: 1rem;
}
.allSellerIndex1 .slider-seller1 .item {
  padding: 1rem;
  border-radius: 10px;
  background: #fafafb;
}
.allSellerIndex1 .slider-seller1 .item .user1 {
  display: flex;
  align-items: center;
  gap: 1rem;
}
.allSellerIndex1 .slider-seller1 .item .user1 .pic img {
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
}
.allSellerIndex1 .slider-seller1 .item .user1 .des .name {
  font-size: 0.95rem;
  font-weight: 700;
  color: #000;
}
.allSellerIndex1 .slider-seller1 .item .user1 .des .loc {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.7rem;
  font-weight: 300;
  color: #000;
}
.allSellerIndex1 .slider-seller1 .item .user1 .des .loc i {
  display: grid;
  align-items: center;
}
.allSellerIndex1 .slider-seller1 .item .user1 .des .loc i svg {
  width: 0.7rem;
  height: 0.7rem;
  fill: #444;
}
.allSellerIndex1 .slider-seller1 .item .products {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin-top: 1rem;
  gap: 1rem;
}
.allSellerIndex1 .slider-seller1 .item .products .pro {
  padding: 0.5rem;
  border: 1px solid #eee;
  border-radius: 10px;
  background: white;
}
.allSellerIndex1 .slider-seller1 .item .products .pro img {
  height: 5rem;
  border-radius: 10px;
  object-fit: contain;
}
.allSellerIndex1 .slider-seller1 .owl-nav {
  display: block !important;
}
.allSellerIndex1 .slider-seller1 .owl-nav .owl-next, .allSellerIndex1 .slider-seller1 .owl-nav .owl-prev {
  padding: 0.5rem;
  background: white !important;
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto;
  right: -3rem;
  border: 2px solid #eee !important;
  font-size: 1.5rem !important;
  border-radius: 5px;
  color: #000 !important;
  height: 2.6rem;
  display: grid;
  align-items: center;
  justify-content: center;
  width: 2.6rem;
}
.allSellerIndex1 .slider-seller1 .owl-nav .owl-next span, .allSellerIndex1 .slider-seller1 .owl-nav .owl-prev span {
  font-size: 2.6rem;
  line-height: 1rem;
}
.allSellerIndex1 .slider-seller1 .owl-nav .owl-next {
  left: -3rem;
  right: auto;
}
@media screen and (max-width: 700px) {
  .allSellerIndex1 {
    padding: 1rem 0.5rem;
    border-radius: 0;
    border-right: 0;
    border-left: 0;
    width: 100% !important;
  }
  .allSellerIndex1 .title .names .name {
    font-size: 0.9rem;
  }
  .allSellerIndex1 .title .names p {
    font-size: 0.8rem;
  }
  .allSellerIndex1 .title .more {
    gap: 0.2rem;
    font-size: 0.8rem;
  }
  .allSellerIndex1 .title .more i svg {
    width: 1.2rem;
    height: 1.2rem;
  }
  .allSellerIndex1 .slider-seller1 .owl-nav {
    display: none !important;
  }
}

.allDiscoveryIndex {
  margin: auto;
}
.allDiscoveryIndex .top .title {
  font-size: 1.1rem;
  font-weight: 900;
  color: #000;
  margin-bottom: 1rem;
}
.allDiscoveryIndex .top .options {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  grid-gap: 1rem;
  margin-bottom: 1rem;
}
.allDiscoveryIndex .top .options .right {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
}
.allDiscoveryIndex .top .options .right .option {
  font-size: 0.8rem;
  font-weight: 700;
  color: #444;
  padding: 0.2rem 1rem;
  border: 2px solid #eee;
  border-radius: 5px;
}
.allDiscoveryIndex .top .options .left .more {
  display: flex;
  align-items: center;
  gap: 0.2rem;
  color: var(--green-color);
  font-size: 0.8rem;
  font-weight: 900;
}
.allDiscoveryIndex .top .options .left .more i {
  display: grid;
  align-items: center;
}
.allDiscoveryIndex .top .options .left .more i svg {
  width: 1.2rem;
  height: 1.2rem;
  color: var(--green-color);
}
.allDiscoveryIndex .items {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr));
  grid-gap: 1rem;
  margin-top: 1rem;
}
.allDiscoveryIndex .items .story-item {
  text-align: center;
  cursor: pointer;
  position: relative;
  border-radius: 10px;
  overflow: hidden;
}
.allDiscoveryIndex .items .story-item .story-thumb {
  height: 20rem;
  overflow: hidden;
  background: white;
  display: flex;
  align-items: center;
  justify-content: center;
}
.allDiscoveryIndex .items .story-item .story-thumb .story-pic {
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.allDiscoveryIndex .items .story-item .story-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.allDiscoveryIndex .items .story-item .user1 {
  position: absolute;
  bottom: 0;
  right: 0;
  left: 0;
  padding: 0.5rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.8rem;
  font-weight: 700;
  color: white;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.5));
}
.allDiscoveryIndex .items .story-item .user1 img {
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  object-fit: cover;
}
.allDiscoveryIndex .items .story-item .story-i {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  display: grid;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  height: 1.5rem;
  width: 1.5rem;
}
.allDiscoveryIndex .items .story-item .story-i svg {
  width: 1.5rem;
  height: 1.5rem;
  fill: white;
}
.allDiscoveryIndex .showA {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  grid-gap: 1rem;
  align-items: center;
  padding-top: 3rem;
  position: relative;
}
.allDiscoveryIndex .showA .bar {
  height: 2px;
  background: #eee;
}
.allDiscoveryIndex .showA a {
  background: var(--green-color);
  padding: 0.5rem 1rem;
  border-radius: 10px;
  font-size: 1rem;
  font-weight: 700;
  color: white;
}
.allDiscoveryIndex .showA:before {
  content: "";
  position: absolute;
  bottom: 100%;
  right: 0;
  left: 0;
  background: linear-gradient(rgba(255, 255, 255, 0), rgb(255, 255, 255));
  height: 10rem;
  pointer-events: none;
}
.allDiscoveryIndex .story-viewer {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.85);
  display: none;
  z-index: 9999;
}
.allDiscoveryIndex .viewer-inner {
  width: 420px;
  max-width: 98%;
  height: 720px;
  max-height: 92%;
  background: #000;
  border-radius: 12px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
.allDiscoveryIndex .viewer-header {
  padding: 10px;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 8px;
  align-items: center;
}
.allDiscoveryIndex .progresses {
  flex: 1;
  display: flex;
  gap: 6px;
}
.allDiscoveryIndex .progress {
  height: 4px;
  background: rgba(255, 255, 255, 0.25);
  flex: 1;
  border-radius: 2px;
  overflow: hidden;
}
.allDiscoveryIndex .progress > i {
  display: block;
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, #fff, #ddd);
}
.allDiscoveryIndex .viewer-meta {
  display: flex;
  gap: 10px;
  align-items: center;
}
.allDiscoveryIndex .viewer-meta img {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
}
.allDiscoveryIndex .viewer-meta .name {
  font-size: 1rem;
  font-weight: 700;
  color: white;
}
.allDiscoveryIndex .viewer-body {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.allDiscoveryIndex .viewer-body img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}
.allDiscoveryIndex .viewer-body video {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}
.allDiscoveryIndex .viewer-controls {
  padding: 10px;
  display: flex;
  justify-content: center;
  gap: 8px;
  position: absolute;
  bottom: 1rem;
  right: 0;
  left: 0;
  z-index: 10;
}
.allDiscoveryIndex .viewer-controls button {
  background: white;
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #000;
  padding: 6px 10px;
  border-radius: 8px;
  cursor: pointer;
}
@media screen and (max-width: 1000px) {
  .allDiscoveryIndex .top .options {
    display: block;
    margin-bottom: 1rem;
  }
  .allDiscoveryIndex .top .options .right {
    overflow-x: scroll;
    flex-wrap: nowrap;
    padding-bottom: 0.5rem;
  }
  .allDiscoveryIndex .top .options .right .option {
    font-size: 0.8rem;
    padding: 0.2rem 0.5rem;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .allDiscoveryIndex .top .options .left {
    display: none;
  }
  .allDiscoveryIndex .items {
    grid-template-columns: 1fr 1fr;
    grid-gap: 0.5rem;
    margin-top: 0;
  }
  .allDiscoveryIndex .items .story-item {
    border-radius: 10px;
  }
  .allDiscoveryIndex .items .story-item .story-thumb {
    height: 15rem;
  }
  .allDiscoveryIndex .showA a {
    padding: 0.5rem 2rem;
    font-size: 0.8rem;
  }
  .allDiscoveryIndex .showA:before {
    height: 5rem;
  }
  .allDiscoveryIndex .viewer-inner {
    width: 100%;
    max-width: 100%;
    height: 100%;
    max-height: 100%;
    left: auto;
    top: auto;
    inset: 0;
    transform: unset;
  }
}

.AllBigIndex3 {
  position: relative;
  z-index: 0;
  margin: auto;
  border-radius: 20px;
  overflow: hidden;
}
.AllBigIndex3 .slider-big2 .item {
  border-radius: 20px;
  overflow: hidden;
  display: grid;
}
.AllBigIndex3 .slider-big2 img {
  width: 100%;
  object-fit: cover;
}
.AllBigIndex3 .slider-big2 .owl-dots {
  position: absolute;
  bottom: 1rem;
  right: 0;
  left: 0;
  display: flex;
  justify-content: center;
  gap: 0.5rem;
}
.AllBigIndex3 .slider-big2 .owl-dots .owl-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: white;
}
.AllBigIndex3 .slider-big2 .owl-dots .owl-dot.active {
  background: var(--green-color);
}
.AllAdIndex3 {
  margin-top: 1rem;
}
.AllAdIndex3 .slider-ad3 {
  min-width: 0;
}
.AllAdIndex3 .slider-ad3 .item {
  overflow: hidden;
  display: grid;
  border-radius: 20px;
}
.AllAdIndex3 .slider-ad3 img {
  width: 100%;
  object-fit: cover;
}
.AllAdIndex3 .slider-ad3 .owl-dots {
  position: absolute;
  bottom: 1rem;
  right: 0;
  left: 0;
  display: flex;
  justify-content: center;
  gap: 0.5rem;
}
.AllAdIndex3 .slider-ad3 .owl-dots .owl-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: white;
}
.AllAdIndex3 .slider-ad3 .owl-dots .owl-dot.active {
  background: var(--green-color);
}
@media screen and (max-width: 1000px) {
  .AllAdIndex3 {
    display: block;
    margin: 0.5rem;
  }
  .AllAdIndex3 .slider-ad3 .item {
    border-radius: 10px;
  }
}

.AllAdIndex4 {
  margin: auto;
  margin-top: 1rem;
  display: grid;
  grid-template-columns: 20rem 1fr;
  grid-gap: 1rem;
}
.AllAdIndex4 .cats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 0.5rem;
}
.AllAdIndex4 .cats .item {
  padding: 1rem;
  border-radius: 15px;
  font-size: 0.9rem;
  font-weight: 700;
  color: #000;
  overflow: hidden;
  background: white;
  box-shadow: 0 4px 16px 0 rgba(36, 43, 61, 0.1);
  z-index: 1;
  border: 1px solid #eee;
}
.AllAdIndex4 .cats .item .pic {
  display: grid;
  justify-content: center;
}
.AllAdIndex4 .cats .item .pic img {
  height: 3rem;
  object-fit: contain;
}
.AllAdIndex4 .cats .item .name {
  margin-top: 0.5rem;
  text-align: center;
}
.AllAdIndex4 .slider-ad2 {
  min-width: 0;
  height: 100%;
}
.AllAdIndex4 .slider-ad2 .owl-stage, .AllAdIndex4 .slider-ad2 .owl-stage-outer, .AllAdIndex4 .slider-ad2 .owl-item {
  height: 100%;
}
.AllAdIndex4 .slider-ad2 img {
  border-radius: 20px;
  height: 100%;
  width: 100%;
  object-fit: cover;
}
.AllAdIndex4 .slider-ad2 .owl-dots {
  position: absolute;
  bottom: 1rem;
  right: 0;
  left: 0;
  display: flex;
  justify-content: center;
  gap: 0.5rem;
}
.AllAdIndex4 .slider-ad2 .owl-dots .owl-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: white;
}
.AllAdIndex4 .slider-ad2 .owl-dots .owl-dot.active {
  background: var(--green-color);
}
@media screen and (max-width: 1000px) {
  .AllAdIndex4 {
    display: block;
    margin-top: 0.5rem;
  }
  .AllAdIndex4 .cats {
    margin-bottom: 1rem;
  }
  .AllAdIndex4 .cats .item {
    padding: 0.5rem;
    font-size: 0.7rem;
    border-radius: 10px;
  }
  .AllAdIndex4 .cats .item .pic img {
    height: 3rem;
  }
  .AllAdIndex4 .cats .item .name {
    font-size: 0.8rem;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
  }
  .AllAdIndex4 .slider-ad2 img {
    border-radius: 10px;
  }
}

.AllAdIndex5 {
  margin: auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 1rem;
}
.AllAdIndex5 .right {
  border-radius: 15px;
  overflow: hidden;
}
.AllAdIndex5 .right img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.AllAdIndex5 .left .top {
  border-radius: 15px;
  overflow: hidden;
}
.AllAdIndex5 .left .top img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.AllAdIndex5 .left .bot {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
  grid-gap: 1rem;
  margin-top: 1rem;
}
.AllAdIndex5 .left .bot img {
  border-radius: 15px;
  overflow: hidden;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
@media screen and (max-width: 1000px) {
  .AllAdIndex5 {
    grid-template-columns: 1fr;
    grid-gap: 0.5rem;
    margin-top: 0.5rem;
  }
  .AllAdIndex5 .left .bot {
    grid-gap: 0.5rem;
    margin-top: 0.5rem;
  }
}

.AllAdIndex6 {
  margin: auto;
  display: grid;
  grid-template-columns: 2fr 1fr;
  align-items: start;
  grid-gap: 1rem;
  margin-top: 1rem;
}
.AllAdIndex6 .right {
  position: relative;
}
.AllAdIndex6 .right .slider-ad6-banner {
  display: grid;
  position: relative;
}
.AllAdIndex6 .right .slider-ad6-banner img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 20px;
}
.AllAdIndex6 .right .slider-ad6-banner .owl-nav {
  position: absolute;
  bottom: -8px;
  left: -8px;
  background: var(--green-color);
  border-radius: 4rem;
  width: 8rem;
  padding: 0.4rem;
  display: flex;
  justify-content: space-around;
  border: 8px solid var(--back4-color);
  z-index: 3;
}
.AllAdIndex6 .right .slider-ad6-banner .owl-nav button {
  color: #000;
  display: grid;
  height: 1.7rem;
  width: 1.7rem;
  align-items: center;
  background: white;
  border-radius: 50%;
}
.AllAdIndex6 .right .slider-ad6-banner .owl-nav button span {
  font-size: 1.5rem;
  line-height: 1rem;
}
.AllAdIndex6 .right .slider-ad6-banner .owl-dots {
  position: absolute;
  right: 1rem;
  top: 0;
  bottom: 0;
  display: grid;
  align-content: center;
  gap: 0.5rem;
}
.AllAdIndex6 .right .slider-ad6-banner .owl-dots button span {
  background: white;
  width: 8px;
  height: 8px;
  display: grid;
  border-radius: 50%;
}
.AllAdIndex6 .right .slider-ad6-banner .owl-dots .active span {
  height: 25px;
  background: var(--green-color);
  border-radius: 5rem;
}
.AllAdIndex6 .right .triangle-wrapper1 {
  position: absolute;
  bottom: 1.03rem;
  left: -1.6rem;
  z-index: 2;
  transform: rotate(-5deg);
}
.AllAdIndex6 .right .triangle-wrapper1 i svg {
  width: 3rem;
  height: 3rem;
  fill: var(--back4-color);
}
.AllAdIndex6 .right .triangle-wrapper2 {
  position: absolute;
  bottom: -1.9rem;
  left: 5.8rem;
  z-index: 2;
  transform: rotate(-2deg);
}
.AllAdIndex6 .right .triangle-wrapper2 i svg {
  width: 3rem;
  height: 3rem;
  fill: var(--back4-color);
}
.AllAdIndex6 .left {
  background: white;
  border-radius: 15px;
  overflow: hidden;
  border: 1px solid #eee;
}
.AllAdIndex6 .left .titles {
  padding: 0.5rem;
  font-size: 1rem;
  font-weight: 700;
  color: #000;
  position: relative;
  z-index: 2;
  background: var(--back2-color);
}
.AllAdIndex6 .left .products {
  position: relative;
  z-index: 1;
}
.AllAdIndex6 .left .products .slider-ad6-product {
  display: grid;
}
.AllAdIndex6 .left .products .slider-ad6-product .item {
  padding: 1rem;
  display: grid;
  position: relative;
  z-index: 1;
  border-left: 1px solid #eee;
}
.AllAdIndex6 .left .products .slider-ad6-product .item .pic {
  display: grid;
  justify-content: center;
  position: relative;
}
.AllAdIndex6 .left .products .slider-ad6-product .item .pic img {
  width: 100%;
  height: 12rem;
  object-fit: contain;
}
.AllAdIndex6 .left .products .slider-ad6-product .item .pic .off {
  position: absolute;
  right: 0;
  top: 0;
  background: red;
  color: white;
  font-size: 0.8rem;
  font-weight: 700;
  border-radius: 10px;
  padding: 0.2rem 0.5rem;
}
.AllAdIndex6 .left .products .slider-ad6-product .item .title {
  font-size: 0.9rem;
  font-weight: 500;
  color: #000;
  margin-top: 1rem;
  height: 3rem;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  text-overflow: ellipsis;
}
.AllAdIndex6 .left .products .slider-ad6-product .item .prices {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  align-items: center;
  margin-top: 1rem;
}
.AllAdIndex6 .left .products .slider-ad6-product .item .prices .priceF {
  text-align: left;
  font-size: 1rem;
  font-weight: 700;
  color: black;
}
.AllAdIndex6 .left .products .slider-ad6-product .item .prices .priceF span {
  font-size: 0.8rem;
  opacity: 0.7;
}
.AllAdIndex6 .left .products .slider-ad6-product .item .content {
  display: grid;
  align-items: end;
  font-size: 0.9rem;
  font-weight: 700;
  color: #000;
  margin-top: 1rem;
}
.AllAdIndex6 .left .products .slider-ad6-product .item .content span {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
@media screen and (max-width: 1000px) {
  .AllAdIndex6 {
    grid-template-columns: 1fr;
    grid-gap: 0.5rem;
    margin-top: 0.5rem;
  }
  .AllAdIndex6 .right .slider-ad6-banner {
    display: grid;
    position: relative;
  }
  .AllAdIndex6 .right .slider-ad6-banner img {
    border-radius: 10px;
  }
  .AllAdIndex6 .right .slider-ad6-banner .owl-nav, .AllAdIndex6 .right .slider-ad6-banner .owl-dots {
    display: none;
  }
  .AllAdIndex6 .right .triangle-wrapper1, .AllAdIndex6 .right .triangle-wrapper2 {
    display: none;
  }
  .AllAdIndex6 .left .products .slider-ad6-product .item {
    padding: 0.5rem;
  }
  .AllAdIndex6 .left .products .slider-ad6-product .item .pic img {
    height: 9rem;
  }
  .AllAdIndex6 .left .products .slider-ad6-product .item .pic .off {
    font-size: 0.7rem;
    border-radius: 5px;
    padding: 0.1rem 0.3rem;
  }
  .AllAdIndex6 .left .products .slider-ad6-product .item .title {
    font-size: 0.75rem;
    height: 2.5rem;
  }
}

.AllAdIndex7 {
  margin: auto;
  margin-top: 1rem;
  position: relative;
  overflow: hidden;
}
.AllAdIndex7 .slider-ad6-banner {
  display: grid;
  position: relative;
}
.AllAdIndex7 .slider-ad6-banner img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 20px;
}
.AllAdIndex7 .slider-ad6-banner .owl-nav {
  position: absolute;
  right: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  grid-gap: 17rem;
  bottom: -8px;
}
.AllAdIndex7 .slider-ad6-banner .owl-nav button {
  color: white !important;
  display: grid;
  height: 3rem;
  width: 2rem;
  align-items: center;
  background: var(--green-color) !important;
  border-top-right-radius: 10px;
  border-top-left-radius: 10px;
  transform: rotate(13deg);
}
.AllAdIndex7 .slider-ad6-banner .owl-nav button span {
  font-size: 1.5rem;
  line-height: 1rem;
  transform: rotate(-13deg);
}
.AllAdIndex7 .slider-ad6-banner .owl-nav button:first-child {
  transform: rotate(-13deg);
}
.AllAdIndex7 .slider-ad6-banner .owl-nav button:first-child span {
  transform: rotate(13deg);
}
.AllAdIndex7 .slider-ad6-banner .owl-dots {
  position: absolute;
  right: 0;
  left: 0;
  bottom: -0.5rem;
  display: flex;
  justify-items: center;
  justify-content: center;
  align-content: center;
  gap: 0.5rem;
  width: 15rem;
  height: 3rem;
  background: white;
  padding: 0.8rem 1rem;
  border-radius: 10px;
  margin: auto;
}
.AllAdIndex7 .slider-ad6-banner .owl-dots button span {
  background: #f1f1f1;
  width: 15px;
  height: 8px;
  display: grid;
  border-radius: 10px;
}
.AllAdIndex7 .slider-ad6-banner .owl-dots .active span {
  width: 35px;
  background: var(--green-color);
}
.AllAdIndex7 .triangle-wrapper1 {
  position: absolute;
  bottom: -3.3rem;
  right: 0;
  z-index: 2;
  left: 14.6rem;
  margin: auto;
  display: grid;
  justify-content: center;
  pointer-events: none;
}
.AllAdIndex7 .triangle-wrapper1 svg {
  fill: white;
  width: 5rem;
  height: 5rem;
}
.AllAdIndex7 .triangle-wrapper2 {
  position: absolute;
  bottom: -3.3rem;
  z-index: 2;
  right: 0;
  left: -14.6rem;
  margin: auto;
  display: grid;
  justify-content: center;
  pointer-events: none;
}
.AllAdIndex7 .triangle-wrapper2 svg {
  fill: white;
  width: 5rem;
  height: 5rem;
}
@media screen and (max-width: 1000px) {
  .AllAdIndex7 {
    margin-top: 0.5rem;
  }
  .AllAdIndex7 .slider-ad6-banner {
    display: grid;
    position: relative;
  }
  .AllAdIndex7 .slider-ad6-banner img {
    border-radius: 10px;
  }
  .AllAdIndex7 .slider-ad6-banner .owl-nav, .AllAdIndex7 .slider-ad6-banner .owl-dots {
    display: none;
  }
  .AllAdIndex7 .triangle-wrapper1, .AllAdIndex7 .triangle-wrapper2 {
    display: none;
  }
}

.AllAdIndex8 {
  position: relative;
  overflow: hidden;
}
.AllAdIndex8 .slider-ad8 {
  display: grid;
  position: relative;
}
.AllAdIndex8 .slider-ad8 img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.AllAdIndex8 .slider-ad8 .owl-nav {
  position: absolute;
  left: 1rem;
  display: flex;
  align-items: center;
  justify-content: left;
  grid-gap: 1rem;
  bottom: 1rem;
}
.AllAdIndex8 .slider-ad8 .owl-nav button {
  color: #000 !important;
  display: grid;
  height: 2.6rem;
  width: 2.6rem;
  align-items: center;
  background: white !important;
  border-radius: 5px;
  border: 1px solid #eee;
}
.AllAdIndex8 .slider-ad8 .owl-nav button span {
  font-size: 2.6rem;
  line-height: 1rem;
}
.AllAdIndex8 .slider-ad8 .owl-dots {
  position: absolute;
  right: 0;
  left: 0;
  bottom: 1rem;
  display: flex;
  justify-items: center;
  justify-content: center;
  align-content: center;
  gap: 0.5rem;
  margin: auto;
}
.AllAdIndex8 .slider-ad8 .owl-dots button span {
  background: #f1f1f1;
  width: 10px;
  height: 10px;
  display: grid;
  border-radius: 10px;
}
.AllAdIndex8 .slider-ad8 .owl-dots .active span {
  width: 35px;
  background: var(--green-color);
}
@media screen and (max-width: 1000px) {
  .AllAdIndex8 {
    margin-top: 0.5rem;
  }
  .AllAdIndex8 .slider-ad8 {
    display: grid;
    position: relative;
  }
  .AllAdIndex8 .slider-ad8 .owl-nav, .AllAdIndex8 .slider-ad8 .owl-dots {
    display: none;
  }
  .AllAdIndex8 .triangle-wrapper1, .AllAdIndex8 .triangle-wrapper2 {
    display: none;
  }
}

.AllAdIndex10 {
  position: relative;
  overflow: hidden;
  margin: auto;
}
.AllAdIndex10 .slider-ad10 {
  display: grid;
  position: relative;
}
.AllAdIndex10 .slider-ad10 img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.AllAdIndex10 .slider-ad10 .owl-nav {
  position: absolute;
  left: 1rem;
  display: flex;
  align-items: center;
  justify-content: left;
  grid-gap: 1rem;
  bottom: 1rem;
}
.AllAdIndex10 .slider-ad10 .owl-nav button {
  color: #000 !important;
  display: grid;
  height: 2.6rem;
  width: 2.6rem;
  align-items: center;
  background: white !important;
  border-radius: 5px;
  border: 1px solid #eee;
}
.AllAdIndex10 .slider-ad10 .owl-nav button span {
  font-size: 2.6rem;
  line-height: 1rem;
}
.AllAdIndex10 .slider-ad10 .owl-dots {
  position: absolute;
  right: 0;
  left: 0;
  bottom: 1rem;
  display: flex;
  justify-items: center;
  justify-content: center;
  align-content: center;
  gap: 0.5rem;
  margin: auto;
}
.AllAdIndex10 .slider-ad10 .owl-dots button span {
  background: #f1f1f1;
  width: 10px;
  height: 10px;
  display: grid;
  border-radius: 10px;
}
.AllAdIndex10 .slider-ad10 .owl-dots .active span {
  width: 35px;
  background: var(--green-color);
}
@media screen and (max-width: 1000px) {
  .AllAdIndex10 .slider-ad10 .owl-nav, .AllAdIndex10 .slider-ad10 .owl-dots {
    display: none;
  }
}

.AllAdIndex11 {
  margin: auto;
  display: grid;
  grid-template-columns: 2fr 1fr;
  grid-gap: 2rem;
  margin-top: 1rem;
}
.AllAdIndex11 .slider-ad11 {
  display: grid !important;
}
.AllAdIndex11 .slider-ad11 .owl-stage {
  height: 100%;
}
.AllAdIndex11 .slider-ad11 .owl-item {
  height: 100%;
  border-radius: 20px;
  overflow: hidden;
}
.AllAdIndex11 .slider-ad11 img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.AllAdIndex11 .slider-ad11 .owl-dots {
  position: absolute;
  right: 0;
  left: 0;
  bottom: 1rem;
  display: flex;
  justify-items: center;
  justify-content: center;
  align-content: center;
  gap: 0.5rem;
  margin: auto;
}
.AllAdIndex11 .slider-ad11 .owl-dots button span {
  background: black;
  width: 8px;
  height: 8px;
  display: grid;
  border-radius: 10px;
}
.AllAdIndex11 .slider-ad11 .owl-dots .active span {
  width: 35px;
  background: white;
}
@media screen and (max-width: 1000px) {
  .AllAdIndex11 {
    display: flex;
    flex-direction: column-reverse;
    grid-gap: 1rem;
  }
}

.AllAdIndex12 {
  margin: auto;
}
.AllAdIndex12 .slider-ad12 {
  display: grid !important;
}
.AllAdIndex12 .slider-ad12 .owl-stage {
  height: 100%;
}
.AllAdIndex12 .slider-ad12 .owl-item {
  height: 100%;
  overflow: hidden;
}
.AllAdIndex12 .slider-ad12 img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.AllAdIndex12 .slider-ad12 .owl-nav {
  position: absolute;
  right: 1rem;
  bottom: 4rem;
  display: none;
  align-items: center;
  justify-content: left;
  grid-gap: 1rem;
}
.AllAdIndex12 .slider-ad12 .owl-nav button {
  color: #000 !important;
  display: grid;
  height: 2.4rem;
  width: 2.4rem;
  align-items: center;
  background: white !important;
  border-radius: 5px;
  border: 1px solid #eee;
}
.AllAdIndex12 .slider-ad12 .owl-nav button span {
  font-size: 2.4rem;
  line-height: 1rem;
}
.AllAdIndex12 .slider-ad12 .owl-dots {
  position: absolute;
  right: 1rem;
  bottom: 1rem;
  display: flex;
  justify-items: right;
  justify-content: right;
  align-content: center;
  gap: 0.5rem;
  margin: auto;
}
.AllAdIndex12 .slider-ad12 .owl-dots button span {
  background: black;
  width: 6px;
  height: 6px;
  display: grid;
  border-radius: 10px;
}
.AllAdIndex12 .slider-ad12 .owl-dots .active span {
  width: 8px;
  height: 25px;
  background: white;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.2588235294);
}
.AllAdIndex12 .slider-ad12:hover .owl-nav {
  display: flex;
}
@media screen and (max-width: 1000px) {
  .AllAdIndex12 .slider-ad12 .owl-dots {
    display: none;
  }
  .AllAdIndex12 .slider-ad12:hover .owl-nav {
    display: none;
  }
}

.allPageIndex {
  margin: auto;
  background: var(--back1-color);
  margin-top: 1rem;
  border-radius: 20px;
  padding: 1rem;
}
.allPageIndex h1 {
  padding-bottom: 1rem;
  font-size: 1.6rem;
  font-weight: 700;
  color: #000;
  border-bottom: 2px solid rgb(238, 238, 241);
  margin-bottom: 1rem;
}
.allPageIndex .description p {
  font-size: 1rem;
  font-weight: 300;
  color: #000;
  line-height: 2.25;
  border-radius: 10px;
}
.allPageIndex .description .image {
  display: grid;
  justify-content: center;
}
.allPageIndex .pageContainer {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 1rem;
}
.allPageIndex .pageContainer #map4 {
  z-index: 1;
}
.allPageIndex .pageContainer .mapp-container {
  height: 20rem !important;
}

.allTrackIndex {
  margin: 2rem auto;
}
.allTrackIndex .topT {
  background: white;
  border: 1px solid #eee;
  box-shadow: 0px 4px 24px 0px rgba(0, 0, 0, 0.1);
  border-radius: 15px;
  overflow: hidden;
}
.allTrackIndex .topT .title {
  padding: 1rem;
  background: var(--green-color);
  font-size: 1.3rem;
  font-weight: 900;
  color: white;
}
.allTrackIndex .topT .createFilled {
  padding: 1rem;
  padding-top: 0;
}
.allTrackIndex .topT .createFilled .items {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
  grid-gap: 1rem;
}
.allTrackIndex .topT .createFilled .item {
  display: grid;
  grid-gap: 0.5rem;
  margin-top: 1rem;
}
.allTrackIndex .topT .createFilled .item label {
  font-size: 0.9rem;
  font-weight: 700;
  color: #000;
}
.allTrackIndex .topT .createFilled .item label .note {
  color: red;
}
.allTrackIndex .topT .createFilled .item label .ltr {
  direction: ltr;
}
.allTrackIndex .topT .createFilled .item label .guide {
  font-size: 0.8rem;
  font-weight: 300;
}
.allTrackIndex .topT .createFilled .item input, .allTrackIndex .topT .createFilled .item select, .allTrackIndex .topT .createFilled .item textarea {
  padding: 0.5rem;
  border: 1px solid #eee;
  background: transparent;
  border-radius: 10px;
  font-size: 1rem;
  resize: vertical;
}
.allTrackIndex .topT .createFilled .item textarea {
  height: 15rem;
}
.allTrackIndex .topT .createFilled .item .alert2 {
  display: none;
}
.allTrackIndex .topT .createFilled .item .cke_top {
  background: #f5f5f5;
  border-bottom: 0;
}
.allTrackIndex .topT .createFilled .item .cke_bottom {
  background: #f5f5f5;
  border-top: 0;
}
.allTrackIndex .topT .createFilled .item .cke_chrome {
  border: 1px solid #eee;
  border-radius: 10px;
}
.allTrackIndex .topT .createFilled .button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  margin-top: 1rem;
}
.allTrackIndex .topT .createFilled .button button, .allTrackIndex .topT .createFilled .button .cancelEdit {
  border-radius: 5px;
  color: white;
  background: green;
  font-size: 1rem;
  font-weight: 500;
  padding: 0.3rem 1rem;
}
.allTrackIndex .topT .createFilled .button .cancelEdit {
  background: red;
}
.allTrackIndex .botT {
  background: white;
  border: 1px solid #eee;
  box-shadow: 0px 4px 24px 0px rgba(0, 0, 0, 0.1);
  border-radius: 15px;
  overflow: hidden;
  margin-top: 1rem;
}
.allTrackIndex .botT .tables table {
  width: 100%;
  border-collapse: collapse;
}
.allTrackIndex .botT .tables table tr {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(1rem, 1fr));
  grid-gap: 1rem;
  align-items: center;
  padding: 1rem;
  border-bottom: 1px solid #eee;
}
.allTrackIndex .botT .tables table tr i {
  display: grid;
  align-items: center;
  cursor: pointer;
}
.allTrackIndex .botT .tables table tr i svg {
  width: 1.5rem;
  height: 1.5rem;
  color: gray;
}
.allTrackIndex .botT .tables table tr th {
  font-weight: 900;
  color: gray;
  font-size: 0.9rem;
  text-align: right;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
.allTrackIndex .botT .tables table tr td {
  font-weight: 500;
  font-size: 0.9rem;
  text-align: right;
  color: gray;
}
.allTrackIndex .botT .tables table tr td .activeS select {
  border: 1px solid green;
  background: #d1ffd1;
  color: green;
}
.allTrackIndex .botT .tables table tr td .unActiveS select {
  border: 1px solid red;
  background: #ffe0e0;
  color: red;
}
.allTrackIndex .botT .tables table tr td .status100 {
  display: flex;
  align-items: center;
  gap: 5px;
  color: #00a300;
}
.allTrackIndex .botT .tables table tr td .status100:before {
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #00a300;
}
.allTrackIndex .botT .tables table tr td .status0 {
  display: flex;
  align-items: center;
  gap: 5px;
  color: red;
}
.allTrackIndex .botT .tables table tr td .status0:before {
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: red;
}
.allTrackIndex .botT .tables table tr td i svg {
  color: red;
}
.allTrackIndex .botT .tables table tr:last-child {
  border-bottom: 0;
}
.allTrackIndex .botT .tables table tr:first-child {
  background: #F6F8FB;
}
@media screen and (max-width: 800px) {
  .allTrackIndex .topT .title {
    padding: 0.5rem;
    font-size: 1rem;
  }
  .allTrackIndex .topT .createFilled {
    padding: 0.5rem;
    padding-top: 0;
  }
  .allTrackIndex .topT .createFilled .items {
    grid-template-columns: 1fr;
  }
  .allTrackIndex .botT .tables {
    overflow-x: scroll;
  }
  .allTrackIndex .botT .tables table tr {
    display: grid;
    grid-template-columns: repeat(6, 10rem);
    padding: 1rem 0.5rem;
  }
}

.authIndex {
  background: rgba(0, 0, 0, 0.5);
  z-index: 4000;
  position: fixed;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-columns: 1fr;
  justify-content: center;
  place-items: center;
  align-items: center;
}
.authIndex .login {
  width: 30%;
  padding: 2rem;
  background: white;
  display: grid;
  grid-template-columns: 1fr;
  border-radius: 15px;
  overflow: hidden;
  position: relative;
}
.authIndex .login .top .close {
  position: absolute;
  top: 0.5rem;
  left: 0.5rem;
}
.authIndex .login .top .close svg {
  width: 1.5rem;
  height: 1.5rem;
  fill: #444;
}
.authIndex .login .top .pic {
  display: grid;
  justify-content: center;
}
.authIndex .login .top .pic img {
  height: 5rem;
  object-fit: contain;
}
.authIndex .login .top .title {
  color: black;
  text-align: center;
  font-size: 1.5rem;
  font-weight: 700;
  margin: 1rem 0;
}
.authIndex .login .top input {
  background: white;
  border: 2px solid #eee;
  padding: 0.7rem;
  font-size: 1rem;
  font-weight: 500;
  color: #000;
  text-align: center;
  border-radius: 10px;
  transition: all 0.3s ease-in-out;
}
.authIndex .login .top input:focus-visible {
  border: 2px solid var(--green-color);
}
.authIndex .login .top button {
  padding: 0.5rem;
  background: var(--green-color);
  font-size: 1rem;
  font-weight: 500;
  color: white;
  border-radius: 10px;
}
.authIndex .login .top button:last-child {
  background: black;
  color: white;
}
.authIndex .login .top .buttons {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
  grid-gap: 1rem;
  align-items: center;
}
.authIndex .login .top .authItems {
  display: grid;
  grid-template-columns: 1fr;
  grid-gap: 1rem;
}
.authIndex .login .top p {
  font-size: 0.8rem;
  margin-top: 0.5rem;
  font-weight: 300;
  color: #000;
  text-align: center;
}
.authIndex .login .reset-code {
  display: none;
}

@media screen and (max-width: 1000px) {
  .authIndex .login {
    width: 100%;
    position: absolute;
    right: 0;
    left: 0;
    bottom: 0;
    border-radius: 15px;
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
  }
  .authIndex .login .bot {
    text-align: center;
    margin-top: 1rem;
  }
}
.allFileSingle {
  margin: auto;
  margin-top: 1rem;
}
.allFileSingle .topFile {
  display: grid;
  grid-template-columns: 1fr 25rem;
  grid-gap: 2rem;
  background: white;
  padding: 2rem;
  border-radius: 10px;
  box-shadow: 0 1.6px 61px rgba(0, 0, 0, 0.05);
}
.allFileSingle .topFile .right h1 {
  font-size: 2rem;
  font-weight: 900;
  color: #444;
  margin-bottom: 1rem;
}
.allFileSingle .topFile .right p {
  font-size: 1rem;
  font-weight: 500;
  color: #000;
  margin-bottom: 1rem;
  line-height: 2rem;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  text-overflow: ellipsis;
  opacity: 0.7;
}
.allFileSingle .topFile .right .options {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-gap: 1rem;
}
.allFileSingle .topFile .right .options .add {
  display: flex;
  justify-content: right;
  align-items: center;
  gap: 1rem;
}
.allFileSingle .topFile .right .options .add button {
  background: green;
  padding: 0.7rem 1rem;
  border-radius: 10px;
  display: flex;
  justify-content: right;
  align-items: center;
  gap: 1rem;
  font-size: 1rem;
  font-weight: 700;
  color: white;
  width: 15rem;
  transition: all 0.3s ease-in-out;
}
.allFileSingle .topFile .right .options .add button i {
  display: grid;
  align-items: center;
}
.allFileSingle .topFile .right .options .add button i svg {
  width: 1.5rem;
  height: 1.5rem;
  fill: white;
}
.allFileSingle .topFile .right .options .add .delete {
  background: red;
}
.allFileSingle .topFile .right .options .price {
  display: flex;
  align-items: center;
  gap: 0.2rem;
  font-size: 2rem;
  font-weight: 900;
  color: var(--green-color);
}
.allFileSingle .topFile .right .options .price:after {
  content: "\f06c︎";
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  letter-spacing: normal;
  font-family: digikala;
  font-size: 1.4rem;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-style: normal;
  font-variant: normal;
  font-weight: 400;
  text-decoration: none;
  text-transform: none;
  line-height: 1;
  box-sizing: inherit;
}
.allFileSingle .topFile .left img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  overflow: hidden;
  border-radius: 10px;
}
.allFileSingle .botFile {
  display: grid;
  grid-template-columns: 1fr 20rem;
  grid-gap: 1rem;
  margin-top: 2rem;
}
.allFileSingle .botFile .right .tabs {
  background: white;
  border-radius: 10px;
  display: flex;
  gap: 1rem;
  margin-bottom: 1rem;
  box-shadow: 0 5px 5px rgba(0, 0, 0, 0.01);
}
.allFileSingle .botFile .right .tabs .tab {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 1rem;
  font-size: 0.9rem;
  color: #444;
  font-weight: 700;
  text-align: center;
}
.allFileSingle .botFile .right .tabs .tab:before {
  content: "";
  display: grid;
  background: #444;
  width: 8px;
  height: 8px;
  border-radius: 50%;
}
.allFileSingle .botFile .right .tabs .tab:first-child {
  color: var(--green-color);
}
.allFileSingle .botFile .right .tabs .tab:first-child:before {
  background: var(--green-color);
}
.allFileSingle .botFile .right .description {
  margin-top: 1rem;
  background: white;
  box-shadow: 0 5px 5px rgba(0, 0, 0, 0.01);
  border-radius: 10px;
  padding: 1rem;
}
.allFileSingle .botFile .right .description .title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 1.2rem;
  font-weight: 900;
  color: var(--green-color);
}
.allFileSingle .botFile .right .description .title:before {
  content: "";
  width: 10px;
  height: 10px;
  display: grid;
  border-radius: 100%;
  background: var(--green-color);
}
.allFileSingle .botFile .right .description .body p {
  font-size: 1rem;
  font-weight: 500;
  color: #000;
  margin-top: 1rem;
}
.allFileSingle .botFile .right .description .body .image {
  display: grid;
  justify-content: center;
  margin: 1rem 0;
}
.allFileSingle .botFile .right .description .body strong {
  font-weight: 900;
}
.allFileSingle .botFile .right .description .body img {
  object-fit: cover !important;
  height: 600px !important;
  width: 100% !important;
  margin: 20px 0 !important;
}
.allFileSingle .botFile .right .description .body ul, .allFileSingle .botFile .right .description .body ol {
  margin: 1rem;
}
.allFileSingle .botFile .right .description .body ul li, .allFileSingle .botFile .right .description .body ol li {
  list-style: decimal;
  margin-top: 1rem;
  font-size: 0.9rem;
}
.allFileSingle .botFile .right .description .body ul ul, .allFileSingle .botFile .right .description .body ol ul {
  margin: 0;
  margin-top: 1rem;
  margin-right: 1rem;
}
.allFileSingle .botFile .right .description .body ul li {
  list-style: disc;
}
.allFileSingle .botFile .right .description .body table {
  margin: 1rem 0;
  border: 1px solid #eee;
  width: 100%;
}
.allFileSingle .botFile .right .description .body table thead tr {
  background: #eee;
}
.allFileSingle .botFile .right .description .body table tr {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(1px, 1fr));
  align-items: center;
  grid-gap: 1rem;
  padding: 1rem;
}
.allFileSingle .botFile .right .description .body table tr th {
  font-weight: 700;
  color: #000;
  font-size: 0.85rem;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  display: grid;
  align-items: center;
  justify-content: center;
}
.allFileSingle .botFile .right .description .body table tr td {
  font-weight: 300;
  font-size: 0.85rem;
  text-align: center;
  color: #000;
}
.allFileSingle .botFile .right .description .body table tr td p {
  font-weight: 300;
  font-size: 0.85rem;
  text-align: center;
  color: #000;
  margin-bottom: 0;
  line-height: unset;
}
.allFileSingle .botFile .right .description .body table tr td img {
  width: 2.5rem;
  height: 2.5rem;
  object-fit: cover;
  border-radius: 5rem;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
.allFileSingle .botFile .right .description .body table tr td a {
  display: grid;
  align-items: center;
}
.allFileSingle .botFile .right .description .body table tr td a svg {
  margin-left: 0.5rem;
}
.allFileSingle .botFile .right .description .body table tr:nth-child(even) {
  background: #eee;
}
.allFileSingle .botFile .right .description .body h2, .allFileSingle .botFile .right .description .body h3, .allFileSingle .botFile .right .description .body h4 {
  margin-top: 1rem;
}
.allFileSingle .botFile .right .description .body h2 {
  font-size: 1.5rem;
}
.allFileSingle .botFile .right .description .body h3 {
  font-size: 1.3rem;
}
.allFileSingle .botFile .right .description .body h4 {
  font-size: 1.2rem;
}
.allFileSingle .botFile .right .files1 {
  background: white;
  box-shadow: 0 5px 5px rgba(0, 0, 0, 0.01);
  border-radius: 10px;
  margin-top: 1rem;
  padding: 1rem;
}
.allFileSingle .botFile .right .files1 .title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 1.2rem;
  font-weight: 900;
  color: var(--green-color);
}
.allFileSingle .botFile .right .files1 .title:before {
  content: "";
  width: 10px;
  height: 10px;
  display: grid;
  border-radius: 100%;
  background: var(--green-color);
}
.allFileSingle .botFile .right .files1 .course .files .file {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 1rem;
  align-items: center;
  border: 1px solid #eee;
  padding: 1rem;
  border-radius: 10px;
  margin-top: 1rem;
  background: #f9f9f9;
}
.allFileSingle .botFile .right .files1 .course .files .file .number {
  width: 3rem;
  padding-left: 1rem;
  border-left: 2px solid #eee;
}
.allFileSingle .botFile .right .files1 .course .files .file .number .number1 {
  display: grid;
  justify-items: center;
  font-size: 1.5rem;
  font-weight: 900;
  color: #000;
}
.allFileSingle .botFile .right .files1 .course .files .file .number .number1:after {
  content: "";
  width: 80%;
  height: 4px;
  border-radius: 5px;
  background: #000;
}
.allFileSingle .botFile .right .files1 .course .files .file .name {
  font-size: 1rem;
  font-weight: 500;
  color: #000;
}
.allFileSingle .botFile .right .files1 .course .files .file .download {
  display: flex;
  justify-items: center;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  border-radius: 5px;
  background: var(--green-color);
  color: white;
  font-weight: 300;
  font-size: 0.9rem;
}
.allFileSingle .botFile .right .files1 .course .files .file .download i {
  display: grid;
  align-items: center;
}
.allFileSingle .botFile .right .files1 .course .files .file .download i svg {
  width: 1rem;
  height: 1rem;
  fill: white;
}
.allFileSingle .botFile .right .files1 .warn {
  background: rgba(255, 0, 0, 0.1);
  padding: 3rem;
  border-radius: 10px;
  display: grid;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  font-weight: 900;
  color: red;
  margin-top: 1rem;
}
.allFileSingle .botFile .right .comment1 {
  background: white;
  box-shadow: 0 5px 5px rgba(0, 0, 0, 0.01);
  border-radius: 10px;
  margin-top: 1rem;
  padding: 1rem;
}
.allFileSingle .botFile .left .leftShop {
  background: white;
  border-radius: 5px;
  padding: 1rem;
  margin-bottom: 1rem;
}
.allFileSingle .botFile .left .leftShop p {
  font-size: 0.9rem;
  font-weight: 300;
  color: #000;
  opacity: 0.6;
  line-height: 1.9rem;
  text-align: center;
}
.allFileSingle .botFile .left .leftShop .options {
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin-top: 1rem;
}
.allFileSingle .botFile .left .leftShop .options .option {
  margin-bottom: 1rem;
}
.allFileSingle .botFile .left .leftShop .options .option h3 {
  text-align: center;
  font-size: 0.9rem;
  font-weight: 300;
  color: #000;
}
.allFileSingle .botFile .left .leftShop .options .option i {
  display: grid;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}
.allFileSingle .botFile .left .leftShop .options .option i svg {
  width: 1.8rem;
  height: 1.7rem;
  fill: #000;
}
.allFileSingle .botFile .left .details {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 1rem;
}
.allFileSingle .botFile .left .details .detail {
  background: white;
  display: grid;
  justify-content: center;
  justify-items: center;
  text-align: center;
  padding: 0.5rem;
  padding-top: 1rem;
  border-radius: 10px;
}
.allFileSingle .botFile .left .details .detail i {
  display: grid;
  justify-content: center;
  align-items: center;
  padding: 0.5rem;
  border-radius: 5px;
  background: var(--green-color);
  box-shadow: 0 5px 5px rgba(0, 0, 0, 0.2);
}
.allFileSingle .botFile .left .details .detail i svg {
  width: 1.2rem;
  height: 1.2rem;
  fill: white;
  color: white;
}
.allFileSingle .botFile .left .details .detail .title1 {
  font-size: 0.7rem;
  font-weight: 500;
  color: #000;
  opacity: 0.7;
  margin-top: 5px;
}
.allFileSingle .botFile .left .details .detail .body {
  font-size: 0.75rem;
  font-weight: 700;
  color: #444;
}
.allFileSingle .botFile .left .teacher {
  padding: 1rem;
  border-radius: 10px;
  margin-top: 1rem;
  background: white;
  text-align: center;
}
.allFileSingle .botFile .left .teacher .pic {
  display: grid;
  justify-content: center;
  overflow: hidden;
}
.allFileSingle .botFile .left .teacher .pic img {
  border-radius: 50%;
  width: 5rem;
  height: 5rem;
  object-fit: cover;
}
.allFileSingle .botFile .left .teacher .title {
  text-align: center;
  font-size: 1rem;
  font-weight: 900;
  color: #444;
  margin-top: 0.5rem;
  display: grid;
}
.allFileSingle .botFile .left .teacher .role {
  font-size: 0.8rem;
  font-weight: 500;
  color: #000;
  opacity: 0.7;
  margin-bottom: 0.5rem;
}
.allFileSingle .botFile .left .teacher p {
  font-size: 0.9rem;
  font-weight: 500;
  color: #000;
  opacity: 0.7;
}
.allFileSingle .botFile .left .course {
  background: white;
  padding: 1rem;
  border-radius: 10px;
  margin-top: 1rem;
}
.allFileSingle .botFile .left .course .title {
  font-size: 1rem;
  font-weight: 900;
  color: #444;
  margin-bottom: 1rem;
}
.allFileSingle .botFile .left .course .slider-relate .item .pic {
  border-radius: 5px;
  overflow: hidden;
  justify-content: center;
}
.allFileSingle .botFile .left .course .slider-relate .item .title2 {
  font-size: 0.9rem;
  font-weight: 900;
  color: #000;
  text-align: center;
  margin: 0.5rem 0;
}
.allFileSingle .botFile .left .course .slider-relate .item .price {
  font-size: 0.9rem;
  font-weight: 900;
  color: var(--green-color);
  text-align: center;
}
.allFileSingle .botFile .left .start {
  padding: 1rem;
  border-radius: 10px;
  background: white;
  margin-top: 1rem;
}
.allFileSingle .botFile .left .start .title {
  font-size: 1rem;
  font-weight: 900;
  color: #000;
}
.allFileSingle .botFile .left .start p {
  font-size: 0.7rem;
  font-weight: 300;
  color: #000;
}
.allFileSingle .botFile .left .start ul li {
  display: grid;
  margin-top: 0.5rem;
}
.allFileSingle .botFile .left .start ul li a {
  display: flex;
  justify-content: right;
  align-items: center;
  gap: 0.5rem;
  padding: 0.7rem 0;
  font-size: 0.8rem;
  font-weight: 900;
  color: #000;
  border-radius: 3px;
  background: white;
  box-shadow: 0 1.6px 61px rgba(0, 0, 0, 0.05);
}
.allFileSingle .botFile .left .start ul li a:before {
  content: "";
  width: 4px;
  height: 100%;
  display: grid;
  background: var(--green-color);
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
}
@media screen and (max-width: 1000px) {
  .allFileSingle .breadcrumbs {
    margin-bottom: 0.5rem;
  }
  .allFileSingle .breadcrumbs a {
    font-size: 0.7rem;
  }
  .allFileSingle .topSingle {
    display: flex;
    flex-direction: column-reverse;
    gap: 0.5rem;
    padding: 0.5rem;
  }
  .allFileSingle .topSingle .right h1 {
    font-size: 1.2rem;
    margin-bottom: 0.5rem;
  }
  .allFileSingle .topSingle .right p {
    font-size: 0.8rem;
    margin-bottom: 0.5rem;
  }
  .allFileSingle .topSingle .right .options {
    display: flex;
    flex-direction: column-reverse;
    gap: 0.5rem;
  }
  .allFileSingle .topSingle .right .options .add {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.5rem;
  }
  .allFileSingle .topSingle .right .options .add .downloadBtn, .allFileSingle .topSingle .right .options .add button {
    font-size: 1rem;
    width: 100%;
    padding-left: 2rem;
  }
  .allFileSingle .topSingle .right .options .add .downloadBtn i svg, .allFileSingle .topSingle .right .options .add button i svg {
    width: 0.8rem;
    height: 0.8rem;
    fill: #000;
  }
  .allFileSingle .topSingle .right .options .price {
    text-align: left;
    font-size: 1.3rem;
  }
  .allFileSingle .topSingle .right .options .price span {
    font-size: 0.9rem;
  }
  .allFileSingle .botSingle {
    display: block;
    margin-top: 1rem;
  }
  .allFileSingle .botSingle .right .tabs .tab {
    padding: 0.5rem;
    font-size: 0.8rem;
  }
  .allFileSingle .botSingle .right .description {
    margin-top: 0.5rem;
    padding: 0.5rem;
  }
  .allFileSingle .botSingle .right .description .title {
    font-size: 1rem;
    margin-bottom: 0.5rem;
  }
  .allFileSingle .botSingle .right .description .title:before {
    width: 5px;
    height: 5px;
  }
  .allFileSingle .botSingle .right .courses {
    margin-top: 0.5rem;
    padding: 0.5rem;
  }
  .allFileSingle .botSingle .right .courses .title {
    font-size: 1rem;
  }
  .allFileSingle .botSingle .right .courses .title:before {
    width: 5px;
    height: 5px;
  }
  .allFileSingle .botSingle .right .courses .course {
    margin-top: 0.5rem;
  }
  .allFileSingle .botSingle .right .courses .course .title2 {
    padding: 0.5rem;
  }
  .allFileSingle .botSingle .right .courses .course .title2 .name {
    font-size: 0.9rem;
  }
  .allFileSingle .botSingle .right .courses .course .title2 i svg {
    width: 0.9rem;
    height: 0.9rem;
  }
  .allFileSingle .botSingle .right .courses .course .files .file {
    gap: 0.5rem;
    padding: 0.5rem;
    margin-right: 0.5rem;
  }
  .allFileSingle .botSingle .right .courses .course .files .file .number {
    width: 2rem;
    padding-left: 0.5rem;
  }
  .allFileSingle .botSingle .right .courses .course .files .file .number .number1 {
    font-size: 1rem;
  }
  .allFileSingle .botSingle .right .courses .course .files .file .name {
    font-size: 0.8rem;
  }
  .allFileSingle .botSingle .right .courses .course .files .file .downloads {
    gap: 0.5rem;
  }
  .allFileSingle .botSingle .right .courses .course .files .file .download {
    padding: 0.3rem;
    font-size: 0.8rem;
  }
  .allFileSingle .botSingle .right .courses .course .files .file .download i {
    display: none;
  }
  .allFileSingle .botSingle .right .courses .course .files .file .download i svg {
    width: 0.7rem;
    height: 0.7rem;
  }
  .allFileSingle .botSingle .right .courses .course .files .file .showOnline {
    padding: 0.3rem;
    font-size: 0.8rem;
  }
  .allFileSingle .botSingle .right .courses .course .files .file .showOnline i {
    display: none;
  }
  .allFileSingle .botSingle .right .courses .course .files .file .showOnline i svg {
    width: 0.7rem;
    height: 0.7rem;
  }
  .allFileSingle .botSingle .right .courses .course .files .file .lock {
    background: red;
    padding: 0.5rem;
  }
  .allFileSingle .botSingle .right .courses .course .files .file .lock i {
    display: grid;
  }
  .allFileSingle .botSingle .right .comment1 {
    margin-top: 0.5rem;
  }
  .allFileSingle .botSingle .left {
    margin-top: 0.5rem;
  }
  .allFileSingle .botSingle .left .details {
    grid-gap: 0.5rem;
  }
  .allFileSingle .botSingle .left .details .detail i svg {
    width: 1rem;
    height: 1rem;
  }
  .allFileSingle .botSingle .left .teacher {
    padding: 1rem;
    border-radius: 5px;
    border: 1px solid #ddd;
    margin-top: 1rem;
    text-align: center;
  }
  .allFileSingle .botSingle .left .teacher .pic {
    display: grid;
    justify-content: center;
    overflow: hidden;
  }
  .allFileSingle .botSingle .left .teacher .pic img {
    border-radius: 50%;
    width: 5rem;
    height: 5rem;
    object-fit: cover;
  }
  .allFileSingle .botSingle .left .teacher .title {
    text-align: center;
    font-size: 1rem;
    font-weight: 900;
    color: #444;
    margin-top: 0.5rem;
    display: grid;
  }
  .allFileSingle .botSingle .left .teacher .role {
    font-size: 0.8rem;
    font-weight: 500;
    color: #000;
    opacity: 0.7;
    margin-bottom: 0.5rem;
  }
  .allFileSingle .botSingle .left .teacher p {
    font-size: 0.9rem;
    font-weight: 500;
    color: #000;
    opacity: 0.7;
  }
  .allFileSingle .botSingle .left .course {
    background: white;
    padding: 1rem;
    border-radius: 5px;
    margin-top: 1rem;
  }
  .allFileSingle .botSingle .left .course .title {
    font-size: 1rem;
    font-weight: 900;
    color: #444;
    margin-bottom: 1rem;
  }
  .allFileSingle .botSingle .left .course .slider-relate .item .pic {
    border-radius: 5px;
    overflow: hidden;
    justify-content: center;
  }
  .allFileSingle .botSingle .left .course .slider-relate .item .title2 {
    font-size: 0.9rem;
    font-weight: 900;
    color: #000;
    text-align: center;
    margin: 0.5rem 0;
  }
  .allFileSingle .botSingle .left .course .slider-relate .item .price {
    font-size: 0.9rem;
    font-weight: 900;
    color: var(--green-color);
    text-align: center;
  }
  .allFileSingle .botSingle .left .start {
    border: 1px solid #ddd;
    padding: 1rem;
    border-radius: 5px;
    margin-top: 1rem;
  }
  .allFileSingle .botSingle .left .start .title {
    font-size: 1rem;
    font-weight: 900;
    color: #000;
  }
  .allFileSingle .botSingle .left .start p {
    font-size: 0.7rem;
    font-weight: 300;
    color: #000;
  }
  .allFileSingle .botSingle .left .start ul li {
    display: grid;
    margin-top: 0.5rem;
  }
  .allFileSingle .botSingle .left .start ul li a {
    display: flex;
    justify-content: right;
    align-items: center;
    gap: 0.5rem;
    padding: 0.7rem 0;
    font-size: 0.8rem;
    font-weight: 900;
    color: #000;
    border-radius: 3px;
    background: white;
    box-shadow: 0 1.6px 61px rgba(0, 0, 0, 0.05);
  }
  .allFileSingle .botSingle .left .start ul li a:before {
    content: "";
    width: 4px;
    height: 100%;
    display: grid;
    background: var(--green-color);
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
  }
}

.allProductSingle {
  margin: auto;
  margin-top: 2rem;
}
.allProductSingle .address {
  display: flex;
  justify-content: right;
  align-items: center;
  position: relative;
  margin-bottom: 1rem;
}
.allProductSingle .address i {
  display: grid;
  align-items: center;
  margin-left: 0.3rem;
}
.allProductSingle .address i svg {
  width: 0.9rem;
  height: 0.9rem;
  fill: #444;
}
.allProductSingle .address a {
  font-size: 0.8rem;
  font-weight: 300;
  color: #444;
  white-space: pre-line;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  box-orient: vertical;
  -webkit-box-orient: vertical;
  line-clamp: 1;
  -webkit-line-clamp: 1;
  overflow: hidden;
  text-overflow: ellipsis;
}
.allProductSingle .address a:after {
  content: "/";
  padding: 0 0.4rem;
}
.allProductSingle .address a:last-child:after {
  content: "";
  padding: 0;
}
.allProductSingle .adminButtons {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 1rem;
  margin-bottom: 1rem;
}
.allProductSingle .adminButtons .sendDashboard {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.7rem;
  border-radius: 10px;
  background: #f3c8ff;
  color: purple;
  font-size: 0.9rem;
  font-weight: 700;
  box-shadow: 0 5px 5px rgba(0, 0, 0, 0.08);
}
.allProductSingle .adminButtons .sendDashboard i {
  display: grid;
  align-items: center;
}
.allProductSingle .adminButtons .sendDashboard i svg {
  width: 1.2rem;
  height: 1.2rem;
  color: purple;
}
.allProductSingle .adminButtons .sendDashboard:nth-child(2) {
  background: #c8d8ff;
  color: #002480;
}
.allProductSingle .adminButtons .sendDashboard:nth-child(2) i svg {
  color: #002480;
}
.allProductSingle .adminButtons .sendDashboard:nth-child(3) {
  background: #c8ffcf;
  color: #008002;
}
.allProductSingle .adminButtons .sendDashboard:nth-child(3) i svg {
  color: #008002;
}
.allProductSingle .containers {
  background: white;
  border-radius: 20px;
}
.allProductSingle .containers .txtE {
  margin-bottom: 1rem;
  position: relative;
  width: 100%;
}
.allProductSingle .containers .txtE textarea {
  font-size: 0.9rem;
  font-weight: 300;
  color: #000;
  border: 1px solid #eee;
  width: 100%;
  height: 3rem;
  border-radius: 10px;
  padding: 1rem;
  resize: vertical;
}
.allProductSingle .containers .txtE:before {
  content: attr(data-tooltip);
  position: absolute;
  top: -0.5rem;
  background: purple;
  color: white;
  padding: 1px 5px;
  font-size: 0.7rem;
  border-radius: 5px;
  font-weight: 500;
}
.allProductSingle .containers .tga {
  display: grid;
  grid-template-columns: 1.5fr 1.5fr 1fr;
}
.allProductSingle .containers .tga .gallery {
  padding-bottom: 1rem;
  margin-left: 1rem;
}
.allProductSingle .containers .tga .gallery .pic {
  position: relative;
  display: grid;
  overflow: hidden;
  justify-content: center;
}
.allProductSingle .containers .tga .gallery .pic img {
  height: 35rem;
  object-fit: contain;
}
.allProductSingle .containers .tga .gallery .pic .options {
  position: absolute;
  top: 1rem;
  right: 1rem;
  z-index: 2;
}
.allProductSingle .containers .tga .gallery .pic .options .option {
  cursor: pointer;
  margin-bottom: 0.8rem;
}
.allProductSingle .containers .tga .gallery .pic .options .option i {
  display: grid;
  align-items: center;
}
.allProductSingle .containers .tga .gallery .pic .options .option i svg {
  width: 1.7rem;
  height: 1.7rem;
  fill: #000;
}
.allProductSingle .containers .tga .gallery .pic .lottery {
  position: absolute;
  top: 1rem;
  left: 1rem;
  background: red;
  padding: 0.3rem 1rem;
  border-radius: 5rem;
  color: white;
  font-size: 0.9rem;
  font-weight: 500;
}
.allProductSingle .containers .tga .gallery .images {
  padding: 1rem;
}
.allProductSingle .containers .tga .gallery .images .slider-image {
  display: grid;
}
.allProductSingle .containers .tga .gallery .images .slider-image .item {
  padding: 0.5rem;
  border: 1px solid #eee;
  border-radius: 10px;
  cursor: pointer;
}
.allProductSingle .containers .tga .gallery .images .slider-image .item img {
  height: 5rem;
  object-fit: contain;
}
.allProductSingle .containers .tga .gallery .images .slider-image .active2 {
  border: 1px solid var(--green-color);
}
.allProductSingle .containers .tga .center {
  padding: 1rem 0;
}
.allProductSingle .containers .tga .center h1 {
  font-size: 1.2rem;
  font-weight: 700;
  color: #000;
  border-bottom: 1px solid #ddd;
  padding-bottom: 1rem;
  margin-bottom: 1rem;
}
.allProductSingle .containers .tga .center .options {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-gap: 1rem;
  margin: 1rem 0;
}
.allProductSingle .containers .tga .center .options .right {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.allProductSingle .containers .tga .center .options .right .option {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  border-radius: 5rem;
  background: #f5f5f5;
  cursor: pointer;
  padding: 0.4rem 0.5rem;
  font-size: 0.75rem;
  font-weight: 500;
  color: #000;
}
.allProductSingle .containers .tga .center .options .right .option i {
  display: grid;
  align-items: center;
}
.allProductSingle .containers .tga .center .options .right .option i svg {
  width: 0.8rem;
  height: 0.8rem;
  fill: #000;
}
.allProductSingle .containers .tga .center .options .right .option .star1 svg {
  fill: orange;
}
.allProductSingle .containers .tga .center .options .right .alert1 {
  border-radius: 5rem;
  background: #f5f5f5;
  padding: 0.4rem 1.5rem;
  font-size: 0.75rem;
  font-weight: 500;
  color: black;
  background: linear-gradient(to right, #eee, #c1c1c1, #eee);
  background-size: 200% auto;
  animation: shine2 1.5s linear infinite;
}
@keyframes shine2 {
  to {
    background-position: 200%;
  }
}
.allProductSingle .containers .tga .center .options .left .guideS {
  color: blue;
  font-weight: 700;
  font-size: 0.8rem;
  cursor: pointer;
}
.allProductSingle .containers .tga .center .choice {
  padding: 0.5rem 0;
  margin-top: 1rem;
}
.allProductSingle .containers .tga .center .choice .title1 {
  font-size: 1rem;
  font-weight: 700;
  color: #000;
  margin-bottom: 0.5rem;
}
.allProductSingle .containers .tga .center .choice ul {
  display: flex;
  justify-content: right;
  align-items: center;
  gap: 0.5rem;
}
.allProductSingle .containers .tga .center .choice ul li {
  position: relative;
  border: 2px solid #eee;
  font-size: 0.9rem;
  font-weight: 700;
  color: black;
  padding: 0.5rem 1rem;
  cursor: pointer;
  border-radius: 5px;
}
.allProductSingle .containers .tga .center .choice ul li[data-empty=empty] {
  background: #ffbebe;
  opacity: 0.7;
  color: #555;
}
.allProductSingle .containers .tga .center .choice ul .active {
  border: 2px solid var(--green-color);
}
.allProductSingle .containers .tga .center .choice:nth-child(2) {
  border-bottom: 0;
  padding-bottom: 0;
}
.allProductSingle .containers .tga .center .choice:nth-child(3) {
  border-bottom: 0;
  padding-bottom: 0;
}
.allProductSingle .containers .tga .center .abilities .name {
  font-size: 1rem;
  font-weight: 700;
  color: #000;
  margin: 1rem 0;
}
.allProductSingle .containers .tga .center .abilities ul {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 0.5rem;
  align-items: center;
}
.allProductSingle .containers .tga .center .abilities ul li {
  background: #f5f5f5;
  padding: 0.5rem;
  border-radius: 10px;
}
.allProductSingle .containers .tga .center .abilities ul li .name1 {
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  text-overflow: ellipsis;
  font-size: 0.75rem;
  font-weight: 300;
  opacity: 0.7;
  color: #000;
  margin-bottom: 0.5rem;
}
.allProductSingle .containers .tga .center .abilities ul li .body1 {
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  text-overflow: ellipsis;
  font-size: 0.75rem;
  font-weight: 500;
  color: #000;
}
.allProductSingle .containers .tga .center .abilities .more {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  margin-top: 1rem;
}
.allProductSingle .containers .tga .center .abilities .more .text {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  border-radius: 10px;
  font-size: 0.85rem;
  font-weight: 500;
  color: #000;
  border: 1px solid #ddd;
  cursor: pointer;
}
.allProductSingle .containers .tga .center .abilities .more .text i {
  display: grid;
  align-items: center;
}
.allProductSingle .containers .tga .center .abilities .more .text i svg {
  width: 1rem;
  height: 1rem;
  fill: #000;
}
.allProductSingle .containers .tga .center .abilities .more:before {
  content: "";
  height: 1px;
  background: #ddd;
}
.allProductSingle .containers .tga .center .abilities .more:after {
  content: "";
  height: 1px;
  background: #ddd;
}
.allProductSingle .containers .tga .center .id1 {
  margin-top: 2rem;
  display: flex;
  gap: 0.5rem;
  font-size: 0.8rem;
  font-weight: 500;
  color: #444;
}
.allProductSingle .containers .tga .center .id1 i {
  display: grid;
  opacity: 0.6;
  align-items: center;
}
.allProductSingle .containers .tga .center .id1 i svg {
  width: 1rem;
  height: 1rem;
  fill: #444;
}
.allProductSingle .containers .tga .center .resData {
  display: none;
  margin-top: 0.5rem;
}
.allProductSingle .containers .tga .center .resData .res1 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 0.5rem;
}
.allProductSingle .containers .tga .center .resData .res1 .option {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem;
  border-radius: 10px;
  border: 1px solid #ddd;
}
.allProductSingle .containers .tga .center .resData .res1 .option .name {
  font-size: 0.8rem;
  font-weight: 500;
  color: #000;
}
.allProductSingle .containers .tga .center .resData .res1 .option i {
  display: grid;
  align-items: center;
}
.allProductSingle .containers .tga .center .resData .res1 .option i svg {
  width: 0.8rem;
  height: 0.8rem;
  fill: #000;
}
.allProductSingle .containers .tga .left {
  padding: 1rem;
}
.allProductSingle .containers .tga .left .details {
  background: #f9f9f9;
  border-radius: 10px;
  border: 1px solid #eee;
}
.allProductSingle .containers .tga .left .details .seller {
  padding: 1rem;
  border-bottom: 1px solid #eee;
}
.allProductSingle .containers .tga .left .details .seller .title {
  margin-bottom: 1rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem;
}
.allProductSingle .containers .tga .left .details .seller .title .name {
  font-size: 1rem;
  font-weight: 700;
  color: #000;
}
.allProductSingle .containers .tga .left .details .seller .title .more {
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--green-color);
}
.allProductSingle .containers .tga .left .details .seller .user .name {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 1rem;
  font-weight: 500;
  color: #000;
}
.allProductSingle .containers .tga .left .details .seller .user .name i {
  display: grid;
  align-items: center;
}
.allProductSingle .containers .tga .left .details .seller .user .name i svg {
  width: 1.4rem;
  height: 1.4rem;
  fill: #000;
}
.allProductSingle .containers .tga .left .details .seller .user .options {
  margin-top: 0.5rem;
  display: flex;
  justify-content: left;
  align-items: center;
  gap: 0.5rem;
}
.allProductSingle .containers .tga .left .details .seller .user .options .option {
  position: relative;
  cursor: pointer;
}
.allProductSingle .containers .tga .left .details .seller .user .options .option i {
  display: grid;
  align-items: center;
  padding: 0.5rem;
  border: 1px solid #eee;
  border-radius: 5px;
}
.allProductSingle .containers .tga .left .details .seller .user .options .option i svg {
  width: 1rem;
  height: 1rem;
  fill: #000;
}
.allProductSingle .containers .tga .left .details .seller .user .options .option .tooltip {
  display: none;
  position: absolute;
  bottom: 100%;
  padding: 0.5rem;
  background: black;
  color: white;
  font-size: 0.8rem;
  font-weight: 500;
  text-overflow: ellipsis;
  white-space: nowrap;
  border-radius: 5px;
  left: -50%;
}
.allProductSingle .containers .tga .left .details .seller .user .options .option:hover .tooltip {
  display: block;
}
.allProductSingle .containers .tga .left .details .prices {
  padding: 1rem;
}
.allProductSingle .containers .tga .left .details .prices .top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem;
}
.allProductSingle .containers .tga .left .details .prices .top i {
  display: grid;
  align-items: center;
  opacity: 0.5;
}
.allProductSingle .containers .tga .left .details .prices .top i svg {
  width: 1.1rem;
  height: 1.1rem;
  fill: #000;
}
.allProductSingle .containers .tga .left .details .prices .top .price .offer {
  display: flex;
  justify-content: left;
  align-items: center;
  gap: 0.5rem;
}
.allProductSingle .containers .tga .left .details .prices .top .price .offer s {
  font-size: 0.9rem;
  font-weight: 300;
  color: #000;
  opacity: 0.5;
}
.allProductSingle .containers .tga .left .details .prices .top .price .offer .off {
  background: red;
  padding: 0.1rem 0.5rem;
  border-radius: 5rem;
  font-size: 0.8rem;
  font-weight: 900;
  color: white;
}
.allProductSingle .containers .tga .left .details .prices .top .price .priceF {
  font-size: 0.7rem;
  font-weight: 300;
  color: #000;
}
.allProductSingle .containers .tga .left .details .prices .top .price .priceF span {
  font-size: 1.5rem;
  font-weight: 700;
}
.allProductSingle .containers .tga .left .details .prices .bot {
  margin-top: 1rem;
}
.allProductSingle .containers .tga .left .details .prices .bot .addCarts {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-gap: 0.5rem;
}
.allProductSingle .containers .tga .left .details .prices .bot .addCarts .addCart {
  padding: 0.6rem;
  opacity: 0.7;
  font-size: 1rem;
  font-weight: 700;
  border-radius: 5px;
  background: red;
  color: white;
  text-align: center;
  transition: all 0.3s ease-in-out;
  cursor: pointer;
}
.allProductSingle .containers .tga .left .details .prices .bot .addCarts .addCart:hover {
  opacity: 1;
}
.allProductSingle .containers .tga .left .details .prices .bot .addCarts .counts {
  display: flex;
  align-items: center;
  border: 2px solid #eee;
  border-radius: 5px;
  height: 100%;
}
.allProductSingle .containers .tga .left .details .prices .bot .addCarts .counts input {
  width: 3rem;
  padding: 0.5rem;
  background: transparent;
  text-align: center;
  font-size: 1rem;
  font-weight: 700;
  color: #000;
}
.allProductSingle .containers .tga .left .details .prices .bot .addCarts .counts i {
  display: grid;
  align-items: center;
  padding: 0.5rem;
  cursor: pointer;
}
.allProductSingle .containers .tga .left .details .prices .bot .addCarts .counts i svg {
  width: 0.8rem;
  height: 0.8rem;
  fill: #000;
}
.allProductSingle .containers .tga .left .details .prices .bot .empty {
  padding: 0.6rem;
  font-size: 1rem;
  font-weight: 700;
  border-radius: 5px;
  background: grey;
  color: white;
  text-align: center;
  transition: all 0.3s ease-in-out;
  cursor: pointer;
  opacity: 1;
  display: grid;
}
.allProductSingle .containers .tga .left .details .prices .bot .call {
  background: var(--green-color);
}
.allProductSingle .containers .tga .left .details .prices .chat {
  margin-top: 0.5rem;
  font-size: 1rem;
  font-weight: 700;
  border-radius: 5px;
  padding: 0.6rem;
  border: 1px solid #eee;
  text-align: center;
  color: #000;
  cursor: pointer;
}
.allProductSingle .containers .tga .left .details .carriers {
  padding: 1rem;
  border-top: 1px solid #eee;
}
.allProductSingle .containers .tga .left .details .carriers .top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}
.allProductSingle .containers .tga .left .details .carriers .top .name {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.85rem;
  font-weight: 700;
  color: #000;
  opacity: 0.9;
}
.allProductSingle .containers .tga .left .details .carriers .top .name i {
  opacity: 1;
}
.allProductSingle .containers .tga .left .details .carriers .top .name i svg {
  width: 1.3rem;
  height: 1.3rem;
}
.allProductSingle .containers .tga .left .details .carriers .top i {
  display: grid;
  align-items: center;
  opacity: 0.5;
}
.allProductSingle .containers .tga .left .details .carriers .top i svg {
  width: 1rem;
  height: 1rem;
  fill: #000;
}
.allProductSingle .containers .tga .left .details .carriers .bot {
  display: flex;
  align-items: center;
  justify-content: right;
  gap: 0.5rem;
  font-size: 0.8rem;
  font-weight: 500;
  color: #000;
  cursor: pointer;
  margin-top: 1rem;
}
.allProductSingle .containers .tga .left .details .carriers .bot span {
  opacity: 0.8;
}
.allProductSingle .containers .tga .left .details .carriers .bot:before {
  content: "";
  width: 10px;
  height: 10px;
  border: 1px solid #444;
  border-radius: 50%;
  display: grid;
}
.allProductSingle .containers .tga .left .details .carriers .active:before {
  border: 1px solid var(--green-color);
  background: var(--green-color);
}
.allProductSingle .containers .tga .left .details .scores {
  padding: 1rem;
  border-top: 1px solid #eee;
  display: flex;
  gap: 0.5rem;
  align-items: center;
  font-weight: 700;
  color: #444;
  font-size: 0.85rem;
}
.allProductSingle .containers .tga .left .details .scores i {
  display: grid;
  align-items: center;
}
.allProductSingle .containers .tga .left .details .scores i svg {
  width: 1.5rem;
  height: 1.5rem;
}
.allProductSingle .containers .tga .left .warning {
  display: flex;
}
.allProductSingle .containers .tga .left .warning .wg {
  display: flex;
  align-items: center;
  justify-content: right;
  gap: 0.5rem;
  font-size: 0.8rem;
  font-weight: 700;
  color: #000;
  opacity: 0.6;
  margin-top: 1rem;
  padding-bottom: 0.5rem;
  border-bottom: 2px dashed #aaa;
  cursor: pointer;
}
.allProductSingle .containers .tga .left .warning .wg i {
  display: grid;
  align-items: center;
}
.allProductSingle .containers .tga .left .warning .wg i svg {
  width: 1.1rem;
  height: 1.1rem;
  fill: #000;
}
.allProductSingle .containers .tga .left .lottery {
  border: 1px solid #eee;
  margin: 1rem 0;
  border-radius: 10px;
  padding: 1rem;
}
.allProductSingle .containers .tga .left .lottery .title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
}
.allProductSingle .containers .tga .left .lottery .title .title1 {
  font-size: 0.85rem;
  font-weight: 500;
  color: #000;
}
.allProductSingle .containers .tga .left .lottery .title .name {
  font-size: 0.8rem;
  font-weight: 700;
  color: red;
}
.allProductSingle .containers .tga .left .lottery .bars {
  height: 10px;
  width: 100%;
  background: #f5f5f5;
  border-radius: 5rem;
  direction: ltr;
}
.allProductSingle .containers .tga .left .lottery .bars .bar1 {
  height: 100%;
  background: red;
  border-radius: 5rem;
  position: relative;
}
.allProductSingle .containers .tga .left .lottery .bars .bar1 div {
  width: 0;
  height: 100%;
  background: white;
  opacity: 0.5;
  box-shadow: 0 0 5px rgba(255, 0, 0, 0.3);
  border-radius: 5rem;
  transition: all 0.3s ease-in-out;
  animation: arrow-anim5 1s ease infinite;
}
@keyframes arrow-anim5 {
  0% {
    width: 0%;
  }
  5% {
    width: 5%;
  }
  10% {
    width: 10%;
  }
  15% {
    width: 15%;
  }
  20% {
    width: 20%;
  }
  25% {
    width: 25%;
  }
  30% {
    width: 30%;
  }
  35% {
    width: 35%;
  }
  40% {
    width: 40%;
  }
  45% {
    width: 45%;
  }
  50% {
    width: 50%;
  }
  55% {
    width: 55%;
  }
  60% {
    width: 60%;
  }
  65% {
    width: 65%;
  }
  70% {
    width: 70%;
  }
  75% {
    width: 75%;
  }
  80% {
    width: 80%;
  }
  85% {
    width: 85%;
  }
  90% {
    width: 90%;
  }
  95% {
    width: 95%;
  }
  100% {
    width: 100%;
  }
}
.allProductSingle .containers .tga .left .boxB {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-top: 1rem;
  padding: 1rem;
  border-radius: 10px;
  color: #000;
  border: 1px solid #eee;
  cursor: pointer;
  opacity: 0.8;
}
.allProductSingle .containers .tga .left .boxB .right {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.85rem;
  font-weight: 700;
  color: #000;
  opacity: 0.9;
}
.allProductSingle .containers .tga .left .boxB .right i {
  opacity: 1;
}
.allProductSingle .containers .tga .left .boxB .right i svg {
  width: 1.3rem;
  height: 1.3rem;
}
.allProductSingle .containers .tga .left .boxB i {
  display: grid;
  align-items: center;
  opacity: 0.5;
}
.allProductSingle .containers .tga .left .boxB i svg {
  width: 1rem;
  height: 1rem;
  fill: #000;
}
.allProductSingle .containers .tga .left .boxB:first-child {
  margin-top: 0;
  margin-bottom: 1rem;
}
.allProductSingle .containers .tga .left .id1 {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  font-size: 0.8rem;
  opacity: 0.6;
  font-weight: 700;
  color: #000;
  margin-top: 1rem;
}
.allProductSingle .containers .tga .left .id1 i {
  display: grid;
  align-items: center;
}
.allProductSingle .containers .tga .left .id1 i svg {
  width: 1rem;
  height: 1rem;
  fill: #000;
}
.allProductSingle .containers .boxes {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  align-items: center;
  border-top: 1px solid #eee;
  border-bottom: 1px solid #eee;
}
.allProductSingle .containers .boxes .box {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 1rem 0.5rem;
  justify-content: center;
  opacity: 0.7;
  border-left: 1px solid #eee;
}
.allProductSingle .containers .boxes .box i {
  display: grid;
  align-items: center;
  justify-content: center;
}
.allProductSingle .containers .boxes .box i svg {
  width: 1.3rem;
  height: 1.3rem;
  fill: #444;
  color: #444;
}
.allProductSingle .containers .boxes .box .name {
  text-align: center;
  font-size: 0.8rem;
  font-weight: 500;
  color: #444;
}
.allProductSingle .containers .boxes .box:last-child {
  border-left: 0;
}
.allProductSingle .addFloat {
  position: fixed;
  bottom: 0;
  right: 0;
  left: 0;
  z-index: 100;
  background: white;
  box-shadow: 0 -10px 10px rgba(0, 0, 0, 0.1);
  padding: 0.5rem;
  display: none;
}
.allProductSingle .addFloat .top {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  justify-content: space-between;
}
.allProductSingle .addFloat .top select {
  padding: 0.2rem 0.8rem;
  background: transparent;
  border-radius: 10px;
  font-size: 1rem;
  font-weight: 500;
  color: #000;
  border: 1px solid #eee;
}
.allProductSingle .addFloat .top .price {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.allProductSingle .addFloat .top .price .offer {
  display: flex;
  justify-content: left;
  align-items: center;
  gap: 0.5rem;
}
.allProductSingle .addFloat .top .price .offer s {
  font-size: 0.9rem;
  font-weight: 300;
  color: #000;
  opacity: 0.5;
}
.allProductSingle .addFloat .top .price .offer .off {
  background: red;
  padding: 0.1rem 0.5rem;
  border-radius: 5rem;
  font-size: 0.8rem;
  font-weight: 900;
  color: white;
}
.allProductSingle .addFloat .top .price .priceF {
  font-size: 0.7rem;
  font-weight: 300;
  color: #000;
}
.allProductSingle .addFloat .top .price .priceF span {
  font-size: 1.2rem;
  font-weight: 700;
}
.allProductSingle .addFloat .bot {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-gap: 0.5rem;
  margin-top: 0.5rem;
}
.allProductSingle .addFloat .bot .addCarts {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-gap: 0.5rem;
}
.allProductSingle .addFloat .bot .addCarts .addCart {
  display: grid;
  align-items: center;
  padding: 0.3rem;
  opacity: 0.7;
  font-size: 0.8rem;
  font-weight: 700;
  border-radius: 5px;
  background: red;
  color: white;
  text-align: center;
  transition: all 0.3s ease-in-out;
  cursor: pointer;
}
.allProductSingle .addFloat .bot .addCarts .addCart:hover {
  opacity: 1;
}
.allProductSingle .addFloat .bot .addCarts .counts {
  display: flex;
  align-items: center;
  border: 2px solid #eee;
  border-radius: 5px;
  height: 100%;
}
.allProductSingle .addFloat .bot .addCarts .counts input {
  width: 2rem;
  padding: 0.3rem 0.2rem;
  background: transparent;
  text-align: center;
  font-size: 0.8rem;
  font-weight: 700;
  color: #000;
}
.allProductSingle .addFloat .bot .addCarts .counts i {
  display: grid;
  align-items: center;
  padding: 0.3rem;
  cursor: pointer;
}
.allProductSingle .addFloat .bot .addCarts .counts i svg {
  width: 0.7rem;
  height: 0.7rem;
  fill: #000;
}
.allProductSingle .addFloat .bot .empty, .allProductSingle .addFloat .bot .contact {
  padding: 0.6rem;
  font-size: 1rem;
  font-weight: 700;
  border-radius: 5px;
  background: grey;
  color: white;
  text-align: center;
  transition: all 0.3s ease-in-out;
  cursor: pointer;
  opacity: 1;
}
.allProductSingle .addFloat .bot .contact {
  background: var(--green-color);
  font-size: 0.8rem;
}
.allProductSingle .addFloat .bot .cartS {
  border: 1px solid var(--green-color);
  border-radius: 5px;
  position: relative;
}
.allProductSingle .addFloat .bot .cartS i {
  display: grid;
  align-items: center;
  justify-content: center;
  width: 2rem;
}
.allProductSingle .addFloat .bot .cartS i svg {
  width: 1rem;
  height: 1rem;
  fill: var(--green-color);
}
.allProductSingle .addFloat .bot .cartS .showCartCount {
  position: absolute;
  top: -6px;
  left: -6px;
  background: var(--green-color);
  width: 17px;
  height: 17px;
  color: white;
  font-size: 0.7rem;
  line-height: 17px;
  border-radius: 50%;
  display: grid;
  justify-content: center;
  align-items: center;
}
.allProductSingle .showEditBtn {
  position: fixed;
  bottom: 1rem;
  left: 1rem;
  background: purple;
  padding: 0.5rem;
  border-radius: 10px;
  color: white;
  font-size: 1rem;
  font-weight: 500;
  z-index: 10;
  display: none;
  cursor: pointer;
}
.allProductSingle .sellers {
  background: white;
  border-radius: 20px;
  margin-top: 2rem;
}
.allProductSingle .sellers .title {
  font-size: 1.2rem;
  font-weight: 700;
  color: #000;
  padding: 1rem;
  border-bottom: 1px solid #eee;
}
.allProductSingle .sellers .items .item {
  padding: 1rem;
  border-bottom: 2px dashed #eee;
}
.allProductSingle .sellers .items .item .postTop {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
}
.allProductSingle .sellers .items .item .postTop .postTitle {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-gap: 1rem;
  align-items: center;
}
.allProductSingle .sellers .items .item .postTop .postTitle .postImages {
  display: grid;
  grid-template-columns: auto;
  justify-content: right;
  align-items: center;
}
.allProductSingle .sellers .items .item .postTop .postTitle .postImages .postImage img {
  height: 5rem;
  object-fit: contain;
  width: 5rem;
  border-radius: 100%;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  padding: 0.5rem;
}
.allProductSingle .sellers .items .item .postTop .postTitle ul {
  display: grid;
  grid-template-columns: repeat(5, auto);
  justify-content: right;
  align-items: center;
  grid-gap: 2rem;
}
.allProductSingle .sellers .items .item .postTop .postTitle ul li {
  display: grid;
  grid-template-columns: auto auto;
  justify-content: right;
  align-items: center;
  grid-gap: 0.5rem;
}
.allProductSingle .sellers .items .item .postTop .postTitle ul li span, .allProductSingle .sellers .items .item .postTop .postTitle ul li label, .allProductSingle .sellers .items .item .postTop .postTitle ul li a {
  font-size: 0.9rem;
  font-weight: 300;
  color: #000;
  opacity: 0.7;
}
.allProductSingle .sellers .items .item .postTop .postTitle ul li span:last-child, .allProductSingle .sellers .items .item .postTop .postTitle ul li label:last-child, .allProductSingle .sellers .items .item .postTop .postTitle ul li a:last-child {
  font-size: 1rem;
  font-weight: 500;
  opacity: 1;
}
.allProductSingle .sellers .items .item .postTop .postTitle ul li select {
  background: var(--back1-color);
  border: 1px solid #eee;
  padding: 0.3rem 0.5rem;
  color: #000;
  border-radius: 0.3rem;
  font-size: 0.8rem;
  width: 100%;
  height: 2rem;
  min-width: 8rem;
  transition: all 0.3s ease-in-out;
}
.allProductSingle .sellers .items .item .postTop .postTitle ul li select:focus {
  box-shadow: 0 3px 8px 0 rgba(0, 0, 0, 0.1);
  border: 1px solid #19bfd3;
}
.allProductSingle .sellers .items .item .postTop .postOptions {
  display: grid;
  justify-content: left;
  align-items: center;
}
.allProductSingle .sellers .items .item .postTop .postOptions .addCart {
  padding: 0.5rem;
  background: red;
  border-radius: 5px;
  cursor: pointer;
  font-size: 1rem;
  font-weight: 500;
  color: white;
}
.allProductSingle .sellers .items .item .postBot {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  grid-gap: 0.5rem;
  margin-top: 0.5rem;
  background: var(--back2-color);
  border-radius: 5px;
  padding: 1rem;
}
.allProductSingle .sellers .items .item .postBot ul {
  display: grid;
  grid-template-columns: auto auto auto auto auto;
  justify-content: right;
  grid-gap: 2rem;
  align-items: center;
}
.allProductSingle .sellers .items .item .postBot ul li {
  display: grid;
  grid-template-columns: auto auto;
  justify-content: right;
  align-items: center;
  grid-gap: 0.5rem;
}
.allProductSingle .sellers .items .item .postBot ul li span {
  font-size: 0.85rem;
  font-weight: 300;
  color: #000;
  opacity: 0.6;
}
.allProductSingle .sellers .items .item .postBot ul li span:last-child {
  color: #444;
  font-weight: 700;
  opacity: 1;
}
.allProductSingle .sellers .items .item:last-child {
  border-bottom: 0;
}
.allProductSingle .containerD {
  margin-top: 2rem;
}
.allProductSingle .containerD .tabs {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 1rem;
  margin-bottom: 0.5rem;
}
.allProductSingle .containerD .tabs .tab {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 1.2rem;
  font-weight: 700;
  border: 1px solid #ddd;
  color: #444;
  cursor: pointer;
  padding: 0.5rem 1rem;
  border-radius: 5rem;
}
.allProductSingle .containerD .tabs .tab i {
  display: grid;
  align-items: center;
}
.allProductSingle .containerD .tabs .tab i svg {
  width: 1.2rem;
  height: 1.2rem;
  fill: #000;
}
.allProductSingle .containerD .tabs .tab span {
  background: var(--green-color);
  width: 1.5rem;
  height: 1.5rem;
  display: grid;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
  font-weight: 500;
  color: white;
  border-radius: 5px;
}
.allProductSingle .containerD .tabs .active {
  color: white;
  background: var(--green-color);
  border: 1px solid var(--green-color);
}
.allProductSingle .containerD .tabs .active span {
  background: white;
  color: var(--green-color);
}
.allProductSingle .containerD .tabs .active i svg {
  fill: white;
}
.allProductSingle .containerD .data1 {
  background: white;
  border-radius: 20px;
  border: 2px solid #eee;
}
.allProductSingle .containerD .data1 .des {
  padding: 1rem;
}
.allProductSingle .containerD .data1 .des .title1 {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 1.2rem;
  font-weight: 900;
  color: #444;
}
.allProductSingle .containerD .data1 .des .title1 i {
  display: grid;
  align-items: center;
}
.allProductSingle .containerD .data1 .des .title1 i svg {
  width: 1.5rem;
  height: 1.5rem;
  fill: var(--green-color);
}
.allProductSingle .containerD .data1 .des .body p {
  opacity: 0.7;
  font-size: 1rem;
  font-weight: 400;
  color: #000;
  margin-top: 1rem;
  line-height: 2rem;
}
.allProductSingle .containerD .data1 .des .body .image {
  display: grid;
  justify-content: center;
  margin: 1rem 0;
}
.allProductSingle .containerD .data1 .des .body img {
  object-fit: cover !important;
  height: 600px !important;
  width: 100% !important;
  margin: 20px 0 !important;
}
.allProductSingle .containerD .data1 .des .body ul, .allProductSingle .containerD .data1 .des .body ol {
  margin: 2rem;
}
.allProductSingle .containerD .data1 .des .body ul li, .allProductSingle .containerD .data1 .des .body ol li {
  list-style: decimal;
  margin-bottom: 0.5rem;
  font-size: 0.9rem;
}
.allProductSingle .containerD .data1 .des .body ul ul, .allProductSingle .containerD .data1 .des .body ol ul {
  margin: 0;
  margin-top: 1rem;
  margin-right: 1rem;
}
.allProductSingle .containerD .data1 .des .body ul li {
  list-style: disc;
}
.allProductSingle .containerD .data1 .des .body table {
  margin: 1rem 0;
  border: 1px solid #eee;
  width: 100%;
}
.allProductSingle .containerD .data1 .des .body table thead tr {
  background: #eee;
}
.allProductSingle .containerD .data1 .des .body table tr {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(1px, 1fr));
  align-items: center;
  grid-gap: 1rem;
  padding: 1rem;
}
.allProductSingle .containerD .data1 .des .body table tr th {
  font-weight: 700;
  color: #000;
  font-size: 0.85rem;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  display: grid;
  align-items: center;
  justify-content: center;
}
.allProductSingle .containerD .data1 .des .body table tr td {
  font-weight: 300;
  font-size: 0.85rem;
  text-align: center;
  color: #000;
}
.allProductSingle .containerD .data1 .des .body table tr td p {
  font-weight: 300;
  font-size: 0.85rem;
  text-align: center;
  color: #000;
  margin-bottom: 0;
  line-height: unset;
}
.allProductSingle .containerD .data1 .des .body table tr td img {
  width: 2.5rem;
  height: 2.5rem;
  object-fit: cover;
  border-radius: 5rem;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
.allProductSingle .containerD .data1 .des .body table tr td a {
  display: grid;
  align-items: center;
}
.allProductSingle .containerD .data1 .des .body table tr td a svg {
  margin-left: 0.5rem;
}
.allProductSingle .containerD .data1 .des .body table tr:nth-child(even) {
  background: #eee;
}
.allProductSingle .containerD .data1 .des .body h2, .allProductSingle .containerD .data1 .des .body h3, .allProductSingle .containerD .data1 .des .body h4 {
  margin-bottom: 1rem;
}
.allProductSingle .containerD .data1 .des .body h2 {
  font-size: 1.5rem;
}
.allProductSingle .containerD .data1 .des .body h3 {
  font-size: 1.3rem;
}
.allProductSingle .containerD .data1 .des .body h4 {
  font-size: 1.2rem;
}
.allProductSingle .containerD .data1 .ability1 {
  padding: 1rem;
  display: none;
}
.allProductSingle .containerD .data1 .ability1 .title1 {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 1.2rem;
  font-weight: 900;
  color: #444;
}
.allProductSingle .containerD .data1 .ability1 .title1 i {
  display: grid;
  align-items: center;
}
.allProductSingle .containerD .data1 .ability1 .title1 i svg {
  width: 1.5rem;
  height: 1.5rem;
  fill: var(--green-color);
}
.allProductSingle .containerD .data1 .ability1 .items .item {
  margin-top: 1rem;
  display: grid;
  grid-template-columns: 1fr 3fr;
  grid-gap: 0.5rem;
}
.allProductSingle .containerD .data1 .ability1 .items .item .name1 {
  font-size: 0.9rem;
  font-weight: 700;
  color: #444;
  padding: 0.8rem;
  background: #f8f8f8;
  border-radius: 3px;
}
.allProductSingle .containerD .data1 .ability1 .items .item .body1 {
  font-size: 0.9rem;
  font-weight: 700;
  color: #444;
  padding: 0.8rem;
  background: #f5f5f5;
  border-radius: 3px;
}
.allProductSingle .containerD .data1 .comments1 {
  display: none;
}
.allProductSingle .containerD .data1 .comments1 .topC1 {
  padding: 1rem;
}
.allProductSingle .containerD .data1 .comments1 .topC1 .title2 {
  font-size: 1.2rem;
  font-weight: 900;
  color: #000;
  margin-bottom: 0.5rem;
}
.allProductSingle .containerD .data1 .comments1 .topC1 .para1 {
  font-size: 0.9rem;
  font-weight: 300;
  color: #444;
}
.allProductSingle .containerD .data1 .lottery1 {
  display: none;
  padding: 1rem;
}
.allProductSingle .containerD .data1 .lottery1 .title {
  font-size: 1rem;
  font-weight: 900;
  color: #000;
  margin-bottom: 1rem;
}
.allProductSingle .containerD .data1 .lottery1 table {
  width: 100%;
  border-collapse: collapse;
}
.allProductSingle .containerD .data1 .lottery1 table tr {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  align-items: center;
  grid-gap: 0.5rem;
  padding: 1rem;
  border-radius: 10px;
  border-bottom: 1px solid #eee;
}
.allProductSingle .containerD .data1 .lottery1 table tr th {
  font-weight: 700;
  color: #000;
  font-size: 0.9rem;
  text-align: right;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
.allProductSingle .containerD .data1 .lottery1 table tr td {
  font-weight: 700;
  font-size: 0.9rem;
  text-align: right;
  color: #000;
}
.allProductSingle .containerD .data1 .lottery1 table tr:last-child {
  border-bottom: 0;
}
.allProductSingle .containerD .data1 .lottery1 table tr:first-child {
  background: #F6F8FB;
}
.allProductSingle .sellerInfo {
  background: rgba(0, 0, 0, 0.5);
  z-index: 4000;
  position: fixed;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-columns: 1fr;
  justify-content: center;
  backdrop-filter: blur(10px);
}
.allProductSingle .sellerInfo .data {
  width: 30%;
  margin: auto;
  background: white;
  display: grid;
  grid-template-columns: 1fr;
  border-radius: 20px;
  overflow: hidden;
}
.allProductSingle .sellerInfo .data .title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem;
  border-bottom: 2px solid #eee;
}
.allProductSingle .sellerInfo .data .title .name {
  font-size: 1.5rem;
  font-weight: 900;
  color: #444;
}
.allProductSingle .sellerInfo .data .title .location {
  display: flex;
  justify-content: left;
  align-items: center;
  gap: 0.3rem;
  font-size: 1rem;
  font-weight: 500;
  color: var(--green-color);
}
.allProductSingle .sellerInfo .data .title .location i {
  display: grid;
  align-items: center;
}
.allProductSingle .sellerInfo .data .title .location i svg {
  width: 1.2rem;
  height: 1.2rem;
  fill: var(--green-color);
}
.allProductSingle .sellerInfo .data .profile {
  margin: 1rem 0;
  padding: 0 1rem;
}
.allProductSingle .sellerInfo .data .profile .pic {
  display: grid;
  justify-content: center;
}
.allProductSingle .sellerInfo .data .profile .pic img {
  width: auto;
  height: 5rem;
  object-fit: cover;
}
.allProductSingle .sellerInfo .data .profile .name {
  font-size: 1.3rem;
  font-weight: 900;
  color: black;
  text-align: center;
  margin-top: 0.5rem;
}
.allProductSingle .sellerInfo .data .profile p {
  font-size: 0.9rem;
  font-weight: 300;
  text-align: center;
  margin-top: 0.5rem;
  line-height: 2rem;
  color: #444;
  white-space: pre-line;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  box-orient: vertical;
  -webkit-box-orient: vertical;
  line-clamp: 2;
  -webkit-line-clamp: 2;
  overflow: hidden;
  text-overflow: ellipsis;
}
.allProductSingle .sellerInfo .data .options {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 1rem;
  padding: 0 1rem;
}
.allProductSingle .sellerInfo .data .options .option {
  background: #f5f5f5;
  padding: 0.5rem 1rem;
  text-align: center;
  border-radius: 10px;
}
.allProductSingle .sellerInfo .data .options .option .body2 {
  font-size: 1.2rem;
  font-weight: 700;
  color: black;
}
.allProductSingle .sellerInfo .data .options .option .title2 {
  font-size: 1rem;
  font-weight: 500;
  color: #444;
  opacity: 0.7;
}
.allProductSingle .sellerInfo .data label {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  grid-gap: 0.5rem;
  margin: 1rem;
}
.allProductSingle .sellerInfo .data label input {
  border: 1px solid #ddd;
  font-size: 1rem;
  padding: 0.7rem 1rem;
  border-radius: 5rem;
  font-weight: 700;
  opacity: 0.7;
}
.allProductSingle .sellerInfo .data label i {
  display: grid;
  align-items: center;
  justify-content: center;
  transform: rotate(-135deg);
  border: 1px solid var(--green-color);
  border-radius: 50%;
  width: 3rem;
  height: 3rem;
}
.allProductSingle .sellerInfo .data label i svg {
  width: 1.2rem;
  height: 1.2rem;
  fill: var(--green-color);
}
.allProductSingle .sellerInfo .data .time {
  font-size: 1rem;
  font-weight: 300;
  color: #444;
  text-align: center;
  margin-right: 1rem;
}
.allProductSingle .sellerInfo .data .time span {
  color: red;
  font-weight: 700;
}
.allProductSingle .sellerInfo .data .time .active {
  color: green;
}
.allProductSingle .sellerInfo .data .buttons {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 1rem;
  padding: 1rem;
}
.allProductSingle .sellerInfo .data .buttons a {
  padding: 0.5rem 1rem;
  border-radius: 5px;
  font-size: 1rem;
  text-align: center;
  background: white;
  font-weight: 700;
  color: var(--green-color);
  border: 2px solid var(--green-color);
}
.allProductSingle .sellerInfo .data .buttons a:last-child {
  color: white;
  border: 2px solid var(--green-color);
  background: var(--green-color);
}
.allProductSingle .allTicket {
  background: rgba(0, 0, 0, 0.5);
  z-index: 4000;
  position: fixed;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-columns: 1fr;
  justify-content: center;
  backdrop-filter: blur(10px);
}
.allProductSingle .allTicket .chatContent {
  width: 40%;
  margin: auto;
  background: white;
  display: grid;
  grid-template-columns: 1fr;
  border-radius: 20px;
  overflow: hidden;
}
.allProductSingle .allTicket .chatContent .header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem;
  background: white;
}
.allProductSingle .allTicket .chatContent .header .profile {
  display: flex;
  justify-content: right;
  gap: 0.5rem;
  align-items: center;
}
.allProductSingle .allTicket .chatContent .header .profile .pic {
  overflow: hidden;
  border-radius: 50%;
}
.allProductSingle .allTicket .chatContent .header .profile .pic img {
  width: 3rem;
  height: 3rem;
  object-fit: cover;
}
.allProductSingle .allTicket .chatContent .header .profile .name {
  font-size: 1.2rem;
  font-weight: 300;
  color: black;
}
.allProductSingle .allTicket .chatContent .header .leftHeader {
  display: flex;
  justify-content: left;
  gap: 0.5rem;
}
.allProductSingle .allTicket .chatContent .header i {
  display: grid;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.allProductSingle .allTicket .chatContent .header i svg {
  width: 1.3rem;
  height: 1.3rem;
  fill: #444;
}
.allProductSingle .allTicket .chatContent .body {
  padding: 0.5rem;
  overflow-y: scroll;
  height: 30rem;
}
.allProductSingle .allTicket .chatContent .body p {
  display: none;
  font-size: 0.8rem;
  font-weight: 300;
  color: #000;
  opacity: 0.7;
}
.allProductSingle .allTicket .chatContent .body p .closeChats {
  padding: 0.2rem 0.4rem;
  background: red;
  color: white;
  border-radius: 5px;
  font-size: 0.7rem;
  cursor: pointer;
}
.allProductSingle .allTicket .chatContent .body .choice {
  display: grid;
  padding: 0.8rem;
  border: 1px solid #bbb;
  font-size: 0.9rem;
  font-weight: 300;
  color: #000;
  margin-top: 0.5rem;
  border-radius: 5px;
  cursor: pointer;
  transition: all 0.3s ease-in-out;
}
.allProductSingle .allTicket .chatContent .body .choice:hover {
  color: var(--green-color);
  border: 1px solid var(--green-color);
}
.allProductSingle .allTicket .chatContent .body .login {
  display: grid;
}
.allProductSingle .allTicket .chatContent .body .bodyLabel {
  display: grid;
  grid-template-columns: 1fr;
  grid-gap: 0.5rem;
  font-size: 0.9rem;
  font-weight: 300;
  color: #000;
  margin-top: 1rem;
}
.allProductSingle .allTicket .chatContent .body .bodyLabel input, .allProductSingle .allTicket .chatContent .body .bodyLabel select, .allProductSingle .allTicket .chatContent .body .bodyLabel textarea {
  background: var(--back1-color);
  border: 1px solid #eee;
  padding: 0.3rem 0.5rem;
  color: #000;
  border-radius: 5px;
  font-size: 0.9rem;
  font-weight: 300;
  width: 100%;
  transition: all 0.3s ease-in-out;
}
.allProductSingle .allTicket .chatContent .body .message11 {
  margin-top: 1rem;
  font-size: 0.9rem;
  font-weight: 300;
  color: #444;
}
.allProductSingle .allTicket .chatContent .body .message11 .time {
  font-size: 0.7rem;
}
.allProductSingle .allTicket .chatContent .body .message11 .messages {
  padding: 0.5rem;
  border-radius: 10px;
  border: 2px solid #bbb;
}
.allProductSingle .allTicket .chatContent .body .messages {
  background: white;
}
.allProductSingle .allTicket .chatContent .body .opp {
  display: grid;
  justify-content: left;
  text-align: left;
}
.allProductSingle .allTicket .chatContent .body .me {
  display: grid;
  justify-content: right;
  text-align: right;
}
.allProductSingle .allTicket .chatContent .body .me .messages {
  border: 2px solid var(--green-color);
}
.allProductSingle .allTicket .chatContent .body .submit {
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--green-color);
  text-align: center;
  background: transparent;
  width: 100%;
  border: 1px solid var(--green-color);
  padding: 0.5rem 1rem;
  border-radius: 5px;
  margin-top: 1rem;
  transition: all 0.3s ease-in-out;
}
.allProductSingle .allTicket .chatContent .body .submit:hover {
  background: var(--green-color);
  color: white;
}
.allProductSingle .allTicket .chatContent .body .sendImage {
  background: white;
  border-radius: 10px;
  overflow: hidden;
  display: grid;
  grid-template-columns: 1fr;
  justify-content: center;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
  margin-top: 1rem;
}
.allProductSingle .allTicket .chatContent .body .sendImage .dropify-wrapper {
  height: 100px;
  border: 1px solid #eee !important;
}
.allProductSingle .allTicket .chatContent .body .sendImage .dropify-wrapper .file-icon:before {
  opacity: 0 !important;
  position: absolute !important;
  top: 0 !important;
  visibility: hidden !important;
}
.allProductSingle .allTicket .chatContent .body .sendImage .dropify-wrapper .dropify-message {
  position: relative !important;
  top: auto !important;
  margin-top: 2rem;
}
.allProductSingle .allTicket .chatContent .body .sendImage .dropify-wrapper .dropify-message p {
  margin: 0;
  font-size: 1rem;
  color: rgba(0, 128, 0, 0.5098039216);
}
.allProductSingle .allTicket .chatContent .send {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-gap: 1rem;
  padding: 0.5rem;
}
.allProductSingle .allTicket .chatContent .send input {
  background: white;
  border: 1px solid #eee;
  padding: 0.5rem 1rem;
  color: #000;
  border-radius: 5rem;
  font-size: 1rem;
  font-weight: 300;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
  width: 100%;
  transition: all 0.3s ease-in-out;
}
.allProductSingle .allTicket .chatContent .send button {
  font-size: 0.9rem;
  font-weight: 300;
  color: white;
  border-radius: 5rem;
  background: var(--green-color);
  padding: 0 1rem;
}
.allProductSingle .allTicket .chatContent .loginChat {
  background: red;
  border-top: 1px solid #eee;
  padding: 0.5rem;
  text-align: center;
  font-size: 0.8rem;
  font-weight: 300;
  color: white;
  display: grid;
  width: 100%;
}
.allProductSingle .allTicket .chatContent .typeLogin1 {
  margin-top: 1rem;
  border-radius: 5px;
}
.allProductSingle .allChangeList {
  background: rgba(0, 0, 0, 0.5);
  z-index: 4000;
  position: fixed;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-columns: 1fr;
  justify-content: center;
  backdrop-filter: blur(10px);
}
.allProductSingle .allChangeList .changeList {
  width: 40%;
  margin: auto;
  background: white;
  display: grid;
  grid-template-columns: 1fr;
  border-radius: 20px;
  overflow: hidden;
  padding: 2rem;
}
.allProductSingle .allChangeList .changeList .title2 {
  text-align: center;
  font-size: 1.2rem;
  font-weight: 700;
  color: black;
  margin-bottom: 1rem;
}
.allProductSingle .allBenefit {
  background: rgba(0, 0, 0, 0.5);
  z-index: 4000;
  position: fixed;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-columns: 1fr;
  justify-content: center;
  backdrop-filter: blur(10px);
}
.allProductSingle .allBenefit .showB {
  width: 30%;
  margin: auto;
  background: white;
  display: grid;
  grid-template-columns: 1fr;
  border-radius: 20px;
  overflow: hidden;
}
.allProductSingle .allBenefit .showB .title2 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  text-align: center;
  font-size: 1.2rem;
  font-weight: 700;
  color: black;
  padding: 1rem;
  border-bottom: 2px solid rgb(238, 238, 241);
}
.allProductSingle .allBenefit .showB .title2 i {
  display: grid;
  align-items: center;
}
.allProductSingle .allBenefit .showB .title2 i svg {
  width: 1.5rem;
  height: 1.5rem;
  fill: #000;
}
.allProductSingle .allBenefit .showB .items {
  padding: 1rem;
  padding-top: 0;
}
.allProductSingle .allBenefit .showB .items .item {
  margin-top: 1rem;
  padding: 0.5rem;
  border-radius: 10px;
  border: 1px solid rgb(238, 238, 241);
  cursor: pointer;
  display: grid;
}
.allProductSingle .allBenefit .showB .items .item .name {
  font-size: 0.9rem;
  font-weight: 700;
  color: #444;
  margin-bottom: 0.5rem;
}
.allProductSingle .allBenefit .showB .items .item .body {
  font-size: 0.8rem;
  font-weight: 300;
  color: #000;
  opacity: 0.5;
}
.allProductSingle .allBulk {
  background: rgba(0, 0, 0, 0.5);
  z-index: 4000;
  position: fixed;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-columns: 1fr;
  justify-content: center;
  backdrop-filter: blur(10px);
}
.allProductSingle .allBulk .showB {
  width: 30%;
  margin: auto;
  background: white;
  display: grid;
  grid-template-columns: 1fr;
  border-radius: 20px;
  overflow: hidden;
}
.allProductSingle .allBulk .showB .title2 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  text-align: center;
  font-size: 1.2rem;
  font-weight: 700;
  color: black;
  padding: 1rem;
  border-bottom: 2px solid rgb(238, 238, 241);
}
.allProductSingle .allBulk .showB .title2 i {
  display: grid;
  align-items: center;
  cursor: pointer;
}
.allProductSingle .allBulk .showB .title2 i svg {
  width: 1.5rem;
  height: 1.5rem;
  fill: #000;
}
.allProductSingle .allBulk .showB table {
  border-radius: 20px;
  width: 100%;
  border-collapse: collapse;
}
.allProductSingle .allBulk .showB table tr {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  align-items: center;
  grid-gap: 0.5rem;
  padding: 0.5rem 1rem;
  border-bottom: 1px solid #eee;
}
.allProductSingle .allBulk .showB table tr th {
  font-weight: 700;
  color: #000;
  font-size: 0.9rem;
  text-align: right;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
.allProductSingle .allBulk .showB table tr td {
  font-weight: 700;
  font-size: 0.9rem;
  text-align: right;
  color: #000;
}
.allProductSingle .allBulk .showB table tr:first-child {
  background: #F6F8FB;
}
.allProductSingle .allGuide {
  background: rgba(0, 0, 0, 0.5);
  z-index: 4000;
  position: fixed;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-columns: 1fr;
  justify-content: center;
  backdrop-filter: blur(10px);
}
.allProductSingle .allGuide .showB {
  width: 60%;
  margin: auto;
  background: white;
  display: grid;
  grid-template-columns: 1fr;
  border-radius: 20px;
  overflow: hidden;
}
.allProductSingle .allGuide .showB .title2 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  text-align: center;
  font-size: 1.2rem;
  font-weight: 700;
  color: black;
  padding: 1rem;
  border-bottom: 2px solid rgb(238, 238, 241);
}
.allProductSingle .allGuide .showB .title2 i {
  display: grid;
  align-items: center;
  cursor: pointer;
}
.allProductSingle .allGuide .showB .title2 i svg {
  width: 1.5rem;
  height: 1.5rem;
  fill: #000;
}
.allProductSingle .allGuide .showB table {
  border-radius: 20px;
  width: 100%;
  border-collapse: collapse;
}
.allProductSingle .allGuide .showB table tr {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  align-items: center;
  grid-gap: 0.5rem;
  padding: 0.5rem 1rem;
  border-bottom: 1px solid #eee;
}
.allProductSingle .allGuide .showB table tr th {
  font-weight: 700;
  color: #000;
  font-size: 0.9rem;
  text-align: right;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
.allProductSingle .allGuide .showB table tr td {
  font-weight: 700;
  font-size: 0.9rem;
  text-align: right;
  color: #000;
}
.allProductSingle .allGuide .showB table tr:first-child {
  background: #F6F8FB;
}
.allProductSingle .allGuide .showB .c4 tr {
  grid-template-columns: repeat(4, 1fr);
}
.allProductSingle #copy-btn {
  display: none;
}
@media screen and (max-width: 700px) {
  .allProductSingle {
    width: 100% !important;
    margin-top: 0.5rem;
  }
  .allProductSingle .address {
    overflow-x: scroll;
    padding-bottom: 0.5rem;
    margin-bottom: 0;
    margin-right: 0.3rem;
  }
  .allProductSingle .address i {
    display: none;
  }
  .allProductSingle .address a {
    overflow: unset;
    white-space: nowrap;
  }
  .allProductSingle .adminButtons {
    grid-template-columns: 1fr;
    padding: 0.5rem;
  }
  .allProductSingle .showEditBtn {
    bottom: 6rem;
    left: 0.5rem;
    font-size: 0.8rem;
  }
  .allProductSingle .containers {
    border-radius: 0;
    overflow: hidden;
  }
  .allProductSingle .containers .tga {
    grid-template-columns: 1fr;
  }
  .allProductSingle .containers .tga .gallery {
    padding-bottom: 0;
    margin-left: 0;
  }
  .allProductSingle .containers .tga .gallery .pic img {
    height: 100%;
  }
  .allProductSingle .containers .tga .gallery .pic .options {
    top: 0.5rem;
    left: 0.5rem;
    right: auto;
  }
  .allProductSingle .containers .tga .gallery .pic .options .option {
    margin-bottom: 1rem;
  }
  .allProductSingle .containers .tga .gallery .pic .options .option i svg {
    width: 1.4rem;
    height: 1.4rem;
  }
  .allProductSingle .containers .tga .gallery .images {
    padding: 0.5rem;
  }
  .allProductSingle .containers .tga .gallery .images .slider-image .item {
    padding: 0.5rem;
  }
  .allProductSingle .containers .tga .gallery .images .slider-image .item img {
    height: 5rem;
  }
  .allProductSingle .containers .tga .center {
    padding: 0.5rem;
  }
  .allProductSingle .containers .tga .center h1 {
    font-size: 1.3rem;
    font-weight: 900;
    text-align: center;
    border-bottom: 0;
    padding-bottom: 0;
    margin-bottom: 0.5rem;
  }
  .allProductSingle .containers .tga .center .options {
    grid-gap: 0.5rem;
    margin: 0.5rem 0;
  }
  .allProductSingle .containers .tga .center .options .right .option {
    gap: 0.2rem;
    padding: 0.2rem 0.8rem;
    font-size: 0.8rem;
  }
  .allProductSingle .containers .tga .center .options .right .option i {
    display: none;
  }
  .allProductSingle .containers .tga .center .options .right .option:last-child {
    display: none;
  }
  .allProductSingle .containers .tga .center .options .right .alert1 {
    border-radius: 5rem;
    padding: 0.2rem 0.8rem;
    font-size: 0.8rem;
  }
  .allProductSingle .containers .tga .center .options .left .guideS {
    font-size: 0.7rem;
  }
  .allProductSingle .containers .tga .center .choice {
    padding: 0.5rem 0;
    margin-top: 0.5rem;
  }
  .allProductSingle .containers .tga .center .choice .title1 {
    font-size: 0.9rem;
  }
  .allProductSingle .containers .tga .center .choice ul {
    grid-template-columns: repeat(2, 1fr);
  }
  .allProductSingle .containers .tga .center .choice ul li {
    font-size: 0.8rem;
    padding: 0.5rem;
  }
  .allProductSingle .containers .tga .center .abilities {
    margin-top: 0.5rem;
  }
  .allProductSingle .containers .tga .center .abilities .name {
    display: none;
  }
  .allProductSingle .containers .tga .center .abilities ul {
    grid-template-columns: repeat(2, 1fr);
  }
  .allProductSingle .containers .tga .center .abilities ul li:nth-child(5), .allProductSingle .containers .tga .center .abilities ul li:nth-child(6) {
    display: none;
  }
  .allProductSingle .containers .tga .center .abilities .more .text {
    padding: 0.5rem 1rem;
    font-size: 0.75rem;
  }
  .allProductSingle .containers .tga .center .abilities .more .text i svg {
    width: 0.8rem;
    height: 0.8rem;
  }
  .allProductSingle .containers .tga .center .id1 {
    margin-top: 1rem;
    font-size: 0.8rem;
  }
  .allProductSingle .containers .tga .center .resData {
    display: block;
  }
  .allProductSingle .containers .tga .left {
    padding: 0.5rem;
    padding-top: 0;
  }
  .allProductSingle .containers .tga .left .details {
    display: none;
  }
  .allProductSingle .containers .tga .left .warning .wg {
    border-bottom: 0;
  }
  .allProductSingle .containers .tga .left .boxB {
    margin-top: 0.5rem;
    padding: 0.7rem;
  }
  .allProductSingle .containers .tga .left .boxB .right {
    font-size: 0.8rem;
  }
  .allProductSingle .containers .tga .left .boxB .right i svg {
    width: 0.9rem;
    height: 0.9rem;
  }
  .allProductSingle .containers .tga .left .boxB i svg {
    width: 0.8rem;
    height: 0.8rem;
  }
  .allProductSingle .containers .tga .left .boxB:first-child {
    margin-bottom: 0.5rem;
  }
  .allProductSingle .containers .tga .left .id1 {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    font-size: 0.8rem;
    opacity: 0.6;
    font-weight: 700;
    color: #000;
    margin-top: 1rem;
  }
  .allProductSingle .containers .tga .left .id1 i {
    display: grid;
    align-items: center;
  }
  .allProductSingle .containers .tga .left .id1 i svg {
    width: 0.9rem;
    height: 0.9rem;
    fill: #000;
  }
  .allProductSingle .containers .boxes {
    display: none;
  }
  .allProductSingle .sellers {
    border-radius: 0;
    margin-top: 0;
    padding-top: 0.5rem;
    border-top: 1px solid #eee;
  }
  .allProductSingle .sellers .title {
    font-size: 1rem;
    padding: 0;
    padding-right: 0.5rem;
    border-bottom: 0;
  }
  .allProductSingle .sellers .items .item {
    padding: 0.5rem;
    border-bottom: 2px solid #eee;
  }
  .allProductSingle .sellers .items .item .postTop {
    grid-template-columns: 1fr;
  }
  .allProductSingle .sellers .items .item .postTop .postTitle {
    grid-template-columns: 1fr;
    grid-gap: 0.5rem;
  }
  .allProductSingle .sellers .items .item .postTop .postTitle .postImages {
    justify-content: center;
  }
  .allProductSingle .sellers .items .item .postTop .postTitle .postImages .postImage img {
    height: 4rem;
    width: 4rem;
  }
  .allProductSingle .sellers .items .item .postTop .postTitle ul {
    grid-template-columns: 1fr;
    grid-gap: 0;
  }
  .allProductSingle .sellers .items .item .postTop .postTitle ul li {
    display: flex;
    justify-content: space-between;
    margin-bottom: 0.5rem;
  }
  .allProductSingle .sellers .items .item .postTop .postTitle ul li span, .allProductSingle .sellers .items .item .postTop .postTitle ul li label, .allProductSingle .sellers .items .item .postTop .postTitle ul li a {
    font-size: 0.8rem;
  }
  .allProductSingle .sellers .items .item .postTop .postTitle ul li span:last-child, .allProductSingle .sellers .items .item .postTop .postTitle ul li label:last-child, .allProductSingle .sellers .items .item .postTop .postTitle ul li a:last-child {
    font-size: 0.9rem;
  }
  .allProductSingle .sellers .items .item .postTop .postTitle ul li select {
    height: 2rem;
    min-width: 8rem;
  }
  .allProductSingle .sellers .items .item .postTop .postOptions {
    display: block;
  }
  .allProductSingle .sellers .items .item .postTop .postOptions .addCart {
    width: 100%;
    text-align: center;
  }
  .allProductSingle .sellers .items .item .postBot {
    display: block;
    padding: 0.5rem;
  }
  .allProductSingle .sellers .items .item .postBot ul {
    display: flex;
    flex-wrap: wrap;
    grid-gap: 1rem;
    justify-content: space-between;
  }
  .allProductSingle .sellers .items .item .postBot ul li span {
    font-size: 0.7rem;
  }
  .allProductSingle .containerD {
    margin-top: 0.5rem;
  }
  .allProductSingle .containerD .tabs {
    gap: 0.5rem;
  }
  .allProductSingle .containerD .tabs .tab {
    font-size: 0.9rem;
    padding: 0.3rem 0.5rem;
  }
  .allProductSingle .containerD .tabs .tab i svg {
    width: 0.8rem;
    height: 0.8rem;
  }
  .allProductSingle .containerD .tabs .tab span {
    width: 1rem;
    height: 1rem;
    font-size: 0.65rem;
  }
  .allProductSingle .containerD .data1 {
    border-radius: 0;
    border: 0;
  }
  .allProductSingle .containerD .data1 .des {
    padding: 0.5rem;
  }
  .allProductSingle .containerD .data1 .des .title1 {
    font-size: 1rem;
  }
  .allProductSingle .containerD .data1 .des .title1 i svg {
    width: 1rem;
    height: 1rem;
  }
  .allProductSingle .containerD .data1 .des .body p {
    font-size: 0.8rem;
    margin-top: 0.5rem;
  }
  .allProductSingle .containerD .data1 .des .body .image {
    margin: 0.5rem 0;
  }
  .allProductSingle .containerD .data1 .des .body img {
    height: auto !important;
    margin: 10px 0 !important;
  }
  .allProductSingle .containerD .data1 .des .body ul, .allProductSingle .containerD .data1 .des .body ol {
    margin: 0.5rem;
  }
  .allProductSingle .containerD .data1 .des .body ul li, .allProductSingle .containerD .data1 .des .body ol li {
    font-size: 0.8rem;
  }
  .allProductSingle .containerD .data1 .des .body ul ul, .allProductSingle .containerD .data1 .des .body ol ul {
    margin-top: 0.5rem;
    margin-right: 0.5rem;
  }
  .allProductSingle .containerD .data1 .des .body h2, .allProductSingle .containerD .data1 .des .body h3, .allProductSingle .containerD .data1 .des .body h4 {
    margin-bottom: 0.5rem;
  }
  .allProductSingle .containerD .data1 .des .body h2 {
    font-size: 1rem;
  }
  .allProductSingle .containerD .data1 .des .body h3 {
    font-size: 0.9rem;
  }
  .allProductSingle .containerD .data1 .des .body h4 {
    font-size: 0.8rem;
  }
  .allProductSingle .containerD .data1 .ability1 {
    padding: 0.5rem;
  }
  .allProductSingle .containerD .data1 .ability1 .title1 {
    font-size: 1rem;
  }
  .allProductSingle .containerD .data1 .ability1 .title1 i svg {
    width: 1rem;
    height: 1rem;
  }
  .allProductSingle .containerD .data1 .ability1 .items .item {
    margin-top: 0.5rem;
    grid-template-columns: 1fr 2fr;
  }
  .allProductSingle .containerD .data1 .ability1 .items .item .name1 {
    font-size: 0.7rem;
    padding: 0.5rem;
  }
  .allProductSingle .containerD .data1 .ability1 .items .item .body1 {
    font-size: 0.7rem;
    padding: 0.5rem;
  }
  .allProductSingle .containerD .data1 .comments1 .topC1 {
    padding: 0.5rem;
  }
  .allProductSingle .containerD .data1 .comments1 .topC1 .title2 {
    font-size: 1rem;
  }
  .allProductSingle .containerD .data1 .comments1 .topC1 .para1 {
    font-size: 0.8rem;
    font-weight: 300;
    color: #444;
  }
  .allProductSingle .addFloat {
    display: block;
  }
  .allProductSingle .sellerInfo {
    background: rgba(0, 0, 0, 0.5);
    z-index: 4000;
    position: fixed;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
    display: grid;
    grid-template-columns: 1fr;
    justify-content: center;
    backdrop-filter: blur(10px);
  }
  .allProductSingle .sellerInfo .data {
    width: 30%;
    margin: auto;
    background: white;
    display: grid;
    grid-template-columns: 1fr;
    border-radius: 20px;
    overflow: hidden;
  }
  .allProductSingle .sellerInfo .data .title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem;
    border-bottom: 2px solid #eee;
  }
  .allProductSingle .sellerInfo .data .title .name {
    font-size: 1.5rem;
    font-weight: 900;
    color: #444;
  }
  .allProductSingle .sellerInfo .data .title .location {
    display: flex;
    justify-content: left;
    align-items: center;
    gap: 0.3rem;
    font-size: 1rem;
    font-weight: 500;
    color: var(--green-color);
  }
  .allProductSingle .sellerInfo .data .title .location i {
    display: grid;
    align-items: center;
  }
  .allProductSingle .sellerInfo .data .title .location i svg {
    width: 1.2rem;
    height: 1.2rem;
    fill: var(--green-color);
  }
  .allProductSingle .sellerInfo .data .profile {
    margin: 1rem 0;
    padding: 0 1rem;
  }
  .allProductSingle .sellerInfo .data .profile .pic {
    display: grid;
    justify-content: center;
  }
  .allProductSingle .sellerInfo .data .profile .pic img {
    width: auto;
    height: 5rem;
    object-fit: cover;
  }
  .allProductSingle .sellerInfo .data .profile .name {
    font-size: 1.3rem;
    font-weight: 900;
    color: black;
    text-align: center;
    margin-top: 0.5rem;
  }
  .allProductSingle .sellerInfo .data .profile p {
    font-size: 0.9rem;
    font-weight: 300;
    text-align: center;
    margin-top: 0.5rem;
    line-height: 2rem;
    color: #444;
    white-space: pre-line;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    box-orient: vertical;
    -webkit-box-orient: vertical;
    line-clamp: 2;
    -webkit-line-clamp: 2;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .allProductSingle .sellerInfo .data .options {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 1rem;
    padding: 0 1rem;
  }
  .allProductSingle .sellerInfo .data .options .option {
    background: #f5f5f5;
    padding: 0.5rem 1rem;
    text-align: center;
    border-radius: 10px;
  }
  .allProductSingle .sellerInfo .data .options .option .body2 {
    font-size: 1.2rem;
    font-weight: 700;
    color: black;
  }
  .allProductSingle .sellerInfo .data .options .option .title2 {
    font-size: 1rem;
    font-weight: 500;
    color: #444;
    opacity: 0.7;
  }
  .allProductSingle .sellerInfo .data label {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    grid-gap: 0.5rem;
    margin: 1rem;
  }
  .allProductSingle .sellerInfo .data label input {
    border: 1px solid #ddd;
    font-size: 1rem;
    padding: 0.7rem 1rem;
    border-radius: 5rem;
    font-weight: 700;
    opacity: 0.7;
  }
  .allProductSingle .sellerInfo .data label i {
    display: grid;
    align-items: center;
    justify-content: center;
    transform: rotate(-135deg);
    border: 1px solid var(--green-color);
    border-radius: 50%;
    width: 3rem;
    height: 3rem;
  }
  .allProductSingle .sellerInfo .data label i svg {
    width: 1.2rem;
    height: 1.2rem;
    fill: var(--green-color);
  }
  .allProductSingle .sellerInfo .data .time {
    font-size: 1rem;
    font-weight: 300;
    color: #444;
    text-align: center;
    margin-right: 1rem;
  }
  .allProductSingle .sellerInfo .data .time span {
    color: red;
    font-weight: 700;
  }
  .allProductSingle .sellerInfo .data .time .active {
    color: green;
  }
  .allProductSingle .sellerInfo .data .buttons {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 1rem;
    padding: 1rem;
  }
  .allProductSingle .sellerInfo .data .buttons a {
    padding: 0.5rem 1rem;
    border-radius: 5px;
    font-size: 1rem;
    text-align: center;
    background: white;
    font-weight: 700;
    color: var(--green-color);
    border: 2px solid var(--green-color);
  }
  .allProductSingle .sellerInfo .data .buttons a:last-child {
    color: white;
    border: 2px solid var(--green-color);
    background: var(--green-color);
  }
  .allProductSingle .sellerInfo .data {
    width: 98%;
    border-radius: 10px;
  }
  .allProductSingle .sellerInfo .data .title {
    padding: 0.5rem;
  }
  .allProductSingle .sellerInfo .data .title .name {
    font-size: 1rem;
  }
  .allProductSingle .sellerInfo .data .title .location {
    font-size: 0.8rem;
  }
  .allProductSingle .sellerInfo .data .title .location i svg {
    width: 0.9rem;
    height: 0.9rem;
  }
  .allProductSingle .sellerInfo .data .profile {
    margin: 0.5rem 0;
    padding: 0 0.5rem;
  }
  .allProductSingle .sellerInfo .data .profile .pic img {
    height: 4rem;
  }
  .allProductSingle .sellerInfo .data .profile .name {
    font-size: 1rem;
  }
  .allProductSingle .sellerInfo .data .profile p {
    font-size: 0.8rem;
  }
  .allProductSingle .sellerInfo .data .options {
    display: grid;
    grid-gap: 0.5rem;
    padding: 0 0.5rem;
  }
  .allProductSingle .sellerInfo .data .options .option {
    padding: 0.5rem;
  }
  .allProductSingle .sellerInfo .data .options .option .body2 {
    font-size: 0.9rem;
  }
  .allProductSingle .sellerInfo .data .options .option .title2 {
    font-size: 0.8rem;
  }
  .allProductSingle .sellerInfo .data label {
    margin: 0.5rem;
  }
  .allProductSingle .sellerInfo .data label input {
    font-size: 0.85rem;
    padding: 0.5rem 0.8rem;
  }
  .allProductSingle .sellerInfo .data label i {
    width: 2.5rem;
    height: 2.5rem;
  }
  .allProductSingle .sellerInfo .data label i svg {
    width: 1rem;
    height: 1rem;
  }
  .allProductSingle .sellerInfo .data .time {
    font-size: 0.9rem;
    margin-right: 0.5rem;
  }
  .allProductSingle .sellerInfo .data .buttons {
    grid-gap: 0.5rem;
    padding: 0.5rem;
  }
  .allProductSingle .sellerInfo .data .buttons a {
    padding: 0.5rem;
    font-size: 0.8rem;
  }
  .allProductSingle .allTicket .chatContent {
    width: 100%;
    border-radius: 0;
  }
  .allProductSingle .allTicket .chatContent .header .profile .pic img {
    width: 2rem;
    height: 2rem;
  }
  .allProductSingle .allTicket .chatContent .header .profile .name {
    font-size: 0.8rem;
  }
  .allProductSingle .allTicket .chatContent .header i svg {
    width: 1.1rem;
    height: 1.1rem;
  }
  .allProductSingle .allTicket .chatContent .body {
    height: calc(100vh - 6.4rem);
  }
  .allProductSingle .allTicket .chatContent .body p {
    font-size: 0.7rem;
  }
  .allProductSingle .allTicket .chatContent .body p .closeChats {
    padding: 0.2rem;
  }
  .allProductSingle .allTicket .chatContent .body .choice {
    padding: 0.5rem;
    font-size: 0.7rem;
  }
  .allProductSingle .allTicket .chatContent .body .bodyLabel {
    font-size: 0.7rem;
    margin-top: 0.5rem;
  }
  .allProductSingle .allTicket .chatContent .body .bodyLabel input, .allProductSingle .allTicket .chatContent .body .bodyLabel select, .allProductSingle .allTicket .chatContent .body .bodyLabel textarea {
    padding: 0.3rem;
    font-size: 0.7rem;
  }
  .allProductSingle .allTicket .chatContent .body .message11 {
    margin-top: 1rem;
    font-size: 0.8rem;
  }
  .allProductSingle .allTicket .chatContent .body .message11 .time {
    font-size: 0.6rem;
  }
  .allProductSingle .allTicket .chatContent .body .message11 .messages {
    padding: 0.3rem;
  }
  .allProductSingle .allTicket .chatContent .body .submit {
    font-size: 0.8rem;
    padding: 0.3rem 0.5rem;
    margin-top: 0.5rem;
  }
  .allProductSingle .allTicket .chatContent .body .sendImage {
    margin-top: 0.5rem;
  }
  .allProductSingle .allTicket .chatContent .send {
    grid-gap: 0.5rem;
    padding: 0.5rem;
  }
  .allProductSingle .allTicket .chatContent .send input {
    padding: 0.5rem;
    font-size: 0.85rem;
  }
  .allProductSingle .allTicket .chatContent .send button {
    font-size: 0.7rem;
    padding: 0 1rem;
  }
  .allProductSingle .allTicket .chatContent .loginChat {
    font-size: 1rem;
    height: 3.5rem;
    align-items: center;
  }
  .allProductSingle .allTicket .chatContent .typeLogin1 {
    margin-top: 0.5rem;
  }
  .allProductSingle .allChangeList .changeList {
    width: 100%;
    padding: 0.5rem;
  }
  .allProductSingle .allChangeList .changeList .title2 {
    font-size: 0.9rem;
    margin-bottom: 0.5rem;
  }
  .allProductSingle .allBenefit .showB {
    width: 100%;
    border-radius: 0;
    height: 100vh;
    display: block;
  }
  .allProductSingle .allBenefit .showB .title2 {
    font-size: 0.9rem;
    padding: 0.5rem;
  }
  .allProductSingle .allBenefit .showB .title2 i svg {
    width: 1rem;
    height: 1rem;
  }
  .allProductSingle .allBenefit .showB .items {
    padding: 0.5rem;
    padding-top: 0;
  }
  .allProductSingle .allGuide .showB {
    width: 100%;
    border-radius: 0;
    height: 100vh;
    display: block;
  }
  .allProductSingle .allGuide .showB .title2 {
    font-size: 0.9rem;
    padding: 0.5rem;
  }
  .allProductSingle .allGuide .showB .title2 i svg {
    width: 1rem;
    height: 1rem;
  }
  .allProductSingle .allGuide .showB .table {
    overflow-x: scroll;
  }
  .allProductSingle .allGuide .showB table {
    border-radius: 10px;
  }
  .allProductSingle .allGuide .showB table tr {
    padding: 0.5rem;
    grid-template-columns: repeat(5, 7rem);
  }
  .allProductSingle .allGuide .showB table tr th {
    font-size: 0.7rem;
  }
  .allProductSingle .allGuide .showB table tr td {
    font-size: 0.7rem;
  }
  .allProductSingle .allGuide .showB .c4 tr {
    grid-template-columns: repeat(4, 7rem);
  }
  .allProductSingle .allBulk .showB {
    width: 100%;
    border-radius: 0;
  }
  .allProductSingle .allBulk .showB .title2 {
    font-size: 0.9rem;
    padding: 0.5rem;
  }
  .allProductSingle .allBulk .showB .title2 i svg {
    width: 1rem;
    height: 1rem;
  }
  .allProductSingle .allBulk .showB table {
    border-radius: 10px;
  }
  .allProductSingle .allBulk .showB table tr {
    padding: 0.5rem;
  }
  .allProductSingle .allBulk .showB table tr th {
    font-size: 0.8rem;
  }
  .allProductSingle .allBulk .showB table tr td {
    font-size: 0.8rem;
  }
}

.allProductSingle2 {
  margin: auto;
  margin-top: 1rem;
}
.allProductSingle2 .address {
  display: flex;
  justify-content: right;
  align-items: center;
  position: relative;
  margin-bottom: 1rem;
  background: white;
  border-radius: 15px;
  padding: 1rem;
  border: 1px solid #eee;
}
.allProductSingle2 .address a {
  font-size: 0.85rem;
  font-weight: 500;
  color: #444;
  opacity: 0.7;
  white-space: pre-line;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  box-orient: vertical;
  -webkit-box-orient: vertical;
  line-clamp: 1;
  -webkit-line-clamp: 1;
  overflow: hidden;
  text-overflow: ellipsis;
}
.allProductSingle2 .address a:after {
  content: "/";
  padding: 0 0.4rem;
}
.allProductSingle2 .address a:last-child:after {
  content: "";
  padding: 0;
}
.allProductSingle2 .adminButtons {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 1rem;
  margin-bottom: 1rem;
}
.allProductSingle2 .adminButtons .sendDashboard {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.7rem;
  border-radius: 10px;
  background: #f3c8ff;
  color: purple;
  font-size: 0.9rem;
  font-weight: 700;
  box-shadow: 0 5px 5px rgba(0, 0, 0, 0.08);
}
.allProductSingle2 .adminButtons .sendDashboard i {
  display: grid;
  align-items: center;
}
.allProductSingle2 .adminButtons .sendDashboard i svg {
  width: 1.2rem;
  height: 1.2rem;
  color: purple;
}
.allProductSingle2 .adminButtons .sendDashboard:nth-child(2) {
  background: #c8d8ff;
  color: #002480;
}
.allProductSingle2 .adminButtons .sendDashboard:nth-child(2) i svg {
  color: #002480;
}
.allProductSingle2 .adminButtons .sendDashboard:nth-child(3) {
  background: #c8ffcf;
  color: #008002;
}
.allProductSingle2 .adminButtons .sendDashboard:nth-child(3) i svg {
  color: #008002;
}
.allProductSingle2 .containers {
  display: grid;
  grid-template-columns: 1fr 2fr;
  grid-gap: 1rem;
}
.allProductSingle2 .containers .gallery .pics {
  background: white;
  border-radius: 15px;
  padding: 1rem;
  border: 1px solid #eee;
}
.allProductSingle2 .containers .gallery .pics .pic {
  position: relative;
  display: grid;
  overflow: hidden;
  justify-content: center;
  padding: 1rem;
  border-radius: 15px;
  border: 1px solid #eee;
}
.allProductSingle2 .containers .gallery .pics .pic img {
  height: 20rem;
  object-fit: contain;
}
.allProductSingle2 .containers .gallery .pics .images {
  margin-top: 1rem;
}
.allProductSingle2 .containers .gallery .pics .images .slider-image {
  display: grid;
}
.allProductSingle2 .containers .gallery .pics .images .slider-image .item {
  padding: 0.5rem;
  border: 1px solid #eee;
  border-radius: 15px;
  cursor: pointer;
}
.allProductSingle2 .containers .gallery .pics .images .slider-image .item img {
  height: 5rem;
  object-fit: contain;
}
.allProductSingle2 .containers .gallery .pics .images .slider-image .active2 {
  border: 1px solid var(--green-color);
}
.allProductSingle2 .containers .gallery .pics .images .slider-image .owl-next, .allProductSingle2 .containers .gallery .pics .images .slider-image .owl-prev {
  padding: 0.5rem;
  background: white !important;
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto;
  right: 0.5rem;
  width: 2.5rem;
  border: 2px solid black !important;
  font-size: 1.5rem !important;
  border-radius: 50%;
  color: black !important;
  height: 2.5rem;
  transition: all 0.3s ease-in-out;
}
.allProductSingle2 .containers .gallery .pics .images .slider-image .owl-next:hover, .allProductSingle2 .containers .gallery .pics .images .slider-image .owl-prev:hover {
  background: black !important;
  color: white !important;
}
.allProductSingle2 .containers .gallery .pics .images .slider-image .owl-next {
  left: 0.5rem;
  right: auto;
}
.allProductSingle2 .containers .gallery .options {
  margin-top: 0.5rem;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 0.5rem;
}
.allProductSingle2 .containers .gallery .options .option {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 1rem;
  border-radius: 15px;
  border: 1px solid #eee;
  background: white;
  font-size: 0.9rem;
  font-weight: 700;
  color: #000;
  cursor: pointer;
}
.allProductSingle2 .containers .gallery .options .option i {
  display: grid;
  align-items: center;
}
.allProductSingle2 .containers .gallery .options .option i svg {
  width: 1.3rem;
  height: 1.3rem;
  color: #000;
}
.allProductSingle2 .containers .txtE {
  margin-top: 1rem;
  position: relative;
  width: 100%;
}
.allProductSingle2 .containers .txtE textarea {
  font-size: 0.9rem;
  font-weight: 300;
  color: #000;
  background: #f7f7f7;
  width: 100%;
  height: 3rem;
  border-radius: 10px;
  padding: 1rem;
  resize: vertical;
}
.allProductSingle2 .containers .txtE:before {
  content: attr(data-tooltip);
  position: absolute;
  top: -0.5rem;
  background: purple;
  color: white;
  padding: 1px 5px;
  font-size: 0.7rem;
  border-radius: 5px;
  font-weight: 500;
}
.allProductSingle2 .containers .left .title2 {
  background: white;
  border-radius: 15px;
  padding: 1rem;
  border: 1px solid #eee;
}
.allProductSingle2 .containers .left .title2 h1 {
  font-size: 1.2rem;
  font-weight: 700;
  color: #000;
  margin-bottom: 5px;
}
.allProductSingle2 .containers .left .title2 h2 {
  font-size: 0.9rem;
  font-weight: 700;
  color: #444;
  opacity: 0.5;
}
.allProductSingle2 .containers .left .details {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  grid-gap: 0.5rem;
  margin-top: 0.5rem;
}
.allProductSingle2 .containers .left .details .boxes .comments {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  background: white;
  border-radius: 15px;
  padding: 1rem;
  border: 1px solid #eee;
}
.allProductSingle2 .containers .left .details .boxes .comments .rate .name {
  font-size: 0.9rem;
  font-weight: 700;
  color: #444;
  opacity: 0.6;
  margin-bottom: 5px;
}
.allProductSingle2 .containers .left .details .boxes .comments .rate .rate1 {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.9rem;
  font-weight: 900;
  color: #000;
}
.allProductSingle2 .containers .left .details .boxes .comments .rate .rate1 i {
  display: grid;
  align-items: center;
}
.allProductSingle2 .containers .left .details .boxes .comments .rate .rate1 i svg {
  width: 1rem;
  height: 1rem;
  fill: #000;
}
.allProductSingle2 .containers .left .details .boxes .comments .all {
  display: flex;
  align-items: center;
  font-size: 0.9rem;
  gap: 5px;
  font-weight: 500;
  color: var(--green-color);
  cursor: pointer;
}
.allProductSingle2 .containers .left .details .boxes .comments .all i {
  display: grid;
  align-items: center;
}
.allProductSingle2 .containers .left .details .boxes .comments .all i svg {
  width: 1.3rem;
  height: 1.3rem;
  fill: var(--green-color);
}
.allProductSingle2 .containers .left .details .boxes .choice {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  background: white;
  border-radius: 15px;
  padding: 1rem;
  margin-top: 0.5rem;
  border: 1px solid #eee;
}
.allProductSingle2 .containers .left .details .boxes .choice .select .name {
  font-size: 0.9rem;
  font-weight: 700;
  color: #444;
  opacity: 0.6;
  margin-bottom: 5px;
}
.allProductSingle2 .containers .left .details .boxes .choice .select .body {
  font-size: 0.9rem;
  font-weight: 900;
  color: #000;
}
.allProductSingle2 .containers .left .details .boxes .choice .lists {
  display: flex;
  justify-content: left;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.allProductSingle2 .containers .left .details .boxes .choice .lists .item {
  padding: 0.3rem 0.7rem;
  border: 2px solid #eee;
  border-radius: 10px;
  font-size: 0.9rem;
  font-weight: 500;
  color: #000;
  cursor: pointer;
}
.allProductSingle2 .containers .left .details .boxes .choice .lists .active {
  border: 2px solid var(--green-color);
  color: var(--green-color);
}
.allProductSingle2 .containers .left .details .boxes .ability {
  background: white;
  border-radius: 15px;
  padding: 1rem;
  margin-top: 0.5rem;
  border: 1px solid #eee;
}
.allProductSingle2 .containers .left .details .boxes .ability .title3 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}
.allProductSingle2 .containers .left .details .boxes .ability .title3 .name {
  font-size: 0.9rem;
  font-weight: 700;
  color: #444;
  opacity: 0.6;
  margin-bottom: 5px;
}
.allProductSingle2 .containers .left .details .boxes .ability .title3 .all {
  display: flex;
  align-items: center;
  font-size: 0.9rem;
  font-weight: 500;
  gap: 5px;
  color: var(--green-color);
  cursor: pointer;
}
.allProductSingle2 .containers .left .details .boxes .ability .title3 .all i {
  display: grid;
  align-items: center;
}
.allProductSingle2 .containers .left .details .boxes .ability .title3 .all i svg {
  width: 1.3rem;
  height: 1.3rem;
  fill: var(--green-color);
}
.allProductSingle2 .containers .left .details .boxes .ability .lists .item {
  display: grid;
  grid-template-columns: 10rem 1fr;
  grid-gap: 0.5rem;
  border-bottom: 1px solid rgb(238, 238, 241);
  padding: 1rem 0;
}
.allProductSingle2 .containers .left .details .boxes .ability .lists .item .name1 {
  font-size: 0.8rem;
  font-weight: 700;
  color: #444;
  opacity: 0.7;
}
.allProductSingle2 .containers .left .details .boxes .ability .lists .item .body1 {
  font-size: 0.8rem;
  font-weight: 700;
  color: #000;
}
.allProductSingle2 .containers .left .details .boxes .ability .lists .item:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}
.allProductSingle2 .containers .left .details .detail .boxB {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: white;
  border-radius: 15px;
  padding: 1rem;
  border: 1px solid #eee;
  font-size: 0.9rem;
  font-weight: 700;
  color: #000;
  cursor: pointer;
  margin-bottom: 0.5rem;
}
.allProductSingle2 .containers .left .details .detail .boxB i {
  display: grid;
  align-items: center;
}
.allProductSingle2 .containers .left .details .detail .boxB i svg {
  width: 1.4rem;
  height: 1.4rem;
  color: var(--green-color);
}
.allProductSingle2 .containers .left .details .detail .boxD {
  background: white;
  border-radius: 15px;
  padding: 1rem;
  border: 1px solid #eee;
}
.allProductSingle2 .containers .left .details .detail .boxD .title1 {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.allProductSingle2 .containers .left .details .detail .boxD .title1 .name {
  font-size: 1rem;
  font-weight: 700;
  color: #444;
}
.allProductSingle2 .containers .left .details .detail .boxD .title1 .left {
  display: flex;
  justify-content: left;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--green-color);
}
.allProductSingle2 .containers .left .details .detail .boxD .title1 .left i {
  display: grid;
  align-items: center;
}
.allProductSingle2 .containers .left .details .detail .boxD .title1 .left i svg {
  width: 1rem;
  height: 1rem;
  fill: var(--green-color);
}
.allProductSingle2 .containers .left .details .detail .boxD .user {
  padding: 1rem 0;
  margin-top: 1rem;
  border-top: 2px solid #eee;
  border-bottom: 2px solid #eee;
}
.allProductSingle2 .containers .left .details .detail .boxD .user .name {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.9rem;
  font-weight: 700;
  color: #000;
}
.allProductSingle2 .containers .left .details .detail .boxD .user .name i {
  display: grid;
  align-items: center;
}
.allProductSingle2 .containers .left .details .detail .boxD .user .name i svg {
  width: 1.1rem;
  height: 1.1rem;
  fill: #000;
}
.allProductSingle2 .containers .left .details .detail .boxD .user .option {
  margin-top: 1rem;
  padding: 0.7rem;
  border-radius: 10px;
  background: #f7f7f7;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
}
.allProductSingle2 .containers .left .details .detail .boxD .user .option .name {
  color: #444;
  font-size: 0.9rem;
  font-weight: 700;
}
.allProductSingle2 .containers .left .details .detail .boxD .user .option i {
  display: grid;
  align-items: center;
}
.allProductSingle2 .containers .left .details .detail .boxD .user .option i svg {
  width: 1rem;
  height: 1rem;
  fill: #444;
}
.allProductSingle2 .containers .left .details .detail .boxD .user .option i:last-child svg {
  width: 1.3rem;
  height: 1.3rem;
}
.allProductSingle2 .containers .left .details .detail .boxD .carrier {
  margin: 1rem 0;
  border-bottom: 2px solid #eee;
  padding-bottom: 1rem;
}
.allProductSingle2 .containers .left .details .detail .boxD .carrier .name {
  font-size: 0.9rem;
  font-weight: 700;
  color: #000;
  margin-bottom: 0.5rem;
}
.allProductSingle2 .containers .left .details .detail .boxD .carrier select {
  padding: 0.5rem;
  border-radius: 10px;
  font-size: 0.9rem;
  font-weight: 500;
  color: #000;
  width: 100%;
  background: #f7f7f7;
}
.allProductSingle2 .containers .left .details .detail .boxD .prices {
  display: flex;
  justify-content: left;
  gap: 1rem;
  align-items: center;
  margin-top: 1rem;
}
.allProductSingle2 .containers .left .details .detail .boxD .prices .off {
  border: 1px solid red;
  border-radius: 10px;
  padding: 0.5rem;
  font-size: 0.8rem;
  font-weight: 700;
  color: red;
}
.allProductSingle2 .containers .left .details .detail .boxD .prices .price {
  display: grid;
  grid-template-columns: 1fr;
  grid-gap: 5px;
  text-align: left;
}
.allProductSingle2 .containers .left .details .detail .boxD .prices .price s {
  font-size: 0.85rem;
  font-weight: 300;
  color: #444;
}
.allProductSingle2 .containers .left .details .detail .boxD .prices .price bdi {
  font-size: 0.8rem;
  font-weight: 900;
  color: #000;
  line-height: 0.7rem;
}
.allProductSingle2 .containers .left .details .detail .boxD .prices .price bdi span {
  font-size: 1.2rem;
  margin-left: 5px;
  line-height: 0.7rem;
}
.allProductSingle2 .containers .left .details .detail .boxD .add {
  margin-top: 1rem;
}
.allProductSingle2 .containers .left .details .detail .boxD .add .addCarts {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-gap: 0.5rem;
}
.allProductSingle2 .containers .left .details .detail .boxD .add .addCarts .addCart {
  padding: 0.6rem;
  opacity: 0.7;
  font-size: 1rem;
  font-weight: 700;
  border-radius: 10px;
  background: var(--green-color);
  color: white;
  text-align: center;
  transition: all 0.3s ease-in-out;
  cursor: pointer;
}
.allProductSingle2 .containers .left .details .detail .boxD .add .addCarts .addCart:hover {
  opacity: 1;
}
.allProductSingle2 .containers .left .details .detail .boxD .add .addCarts .counts {
  display: flex;
  align-items: center;
  border: 2px solid #eee;
  border-radius: 10px;
  height: 100%;
}
.allProductSingle2 .containers .left .details .detail .boxD .add .addCarts .counts input {
  width: 3rem;
  padding: 0.5rem;
  background: transparent;
  text-align: center;
  font-size: 1rem;
  font-weight: 700;
  color: #000;
}
.allProductSingle2 .containers .left .details .detail .boxD .add .addCarts .counts i {
  display: grid;
  align-items: center;
  padding: 0.5rem;
  cursor: pointer;
}
.allProductSingle2 .containers .left .details .detail .boxD .add .addCarts .counts i svg {
  width: 0.8rem;
  height: 0.8rem;
  fill: #000;
}
.allProductSingle2 .containers .left .details .detail .boxD .empty {
  padding: 0.6rem;
  font-size: 1rem;
  font-weight: 700;
  border-radius: 5px;
  background: grey;
  color: white;
  text-align: center;
  transition: all 0.3s ease-in-out;
  cursor: pointer;
  opacity: 1;
  display: grid;
}
.allProductSingle2 .containers .left .details .detail .boxD .call {
  background: var(--green-color);
}
.allProductSingle2 .containers .left .details .detail .options {
  margin-top: 0.5rem;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 0.5rem;
}
.allProductSingle2 .containers .left .details .detail .options .option {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 1rem;
  border-radius: 15px;
  border: 1px solid #eee;
  background: white;
  font-size: 0.9rem;
  font-weight: 700;
  color: #000;
  cursor: pointer;
}
.allProductSingle2 .containers .left .details .detail .options .option i {
  display: grid;
  align-items: center;
}
.allProductSingle2 .containers .left .details .detail .options .option i svg {
  width: 1.1rem;
  height: 1.1rem;
  color: #000;
}
.allProductSingle2 .containers .left .details .detail .lottery {
  border: 1px solid #eee;
  background: white;
  margin: 1rem 0;
  border-radius: 15px;
  padding: 1rem;
}
.allProductSingle2 .containers .left .details .detail .lottery .title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
}
.allProductSingle2 .containers .left .details .detail .lottery .title .title1 {
  font-size: 0.85rem;
  font-weight: 500;
  color: #000;
}
.allProductSingle2 .containers .left .details .detail .lottery .title .name {
  font-size: 0.8rem;
  font-weight: 700;
  color: red;
}
.allProductSingle2 .containers .left .details .detail .lottery .bars {
  height: 10px;
  width: 100%;
  background: #f5f5f5;
  border-radius: 5rem;
  direction: ltr;
}
.allProductSingle2 .containers .left .details .detail .lottery .bars .bar1 {
  height: 100%;
  background: red;
  border-radius: 5rem;
  position: relative;
}
.allProductSingle2 .containers .left .details .detail .lottery .bars .bar1 div {
  width: 0;
  height: 100%;
  background: white;
  opacity: 0.5;
  box-shadow: 0 0 5px rgba(255, 0, 0, 0.3);
  border-radius: 5rem;
  transition: all 0.3s ease-in-out;
  animation: arrow-anim5 1s ease infinite;
}
@keyframes arrow-anim5 {
  0% {
    width: 0%;
  }
  5% {
    width: 5%;
  }
  10% {
    width: 10%;
  }
  15% {
    width: 15%;
  }
  20% {
    width: 20%;
  }
  25% {
    width: 25%;
  }
  30% {
    width: 30%;
  }
  35% {
    width: 35%;
  }
  40% {
    width: 40%;
  }
  45% {
    width: 45%;
  }
  50% {
    width: 50%;
  }
  55% {
    width: 55%;
  }
  60% {
    width: 60%;
  }
  65% {
    width: 65%;
  }
  70% {
    width: 70%;
  }
  75% {
    width: 75%;
  }
  80% {
    width: 80%;
  }
  85% {
    width: 85%;
  }
  90% {
    width: 90%;
  }
  95% {
    width: 95%;
  }
  100% {
    width: 100%;
  }
}
.allProductSingle2 .showEditBtn {
  position: fixed;
  bottom: 1rem;
  left: 1rem;
  background: purple;
  padding: 0.5rem;
  border-radius: 10px;
  color: white;
  font-size: 1rem;
  font-weight: 500;
  z-index: 10;
  display: none;
  cursor: pointer;
}
.allProductSingle2 .addFloat {
  position: fixed;
  bottom: 0;
  right: 0;
  left: 0;
  z-index: 100;
  background: white;
  box-shadow: 0 -10px 10px rgba(0, 0, 0, 0.1);
  padding: 0.5rem;
  display: none;
}
.allProductSingle2 .addFloat .top {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  justify-content: space-between;
}
.allProductSingle2 .addFloat .top .price {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.allProductSingle2 .addFloat .top .price .offer {
  display: flex;
  justify-content: left;
  align-items: center;
  gap: 0.5rem;
}
.allProductSingle2 .addFloat .top .price .offer s {
  font-size: 0.9rem;
  font-weight: 300;
  color: #000;
  opacity: 0.5;
}
.allProductSingle2 .addFloat .top .price .offer .off {
  background: red;
  padding: 0.1rem 0.5rem;
  border-radius: 5rem;
  font-size: 0.8rem;
  font-weight: 900;
  color: white;
}
.allProductSingle2 .addFloat .top .price .priceF {
  font-size: 0.7rem;
  font-weight: 300;
  color: #000;
}
.allProductSingle2 .addFloat .top .price .priceF span {
  font-size: 1.2rem;
  font-weight: 700;
}
.allProductSingle2 .addFloat .top select {
  padding: 0.2rem 0.8rem;
  background: transparent;
  border-radius: 10px;
  font-size: 1rem;
  font-weight: 500;
  color: #000;
  border: 1px solid #eee;
}
.allProductSingle2 .addFloat .bot {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-gap: 0.5rem;
  margin-top: 0.5rem;
}
.allProductSingle2 .addFloat .bot .addCarts {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-gap: 0.5rem;
}
.allProductSingle2 .addFloat .bot .addCarts .addCart {
  display: grid;
  align-items: center;
  padding: 0.3rem;
  opacity: 0.7;
  font-size: 0.8rem;
  font-weight: 700;
  border-radius: 5px;
  background: var(--green-color);
  color: white;
  text-align: center;
  transition: all 0.3s ease-in-out;
  cursor: pointer;
}
.allProductSingle2 .addFloat .bot .addCarts .addCart:hover {
  opacity: 1;
}
.allProductSingle2 .addFloat .bot .addCarts .counts {
  display: flex;
  align-items: center;
  border: 2px solid #eee;
  border-radius: 5px;
  height: 100%;
}
.allProductSingle2 .addFloat .bot .addCarts .counts input {
  width: 2rem;
  padding: 0.3rem 0.2rem;
  background: transparent;
  text-align: center;
  font-size: 0.8rem;
  font-weight: 700;
  color: #000;
}
.allProductSingle2 .addFloat .bot .addCarts .counts i {
  display: grid;
  align-items: center;
  padding: 0.3rem;
  cursor: pointer;
}
.allProductSingle2 .addFloat .bot .addCarts .counts i svg {
  width: 0.7rem;
  height: 0.7rem;
  fill: #000;
}
.allProductSingle2 .addFloat .bot .empty, .allProductSingle2 .addFloat .bot .contact {
  padding: 0.6rem;
  font-size: 1rem;
  font-weight: 700;
  border-radius: 5px;
  background: grey;
  color: white;
  text-align: center;
  transition: all 0.3s ease-in-out;
  cursor: pointer;
  opacity: 1;
}
.allProductSingle2 .addFloat .bot .contact {
  background: var(--green-color);
  font-size: 0.8rem;
}
.allProductSingle2 .addFloat .bot .cartS {
  border: 1px solid var(--green-color);
  border-radius: 5px;
  position: relative;
}
.allProductSingle2 .addFloat .bot .cartS i {
  display: grid;
  align-items: center;
  justify-content: center;
  width: 2rem;
}
.allProductSingle2 .addFloat .bot .cartS i svg {
  width: 1rem;
  height: 1rem;
  fill: var(--green-color);
}
.allProductSingle2 .addFloat .bot .cartS .showCartCount {
  position: absolute;
  top: -6px;
  left: -6px;
  background: var(--green-color);
  width: 17px;
  height: 17px;
  color: white;
  font-size: 0.7rem;
  line-height: 17px;
  border-radius: 50%;
  display: grid;
  justify-content: center;
  align-items: center;
}
.allProductSingle2 .sellers {
  margin-top: 2rem;
}
.allProductSingle2 .sellers .title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 1rem;
  font-weight: 700;
  color: #000;
  padding: 1rem;
  background: white;
  border: 1px solid #eee;
  border-radius: 15px;
}
.allProductSingle2 .sellers .title i {
  display: grid;
  align-items: center;
}
.allProductSingle2 .sellers .title i svg {
  width: 1.3rem;
  height: 1.3rem;
  fill: #000;
}
.allProductSingle2 .sellers .items {
  background: white;
  border: 1px solid #eee;
  border-radius: 15px;
  margin-top: 0.5rem;
}
.allProductSingle2 .sellers .items .item {
  padding: 1rem;
  border-bottom: 1px solid #eee;
}
.allProductSingle2 .sellers .items .item .postTop {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
}
.allProductSingle2 .sellers .items .item .postTop .postTitle {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-gap: 1rem;
  align-items: center;
}
.allProductSingle2 .sellers .items .item .postTop .postTitle .image img {
  height: 2.5rem;
  object-fit: contain;
  width: 2.5rem;
  border-radius: 100%;
}
.allProductSingle2 .sellers .items .item .postTop .postTitle ul {
  display: flex;
  justify-content: right;
  flex-wrap: wrap;
  align-items: center;
  gap: 2rem;
}
.allProductSingle2 .sellers .items .item .postTop .postTitle ul li {
  display: flex;
  justify-content: right;
  align-items: center;
  grid-gap: 0.5rem;
}
.allProductSingle2 .sellers .items .item .postTop .postTitle ul li span, .allProductSingle2 .sellers .items .item .postTop .postTitle ul li label, .allProductSingle2 .sellers .items .item .postTop .postTitle ul li a {
  font-size: 0.9rem;
  font-weight: 300;
  color: #000;
  opacity: 0.7;
}
.allProductSingle2 .sellers .items .item .postTop .postTitle ul li span:last-child, .allProductSingle2 .sellers .items .item .postTop .postTitle ul li label:last-child, .allProductSingle2 .sellers .items .item .postTop .postTitle ul li a:last-child {
  font-size: 1rem;
  font-weight: 500;
  opacity: 1;
}
.allProductSingle2 .sellers .items .item .postTop .postTitle ul li select {
  background: var(--back1-color);
  border: 1px solid #eee;
  padding: 0.3rem 0.5rem;
  color: #000;
  border-radius: 0.3rem;
  font-size: 0.8rem;
  width: 100%;
  height: 2rem;
  min-width: 8rem;
  transition: all 0.3s ease-in-out;
}
.allProductSingle2 .sellers .items .item .postTop .postTitle ul li select:focus {
  box-shadow: 0 3px 8px 0 rgba(0, 0, 0, 0.1);
  border: 1px solid #19bfd3;
}
.allProductSingle2 .sellers .items .item .postTop .postOptions {
  display: grid;
  justify-content: left;
  align-items: center;
}
.allProductSingle2 .sellers .items .item .postTop .postOptions .addCart {
  padding: 0.5rem 2rem;
  border: 1px solid var(--green-color);
  border-radius: 10px;
  cursor: pointer;
  font-size: 1rem;
  font-weight: 500;
  color: var(--green-color);
  transition: all 0.3s ease-in;
}
.allProductSingle2 .sellers .items .item .postTop .postOptions .addCart:hover {
  background: var(--green-color);
  color: white;
}
.allProductSingle2 .sellers .items .item .postBot {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  grid-gap: 0.5rem;
  margin-top: 0.5rem;
  background: var(--back2-color);
  border-radius: 5px;
  padding: 1rem;
}
.allProductSingle2 .sellers .items .item .postBot ul {
  display: grid;
  grid-template-columns: auto auto auto auto auto;
  justify-content: right;
  grid-gap: 2rem;
  align-items: center;
}
.allProductSingle2 .sellers .items .item .postBot ul li {
  display: grid;
  grid-template-columns: auto auto;
  justify-content: right;
  align-items: center;
  grid-gap: 0.5rem;
}
.allProductSingle2 .sellers .items .item .postBot ul li span {
  font-size: 0.85rem;
  font-weight: 300;
  color: #000;
  opacity: 0.6;
}
.allProductSingle2 .sellers .items .item .postBot ul li span:last-child {
  color: #444;
  font-weight: 700;
  opacity: 1;
}
.allProductSingle2 .sellers .items .item:last-child {
  border-bottom: 0;
}
.allProductSingle2 .containerD {
  margin-top: 2rem;
  display: grid;
  grid-template-columns: 1fr 25rem;
  grid-gap: 1rem;
}
.allProductSingle2 .containerD .right .tabs {
  display: flex;
  flex-wrap: wrap;
  justify-content: right;
  align-items: center;
  gap: 1rem;
  margin-bottom: 0.5rem;
  background: white;
  border-radius: 15px;
  padding: 1rem;
  border: 1px solid #eee;
}
.allProductSingle2 .containerD .right .tabs .tab {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 1rem;
  font-weight: 700;
  background: #f5f5f5;
  border: 1px solid #f5f5f5;
  color: #444;
  cursor: pointer;
  padding: 0.5rem 1rem;
  border-radius: 10px;
}
.allProductSingle2 .containerD .right .tabs .tab i {
  display: grid;
  align-items: center;
}
.allProductSingle2 .containerD .right .tabs .tab i svg {
  width: 1.2rem;
  height: 1.2rem;
  fill: #000;
}
.allProductSingle2 .containerD .right .tabs .tab span {
  background: var(--green-color);
  width: 1.5rem;
  height: 1.5rem;
  display: grid;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
  font-weight: 500;
  color: white;
  border-radius: 5px;
}
.allProductSingle2 .containerD .right .tabs .active {
  color: var(--green-color);
  border: 1px solid var(--green-color);
  background: transparent;
}
.allProductSingle2 .containerD .right .tabs .active i svg {
  fill: var(--green-color);
}
.allProductSingle2 .containerD .right .data1 {
  background: white;
  border-radius: 15px;
  border: 1px solid #eee;
}
.allProductSingle2 .containerD .right .data1 .des {
  padding: 1rem;
}
.allProductSingle2 .containerD .right .data1 .des .title1 {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 1.1rem;
  font-weight: 900;
  color: #444;
}
.allProductSingle2 .containerD .right .data1 .des .title1:before {
  content: "";
  width: 17px;
  height: 6px;
  background: var(--green-color);
  border-radius: 5rem;
}
.allProductSingle2 .containerD .right .data1 .des .body p {
  opacity: 0.7;
  font-size: 1rem;
  font-weight: 400;
  color: #000;
  margin-top: 1rem;
  line-height: 2rem;
}
.allProductSingle2 .containerD .right .data1 .des .body .image {
  display: grid;
  justify-content: center;
  margin: 1rem 0;
}
.allProductSingle2 .containerD .right .data1 .des .body img {
  object-fit: cover !important;
  height: 600px !important;
  width: 100% !important;
  margin: 20px 0 !important;
}
.allProductSingle2 .containerD .right .data1 .des .body ul, .allProductSingle2 .containerD .right .data1 .des .body ol {
  margin: 2rem;
}
.allProductSingle2 .containerD .right .data1 .des .body ul li, .allProductSingle2 .containerD .right .data1 .des .body ol li {
  list-style: decimal;
  margin-bottom: 0.5rem;
  font-size: 0.9rem;
}
.allProductSingle2 .containerD .right .data1 .des .body ul ul, .allProductSingle2 .containerD .right .data1 .des .body ol ul {
  margin: 0;
  margin-top: 1rem;
  margin-right: 1rem;
}
.allProductSingle2 .containerD .right .data1 .des .body ul li {
  list-style: disc;
}
.allProductSingle2 .containerD .right .data1 .des .body table {
  margin: 1rem 0;
  border: 1px solid #eee;
  width: 100%;
}
.allProductSingle2 .containerD .right .data1 .des .body table thead tr {
  background: #eee;
}
.allProductSingle2 .containerD .right .data1 .des .body table tr {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(1px, 1fr));
  align-items: center;
  grid-gap: 1rem;
  padding: 1rem;
}
.allProductSingle2 .containerD .right .data1 .des .body table tr th {
  font-weight: 700;
  color: #000;
  font-size: 0.85rem;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  display: grid;
  align-items: center;
  justify-content: center;
}
.allProductSingle2 .containerD .right .data1 .des .body table tr td {
  font-weight: 300;
  font-size: 0.85rem;
  text-align: center;
  color: #000;
}
.allProductSingle2 .containerD .right .data1 .des .body table tr td p {
  font-weight: 300;
  font-size: 0.85rem;
  text-align: center;
  color: #000;
  margin-bottom: 0;
  line-height: unset;
}
.allProductSingle2 .containerD .right .data1 .des .body table tr td img {
  width: 2.5rem;
  height: 2.5rem;
  object-fit: cover;
  border-radius: 5rem;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
.allProductSingle2 .containerD .right .data1 .des .body table tr td a {
  display: grid;
  align-items: center;
}
.allProductSingle2 .containerD .right .data1 .des .body table tr td a svg {
  margin-left: 0.5rem;
}
.allProductSingle2 .containerD .right .data1 .des .body table tr:nth-child(even) {
  background: #eee;
}
.allProductSingle2 .containerD .right .data1 .des .body h2, .allProductSingle2 .containerD .right .data1 .des .body h3, .allProductSingle2 .containerD .right .data1 .des .body h4 {
  margin-bottom: 1rem;
}
.allProductSingle2 .containerD .right .data1 .des .body h2 {
  font-size: 1.5rem;
}
.allProductSingle2 .containerD .right .data1 .des .body h3 {
  font-size: 1.3rem;
}
.allProductSingle2 .containerD .right .data1 .des .body h4 {
  font-size: 1.2rem;
}
.allProductSingle2 .containerD .right .data1 .ability1 {
  padding: 1rem;
  display: none;
}
.allProductSingle2 .containerD .right .data1 .ability1 .title1 {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 1.1rem;
  font-weight: 900;
  color: #444;
}
.allProductSingle2 .containerD .right .data1 .ability1 .title1:before {
  content: "";
  width: 17px;
  height: 6px;
  background: var(--green-color);
  border-radius: 5rem;
}
.allProductSingle2 .containerD .right .data1 .ability1 .items .item {
  margin-top: 1rem;
  display: grid;
  grid-template-columns: 1fr 3fr;
  grid-gap: 0.5rem;
}
.allProductSingle2 .containerD .right .data1 .ability1 .items .item .name1 {
  font-size: 0.9rem;
  font-weight: 700;
  color: #444;
  padding: 0.8rem;
  background: #f9f9f9;
  border-radius: 10px;
}
.allProductSingle2 .containerD .right .data1 .ability1 .items .item .body1 {
  font-size: 0.9rem;
  font-weight: 700;
  color: #444;
  padding: 0.8rem;
  background: #f5f5f5;
  border-radius: 10px;
}
.allProductSingle2 .containerD .right .data1 .comments1 {
  display: none;
}
.allProductSingle2 .containerD .right .data1 .comments1 .topC1 {
  padding: 1rem;
}
.allProductSingle2 .containerD .right .data1 .comments1 .topC1 .title2 {
  font-size: 1.1rem;
  font-weight: 900;
  color: #000;
  margin-bottom: 0.5rem;
}
.allProductSingle2 .containerD .right .data1 .comments1 .topC1 .para1 {
  font-size: 0.9rem;
  font-weight: 300;
  color: #444;
}
.allProductSingle2 .containerD .right .data1 .lottery1 {
  display: none;
  padding: 1rem;
}
.allProductSingle2 .containerD .right .data1 .lottery1 .title {
  font-size: 1rem;
  font-weight: 900;
  color: #000;
  margin-bottom: 1rem;
}
.allProductSingle2 .containerD .right .data1 .lottery1 table {
  width: 100%;
  border-collapse: collapse;
}
.allProductSingle2 .containerD .right .data1 .lottery1 table tr {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  align-items: center;
  grid-gap: 0.5rem;
  padding: 1rem;
  border-radius: 10px;
  border-bottom: 1px solid #eee;
}
.allProductSingle2 .containerD .right .data1 .lottery1 table tr th {
  font-weight: 700;
  color: #000;
  font-size: 0.9rem;
  text-align: right;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
.allProductSingle2 .containerD .right .data1 .lottery1 table tr td {
  font-weight: 700;
  font-size: 0.9rem;
  text-align: right;
  color: #000;
}
.allProductSingle2 .containerD .right .data1 .lottery1 table tr:last-child {
  border-bottom: 0;
}
.allProductSingle2 .containerD .right .data1 .lottery1 table tr:first-child {
  background: #F6F8FB;
}
.allProductSingle2 .containerD .boxP {
  background: white;
  border-radius: 15px;
  padding: 1rem;
  border: 1px solid #eee;
  position: sticky;
  top: 1rem;
}
.allProductSingle2 .containerD .boxP .title1 {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-gap: 0.5rem;
}
.allProductSingle2 .containerD .boxP .title1 .pic {
  border-radius: 10px;
  overflow: hidden;
}
.allProductSingle2 .containerD .boxP .title1 .pic img {
  width: 5rem;
  height: 5rem;
  object-fit: contain;
}
.allProductSingle2 .containerD .boxP .title1 .name {
  font-size: 1rem;
  font-weight: 700;
  color: #000;
}
.allProductSingle2 .containerD .boxP .user {
  padding: 1rem 0;
  margin-top: 1rem;
  border-top: 2px solid #eee;
  border-bottom: 2px solid #eee;
}
.allProductSingle2 .containerD .boxP .user .name {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.9rem;
  font-weight: 700;
  color: #000;
}
.allProductSingle2 .containerD .boxP .user .name i {
  display: grid;
  align-items: center;
}
.allProductSingle2 .containerD .boxP .user .name i svg {
  width: 1.1rem;
  height: 1.1rem;
  fill: #000;
}
.allProductSingle2 .containerD .boxP .user .option {
  margin-top: 1rem;
  padding: 0.7rem;
  border-radius: 10px;
  background: #f7f7f7;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
}
.allProductSingle2 .containerD .boxP .user .option .name {
  color: #444;
  font-size: 0.9rem;
  font-weight: 700;
}
.allProductSingle2 .containerD .boxP .user .option i {
  display: grid;
  align-items: center;
}
.allProductSingle2 .containerD .boxP .user .option i svg {
  width: 1rem;
  height: 1rem;
  fill: #444;
}
.allProductSingle2 .containerD .boxP .user .option i:last-child svg {
  width: 1.3rem;
  height: 1.3rem;
}
.allProductSingle2 .containerD .boxP .prices {
  display: flex;
  justify-content: left;
  gap: 1rem;
  align-items: center;
  margin-top: 1rem;
}
.allProductSingle2 .containerD .boxP .prices .off {
  border: 1px solid red;
  border-radius: 10px;
  padding: 0.5rem;
  font-size: 0.8rem;
  font-weight: 700;
  color: red;
}
.allProductSingle2 .containerD .boxP .prices .price {
  display: grid;
  grid-template-columns: 1fr;
  grid-gap: 5px;
  text-align: left;
}
.allProductSingle2 .containerD .boxP .prices .price s {
  font-size: 0.85rem;
  font-weight: 300;
  color: #444;
}
.allProductSingle2 .containerD .boxP .prices .price bdi {
  font-size: 0.8rem;
  font-weight: 900;
  color: #000;
  line-height: 0.7rem;
}
.allProductSingle2 .containerD .boxP .prices .price bdi span {
  font-size: 1.2rem;
  margin-left: 5px;
  line-height: 0.7rem;
}
.allProductSingle2 .containerD .boxP .add {
  margin-top: 1rem;
}
.allProductSingle2 .containerD .boxP .add .addCarts {
  display: grid;
  grid-template-columns: 1fr;
}
.allProductSingle2 .containerD .boxP .add .addCarts .addCart {
  padding: 0.6rem;
  opacity: 0.7;
  font-size: 1rem;
  font-weight: 700;
  border-radius: 10px;
  background: var(--green-color);
  color: white;
  text-align: center;
  transition: all 0.3s ease-in-out;
  cursor: pointer;
}
.allProductSingle2 .containerD .boxP .add .addCarts .addCart:hover {
  opacity: 1;
}
.allProductSingle2 .related {
  margin-top: 2rem;
}
.allProductSingle2 .related .title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: white;
  border-radius: 15px;
  padding: 1rem;
  border: 1px solid #eee;
  font-size: 1.1rem;
  font-weight: 700;
  color: #000;
}
.allProductSingle2 .related .title:before {
  content: "";
  display: grid;
  width: 17px;
  height: 6px;
  background: var(--green-color);
  border-radius: 5rem;
}
.allProductSingle2 .related .slider-related {
  margin-top: 0.5rem;
}
.allProductSingle2 .related .slider-related .item {
  display: grid;
  background: white;
  border: 1px solid #eee;
  padding: 1rem;
  border-radius: 15px;
}
.allProductSingle2 .related .slider-related .item .pic img {
  height: 10rem;
  object-fit: contain;
}
.allProductSingle2 .related .slider-related .item .titleEn {
  font-size: 0.8rem;
  font-weight: 500;
  color: #444;
  opacity: 0.7;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  margin-top: 0.5rem;
}
.allProductSingle2 .related .slider-related .item .title1 {
  font-size: 0.9rem;
  font-weight: 500;
  color: #000;
  height: 3rem;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  text-overflow: ellipsis;
}
.allProductSingle2 .related .slider-related .item .rate1 {
  display: flex;
  align-items: center;
  justify-content: left;
  gap: 0.5rem;
  font-size: 0.7rem;
  font-weight: 900;
  color: var(--green-color);
}
.allProductSingle2 .related .slider-related .item .rate1 i {
  display: grid;
  align-items: center;
}
.allProductSingle2 .related .slider-related .item .rate1 i svg {
  width: 0.7rem;
  height: 0.7rem;
  fill: var(--green-color);
}
.allProductSingle2 .related .slider-related .item .prices {
  display: flex;
  justify-content: left;
  gap: 1rem;
  align-items: center;
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 2px solid #eee;
}
.allProductSingle2 .related .slider-related .item .prices .off {
  border: 1px solid red;
  border-radius: 10px;
  padding: 0.5rem;
  font-size: 0.8rem;
  font-weight: 700;
  color: red;
}
.allProductSingle2 .related .slider-related .item .prices .price {
  display: grid;
  grid-template-columns: 1fr;
  grid-gap: 5px;
  text-align: left;
}
.allProductSingle2 .related .slider-related .item .prices .price s {
  font-size: 0.8rem;
  font-weight: 300;
  color: #444;
}
.allProductSingle2 .related .slider-related .item .prices .price .val {
  font-size: 0.8rem;
  font-weight: 900;
  color: #000;
  line-height: 0.7rem;
}
.allProductSingle2 .related .slider-related .item .prices .price .val span {
  font-size: 1rem;
  margin-left: 5px;
  line-height: 0.7rem;
}
.allProductSingle2 .sellerInfo {
  background: rgba(0, 0, 0, 0.5);
  z-index: 4000;
  position: fixed;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-columns: 1fr;
  justify-content: center;
  backdrop-filter: blur(10px);
}
.allProductSingle2 .sellerInfo .data {
  width: 30%;
  margin: auto;
  background: white;
  display: grid;
  grid-template-columns: 1fr;
  border-radius: 20px;
  overflow: hidden;
}
.allProductSingle2 .sellerInfo .data .title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem;
  border-bottom: 2px solid #eee;
}
.allProductSingle2 .sellerInfo .data .title .name {
  font-size: 1.5rem;
  font-weight: 900;
  color: #444;
}
.allProductSingle2 .sellerInfo .data .title .location {
  display: flex;
  justify-content: left;
  align-items: center;
  gap: 0.3rem;
  font-size: 1rem;
  font-weight: 500;
  color: var(--green-color);
}
.allProductSingle2 .sellerInfo .data .title .location i {
  display: grid;
  align-items: center;
}
.allProductSingle2 .sellerInfo .data .title .location i svg {
  width: 1.2rem;
  height: 1.2rem;
  fill: var(--green-color);
}
.allProductSingle2 .sellerInfo .data .profile {
  margin: 1rem 0;
  padding: 0 1rem;
}
.allProductSingle2 .sellerInfo .data .profile .pic {
  display: grid;
  justify-content: center;
}
.allProductSingle2 .sellerInfo .data .profile .pic img {
  width: auto;
  height: 5rem;
  object-fit: cover;
}
.allProductSingle2 .sellerInfo .data .profile .name {
  font-size: 1.3rem;
  font-weight: 900;
  color: black;
  text-align: center;
  margin-top: 0.5rem;
}
.allProductSingle2 .sellerInfo .data .profile p {
  font-size: 0.9rem;
  font-weight: 300;
  text-align: center;
  margin-top: 0.5rem;
  line-height: 2rem;
  color: #444;
  white-space: pre-line;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  box-orient: vertical;
  -webkit-box-orient: vertical;
  line-clamp: 2;
  -webkit-line-clamp: 2;
  overflow: hidden;
  text-overflow: ellipsis;
}
.allProductSingle2 .sellerInfo .data .options {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 1rem;
  padding: 0 1rem;
}
.allProductSingle2 .sellerInfo .data .options .option {
  background: #f5f5f5;
  padding: 0.5rem 1rem;
  text-align: center;
  border-radius: 10px;
}
.allProductSingle2 .sellerInfo .data .options .option .body2 {
  font-size: 1.2rem;
  font-weight: 700;
  color: black;
}
.allProductSingle2 .sellerInfo .data .options .option .title2 {
  font-size: 1rem;
  font-weight: 500;
  color: #444;
  opacity: 0.7;
}
.allProductSingle2 .sellerInfo .data label {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  grid-gap: 0.5rem;
  margin: 1rem;
}
.allProductSingle2 .sellerInfo .data label input {
  border: 1px solid #ddd;
  font-size: 1rem;
  padding: 0.7rem 1rem;
  border-radius: 5rem;
  font-weight: 700;
  opacity: 0.7;
}
.allProductSingle2 .sellerInfo .data label i {
  display: grid;
  align-items: center;
  justify-content: center;
  transform: rotate(-135deg);
  border: 1px solid var(--green-color);
  border-radius: 50%;
  width: 3rem;
  height: 3rem;
}
.allProductSingle2 .sellerInfo .data label i svg {
  width: 1.2rem;
  height: 1.2rem;
  fill: var(--green-color);
}
.allProductSingle2 .sellerInfo .data .time {
  font-size: 1rem;
  font-weight: 300;
  color: #444;
  text-align: center;
  margin-right: 1rem;
}
.allProductSingle2 .sellerInfo .data .time span {
  color: red;
  font-weight: 700;
}
.allProductSingle2 .sellerInfo .data .time .active {
  color: green;
}
.allProductSingle2 .sellerInfo .data .buttons {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 1rem;
  padding: 1rem;
}
.allProductSingle2 .sellerInfo .data .buttons a {
  padding: 0.5rem 1rem;
  border-radius: 5px;
  font-size: 1rem;
  text-align: center;
  background: white;
  font-weight: 700;
  color: var(--green-color);
  border: 2px solid var(--green-color);
}
.allProductSingle2 .sellerInfo .data .buttons a:last-child {
  color: white;
  border: 2px solid var(--green-color);
  background: var(--green-color);
}
.allProductSingle2 .allTicket {
  background: rgba(0, 0, 0, 0.5);
  z-index: 4000;
  position: fixed;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-columns: 1fr;
  justify-content: center;
  backdrop-filter: blur(10px);
}
.allProductSingle2 .allTicket .chatContent {
  width: 40%;
  margin: auto;
  background: white;
  display: grid;
  grid-template-columns: 1fr;
  border-radius: 20px;
  overflow: hidden;
}
.allProductSingle2 .allTicket .chatContent .header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem;
  background: white;
}
.allProductSingle2 .allTicket .chatContent .header .profile {
  display: flex;
  justify-content: right;
  gap: 0.5rem;
  align-items: center;
}
.allProductSingle2 .allTicket .chatContent .header .profile .pic {
  overflow: hidden;
  border-radius: 50%;
}
.allProductSingle2 .allTicket .chatContent .header .profile .pic img {
  width: 3rem;
  height: 3rem;
  object-fit: cover;
}
.allProductSingle2 .allTicket .chatContent .header .profile .name {
  font-size: 1.2rem;
  font-weight: 300;
  color: black;
}
.allProductSingle2 .allTicket .chatContent .header .leftHeader {
  display: flex;
  justify-content: left;
  gap: 0.5rem;
}
.allProductSingle2 .allTicket .chatContent .header i {
  display: grid;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.allProductSingle2 .allTicket .chatContent .header i svg {
  width: 1.3rem;
  height: 1.3rem;
  fill: #444;
}
.allProductSingle2 .allTicket .chatContent .body {
  padding: 0.5rem;
  overflow-y: scroll;
  height: 30rem;
}
.allProductSingle2 .allTicket .chatContent .body p {
  display: none;
  font-size: 0.8rem;
  font-weight: 300;
  color: #000;
  opacity: 0.7;
}
.allProductSingle2 .allTicket .chatContent .body p .closeChats {
  padding: 0.2rem 0.4rem;
  background: red;
  color: white;
  border-radius: 5px;
  font-size: 0.7rem;
  cursor: pointer;
}
.allProductSingle2 .allTicket .chatContent .body .choice {
  display: grid;
  padding: 0.8rem;
  border: 1px solid #bbb;
  font-size: 0.9rem;
  font-weight: 300;
  color: #000;
  margin-top: 0.5rem;
  border-radius: 5px;
  cursor: pointer;
  transition: all 0.3s ease-in-out;
}
.allProductSingle2 .allTicket .chatContent .body .choice:hover {
  color: var(--green-color);
  border: 1px solid var(--green-color);
}
.allProductSingle2 .allTicket .chatContent .body .login {
  display: grid;
}
.allProductSingle2 .allTicket .chatContent .body .bodyLabel {
  display: grid;
  grid-template-columns: 1fr;
  grid-gap: 0.5rem;
  font-size: 0.9rem;
  font-weight: 300;
  color: #000;
  margin-top: 1rem;
}
.allProductSingle2 .allTicket .chatContent .body .bodyLabel input, .allProductSingle2 .allTicket .chatContent .body .bodyLabel select, .allProductSingle2 .allTicket .chatContent .body .bodyLabel textarea {
  background: var(--back1-color);
  border: 1px solid #eee;
  padding: 0.3rem 0.5rem;
  color: #000;
  border-radius: 5px;
  font-size: 0.9rem;
  font-weight: 300;
  width: 100%;
  transition: all 0.3s ease-in-out;
}
.allProductSingle2 .allTicket .chatContent .body .message11 {
  margin-top: 1rem;
  font-size: 0.9rem;
  font-weight: 300;
  color: #444;
}
.allProductSingle2 .allTicket .chatContent .body .message11 .time {
  font-size: 0.7rem;
}
.allProductSingle2 .allTicket .chatContent .body .message11 .messages {
  padding: 0.5rem;
  border-radius: 10px;
  border: 2px solid #bbb;
}
.allProductSingle2 .allTicket .chatContent .body .messages {
  background: white;
}
.allProductSingle2 .allTicket .chatContent .body .opp {
  display: grid;
  justify-content: left;
  text-align: left;
}
.allProductSingle2 .allTicket .chatContent .body .me {
  display: grid;
  justify-content: right;
  text-align: right;
}
.allProductSingle2 .allTicket .chatContent .body .me .messages {
  border: 2px solid var(--green-color);
}
.allProductSingle2 .allTicket .chatContent .body .submit {
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--green-color);
  text-align: center;
  background: transparent;
  width: 100%;
  border: 1px solid var(--green-color);
  padding: 0.5rem 1rem;
  border-radius: 5px;
  margin-top: 1rem;
  transition: all 0.3s ease-in-out;
}
.allProductSingle2 .allTicket .chatContent .body .submit:hover {
  background: var(--green-color);
  color: white;
}
.allProductSingle2 .allTicket .chatContent .body .sendImage {
  background: white;
  border-radius: 10px;
  overflow: hidden;
  display: grid;
  grid-template-columns: 1fr;
  justify-content: center;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
  margin-top: 1rem;
}
.allProductSingle2 .allTicket .chatContent .body .sendImage .dropify-wrapper {
  height: 100px;
  border: 1px solid #eee !important;
}
.allProductSingle2 .allTicket .chatContent .body .sendImage .dropify-wrapper .file-icon:before {
  opacity: 0 !important;
  position: absolute !important;
  top: 0 !important;
  visibility: hidden !important;
}
.allProductSingle2 .allTicket .chatContent .body .sendImage .dropify-wrapper .dropify-message {
  position: relative !important;
  top: auto !important;
  margin-top: 2rem;
}
.allProductSingle2 .allTicket .chatContent .body .sendImage .dropify-wrapper .dropify-message p {
  margin: 0;
  font-size: 1rem;
  color: rgba(0, 128, 0, 0.5098039216);
}
.allProductSingle2 .allTicket .chatContent .send {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-gap: 1rem;
  padding: 0.5rem;
}
.allProductSingle2 .allTicket .chatContent .send input {
  background: white;
  border: 1px solid #eee;
  padding: 0.5rem 1rem;
  color: #000;
  border-radius: 5rem;
  font-size: 1rem;
  font-weight: 300;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
  width: 100%;
  transition: all 0.3s ease-in-out;
}
.allProductSingle2 .allTicket .chatContent .send button {
  font-size: 0.9rem;
  font-weight: 300;
  color: white;
  border-radius: 5rem;
  background: var(--green-color);
  padding: 0 1rem;
}
.allProductSingle2 .allTicket .chatContent .loginChat {
  background: red;
  border-top: 1px solid #eee;
  padding: 0.5rem;
  text-align: center;
  font-size: 0.8rem;
  font-weight: 300;
  color: white;
  display: grid;
  width: 100%;
}
.allProductSingle2 .allTicket .chatContent .typeLogin1 {
  margin-top: 1rem;
  border-radius: 5px;
}
.allProductSingle2 .allChangeList {
  background: rgba(0, 0, 0, 0.5);
  z-index: 4000;
  position: fixed;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-columns: 1fr;
  justify-content: center;
  backdrop-filter: blur(10px);
}
.allProductSingle2 .allChangeList .changeList {
  width: 40%;
  margin: auto;
  background: white;
  display: grid;
  grid-template-columns: 1fr;
  border-radius: 20px;
  overflow: hidden;
  padding: 2rem;
}
.allProductSingle2 .allChangeList .changeList .title2 {
  text-align: center;
  font-size: 1.2rem;
  font-weight: 700;
  color: black;
  margin-bottom: 1rem;
}
.allProductSingle2 .allBenefit {
  background: rgba(0, 0, 0, 0.5);
  z-index: 4000;
  position: fixed;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-columns: 1fr;
  justify-content: center;
  backdrop-filter: blur(10px);
}
.allProductSingle2 .allBenefit .showB {
  width: 30%;
  margin: auto;
  background: white;
  display: grid;
  grid-template-columns: 1fr;
  border-radius: 20px;
  overflow: hidden;
}
.allProductSingle2 .allBenefit .showB .title2 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  text-align: center;
  font-size: 1.2rem;
  font-weight: 700;
  color: black;
  padding: 1rem;
  border-bottom: 2px solid rgb(238, 238, 241);
}
.allProductSingle2 .allBenefit .showB .title2 i {
  display: grid;
  align-items: center;
}
.allProductSingle2 .allBenefit .showB .title2 i svg {
  width: 1.5rem;
  height: 1.5rem;
  fill: #000;
}
.allProductSingle2 .allBenefit .showB .items {
  padding: 1rem;
  padding-top: 0;
}
.allProductSingle2 .allBenefit .showB .items .item {
  margin-top: 1rem;
  padding: 0.5rem;
  border-radius: 10px;
  border: 1px solid rgb(238, 238, 241);
  cursor: pointer;
  display: grid;
}
.allProductSingle2 .allBenefit .showB .items .item .name {
  font-size: 0.9rem;
  font-weight: 700;
  color: #444;
  margin-bottom: 0.5rem;
}
.allProductSingle2 .allBenefit .showB .items .item .body {
  font-size: 0.8rem;
  font-weight: 300;
  color: #000;
  opacity: 0.5;
}
.allProductSingle2 .allBulk {
  background: rgba(0, 0, 0, 0.5);
  z-index: 4000;
  position: fixed;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-columns: 1fr;
  justify-content: center;
  backdrop-filter: blur(10px);
}
.allProductSingle2 .allBulk .showB {
  width: 30%;
  margin: auto;
  background: white;
  display: grid;
  grid-template-columns: 1fr;
  border-radius: 20px;
  overflow: hidden;
}
.allProductSingle2 .allBulk .showB .title2 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  text-align: center;
  font-size: 1.2rem;
  font-weight: 700;
  color: black;
  padding: 1rem;
  border-bottom: 2px solid rgb(238, 238, 241);
}
.allProductSingle2 .allBulk .showB .title2 i {
  display: grid;
  align-items: center;
  cursor: pointer;
}
.allProductSingle2 .allBulk .showB .title2 i svg {
  width: 1.5rem;
  height: 1.5rem;
  fill: #000;
}
.allProductSingle2 .allBulk .showB table {
  border-radius: 20px;
  width: 100%;
  border-collapse: collapse;
}
.allProductSingle2 .allBulk .showB table tr {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  align-items: center;
  grid-gap: 0.5rem;
  padding: 0.5rem 1rem;
  border-bottom: 1px solid #eee;
}
.allProductSingle2 .allBulk .showB table tr th {
  font-weight: 700;
  color: #000;
  font-size: 0.9rem;
  text-align: right;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
.allProductSingle2 .allBulk .showB table tr td {
  font-weight: 700;
  font-size: 0.9rem;
  text-align: right;
  color: #000;
}
.allProductSingle2 .allBulk .showB table tr:first-child {
  background: #F6F8FB;
}
.allProductSingle2 .allGuide {
  background: rgba(0, 0, 0, 0.5);
  z-index: 4000;
  position: fixed;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-columns: 1fr;
  justify-content: center;
  backdrop-filter: blur(10px);
}
.allProductSingle2 .allGuide .showB {
  width: 60%;
  margin: auto;
  background: white;
  display: grid;
  grid-template-columns: 1fr;
  border-radius: 20px;
  overflow: hidden;
}
.allProductSingle2 .allGuide .showB .title2 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  text-align: center;
  font-size: 1.2rem;
  font-weight: 700;
  color: black;
  padding: 1rem;
  border-bottom: 2px solid rgb(238, 238, 241);
}
.allProductSingle2 .allGuide .showB .title2 i {
  display: grid;
  align-items: center;
  cursor: pointer;
}
.allProductSingle2 .allGuide .showB .title2 i svg {
  width: 1.5rem;
  height: 1.5rem;
  fill: #000;
}
.allProductSingle2 .allGuide .showB table {
  border-radius: 20px;
  width: 100%;
  border-collapse: collapse;
}
.allProductSingle2 .allGuide .showB table tr {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  align-items: center;
  grid-gap: 0.5rem;
  padding: 0.5rem 1rem;
  border-bottom: 1px solid #eee;
}
.allProductSingle2 .allGuide .showB table tr th {
  font-weight: 700;
  color: #000;
  font-size: 0.9rem;
  text-align: right;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
.allProductSingle2 .allGuide .showB table tr td {
  font-weight: 700;
  font-size: 0.9rem;
  text-align: right;
  color: #000;
}
.allProductSingle2 .allGuide .showB table tr:first-child {
  background: #F6F8FB;
}
.allProductSingle2 .allGuide .showB .c4 tr {
  grid-template-columns: repeat(4, 1fr);
}
.allProductSingle2 #copy-btn {
  display: none;
}
@media screen and (max-width: 700px) {
  .allProductSingle2 {
    width: 100% !important;
    margin-top: 0;
  }
  .allProductSingle2 .address {
    overflow-x: scroll;
    padding-bottom: 0.5rem;
    margin-bottom: 0;
    margin-right: 0.3rem;
    border-radius: 0;
  }
  .allProductSingle2 .address i {
    display: none;
  }
  .allProductSingle2 .address a {
    overflow: unset;
    white-space: nowrap;
  }
  .allProductSingle2 .adminButtons {
    grid-template-columns: 1fr;
    padding: 0.5rem;
  }
  .allProductSingle2 .showEditBtn {
    bottom: 6rem;
    left: 0.5rem;
    font-size: 0.8rem;
  }
  .allProductSingle2 .containers {
    display: block;
  }
  .allProductSingle2 .containers .gallery .pics {
    border-radius: 0;
    padding: 0.5rem;
  }
  .allProductSingle2 .containers .gallery .pics .pic {
    display: none;
  }
  .allProductSingle2 .containers .gallery .pics .images {
    margin-top: 1rem;
  }
  .allProductSingle2 .containers .gallery .pics .images .slider-image {
    min-width: 0;
    display: grid;
  }
  .allProductSingle2 .containers .gallery .pics .images .slider-image .item {
    padding: 0;
    border: 0;
    border-radius: 0;
  }
  .allProductSingle2 .containers .gallery .pics .images .slider-image .item img {
    height: calc(100dvh - 5rem);
    object-fit: contain;
  }
  .allProductSingle2 .containers .gallery .pics .images .slider-image .active2 {
    border: 0;
  }
  .allProductSingle2 .containers .gallery .options {
    display: none;
  }
  .allProductSingle2 .containers .left .title2 {
    border-radius: 0;
    padding: 0.5rem;
    border: 0;
  }
  .allProductSingle2 .containers .left .title2 h1 {
    font-size: 1.1rem;
  }
  .allProductSingle2 .containers .left .title2 h2 {
    font-size: 0.8rem;
  }
  .allProductSingle2 .containers .left .details {
    display: block;
    margin-top: 0;
  }
  .allProductSingle2 .containers .left .details .boxes .comments {
    border-radius: 0;
    padding: 0.5rem;
    border: 0;
  }
  .allProductSingle2 .containers .left .details .boxes .comments .rate {
    display: flex;
    justify-content: space-between;
    gap: 0.5rem;
    width: 100%;
  }
  .allProductSingle2 .containers .left .details .boxes .comments .rate .name {
    font-size: 0.9rem;
    font-weight: 700;
    color: #444;
    opacity: 0.6;
    margin-bottom: 0;
  }
  .allProductSingle2 .containers .left .details .boxes .comments .rate .rate1 {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9rem;
    font-weight: 900;
    color: #000;
  }
  .allProductSingle2 .containers .left .details .boxes .comments .rate .rate1 i {
    display: grid;
    align-items: center;
  }
  .allProductSingle2 .containers .left .details .boxes .comments .rate .rate1 i svg {
    width: 1rem;
    height: 1rem;
    fill: #000;
  }
  .allProductSingle2 .containers .left .details .boxes .comments .all {
    display: none;
  }
  .allProductSingle2 .containers .left .details .boxes .choice {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    background: white;
    border-radius: 0;
    padding: 0.5rem;
    margin-top: 0;
    border: 0;
    border-top: 1px solid #eee;
  }
  .allProductSingle2 .containers .left .details .boxes .choice .lists .item {
    padding: 0.3rem 0.5rem;
    font-size: 0.8rem;
  }
  .allProductSingle2 .containers .left .details .boxes .ability {
    border-radius: 0;
    padding: 0.5rem;
    margin-top: 0;
    border: 0;
    border-top: 1px solid #eee;
  }
  .allProductSingle2 .containers .left .details .detail .boxB {
    padding: 0.5rem;
    border-radius: 0;
    margin-bottom: 1rem;
    border: 0;
    border-top: 1px solid #eee;
  }
  .allProductSingle2 .containers .left .details .detail .boxB i {
    display: grid;
    align-items: center;
  }
  .allProductSingle2 .containers .left .details .detail .boxB i svg {
    width: 1.4rem;
    height: 1.4rem;
    color: var(--green-color);
  }
  .allProductSingle2 .containers .left .details .detail .boxD {
    border-radius: 0;
    padding: 0.5rem;
    border: 0;
  }
  .allProductSingle2 .containers .left .details .detail .boxD .title1, .allProductSingle2 .containers .left .details .detail .boxD .carrier {
    display: none;
  }
  .allProductSingle2 .containers .left .details .detail .boxD .user {
    padding-bottom: 0;
    padding-top: 0.5rem;
    margin-top: 0.5rem;
    border-bottom: 0;
  }
  .allProductSingle2 .containers .left .details .detail .boxD .user .name {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9rem;
    font-weight: 700;
    color: #000;
  }
  .allProductSingle2 .containers .left .details .detail .boxD .user .name i {
    display: grid;
    align-items: center;
  }
  .allProductSingle2 .containers .left .details .detail .boxD .user .name i svg {
    width: 1.1rem;
    height: 1.1rem;
    fill: #000;
  }
  .allProductSingle2 .containers .left .details .detail .boxD .user .option {
    margin-top: 1rem;
    padding: 0.7rem;
    border-radius: 10px;
    background: #f7f7f7;
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
  }
  .allProductSingle2 .containers .left .details .detail .boxD .user .option .name {
    color: #444;
    font-size: 0.9rem;
    font-weight: 700;
  }
  .allProductSingle2 .containers .left .details .detail .boxD .user .option i {
    display: grid;
    align-items: center;
  }
  .allProductSingle2 .containers .left .details .detail .boxD .user .option i svg {
    width: 1rem;
    height: 1rem;
    fill: #444;
  }
  .allProductSingle2 .containers .left .details .detail .boxD .user .option i:last-child svg {
    width: 1.3rem;
    height: 1.3rem;
  }
  .allProductSingle2 .containers .left .details .detail .boxD .prices {
    display: none;
  }
  .allProductSingle2 .containers .left .details .detail .boxD .add {
    display: none;
  }
  .allProductSingle2 .containers .left .details .detail .options {
    margin-top: 0;
    padding: 0.5rem;
    background: white;
  }
  .allProductSingle2 .containers .left .details .detail .options .option {
    padding: 0.5rem;
    font-size: 0.8rem;
    border-radius: 10px;
  }
  .allProductSingle2 .containers .left .details .detail .options .option i svg {
    width: 0.9rem;
    height: 0.9rem;
  }
  .allProductSingle2 .sellers {
    margin-top: 1rem;
  }
  .allProductSingle2 .sellers .title {
    padding: 0.5rem;
    border: 0;
    font-size: 0.9rem;
    border-radius: 0;
  }
  .allProductSingle2 .sellers .title i {
    display: grid;
    align-items: center;
  }
  .allProductSingle2 .sellers .title i svg {
    width: 1.1rem;
    height: 1.1rem;
  }
  .allProductSingle2 .sellers .items {
    margin-top: 0;
    border-radius: 0;
  }
  .allProductSingle2 .sellers .items .item {
    padding: 0.5rem;
    border-bottom: 2px solid #eee;
  }
  .allProductSingle2 .sellers .items .item .postTop {
    grid-template-columns: 1fr;
  }
  .allProductSingle2 .sellers .items .item .postTop .postTitle {
    grid-gap: 0.5rem;
    margin-bottom: 0.5rem;
  }
  .allProductSingle2 .sellers .items .item .postTop .postTitle .image {
    display: grid;
    justify-content: center;
  }
  .allProductSingle2 .sellers .items .item .postTop .postTitle ul {
    gap: 1rem;
  }
  .allProductSingle2 .sellers .items .item .postTop .postTitle ul li {
    display: flex;
    justify-content: space-between;
  }
  .allProductSingle2 .sellers .items .item .postTop .postTitle ul li span, .allProductSingle2 .sellers .items .item .postTop .postTitle ul li label, .allProductSingle2 .sellers .items .item .postTop .postTitle ul li a {
    font-size: 0.8rem;
  }
  .allProductSingle2 .sellers .items .item .postTop .postTitle ul li span:last-child, .allProductSingle2 .sellers .items .item .postTop .postTitle ul li label:last-child, .allProductSingle2 .sellers .items .item .postTop .postTitle ul li a:last-child {
    font-size: 0.9rem;
  }
  .allProductSingle2 .sellers .items .item .postTop .postTitle ul li select {
    height: 2rem;
    min-width: 8rem;
  }
  .allProductSingle2 .sellers .items .item .postTop .postOptions {
    display: block;
  }
  .allProductSingle2 .sellers .items .item .postTop .postOptions .addCart {
    width: 100%;
    font-size: 0.8rem;
    text-align: center;
  }
  .allProductSingle2 .sellers .items .item .postBot {
    display: block;
    padding: 0.5rem;
  }
  .allProductSingle2 .sellers .items .item .postBot ul {
    display: flex;
    flex-wrap: wrap;
    grid-gap: 1rem;
    justify-content: space-between;
  }
  .allProductSingle2 .sellers .items .item .postBot ul li span {
    font-size: 0.7rem;
  }
  .allProductSingle2 .containerD {
    margin-top: 1rem;
    display: block;
  }
  .allProductSingle2 .containerD .right .tabs {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.5rem;
    padding: 0.5rem;
    margin-bottom: 0;
    justify-content: center;
    border: 0;
    border-radius: 0;
  }
  .allProductSingle2 .containerD .right .tabs .tab {
    font-size: 0.9rem;
    padding: 0.5rem;
    justify-content: center;
  }
  .allProductSingle2 .containerD .right .tabs .tab i svg {
    width: 1rem;
    height: 1rem;
  }
  .allProductSingle2 .containerD .right .data1 {
    border-radius: 0;
    border: 0;
  }
  .allProductSingle2 .containerD .right .data1 .des {
    padding: 0.5rem;
  }
  .allProductSingle2 .containerD .right .data1 .des .title1 {
    font-size: 1rem;
  }
  .allProductSingle2 .containerD .right .data1 .des .title1 i svg {
    width: 1rem;
    height: 1rem;
  }
  .allProductSingle2 .containerD .right .data1 .des .body p {
    font-size: 0.8rem;
    margin-top: 0.5rem;
  }
  .allProductSingle2 .containerD .right .data1 .des .body .image {
    margin: 0.5rem 0;
  }
  .allProductSingle2 .containerD .right .data1 .des .body img {
    height: auto !important;
    margin: 10px 0 !important;
  }
  .allProductSingle2 .containerD .right .data1 .des .body ul, .allProductSingle2 .containerD .right .data1 .des .body ol {
    margin: 0.5rem;
  }
  .allProductSingle2 .containerD .right .data1 .des .body ul li, .allProductSingle2 .containerD .right .data1 .des .body ol li {
    font-size: 0.8rem;
  }
  .allProductSingle2 .containerD .right .data1 .des .body ul ul, .allProductSingle2 .containerD .right .data1 .des .body ol ul {
    margin-top: 0.5rem;
    margin-right: 0.5rem;
  }
  .allProductSingle2 .containerD .right .data1 .des .body h2, .allProductSingle2 .containerD .right .data1 .des .body h3, .allProductSingle2 .containerD .right .data1 .des .body h4 {
    margin-bottom: 0.5rem;
  }
  .allProductSingle2 .containerD .right .data1 .des .body h2 {
    font-size: 1rem;
  }
  .allProductSingle2 .containerD .right .data1 .des .body h3 {
    font-size: 0.9rem;
  }
  .allProductSingle2 .containerD .right .data1 .des .body h4 {
    font-size: 0.8rem;
  }
  .allProductSingle2 .containerD .right .data1 .ability1 {
    padding: 0.5rem;
  }
  .allProductSingle2 .containerD .right .data1 .ability1 .title1 {
    font-size: 1rem;
  }
  .allProductSingle2 .containerD .right .data1 .ability1 .title1 i svg {
    width: 1rem;
    height: 1rem;
  }
  .allProductSingle2 .containerD .right .data1 .ability1 .items .item {
    margin-top: 0.5rem;
    grid-template-columns: 1fr 2fr;
  }
  .allProductSingle2 .containerD .right .data1 .ability1 .items .item .name1 {
    font-size: 0.7rem;
    padding: 0.5rem;
  }
  .allProductSingle2 .containerD .right .data1 .ability1 .items .item .body1 {
    font-size: 0.7rem;
    padding: 0.5rem;
  }
  .allProductSingle2 .containerD .right .data1 .comments1 .topC1 {
    padding: 0.5rem;
  }
  .allProductSingle2 .containerD .right .data1 .comments1 .topC1 .title2 {
    font-size: 1rem;
  }
  .allProductSingle2 .containerD .right .data1 .comments1 .topC1 .para1 {
    font-size: 0.8rem;
    font-weight: 300;
    color: #444;
  }
  .allProductSingle2 .containerD .boxP {
    display: none;
  }
  .allProductSingle2 .related {
    margin-top: 1rem;
    border: 0;
  }
  .allProductSingle2 .related .title {
    border-radius: 0;
    padding: 0.5rem;
    font-size: 1rem;
  }
  .allProductSingle2 .related .slider-related {
    margin-top: 0;
  }
  .allProductSingle2 .related .slider-related .item {
    padding: 0.5rem;
    border-radius: 0;
    border: 0;
    border-left: 1px solid #eee;
  }
  .allProductSingle2 .related .slider-related .item .titleEn {
    font-size: 0.7rem;
  }
  .allProductSingle2 .related .slider-related .item .title1 {
    font-size: 0.8rem;
  }
  .allProductSingle2 .related .slider-related .item .rate1 {
    font-size: 0.6rem;
  }
  .allProductSingle2 .related .slider-related .item .prices {
    gap: 0.5rem;
    margin-top: 0.5rem;
    padding-top: 0.5rem;
  }
  .allProductSingle2 .related .slider-related .item .prices .off {
    border-radius: 5px;
    font-size: 0.7rem;
  }
  .allProductSingle2 .related .slider-related .item .prices .price s {
    font-size: 0.7rem;
  }
  .allProductSingle2 .related .slider-related .item .prices .price .val {
    font-size: 0.7rem;
  }
  .allProductSingle2 .addFloat {
    display: block;
  }
  .allProductSingle2 .sellerInfo .data {
    width: 98%;
    border-radius: 10px;
  }
  .allProductSingle2 .sellerInfo .data .title {
    padding: 0.5rem;
  }
  .allProductSingle2 .sellerInfo .data .title .name {
    font-size: 1rem;
  }
  .allProductSingle2 .sellerInfo .data .title .location {
    font-size: 0.8rem;
  }
  .allProductSingle2 .sellerInfo .data .title .location i svg {
    width: 0.9rem;
    height: 0.9rem;
  }
  .allProductSingle2 .sellerInfo .data .profile {
    margin: 0.5rem 0;
    padding: 0 0.5rem;
  }
  .allProductSingle2 .sellerInfo .data .profile .pic img {
    height: 4rem;
  }
  .allProductSingle2 .sellerInfo .data .profile .name {
    font-size: 1rem;
  }
  .allProductSingle2 .sellerInfo .data .profile p {
    font-size: 0.8rem;
  }
  .allProductSingle2 .sellerInfo .data .options {
    display: grid;
    grid-gap: 0.5rem;
    padding: 0 0.5rem;
  }
  .allProductSingle2 .sellerInfo .data .options .option {
    padding: 0.5rem;
  }
  .allProductSingle2 .sellerInfo .data .options .option .body2 {
    font-size: 0.9rem;
  }
  .allProductSingle2 .sellerInfo .data .options .option .title2 {
    font-size: 0.8rem;
  }
  .allProductSingle2 .sellerInfo .data label {
    margin: 0.5rem;
  }
  .allProductSingle2 .sellerInfo .data label input {
    font-size: 0.85rem;
    padding: 0.5rem 0.8rem;
  }
  .allProductSingle2 .sellerInfo .data label i {
    width: 2.5rem;
    height: 2.5rem;
  }
  .allProductSingle2 .sellerInfo .data label i svg {
    width: 1rem;
    height: 1rem;
  }
  .allProductSingle2 .sellerInfo .data .time {
    font-size: 0.9rem;
    margin-right: 0.5rem;
  }
  .allProductSingle2 .sellerInfo .data .buttons {
    grid-gap: 0.5rem;
    padding: 0.5rem;
  }
  .allProductSingle2 .sellerInfo .data .buttons a {
    padding: 0.5rem;
    font-size: 0.8rem;
  }
  .allProductSingle2 .allTicket .chatContent {
    width: 100%;
    border-radius: 0;
  }
  .allProductSingle2 .allTicket .chatContent .header .profile .pic img {
    width: 2rem;
    height: 2rem;
  }
  .allProductSingle2 .allTicket .chatContent .header .profile .name {
    font-size: 0.8rem;
  }
  .allProductSingle2 .allTicket .chatContent .header i svg {
    width: 1.1rem;
    height: 1.1rem;
  }
  .allProductSingle2 .allTicket .chatContent .body {
    height: calc(100vh - 6.4rem);
  }
  .allProductSingle2 .allTicket .chatContent .body p {
    font-size: 0.7rem;
  }
  .allProductSingle2 .allTicket .chatContent .body p .closeChats {
    padding: 0.2rem;
  }
  .allProductSingle2 .allTicket .chatContent .body .choice {
    padding: 0.5rem;
    font-size: 0.7rem;
  }
  .allProductSingle2 .allTicket .chatContent .body .bodyLabel {
    font-size: 0.7rem;
    margin-top: 0.5rem;
  }
  .allProductSingle2 .allTicket .chatContent .body .bodyLabel input, .allProductSingle2 .allTicket .chatContent .body .bodyLabel select, .allProductSingle2 .allTicket .chatContent .body .bodyLabel textarea {
    padding: 0.3rem;
    font-size: 0.7rem;
  }
  .allProductSingle2 .allTicket .chatContent .body .message11 {
    margin-top: 1rem;
    font-size: 0.8rem;
  }
  .allProductSingle2 .allTicket .chatContent .body .message11 .time {
    font-size: 0.6rem;
  }
  .allProductSingle2 .allTicket .chatContent .body .message11 .messages {
    padding: 0.3rem;
  }
  .allProductSingle2 .allTicket .chatContent .body .submit {
    font-size: 0.8rem;
    padding: 0.3rem 0.5rem;
    margin-top: 0.5rem;
  }
  .allProductSingle2 .allTicket .chatContent .body .sendImage {
    margin-top: 0.5rem;
  }
  .allProductSingle2 .allTicket .chatContent .send {
    grid-gap: 0.5rem;
    padding: 0.5rem;
  }
  .allProductSingle2 .allTicket .chatContent .send input {
    padding: 0.5rem;
    font-size: 0.85rem;
  }
  .allProductSingle2 .allTicket .chatContent .send button {
    font-size: 0.7rem;
    padding: 0 1rem;
  }
  .allProductSingle2 .allTicket .chatContent .loginChat {
    font-size: 1rem;
    height: 3.5rem;
    align-items: center;
  }
  .allProductSingle2 .allTicket .chatContent .typeLogin1 {
    margin-top: 0.5rem;
  }
  .allProductSingle2 .allChangeList .changeList {
    width: 100%;
    padding: 0.5rem;
  }
  .allProductSingle2 .allChangeList .changeList .title2 {
    font-size: 0.9rem;
    margin-bottom: 0.5rem;
  }
  .allProductSingle2 .allBenefit .showB {
    width: 100%;
    border-radius: 0;
    height: 100vh;
    display: block;
  }
  .allProductSingle2 .allBenefit .showB .title2 {
    font-size: 0.9rem;
    padding: 0.5rem;
  }
  .allProductSingle2 .allBenefit .showB .title2 i svg {
    width: 1rem;
    height: 1rem;
  }
  .allProductSingle2 .allBenefit .showB .items {
    padding: 0.5rem;
    padding-top: 0;
  }
  .allProductSingle2 .allGuide .showB {
    width: 100%;
    border-radius: 0;
    height: 100vh;
    display: block;
  }
  .allProductSingle2 .allGuide .showB .title2 {
    font-size: 0.9rem;
    padding: 0.5rem;
  }
  .allProductSingle2 .allGuide .showB .title2 i svg {
    width: 1rem;
    height: 1rem;
  }
  .allProductSingle2 .allGuide .showB .table {
    overflow-x: scroll;
  }
  .allProductSingle2 .allGuide .showB table {
    border-radius: 10px;
  }
  .allProductSingle2 .allGuide .showB table tr {
    padding: 0.5rem;
    grid-template-columns: repeat(5, 7rem);
  }
  .allProductSingle2 .allGuide .showB table tr th {
    font-size: 0.7rem;
  }
  .allProductSingle2 .allGuide .showB table tr td {
    font-size: 0.7rem;
  }
  .allProductSingle2 .allGuide .showB .c4 tr {
    grid-template-columns: repeat(4, 7rem);
  }
  .allProductSingle2 .allBulk .showB {
    width: 100%;
    border-radius: 0;
  }
  .allProductSingle2 .allBulk .showB .title2 {
    font-size: 0.9rem;
    padding: 0.5rem;
  }
  .allProductSingle2 .allBulk .showB .title2 i svg {
    width: 1rem;
    height: 1rem;
  }
  .allProductSingle2 .allBulk .showB table {
    border-radius: 10px;
  }
  .allProductSingle2 .allBulk .showB table tr {
    padding: 0.5rem;
  }
  .allProductSingle2 .allBulk .showB table tr th {
    font-size: 0.8rem;
  }
  .allProductSingle2 .allBulk .showB table tr td {
    font-size: 0.8rem;
  }
}

.allProductSingle3 {
  margin: auto;
  margin-top: 1rem;
}
.allProductSingle3 .address {
  display: flex;
  justify-content: right;
  align-items: center;
  position: relative;
  margin-bottom: 1rem;
  border-radius: 15px;
}
.allProductSingle3 .address a {
  font-size: 0.85rem;
  font-weight: 500;
  color: #444;
  opacity: 0.7;
  white-space: pre-line;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  box-orient: vertical;
  -webkit-box-orient: vertical;
  line-clamp: 1;
  -webkit-line-clamp: 1;
  overflow: hidden;
  text-overflow: ellipsis;
}
.allProductSingle3 .address a:after {
  content: "/";
  padding: 0 0.4rem;
}
.allProductSingle3 .address a:last-child:after {
  content: "";
  padding: 0;
}
.allProductSingle3 .adminButtons {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 1rem;
  margin-bottom: 1rem;
}
.allProductSingle3 .adminButtons .sendDashboard {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.7rem;
  border-radius: 10px;
  background: #f3c8ff;
  color: purple;
  font-size: 0.9rem;
  font-weight: 700;
  box-shadow: 0 5px 5px rgba(0, 0, 0, 0.08);
}
.allProductSingle3 .adminButtons .sendDashboard i {
  display: grid;
  align-items: center;
}
.allProductSingle3 .adminButtons .sendDashboard i svg {
  width: 1.2rem;
  height: 1.2rem;
  color: purple;
}
.allProductSingle3 .adminButtons .sendDashboard:nth-child(2) {
  background: #c8d8ff;
  color: #002480;
}
.allProductSingle3 .adminButtons .sendDashboard:nth-child(2) i svg {
  color: #002480;
}
.allProductSingle3 .adminButtons .sendDashboard:nth-child(3) {
  background: #c8ffcf;
  color: #008002;
}
.allProductSingle3 .adminButtons .sendDashboard:nth-child(3) i svg {
  color: #008002;
}
.allProductSingle3 .containers {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 1rem;
}
.allProductSingle3 .containers .txtE {
  margin-bottom: 1rem;
  position: relative;
  width: 100%;
}
.allProductSingle3 .containers .txtE textarea {
  font-size: 0.9rem;
  font-weight: 300;
  color: #000;
  border: 1px solid #eee;
  width: 100%;
  height: 3rem;
  border-radius: 10px;
  padding: 1rem;
  resize: vertical;
}
.allProductSingle3 .containers .txtE:before {
  content: attr(data-tooltip);
  position: absolute;
  top: -0.5rem;
  background: purple;
  color: white;
  padding: 1px 5px;
  font-size: 0.7rem;
  border-radius: 5px;
  font-weight: 500;
}
.allProductSingle3 .containers .gallery {
  position: relative;
}
.allProductSingle3 .containers .gallery .options {
  position: absolute;
  right: 1rem;
  top: 1rem;
  z-index: 10;
}
.allProductSingle3 .containers .gallery .options .option {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 1rem;
  border-radius: 15px;
  border: 1px solid #eee;
  background: white;
  font-size: 0.9rem;
  font-weight: 700;
  color: #000;
  cursor: pointer;
  margin-bottom: 0.5rem;
}
.allProductSingle3 .containers .gallery .options .option i {
  display: grid;
  align-items: center;
}
.allProductSingle3 .containers .gallery .options .option i svg {
  width: 1.3rem;
  height: 1.3rem;
  color: #000;
}
.allProductSingle3 .containers .gallery .off {
  position: absolute;
  left: 1rem;
  top: 1rem;
  z-index: 2;
  background: rgba(255, 0, 0, 0.1);
  color: red;
  border: 1px solid red;
  padding: 0.2rem 1rem;
  font-size: 1rem;
  font-weight: 900;
  border-radius: 5rem;
}
.allProductSingle3 .containers .gallery .pics {
  background: white;
  border-radius: 15px;
  padding: 1rem;
  border: 1px solid #eee;
}
.allProductSingle3 .containers .gallery .pics .pic {
  position: relative;
  display: grid;
  overflow: hidden;
  justify-content: center;
}
.allProductSingle3 .containers .gallery .pics .pic img {
  height: 30rem;
  object-fit: contain;
}
.allProductSingle3 .containers .gallery .pics .images {
  margin-top: 1rem;
}
.allProductSingle3 .containers .gallery .pics .images .slider-image {
  display: grid;
}
.allProductSingle3 .containers .gallery .pics .images .slider-image .item {
  padding: 0.5rem;
  border: 1px solid #eee;
  border-radius: 15px;
  cursor: pointer;
}
.allProductSingle3 .containers .gallery .pics .images .slider-image .item img {
  height: 5rem;
  object-fit: contain;
}
.allProductSingle3 .containers .gallery .pics .images .slider-image .active2 {
  border: 1px solid var(--green-color);
}
.allProductSingle3 .containers .gallery .pics .images .slider-image .owl-next, .allProductSingle3 .containers .gallery .pics .images .slider-image .owl-prev {
  padding: 0.5rem;
  background: white !important;
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto;
  right: 0.5rem;
  width: 2.5rem;
  border: 2px solid black !important;
  font-size: 1.5rem !important;
  border-radius: 50%;
  color: black !important;
  height: 2.5rem;
  transition: all 0.3s ease-in-out;
}
.allProductSingle3 .containers .gallery .pics .images .slider-image .owl-next:hover, .allProductSingle3 .containers .gallery .pics .images .slider-image .owl-prev:hover {
  background: black !important;
  color: white !important;
}
.allProductSingle3 .containers .gallery .pics .images .slider-image .owl-next {
  left: 0.5rem;
  right: auto;
}
.allProductSingle3 .containers .left .title2 h1 {
  font-size: 1.4rem;
  font-weight: 900;
  color: #000;
  margin-bottom: 5px;
}
.allProductSingle3 .containers .left .title2 .op1 {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-gap: 1rem;
}
.allProductSingle3 .containers .left .title2 .op1 .right {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.allProductSingle3 .containers .left .title2 .op1 .right .option {
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  gap: 0.3rem;
  border-radius: 5rem;
  min-width: 4rem;
  border: 1px solid #eee;
  padding: 0.4rem 0.5rem;
  font-size: 0.75rem;
  font-weight: 500;
  color: #000;
}
.allProductSingle3 .containers .left .title2 .op1 .right .option i {
  display: grid;
  align-items: center;
}
.allProductSingle3 .containers .left .title2 .op1 .right .option i svg {
  width: 0.8rem;
  height: 0.8rem;
  fill: #000;
}
.allProductSingle3 .containers .left .title2 .op1 .right .option .star1 svg {
  fill: orange;
}
.allProductSingle3 .containers .left .title2 .op1 .left .guideS {
  color: blue;
  font-weight: 700;
  font-size: 0.8rem;
  cursor: pointer;
}
.allProductSingle3 .containers .left .details .prices {
  display: flex;
  justify-content: left;
  gap: 1rem;
  align-items: center;
  margin-top: 1rem;
}
.allProductSingle3 .containers .left .details .prices .boxB {
  background: #f7f7f7;
  padding: 0.5rem;
  border-radius: 10px;
  display: grid;
  justify-content: center;
  justify-items: center;
  font-size: 0.8rem;
  font-weight: 500;
  color: #444;
  cursor: pointer;
}
.allProductSingle3 .containers .left .details .prices .boxB i {
  display: grid;
  align-items: center;
  margin-bottom: 5px;
}
.allProductSingle3 .containers .left .details .prices .boxB i svg {
  width: 1.3rem;
  height: 1.3rem;
  fill: #000;
}
.allProductSingle3 .containers .left .details .prices .off {
  background: rgba(255, 0, 0, 0.2);
  border-radius: 5rem;
  padding: 0.5rem 1rem;
  font-size: 0.8rem;
  font-weight: 700;
  color: red;
}
.allProductSingle3 .containers .left .details .prices .price {
  display: grid;
  grid-template-columns: 1fr;
  grid-gap: 5px;
  text-align: left;
}
.allProductSingle3 .containers .left .details .prices .price s {
  font-size: 0.85rem;
  font-weight: 300;
  color: #444;
}
.allProductSingle3 .containers .left .details .prices .price bdi {
  font-size: 0.8rem;
  font-weight: 900;
  color: #000;
  line-height: 0.7rem;
}
.allProductSingle3 .containers .left .details .prices .price bdi span {
  font-size: 1.8rem;
  margin-left: 5px;
  line-height: 0.7rem;
}
.allProductSingle3 .containers .left .details .add {
  margin-top: 1rem;
}
.allProductSingle3 .containers .left .details .add .addCarts {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-gap: 1rem;
}
.allProductSingle3 .containers .left .details .add .addCarts .addCart {
  padding: 0.8rem;
  font-size: 1.1rem;
  font-weight: 900;
  border-radius: 10px;
  box-shadow: 0 5px 5px rgba(0, 0, 0, 0.05);
  background: #008a00;
  color: white;
  text-align: center;
  transition: all 0.3s ease-in-out;
  cursor: pointer;
}
.allProductSingle3 .containers .left .details .add .addCarts .addCart:hover {
  opacity: 1;
}
.allProductSingle3 .containers .left .details .add .addCarts .counts {
  display: flex;
  align-items: center;
  border: 1px solid #eee;
  box-shadow: 0 5px 5px rgba(0, 0, 0, 0.05);
  border-radius: 10px;
  height: 100%;
}
.allProductSingle3 .containers .left .details .add .addCarts .counts input {
  width: 3rem;
  padding: 0.5rem;
  background: transparent;
  text-align: center;
  font-size: 1rem;
  font-weight: 700;
  color: #000;
}
.allProductSingle3 .containers .left .details .add .addCarts .counts i {
  display: grid;
  align-items: center;
  padding: 0.5rem;
  cursor: pointer;
}
.allProductSingle3 .containers .left .details .add .addCarts .counts i svg {
  width: 0.8rem;
  height: 0.8rem;
  fill: #000;
}
.allProductSingle3 .containers .left .details .empty {
  padding: 0.6rem;
  font-size: 1rem;
  font-weight: 700;
  border-radius: 5px;
  background: grey;
  color: white;
  text-align: center;
  transition: all 0.3s ease-in-out;
  cursor: pointer;
  opacity: 1;
  display: grid;
}
.allProductSingle3 .containers .left .details .contact {
  background: var(--green-color);
}
.allProductSingle3 .containers .left .details .choice {
  margin-top: 1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 1rem;
  border-bottom: 1px solid #eee;
}
.allProductSingle3 .containers .left .details .choice .select {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  margin-bottom: 0.5rem;
}
.allProductSingle3 .containers .left .details .choice .select .name {
  font-size: 1rem;
  font-weight: 900;
  color: #000;
}
.allProductSingle3 .containers .left .details .choice .select .body {
  font-size: 1.1rem;
  font-weight: 900;
  color: #000;
}
.allProductSingle3 .containers .left .details .choice .lists {
  display: flex;
  justify-content: left;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.allProductSingle3 .containers .left .details .choice .lists .item {
  padding: 0.5rem 1rem;
  border: 2px solid #eee;
  border-radius: 10px;
  font-size: 0.9rem;
  font-weight: 500;
  color: #000;
  cursor: pointer;
  text-align: center;
}
.allProductSingle3 .containers .left .details .choice .lists .active {
  background: var(--green-color);
  color: white;
}
.allProductSingle3 .containers .left .details .carrier {
  margin-top: 1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 1rem;
  border-bottom: 1px solid #eee;
}
.allProductSingle3 .containers .left .details .carrier .name {
  font-size: 1rem;
  font-weight: 900;
  color: #000;
}
.allProductSingle3 .containers .left .details .carrier select {
  font-size: 1rem;
  font-weight: 900;
  color: #000;
  padding: 0.5rem 1rem;
  background: transparent;
  border-radius: 10px;
  border: 1px solid #eee;
}
.allProductSingle3 .containers .left .details .sellers {
  margin-top: 1rem;
}
.allProductSingle3 .containers .left .details .sellers .options {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem;
}
.allProductSingle3 .containers .left .details .sellers .options .option {
  width: 7rem;
  display: grid;
  justify-content: center;
  padding: 0.5rem;
  border-radius: 10px;
  font-size: 0.7rem;
  font-weight: 700;
  color: #000;
  border: 1px solid #eee;
  background: #f7f7f7;
  cursor: pointer;
}
.allProductSingle3 .containers .left .details .sellers .options .option .tooltip {
  margin-top: 0.8rem;
}
.allProductSingle3 .containers .left .details .sellers .options .option i {
  display: grid;
  justify-content: center;
  align-items: center;
}
.allProductSingle3 .containers .left .details .sellers .options .option i svg {
  width: 1.2rem;
  height: 1.2rem;
  fill: #444;
}
.allProductSingle3 .containers .left .details .info1 {
  font-size: 0.9rem;
  font-weight: 300;
  color: #444;
  margin-top: 1rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.allProductSingle3 .containers .left .details .info1 i {
  display: grid;
  opacity: 0.5;
  align-items: center;
}
.allProductSingle3 .containers .left .details .info1 i svg {
  width: 1rem;
  height: 1rem;
  fill: #444;
}
.allProductSingle3 .containers .left .details .abilities {
  margin-top: 1rem;
  padding: 1rem;
  border: 1px solid #eee;
  border-radius: 15px;
}
.allProductSingle3 .containers .left .details .abilities .name2 {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  font-size: 1rem;
  font-weight: 700;
  color: #000;
  margin-bottom: 1rem;
}
.allProductSingle3 .containers .left .details .abilities .name2:before {
  content: "";
  height: 5px;
  width: 15px;
  display: grid;
  border-radius: 5px;
  background: #444;
}
.allProductSingle3 .containers .left .details .abilities ul {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 1rem;
}
.allProductSingle3 .containers .left .details .abilities ul li {
  display: flex;
  align-items: center;
  gap: 5px;
}
.allProductSingle3 .containers .left .details .abilities ul li .name1 {
  font-size: 0.9rem;
  font-weight: 500;
  color: #000;
}
.allProductSingle3 .containers .left .details .abilities ul li .body1 {
  font-size: 0.9rem;
  font-weight: 500;
  color: #000;
}
.allProductSingle3 .containers .left .details .abilities ul li:before {
  content: "";
  height: 5px;
  width: 5px;
  display: grid;
  border-radius: 50%;
  background: #444;
}
.allProductSingle3 .containers .left .details .lottery {
  background: #f7f7f7;
  border: 1px solid #eee;
  margin: 1rem 0;
  border-radius: 15px;
  padding: 1rem;
}
.allProductSingle3 .containers .left .details .lottery .title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
}
.allProductSingle3 .containers .left .details .lottery .title .title1 {
  font-size: 0.85rem;
  font-weight: 500;
  color: #000;
}
.allProductSingle3 .containers .left .details .lottery .title .name {
  font-size: 0.8rem;
  font-weight: 700;
  color: red;
}
.allProductSingle3 .containers .left .details .lottery .bars {
  height: 10px;
  width: 100%;
  background: white;
  border-radius: 5rem;
  direction: ltr;
}
.allProductSingle3 .containers .left .details .lottery .bars .bar1 {
  height: 100%;
  background: red;
  border-radius: 5rem;
  position: relative;
}
.allProductSingle3 .containers .left .details .lottery .bars .bar1 div {
  width: 0;
  height: 100%;
  background: white;
  opacity: 0.5;
  box-shadow: 0 0 5px rgba(255, 0, 0, 0.3);
  border-radius: 5rem;
  transition: all 0.3s ease-in-out;
  animation: arrow-anim5 1s ease infinite;
}
@keyframes arrow-anim5 {
  0% {
    width: 0%;
  }
  5% {
    width: 5%;
  }
  10% {
    width: 10%;
  }
  15% {
    width: 15%;
  }
  20% {
    width: 20%;
  }
  25% {
    width: 25%;
  }
  30% {
    width: 30%;
  }
  35% {
    width: 35%;
  }
  40% {
    width: 40%;
  }
  45% {
    width: 45%;
  }
  50% {
    width: 50%;
  }
  55% {
    width: 55%;
  }
  60% {
    width: 60%;
  }
  65% {
    width: 65%;
  }
  70% {
    width: 70%;
  }
  75% {
    width: 75%;
  }
  80% {
    width: 80%;
  }
  85% {
    width: 85%;
  }
  90% {
    width: 90%;
  }
  95% {
    width: 95%;
  }
  100% {
    width: 100%;
  }
}
.allProductSingle3 .addFloat {
  position: fixed;
  bottom: 0;
  right: 0;
  left: 0;
  z-index: 100;
  background: white;
  box-shadow: 0 -10px 10px rgba(0, 0, 0, 0.1);
  padding: 0.5rem;
  display: none;
}
.allProductSingle3 .addFloat .top {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  justify-content: space-between;
}
.allProductSingle3 .addFloat .top select {
  padding: 0.2rem 0.8rem;
  background: transparent;
  border-radius: 10px;
  font-size: 1rem;
  font-weight: 500;
  color: #000;
  border: 1px solid #eee;
}
.allProductSingle3 .addFloat .top .price {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.allProductSingle3 .addFloat .top .price .offer {
  display: flex;
  justify-content: left;
  align-items: center;
  gap: 0.5rem;
}
.allProductSingle3 .addFloat .top .price .offer s {
  font-size: 0.9rem;
  font-weight: 300;
  color: #000;
  opacity: 0.5;
}
.allProductSingle3 .addFloat .top .price .offer .off {
  background: red;
  padding: 0.1rem 0.5rem;
  border-radius: 5rem;
  font-size: 0.8rem;
  font-weight: 900;
  color: white;
}
.allProductSingle3 .addFloat .top .price .priceF {
  font-size: 0.7rem;
  font-weight: 300;
  color: #000;
}
.allProductSingle3 .addFloat .top .price .priceF span {
  font-size: 1.2rem;
  font-weight: 700;
}
.allProductSingle3 .addFloat .bot {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-gap: 0.5rem;
  margin-top: 0.5rem;
}
.allProductSingle3 .addFloat .bot .addCarts {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-gap: 0.5rem;
}
.allProductSingle3 .addFloat .bot .addCarts .addCart {
  display: grid;
  align-items: center;
  padding: 0.3rem;
  opacity: 0.7;
  font-size: 0.8rem;
  font-weight: 700;
  border-radius: 5px;
  background: var(--green-color);
  color: white;
  text-align: center;
  transition: all 0.3s ease-in-out;
  cursor: pointer;
}
.allProductSingle3 .addFloat .bot .addCarts .addCart:hover {
  opacity: 1;
}
.allProductSingle3 .addFloat .bot .addCarts .counts {
  display: flex;
  align-items: center;
  border: 2px solid #eee;
  border-radius: 5px;
  height: 100%;
}
.allProductSingle3 .addFloat .bot .addCarts .counts input {
  width: 2rem;
  padding: 0.3rem 0.2rem;
  background: transparent;
  text-align: center;
  font-size: 0.8rem;
  font-weight: 700;
  color: #000;
}
.allProductSingle3 .addFloat .bot .addCarts .counts i {
  display: grid;
  align-items: center;
  padding: 0.3rem;
  cursor: pointer;
}
.allProductSingle3 .addFloat .bot .addCarts .counts i svg {
  width: 0.7rem;
  height: 0.7rem;
  fill: #000;
}
.allProductSingle3 .addFloat .bot .empty, .allProductSingle3 .addFloat .bot .contact {
  padding: 0.6rem;
  font-size: 1rem;
  font-weight: 700;
  border-radius: 5px;
  background: grey;
  color: white;
  text-align: center;
  transition: all 0.3s ease-in-out;
  cursor: pointer;
  opacity: 1;
}
.allProductSingle3 .addFloat .bot .contact {
  background: var(--green-color);
  font-size: 0.8rem;
}
.allProductSingle3 .addFloat .bot .cartS {
  border: 1px solid var(--green-color);
  border-radius: 5px;
  position: relative;
}
.allProductSingle3 .addFloat .bot .cartS i {
  display: grid;
  align-items: center;
  justify-content: center;
  width: 2rem;
}
.allProductSingle3 .addFloat .bot .cartS i svg {
  width: 1rem;
  height: 1rem;
  fill: var(--green-color);
}
.allProductSingle3 .addFloat .bot .cartS .showCartCount {
  position: absolute;
  top: -6px;
  left: -6px;
  background: var(--green-color);
  width: 17px;
  height: 17px;
  color: white;
  font-size: 0.7rem;
  line-height: 17px;
  border-radius: 50%;
  display: grid;
  justify-content: center;
  align-items: center;
}
.allProductSingle3 .showEditBtn {
  position: fixed;
  bottom: 1rem;
  left: 1rem;
  background: purple;
  padding: 0.5rem;
  border-radius: 10px;
  color: white;
  font-size: 1rem;
  font-weight: 500;
  z-index: 10;
  display: none;
  cursor: pointer;
}
.allProductSingle3 .sellers {
  margin-top: 2rem;
}
.allProductSingle3 .sellers .title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 1rem;
  font-weight: 700;
  color: #000;
  padding: 1rem;
  background: white;
  border: 1px solid #eee;
  border-radius: 15px;
}
.allProductSingle3 .sellers .title i {
  display: grid;
  align-items: center;
}
.allProductSingle3 .sellers .title i svg {
  width: 1.3rem;
  height: 1.3rem;
  fill: #000;
}
.allProductSingle3 .sellers .items {
  background: white;
  border: 1px solid #eee;
  border-radius: 15px;
  margin-top: 0.5rem;
}
.allProductSingle3 .sellers .items .item {
  padding: 1rem;
  border-bottom: 1px solid #eee;
}
.allProductSingle3 .sellers .items .item .postTop {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
}
.allProductSingle3 .sellers .items .item .postTop .postTitle {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-gap: 1rem;
  align-items: center;
}
.allProductSingle3 .sellers .items .item .postTop .postTitle .image img {
  height: 2.5rem;
  object-fit: contain;
  width: 2.5rem;
  border-radius: 100%;
}
.allProductSingle3 .sellers .items .item .postTop .postTitle ul {
  display: flex;
  justify-content: right;
  flex-wrap: wrap;
  align-items: center;
  gap: 2rem;
}
.allProductSingle3 .sellers .items .item .postTop .postTitle ul li {
  display: flex;
  justify-content: right;
  align-items: center;
  grid-gap: 0.5rem;
}
.allProductSingle3 .sellers .items .item .postTop .postTitle ul li span, .allProductSingle3 .sellers .items .item .postTop .postTitle ul li label, .allProductSingle3 .sellers .items .item .postTop .postTitle ul li a {
  font-size: 0.9rem;
  font-weight: 300;
  color: #000;
  opacity: 0.7;
}
.allProductSingle3 .sellers .items .item .postTop .postTitle ul li span:last-child, .allProductSingle3 .sellers .items .item .postTop .postTitle ul li label:last-child, .allProductSingle3 .sellers .items .item .postTop .postTitle ul li a:last-child {
  font-size: 1rem;
  font-weight: 500;
  opacity: 1;
}
.allProductSingle3 .sellers .items .item .postTop .postTitle ul li select {
  background: var(--back1-color);
  border: 1px solid #eee;
  padding: 0.3rem 0.5rem;
  color: #000;
  border-radius: 0.3rem;
  font-size: 0.8rem;
  width: 100%;
  height: 2rem;
  min-width: 8rem;
  transition: all 0.3s ease-in-out;
}
.allProductSingle3 .sellers .items .item .postTop .postTitle ul li select:focus {
  box-shadow: 0 3px 8px 0 rgba(0, 0, 0, 0.1);
  border: 1px solid #19bfd3;
}
.allProductSingle3 .sellers .items .item .postTop .postOptions {
  display: grid;
  justify-content: left;
  align-items: center;
}
.allProductSingle3 .sellers .items .item .postTop .postOptions .addCart {
  padding: 0.5rem 2rem;
  border: 1px solid var(--green-color);
  border-radius: 10px;
  cursor: pointer;
  font-size: 1rem;
  font-weight: 500;
  color: var(--green-color);
  transition: all 0.3s ease-in;
}
.allProductSingle3 .sellers .items .item .postTop .postOptions .addCart:hover {
  background: var(--green-color);
  color: white;
}
.allProductSingle3 .sellers .items .item .postBot {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  grid-gap: 0.5rem;
  margin-top: 0.5rem;
  background: var(--back2-color);
  border-radius: 5px;
  padding: 1rem;
}
.allProductSingle3 .sellers .items .item .postBot ul {
  display: grid;
  grid-template-columns: auto auto auto auto auto;
  justify-content: right;
  grid-gap: 2rem;
  align-items: center;
}
.allProductSingle3 .sellers .items .item .postBot ul li {
  display: grid;
  grid-template-columns: auto auto;
  justify-content: right;
  align-items: center;
  grid-gap: 0.5rem;
}
.allProductSingle3 .sellers .items .item .postBot ul li span {
  font-size: 0.85rem;
  font-weight: 300;
  color: #000;
  opacity: 0.6;
}
.allProductSingle3 .sellers .items .item .postBot ul li span:last-child {
  color: #444;
  font-weight: 700;
  opacity: 1;
}
.allProductSingle3 .sellers .items .item:last-child {
  border-bottom: 0;
}
.allProductSingle3 .containerD {
  margin-top: 2rem;
  display: grid;
  grid-template-columns: 1fr 25rem;
  grid-gap: 1rem;
}
.allProductSingle3 .containerD .right .tabs {
  display: flex;
  flex-wrap: wrap;
  justify-content: right;
  align-items: center;
  background: #f7f7f7;
  border-top-right-radius: 15px;
  border-top-left-radius: 15px;
  padding: 0.8rem;
  padding-bottom: 0;
  border: 1px solid #eee;
  border-bottom: 0;
}
.allProductSingle3 .containerD .right .tabs .tab {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 1rem;
  font-weight: 700;
  color: #444;
  cursor: pointer;
  padding: 0.5rem 1.5rem;
  padding-top: 0.8rem;
  border-top-right-radius: 15px;
  border-top-left-radius: 15px;
}
.allProductSingle3 .containerD .right .tabs .tab i {
  display: grid;
  align-items: center;
}
.allProductSingle3 .containerD .right .tabs .tab i svg {
  width: 1.2rem;
  height: 1.2rem;
  fill: #000;
}
.allProductSingle3 .containerD .right .tabs .tab span {
  background: var(--green-color);
  width: 1.5rem;
  height: 1.5rem;
  display: grid;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
  font-weight: 500;
  color: white;
  border-radius: 5px;
}
.allProductSingle3 .containerD .right .tabs .active {
  color: var(--green-color);
  background: white;
  border: 1px solid #eee;
  border-bottom: 1px solid white;
  margin-bottom: -2px;
}
.allProductSingle3 .containerD .right .tabs .active i svg {
  fill: var(--green-color);
}
.allProductSingle3 .containerD .right .data1 {
  background: white;
  border: 1px solid #eee;
  border-bottom-right-radius: 15px;
  border-bottom-left-radius: 15px;
}
.allProductSingle3 .containerD .right .data1 .des {
  padding: 1rem;
}
.allProductSingle3 .containerD .right .data1 .des .title1 {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 1.1rem;
  font-weight: 900;
  color: #444;
}
.allProductSingle3 .containerD .right .data1 .des .title1:before {
  content: "";
  width: 17px;
  height: 6px;
  background: var(--green-color);
  border-radius: 5rem;
}
.allProductSingle3 .containerD .right .data1 .des .body p {
  opacity: 0.7;
  font-size: 1rem;
  font-weight: 400;
  color: #000;
  margin-top: 1rem;
  line-height: 2rem;
}
.allProductSingle3 .containerD .right .data1 .des .body .image {
  display: grid;
  justify-content: center;
  margin: 1rem 0;
}
.allProductSingle3 .containerD .right .data1 .des .body img {
  object-fit: cover !important;
  height: 600px !important;
  width: 100% !important;
  margin: 20px 0 !important;
}
.allProductSingle3 .containerD .right .data1 .des .body ul, .allProductSingle3 .containerD .right .data1 .des .body ol {
  margin: 2rem;
}
.allProductSingle3 .containerD .right .data1 .des .body ul li, .allProductSingle3 .containerD .right .data1 .des .body ol li {
  list-style: decimal;
  margin-bottom: 0.5rem;
  font-size: 0.9rem;
}
.allProductSingle3 .containerD .right .data1 .des .body ul ul, .allProductSingle3 .containerD .right .data1 .des .body ol ul {
  margin: 0;
  margin-top: 1rem;
  margin-right: 1rem;
}
.allProductSingle3 .containerD .right .data1 .des .body ul li {
  list-style: disc;
}
.allProductSingle3 .containerD .right .data1 .des .body table {
  margin: 1rem 0;
  border: 1px solid #eee;
  width: 100%;
}
.allProductSingle3 .containerD .right .data1 .des .body table thead tr {
  background: #eee;
}
.allProductSingle3 .containerD .right .data1 .des .body table tr {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(1px, 1fr));
  align-items: center;
  grid-gap: 1rem;
  padding: 1rem;
}
.allProductSingle3 .containerD .right .data1 .des .body table tr th {
  font-weight: 700;
  color: #000;
  font-size: 0.85rem;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  display: grid;
  align-items: center;
  justify-content: center;
}
.allProductSingle3 .containerD .right .data1 .des .body table tr td {
  font-weight: 300;
  font-size: 0.85rem;
  text-align: center;
  color: #000;
}
.allProductSingle3 .containerD .right .data1 .des .body table tr td p {
  font-weight: 300;
  font-size: 0.85rem;
  text-align: center;
  color: #000;
  margin-bottom: 0;
  line-height: unset;
}
.allProductSingle3 .containerD .right .data1 .des .body table tr td img {
  width: 2.5rem;
  height: 2.5rem;
  object-fit: cover;
  border-radius: 5rem;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
.allProductSingle3 .containerD .right .data1 .des .body table tr td a {
  display: grid;
  align-items: center;
}
.allProductSingle3 .containerD .right .data1 .des .body table tr td a svg {
  margin-left: 0.5rem;
}
.allProductSingle3 .containerD .right .data1 .des .body table tr:nth-child(even) {
  background: #eee;
}
.allProductSingle3 .containerD .right .data1 .des .body h2, .allProductSingle3 .containerD .right .data1 .des .body h3, .allProductSingle3 .containerD .right .data1 .des .body h4 {
  margin-bottom: 1rem;
}
.allProductSingle3 .containerD .right .data1 .des .body h2 {
  font-size: 1.5rem;
}
.allProductSingle3 .containerD .right .data1 .des .body h3 {
  font-size: 1.3rem;
}
.allProductSingle3 .containerD .right .data1 .des .body h4 {
  font-size: 1.2rem;
}
.allProductSingle3 .containerD .right .data1 .ability1 {
  padding: 1rem;
  display: none;
}
.allProductSingle3 .containerD .right .data1 .ability1 .title1 {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 1.1rem;
  font-weight: 900;
  color: #444;
}
.allProductSingle3 .containerD .right .data1 .ability1 .title1:before {
  content: "";
  width: 17px;
  height: 6px;
  background: var(--green-color);
  border-radius: 5rem;
}
.allProductSingle3 .containerD .right .data1 .ability1 .items .item {
  margin-top: 1rem;
  display: grid;
  grid-template-columns: 1fr 3fr;
  grid-gap: 0.5rem;
}
.allProductSingle3 .containerD .right .data1 .ability1 .items .item .name1 {
  font-size: 0.9rem;
  font-weight: 700;
  color: #444;
  padding: 0.8rem;
  background: #f9f9f9;
  border-radius: 10px;
}
.allProductSingle3 .containerD .right .data1 .ability1 .items .item .body1 {
  font-size: 0.9rem;
  font-weight: 700;
  color: #444;
  padding: 0.8rem;
  background: #f5f5f5;
  border-radius: 10px;
}
.allProductSingle3 .containerD .right .data1 .comments1 {
  display: none;
}
.allProductSingle3 .containerD .right .data1 .comments1 .topC1 {
  padding: 1rem;
}
.allProductSingle3 .containerD .right .data1 .comments1 .topC1 .title2 {
  font-size: 1.1rem;
  font-weight: 900;
  color: #000;
  margin-bottom: 0.5rem;
}
.allProductSingle3 .containerD .right .data1 .comments1 .topC1 .para1 {
  font-size: 0.9rem;
  font-weight: 300;
  color: #444;
}
.allProductSingle3 .containerD .right .data1 .lottery1 {
  display: none;
  padding: 1rem;
}
.allProductSingle3 .containerD .right .data1 .lottery1 .title {
  font-size: 1rem;
  font-weight: 900;
  color: #000;
  margin-bottom: 1rem;
}
.allProductSingle3 .containerD .right .data1 .lottery1 table {
  width: 100%;
  border-collapse: collapse;
}
.allProductSingle3 .containerD .right .data1 .lottery1 table tr {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  align-items: center;
  grid-gap: 0.5rem;
  padding: 1rem;
  border-radius: 10px;
  border-bottom: 1px solid #eee;
}
.allProductSingle3 .containerD .right .data1 .lottery1 table tr th {
  font-weight: 700;
  color: #000;
  font-size: 0.9rem;
  text-align: right;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
.allProductSingle3 .containerD .right .data1 .lottery1 table tr td {
  font-weight: 700;
  font-size: 0.9rem;
  text-align: right;
  color: #000;
}
.allProductSingle3 .containerD .right .data1 .lottery1 table tr:last-child {
  border-bottom: 0;
}
.allProductSingle3 .containerD .right .data1 .lottery1 table tr:first-child {
  background: #F6F8FB;
}
.allProductSingle3 .containerD .boxP {
  border-radius: 15px;
  padding: 1rem;
  border: 1px solid #eee;
  background: #f7f7f7;
  position: sticky;
  top: 1rem;
}
.allProductSingle3 .containerD .boxP .title1 {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-gap: 0.5rem;
}
.allProductSingle3 .containerD .boxP .title1 .pic {
  border-radius: 10px;
  overflow: hidden;
}
.allProductSingle3 .containerD .boxP .title1 .pic img {
  width: 5rem;
  height: 5rem;
  object-fit: contain;
}
.allProductSingle3 .containerD .boxP .title1 .name {
  font-size: 1rem;
  font-weight: 700;
  color: #000;
}
.allProductSingle3 .containerD .boxP .user {
  padding: 1rem 0;
  margin-top: 1rem;
  border-top: 2px solid #eee;
  border-bottom: 2px solid #eee;
}
.allProductSingle3 .containerD .boxP .user .name {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.9rem;
  font-weight: 700;
  color: #000;
}
.allProductSingle3 .containerD .boxP .user .name i {
  display: grid;
  align-items: center;
}
.allProductSingle3 .containerD .boxP .user .name i svg {
  width: 1.1rem;
  height: 1.1rem;
  fill: #000;
}
.allProductSingle3 .containerD .boxP .user .option {
  margin-top: 1rem;
  padding: 0.7rem;
  border-radius: 10px;
  background: white;
  border: 1px solid #eee;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
}
.allProductSingle3 .containerD .boxP .user .option .name {
  color: #444;
  font-size: 0.9rem;
  font-weight: 700;
}
.allProductSingle3 .containerD .boxP .user .option i {
  display: grid;
  align-items: center;
}
.allProductSingle3 .containerD .boxP .user .option i svg {
  width: 1rem;
  height: 1rem;
  fill: #444;
}
.allProductSingle3 .containerD .boxP .user .option i:last-child svg {
  width: 1.3rem;
  height: 1.3rem;
}
.allProductSingle3 .containerD .boxP .prices {
  display: flex;
  justify-content: left;
  gap: 1rem;
  align-items: center;
  margin-top: 1rem;
}
.allProductSingle3 .containerD .boxP .prices .off {
  border: 1px solid red;
  border-radius: 10px;
  padding: 0.5rem;
  font-size: 0.8rem;
  font-weight: 700;
  color: red;
}
.allProductSingle3 .containerD .boxP .prices .price {
  display: grid;
  grid-template-columns: 1fr;
  grid-gap: 5px;
  text-align: left;
}
.allProductSingle3 .containerD .boxP .prices .price s {
  font-size: 0.85rem;
  font-weight: 300;
  color: #444;
}
.allProductSingle3 .containerD .boxP .prices .price bdi {
  font-size: 0.8rem;
  font-weight: 900;
  color: #000;
  line-height: 0.7rem;
}
.allProductSingle3 .containerD .boxP .prices .price bdi span {
  font-size: 1.2rem;
  margin-left: 5px;
  line-height: 0.7rem;
}
.allProductSingle3 .containerD .boxP .add {
  margin-top: 1rem;
}
.allProductSingle3 .containerD .boxP .add .addCarts {
  display: grid;
  grid-template-columns: 1fr;
}
.allProductSingle3 .containerD .boxP .add .addCarts .addCart {
  padding: 0.6rem;
  font-size: 1rem;
  font-weight: 700;
  border-radius: 10px;
  background: var(--green-color);
  color: white;
  text-align: center;
  transition: all 0.3s ease-in-out;
  box-shadow: 0 10px 5px rgba(0, 0, 0, 0.05);
  cursor: pointer;
}
.allProductSingle3 .containerD .boxP .empty {
  padding: 0.6rem;
  font-size: 1rem;
  font-weight: 700;
  border-radius: 5px;
  background: grey;
  color: white;
  text-align: center;
  transition: all 0.3s ease-in-out;
  cursor: pointer;
  opacity: 1;
  display: grid;
}
.allProductSingle3 .containerD .boxP .contact {
  background: var(--green-color);
}
.allProductSingle3 .related {
  margin-top: 2rem;
  background: #f7f7f7;
  border-radius: 15px;
  padding: 1rem;
}
.allProductSingle3 .related .title {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 1rem;
  justify-content: space-between;
  align-items: center;
  align-content: center;
  margin-bottom: 1rem;
}
.allProductSingle3 .related .title .name {
  font-size: 1.3rem;
  font-weight: 900;
  color: #000;
  text-align: center;
}
.allProductSingle3 .related .title .bar {
  height: 2px;
  background: #eee;
}
.allProductSingle3 .related .title a {
  display: flex;
  justify-content: left;
  align-items: center;
  color: white;
  font-size: 0.9rem;
  font-weight: 500;
  background: var(--green-color);
  box-shadow: 0 5px 5px rgba(0, 0, 0, 0.1);
  border-radius: 5rem;
  overflow: hidden;
  position: relative;
  width: 12rem;
}
.allProductSingle3 .related .title a span {
  position: absolute;
  right: 0;
  left: 1.7rem;
  bottom: 0;
  top: 0;
  background: var(--green-color);
  border-radius: 5rem;
  display: grid;
  align-items: center;
  justify-content: center;
}
.allProductSingle3 .related .title a i {
  background: white;
  display: grid;
  padding: 0.7rem;
  padding-left: 0.5rem;
  width: 3rem;
  align-items: center;
  justify-content: left;
}
.allProductSingle3 .related .title a i svg {
  width: 1rem;
  height: 1rem;
  fill: #000;
}
.allProductSingle3 .related .slider-related {
  min-width: 0;
}
.allProductSingle3 .related .slider-related .owl-stage-outer {
  overflow: hidden;
}
.allProductSingle3 .related .slider-related .item {
  display: grid;
  background: var(--green-color);
  border-radius: 15px;
  overflow: hidden;
  position: relative;
  padding: 2rem 1rem;
  background: var(--green-color);
}
.allProductSingle3 .related .slider-related .item .cover {
  position: relative;
  z-index: 2;
}
.allProductSingle3 .related .slider-related .item .pic img {
  height: 10rem;
  object-fit: contain;
}
.allProductSingle3 .related .slider-related .item .title1 {
  font-size: 0.9rem;
  font-weight: 500;
  color: #000;
  margin-top: 1rem;
  height: 3rem;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  text-overflow: ellipsis;
}
.allProductSingle3 .related .slider-related .item .prices {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  align-items: center;
  margin-top: 1rem;
}
.allProductSingle3 .related .slider-related .item .prices .off {
  background: rgba(255, 0, 0, 0.2);
  border-radius: 5rem;
  padding: 0.2rem 0.8rem;
  font-size: 0.8rem;
  font-weight: 700;
  color: red;
  transition: all 0.3s ease-in-out;
}
.allProductSingle3 .related .slider-related .item .prices .price1 {
  display: flex;
  justify-content: left;
  align-items: center;
}
.allProductSingle3 .related .slider-related .item .prices .price1 .price {
  display: grid;
  grid-template-columns: 1fr;
  grid-gap: 2px;
  text-align: left;
}
.allProductSingle3 .related .slider-related .item .prices .price1 .price .val {
  font-size: 0.8rem;
  font-weight: 900;
  color: #000;
  transition: all 0.3s ease-in-out;
}
.allProductSingle3 .related .slider-related .item .prices .price1 .price .val span {
  font-size: 1rem;
  line-height: 0.7rem;
}
.allProductSingle3 .related .slider-related .item .prices .price1 .price s {
  font-size: 0.8rem;
  font-weight: 300;
  color: #444;
  line-height: 0.8rem;
  transition: all 0.3s ease-in-out;
}
.allProductSingle3 .related .slider-related .item .prices .price1 .currency {
  font-size: 1rem;
  font-weight: 300;
  transition: all 0.3s ease-in-out;
  color: #444;
  opacity: 0.3;
  text-orientation: mixed;
  writing-mode: vertical-rl;
}
.allProductSingle3 .related .slider-related .item:before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  height: 100%;
  background: white;
  border-radius: 15px;
  transition: all 0.3s ease-in-out;
}
.allProductSingle3 .related .slider-related .item:hover:before {
  height: 16.5rem;
}
.allProductSingle3 .related .slider-related .item:hover .prices .off {
  background: white;
}
.allProductSingle3 .related .slider-related .item:hover .prices .price1 .price .val {
  color: white;
}
.allProductSingle3 .related .slider-related .item:hover .prices .price1 .price s {
  color: white;
}
.allProductSingle3 .related .slider-related .item:hover .prices .price1 .currency {
  color: white;
}
.allProductSingle3 .related .slider-related .owl-nav {
  position: absolute;
  top: -3.4rem;
  left: 0;
  display: flex;
  gap: 0.5rem;
}
.allProductSingle3 .related .slider-related .owl-nav .owl-prev, .allProductSingle3 .related .slider-related .owl-nav .owl-next {
  width: 2.3rem;
  height: 2.3rem;
  display: grid;
  border-radius: 50%;
  align-items: center;
  font-size: 1.4rem;
  border: 1px solid #444;
  background: #f7f7f7;
  transition: all 0.3s ease-in-out;
}
.allProductSingle3 .related .slider-related .owl-nav .owl-prev:hover, .allProductSingle3 .related .slider-related .owl-nav .owl-next:hover {
  background: var(--green-color);
}
.allProductSingle3 .related .slider-related .owl-nav .owl-prev:hover span, .allProductSingle3 .related .slider-related .owl-nav .owl-next:hover span {
  color: white;
}
@media screen and (max-width: 700px) {
  .allProductSingle3 .related {
    padding: 0.5rem;
  }
  .allProductSingle3 .related .title {
    display: flex;
    justify-content: space-between;
    gap: 0.5rem;
  }
  .allProductSingle3 .related .title .name {
    font-size: 1rem;
  }
  .allProductSingle3 .related .title .bar {
    display: none;
  }
  .allProductSingle3 .related .title a {
    font-size: 0.6rem;
    width: 8rem;
  }
  .allProductSingle3 .related .title a i {
    padding: 0.5rem;
  }
  .allProductSingle3 .related .slider-related {
    position: relative;
  }
  .allProductSingle3 .related .slider-related .item {
    border-radius: 10px;
    padding: 0.5rem;
  }
  .allProductSingle3 .related .slider-related .item .pic img {
    height: 8rem;
  }
  .allProductSingle3 .related .slider-related .item .title1 {
    font-size: 0.8rem;
    margin-top: 0.5rem;
    height: 2.4rem;
  }
  .allProductSingle3 .related .slider-related .item .prices {
    gap: 0.5rem;
  }
  .allProductSingle3 .related .slider-related .item .prices .off {
    padding: 0.2rem 0.5rem;
    font-size: 0.7rem;
  }
  .allProductSingle3 .related .slider-related .item .prices .price1 .price .val {
    font-size: 0.7rem;
  }
  .allProductSingle3 .related .slider-related .item .prices .price1 .price .val span {
    font-size: 0.9rem;
  }
  .allProductSingle3 .related .slider-related .item .prices .price1 .price s {
    font-size: 0.65rem;
  }
  .allProductSingle3 .related .slider-related .item .prices .price1 .currency {
    font-size: 0.8rem;
  }
  .allProductSingle3 .related .slider-related .item:before {
    border-radius: 10px;
  }
  .allProductSingle3 .related .slider-related .item:hover:before {
    height: 11.5rem;
  }
  .allProductSingle3 .related .slider-related .owl-nav {
    display: flex;
    position: unset;
  }
  .allProductSingle3 .related .slider-related .owl-nav .owl-prev, .allProductSingle3 .related .slider-related .owl-nav .owl-next {
    width: 2.3rem;
    height: 2.3rem;
    position: absolute;
    top: 40%;
  }
  .allProductSingle3 .related .slider-related .owl-nav .owl-prev:hover, .allProductSingle3 .related .slider-related .owl-nav .owl-next:hover {
    background: var(--green-color);
  }
  .allProductSingle3 .related .slider-related .owl-nav .owl-prev:hover span, .allProductSingle3 .related .slider-related .owl-nav .owl-next:hover span {
    color: white;
  }
  .allProductSingle3 .related .slider-related .owl-nav .owl-next {
    left: 0;
  }
}
.allProductSingle3 .sellerInfo {
  background: rgba(0, 0, 0, 0.5);
  z-index: 4000;
  position: fixed;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-columns: 1fr;
  justify-content: center;
  backdrop-filter: blur(10px);
}
.allProductSingle3 .sellerInfo .data {
  width: 30%;
  margin: auto;
  background: white;
  display: grid;
  grid-template-columns: 1fr;
  border-radius: 20px;
  overflow: hidden;
}
.allProductSingle3 .sellerInfo .data .title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem;
  border-bottom: 2px solid #eee;
}
.allProductSingle3 .sellerInfo .data .title .name {
  font-size: 1.5rem;
  font-weight: 900;
  color: #444;
}
.allProductSingle3 .sellerInfo .data .title .location {
  display: flex;
  justify-content: left;
  align-items: center;
  gap: 0.3rem;
  font-size: 1rem;
  font-weight: 500;
  color: var(--green-color);
}
.allProductSingle3 .sellerInfo .data .title .location i {
  display: grid;
  align-items: center;
}
.allProductSingle3 .sellerInfo .data .title .location i svg {
  width: 1.2rem;
  height: 1.2rem;
  fill: var(--green-color);
}
.allProductSingle3 .sellerInfo .data .profile {
  margin: 1rem 0;
  padding: 0 1rem;
}
.allProductSingle3 .sellerInfo .data .profile .pic {
  display: grid;
  justify-content: center;
}
.allProductSingle3 .sellerInfo .data .profile .pic img {
  width: auto;
  height: 5rem;
  object-fit: cover;
}
.allProductSingle3 .sellerInfo .data .profile .name {
  font-size: 1.3rem;
  font-weight: 900;
  color: black;
  text-align: center;
  margin-top: 0.5rem;
}
.allProductSingle3 .sellerInfo .data .profile p {
  font-size: 0.9rem;
  font-weight: 300;
  text-align: center;
  margin-top: 0.5rem;
  line-height: 2rem;
  color: #444;
  white-space: pre-line;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  box-orient: vertical;
  -webkit-box-orient: vertical;
  line-clamp: 2;
  -webkit-line-clamp: 2;
  overflow: hidden;
  text-overflow: ellipsis;
}
.allProductSingle3 .sellerInfo .data .options {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 1rem;
  padding: 0 1rem;
}
.allProductSingle3 .sellerInfo .data .options .option {
  background: #f5f5f5;
  padding: 0.5rem 1rem;
  text-align: center;
  border-radius: 10px;
}
.allProductSingle3 .sellerInfo .data .options .option .body2 {
  font-size: 1.2rem;
  font-weight: 700;
  color: black;
}
.allProductSingle3 .sellerInfo .data .options .option .title2 {
  font-size: 1rem;
  font-weight: 500;
  color: #444;
  opacity: 0.7;
}
.allProductSingle3 .sellerInfo .data label {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  grid-gap: 0.5rem;
  margin: 1rem;
}
.allProductSingle3 .sellerInfo .data label input {
  border: 1px solid #ddd;
  font-size: 1rem;
  padding: 0.7rem 1rem;
  border-radius: 5rem;
  font-weight: 700;
  opacity: 0.7;
}
.allProductSingle3 .sellerInfo .data label i {
  display: grid;
  align-items: center;
  justify-content: center;
  transform: rotate(-135deg);
  border: 1px solid var(--green-color);
  border-radius: 50%;
  width: 3rem;
  height: 3rem;
}
.allProductSingle3 .sellerInfo .data label i svg {
  width: 1.2rem;
  height: 1.2rem;
  fill: var(--green-color);
}
.allProductSingle3 .sellerInfo .data .time {
  font-size: 1rem;
  font-weight: 300;
  color: #444;
  text-align: center;
  margin-right: 1rem;
}
.allProductSingle3 .sellerInfo .data .time span {
  color: red;
  font-weight: 700;
}
.allProductSingle3 .sellerInfo .data .time .active {
  color: green;
}
.allProductSingle3 .sellerInfo .data .buttons {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 1rem;
  padding: 1rem;
}
.allProductSingle3 .sellerInfo .data .buttons a {
  padding: 0.5rem 1rem;
  border-radius: 5px;
  font-size: 1rem;
  text-align: center;
  background: white;
  font-weight: 700;
  color: var(--green-color);
  border: 2px solid var(--green-color);
}
.allProductSingle3 .sellerInfo .data .buttons a:last-child {
  color: white;
  border: 2px solid var(--green-color);
  background: var(--green-color);
}
.allProductSingle3 .allTicket {
  background: rgba(0, 0, 0, 0.5);
  z-index: 4000;
  position: fixed;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-columns: 1fr;
  justify-content: center;
  backdrop-filter: blur(10px);
}
.allProductSingle3 .allTicket .chatContent {
  width: 40%;
  margin: auto;
  background: white;
  display: grid;
  grid-template-columns: 1fr;
  border-radius: 20px;
  overflow: hidden;
}
.allProductSingle3 .allTicket .chatContent .header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem;
  background: white;
}
.allProductSingle3 .allTicket .chatContent .header .profile {
  display: flex;
  justify-content: right;
  gap: 0.5rem;
  align-items: center;
}
.allProductSingle3 .allTicket .chatContent .header .profile .pic {
  overflow: hidden;
  border-radius: 50%;
}
.allProductSingle3 .allTicket .chatContent .header .profile .pic img {
  width: 3rem;
  height: 3rem;
  object-fit: cover;
}
.allProductSingle3 .allTicket .chatContent .header .profile .name {
  font-size: 1.2rem;
  font-weight: 300;
  color: black;
}
.allProductSingle3 .allTicket .chatContent .header .leftHeader {
  display: flex;
  justify-content: left;
  gap: 0.5rem;
}
.allProductSingle3 .allTicket .chatContent .header i {
  display: grid;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.allProductSingle3 .allTicket .chatContent .header i svg {
  width: 1.3rem;
  height: 1.3rem;
  fill: #444;
}
.allProductSingle3 .allTicket .chatContent .body {
  padding: 0.5rem;
  overflow-y: scroll;
  height: 30rem;
}
.allProductSingle3 .allTicket .chatContent .body p {
  display: none;
  font-size: 0.8rem;
  font-weight: 300;
  color: #000;
  opacity: 0.7;
}
.allProductSingle3 .allTicket .chatContent .body p .closeChats {
  padding: 0.2rem 0.4rem;
  background: red;
  color: white;
  border-radius: 5px;
  font-size: 0.7rem;
  cursor: pointer;
}
.allProductSingle3 .allTicket .chatContent .body .choice {
  display: grid;
  padding: 0.8rem;
  border: 1px solid #bbb;
  font-size: 0.9rem;
  font-weight: 300;
  color: #000;
  margin-top: 0.5rem;
  border-radius: 5px;
  cursor: pointer;
  transition: all 0.3s ease-in-out;
}
.allProductSingle3 .allTicket .chatContent .body .choice:hover {
  color: var(--green-color);
  border: 1px solid var(--green-color);
}
.allProductSingle3 .allTicket .chatContent .body .login {
  display: grid;
}
.allProductSingle3 .allTicket .chatContent .body .bodyLabel {
  display: grid;
  grid-template-columns: 1fr;
  grid-gap: 0.5rem;
  font-size: 0.9rem;
  font-weight: 300;
  color: #000;
  margin-top: 1rem;
}
.allProductSingle3 .allTicket .chatContent .body .bodyLabel input, .allProductSingle3 .allTicket .chatContent .body .bodyLabel select, .allProductSingle3 .allTicket .chatContent .body .bodyLabel textarea {
  background: var(--back1-color);
  border: 1px solid #eee;
  padding: 0.3rem 0.5rem;
  color: #000;
  border-radius: 5px;
  font-size: 0.9rem;
  font-weight: 300;
  width: 100%;
  transition: all 0.3s ease-in-out;
}
.allProductSingle3 .allTicket .chatContent .body .message11 {
  margin-top: 1rem;
  font-size: 0.9rem;
  font-weight: 300;
  color: #444;
}
.allProductSingle3 .allTicket .chatContent .body .message11 .time {
  font-size: 0.7rem;
}
.allProductSingle3 .allTicket .chatContent .body .message11 .messages {
  padding: 0.5rem;
  border-radius: 10px;
  border: 2px solid #bbb;
}
.allProductSingle3 .allTicket .chatContent .body .messages {
  background: white;
}
.allProductSingle3 .allTicket .chatContent .body .opp {
  display: grid;
  justify-content: left;
  text-align: left;
}
.allProductSingle3 .allTicket .chatContent .body .me {
  display: grid;
  justify-content: right;
  text-align: right;
}
.allProductSingle3 .allTicket .chatContent .body .me .messages {
  border: 2px solid var(--green-color);
}
.allProductSingle3 .allTicket .chatContent .body .submit {
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--green-color);
  text-align: center;
  background: transparent;
  width: 100%;
  border: 1px solid var(--green-color);
  padding: 0.5rem 1rem;
  border-radius: 5px;
  margin-top: 1rem;
  transition: all 0.3s ease-in-out;
}
.allProductSingle3 .allTicket .chatContent .body .submit:hover {
  background: var(--green-color);
  color: white;
}
.allProductSingle3 .allTicket .chatContent .body .sendImage {
  background: white;
  border-radius: 10px;
  overflow: hidden;
  display: grid;
  grid-template-columns: 1fr;
  justify-content: center;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
  margin-top: 1rem;
}
.allProductSingle3 .allTicket .chatContent .body .sendImage .dropify-wrapper {
  height: 100px;
  border: 1px solid #eee !important;
}
.allProductSingle3 .allTicket .chatContent .body .sendImage .dropify-wrapper .file-icon:before {
  opacity: 0 !important;
  position: absolute !important;
  top: 0 !important;
  visibility: hidden !important;
}
.allProductSingle3 .allTicket .chatContent .body .sendImage .dropify-wrapper .dropify-message {
  position: relative !important;
  top: auto !important;
  margin-top: 2rem;
}
.allProductSingle3 .allTicket .chatContent .body .sendImage .dropify-wrapper .dropify-message p {
  margin: 0;
  font-size: 1rem;
  color: rgba(0, 128, 0, 0.5098039216);
}
.allProductSingle3 .allTicket .chatContent .send {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-gap: 1rem;
  padding: 0.5rem;
}
.allProductSingle3 .allTicket .chatContent .send input {
  background: white;
  border: 1px solid #eee;
  padding: 0.5rem 1rem;
  color: #000;
  border-radius: 5rem;
  font-size: 1rem;
  font-weight: 300;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
  width: 100%;
  transition: all 0.3s ease-in-out;
}
.allProductSingle3 .allTicket .chatContent .send button {
  font-size: 0.9rem;
  font-weight: 300;
  color: white;
  border-radius: 5rem;
  background: var(--green-color);
  padding: 0 1rem;
}
.allProductSingle3 .allTicket .chatContent .loginChat {
  background: red;
  border-top: 1px solid #eee;
  padding: 0.5rem;
  text-align: center;
  font-size: 0.8rem;
  font-weight: 300;
  color: white;
  display: grid;
  width: 100%;
}
.allProductSingle3 .allTicket .chatContent .typeLogin1 {
  margin-top: 1rem;
  border-radius: 5px;
}
.allProductSingle3 .allChangeList {
  background: rgba(0, 0, 0, 0.5);
  z-index: 4000;
  position: fixed;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-columns: 1fr;
  justify-content: center;
  backdrop-filter: blur(10px);
}
.allProductSingle3 .allChangeList .changeList {
  width: 40%;
  margin: auto;
  background: white;
  display: grid;
  grid-template-columns: 1fr;
  border-radius: 20px;
  overflow: hidden;
  padding: 2rem;
}
.allProductSingle3 .allChangeList .changeList .title2 {
  text-align: center;
  font-size: 1.2rem;
  font-weight: 700;
  color: black;
  margin-bottom: 1rem;
}
.allProductSingle3 .allBenefit {
  background: rgba(0, 0, 0, 0.5);
  z-index: 4000;
  position: fixed;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-columns: 1fr;
  justify-content: center;
  backdrop-filter: blur(10px);
}
.allProductSingle3 .allBenefit .showB {
  width: 30%;
  margin: auto;
  background: white;
  display: grid;
  grid-template-columns: 1fr;
  border-radius: 20px;
  overflow: hidden;
}
.allProductSingle3 .allBenefit .showB .title2 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  text-align: center;
  font-size: 1.2rem;
  font-weight: 700;
  color: black;
  padding: 1rem;
  border-bottom: 2px solid rgb(238, 238, 241);
}
.allProductSingle3 .allBenefit .showB .title2 i {
  display: grid;
  align-items: center;
}
.allProductSingle3 .allBenefit .showB .title2 i svg {
  width: 1.5rem;
  height: 1.5rem;
  fill: #000;
}
.allProductSingle3 .allBenefit .showB .items {
  padding: 1rem;
  padding-top: 0;
}
.allProductSingle3 .allBenefit .showB .items .item {
  margin-top: 1rem;
  padding: 0.5rem;
  border-radius: 10px;
  border: 1px solid rgb(238, 238, 241);
  cursor: pointer;
  display: grid;
}
.allProductSingle3 .allBenefit .showB .items .item .name {
  font-size: 0.9rem;
  font-weight: 700;
  color: #444;
  margin-bottom: 0.5rem;
}
.allProductSingle3 .allBenefit .showB .items .item .body {
  font-size: 0.8rem;
  font-weight: 300;
  color: #000;
  opacity: 0.5;
}
.allProductSingle3 .allBulk {
  background: rgba(0, 0, 0, 0.5);
  z-index: 4000;
  position: fixed;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-columns: 1fr;
  justify-content: center;
  backdrop-filter: blur(10px);
}
.allProductSingle3 .allBulk .showB {
  width: 30%;
  margin: auto;
  background: white;
  display: grid;
  grid-template-columns: 1fr;
  border-radius: 20px;
  overflow: hidden;
}
.allProductSingle3 .allBulk .showB .title2 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  text-align: center;
  font-size: 1.2rem;
  font-weight: 700;
  color: black;
  padding: 1rem;
  border-bottom: 2px solid rgb(238, 238, 241);
}
.allProductSingle3 .allBulk .showB .title2 i {
  display: grid;
  align-items: center;
  cursor: pointer;
}
.allProductSingle3 .allBulk .showB .title2 i svg {
  width: 1.5rem;
  height: 1.5rem;
  fill: #000;
}
.allProductSingle3 .allBulk .showB table {
  border-radius: 20px;
  width: 100%;
  border-collapse: collapse;
}
.allProductSingle3 .allBulk .showB table tr {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  align-items: center;
  grid-gap: 0.5rem;
  padding: 0.5rem 1rem;
  border-bottom: 1px solid #eee;
}
.allProductSingle3 .allBulk .showB table tr th {
  font-weight: 700;
  color: #000;
  font-size: 0.9rem;
  text-align: right;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
.allProductSingle3 .allBulk .showB table tr td {
  font-weight: 700;
  font-size: 0.9rem;
  text-align: right;
  color: #000;
}
.allProductSingle3 .allBulk .showB table tr:first-child {
  background: #F6F8FB;
}
.allProductSingle3 .allGuide {
  background: rgba(0, 0, 0, 0.5);
  z-index: 4000;
  position: fixed;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-columns: 1fr;
  justify-content: center;
  backdrop-filter: blur(10px);
}
.allProductSingle3 .allGuide .showB {
  width: 60%;
  margin: auto;
  background: white;
  display: grid;
  grid-template-columns: 1fr;
  border-radius: 20px;
  overflow: hidden;
}
.allProductSingle3 .allGuide .showB .title2 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  text-align: center;
  font-size: 1.2rem;
  font-weight: 700;
  color: black;
  padding: 1rem;
  border-bottom: 2px solid rgb(238, 238, 241);
}
.allProductSingle3 .allGuide .showB .title2 i {
  display: grid;
  align-items: center;
  cursor: pointer;
}
.allProductSingle3 .allGuide .showB .title2 i svg {
  width: 1.5rem;
  height: 1.5rem;
  fill: #000;
}
.allProductSingle3 .allGuide .showB table {
  border-radius: 20px;
  width: 100%;
  border-collapse: collapse;
}
.allProductSingle3 .allGuide .showB table tr {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  align-items: center;
  grid-gap: 0.5rem;
  padding: 0.5rem 1rem;
  border-bottom: 1px solid #eee;
}
.allProductSingle3 .allGuide .showB table tr th {
  font-weight: 700;
  color: #000;
  font-size: 0.9rem;
  text-align: right;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
.allProductSingle3 .allGuide .showB table tr td {
  font-weight: 700;
  font-size: 0.9rem;
  text-align: right;
  color: #000;
}
.allProductSingle3 .allGuide .showB table tr:first-child {
  background: #F6F8FB;
}
.allProductSingle3 .allGuide .showB .c4 tr {
  grid-template-columns: repeat(4, 1fr);
}
.allProductSingle3 #copy-btn {
  display: none;
}
@media screen and (max-width: 700px) {
  .allProductSingle3 {
    width: 100% !important;
    margin-top: 0;
  }
  .allProductSingle3 .address {
    overflow-x: scroll;
    padding: 0.5rem 0;
    margin-bottom: 0;
    margin-right: 0.3rem;
    border-radius: 0;
  }
  .allProductSingle3 .address i {
    display: none;
  }
  .allProductSingle3 .address a {
    overflow: unset;
    white-space: nowrap;
  }
  .allProductSingle3 .adminButtons {
    grid-template-columns: 1fr;
    padding: 0.5rem;
  }
  .allProductSingle3 .showEditBtn {
    bottom: 6rem;
    left: 0.5rem;
    font-size: 0.8rem;
  }
  .allProductSingle3 .containers {
    display: block;
  }
  .allProductSingle3 .containers .gallery .pics {
    border-radius: 0;
    padding: 0.5rem;
  }
  .allProductSingle3 .containers .gallery .pics .pic {
    display: none;
  }
  .allProductSingle3 .containers .gallery .pics .images {
    margin-top: 1rem;
  }
  .allProductSingle3 .containers .gallery .pics .images .slider-image {
    min-width: 0;
    display: grid;
  }
  .allProductSingle3 .containers .gallery .pics .images .slider-image .item {
    padding: 0;
    border: 0;
    border-radius: 0;
  }
  .allProductSingle3 .containers .gallery .pics .images .slider-image .item img {
    height: calc(100dvh - 16rem);
    object-fit: contain;
  }
  .allProductSingle3 .containers .gallery .pics .images .slider-image .active2 {
    border: 0;
  }
  .allProductSingle3 .containers .gallery .options {
    display: none;
  }
  .allProductSingle3 .containers .left .title2 {
    border-radius: 0;
    padding: 0.5rem;
    border: 0;
  }
  .allProductSingle3 .containers .left .title2 h1 {
    font-size: 1.1rem;
  }
  .allProductSingle3 .containers .left .details {
    display: block;
    margin-top: 0;
  }
  .allProductSingle3 .containers .left .details .choice {
    margin: 1rem 0.5rem;
  }
  .allProductSingle3 .containers .left .details .abilities {
    margin: 0 0.5rem;
    padding: 0.5rem;
    border-radius: 10px;
  }
  .allProductSingle3 .containers .left .details .abilities .name2 {
    font-size: 1rem;
    margin-bottom: 0.5rem;
  }
  .allProductSingle3 .containers .left .details .abilities ul {
    grid-template-columns: 1fr;
    grid-gap: 0.5rem;
  }
  .allProductSingle3 .containers .left .details .abilities ul li {
    display: flex;
    align-items: center;
    gap: 5px;
  }
  .allProductSingle3 .containers .left .details .add, .allProductSingle3 .containers .left .details .prices, .allProductSingle3 .containers .left .details .carrier {
    display: none;
  }
  .allProductSingle3 .containers .left .details .sellers {
    margin: 1rem 0.5rem;
  }
  .allProductSingle3 .containers .left .details .sellers .options {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
  }
  .allProductSingle3 .containers .left .details .sellers .options .option {
    width: 100%;
    padding: 0.5rem 0.2rem;
  }
  .allProductSingle3 .containers .left .details .sellers .options .option .tooltip {
    font-size: 0.6rem;
    letter-spacing: 0;
    margin-top: 0.5rem;
  }
  .allProductSingle3 .containers .left .details .sellers .options .option i svg {
    width: 1.1rem;
    height: 1.1rem;
  }
  .allProductSingle3 .containers .left .details .info1 {
    font-size: 0.8rem;
    margin: 0 0.5rem;
  }
  .allProductSingle3 .containers .left .details .info1 i svg {
    width: 0.8rem;
    height: 0.8rem;
  }
  .allProductSingle3 .containerD {
    margin-top: 1rem;
    display: block;
  }
  .allProductSingle3 .containerD .right .tabs {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    margin-bottom: 0;
    justify-content: center;
    border: 0;
    border-radius: 0;
  }
  .allProductSingle3 .containerD .right .tabs .tab {
    font-size: 0.9rem;
    padding: 0.5rem;
    justify-content: center;
  }
  .allProductSingle3 .containerD .right .tabs .tab i svg {
    width: 1rem;
    height: 1rem;
  }
  .allProductSingle3 .containerD .right .data1 {
    border-radius: 0;
    border: 0;
  }
  .allProductSingle3 .containerD .right .data1 .des {
    padding: 0.5rem;
  }
  .allProductSingle3 .containerD .right .data1 .des .title1 {
    font-size: 1rem;
  }
  .allProductSingle3 .containerD .right .data1 .des .title1 i svg {
    width: 1rem;
    height: 1rem;
  }
  .allProductSingle3 .containerD .right .data1 .des .body p {
    font-size: 0.8rem;
    margin-top: 0.5rem;
  }
  .allProductSingle3 .containerD .right .data1 .des .body .image {
    margin: 0.5rem 0;
  }
  .allProductSingle3 .containerD .right .data1 .des .body img {
    height: auto !important;
    margin: 10px 0 !important;
  }
  .allProductSingle3 .containerD .right .data1 .des .body ul, .allProductSingle3 .containerD .right .data1 .des .body ol {
    margin: 0.5rem;
  }
  .allProductSingle3 .containerD .right .data1 .des .body ul li, .allProductSingle3 .containerD .right .data1 .des .body ol li {
    font-size: 0.8rem;
  }
  .allProductSingle3 .containerD .right .data1 .des .body ul ul, .allProductSingle3 .containerD .right .data1 .des .body ol ul {
    margin-top: 0.5rem;
    margin-right: 0.5rem;
  }
  .allProductSingle3 .containerD .right .data1 .des .body h2, .allProductSingle3 .containerD .right .data1 .des .body h3, .allProductSingle3 .containerD .right .data1 .des .body h4 {
    margin-bottom: 0.5rem;
  }
  .allProductSingle3 .containerD .right .data1 .des .body h2 {
    font-size: 1rem;
  }
  .allProductSingle3 .containerD .right .data1 .des .body h3 {
    font-size: 0.9rem;
  }
  .allProductSingle3 .containerD .right .data1 .des .body h4 {
    font-size: 0.8rem;
  }
  .allProductSingle3 .containerD .right .data1 .ability1 {
    padding: 0.5rem;
  }
  .allProductSingle3 .containerD .right .data1 .ability1 .title1 {
    font-size: 1rem;
  }
  .allProductSingle3 .containerD .right .data1 .ability1 .title1 i svg {
    width: 1rem;
    height: 1rem;
  }
  .allProductSingle3 .containerD .right .data1 .ability1 .items .item {
    margin-top: 0.5rem;
    grid-template-columns: 1fr 2fr;
  }
  .allProductSingle3 .containerD .right .data1 .ability1 .items .item .name1 {
    font-size: 0.7rem;
    padding: 0.5rem;
  }
  .allProductSingle3 .containerD .right .data1 .ability1 .items .item .body1 {
    font-size: 0.7rem;
    padding: 0.5rem;
  }
  .allProductSingle3 .containerD .right .data1 .comments1 .topC1 {
    padding: 0.5rem;
  }
  .allProductSingle3 .containerD .right .data1 .comments1 .topC1 .title2 {
    font-size: 1rem;
  }
  .allProductSingle3 .containerD .right .data1 .comments1 .topC1 .para1 {
    font-size: 0.8rem;
    font-weight: 300;
    color: #444;
  }
  .allProductSingle3 .containerD .boxP {
    display: none;
  }
  .allProductSingle3 .related {
    margin-top: 1rem;
  }
  .allProductSingle3 .related .title {
    display: flex;
    justify-content: space-between;
    gap: 0.5rem;
  }
  .allProductSingle3 .related .title .name {
    font-size: 1rem;
  }
  .allProductSingle3 .related .title .bar {
    display: none;
  }
  .allProductSingle3 .related .title a {
    font-size: 0.6rem;
    width: 8rem;
  }
  .allProductSingle3 .related .title a i {
    padding: 0.5rem;
  }
  .allProductSingle3 .related .slider-related {
    position: relative;
  }
  .allProductSingle3 .related .slider-related .item {
    border-radius: 10px;
    padding: 0.5rem;
  }
  .allProductSingle3 .related .slider-related .item .pic img {
    height: 8rem;
  }
  .allProductSingle3 .related .slider-related .item .title1 {
    font-size: 0.8rem;
    margin-top: 0.5rem;
    height: 2.4rem;
  }
  .allProductSingle3 .related .slider-related .item .prices {
    gap: 0.5rem;
  }
  .allProductSingle3 .related .slider-related .item .prices .off {
    padding: 0.2rem 0.5rem;
    font-size: 0.7rem;
  }
  .allProductSingle3 .related .slider-related .item .prices .price1 .price .val {
    font-size: 0.7rem;
  }
  .allProductSingle3 .related .slider-related .item .prices .price1 .price .val span {
    font-size: 0.9rem;
  }
  .allProductSingle3 .related .slider-related .item .prices .price1 .price s {
    font-size: 0.65rem;
  }
  .allProductSingle3 .related .slider-related .item .prices .price1 .currency {
    font-size: 0.8rem;
  }
  .allProductSingle3 .related .slider-related .item:before {
    border-radius: 10px;
  }
  .allProductSingle3 .related .slider-related .item:hover:before {
    height: 11.5rem;
  }
  .allProductSingle3 .related .slider-related .owl-nav {
    display: flex;
    position: unset;
  }
  .allProductSingle3 .related .slider-related .owl-nav .owl-prev, .allProductSingle3 .related .slider-related .owl-nav .owl-next {
    width: 2.3rem;
    height: 2.3rem;
    position: absolute;
    top: 40%;
  }
  .allProductSingle3 .related .slider-related .owl-nav .owl-prev:hover, .allProductSingle3 .related .slider-related .owl-nav .owl-next:hover {
    background: var(--green-color);
  }
  .allProductSingle3 .related .slider-related .owl-nav .owl-prev:hover span, .allProductSingle3 .related .slider-related .owl-nav .owl-next:hover span {
    color: white;
  }
  .allProductSingle3 .related .slider-related .owl-nav .owl-next {
    left: 0;
  }
  .allProductSingle3 .addFloat {
    display: block;
  }
  .allProductSingle3 .sellerInfo .data {
    width: 98%;
    border-radius: 10px;
  }
  .allProductSingle3 .sellerInfo .data .title {
    padding: 0.5rem;
  }
  .allProductSingle3 .sellerInfo .data .title .name {
    font-size: 1rem;
  }
  .allProductSingle3 .sellerInfo .data .title .location {
    font-size: 0.8rem;
  }
  .allProductSingle3 .sellerInfo .data .title .location i svg {
    width: 0.9rem;
    height: 0.9rem;
  }
  .allProductSingle3 .sellerInfo .data .profile {
    margin: 0.5rem 0;
    padding: 0 0.5rem;
  }
  .allProductSingle3 .sellerInfo .data .profile .pic img {
    height: 4rem;
  }
  .allProductSingle3 .sellerInfo .data .profile .name {
    font-size: 1rem;
  }
  .allProductSingle3 .sellerInfo .data .profile p {
    font-size: 0.8rem;
  }
  .allProductSingle3 .sellerInfo .data .options {
    display: grid;
    grid-gap: 0.5rem;
    padding: 0 0.5rem;
  }
  .allProductSingle3 .sellerInfo .data .options .option {
    padding: 0.5rem;
  }
  .allProductSingle3 .sellerInfo .data .options .option .body2 {
    font-size: 0.9rem;
  }
  .allProductSingle3 .sellerInfo .data .options .option .title2 {
    font-size: 0.8rem;
  }
  .allProductSingle3 .sellerInfo .data label {
    margin: 0.5rem;
  }
  .allProductSingle3 .sellerInfo .data label input {
    font-size: 0.85rem;
    padding: 0.5rem 0.8rem;
  }
  .allProductSingle3 .sellerInfo .data label i {
    width: 2.5rem;
    height: 2.5rem;
  }
  .allProductSingle3 .sellerInfo .data label i svg {
    width: 1rem;
    height: 1rem;
  }
  .allProductSingle3 .sellerInfo .data .time {
    font-size: 0.9rem;
    margin-right: 0.5rem;
  }
  .allProductSingle3 .sellerInfo .data .buttons {
    grid-gap: 0.5rem;
    padding: 0.5rem;
  }
  .allProductSingle3 .sellerInfo .data .buttons a {
    padding: 0.5rem;
    font-size: 0.8rem;
  }
  .allProductSingle3 .allTicket .chatContent {
    width: 100%;
    border-radius: 0;
  }
  .allProductSingle3 .allTicket .chatContent .header .profile .pic img {
    width: 2rem;
    height: 2rem;
  }
  .allProductSingle3 .allTicket .chatContent .header .profile .name {
    font-size: 0.8rem;
  }
  .allProductSingle3 .allTicket .chatContent .header i svg {
    width: 1.1rem;
    height: 1.1rem;
  }
  .allProductSingle3 .allTicket .chatContent .body {
    height: calc(100vh - 6.4rem);
  }
  .allProductSingle3 .allTicket .chatContent .body p {
    font-size: 0.7rem;
  }
  .allProductSingle3 .allTicket .chatContent .body p .closeChats {
    padding: 0.2rem;
  }
  .allProductSingle3 .allTicket .chatContent .body .choice {
    padding: 0.5rem;
    font-size: 0.7rem;
  }
  .allProductSingle3 .allTicket .chatContent .body .bodyLabel {
    font-size: 0.7rem;
    margin-top: 0.5rem;
  }
  .allProductSingle3 .allTicket .chatContent .body .bodyLabel input, .allProductSingle3 .allTicket .chatContent .body .bodyLabel select, .allProductSingle3 .allTicket .chatContent .body .bodyLabel textarea {
    padding: 0.3rem;
    font-size: 0.7rem;
  }
  .allProductSingle3 .allTicket .chatContent .body .message11 {
    margin-top: 1rem;
    font-size: 0.8rem;
  }
  .allProductSingle3 .allTicket .chatContent .body .message11 .time {
    font-size: 0.6rem;
  }
  .allProductSingle3 .allTicket .chatContent .body .message11 .messages {
    padding: 0.3rem;
  }
  .allProductSingle3 .allTicket .chatContent .body .submit {
    font-size: 0.8rem;
    padding: 0.3rem 0.5rem;
    margin-top: 0.5rem;
  }
  .allProductSingle3 .allTicket .chatContent .body .sendImage {
    margin-top: 0.5rem;
  }
  .allProductSingle3 .allTicket .chatContent .send {
    grid-gap: 0.5rem;
    padding: 0.5rem;
  }
  .allProductSingle3 .allTicket .chatContent .send input {
    padding: 0.5rem;
    font-size: 0.85rem;
  }
  .allProductSingle3 .allTicket .chatContent .send button {
    font-size: 0.7rem;
    padding: 0 1rem;
  }
  .allProductSingle3 .allTicket .chatContent .loginChat {
    font-size: 1rem;
    height: 3.5rem;
    align-items: center;
  }
  .allProductSingle3 .allTicket .chatContent .typeLogin1 {
    margin-top: 0.5rem;
  }
  .allProductSingle3 .allChangeList .changeList {
    width: 100%;
    padding: 0.5rem;
  }
  .allProductSingle3 .allChangeList .changeList .title2 {
    font-size: 0.9rem;
    margin-bottom: 0.5rem;
  }
  .allProductSingle3 .allBenefit .showB {
    width: 100%;
    border-radius: 0;
    height: 100vh;
    display: block;
  }
  .allProductSingle3 .allBenefit .showB .title2 {
    font-size: 0.9rem;
    padding: 0.5rem;
  }
  .allProductSingle3 .allBenefit .showB .title2 i svg {
    width: 1rem;
    height: 1rem;
  }
  .allProductSingle3 .allBenefit .showB .items {
    padding: 0.5rem;
    padding-top: 0;
  }
  .allProductSingle3 .allGuide .showB {
    width: 100%;
    border-radius: 0;
    height: 100vh;
    display: block;
  }
  .allProductSingle3 .allGuide .showB .title2 {
    font-size: 0.9rem;
    padding: 0.5rem;
  }
  .allProductSingle3 .allGuide .showB .title2 i svg {
    width: 1rem;
    height: 1rem;
  }
  .allProductSingle3 .allGuide .showB .table {
    overflow-x: scroll;
  }
  .allProductSingle3 .allGuide .showB table {
    border-radius: 10px;
  }
  .allProductSingle3 .allGuide .showB table tr {
    padding: 0.5rem;
    grid-template-columns: repeat(5, 7rem);
  }
  .allProductSingle3 .allGuide .showB table tr th {
    font-size: 0.7rem;
  }
  .allProductSingle3 .allGuide .showB table tr td {
    font-size: 0.7rem;
  }
  .allProductSingle3 .allGuide .showB .c4 tr {
    grid-template-columns: repeat(4, 7rem);
  }
  .allProductSingle3 .allBulk .showB {
    width: 100%;
    border-radius: 0;
  }
  .allProductSingle3 .allBulk .showB .title2 {
    font-size: 0.9rem;
    padding: 0.5rem;
  }
  .allProductSingle3 .allBulk .showB .title2 i svg {
    width: 1rem;
    height: 1rem;
  }
  .allProductSingle3 .allBulk .showB table {
    border-radius: 10px;
  }
  .allProductSingle3 .allBulk .showB table tr {
    padding: 0.5rem;
  }
  .allProductSingle3 .allBulk .showB table tr th {
    font-size: 0.8rem;
  }
  .allProductSingle3 .allBulk .showB table tr td {
    font-size: 0.8rem;
  }
}

.allProductSingle4 {
  margin: auto;
  margin-top: 1rem;
}
.allProductSingle4 .address {
  display: flex;
  justify-content: right;
  align-items: center;
  position: relative;
  margin-bottom: 1rem;
  border-radius: 15px;
}
.allProductSingle4 .address a {
  font-size: 0.85rem;
  font-weight: 500;
  color: #444;
  opacity: 0.7;
  white-space: pre-line;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  box-orient: vertical;
  -webkit-box-orient: vertical;
  line-clamp: 1;
  -webkit-line-clamp: 1;
  overflow: hidden;
  text-overflow: ellipsis;
}
.allProductSingle4 .address a:after {
  content: "/";
  padding: 0 0.4rem;
}
.allProductSingle4 .address a:last-child:after {
  content: "";
  padding: 0;
}
.allProductSingle4 .adminButtons {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 1rem;
  margin-bottom: 1rem;
}
.allProductSingle4 .adminButtons .sendDashboard {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.7rem;
  border-radius: 10px;
  background: #f3c8ff;
  color: purple;
  font-size: 0.9rem;
  font-weight: 700;
  box-shadow: 0 5px 5px rgba(0, 0, 0, 0.08);
}
.allProductSingle4 .adminButtons .sendDashboard i {
  display: grid;
  align-items: center;
}
.allProductSingle4 .adminButtons .sendDashboard i svg {
  width: 1.2rem;
  height: 1.2rem;
  color: purple;
}
.allProductSingle4 .adminButtons .sendDashboard:nth-child(2) {
  background: #c8d8ff;
  color: #002480;
}
.allProductSingle4 .adminButtons .sendDashboard:nth-child(2) i svg {
  color: #002480;
}
.allProductSingle4 .adminButtons .sendDashboard:nth-child(3) {
  background: #c8ffcf;
  color: #008002;
}
.allProductSingle4 .adminButtons .sendDashboard:nth-child(3) i svg {
  color: #008002;
}
.allProductSingle4 .containers {
  display: grid;
  grid-template-columns: 2.5fr 1fr;
  grid-gap: 1rem;
}
.allProductSingle4 .containers .txtE {
  margin-bottom: 1rem;
  position: relative;
  width: 100%;
}
.allProductSingle4 .containers .txtE textarea {
  font-size: 0.9rem;
  font-weight: 300;
  color: #000;
  border: 1px solid #eee;
  width: 100%;
  height: 3rem;
  border-radius: 10px;
  padding: 1rem;
  resize: vertical;
}
.allProductSingle4 .containers .txtE:before {
  content: attr(data-tooltip);
  position: absolute;
  top: -0.5rem;
  background: purple;
  color: white;
  padding: 1px 5px;
  font-size: 0.7rem;
  border-radius: 5px;
  font-weight: 500;
}
.allProductSingle4 .containers .right11 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 1rem;
  background: white;
  border-radius: 15px;
  padding: 1rem;
  border: 1px solid #eee;
}
.allProductSingle4 .containers .right11 .data .title2 h1 {
  font-size: 1.2rem;
  font-weight: 900;
  color: #000;
}
.allProductSingle4 .containers .right11 .data .title2 .titleEn {
  font-size: 0.9rem;
  font-weight: 500;
  color: #444;
  opacity: 0.8;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  text-overflow: ellipsis;
  resize: vertical;
  margin-bottom: 5px;
}
.allProductSingle4 .containers .right11 .data .title2 .op1 {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-gap: 1rem;
  border-bottom: 1px solid #eee;
  padding-bottom: 1rem;
}
.allProductSingle4 .containers .right11 .data .title2 .op1 .right {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.allProductSingle4 .containers .right11 .data .title2 .op1 .right .option {
  font-size: 0.75rem;
  font-weight: 500;
  padding: 0.3rem 0.8rem;
  border-radius: 5rem;
  background: rgba(0, 119, 255, 0.15);
  color: #008cff;
  border: 1px solid #008cff;
}
.allProductSingle4 .containers .right11 .data .title2 .op1 .right .option:first-child {
  background: rgba(17, 255, 0, 0.2);
  color: green;
  border: 1px solid green;
}
.allProductSingle4 .containers .right11 .data .title2 .op1 .left .guideS {
  color: blue;
  font-weight: 700;
  font-size: 0.8rem;
  cursor: pointer;
}
.allProductSingle4 .containers .right11 .data .abilities {
  margin-top: 1rem;
  position: relative;
}
.allProductSingle4 .containers .right11 .data .abilities .name2 {
  font-size: 1rem;
  font-weight: 700;
  color: #000;
  position: relative;
}
.allProductSingle4 .containers .right11 .data .abilities ul {
  margin-top: 0.5rem;
  border: 1px solid #eee;
  border-radius: 10px;
}
.allProductSingle4 .containers .right11 .data .abilities ul li {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  border-bottom: 1px dashed #ddd;
  padding: 0.8rem;
}
.allProductSingle4 .containers .right11 .data .abilities ul li .name1, .allProductSingle4 .containers .right11 .data .abilities ul li .body1 {
  font-weight: 500;
  font-size: 0.85rem;
  color: rgb(56, 80, 134);
}
.allProductSingle4 .containers .right11 .data .abilities ul li .body1 {
  font-size: 0.9rem;
  font-weight: 700;
  color: #000;
  opacity: 1;
}
.allProductSingle4 .containers .right11 .data .abilities ul li:last-child {
  border-bottom: 0;
}
.allProductSingle4 .containers .right11 .data .abilities .more {
  display: grid;
  justify-content: left;
}
.allProductSingle4 .containers .right11 .data .abilities .more span {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.8rem;
  font-weight: 500;
  border-radius: 10px;
  border: 1px solid #eee;
  background: #f7f7f7;
  color: #444;
  padding: 0.2rem 0.6rem;
  margin-top: -1rem;
  margin-left: 1rem;
}
.allProductSingle4 .containers .right11 .data .abilities .more span i {
  display: grid;
  align-items: center;
}
.allProductSingle4 .containers .right11 .data .abilities .more span i svg {
  width: 1rem;
  height: 1rem;
  fill: #444;
}
.allProductSingle4 .containers .right11 .data .info1 {
  margin-top: 1rem;
  padding: 1rem;
  border-radius: 10px;
  border: 1px solid #eee;
  font-size: 0.8rem;
  font-weight: 300;
  color: #444;
}
.allProductSingle4 .containers .right11 .data .info1 .title2 {
  display: flex;
  align-items: center;
  font-size: 1rem;
  font-weight: 700;
  color: #000;
  margin-bottom: 5px;
  gap: 0.5rem;
}
.allProductSingle4 .containers .right11 .data .info1 .title2 i {
  display: grid;
  align-items: center;
}
.allProductSingle4 .containers .right11 .data .info1 .title2 i svg {
  width: 1.2rem;
  height: 1.2rem;
  fill: #444;
}
.allProductSingle4 .containers .right11 .data .box {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  justify-content: right;
  font-size: 0.7rem;
  font-weight: 300;
  color: #444;
  margin-top: 1rem;
}
.allProductSingle4 .containers .right11 .data .box i {
  display: grid;
  align-items: center;
  opacity: 0.7;
}
.allProductSingle4 .containers .right11 .data .box i svg {
  width: 0.9rem;
  height: 0.9rem;
  fill: #444;
}
.allProductSingle4 .containers .right11 .gallery {
  position: relative;
}
.allProductSingle4 .containers .right11 .gallery .options {
  position: absolute;
  right: 0;
  left: 0;
  display: flex;
  justify-content: center;
  gap: 1rem;
  top: 0;
  z-index: 10;
}
.allProductSingle4 .containers .right11 .gallery .options .option {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.8rem;
  border-radius: 15px;
  border: 1px solid #eee;
  background: white;
  font-size: 0.9rem;
  font-weight: 700;
  color: #000;
  cursor: pointer;
  margin-bottom: 0.5rem;
}
.allProductSingle4 .containers .right11 .gallery .options .option i {
  display: grid;
  align-items: center;
}
.allProductSingle4 .containers .right11 .gallery .options .option i svg {
  width: 1.3rem;
  height: 1.3rem;
  color: #000;
}
.allProductSingle4 .containers .right11 .gallery .pics .pic {
  position: relative;
  display: grid;
  overflow: hidden;
  justify-content: center;
}
.allProductSingle4 .containers .right11 .gallery .pics .pic img {
  height: 30rem;
  object-fit: contain;
}
.allProductSingle4 .containers .right11 .gallery .pics .images {
  margin-top: 1rem;
}
.allProductSingle4 .containers .right11 .gallery .pics .images .slider-image {
  display: grid;
}
.allProductSingle4 .containers .right11 .gallery .pics .images .slider-image .item {
  padding: 0.5rem;
  border: 1px solid #eee;
  border-radius: 15px;
  cursor: pointer;
}
.allProductSingle4 .containers .right11 .gallery .pics .images .slider-image .item img {
  height: 5rem;
  object-fit: contain;
}
.allProductSingle4 .containers .right11 .gallery .pics .images .slider-image .active2 {
  border: 1px solid var(--green-color);
}
.allProductSingle4 .containers .right11 .gallery .pics .images .slider-image .owl-next, .allProductSingle4 .containers .right11 .gallery .pics .images .slider-image .owl-prev {
  padding: 0.5rem;
  background: white !important;
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto;
  right: 0.5rem;
  width: 2.5rem;
  border: 2px solid black !important;
  font-size: 1.5rem !important;
  border-radius: 50%;
  color: black !important;
  height: 2.5rem;
  transition: all 0.3s ease-in-out;
}
.allProductSingle4 .containers .right11 .gallery .pics .images .slider-image .owl-next:hover, .allProductSingle4 .containers .right11 .gallery .pics .images .slider-image .owl-prev:hover {
  background: black !important;
  color: white !important;
}
.allProductSingle4 .containers .right11 .gallery .pics .images .slider-image .owl-next {
  left: 0.5rem;
  right: auto;
}
.allProductSingle4 .containers .left .lottery {
  background: white;
  box-shadow: 0px 4px 24px 0px rgba(0, 0, 0, 0.1);
  border-radius: 15px;
  padding: 1rem;
  margin-bottom: 1rem;
}
.allProductSingle4 .containers .left .lottery .title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
}
.allProductSingle4 .containers .left .lottery .title .title1 {
  font-size: 0.85rem;
  font-weight: 500;
  color: #000;
}
.allProductSingle4 .containers .left .lottery .title .name {
  font-size: 0.8rem;
  font-weight: 700;
  color: red;
}
.allProductSingle4 .containers .left .lottery .bars {
  height: 10px;
  width: 100%;
  background: #f7f7f7;
  border-radius: 5rem;
  direction: ltr;
}
.allProductSingle4 .containers .left .lottery .bars .bar1 {
  height: 100%;
  background: red;
  border-radius: 5rem;
  position: relative;
}
.allProductSingle4 .containers .left .lottery .bars .bar1 div {
  width: 0;
  height: 100%;
  background: white;
  opacity: 0.5;
  box-shadow: 0 0 5px rgba(255, 0, 0, 0.3);
  border-radius: 5rem;
  transition: all 0.3s ease-in-out;
  animation: arrow-anim5 1s ease infinite;
}
@keyframes arrow-anim5 {
  0% {
    width: 0%;
  }
  5% {
    width: 5%;
  }
  10% {
    width: 10%;
  }
  15% {
    width: 15%;
  }
  20% {
    width: 20%;
  }
  25% {
    width: 25%;
  }
  30% {
    width: 30%;
  }
  35% {
    width: 35%;
  }
  40% {
    width: 40%;
  }
  45% {
    width: 45%;
  }
  50% {
    width: 50%;
  }
  55% {
    width: 55%;
  }
  60% {
    width: 60%;
  }
  65% {
    width: 65%;
  }
  70% {
    width: 70%;
  }
  75% {
    width: 75%;
  }
  80% {
    width: 80%;
  }
  85% {
    width: 85%;
  }
  90% {
    width: 90%;
  }
  95% {
    width: 95%;
  }
  100% {
    width: 100%;
  }
}
.allProductSingle4 .containers .left .details {
  background: white;
  box-shadow: 0px 4px 24px 0px rgba(0, 0, 0, 0.1);
  border-radius: 15px;
  padding: 1rem;
  margin-bottom: 1rem;
  position: relative;
}
.allProductSingle4 .containers .left .details .seller {
  background: #f7f7f7;
  border-radius: 10px;
  overflow: hidden;
  margin-bottom: 1rem;
}
.allProductSingle4 .containers .left .details .seller .title1 {
  padding: 0.8rem;
  border-bottom: 2px solid white;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem;
}
.allProductSingle4 .containers .left .details .seller .title1 .name {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  font-size: 0.9rem;
  font-weight: 700;
  color: #000;
}
.allProductSingle4 .containers .left .details .seller .title1 .name i {
  display: grid;
  align-items: center;
}
.allProductSingle4 .containers .left .details .seller .title1 .name i svg {
  width: 1rem;
  height: 1rem;
  fill: #000;
}
.allProductSingle4 .containers .left .details .seller .title1 .more {
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--green-color);
  background: linear-gra;
}
.allProductSingle4 .containers .left .details .seller .op1 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-bottom: 2px solid white;
}
.allProductSingle4 .containers .left .details .seller .op1 .option {
  padding: 0.8rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
  font-size: 0.8rem;
  font-weight: 700;
  color: #444;
}
.allProductSingle4 .containers .left .details .seller .op1 .option i {
  display: grid;
  align-items: center;
}
.allProductSingle4 .containers .left .details .seller .op1 .option i svg {
  width: 1rem;
  height: 1rem;
  fill: #444;
}
.allProductSingle4 .containers .left .details .seller .op1 .option:first-child {
  border-left: 2px solid white;
}
.allProductSingle4 .containers .left .details .seller .btnChatSingle {
  padding: 0.8rem;
  display: grid;
  grid-template-columns: auto 1fr auto;
  grid-gap: 0.5rem;
  font-size: 0.8rem;
  font-weight: 700;
  color: #444;
  cursor: pointer;
}
.allProductSingle4 .containers .left .details .seller .btnChatSingle i {
  display: grid;
  align-items: center;
}
.allProductSingle4 .containers .left .details .seller .btnChatSingle i svg {
  width: 1rem;
  height: 1rem;
  fill: #444;
}
.allProductSingle4 .containers .left .details .prices {
  margin-bottom: 1rem;
}
.allProductSingle4 .containers .left .details .prices .offP {
  display: grid;
  justify-content: left;
  margin-bottom: 0.5rem;
}
.allProductSingle4 .containers .left .details .prices .offP span {
  background: #ffdbdb;
  border-radius: 5rem;
  padding: 2px 0.5rem;
  font-size: 0.8rem;
  font-weight: 700;
  color: red;
  border: 1px solid red;
}
.allProductSingle4 .containers .left .details .prices .price {
  display: flex;
  justify-content: left;
  align-items: center;
  grid-gap: 1rem;
  text-align: left;
}
.allProductSingle4 .containers .left .details .prices .price s {
  font-size: 1.2rem;
  opacity: 0.7;
  font-weight: 300;
  color: #444;
}
.allProductSingle4 .containers .left .details .prices .price bdi {
  font-size: 0.8rem;
  font-weight: 900;
  color: #000;
  line-height: 0.7rem;
}
.allProductSingle4 .containers .left .details .prices .price bdi span {
  font-size: 1.5rem;
  margin-left: 5px;
  line-height: 0.7rem;
}
.allProductSingle4 .containers .left .details .carrier {
  margin-top: 1rem;
  display: grid;
  grid-template-columns: auto 1fr;
  grid-gap: 0.5rem;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 2rem;
}
.allProductSingle4 .containers .left .details .carrier label {
  font-size: 0.9rem;
  font-weight: 500;
  color: #000;
}
.allProductSingle4 .containers .left .details .carrier select {
  font-size: 0.9rem;
  font-weight: 500;
  color: #000;
  padding: 0.5rem 1rem;
  background: transparent;
  border-radius: 10px;
  border: 1px solid #eee;
}
.allProductSingle4 .containers .left .details .add .addCarts {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-gap: 1rem;
}
.allProductSingle4 .containers .left .details .add .addCarts .addCart {
  padding: 0.5rem 0.8rem;
  font-size: 1.1rem;
  font-weight: 900;
  border-radius: 10px;
  box-shadow: 0 5px 5px rgba(0, 0, 0, 0.05);
  background: var(--green-color);
  color: white;
  text-align: center;
  transition: all 0.3s ease-in-out;
  cursor: pointer;
}
.allProductSingle4 .containers .left .details .add .addCarts .addCart:hover {
  opacity: 1;
}
.allProductSingle4 .containers .left .details .add .addCarts .counts {
  display: flex;
  align-items: center;
  border: 1px solid #eee;
  border-radius: 10px;
  box-shadow: 0 3px 1px 0 rgba(2, 25, 89, 0.07);
  height: 100%;
  padding: 6px;
}
.allProductSingle4 .containers .left .details .add .addCarts .counts input {
  width: 2rem;
  height: 2rem;
  background: transparent;
  text-align: center;
  font-size: 1rem;
  font-weight: 700;
  color: #000;
}
.allProductSingle4 .containers .left .details .add .addCarts .counts i {
  display: grid;
  justify-content: center;
  align-items: center;
  width: 2rem;
  height: 2rem;
  cursor: pointer;
  background: var(--green-color);
  opacity: 0.7;
  border-radius: 8px;
}
.allProductSingle4 .containers .left .details .add .addCarts .counts i svg {
  width: 0.8rem;
  height: 0.8rem;
  fill: white;
}
.allProductSingle4 .containers .left .details .empty {
  display: grid;
  padding: 0.5rem 0.8rem;
  font-size: 1.1rem;
  font-weight: 900;
  border-radius: 10px;
  box-shadow: 0 5px 5px rgba(0, 0, 0, 0.05);
  background: red;
  color: white;
  text-align: center;
  transition: all 0.3s ease-in-out;
  cursor: pointer;
}
.allProductSingle4 .containers .left .details .empty:hover {
  opacity: 1;
}
.allProductSingle4 .containers .left .details .contact {
  background: var(--green-color);
}
.allProductSingle4 .containers .left .details .choice {
  margin-bottom: 1rem;
  display: grid;
  grid-template-columns: auto 1fr;
  border: 1px solid #eee;
  border-radius: 10px;
  align-items: center;
  padding: 0.7rem;
}
.allProductSingle4 .containers .left .details .choice label {
  font-size: 1rem;
  font-weight: 500;
  color: #000;
  height: 100%;
  display: grid;
  align-items: center;
}
.allProductSingle4 .containers .left .details .choice select {
  font-size: 1rem;
  font-weight: 500;
  color: #000;
  background: transparent;
}
.allProductSingle4 .containers .left .boxB {
  background: white;
  box-shadow: 0 4px 24px 0 rgba(0, 0, 0, 0.1);
  border-radius: 15px;
  overflow: hidden;
  padding: 1rem;
  margin-bottom: 1rem;
  display: grid;
  grid-template-columns: 1fr auto;
  grid-gap: 1rem;
  font-size: 0.9rem;
  font-weight: 500;
  color: #000;
  cursor: pointer;
}
.allProductSingle4 .containers .left .boxB i {
  display: grid;
  align-items: center;
}
.allProductSingle4 .containers .left .boxB i svg {
  width: 1rem;
  height: 1rem;
  fill: #000;
}
.allProductSingle4 .addFloat {
  position: fixed;
  bottom: 0;
  right: 0;
  left: 0;
  z-index: 100;
  background: white;
  box-shadow: 0 -10px 10px rgba(0, 0, 0, 0.1);
  padding: 0.5rem;
  display: none;
}
.allProductSingle4 .addFloat .top {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  justify-content: space-between;
}
.allProductSingle4 .addFloat .top select {
  padding: 0.2rem 0.8rem;
  background: transparent;
  border-radius: 10px;
  font-size: 1rem;
  font-weight: 500;
  color: #000;
  border: 1px solid #eee;
}
.allProductSingle4 .addFloat .top .price {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.allProductSingle4 .addFloat .top .price .offer {
  display: flex;
  justify-content: left;
  align-items: center;
  gap: 0.5rem;
}
.allProductSingle4 .addFloat .top .price .offer s {
  font-size: 0.9rem;
  font-weight: 300;
  color: #000;
  opacity: 0.5;
}
.allProductSingle4 .addFloat .top .price .offer .off {
  background: red;
  padding: 0.1rem 0.5rem;
  border-radius: 5rem;
  font-size: 0.8rem;
  font-weight: 900;
  color: white;
}
.allProductSingle4 .addFloat .top .price .priceF {
  font-size: 0.7rem;
  font-weight: 300;
  color: #000;
}
.allProductSingle4 .addFloat .top .price .priceF span {
  font-size: 1.2rem;
  font-weight: 700;
}
.allProductSingle4 .addFloat .bot {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-gap: 0.5rem;
  margin-top: 0.5rem;
}
.allProductSingle4 .addFloat .bot .addCarts {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-gap: 0.5rem;
}
.allProductSingle4 .addFloat .bot .addCarts .addCart {
  display: grid;
  align-items: center;
  padding: 0.3rem;
  opacity: 0.7;
  font-size: 0.8rem;
  font-weight: 700;
  border-radius: 5px;
  background: var(--green-color);
  color: white;
  text-align: center;
  transition: all 0.3s ease-in-out;
  cursor: pointer;
}
.allProductSingle4 .addFloat .bot .addCarts .addCart:hover {
  opacity: 1;
}
.allProductSingle4 .addFloat .bot .addCarts .counts {
  display: flex;
  align-items: center;
  border: 2px solid #eee;
  border-radius: 5px;
  height: 100%;
}
.allProductSingle4 .addFloat .bot .addCarts .counts input {
  width: 2rem;
  padding: 0.3rem 0.2rem;
  background: transparent;
  text-align: center;
  font-size: 0.8rem;
  font-weight: 700;
  color: #000;
}
.allProductSingle4 .addFloat .bot .addCarts .counts i {
  display: grid;
  align-items: center;
  padding: 0.3rem;
  cursor: pointer;
}
.allProductSingle4 .addFloat .bot .addCarts .counts i svg {
  width: 0.7rem;
  height: 0.7rem;
  fill: #000;
}
.allProductSingle4 .addFloat .bot .empty, .allProductSingle4 .addFloat .bot .contact {
  padding: 0.6rem;
  font-size: 1rem;
  font-weight: 700;
  border-radius: 5px;
  background: grey;
  color: white;
  text-align: center;
  transition: all 0.3s ease-in-out;
  cursor: pointer;
  opacity: 1;
}
.allProductSingle4 .addFloat .bot .contact {
  background: var(--green-color);
  font-size: 0.8rem;
}
.allProductSingle4 .addFloat .bot .cartS {
  border: 1px solid var(--green-color);
  border-radius: 5px;
  position: relative;
}
.allProductSingle4 .addFloat .bot .cartS i {
  display: grid;
  align-items: center;
  justify-content: center;
  width: 2rem;
}
.allProductSingle4 .addFloat .bot .cartS i svg {
  width: 1rem;
  height: 1rem;
  fill: var(--green-color);
}
.allProductSingle4 .addFloat .bot .cartS .showCartCount {
  position: absolute;
  top: -6px;
  left: -6px;
  background: var(--green-color);
  width: 17px;
  height: 17px;
  color: white;
  font-size: 0.7rem;
  line-height: 17px;
  border-radius: 50%;
  display: grid;
  justify-content: center;
  align-items: center;
}
.allProductSingle4 .sellers {
  margin-top: 2rem;
}
.allProductSingle4 .sellers .title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 1rem;
  font-weight: 700;
  color: #000;
  padding: 1rem;
  background: white;
  border: 1px solid #eee;
  border-radius: 15px;
}
.allProductSingle4 .sellers .title i {
  display: grid;
  align-items: center;
}
.allProductSingle4 .sellers .title i svg {
  width: 1.3rem;
  height: 1.3rem;
  fill: #000;
}
.allProductSingle4 .sellers .items {
  background: white;
  border: 1px solid #eee;
  border-radius: 15px;
  margin-top: 0.5rem;
}
.allProductSingle4 .sellers .items .item {
  padding: 1rem;
  border-bottom: 1px solid #eee;
}
.allProductSingle4 .sellers .items .item .postTop {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
}
.allProductSingle4 .sellers .items .item .postTop .postTitle {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-gap: 1rem;
  align-items: center;
}
.allProductSingle4 .sellers .items .item .postTop .postTitle .image img {
  height: 2.5rem;
  object-fit: contain;
  width: 2.5rem;
  border-radius: 100%;
}
.allProductSingle4 .sellers .items .item .postTop .postTitle ul {
  display: flex;
  justify-content: right;
  flex-wrap: wrap;
  align-items: center;
  gap: 2rem;
}
.allProductSingle4 .sellers .items .item .postTop .postTitle ul li {
  display: flex;
  justify-content: right;
  align-items: center;
  grid-gap: 0.5rem;
}
.allProductSingle4 .sellers .items .item .postTop .postTitle ul li span, .allProductSingle4 .sellers .items .item .postTop .postTitle ul li label, .allProductSingle4 .sellers .items .item .postTop .postTitle ul li a {
  font-size: 0.9rem;
  font-weight: 300;
  color: #000;
  opacity: 0.7;
}
.allProductSingle4 .sellers .items .item .postTop .postTitle ul li span:last-child, .allProductSingle4 .sellers .items .item .postTop .postTitle ul li label:last-child, .allProductSingle4 .sellers .items .item .postTop .postTitle ul li a:last-child {
  font-size: 1rem;
  font-weight: 500;
  opacity: 1;
}
.allProductSingle4 .sellers .items .item .postTop .postTitle ul li select {
  background: var(--back1-color);
  border: 1px solid #eee;
  padding: 0.3rem 0.5rem;
  color: #000;
  border-radius: 0.3rem;
  font-size: 0.8rem;
  width: 100%;
  height: 2rem;
  min-width: 8rem;
  transition: all 0.3s ease-in-out;
}
.allProductSingle4 .sellers .items .item .postTop .postTitle ul li select:focus {
  box-shadow: 0 3px 8px 0 rgba(0, 0, 0, 0.1);
  border: 1px solid #19bfd3;
}
.allProductSingle4 .sellers .items .item .postTop .postOptions {
  display: grid;
  justify-content: left;
  align-items: center;
}
.allProductSingle4 .sellers .items .item .postTop .postOptions .addCart {
  padding: 0.5rem 2rem;
  border: 1px solid var(--green-color);
  border-radius: 10px;
  cursor: pointer;
  font-size: 1rem;
  font-weight: 500;
  color: var(--green-color);
  transition: all 0.3s ease-in;
}
.allProductSingle4 .sellers .items .item .postTop .postOptions .addCart:hover {
  background: var(--green-color);
  color: white;
}
.allProductSingle4 .sellers .items .item .postBot {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  grid-gap: 0.5rem;
  margin-top: 0.5rem;
  background: var(--back2-color);
  border-radius: 5px;
  padding: 1rem;
}
.allProductSingle4 .sellers .items .item .postBot ul {
  display: grid;
  grid-template-columns: auto auto auto auto auto;
  justify-content: right;
  grid-gap: 2rem;
  align-items: center;
}
.allProductSingle4 .sellers .items .item .postBot ul li {
  display: grid;
  grid-template-columns: auto auto;
  justify-content: right;
  align-items: center;
  grid-gap: 0.5rem;
}
.allProductSingle4 .sellers .items .item .postBot ul li span {
  font-size: 0.85rem;
  font-weight: 300;
  color: #000;
  opacity: 0.6;
}
.allProductSingle4 .sellers .items .item .postBot ul li span:last-child {
  color: #444;
  font-weight: 700;
  opacity: 1;
}
.allProductSingle4 .sellers .items .item:last-child {
  border-bottom: 0;
}
.allProductSingle4 .showEditBtn {
  position: fixed;
  bottom: 1rem;
  left: 1rem;
  background: purple;
  padding: 0.5rem;
  border-radius: 10px;
  color: white;
  font-size: 1rem;
  font-weight: 500;
  z-index: 10;
  display: none;
  cursor: pointer;
}
.allProductSingle4 .containerD {
  margin-top: 2rem;
  display: grid;
  grid-template-columns: 1fr 25rem;
  grid-gap: 1rem;
}
.allProductSingle4 .containerD .right {
  background: white;
  border: 1px solid #eee;
  border-radius: 15px;
  padding: 1rem;
}
.allProductSingle4 .containerD .right .tabs {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem;
  align-items: center;
  margin-bottom: 1rem;
}
.allProductSingle4 .containerD .right .tabs .tab {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 1rem;
  font-weight: 700;
  color: #444;
  cursor: pointer;
  padding: 0.5rem 1.5rem;
  border-radius: 10px;
  background: #f7f7f7;
}
.allProductSingle4 .containerD .right .tabs .tab i {
  display: grid;
  align-items: center;
}
.allProductSingle4 .containerD .right .tabs .tab i svg {
  width: 1.2rem;
  height: 1.2rem;
  fill: #000;
}
.allProductSingle4 .containerD .right .tabs .tab span {
  background: white;
  border: 1px solid #ddd;
  width: 1.5rem;
  height: 1.5rem;
  display: grid;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
  font-weight: 500;
  color: #000;
  border-radius: 5px;
}
.allProductSingle4 .containerD .right .tabs .active {
  background: green;
  color: white;
}
.allProductSingle4 .containerD .right .tabs .active i svg {
  fill: white;
}
.allProductSingle4 .containerD .right .data1 .des .title1 {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 1.1rem;
  font-weight: 900;
  color: #444;
}
.allProductSingle4 .containerD .right .data1 .des .title1:before {
  width: 5px;
  height: 30px;
  display: grid;
  background: linear-gradient(var(--green-color), var(--back1-color));
  border-radius: 5px;
  content: "";
}
.allProductSingle4 .containerD .right .data1 .des .body p {
  opacity: 0.7;
  font-size: 1rem;
  font-weight: 400;
  color: #000;
  margin-top: 1rem;
  line-height: 2rem;
}
.allProductSingle4 .containerD .right .data1 .des .body .image {
  display: grid;
  justify-content: center;
  margin: 1rem 0;
}
.allProductSingle4 .containerD .right .data1 .des .body img {
  object-fit: cover !important;
  height: 600px !important;
  width: 100% !important;
  margin: 20px 0 !important;
}
.allProductSingle4 .containerD .right .data1 .des .body ul, .allProductSingle4 .containerD .right .data1 .des .body ol {
  margin: 2rem;
}
.allProductSingle4 .containerD .right .data1 .des .body ul li, .allProductSingle4 .containerD .right .data1 .des .body ol li {
  list-style: decimal;
  margin-bottom: 0.5rem;
  font-size: 0.9rem;
}
.allProductSingle4 .containerD .right .data1 .des .body ul ul, .allProductSingle4 .containerD .right .data1 .des .body ol ul {
  margin: 0;
  margin-top: 1rem;
  margin-right: 1rem;
}
.allProductSingle4 .containerD .right .data1 .des .body ul li {
  list-style: disc;
}
.allProductSingle4 .containerD .right .data1 .des .body table {
  margin: 1rem 0;
  border: 1px solid #eee;
  width: 100%;
}
.allProductSingle4 .containerD .right .data1 .des .body table thead tr {
  background: #eee;
}
.allProductSingle4 .containerD .right .data1 .des .body table tr {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(1px, 1fr));
  align-items: center;
  grid-gap: 1rem;
  padding: 1rem;
}
.allProductSingle4 .containerD .right .data1 .des .body table tr th {
  font-weight: 700;
  color: #000;
  font-size: 0.85rem;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  display: grid;
  align-items: center;
  justify-content: center;
}
.allProductSingle4 .containerD .right .data1 .des .body table tr td {
  font-weight: 300;
  font-size: 0.85rem;
  text-align: center;
  color: #000;
}
.allProductSingle4 .containerD .right .data1 .des .body table tr td p {
  font-weight: 300;
  font-size: 0.85rem;
  text-align: center;
  color: #000;
  margin-bottom: 0;
  line-height: unset;
}
.allProductSingle4 .containerD .right .data1 .des .body table tr td img {
  width: 2.5rem;
  height: 2.5rem;
  object-fit: cover;
  border-radius: 5rem;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
.allProductSingle4 .containerD .right .data1 .des .body table tr td a {
  display: grid;
  align-items: center;
}
.allProductSingle4 .containerD .right .data1 .des .body table tr td a svg {
  margin-left: 0.5rem;
}
.allProductSingle4 .containerD .right .data1 .des .body table tr:nth-child(even) {
  background: #eee;
}
.allProductSingle4 .containerD .right .data1 .des .body h2, .allProductSingle4 .containerD .right .data1 .des .body h3, .allProductSingle4 .containerD .right .data1 .des .body h4 {
  margin-bottom: 1rem;
}
.allProductSingle4 .containerD .right .data1 .des .body h2 {
  font-size: 1.5rem;
}
.allProductSingle4 .containerD .right .data1 .des .body h3 {
  font-size: 1.3rem;
}
.allProductSingle4 .containerD .right .data1 .des .body h4 {
  font-size: 1.2rem;
}
.allProductSingle4 .containerD .right .data1 .ability1 {
  display: none;
}
.allProductSingle4 .containerD .right .data1 .ability1 .title1 {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 1.1rem;
  font-weight: 900;
  color: #444;
}
.allProductSingle4 .containerD .right .data1 .ability1 .title1:before {
  width: 5px;
  height: 30px;
  display: grid;
  background: linear-gradient(var(--green-color), var(--back1-color));
  border-radius: 5px;
  content: "";
}
.allProductSingle4 .containerD .right .data1 .ability1 .items .item {
  margin-top: 1rem;
  display: grid;
  grid-template-columns: 1fr 3fr;
  grid-gap: 0.5rem;
}
.allProductSingle4 .containerD .right .data1 .ability1 .items .item .name1 {
  font-size: 0.9rem;
  font-weight: 700;
  color: #444;
  padding: 0.8rem;
  background: #f9f9f9;
  border-radius: 10px;
}
.allProductSingle4 .containerD .right .data1 .ability1 .items .item .body1 {
  font-size: 0.9rem;
  font-weight: 700;
  color: #444;
  padding: 0.8rem;
  background: #f5f5f5;
  border-radius: 10px;
}
.allProductSingle4 .containerD .right .data1 .comments1 {
  display: none;
}
.allProductSingle4 .containerD .right .data1 .comments1 .topC1 {
  margin-bottom: 1rem;
}
.allProductSingle4 .containerD .right .data1 .comments1 .topC1 .title2 {
  font-size: 1.1rem;
  font-weight: 900;
  color: #000;
  margin-bottom: 0.5rem;
}
.allProductSingle4 .containerD .right .data1 .comments1 .topC1 .para1 {
  font-size: 0.9rem;
  font-weight: 300;
  color: #444;
}
.allProductSingle4 .containerD .right .data1 .comments1 .showComments {
  background: #f7f7f7 !important;
  border-radius: 15px;
}
.allProductSingle4 .containerD .right .data1 .lottery1 {
  display: none;
}
.allProductSingle4 .containerD .right .data1 .lottery1 .title {
  font-size: 1rem;
  font-weight: 900;
  color: #000;
  margin-bottom: 1rem;
}
.allProductSingle4 .containerD .right .data1 .lottery1 table {
  width: 100%;
  border-collapse: collapse;
}
.allProductSingle4 .containerD .right .data1 .lottery1 table tr {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  align-items: center;
  grid-gap: 0.5rem;
  padding: 1rem;
  border-radius: 10px;
  border-bottom: 1px solid #eee;
}
.allProductSingle4 .containerD .right .data1 .lottery1 table tr th {
  font-weight: 700;
  color: #000;
  font-size: 0.9rem;
  text-align: right;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
.allProductSingle4 .containerD .right .data1 .lottery1 table tr td {
  font-weight: 700;
  font-size: 0.9rem;
  text-align: right;
  color: #000;
}
.allProductSingle4 .containerD .right .data1 .lottery1 table tr:last-child {
  border-bottom: 0;
}
.allProductSingle4 .containerD .right .data1 .lottery1 table tr:first-child {
  background: #F6F8FB;
}
.allProductSingle4 .containerD .boxP {
  padding: 1rem;
  background: white;
  box-shadow: 0px 4px 24px 0px rgba(0, 0, 0, 0.1);
  border-radius: 15px;
  position: sticky;
  top: 1rem;
}
.allProductSingle4 .containerD .boxP .title1 {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-gap: 0.5rem;
}
.allProductSingle4 .containerD .boxP .title1 .pic {
  border-radius: 10px;
  overflow: hidden;
}
.allProductSingle4 .containerD .boxP .title1 .pic img {
  width: 5rem;
  height: 5rem;
  object-fit: contain;
}
.allProductSingle4 .containerD .boxP .title1 .name {
  font-size: 1rem;
  font-weight: 700;
  color: #000;
}
.allProductSingle4 .containerD .boxP .user {
  padding: 1rem 0;
  margin-top: 1rem;
  border-top: 2px solid #eee;
  border-bottom: 2px solid #eee;
}
.allProductSingle4 .containerD .boxP .user .name {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.9rem;
  font-weight: 700;
  color: #000;
}
.allProductSingle4 .containerD .boxP .user .name i {
  display: grid;
  align-items: center;
}
.allProductSingle4 .containerD .boxP .user .name i svg {
  width: 1.1rem;
  height: 1.1rem;
  fill: #000;
}
.allProductSingle4 .containerD .boxP .user .option {
  margin-top: 1rem;
  padding: 0.7rem;
  border-radius: 10px;
  background: white;
  border: 1px solid #eee;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
}
.allProductSingle4 .containerD .boxP .user .option .name {
  color: #444;
  font-size: 0.9rem;
  font-weight: 700;
}
.allProductSingle4 .containerD .boxP .user .option i {
  display: grid;
  align-items: center;
}
.allProductSingle4 .containerD .boxP .user .option i svg {
  width: 1rem;
  height: 1rem;
  fill: #444;
}
.allProductSingle4 .containerD .boxP .user .option i:last-child svg {
  width: 1.3rem;
  height: 1.3rem;
}
.allProductSingle4 .containerD .boxP .prices {
  display: flex;
  justify-content: left;
  gap: 1rem;
  align-items: center;
  margin-top: 1rem;
}
.allProductSingle4 .containerD .boxP .prices .off {
  border: 1px solid red;
  border-radius: 10px;
  padding: 0.5rem;
  font-size: 0.8rem;
  font-weight: 700;
  color: red;
}
.allProductSingle4 .containerD .boxP .prices .price {
  display: grid;
  grid-template-columns: 1fr;
  grid-gap: 5px;
  text-align: left;
}
.allProductSingle4 .containerD .boxP .prices .price s {
  font-size: 0.85rem;
  font-weight: 300;
  color: #444;
}
.allProductSingle4 .containerD .boxP .prices .price bdi {
  font-size: 0.8rem;
  font-weight: 900;
  color: #000;
  line-height: 0.7rem;
}
.allProductSingle4 .containerD .boxP .prices .price bdi span {
  font-size: 1.2rem;
  margin-left: 5px;
  line-height: 0.7rem;
}
.allProductSingle4 .containerD .boxP .add {
  margin-top: 1rem;
}
.allProductSingle4 .containerD .boxP .add .addCarts {
  display: grid;
  grid-template-columns: 1fr;
}
.allProductSingle4 .containerD .boxP .add .addCarts .addCart {
  padding: 0.6rem;
  font-size: 1rem;
  font-weight: 700;
  border-radius: 10px;
  background: var(--green-color);
  color: white;
  text-align: center;
  transition: all 0.3s ease-in-out;
  box-shadow: 0 10px 5px rgba(0, 0, 0, 0.05);
  cursor: pointer;
}
.allProductSingle4 .containerD .boxP .empty {
  padding: 0.6rem;
  font-size: 1rem;
  font-weight: 700;
  border-radius: 5px;
  background: grey;
  color: white;
  text-align: center;
  transition: all 0.3s ease-in-out;
  cursor: pointer;
  opacity: 1;
  display: grid;
}
.allProductSingle4 .containerD .boxP .contact {
  background: var(--green-color);
}
.allProductSingle4 .related {
  padding: 0.5rem;
  margin-top: 2rem;
}
.allProductSingle4 .sellerInfo {
  background: rgba(0, 0, 0, 0.5);
  z-index: 4000;
  position: fixed;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-columns: 1fr;
  justify-content: center;
}
.allProductSingle4 .sellerInfo .data {
  width: 30%;
  margin: auto;
  background: white;
  display: grid;
  grid-template-columns: 1fr;
  border-radius: 20px;
  overflow: hidden;
}
.allProductSingle4 .sellerInfo .data .title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem;
  border-bottom: 2px solid #eee;
}
.allProductSingle4 .sellerInfo .data .title .name {
  font-size: 1.5rem;
  font-weight: 900;
  color: #444;
}
.allProductSingle4 .sellerInfo .data .title .location {
  display: flex;
  justify-content: left;
  align-items: center;
  gap: 0.3rem;
  font-size: 1rem;
  font-weight: 500;
  color: var(--green-color);
}
.allProductSingle4 .sellerInfo .data .title .location i {
  display: grid;
  align-items: center;
}
.allProductSingle4 .sellerInfo .data .title .location i svg {
  width: 1.2rem;
  height: 1.2rem;
  fill: var(--green-color);
}
.allProductSingle4 .sellerInfo .data .profile {
  margin: 1rem 0;
  padding: 0 1rem;
}
.allProductSingle4 .sellerInfo .data .profile .pic {
  display: grid;
  justify-content: center;
}
.allProductSingle4 .sellerInfo .data .profile .pic img {
  width: auto;
  height: 5rem;
  object-fit: cover;
}
.allProductSingle4 .sellerInfo .data .profile .name {
  font-size: 1.3rem;
  font-weight: 900;
  color: black;
  text-align: center;
  margin-top: 0.5rem;
}
.allProductSingle4 .sellerInfo .data .profile p {
  font-size: 0.9rem;
  font-weight: 300;
  text-align: center;
  margin-top: 0.5rem;
  line-height: 2rem;
  color: #444;
  white-space: pre-line;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  box-orient: vertical;
  -webkit-box-orient: vertical;
  line-clamp: 2;
  -webkit-line-clamp: 2;
  overflow: hidden;
  text-overflow: ellipsis;
}
.allProductSingle4 .sellerInfo .data .options {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 1rem;
  padding: 0 1rem;
}
.allProductSingle4 .sellerInfo .data .options .option {
  background: #f5f5f5;
  padding: 0.5rem 1rem;
  text-align: center;
  border-radius: 10px;
}
.allProductSingle4 .sellerInfo .data .options .option .body2 {
  font-size: 1.2rem;
  font-weight: 700;
  color: black;
}
.allProductSingle4 .sellerInfo .data .options .option .title2 {
  font-size: 1rem;
  font-weight: 500;
  color: #444;
  opacity: 0.7;
}
.allProductSingle4 .sellerInfo .data label {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  grid-gap: 0.5rem;
  margin: 1rem;
}
.allProductSingle4 .sellerInfo .data label input {
  border: 1px solid #ddd;
  font-size: 1rem;
  padding: 0.7rem 1rem;
  border-radius: 5rem;
  font-weight: 700;
  opacity: 0.7;
}
.allProductSingle4 .sellerInfo .data label i {
  display: grid;
  align-items: center;
  justify-content: center;
  transform: rotate(-135deg);
  border: 1px solid var(--green-color);
  border-radius: 50%;
  width: 3rem;
  height: 3rem;
}
.allProductSingle4 .sellerInfo .data label i svg {
  width: 1.2rem;
  height: 1.2rem;
  fill: var(--green-color);
}
.allProductSingle4 .sellerInfo .data .time {
  font-size: 1rem;
  font-weight: 300;
  color: #444;
  text-align: center;
  margin-right: 1rem;
}
.allProductSingle4 .sellerInfo .data .time span {
  color: red;
  font-weight: 700;
}
.allProductSingle4 .sellerInfo .data .time .active {
  color: green;
}
.allProductSingle4 .sellerInfo .data .buttons {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 1rem;
  padding: 1rem;
}
.allProductSingle4 .sellerInfo .data .buttons a {
  padding: 0.5rem 1rem;
  border-radius: 5px;
  font-size: 1rem;
  text-align: center;
  background: white;
  font-weight: 700;
  color: var(--green-color);
  border: 2px solid var(--green-color);
}
.allProductSingle4 .sellerInfo .data .buttons a:last-child {
  color: white;
  border: 2px solid var(--green-color);
  background: var(--green-color);
}
.allProductSingle4 .allTicket {
  background: rgba(0, 0, 0, 0.5);
  z-index: 4000;
  position: fixed;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-columns: 1fr;
  justify-content: center;
}
.allProductSingle4 .allTicket .chatContent {
  width: 40%;
  margin: auto;
  background: white;
  display: grid;
  grid-template-columns: 1fr;
  border-radius: 20px;
  overflow: hidden;
}
.allProductSingle4 .allTicket .chatContent .header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem;
  background: white;
}
.allProductSingle4 .allTicket .chatContent .header .profile {
  display: flex;
  justify-content: right;
  gap: 0.5rem;
  align-items: center;
}
.allProductSingle4 .allTicket .chatContent .header .profile .pic {
  overflow: hidden;
  border-radius: 50%;
}
.allProductSingle4 .allTicket .chatContent .header .profile .pic img {
  width: 3rem;
  height: 3rem;
  object-fit: cover;
}
.allProductSingle4 .allTicket .chatContent .header .profile .name {
  font-size: 1.2rem;
  font-weight: 300;
  color: black;
}
.allProductSingle4 .allTicket .chatContent .header .leftHeader {
  display: flex;
  justify-content: left;
  gap: 0.5rem;
}
.allProductSingle4 .allTicket .chatContent .header i {
  display: grid;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.allProductSingle4 .allTicket .chatContent .header i svg {
  width: 1.3rem;
  height: 1.3rem;
  fill: #444;
}
.allProductSingle4 .allTicket .chatContent .body {
  padding: 0.5rem;
  overflow-y: scroll;
  height: 30rem;
}
.allProductSingle4 .allTicket .chatContent .body p {
  display: none;
  font-size: 0.8rem;
  font-weight: 300;
  color: #000;
  opacity: 0.7;
}
.allProductSingle4 .allTicket .chatContent .body p .closeChats {
  padding: 0.2rem 0.4rem;
  background: red;
  color: white;
  border-radius: 5px;
  font-size: 0.7rem;
  cursor: pointer;
}
.allProductSingle4 .allTicket .chatContent .body .choice {
  display: grid;
  padding: 0.8rem;
  border: 1px solid #bbb;
  font-size: 0.9rem;
  font-weight: 300;
  color: #000;
  margin-top: 0.5rem;
  border-radius: 5px;
  cursor: pointer;
  transition: all 0.3s ease-in-out;
}
.allProductSingle4 .allTicket .chatContent .body .choice:hover {
  color: var(--green-color);
  border: 1px solid var(--green-color);
}
.allProductSingle4 .allTicket .chatContent .body .login {
  display: grid;
}
.allProductSingle4 .allTicket .chatContent .body .bodyLabel {
  display: grid;
  grid-template-columns: 1fr;
  grid-gap: 0.5rem;
  font-size: 0.9rem;
  font-weight: 300;
  color: #000;
  margin-top: 1rem;
}
.allProductSingle4 .allTicket .chatContent .body .bodyLabel input, .allProductSingle4 .allTicket .chatContent .body .bodyLabel select, .allProductSingle4 .allTicket .chatContent .body .bodyLabel textarea {
  background: var(--back1-color);
  border: 1px solid #eee;
  padding: 0.3rem 0.5rem;
  color: #000;
  border-radius: 5px;
  font-size: 0.9rem;
  font-weight: 300;
  width: 100%;
  transition: all 0.3s ease-in-out;
}
.allProductSingle4 .allTicket .chatContent .body .message11 {
  margin-top: 1rem;
  font-size: 0.9rem;
  font-weight: 300;
  color: #444;
}
.allProductSingle4 .allTicket .chatContent .body .message11 .time {
  font-size: 0.7rem;
}
.allProductSingle4 .allTicket .chatContent .body .message11 .messages {
  padding: 0.5rem;
  border-radius: 10px;
  border: 2px solid #bbb;
}
.allProductSingle4 .allTicket .chatContent .body .messages {
  background: white;
}
.allProductSingle4 .allTicket .chatContent .body .opp {
  display: grid;
  justify-content: left;
  text-align: left;
}
.allProductSingle4 .allTicket .chatContent .body .me {
  display: grid;
  justify-content: right;
  text-align: right;
}
.allProductSingle4 .allTicket .chatContent .body .me .messages {
  border: 2px solid var(--green-color);
}
.allProductSingle4 .allTicket .chatContent .body .submit {
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--green-color);
  text-align: center;
  background: transparent;
  width: 100%;
  border: 1px solid var(--green-color);
  padding: 0.5rem 1rem;
  border-radius: 5px;
  margin-top: 1rem;
  transition: all 0.3s ease-in-out;
}
.allProductSingle4 .allTicket .chatContent .body .submit:hover {
  background: var(--green-color);
  color: white;
}
.allProductSingle4 .allTicket .chatContent .body .sendImage {
  background: white;
  border-radius: 10px;
  overflow: hidden;
  display: grid;
  grid-template-columns: 1fr;
  justify-content: center;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
  margin-top: 1rem;
}
.allProductSingle4 .allTicket .chatContent .body .sendImage .dropify-wrapper {
  height: 100px;
  border: 1px solid #eee !important;
}
.allProductSingle4 .allTicket .chatContent .body .sendImage .dropify-wrapper .file-icon:before {
  opacity: 0 !important;
  position: absolute !important;
  top: 0 !important;
  visibility: hidden !important;
}
.allProductSingle4 .allTicket .chatContent .body .sendImage .dropify-wrapper .dropify-message {
  position: relative !important;
  top: auto !important;
  margin-top: 2rem;
}
.allProductSingle4 .allTicket .chatContent .body .sendImage .dropify-wrapper .dropify-message p {
  margin: 0;
  font-size: 1rem;
  color: rgba(0, 128, 0, 0.5098039216);
}
.allProductSingle4 .allTicket .chatContent .send {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-gap: 1rem;
  padding: 0.5rem;
}
.allProductSingle4 .allTicket .chatContent .send input {
  background: white;
  border: 1px solid #eee;
  padding: 0.5rem 1rem;
  color: #000;
  border-radius: 5rem;
  font-size: 1rem;
  font-weight: 300;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
  width: 100%;
  transition: all 0.3s ease-in-out;
}
.allProductSingle4 .allTicket .chatContent .send button {
  font-size: 0.9rem;
  font-weight: 300;
  color: white;
  border-radius: 5rem;
  background: var(--green-color);
  padding: 0 1rem;
}
.allProductSingle4 .allTicket .chatContent .loginChat {
  background: red;
  border-top: 1px solid #eee;
  padding: 0.5rem;
  text-align: center;
  font-size: 0.8rem;
  font-weight: 300;
  color: white;
  display: grid;
  width: 100%;
}
.allProductSingle4 .allTicket .chatContent .typeLogin1 {
  margin-top: 1rem;
  border-radius: 5px;
}
.allProductSingle4 .allChangeList {
  background: rgba(0, 0, 0, 0.5);
  z-index: 4000;
  position: fixed;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-columns: 1fr;
  justify-content: center;
}
.allProductSingle4 .allChangeList .changeList {
  width: 40%;
  margin: auto;
  background: white;
  display: grid;
  grid-template-columns: 1fr;
  border-radius: 20px;
  overflow: hidden;
  padding: 2rem;
}
.allProductSingle4 .allChangeList .changeList .title2 {
  text-align: center;
  font-size: 1.2rem;
  font-weight: 700;
  color: black;
  margin-bottom: 1rem;
}
.allProductSingle4 .allBenefit {
  background: rgba(0, 0, 0, 0.5);
  z-index: 4000;
  position: fixed;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-columns: 1fr;
  justify-content: center;
}
.allProductSingle4 .allBenefit .showB {
  width: 30%;
  margin: auto;
  background: white;
  display: grid;
  grid-template-columns: 1fr;
  border-radius: 20px;
  overflow: hidden;
}
.allProductSingle4 .allBenefit .showB .title2 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  text-align: center;
  font-size: 1.2rem;
  font-weight: 700;
  color: black;
  padding: 1rem;
  border-bottom: 2px solid rgb(238, 238, 241);
}
.allProductSingle4 .allBenefit .showB .title2 i {
  display: grid;
  align-items: center;
}
.allProductSingle4 .allBenefit .showB .title2 i svg {
  width: 1.5rem;
  height: 1.5rem;
  fill: #000;
}
.allProductSingle4 .allBenefit .showB .items {
  padding: 1rem;
  padding-top: 0;
}
.allProductSingle4 .allBenefit .showB .items .item {
  margin-top: 1rem;
  padding: 0.5rem;
  border-radius: 10px;
  border: 1px solid rgb(238, 238, 241);
  cursor: pointer;
  display: grid;
}
.allProductSingle4 .allBenefit .showB .items .item .name {
  font-size: 0.9rem;
  font-weight: 700;
  color: #444;
  margin-bottom: 0.5rem;
}
.allProductSingle4 .allBenefit .showB .items .item .body {
  font-size: 0.8rem;
  font-weight: 300;
  color: #000;
  opacity: 0.5;
}
.allProductSingle4 .allBulk {
  background: rgba(0, 0, 0, 0.5);
  z-index: 4000;
  position: fixed;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-columns: 1fr;
  justify-content: center;
}
.allProductSingle4 .allBulk .showB {
  width: 30%;
  margin: auto;
  background: white;
  display: grid;
  grid-template-columns: 1fr;
  border-radius: 20px;
  overflow: hidden;
}
.allProductSingle4 .allBulk .showB .title2 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  text-align: center;
  font-size: 1.2rem;
  font-weight: 700;
  color: black;
  padding: 1rem;
  border-bottom: 2px solid rgb(238, 238, 241);
}
.allProductSingle4 .allBulk .showB .title2 i {
  display: grid;
  align-items: center;
  cursor: pointer;
}
.allProductSingle4 .allBulk .showB .title2 i svg {
  width: 1.5rem;
  height: 1.5rem;
  fill: #000;
}
.allProductSingle4 .allBulk .showB table {
  border-radius: 20px;
  width: 100%;
  border-collapse: collapse;
}
.allProductSingle4 .allBulk .showB table tr {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  align-items: center;
  grid-gap: 0.5rem;
  padding: 0.5rem 1rem;
  border-bottom: 1px solid #eee;
}
.allProductSingle4 .allBulk .showB table tr th {
  font-weight: 700;
  color: #000;
  font-size: 0.9rem;
  text-align: right;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
.allProductSingle4 .allBulk .showB table tr td {
  font-weight: 700;
  font-size: 0.9rem;
  text-align: right;
  color: #000;
}
.allProductSingle4 .allBulk .showB table tr:first-child {
  background: #F6F8FB;
}
.allProductSingle4 .allGuide {
  background: rgba(0, 0, 0, 0.5);
  z-index: 4000;
  position: fixed;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-columns: 1fr;
  justify-content: center;
}
.allProductSingle4 .allGuide .showB {
  width: 60%;
  margin: auto;
  background: white;
  display: grid;
  grid-template-columns: 1fr;
  border-radius: 20px;
  overflow: hidden;
}
.allProductSingle4 .allGuide .showB .title2 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  text-align: center;
  font-size: 1.2rem;
  font-weight: 700;
  color: black;
  padding: 1rem;
  border-bottom: 2px solid rgb(238, 238, 241);
}
.allProductSingle4 .allGuide .showB .title2 i {
  display: grid;
  align-items: center;
  cursor: pointer;
}
.allProductSingle4 .allGuide .showB .title2 i svg {
  width: 1.5rem;
  height: 1.5rem;
  fill: #000;
}
.allProductSingle4 .allGuide .showB table {
  border-radius: 20px;
  width: 100%;
  border-collapse: collapse;
}
.allProductSingle4 .allGuide .showB table tr {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  align-items: center;
  grid-gap: 0.5rem;
  padding: 0.5rem 1rem;
  border-bottom: 1px solid #eee;
}
.allProductSingle4 .allGuide .showB table tr th {
  font-weight: 700;
  color: #000;
  font-size: 0.9rem;
  text-align: right;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
.allProductSingle4 .allGuide .showB table tr td {
  font-weight: 700;
  font-size: 0.9rem;
  text-align: right;
  color: #000;
}
.allProductSingle4 .allGuide .showB table tr:first-child {
  background: #F6F8FB;
}
.allProductSingle4 .allGuide .showB .c4 tr {
  grid-template-columns: repeat(4, 1fr);
}
.allProductSingle4 #copy-btn {
  display: none;
}
@media screen and (max-width: 700px) {
  .allProductSingle4 {
    width: 100% !important;
    margin-top: 0;
  }
  .allProductSingle4 .address {
    overflow-x: scroll;
    padding: 0.5rem 0;
    margin-bottom: 0;
    margin-right: 0.3rem;
    border-radius: 0;
  }
  .allProductSingle4 .address i {
    display: none;
  }
  .allProductSingle4 .address a {
    overflow: unset;
    white-space: nowrap;
  }
  .allProductSingle4 .adminButtons {
    grid-template-columns: 1fr;
    padding: 0.5rem;
  }
  .allProductSingle4 .showEditBtn {
    bottom: 6rem;
    left: 0.5rem;
    font-size: 0.8rem;
  }
  .allProductSingle4 .containers {
    display: block;
  }
  .allProductSingle4 .containers .right11 {
    display: flex;
    flex-direction: column-reverse;
    grid-gap: 0.5rem;
    border-radius: 5px;
    padding: 0.5rem;
    border: 0;
  }
  .allProductSingle4 .containers .right11 .data .title2 h1 {
    font-size: 1rem;
  }
  .allProductSingle4 .containers .right11 .data .title2 .titleEn {
    font-size: 0.8rem;
  }
  .allProductSingle4 .containers .right11 .data .title2 .op1 {
    display: block;
    grid-gap: 0.5rem;
    padding-bottom: 0.5rem;
  }
  .allProductSingle4 .containers .right11 .data .title2 .op1 .right .option {
    font-size: 0.7rem;
    padding: 0.2rem 0.5rem;
  }
  .allProductSingle4 .containers .right11 .data .title2 .op1 .left .guideS {
    font-size: 0.7rem;
  }
  .allProductSingle4 .containers .right11 .data .abilities {
    margin-top: 1rem;
  }
  .allProductSingle4 .containers .right11 .data .abilities .name2 {
    font-size: 0.9rem;
  }
  .allProductSingle4 .containers .right11 .data .abilities ul li {
    padding: 0.5rem;
  }
  .allProductSingle4 .containers .right11 .data .abilities ul li .name1, .allProductSingle4 .containers .right11 .data .abilities ul li .body1 {
    font-size: 0.75rem;
  }
  .allProductSingle4 .containers .right11 .data .abilities ul li .body1 {
    font-size: 0.8rem;
  }
  .allProductSingle4 .containers .right11 .data .abilities .more span {
    font-size: 0.7rem;
    padding: 0.2rem 0.3rem;
    margin-left: 0.5rem;
  }
  .allProductSingle4 .containers .right11 .data .abilities .more span i svg {
    width: 0.8rem;
    height: 0.8rem;
  }
  .allProductSingle4 .containers .right11 .data .info1 {
    padding: 0.5rem;
    font-size: 0.8rem;
  }
  .allProductSingle4 .containers .right11 .data .info1 .title2 {
    font-size: 0.9rem;
  }
  .allProductSingle4 .containers .right11 .data .info1 .title2 i svg {
    width: 1rem;
    height: 1rem;
  }
  .allProductSingle4 .containers .right11 .data .box {
    margin: 1rem 0;
  }
  .allProductSingle4 .containers .right11 .data .box i svg {
    width: 0.8rem;
    height: 0.8rem;
  }
  .allProductSingle4 .containers .right11 .gallery {
    position: relative;
  }
  .allProductSingle4 .containers .right11 .gallery .options {
    gap: 0.5rem;
  }
  .allProductSingle4 .containers .right11 .gallery .options .option {
    padding: 0.5rem;
    font-size: 0.7rem;
    margin-bottom: 0.2rem;
    border-radius: 50%;
  }
  .allProductSingle4 .containers .right11 .gallery .options .option i svg {
    width: 1.2rem;
    height: 1.2rem;
  }
  .allProductSingle4 .containers .right11 .gallery .pics .pic {
    display: none;
  }
  .allProductSingle4 .containers .right11 .gallery .pics .images {
    margin-top: 0;
  }
  .allProductSingle4 .containers .right11 .gallery .pics .images .slider-image .item {
    padding: 0;
    border-radius: 0;
  }
  .allProductSingle4 .containers .right11 .gallery .pics .images .slider-image .item img {
    height: 100dvw;
  }
  .allProductSingle4 .containers .right11 .gallery .pics .images .slider-image .active2 {
    border: 0;
  }
  .allProductSingle4 .containers .right11 .gallery .pics .images .slider-image .owl-next, .allProductSingle4 .containers .right11 .gallery .pics .images .slider-image .owl-prev {
    padding: 0.5rem;
    background: white !important;
    position: absolute;
    top: 0;
    bottom: 0;
    margin: auto;
    right: 0.5rem;
    width: 2.5rem;
    border: 2px solid black !important;
    font-size: 1.5rem !important;
    border-radius: 50%;
    color: black !important;
    height: 2.5rem;
    transition: all 0.3s ease-in-out;
  }
  .allProductSingle4 .containers .right11 .gallery .pics .images .slider-image .owl-next:hover, .allProductSingle4 .containers .right11 .gallery .pics .images .slider-image .owl-prev:hover {
    background: black !important;
    color: white !important;
  }
  .allProductSingle4 .containers .right11 .gallery .pics .images .slider-image .owl-next {
    left: 0.5rem;
    right: auto;
  }
  .allProductSingle4 .containers .left {
    display: none;
  }
  .allProductSingle4 .addFloat {
    display: block;
  }
  .allProductSingle4 .containerD {
    margin-top: 0;
    display: block;
  }
  .allProductSingle4 .containerD .right {
    border: 0;
    border-radius: 10px;
    padding: 0.5rem;
  }
  .allProductSingle4 .containerD .right .tabs {
    gap: 0.5rem;
    margin-bottom: 0.5rem;
  }
  .allProductSingle4 .containerD .right .tabs .tab {
    font-size: 0.8rem;
    padding: 0.5rem 1rem;
  }
  .allProductSingle4 .containerD .right .tabs .tab i svg {
    width: 1rem;
    height: 1rem;
  }
  .allProductSingle4 .containerD .right .tabs .tab span {
    width: 1.2rem;
    height: 1.2rem;
  }
  .allProductSingle4 .containerD .right .data1 {
    margin-top: 1rem;
  }
  .allProductSingle4 .containerD .right .data1 .des .body p {
    font-size: 0.9rem;
  }
  .allProductSingle4 .containerD .right .data1 .ability1 {
    display: none;
  }
  .allProductSingle4 .containerD .right .data1 .ability1 .items .item {
    grid-template-columns: 1fr;
    border-radius: 5px;
    grid-gap: 0;
  }
  .allProductSingle4 .containerD .right .data1 .ability1 .items .item .name1 {
    font-size: 0.8rem;
    padding: 0.5rem;
    background: transparent;
  }
  .allProductSingle4 .containerD .right .data1 .ability1 .items .item .body1 {
    font-size: 0.8rem;
    padding: 0.5rem;
  }
  .allProductSingle4 .containerD .right .data1 .comments1 {
    display: none;
  }
  .allProductSingle4 .containerD .right .data1 .comments1 .topC1 {
    margin-bottom: 1rem;
  }
  .allProductSingle4 .containerD .right .data1 .comments1 .topC1 .title2 {
    font-size: 1.1rem;
    font-weight: 900;
    color: #000;
    margin-bottom: 0.5rem;
  }
  .allProductSingle4 .containerD .right .data1 .comments1 .topC1 .para1 {
    font-size: 0.9rem;
    font-weight: 300;
    color: #444;
  }
  .allProductSingle4 .containerD .right .data1 .comments1 .showComments {
    background: #f7f7f7 !important;
    border-radius: 15px;
  }
  .allProductSingle4 .containerD .boxP {
    display: none;
  }
  .allProductSingle4 .sellerInfo .data {
    width: 98%;
    border-radius: 10px;
  }
  .allProductSingle4 .sellerInfo .data .title {
    padding: 0.5rem;
  }
  .allProductSingle4 .sellerInfo .data .title .name {
    font-size: 1rem;
  }
  .allProductSingle4 .sellerInfo .data .title .location {
    font-size: 0.8rem;
  }
  .allProductSingle4 .sellerInfo .data .title .location i svg {
    width: 0.9rem;
    height: 0.9rem;
  }
  .allProductSingle4 .sellerInfo .data .profile {
    margin: 0.5rem 0;
    padding: 0 0.5rem;
  }
  .allProductSingle4 .sellerInfo .data .profile .pic img {
    height: 4rem;
  }
  .allProductSingle4 .sellerInfo .data .profile .name {
    font-size: 1rem;
  }
  .allProductSingle4 .sellerInfo .data .profile p {
    font-size: 0.8rem;
  }
  .allProductSingle4 .sellerInfo .data .options {
    display: grid;
    grid-gap: 0.5rem;
    padding: 0 0.5rem;
  }
  .allProductSingle4 .sellerInfo .data .options .option {
    padding: 0.5rem;
  }
  .allProductSingle4 .sellerInfo .data .options .option .body2 {
    font-size: 0.9rem;
  }
  .allProductSingle4 .sellerInfo .data .options .option .title2 {
    font-size: 0.8rem;
  }
  .allProductSingle4 .sellerInfo .data label {
    margin: 0.5rem;
  }
  .allProductSingle4 .sellerInfo .data label input {
    font-size: 0.85rem;
    padding: 0.5rem 0.8rem;
  }
  .allProductSingle4 .sellerInfo .data label i {
    width: 2.5rem;
    height: 2.5rem;
  }
  .allProductSingle4 .sellerInfo .data label i svg {
    width: 1rem;
    height: 1rem;
  }
  .allProductSingle4 .sellerInfo .data .time {
    font-size: 0.9rem;
    margin-right: 0.5rem;
  }
  .allProductSingle4 .sellerInfo .data .buttons {
    grid-gap: 0.5rem;
    padding: 0.5rem;
  }
  .allProductSingle4 .sellerInfo .data .buttons a {
    padding: 0.5rem;
    font-size: 0.8rem;
  }
  .allProductSingle4 .allTicket .chatContent {
    width: 100%;
    border-radius: 0;
  }
  .allProductSingle4 .allTicket .chatContent .header .profile .pic img {
    width: 2rem;
    height: 2rem;
  }
  .allProductSingle4 .allTicket .chatContent .header .profile .name {
    font-size: 0.8rem;
  }
  .allProductSingle4 .allTicket .chatContent .header i svg {
    width: 1.1rem;
    height: 1.1rem;
  }
  .allProductSingle4 .allTicket .chatContent .body {
    height: calc(100vh - 6.4rem);
  }
  .allProductSingle4 .allTicket .chatContent .body p {
    font-size: 0.7rem;
  }
  .allProductSingle4 .allTicket .chatContent .body p .closeChats {
    padding: 0.2rem;
  }
  .allProductSingle4 .allTicket .chatContent .body .choice {
    padding: 0.5rem;
    font-size: 0.7rem;
  }
  .allProductSingle4 .allTicket .chatContent .body .bodyLabel {
    font-size: 0.7rem;
    margin-top: 0.5rem;
  }
  .allProductSingle4 .allTicket .chatContent .body .bodyLabel input, .allProductSingle4 .allTicket .chatContent .body .bodyLabel select, .allProductSingle4 .allTicket .chatContent .body .bodyLabel textarea {
    padding: 0.3rem;
    font-size: 0.7rem;
  }
  .allProductSingle4 .allTicket .chatContent .body .message11 {
    margin-top: 1rem;
    font-size: 0.8rem;
  }
  .allProductSingle4 .allTicket .chatContent .body .message11 .time {
    font-size: 0.6rem;
  }
  .allProductSingle4 .allTicket .chatContent .body .message11 .messages {
    padding: 0.3rem;
  }
  .allProductSingle4 .allTicket .chatContent .body .submit {
    font-size: 0.8rem;
    padding: 0.3rem 0.5rem;
    margin-top: 0.5rem;
  }
  .allProductSingle4 .allTicket .chatContent .body .sendImage {
    margin-top: 0.5rem;
  }
  .allProductSingle4 .allTicket .chatContent .send {
    grid-gap: 0.5rem;
    padding: 0.5rem;
  }
  .allProductSingle4 .allTicket .chatContent .send input {
    padding: 0.5rem;
    font-size: 0.85rem;
  }
  .allProductSingle4 .allTicket .chatContent .send button {
    font-size: 0.7rem;
    padding: 0 1rem;
  }
  .allProductSingle4 .allTicket .chatContent .loginChat {
    font-size: 1rem;
    height: 3.5rem;
    align-items: center;
  }
  .allProductSingle4 .allTicket .chatContent .typeLogin1 {
    margin-top: 0.5rem;
  }
  .allProductSingle4 .allChangeList .changeList {
    width: 100%;
    padding: 0.5rem;
  }
  .allProductSingle4 .allChangeList .changeList .title2 {
    font-size: 0.9rem;
    margin-bottom: 0.5rem;
  }
  .allProductSingle4 .allBenefit .showB {
    width: 100%;
    border-radius: 0;
    height: 100vh;
    display: block;
  }
  .allProductSingle4 .allBenefit .showB .title2 {
    font-size: 0.9rem;
    padding: 0.5rem;
  }
  .allProductSingle4 .allBenefit .showB .title2 i svg {
    width: 1rem;
    height: 1rem;
  }
  .allProductSingle4 .allBenefit .showB .items {
    padding: 0.5rem;
    padding-top: 0;
  }
  .allProductSingle4 .allGuide .showB {
    width: 100%;
    border-radius: 0;
    height: 100vh;
    display: block;
  }
  .allProductSingle4 .allGuide .showB .title2 {
    font-size: 0.9rem;
    padding: 0.5rem;
  }
  .allProductSingle4 .allGuide .showB .title2 i svg {
    width: 1rem;
    height: 1rem;
  }
  .allProductSingle4 .allGuide .showB .table {
    overflow-x: scroll;
  }
  .allProductSingle4 .allGuide .showB table {
    border-radius: 10px;
  }
  .allProductSingle4 .allGuide .showB table tr {
    padding: 0.5rem;
    grid-template-columns: repeat(5, 7rem);
  }
  .allProductSingle4 .allGuide .showB table tr th {
    font-size: 0.7rem;
  }
  .allProductSingle4 .allGuide .showB table tr td {
    font-size: 0.7rem;
  }
  .allProductSingle4 .allGuide .showB .c4 tr {
    grid-template-columns: repeat(4, 7rem);
  }
  .allProductSingle4 .allBulk .showB {
    width: 100%;
    border-radius: 0;
  }
  .allProductSingle4 .allBulk .showB .title2 {
    font-size: 0.9rem;
    padding: 0.5rem;
  }
  .allProductSingle4 .allBulk .showB .title2 i svg {
    width: 1rem;
    height: 1rem;
  }
  .allProductSingle4 .allBulk .showB table {
    border-radius: 10px;
  }
  .allProductSingle4 .allBulk .showB table tr {
    padding: 0.5rem;
  }
  .allProductSingle4 .allBulk .showB table tr th {
    font-size: 0.8rem;
  }
  .allProductSingle4 .allBulk .showB table tr td {
    font-size: 0.8rem;
  }
}

.allProductSingle5 {
  margin: auto;
  width: 80% !important;
  margin-top: 1rem;
}
.allProductSingle5 .address {
  display: flex;
  justify-content: right;
  align-items: center;
  position: relative;
  margin-bottom: 1rem;
  opacity: 0.5;
}
.allProductSingle5 .address i {
  display: grid;
  align-items: center;
  margin-left: 0.3rem;
}
.allProductSingle5 .address i svg {
  width: 1.1rem;
  height: 1.1rem;
  fill: #444;
}
.allProductSingle5 .address a {
  font-size: 0.9rem;
  font-weight: 500;
  color: #444;
  white-space: pre-line;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  box-orient: vertical;
  -webkit-box-orient: vertical;
  line-clamp: 1;
  -webkit-line-clamp: 1;
  overflow: hidden;
  text-overflow: ellipsis;
}
.allProductSingle5 .address a:after {
  content: "/";
  padding: 0 0.4rem;
}
.allProductSingle5 .address a:last-child {
  opacity: 1;
}
.allProductSingle5 .address a:last-child:after {
  content: "";
  padding: 0;
}
.allProductSingle5 .res1 {
  display: none;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem;
  border-bottom: 2px solid #eee;
}
.allProductSingle5 .res1 .left1, .allProductSingle5 .res1 .right1 {
  display: flex;
  justify-content: left;
  gap: 0.5rem;
  align-items: center;
}
.allProductSingle5 .res1 .left1 .option i, .allProductSingle5 .res1 .right1 .option i {
  display: grid;
  align-items: center;
}
.allProductSingle5 .res1 .left1 .option i svg, .allProductSingle5 .res1 .right1 .option i svg {
  width: 1.5rem;
  height: 1.5rem;
  fill: #000;
  color: #000;
}
.allProductSingle5 .res1 .right1 {
  justify-content: right;
}
.allProductSingle5 .res1 .right1 .option i svg {
  width: 1.2rem;
  height: 1.2rem;
}
.allProductSingle5 .containers {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  align-items: start;
  grid-gap: 5rem;
}
.allProductSingle5 .containers .container1 .gallery {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-gap: 1rem;
  position: relative;
}
.allProductSingle5 .containers .container1 .gallery .showImage {
  border-radius: 10px;
  position: relative;
  background: white;
}
.allProductSingle5 .containers .container1 .gallery .showImage img {
  height: 40rem;
  object-fit: contain;
  width: 100%;
}
.allProductSingle5 .containers .container1 .gallery .showImage .options {
  position: absolute;
  left: 0.5rem;
  top: 0.5rem;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
}
.allProductSingle5 .containers .container1 .gallery .showImage .options .option {
  border-radius: 10px;
  cursor: pointer;
  border: 2px solid #eee;
  background: rgba(255, 255, 255, 0.8);
  position: relative;
  height: 2.5rem;
  width: 2.5rem;
  transition: all 0.3s ease-in-out;
}
.allProductSingle5 .containers .container1 .gallery .showImage .options .option i {
  display: grid;
  align-items: center;
  justify-content: center;
}
.allProductSingle5 .containers .container1 .gallery .showImage .options .option i svg {
  width: 1.2rem;
  height: 1.2rem;
  fill: black;
  transition: all 0.3s ease-in-out;
}
.allProductSingle5 .containers .container1 .gallery .showImage .options .option .num {
  position: absolute;
  right: 0;
  top: 0;
  background: var(--green-color);
  border-radius: 5px;
  padding: 0 5px;
  font-size: 0.6rem;
  font-weight: 300;
  color: white;
  transition: all 0.3s ease-in-out;
}
.allProductSingle5 .containers .container1 .gallery .showImage .options .option:hover {
  background: white;
}
.allProductSingle5 .containers .container1 .gallery .imageSlider {
  height: 40rem;
}
.allProductSingle5 .containers .container1 .gallery .imageSlider figure {
  border-radius: 10px;
  border: 1px solid #eee;
  background: white;
}
.allProductSingle5 .containers .container1 .gallery .imageSlider figure img {
  width: 4rem;
  height: 4rem;
  border-radius: 10px;
}
.allProductSingle5 .containers .container1 .gallery button.owl-prev {
  position: absolute;
  right: 1rem;
  top: 0;
  bottom: 0;
}
.allProductSingle5 .containers .container1 .gallery button.owl-prev span {
  font-size: 2.5rem;
}
.allProductSingle5 .containers .container1 .gallery button.owl-next {
  position: absolute;
  left: 1rem;
  top: 0;
  bottom: 0;
}
.allProductSingle5 .containers .container1 .gallery button.owl-next span {
  font-size: 2.5rem;
}
.allProductSingle5 .containers .container1 .options1 {
  display: flex;
  justify-content: space-between;
  background: #fafafb;
  margin-top: 2rem;
  border-radius: 10px;
  filter: grayscale(10);
}
.allProductSingle5 .containers .container1 .options1 .option {
  display: flex;
  justify-content: right;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem;
  text-align: center;
  opacity: 0.7;
}
.allProductSingle5 .containers .container1 .options1 .option .body {
  font-size: 0.8rem;
  font-weight: 700;
  color: #444;
}
.allProductSingle5 .containers .container1 .options1 .option img {
  width: 40px;
  height: 40px;
}
.allProductSingle5 .containers .container1 .description1 {
  border-radius: 10px;
  padding: 1rem;
  background: white;
  margin-top: 1rem;
  border: 1px solid #eee;
}
.allProductSingle5 .containers .container1 .description1 .title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  cursor: pointer;
  font-size: 1rem;
  font-weight: 900;
  color: #000;
}
.allProductSingle5 .containers .container1 .description1 ul li {
  margin-top: 1rem;
}
.allProductSingle5 .containers .container1 .description1 ul li .body2 {
  display: flex;
  align-items: center;
  gap: 0.2rem;
  font-size: 0.9rem;
  font-weight: 500;
  color: #444;
}
.allProductSingle5 .containers .container1 .description1 ul li .body2:before {
  content: "🔴";
}
.allProductSingle5 .containers .container1 .description1 p {
  position: relative;
  font-size: 0.9rem;
  font-weight: 500;
  margin-top: 0.5rem;
  color: #444;
  white-space: pre-line;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  box-orient: vertical;
  -webkit-box-orient: vertical;
  line-clamp: 3;
  -webkit-line-clamp: 3;
  overflow: hidden;
  text-overflow: ellipsis;
}
.allProductSingle5 .containers .container1 .description1 .showM {
  font-size: 1rem;
  font-weight: 300;
  margin-top: 1rem;
  display: grid;
  justify-content: left;
}
.allProductSingle5 .containers .container1 .description1 .showM span {
  display: flex;
  justify-content: left;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
  padding: 0.3rem;
  border-bottom: 1px dashed var(--green-color);
  color: var(--green-color);
}
.allProductSingle5 .containers .container1 .description1 .showM span i {
  display: grid;
  align-items: center;
}
.allProductSingle5 .containers .container1 .description1 .showM span i svg {
  width: 0.8rem;
  height: 0.8rem;
  fill: var(--green-color);
}
.allProductSingle5 .containers .container1 .comment1 {
  margin-top: 1rem;
  border: 1px solid #eee;
  padding: 1rem;
  border-radius: 10px;
}
.allProductSingle5 .containers .container1 .comment1 .allComment .top1 {
  grid-template-columns: 1fr;
}
.allProductSingle5 .containers .container1 .comment1 .allComment .top1 .body1 {
  font-size: 1.1rem;
}
.allProductSingle5 .containers .container1 .comment1 .allComment .top1 p {
  font-size: 0.9rem;
}
.allProductSingle5 .containers .container1 .comment1 .allComment .addComments {
  padding: 0;
}
.allProductSingle5 .containers .container1 .comment1 .allComment .showComments {
  border-radius: 10px;
  background: #fafafb;
}
.allProductSingle5 .containers .container2 {
  height: 100%;
}
.allProductSingle5 .containers .container2 h1 {
  font-size: 1.1rem;
  font-weight: 700;
  color: #000;
}
.allProductSingle5 .containers .container2 .resSlider {
  display: none;
}
.allProductSingle5 .containers .container2 .top1 {
  margin-bottom: 2rem;
}
.allProductSingle5 .containers .container2 .rate {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-top: 0.5rem;
}
.allProductSingle5 .containers .container2 .rate i {
  display: grid;
  align-items: center;
}
.allProductSingle5 .containers .container2 .rate i svg {
  width: 1.1rem;
  height: 1.1rem;
  fill: orange;
}
.allProductSingle5 .containers .container2 .rate .rate1 {
  font-size: 0.8rem;
  font-weight: 900;
  color: #000;
}
.allProductSingle5 .containers .container2 .rate .rate2 {
  font-size: 0.8rem;
  font-weight: 500;
  color: #000;
}
.allProductSingle5 .containers .container2 .choice {
  padding: 0.5rem 0;
  border-top: 1px solid #ddd;
  margin-top: 1rem;
}
.allProductSingle5 .containers .container2 .choice .title1 {
  font-size: 0.9rem;
  font-weight: 500;
  color: #444;
  margin-bottom: 0.5rem;
}
.allProductSingle5 .containers .container2 .choice ul {
  display: flex;
  justify-content: right;
  align-items: center;
  gap: 0.5rem;
}
.allProductSingle5 .containers .container2 .choice ul li {
  position: relative;
  border: 2px solid #eee;
  font-size: 0.8rem;
  font-weight: 300;
  background: white;
  color: black;
  padding: 0.3rem 1rem;
  cursor: pointer;
  border-radius: 5px;
}
.allProductSingle5 .containers .container2 .choice ul li[data-empty=empty] {
  background: #ffbebe;
  opacity: 0.7;
  color: #555;
}
.allProductSingle5 .containers .container2 .choice ul li[data-empty=empty]:before {
  content: "ناموجود";
  position: absolute;
  left: 0;
  top: -0.5rem;
  font-size: 0.6rem;
  font-weight: 700;
  color: red;
}
.allProductSingle5 .containers .container2 .choice ul .active {
  border: 2px solid var(--green-color);
}
.allProductSingle5 .containers .container2 .choice:nth-child(2) {
  border-bottom: 0;
  padding-bottom: 0;
}
.allProductSingle5 .containers .container2 .choice:nth-child(3) {
  border-bottom: 0;
  padding-bottom: 0;
}
.allProductSingle5 .containers .container2 .carrier {
  margin: 1rem 0;
  display: grid;
  grid-template-columns: 1fr;
  grid-gap: 0.5rem;
  align-items: center;
  justify-content: space-between;
}
.allProductSingle5 .containers .container2 .carrier .name {
  font-size: 0.9rem;
  font-weight: 500;
  color: #000;
}
.allProductSingle5 .containers .container2 .carrier select {
  font-size: 0.9rem;
  font-weight: 500;
  color: #000;
  padding: 0.5rem 1rem;
  background: transparent;
  border-radius: 10px;
  border: 1px solid #eee;
}
.allProductSingle5 .containers .container2 .prices {
  display: flex;
  justify-content: left;
  align-items: center;
  gap: 0.5rem;
}
.allProductSingle5 .containers .container2 .prices s {
  font-size: 0.9rem;
  font-weight: 500;
  color: #000;
  opacity: 0.5;
}
.allProductSingle5 .containers .container2 .prices .price {
  display: flex;
  justify-content: left;
  align-items: center;
  gap: 0.2rem;
  font-size: 1.1rem;
  font-weight: 900;
  color: #000;
}
.allProductSingle5 .containers .container2 .prices .price:after {
  content: "\f06c︎";
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  font-weight: 400;
  opacity: 0.5;
  letter-spacing: normal;
  font-family: digikala;
  font-size: 1.1rem;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-style: normal;
  font-variant: normal;
  font-weight: 400;
  text-decoration: none;
  text-transform: none;
  line-height: 1;
  box-sizing: inherit;
}
.allProductSingle5 .containers .container2 .prices .off {
  background: #fff5f0;
  padding: 1px 5px;
  color: var(--green-color);
  font-size: 0.8rem;
  font-weight: 800;
  border-radius: 5px;
}
.allProductSingle5 .containers .container2 .addCarts {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  grid-gap: 0.5rem;
  margin: 2rem 0;
}
.allProductSingle5 .containers .container2 .addCarts .option {
  height: 3rem;
  width: 3rem;
  border-radius: 5px;
  background: white;
  border: 1px solid #eee;
  display: grid;
  align-items: center;
  justify-content: center;
  position: relative;
  cursor: pointer;
}
.allProductSingle5 .containers .container2 .addCarts .option i {
  display: grid;
  align-items: center;
}
.allProductSingle5 .containers .container2 .addCarts .option i svg {
  width: 1.5rem;
  height: 1.5rem;
  fill: #000;
}
.allProductSingle5 .containers .container2 .addCarts .option .num {
  position: absolute;
  top: 0;
  left: 0;
  background: var(--green-color);
  width: 1.1rem;
  font-size: 0.6rem;
  height: 1.1rem;
  display: grid;
  justify-content: center;
  align-items: center;
  border-radius: 100%;
  color: white;
}
.allProductSingle5 .containers .container2 .addCarts .addCart {
  display: flex;
  justify-content: center;
  align-items: center;
  grid-gap: 1rem;
  background: var(--green-color);
  height: 3rem;
  border-radius: 5px;
  cursor: pointer;
}
.allProductSingle5 .containers .container2 .addCarts .addCart i {
  display: grid;
  align-items: center;
}
.allProductSingle5 .containers .container2 .addCarts .addCart i svg {
  width: 1.3rem;
  height: 1.3rem;
  fill: white;
}
.allProductSingle5 .containers .container2 .addCarts .addCart .name {
  font-size: 1.1rem;
  font-weight: 900;
  color: white;
}
.allProductSingle5 .containers .container2 .addCarts .empty {
  display: flex;
  justify-content: center;
  align-items: center;
  grid-gap: 1rem;
  background: red;
  height: 3rem;
  border-radius: 5px;
  cursor: pointer;
}
.allProductSingle5 .containers .container2 .addCarts .empty i {
  display: grid;
  align-items: center;
}
.allProductSingle5 .containers .container2 .addCarts .empty i svg {
  width: 1.3rem;
  height: 1.3rem;
  fill: white;
}
.allProductSingle5 .containers .container2 .addCarts .empty .name {
  font-size: 1rem;
  font-weight: 700;
  color: white;
}
.allProductSingle5 .containers .container2 .addCarts .empty .price {
  font-size: 0.8rem;
  font-weight: 500;
  background: white;
  padding: 0.2rem 0.5rem;
  border-radius: 5px;
}
.allProductSingle5 .containers .container2 .box {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  justify-content: right;
  margin-top: 1rem;
}
.allProductSingle5 .containers .container2 .box i {
  display: grid;
  align-items: center;
  justify-content: center;
}
.allProductSingle5 .containers .container2 .box i svg {
  width: 1rem;
  height: 1rem;
  fill: #444;
  color: #444;
}
.allProductSingle5 .containers .container2 .box .name {
  text-align: center;
  font-size: 0.8rem;
  font-weight: 500;
  color: #444;
}
.allProductSingle5 .containers .container2 .seller {
  background: white;
  border-radius: 10px;
  padding: 1rem;
  margin-top: 1rem;
  box-shadow: 0px 4px 8px 3px hsla(240, 5%, 73%, 0.3), 0px 1px 3px 0px hsla(240, 5%, 73%, 0.15);
}
.allProductSingle5 .containers .container2 .seller .profile {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  margin-bottom: 2rem;
}
.allProductSingle5 .containers .container2 .seller .profile .pic {
  overflow: hidden;
}
.allProductSingle5 .containers .container2 .seller .profile .pic img {
  max-width: 6rem;
  height: 4rem;
  object-fit: contain;
}
.allProductSingle5 .containers .container2 .seller .profile .detail .name {
  font-size: 1rem;
  font-weight: 500;
  color: #000;
}
.allProductSingle5 .containers .container2 .seller .profile .detail .city {
  display: flex;
  align-items: center;
  gap: 0.2rem;
  font-size: 0.8rem;
  font-weight: 500;
  color: #444;
  opacity: 0.7;
}
.allProductSingle5 .containers .container2 .seller .profile .detail .city i {
  display: grid;
  align-items: center;
}
.allProductSingle5 .containers .container2 .seller .profile .detail .city i svg {
  width: 0.9rem;
  height: 0.9rem;
  fill: #444;
}
.allProductSingle5 .containers .container2 .seller .showAll {
  display: flex;
  justify-content: right;
  align-items: center;
  gap: 0.5rem;
  margin-top: 1rem;
  font-size: 0.8rem;
  font-weight: 500;
  color: #000;
  opacity: 0.7;
}
.allProductSingle5 .containers .container2 .seller .showAll span {
  display: flex;
  justify-content: right;
  align-items: center;
  gap: 0.3rem;
  color: red;
}
.allProductSingle5 .containers .container2 .seller .showAll span:before {
  content: "";
  width: 6px;
  height: 6px;
  background: red;
  border-radius: 50%;
}
.allProductSingle5 .containers .container2 .seller .showAll .active {
  color: green;
}
.allProductSingle5 .containers .container2 .seller .showAll .active:before {
  background: green;
}
.allProductSingle5 .containers .container2 .seller .social {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 1rem;
  margin-top: 1rem;
}
.allProductSingle5 .containers .container2 .seller .social .chat, .allProductSingle5 .containers .container2 .seller .social .info {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem;
  border-radius: 5px;
  text-align: center;
  font-size: 0.9rem;
  font-weight: 900;
  border: 2px solid #eee;
  color: #000;
  cursor: pointer;
}
.allProductSingle5 .containers .container2 .seller .social .chat i, .allProductSingle5 .containers .container2 .seller .social .info i {
  display: grid;
  align-items: center;
}
.allProductSingle5 .containers .container2 .seller .social .chat i svg, .allProductSingle5 .containers .container2 .seller .social .info i svg {
  width: 1.2rem;
  height: 1.2rem;
  fill: #000;
}
.allProductSingle5 .containers .container2 .seller .become {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 2rem;
}
.allProductSingle5 .containers .container2 .seller .become .name {
  font-size: 1rem;
  font-weight: 500;
  color: #444;
}
.allProductSingle5 .containers .container2 .seller .become a {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: #1c2575;
  font-size: 0.85rem;
  font-weight: 700;
}
.allProductSingle5 .containers .container2 .seller .become a i {
  display: grid;
  align-items: center;
}
.allProductSingle5 .containers .container2 .seller .become a i svg {
  width: 1rem;
  height: 1rem;
  fill: #1c2575;
}
.allProductSingle5 .containers .container2 .cartBox {
  background: white;
  border-radius: 10px;
  padding: 1rem;
  margin-top: 5rem;
  box-shadow: 0px 4px 8px 3px hsla(240, 5%, 73%, 0.3), 0px 1px 3px 0px hsla(240, 5%, 73%, 0.15);
  position: sticky;
  top: 5rem;
}
.allProductSingle5 .containers .container2 .cartBox .top {
  display: grid;
  grid-template-columns: auto 1fr;
  justify-content: right;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1rem;
}
.allProductSingle5 .containers .container2 .cartBox .top .pic {
  border-radius: 10px;
  overflow: hidden;
}
.allProductSingle5 .containers .container2 .cartBox .top .pic img {
  height: 5rem;
  width: 5rem;
  object-fit: contain;
}
.allProductSingle5 .containers .container2 .cartBox .top .title2 {
  font-size: 1rem;
  font-weight: 700;
  color: #444;
}
.allProductSingle5 .containers .container2 .cartBox .addCarts {
  display: block;
  margin: 1rem 0;
}
.allProductSingle5 .containers .container2 .cartBox .seller {
  border: 2px solid #eee;
  box-shadow: unset;
}
.allProductSingle5 .addRes {
  display: none;
}
.allProductSingle5 .related {
  margin-top: 4rem;
}
.allProductSingle5 .related .title {
  font-size: 1.1rem;
  font-weight: 900;
  color: black;
  margin-bottom: 1rem;
}
.allProductSingle5 .related .items {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
  grid-gap: 1rem;
}
.allProductSingle5 .related .items .item {
  border-radius: 15px;
  display: grid;
  overflow: hidden;
  background: white;
  border: 1px solid #eee;
}
.allProductSingle5 .related .items .item .pic img {
  height: 12rem;
  object-fit: contain;
  width: 100%;
}
.allProductSingle5 .related .items .item .des {
  overflow: hidden;
  padding: 0.5rem;
}
.allProductSingle5 .related .items .item .des .title2 {
  font-size: 0.85rem;
  font-weight: 700;
  color: #000;
  height: 3rem;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  text-overflow: ellipsis;
  margin-top: 1rem;
}
.allProductSingle5 .related .items .item .des .seller {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  opacity: 0.8;
  font-size: 0.75rem;
  font-weight: 300;
  color: #000;
  margin: 0.5rem 0;
}
.allProductSingle5 .related .items .item .des .seller i {
  display: grid;
  align-items: center;
}
.allProductSingle5 .related .items .item .des .seller i svg {
  width: 1rem;
  height: 1rem;
  fill: #444;
}
.allProductSingle5 .related .items .item .des .seller span {
  opacity: 0.5;
}
.allProductSingle5 .related .items .item .des .rate {
  display: flex;
  align-items: center;
  gap: 0.2rem;
  font-size: 0.8rem;
  font-weight: 900;
  color: #444;
  margin-bottom: 1rem;
}
.allProductSingle5 .related .items .item .des .rate i {
  display: grid;
  align-items: center;
}
.allProductSingle5 .related .items .item .des .rate i svg {
  width: 0.8rem;
  height: 0.8rem;
  fill: orangered;
}
.allProductSingle5 .related .items .item .des .rate span {
  font-weight: 300;
  color: #000;
  font-size: 0.75rem;
}
.allProductSingle5 .related .items .item .des .offContent {
  background: #fff5f0;
  padding: 0.5rem;
  border-radius: 5px;
}
.allProductSingle5 .related .items .item .des .offContent .off {
  display: flex;
  align-items: center;
  justify-content: left;
}
.allProductSingle5 .related .items .item .des .offContent .off small {
  font-size: 0.8rem;
  font-weight: 700;
  color: red;
}
.allProductSingle5 .related .items .item .des .offContent .off span {
  font-size: 1rem;
  font-weight: 900;
  color: red;
}
.allProductSingle5 .related .items .item .des .offContent .off s {
  font-size: 0.9rem;
  font-weight: 700;
  color: #444;
  opacity: 0.6;
  margin-left: 0.5rem;
}
.allProductSingle5 .related .items .item .des .price {
  display: flex;
  justify-content: left;
  gap: 3px;
  font-size: 1.1rem;
  font-weight: 900;
  color: #000;
}
.allProductSingle5 .related .items .item .des .price:after {
  opacity: 0.5;
  content: "\f06c︎";
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  font-weight: 400;
  letter-spacing: normal;
  font-family: digikala;
  font-size: 1.1rem;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-style: normal;
  font-variant: normal;
  font-weight: 400;
  text-decoration: none;
  text-transform: none;
  line-height: 1;
  box-sizing: inherit;
}
.allProductSingle5 .related .items .item .des .content {
  display: flex;
  align-items: end;
  height: 3.5rem;
  border-top: 1px solid #eee;
  margin-top: 1rem;
  font-size: 1rem;
  font-weight: 700;
  color: #000;
}
.allProductSingle5 .related .items .item .des .content span {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
.allProductSingle5 .sellerInfo {
  background: rgba(0, 0, 0, 0.5);
  z-index: 4000;
  position: fixed;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-columns: 1fr;
  justify-content: center;
}
.allProductSingle5 .sellerInfo .data {
  width: 30%;
  margin: auto;
  background: white;
  display: grid;
  grid-template-columns: 1fr;
  border-radius: 20px;
  overflow: hidden;
}
.allProductSingle5 .sellerInfo .data .title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem;
  border-bottom: 2px solid #eee;
}
.allProductSingle5 .sellerInfo .data .title .name {
  font-size: 1.5rem;
  font-weight: 900;
  color: #444;
}
.allProductSingle5 .sellerInfo .data .title .location {
  display: flex;
  justify-content: left;
  align-items: center;
  gap: 0.3rem;
  font-size: 1rem;
  font-weight: 500;
  color: var(--green-color);
}
.allProductSingle5 .sellerInfo .data .title .location i {
  display: grid;
  align-items: center;
}
.allProductSingle5 .sellerInfo .data .title .location i svg {
  width: 1.2rem;
  height: 1.2rem;
  fill: var(--green-color);
}
.allProductSingle5 .sellerInfo .data .profile {
  margin: 1rem 0;
  padding: 0 1rem;
}
.allProductSingle5 .sellerInfo .data .profile .pic {
  display: grid;
  justify-content: center;
}
.allProductSingle5 .sellerInfo .data .profile .pic img {
  width: auto;
  height: 5rem;
  object-fit: cover;
}
.allProductSingle5 .sellerInfo .data .profile .name {
  font-size: 1.3rem;
  font-weight: 900;
  color: black;
  text-align: center;
  margin-top: 0.5rem;
}
.allProductSingle5 .sellerInfo .data .profile p {
  font-size: 0.9rem;
  font-weight: 300;
  text-align: center;
  margin-top: 0.5rem;
  line-height: 2rem;
  color: #444;
  white-space: pre-line;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  box-orient: vertical;
  -webkit-box-orient: vertical;
  line-clamp: 2;
  -webkit-line-clamp: 2;
  overflow: hidden;
  text-overflow: ellipsis;
}
.allProductSingle5 .sellerInfo .data .options {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 1rem;
  padding: 0 1rem;
}
.allProductSingle5 .sellerInfo .data .options .option {
  background: #f5f5f5;
  padding: 0.5rem 1rem;
  text-align: center;
  border-radius: 10px;
}
.allProductSingle5 .sellerInfo .data .options .option .body2 {
  font-size: 1.2rem;
  font-weight: 700;
  color: black;
}
.allProductSingle5 .sellerInfo .data .options .option .title2 {
  font-size: 1rem;
  font-weight: 500;
  color: #444;
  opacity: 0.7;
}
.allProductSingle5 .sellerInfo .data label {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  grid-gap: 0.5rem;
  margin: 1rem;
}
.allProductSingle5 .sellerInfo .data label input {
  border: 1px solid #ddd;
  font-size: 1rem;
  padding: 0.7rem 1rem;
  border-radius: 5rem;
  font-weight: 700;
  opacity: 0.7;
}
.allProductSingle5 .sellerInfo .data label i {
  display: grid;
  align-items: center;
  justify-content: center;
  transform: rotate(-135deg);
  border: 1px solid var(--green-color);
  border-radius: 50%;
  width: 3rem;
  height: 3rem;
}
.allProductSingle5 .sellerInfo .data label i svg {
  width: 1.2rem;
  height: 1.2rem;
  fill: var(--green-color);
}
.allProductSingle5 .sellerInfo .data .time {
  font-size: 1rem;
  font-weight: 300;
  color: #444;
  text-align: center;
  margin-right: 1rem;
}
.allProductSingle5 .sellerInfo .data .time span {
  color: red;
  font-weight: 700;
}
.allProductSingle5 .sellerInfo .data .time .active {
  color: green;
}
.allProductSingle5 .sellerInfo .data .buttons {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 1rem;
  padding: 1rem;
}
.allProductSingle5 .sellerInfo .data .buttons a {
  padding: 0.5rem 1rem;
  border-radius: 5px;
  font-size: 1rem;
  text-align: center;
  background: white;
  font-weight: 700;
  color: var(--green-color);
  border: 2px solid var(--green-color);
}
.allProductSingle5 .sellerInfo .data .buttons a:last-child {
  color: white;
  border: 2px solid var(--green-color);
  background: var(--green-color);
}
.allProductSingle5 .allTicket {
  background: rgba(0, 0, 0, 0.5);
  z-index: 4000;
  position: fixed;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-columns: 1fr;
  justify-content: center;
}
.allProductSingle5 .allTicket .chatContent {
  width: 40%;
  margin: auto;
  background: white;
  display: grid;
  grid-template-columns: 1fr;
  border-radius: 20px;
  overflow: hidden;
}
.allProductSingle5 .allTicket .chatContent .header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem;
  background: white;
}
.allProductSingle5 .allTicket .chatContent .header .profile {
  display: flex;
  justify-content: right;
  gap: 0.5rem;
  align-items: center;
}
.allProductSingle5 .allTicket .chatContent .header .profile .pic {
  overflow: hidden;
  border-radius: 50%;
}
.allProductSingle5 .allTicket .chatContent .header .profile .pic img {
  width: 3rem;
  height: 3rem;
  object-fit: cover;
}
.allProductSingle5 .allTicket .chatContent .header .profile .name {
  font-size: 1.2rem;
  font-weight: 300;
  color: black;
}
.allProductSingle5 .allTicket .chatContent .header .leftHeader {
  display: flex;
  justify-content: left;
  gap: 0.5rem;
}
.allProductSingle5 .allTicket .chatContent .header i {
  display: grid;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.allProductSingle5 .allTicket .chatContent .header i svg {
  width: 1.3rem;
  height: 1.3rem;
  fill: #444;
}
.allProductSingle5 .allTicket .chatContent .body {
  padding: 0.5rem;
  overflow-y: scroll;
  height: 30rem;
}
.allProductSingle5 .allTicket .chatContent .body p {
  display: none;
  font-size: 0.8rem;
  font-weight: 300;
  color: #000;
  opacity: 0.7;
}
.allProductSingle5 .allTicket .chatContent .body p .closeChats {
  padding: 0.2rem 0.4rem;
  background: red;
  color: white;
  border-radius: 5px;
  font-size: 0.7rem;
  cursor: pointer;
}
.allProductSingle5 .allTicket .chatContent .body .choice {
  display: grid;
  padding: 0.8rem;
  border: 1px solid #bbb;
  font-size: 0.9rem;
  font-weight: 300;
  color: #000;
  margin-top: 0.5rem;
  border-radius: 5px;
  cursor: pointer;
  transition: all 0.3s ease-in-out;
}
.allProductSingle5 .allTicket .chatContent .body .choice:hover {
  color: var(--green-color);
  border: 1px solid var(--green-color);
}
.allProductSingle5 .allTicket .chatContent .body .login {
  display: grid;
}
.allProductSingle5 .allTicket .chatContent .body .bodyLabel {
  display: grid;
  grid-template-columns: 1fr;
  grid-gap: 0.5rem;
  font-size: 0.9rem;
  font-weight: 300;
  color: #000;
  margin-top: 1rem;
}
.allProductSingle5 .allTicket .chatContent .body .bodyLabel input, .allProductSingle5 .allTicket .chatContent .body .bodyLabel select, .allProductSingle5 .allTicket .chatContent .body .bodyLabel textarea {
  background: var(--back1-color);
  border: 1px solid #eee;
  padding: 0.3rem 0.5rem;
  color: #000;
  border-radius: 5px;
  font-size: 0.9rem;
  font-weight: 300;
  width: 100%;
  transition: all 0.3s ease-in-out;
}
.allProductSingle5 .allTicket .chatContent .body .message11 {
  margin-top: 1rem;
  font-size: 0.9rem;
  font-weight: 300;
  color: #444;
}
.allProductSingle5 .allTicket .chatContent .body .message11 .time {
  font-size: 0.7rem;
}
.allProductSingle5 .allTicket .chatContent .body .message11 .messages {
  padding: 0.5rem;
  border-radius: 10px;
  border: 2px solid #bbb;
}
.allProductSingle5 .allTicket .chatContent .body .messages {
  background: white;
}
.allProductSingle5 .allTicket .chatContent .body .opp {
  display: grid;
  justify-content: left;
  text-align: left;
}
.allProductSingle5 .allTicket .chatContent .body .me {
  display: grid;
  justify-content: right;
  text-align: right;
}
.allProductSingle5 .allTicket .chatContent .body .me .messages {
  border: 2px solid var(--green-color);
}
.allProductSingle5 .allTicket .chatContent .body .submit {
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--green-color);
  text-align: center;
  background: transparent;
  width: 100%;
  border: 1px solid var(--green-color);
  padding: 0.5rem 1rem;
  border-radius: 5px;
  margin-top: 1rem;
  transition: all 0.3s ease-in-out;
}
.allProductSingle5 .allTicket .chatContent .body .submit:hover {
  background: var(--green-color);
  color: white;
}
.allProductSingle5 .allTicket .chatContent .body .sendImage {
  background: white;
  border-radius: 10px;
  overflow: hidden;
  display: grid;
  grid-template-columns: 1fr;
  justify-content: center;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
  margin-top: 1rem;
}
.allProductSingle5 .allTicket .chatContent .body .sendImage .dropify-wrapper {
  height: 100px;
  border: 1px solid #eee !important;
}
.allProductSingle5 .allTicket .chatContent .body .sendImage .dropify-wrapper .file-icon:before {
  opacity: 0 !important;
  position: absolute !important;
  top: 0 !important;
  visibility: hidden !important;
}
.allProductSingle5 .allTicket .chatContent .body .sendImage .dropify-wrapper .dropify-message {
  position: relative !important;
  top: auto !important;
  margin-top: 2rem;
}
.allProductSingle5 .allTicket .chatContent .body .sendImage .dropify-wrapper .dropify-message p {
  margin: 0;
  font-size: 1rem;
  color: rgba(0, 128, 0, 0.5098039216);
}
.allProductSingle5 .allTicket .chatContent .send {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-gap: 1rem;
  padding: 0.5rem;
}
.allProductSingle5 .allTicket .chatContent .send input {
  background: white;
  border: 1px solid #eee;
  padding: 0.5rem 1rem;
  color: #000;
  border-radius: 5rem;
  font-size: 1rem;
  font-weight: 300;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
  width: 100%;
  transition: all 0.3s ease-in-out;
}
.allProductSingle5 .allTicket .chatContent .send button {
  font-size: 0.9rem;
  font-weight: 300;
  color: white;
  border-radius: 5rem;
  background: var(--green-color);
  padding: 0 1rem;
}
.allProductSingle5 .allTicket .chatContent .loginChat {
  background: red;
  border-top: 1px solid #eee;
  padding: 0.5rem;
  text-align: center;
  font-size: 0.8rem;
  font-weight: 300;
  color: white;
  display: grid;
  width: 100%;
}
.allProductSingle5 .allTicket .chatContent .typeLogin1 {
  margin-top: 1rem;
  border-radius: 5px;
}
.allProductSingle5 .allChangeList {
  background: rgba(0, 0, 0, 0.5);
  z-index: 4000;
  position: fixed;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-columns: 1fr;
  justify-content: center;
}
.allProductSingle5 .allChangeList .changeList {
  width: 40%;
  margin: auto;
  background: white;
  display: grid;
  grid-template-columns: 1fr;
  border-radius: 20px;
  overflow: hidden;
  padding: 2rem;
}
.allProductSingle5 .allChangeList .changeList .title2 {
  text-align: center;
  font-size: 1.2rem;
  font-weight: 700;
  color: black;
  margin-bottom: 1rem;
}

@media screen and (max-width: 800px) {
  .allProductSingle5 {
    width: 100% !important;
    margin-top: 0;
  }
  .allProductSingle5 .address {
    display: none;
  }
  .allProductSingle5 .res1 {
    display: flex;
  }
  .allProductSingle5 .containers {
    display: flex;
    flex-direction: column-reverse;
    align-items: unset;
    grid-gap: 0;
  }
  .allProductSingle5 .containers .container1 {
    padding: 0.5rem;
  }
  .allProductSingle5 .containers .container1 .gallery, .allProductSingle5 .containers .container1 .options1 {
    display: none;
  }
  .allProductSingle5 .containers .container1 .description1 {
    padding: 0.5rem;
    margin-top: 0;
  }
  .allProductSingle5 .containers .container1 .description1 .title {
    font-size: 0.9rem;
  }
  .allProductSingle5 .containers .container1 .description1 .title i svg {
    width: 1rem;
    height: 1rem;
  }
  .allProductSingle5 .containers .container1 .description1 ul li {
    margin-top: 0.5rem;
  }
  .allProductSingle5 .containers .container1 .description1 ul li .body2 {
    font-size: 0.8rem;
  }
  .allProductSingle5 .containers .container1 .description1 p {
    font-size: 0.8rem;
  }
  .allProductSingle5 .containers .container1 .description1 .showM {
    font-size: 0.7rem;
    margin-top: 0.5rem;
  }
  .allProductSingle5 .containers .container1 .comment1 {
    padding: 0.5rem;
  }
  .allProductSingle5 .containers .container2 .top1, .allProductSingle5 .containers .container2 .seller {
    display: none;
  }
  .allProductSingle5 .containers .container2 .resSlider {
    display: block;
  }
  .allProductSingle5 .containers .container2 .resSlider img {
    width: 100%;
    max-height: 30rem;
  }
  .allProductSingle5 .containers .container2 .cartBox {
    position: relative;
    top: auto;
    border-radius: 0;
    padding: 0.5rem;
    margin-top: 0;
    box-shadow: unset;
  }
  .allProductSingle5 .containers .container2 .cartBox .top {
    display: block;
  }
  .allProductSingle5 .containers .container2 .cartBox .top .pic {
    display: none;
  }
  .allProductSingle5 .containers .container2 .cartBox .top .title2 {
    font-size: 1.1rem;
    font-weight: 700;
    color: black;
  }
  .allProductSingle5 .containers .container2 .cartBox .seller {
    display: block;
    padding: 0.5rem;
  }
  .allProductSingle5 .containers .container2 .cartBox .seller .profile .pic img {
    max-width: 4rem;
    height: 3rem;
  }
  .allProductSingle5 .containers .container2 .cartBox .seller .profile .detail .name {
    font-size: 0.85rem;
  }
  .allProductSingle5 .containers .container2 .cartBox .seller .profile .detail .city {
    font-size: 0.7rem;
  }
  .allProductSingle5 .containers .container2 .cartBox .seller .profile .detail .city i svg {
    width: 0.7rem;
    height: 0.7rem;
  }
  .allProductSingle5 .containers .container2 .cartBox .seller .showAll {
    margin-top: 0.5rem;
    font-size: 0.8rem;
  }
  .allProductSingle5 .containers .container2 .cartBox .seller .showAll span:before {
    width: 5px;
    height: 5px;
  }
  .allProductSingle5 .containers .container2 .cartBox .seller .social {
    grid-gap: 0.5rem;
    margin-top: 0.5rem;
  }
  .allProductSingle5 .containers .container2 .cartBox .seller .social .chat, .allProductSingle5 .containers .container2 .cartBox .seller .social .info {
    font-size: 0.8rem;
    font-weight: 700;
  }
  .allProductSingle5 .containers .container2 .cartBox .seller .social .chat i svg, .allProductSingle5 .containers .container2 .cartBox .seller .social .info i svg {
    width: 1rem;
    height: 1rem;
  }
  .allProductSingle5 .containers .container2 .cartBox .seller .become {
    margin-top: 1rem;
  }
  .allProductSingle5 .containers .container2 .cartBox .seller .become .name {
    font-size: 0.9rem;
  }
  .allProductSingle5 .containers .container2 .cartBox .seller .become a {
    font-size: 0.75rem;
  }
  .allProductSingle5 .containers .container2 .cartBox .seller .become a i svg {
    width: 0.9rem;
    height: 0.9rem;
  }
  .allProductSingle5 .containers .container2 .cartBox .prices, .allProductSingle5 .containers .container2 .cartBox .addCarts {
    display: none;
  }
  .allProductSingle5 .addRes {
    display: block;
    position: fixed;
    bottom: 0;
    right: 0;
    left: 0;
    z-index: 120;
    padding: 0.5rem;
    background: white;
    box-shadow: 0 -10px 10px rgba(0, 0, 0, 0.1);
  }
  .allProductSingle5 .addRes .top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
  }
  .allProductSingle5 .addRes .top .prices .name {
    font-size: 0.8rem;
    font-weight: 500;
    color: #000;
  }
  .allProductSingle5 .addRes .top .prices .price {
    display: flex;
    gap: 0.2rem;
    align-items: center;
    font-size: 0.85rem;
    font-weight: 700;
    color: black;
  }
  .allProductSingle5 .addRes .top .prices .price span {
    font-size: 0.6rem;
  }
  .allProductSingle5 .addRes .top select {
    padding: 0.2rem 0.8rem;
    background: transparent;
    border-radius: 10px;
    font-size: 1rem;
    font-weight: 500;
    color: #000;
    border: 1px solid #eee;
  }
  .allProductSingle5 .addRes .top .final .price {
    font-size: 1.3rem;
  }
  .allProductSingle5 .addRes .top .final .price span {
    opacity: 0.7;
    font-size: 0.7rem;
  }
  .allProductSingle5 .addRes .bot {
    display: grid;
    grid-template-columns: 1fr auto auto;
    grid-gap: 0.5rem;
  }
  .allProductSingle5 .addRes .bot .addCart {
    background: var(--green-color);
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9rem;
    font-weight: 500;
    color: white;
    border-radius: 5px;
    padding: 0.5rem;
  }
  .allProductSingle5 .addRes .bot .addCart i {
    display: grid;
    align-items: center;
  }
  .allProductSingle5 .addRes .bot .addCart i svg {
    width: 1.1rem;
    height: 1.1rem;
    fill: white;
  }
  .allProductSingle5 .addRes .bot .info, .allProductSingle5 .addRes .bot .chat {
    display: grid;
    padding: 0.5rem;
    border-radius: 5px;
    border: 2px solid #eee;
  }
  .allProductSingle5 .addRes .bot .info i, .allProductSingle5 .addRes .bot .chat i {
    display: grid;
    align-items: center;
  }
  .allProductSingle5 .addRes .bot .info i svg, .allProductSingle5 .addRes .bot .chat i svg {
    width: 1.2rem;
    height: 1.2rem;
    fill: #000;
  }
  .allProductSingle5 .sellerInfo .data {
    width: 98%;
    border-radius: 10px;
  }
  .allProductSingle5 .sellerInfo .data .title {
    padding: 0.5rem;
  }
  .allProductSingle5 .sellerInfo .data .title .name {
    font-size: 1rem;
  }
  .allProductSingle5 .sellerInfo .data .title .location {
    font-size: 0.8rem;
  }
  .allProductSingle5 .sellerInfo .data .title .location i svg {
    width: 0.9rem;
    height: 0.9rem;
  }
  .allProductSingle5 .sellerInfo .data .profile {
    margin: 0.5rem 0;
    padding: 0 0.5rem;
  }
  .allProductSingle5 .sellerInfo .data .profile .pic img {
    height: 4rem;
  }
  .allProductSingle5 .sellerInfo .data .profile .name {
    font-size: 1rem;
  }
  .allProductSingle5 .sellerInfo .data .profile p {
    font-size: 0.8rem;
  }
  .allProductSingle5 .sellerInfo .data .options {
    display: grid;
    grid-gap: 0.5rem;
    padding: 0 0.5rem;
  }
  .allProductSingle5 .sellerInfo .data .options .option {
    padding: 0.5rem;
  }
  .allProductSingle5 .sellerInfo .data .options .option .body2 {
    font-size: 0.9rem;
  }
  .allProductSingle5 .sellerInfo .data .options .option .title2 {
    font-size: 0.8rem;
  }
  .allProductSingle5 .sellerInfo .data label {
    margin: 0.5rem;
  }
  .allProductSingle5 .sellerInfo .data label input {
    font-size: 0.85rem;
    padding: 0.5rem 0.8rem;
  }
  .allProductSingle5 .sellerInfo .data label i {
    width: 2.5rem;
    height: 2.5rem;
  }
  .allProductSingle5 .sellerInfo .data label i svg {
    width: 1rem;
    height: 1rem;
  }
  .allProductSingle5 .sellerInfo .data .time {
    font-size: 0.9rem;
    margin-right: 0.5rem;
  }
  .allProductSingle5 .sellerInfo .data .buttons {
    grid-gap: 0.5rem;
    padding: 0.5rem;
  }
  .allProductSingle5 .sellerInfo .data .buttons a {
    padding: 0.5rem;
    font-size: 0.8rem;
  }
  .allProductSingle5 .allTicket .chatContent {
    width: 100%;
    border-radius: 0;
  }
  .allProductSingle5 .allTicket .chatContent .header .profile .pic img {
    width: 2rem;
    height: 2rem;
  }
  .allProductSingle5 .allTicket .chatContent .header .profile .name {
    font-size: 0.8rem;
  }
  .allProductSingle5 .allTicket .chatContent .header i svg {
    width: 1.1rem;
    height: 1.1rem;
  }
  .allProductSingle5 .allTicket .chatContent .body {
    height: calc(100vh - 6.4rem);
  }
  .allProductSingle5 .allTicket .chatContent .body p {
    font-size: 0.7rem;
  }
  .allProductSingle5 .allTicket .chatContent .body p .closeChats {
    padding: 0.2rem;
  }
  .allProductSingle5 .allTicket .chatContent .body .choice {
    padding: 0.5rem;
    font-size: 0.7rem;
  }
  .allProductSingle5 .allTicket .chatContent .body .bodyLabel {
    font-size: 0.7rem;
    margin-top: 0.5rem;
  }
  .allProductSingle5 .allTicket .chatContent .body .bodyLabel input, .allProductSingle5 .allTicket .chatContent .body .bodyLabel select, .allProductSingle5 .allTicket .chatContent .body .bodyLabel textarea {
    padding: 0.3rem;
    font-size: 0.7rem;
  }
  .allProductSingle5 .allTicket .chatContent .body .message11 {
    margin-top: 1rem;
    font-size: 0.8rem;
  }
  .allProductSingle5 .allTicket .chatContent .body .message11 .time {
    font-size: 0.6rem;
  }
  .allProductSingle5 .allTicket .chatContent .body .message11 .messages {
    padding: 0.3rem;
  }
  .allProductSingle5 .allTicket .chatContent .body .submit {
    font-size: 0.8rem;
    padding: 0.3rem 0.5rem;
    margin-top: 0.5rem;
  }
  .allProductSingle5 .allTicket .chatContent .body .sendImage {
    margin-top: 0.5rem;
  }
  .allProductSingle5 .allTicket .chatContent .send {
    grid-gap: 0.5rem;
    padding: 0.5rem;
  }
  .allProductSingle5 .allTicket .chatContent .send input {
    padding: 0.5rem;
    font-size: 0.85rem;
  }
  .allProductSingle5 .allTicket .chatContent .send button {
    font-size: 0.7rem;
    padding: 0 1rem;
  }
  .allProductSingle5 .allTicket .chatContent .loginChat {
    font-size: 1rem;
    height: 3.5rem;
    align-items: center;
  }
  .allProductSingle5 .allTicket .chatContent .typeLogin1 {
    margin-top: 0.5rem;
  }
  .allProductSingle5 .allChangeList .changeList {
    width: 100%;
    padding: 0.5rem;
  }
  .allProductSingle5 .allChangeList .changeList .title2 {
    font-size: 0.9rem;
    margin-bottom: 0.5rem;
  }
}
.allProductSingle6 {
  margin: auto;
  margin-top: 1rem;
}
.allProductSingle6 .address {
  display: flex;
  justify-content: right;
  align-items: center;
  position: relative;
  margin-bottom: 1rem;
  opacity: 0.5;
}
.allProductSingle6 .address i {
  display: grid;
  align-items: center;
  margin-left: 0.3rem;
}
.allProductSingle6 .address i svg {
  width: 1.1rem;
  height: 1.1rem;
  fill: #444;
}
.allProductSingle6 .address a {
  font-size: 0.9rem;
  font-weight: 500;
  color: #444;
  white-space: pre-line;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  box-orient: vertical;
  -webkit-box-orient: vertical;
  line-clamp: 1;
  -webkit-line-clamp: 1;
  overflow: hidden;
  text-overflow: ellipsis;
}
.allProductSingle6 .address a:after {
  content: "/";
  padding: 0 0.4rem;
}
.allProductSingle6 .address a:last-child {
  opacity: 1;
}
.allProductSingle6 .address a:last-child:after {
  content: "";
  padding: 0;
}
.allProductSingle6 .res1 {
  display: none;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem;
  padding-top: 1rem;
}
.allProductSingle6 .res1 .left1, .allProductSingle6 .res1 .right1 {
  display: flex;
  justify-content: left;
  gap: 0.5rem;
  align-items: center;
}
.allProductSingle6 .res1 .left1 .option i, .allProductSingle6 .res1 .right1 .option i {
  display: grid;
  align-items: center;
}
.allProductSingle6 .res1 .left1 .option i svg, .allProductSingle6 .res1 .right1 .option i svg {
  width: 1.7rem;
  height: 1.7rem;
  fill: #000;
  color: #000;
}
.allProductSingle6 .res1 .right1 {
  justify-content: right;
}
.allProductSingle6 .res1 .right1 .option i svg {
  width: 1.3rem;
  height: 1.3rem;
}
.allProductSingle6 .containers {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  align-items: start;
  grid-gap: 1rem;
}
.allProductSingle6 .containers .container1 .gallery {
  display: grid;
  position: relative;
}
.allProductSingle6 .containers .container1 .gallery .showImage {
  border-radius: 10px;
  position: relative;
  background: white;
  overflow: hidden;
}
.allProductSingle6 .containers .container1 .gallery .showImage img {
  height: 100%;
  object-fit: cover;
  width: 100%;
}
.allProductSingle6 .containers .container1 .gallery .showImage .options {
  position: absolute;
  right: 1rem;
  top: 1rem;
  display: grid;
  gap: 1rem;
}
.allProductSingle6 .containers .container1 .gallery .showImage .options .option {
  border-radius: 50%;
  cursor: pointer;
  background: white;
  position: relative;
  height: 2.8rem;
  width: 2.8rem;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
}
.allProductSingle6 .containers .container1 .gallery .showImage .options .option i {
  display: grid;
  align-items: center;
  justify-content: center;
}
.allProductSingle6 .containers .container1 .gallery .showImage .options .option i svg {
  width: 1.3rem;
  height: 1.3rem;
  fill: black;
  transition: all 0.3s ease-in-out;
}
.allProductSingle6 .containers .container1 .gallery .showImage .options .option .num {
  position: absolute;
  right: 0;
  top: 0;
  background: var(--green-color);
  border-radius: 5px;
  padding: 0 5px;
  font-size: 0.6rem;
  font-weight: 300;
  color: white;
  transition: all 0.3s ease-in-out;
}
.allProductSingle6 .containers .container1 .gallery .imageSlider {
  display: grid;
  margin-top: 1rem;
}
.allProductSingle6 .containers .container1 .gallery .imageSlider figure {
  border-radius: 10px;
  border: 1px solid #eee;
  background: white;
  padding: 0.5rem;
  overflow: hidden;
}
.allProductSingle6 .containers .container1 .gallery .imageSlider figure img {
  width: 100%;
  object-fit: contain;
  height: 4rem;
}
.allProductSingle6 .containers .container1 .gallery button.owl-prev {
  position: absolute;
  right: 1rem;
  top: 0;
  bottom: 0;
}
.allProductSingle6 .containers .container1 .gallery button.owl-prev span {
  font-size: 2.5rem;
}
.allProductSingle6 .containers .container1 .gallery button.owl-next {
  position: absolute;
  left: 1rem;
  top: 0;
  bottom: 0;
}
.allProductSingle6 .containers .container1 .gallery button.owl-next span {
  font-size: 2.5rem;
}
.allProductSingle6 .containers .container2 .brands {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.allProductSingle6 .containers .container2 .brands .name {
  font-size: 0.9rem;
  font-weight: 500;
  color: #444;
}
.allProductSingle6 .containers .container2 .brands .val {
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--green-color);
}
.allProductSingle6 .containers .container2 h2 {
  font-size: 0.8rem;
  font-weight: 500;
  color: #444;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  text-overflow: ellipsis;
  margin: 0.5rem 0;
  opacity: 0.7;
}
.allProductSingle6 .containers .container2 h1 {
  font-size: 1rem;
  font-weight: 700;
  color: #000;
}
.allProductSingle6 .containers .container2 .resSlider {
  display: none;
}
.allProductSingle6 .containers .container2 .top1 {
  margin-bottom: 2rem;
}
.allProductSingle6 .containers .container2 .choice {
  padding: 0.5rem 0;
  margin-top: 1rem;
}
.allProductSingle6 .containers .container2 .choice .title1 {
  font-size: 0.85rem;
  font-weight: 500;
  color: #000;
  margin-bottom: 0.5rem;
}
.allProductSingle6 .containers .container2 .choice ul {
  display: flex;
  justify-content: right;
  align-items: center;
  gap: 0.5rem;
}
.allProductSingle6 .containers .container2 .choice ul li {
  position: relative;
  border: 1px solid #ddd;
  font-size: 0.8rem;
  font-weight: 300;
  background: white;
  color: #000;
  padding: 0.3rem 1rem;
  cursor: pointer;
  border-radius: 5px;
}
.allProductSingle6 .containers .container2 .choice ul li[data-empty=empty] {
  background: #ffbebe;
  opacity: 0.7;
  color: #555;
}
.allProductSingle6 .containers .container2 .choice ul li[data-empty=empty]:before {
  content: "ناموجود";
  position: absolute;
  left: 0;
  top: -0.5rem;
  font-size: 0.6rem;
  font-weight: 700;
  color: red;
}
.allProductSingle6 .containers .container2 .choice ul .active {
  border: 2px solid var(--green-color);
}
.allProductSingle6 .containers .container2 .choice:nth-child(2) {
  border-bottom: 0;
  padding-bottom: 0;
}
.allProductSingle6 .containers .container2 .choice:nth-child(3) {
  border-bottom: 0;
  padding-bottom: 0;
}
.allProductSingle6 .containers .container2 .abilities {
  margin-top: 1rem;
}
.allProductSingle6 .containers .container2 .abilities .name2 {
  font-size: 0.85rem;
  font-weight: 500;
  color: #000;
}
.allProductSingle6 .containers .container2 .abilities ul li {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  margin-top: 10px;
}
.allProductSingle6 .containers .container2 .abilities ul li .name1, .allProductSingle6 .containers .container2 .abilities ul li .body1 {
  font-size: 0.8rem;
  font-weight: 300;
  color: #444;
}
.allProductSingle6 .containers .container2 .abilities ul li .body1 {
  color: #000;
  font-weight: 500;
}
.allProductSingle6 .containers .container3 .buttons1 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 1rem;
  margin-bottom: 1rem;
}
.allProductSingle6 .containers .container3 .buttons1 .btn1 {
  background: black;
  border-radius: 10px;
  display: flex;
  align-items: center;
  gap: 1rem;
  color: white;
  font-size: 0.9rem;
  font-weight: 700;
  padding: 0.8rem 1rem;
  cursor: pointer;
}
.allProductSingle6 .containers .container3 .buttons1 .btn1 i {
  display: grid;
  align-items: center;
}
.allProductSingle6 .containers .container3 .buttons1 .btn1 i svg {
  width: 1.2rem;
  height: 1.2rem;
  fill: white;
}
.allProductSingle6 .containers .container3 .top3 {
  background: #F8F8F8;
  padding: 1rem;
  border-radius: 10px;
}
.allProductSingle6 .containers .container3 .top3 .prices .price {
  display: flex;
  justify-content: left;
  align-items: center;
  gap: 0.2rem;
  font-size: 1.3rem;
  font-weight: 900;
  color: #000;
}
.allProductSingle6 .containers .container3 .top3 .prices .price:after {
  content: "\f06c︎";
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  font-weight: 400;
  opacity: 0.5;
  letter-spacing: normal;
  font-family: digikala;
  font-size: 1.1rem;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-style: normal;
  font-variant: normal;
  font-weight: 400;
  text-decoration: none;
  text-transform: none;
  line-height: 1;
  box-sizing: inherit;
}
.allProductSingle6 .containers .container3 .top3 .prices .offer {
  display: flex;
  justify-content: left;
  gap: 0.5rem;
}
.allProductSingle6 .containers .container3 .top3 .prices .offer s {
  font-size: 0.8rem;
  font-weight: 300;
  color: #444;
}
.allProductSingle6 .containers .container3 .top3 .prices .offer span {
  background: red;
  border-radius: 8px;
  font-weight: 900;
  color: white;
  display: grid;
  box-shadow: 0 0 10px rgba(255, 0, 0, 0.3);
  align-items: center;
  line-height: 0.7rem;
  padding: 2px 5px;
  font-size: 0.7rem;
}
.allProductSingle6 .containers .container3 .top3 .addCarts {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  grid-gap: 0.5rem;
  margin-top: 2rem;
}
.allProductSingle6 .containers .container3 .top3 .addCarts .option {
  height: 3rem;
  width: 3rem;
  border-radius: 5px;
  background: white;
  border: 1px solid #eee;
  display: grid;
  align-items: center;
  justify-content: center;
  position: relative;
  cursor: pointer;
}
.allProductSingle6 .containers .container3 .top3 .addCarts .option i {
  display: grid;
  align-items: center;
}
.allProductSingle6 .containers .container3 .top3 .addCarts .option i svg {
  width: 1.5rem;
  height: 1.5rem;
  fill: #000;
}
.allProductSingle6 .containers .container3 .top3 .addCarts .option .num {
  position: absolute;
  top: 0;
  left: 0;
  background: var(--green-color);
  width: 1.1rem;
  font-size: 0.6rem;
  height: 1.1rem;
  display: grid;
  justify-content: center;
  align-items: center;
  border-radius: 100%;
  color: white;
}
.allProductSingle6 .containers .container3 .top3 .addCarts .addCart {
  display: flex;
  justify-content: center;
  align-items: center;
  grid-gap: 1rem;
  background: var(--green-color);
  height: 3rem;
  border-radius: 5px;
  cursor: pointer;
}
.allProductSingle6 .containers .container3 .top3 .addCarts .addCart i {
  display: grid;
  align-items: center;
}
.allProductSingle6 .containers .container3 .top3 .addCarts .addCart i svg {
  width: 1.3rem;
  height: 1.3rem;
  fill: white;
}
.allProductSingle6 .containers .container3 .top3 .addCarts .addCart .name {
  font-size: 1.1rem;
  font-weight: 900;
  color: white;
}
.allProductSingle6 .containers .container3 .top3 .addCarts .empty {
  display: flex;
  justify-content: center;
  align-items: center;
  grid-gap: 1rem;
  background: red;
  height: 3rem;
  border-radius: 5px;
  cursor: pointer;
}
.allProductSingle6 .containers .container3 .top3 .addCarts .empty i {
  display: grid;
  align-items: center;
}
.allProductSingle6 .containers .container3 .top3 .addCarts .empty i svg {
  width: 1.3rem;
  height: 1.3rem;
  fill: white;
}
.allProductSingle6 .containers .container3 .top3 .addCarts .empty .name {
  font-size: 1rem;
  font-weight: 700;
  color: white;
}
.allProductSingle6 .containers .container3 .top3 .addCarts .empty .price {
  font-size: 0.8rem;
  font-weight: 500;
  background: white;
  padding: 0.2rem 0.5rem;
  border-radius: 5px;
}
.allProductSingle6 .containers .container3 .top3 .score {
  margin-top: 1rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.8rem;
  font-weight: 500;
  color: #000;
}
.allProductSingle6 .containers .container3 .top3 .score .pic {
  display: grid;
  align-items: center;
}
.allProductSingle6 .containers .container3 .top3 .score .pic img {
  height: 1.5rem;
  width: 1.5rem;
  object-fit: contain;
}
.allProductSingle6 .containers .container3 .top3 .score span {
  color: red;
  font-weight: 900;
}
.allProductSingle6 .containers .container3 .top3 .carrier {
  margin-bottom: 1rem;
  display: grid;
  grid-template-columns: 1fr;
  grid-gap: 0.5rem;
  align-items: center;
  justify-content: space-between;
}
.allProductSingle6 .containers .container3 .top3 .carrier .name {
  font-size: 0.9rem;
  font-weight: 500;
  color: #000;
}
.allProductSingle6 .containers .container3 .top3 .carrier select {
  font-size: 0.9rem;
  font-weight: 500;
  color: #000;
  padding: 0.5rem 1rem;
  background: transparent;
  border-radius: 10px;
  border: 1px solid #eee;
}
.allProductSingle6 .containers .container3 .top3 .sellers {
  border-top: 1px solid #ddd;
  padding-top: 1rem;
  margin-top: 1rem;
}
.allProductSingle6 .containers .container3 .top3 .sellers .title1 {
  font-size: 0.9rem;
  font-weight: 700;
  color: #000;
  margin-bottom: 1rem;
}
.allProductSingle6 .containers .container3 .top3 .sellers .box .name {
  font-size: 0.85rem;
  font-weight: 500;
  color: #000;
}
.allProductSingle6 .containers .container3 .top3 .box {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  justify-content: right;
  margin-top: 1rem;
}
.allProductSingle6 .containers .container3 .top3 .box i {
  display: grid;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
}
.allProductSingle6 .containers .container3 .top3 .box i svg {
  width: 1rem;
  height: 1rem;
  fill: #444;
  color: #444;
}
.allProductSingle6 .containers .container3 .top3 .box .pic {
  display: grid;
  align-items: center;
}
.allProductSingle6 .containers .container3 .top3 .box .pic img {
  border-radius: 50%;
  width: 1.5rem;
  height: 1.5rem;
  object-fit: cover;
}
.allProductSingle6 .containers .container3 .top3 .box .name {
  text-align: center;
  font-size: 0.8rem;
  font-weight: 300;
  color: #444;
}
.allProductSingle6 .containers .container3 .seller {
  background: white;
  border-radius: 10px;
  padding: 1rem;
  margin-top: 1rem;
  box-shadow: 0px 4px 8px 3px hsla(240, 5%, 73%, 0.3), 0px 1px 3px 0px hsla(240, 5%, 73%, 0.15);
}
.allProductSingle6 .containers .container3 .seller .profile {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  margin-bottom: 2rem;
}
.allProductSingle6 .containers .container3 .seller .profile .pic {
  overflow: hidden;
}
.allProductSingle6 .containers .container3 .seller .profile .pic img {
  max-width: 6rem;
  height: 4rem;
  object-fit: contain;
}
.allProductSingle6 .containers .container3 .seller .profile .detail .name {
  font-size: 1rem;
  font-weight: 500;
  color: #000;
}
.allProductSingle6 .containers .container3 .seller .profile .detail .city {
  display: flex;
  align-items: center;
  gap: 0.2rem;
  font-size: 0.8rem;
  font-weight: 500;
  color: #444;
  opacity: 0.7;
}
.allProductSingle6 .containers .container3 .seller .profile .detail .city i {
  display: grid;
  align-items: center;
}
.allProductSingle6 .containers .container3 .seller .profile .detail .city i svg {
  width: 0.9rem;
  height: 0.9rem;
  fill: #444;
}
.allProductSingle6 .containers .container3 .seller .showAll {
  display: flex;
  justify-content: right;
  align-items: center;
  gap: 0.5rem;
  margin-top: 1rem;
  font-size: 0.8rem;
  font-weight: 500;
  color: #000;
  opacity: 0.7;
}
.allProductSingle6 .containers .container3 .seller .showAll span {
  display: flex;
  justify-content: right;
  align-items: center;
  gap: 0.3rem;
  color: red;
}
.allProductSingle6 .containers .container3 .seller .showAll span:before {
  content: "";
  width: 6px;
  height: 6px;
  background: red;
  border-radius: 50%;
}
.allProductSingle6 .containers .container3 .seller .showAll .active {
  color: green;
}
.allProductSingle6 .containers .container3 .seller .showAll .active:before {
  background: green;
}
.allProductSingle6 .containers .container3 .seller .social {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 1rem;
  margin-top: 1rem;
}
.allProductSingle6 .containers .container3 .seller .social .chat, .allProductSingle6 .containers .container3 .seller .social .info {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem;
  border-radius: 5px;
  text-align: center;
  font-size: 0.9rem;
  font-weight: 900;
  border: 2px solid #eee;
  color: #000;
  cursor: pointer;
}
.allProductSingle6 .containers .container3 .seller .social .chat i, .allProductSingle6 .containers .container3 .seller .social .info i {
  display: grid;
  align-items: center;
}
.allProductSingle6 .containers .container3 .seller .social .chat i svg, .allProductSingle6 .containers .container3 .seller .social .info i svg {
  width: 1.2rem;
  height: 1.2rem;
  fill: #000;
}
.allProductSingle6 .containers .container3 .seller .become {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 2rem;
}
.allProductSingle6 .containers .container3 .seller .become .name {
  font-size: 1rem;
  font-weight: 500;
  color: #444;
}
.allProductSingle6 .containers .container3 .seller .become a {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: #1c2575;
  font-size: 0.85rem;
  font-weight: 700;
}
.allProductSingle6 .containers .container3 .seller .become a i {
  display: grid;
  align-items: center;
}
.allProductSingle6 .containers .container3 .seller .become a i svg {
  width: 1rem;
  height: 1rem;
  fill: #1c2575;
}
.allProductSingle6 .containers .container3 .cartBox {
  background: white;
  border-radius: 10px;
  padding: 1rem;
  margin-top: 5rem;
  box-shadow: 0px 4px 8px 3px hsla(240, 5%, 73%, 0.3), 0px 1px 3px 0px hsla(240, 5%, 73%, 0.15);
  position: sticky;
  top: 5rem;
}
.allProductSingle6 .containers .container3 .cartBox .top {
  display: grid;
  grid-template-columns: auto 1fr;
  justify-content: right;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1rem;
}
.allProductSingle6 .containers .container3 .cartBox .top .pic {
  border-radius: 10px;
  overflow: hidden;
}
.allProductSingle6 .containers .container3 .cartBox .top .pic img {
  height: 5rem;
  width: 5rem;
  object-fit: contain;
}
.allProductSingle6 .containers .container3 .cartBox .top .title2 {
  font-size: 1rem;
  font-weight: 700;
  color: #444;
}
.allProductSingle6 .containers .container3 .cartBox .addCarts {
  display: block;
  margin: 1rem 0;
}
.allProductSingle6 .containers .container3 .cartBox .seller {
  border: 2px solid #eee;
  box-shadow: unset;
}
.allProductSingle6 .addRes {
  display: none;
}
.allProductSingle6 .bot1 {
  margin-top: 3rem;
  border-top: 1px solid #eee;
  padding-top: 3rem;
}
.allProductSingle6 .bot1 .tabs {
  display: flex;
  flex-wrap: wrap;
  justify-content: right;
  gap: 0.5rem;
  align-items: center;
  margin-bottom: 1rem;
  padding: 1rem;
  padding-bottom: 0;
  border-bottom: 2px solid #eee;
}
.allProductSingle6 .bot1 .tabs .tab {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.9rem;
  font-weight: 700;
  color: #444;
  cursor: pointer;
  padding: 0.5rem 1.5rem;
}
.allProductSingle6 .bot1 .tabs .tab i {
  display: grid;
  align-items: center;
  opacity: 0.6;
}
.allProductSingle6 .bot1 .tabs .tab i svg {
  width: 1.2rem;
  height: 1.2rem;
  fill: #000;
}
.allProductSingle6 .bot1 .tabs .tab span {
  background: white;
  border: 1px solid #eee;
  width: 1.5rem;
  height: 1.5rem;
  display: grid;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
  font-weight: 500;
  color: #000;
  border-radius: 5px;
}
.allProductSingle6 .bot1 .tabs .active {
  color: var(--green-color);
  border-bottom: 2px solid var(--green-color);
  margin-bottom: -1px;
}
.allProductSingle6 .bot1 .tabs .active i {
  opacity: 1;
}
.allProductSingle6 .bot1 .tabs .active i svg {
  fill: var(--green-color);
}
.allProductSingle6 .bot1 .data1 .des .title1 {
  font-size: 1rem;
  font-weight: 700;
  color: #000;
  margin-bottom: 0.5rem;
}
.allProductSingle6 .bot1 .data1 .des .body {
  margin-bottom: 1rem;
}
.allProductSingle6 .bot1 .data1 .des .body p {
  font-size: 0.9rem;
  font-weight: 500;
  color: #000;
  line-height: 2rem;
}
.allProductSingle6 .bot1 .data1 .des .body .image {
  display: grid;
  justify-content: center;
  margin: 1rem 0;
}
.allProductSingle6 .bot1 .data1 .des .body img {
  object-fit: cover !important;
  height: 600px !important;
  width: 100% !important;
  margin: 20px 0 !important;
}
.allProductSingle6 .bot1 .data1 .des .body ul, .allProductSingle6 .bot1 .data1 .des .body ol {
  margin: 2rem;
}
.allProductSingle6 .bot1 .data1 .des .body ul li, .allProductSingle6 .bot1 .data1 .des .body ol li {
  list-style: decimal;
  margin-bottom: 0.5rem;
  font-size: 0.9rem;
}
.allProductSingle6 .bot1 .data1 .des .body ul ul, .allProductSingle6 .bot1 .data1 .des .body ol ul {
  margin: 0;
  margin-top: 1rem;
  margin-right: 1rem;
}
.allProductSingle6 .bot1 .data1 .des .body ul li {
  list-style: disc;
}
.allProductSingle6 .bot1 .data1 .des .body table {
  margin: 1rem 0;
  border: 1px solid #eee;
  width: 100%;
}
.allProductSingle6 .bot1 .data1 .des .body table thead tr {
  background: #eee;
}
.allProductSingle6 .bot1 .data1 .des .body table tr {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(1px, 1fr));
  align-items: center;
  grid-gap: 1rem;
  padding: 1rem;
}
.allProductSingle6 .bot1 .data1 .des .body table tr th {
  font-weight: 700;
  color: #000;
  font-size: 0.85rem;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  display: grid;
  align-items: center;
  justify-content: center;
}
.allProductSingle6 .bot1 .data1 .des .body table tr td {
  font-weight: 300;
  font-size: 0.85rem;
  text-align: center;
  color: #000;
}
.allProductSingle6 .bot1 .data1 .des .body table tr td p {
  font-weight: 300;
  font-size: 0.85rem;
  text-align: center;
  color: #000;
  margin-bottom: 0;
  line-height: unset;
}
.allProductSingle6 .bot1 .data1 .des .body table tr td img {
  width: 2.5rem;
  height: 2.5rem;
  object-fit: cover;
  border-radius: 5rem;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
.allProductSingle6 .bot1 .data1 .des .body table tr td a {
  display: grid;
  align-items: center;
}
.allProductSingle6 .bot1 .data1 .des .body table tr td a svg {
  margin-left: 0.5rem;
}
.allProductSingle6 .bot1 .data1 .des .body table tr:nth-child(even) {
  background: #eee;
}
.allProductSingle6 .bot1 .data1 .des .body h2, .allProductSingle6 .bot1 .data1 .des .body h3, .allProductSingle6 .bot1 .data1 .des .body h4 {
  margin-bottom: 1rem;
}
.allProductSingle6 .bot1 .data1 .des .body h2 {
  font-size: 1.5rem;
}
.allProductSingle6 .bot1 .data1 .des .body h3 {
  font-size: 1.3rem;
}
.allProductSingle6 .bot1 .data1 .des .body h4 {
  font-size: 1.2rem;
}
.allProductSingle6 .bot1 .data1 .ability1 {
  display: none;
}
.allProductSingle6 .bot1 .data1 .ability1 .title1 {
  font-size: 1rem;
  font-weight: 700;
  color: #000;
  margin-bottom: 0.5rem;
}
.allProductSingle6 .bot1 .data1 .ability1 .items .item {
  margin-top: 1rem;
  display: grid;
  grid-template-columns: 1fr 3fr;
  align-items: center;
  grid-gap: 0.5rem;
}
.allProductSingle6 .bot1 .data1 .ability1 .items .item .name1 {
  font-size: 0.85rem;
  font-weight: 500;
  color: #444;
}
.allProductSingle6 .bot1 .data1 .ability1 .items .item .body1 {
  font-size: 0.85rem;
  font-weight: 500;
  color: #000;
  padding-bottom: 1rem;
  border-bottom: 1px solid #eee;
}
.allProductSingle6 .bot1 .data1 .comments1 {
  display: none;
}
.allProductSingle6 .bot1 .data1 .comments1 .topC1 {
  margin-bottom: 1rem;
}
.allProductSingle6 .bot1 .data1 .comments1 .topC1 .title2 {
  font-size: 1.1rem;
  font-weight: 900;
  color: #000;
  margin-bottom: 0.5rem;
}
.allProductSingle6 .bot1 .data1 .comments1 .topC1 .para1 {
  font-size: 0.9rem;
  font-weight: 300;
  color: #444;
}
.allProductSingle6 .bot1 .data1 .comments1 .showComments {
  background: #f7f7f7 !important;
  border-radius: 15px;
}
.allProductSingle6 .bot1 .data1 .lottery1 {
  display: none;
}
.allProductSingle6 .bot1 .data1 .lottery1 .title {
  font-size: 1rem;
  font-weight: 900;
  color: #000;
  margin-bottom: 1rem;
}
.allProductSingle6 .bot1 .data1 .lottery1 table {
  width: 100%;
  border-collapse: collapse;
}
.allProductSingle6 .bot1 .data1 .lottery1 table tr {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  align-items: center;
  grid-gap: 0.5rem;
  padding: 1rem;
  border-radius: 10px;
  border-bottom: 1px solid #eee;
}
.allProductSingle6 .bot1 .data1 .lottery1 table tr th {
  font-weight: 700;
  color: #000;
  font-size: 0.9rem;
  text-align: right;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
.allProductSingle6 .bot1 .data1 .lottery1 table tr td {
  font-weight: 700;
  font-size: 0.9rem;
  text-align: right;
  color: #000;
}
.allProductSingle6 .bot1 .data1 .lottery1 table tr:last-child {
  border-bottom: 0;
}
.allProductSingle6 .bot1 .data1 .lottery1 table tr:first-child {
  background: #F6F8FB;
}
.allProductSingle6 .related {
  margin-top: 3rem;
  border-top: 1px solid #eee;
  padding-top: 3rem;
}
.allProductSingle6 .related .title {
  font-size: 1rem;
  font-weight: 900;
  color: black;
  margin-bottom: 1rem;
}
.allProductSingle6 .related .items {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
  grid-gap: 2rem;
}
.allProductSingle6 .related .items .item {
  display: grid;
}
.allProductSingle6 .related .items .item .pic {
  position: relative;
  transition: all 0.3s ease-in-out;
  padding: 1rem;
  border-radius: 15px;
  overflow: hidden;
  border: 1px solid #eee;
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.05);
  background: white;
}
.allProductSingle6 .related .items .item .pic img {
  height: 12rem;
  object-fit: contain;
  width: 100%;
}
.allProductSingle6 .related .items .item .pic .cover {
  position: absolute;
  inset: 1rem;
  background: white;
  opacity: 0;
  transition: all 0.2s ease-in-out;
}
.allProductSingle6 .related .items .item .pic .lottery {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  background: red;
  padding: 5px 10px;
  color: white;
  font-size: 0.7rem;
  font-weight: 700;
  border-radius: 5rem;
  box-shadow: 0 5px 5px rgba(0, 0, 0, 0.2);
}
.allProductSingle6 .related .items .item .des {
  overflow: hidden;
  padding: 0.5rem;
}
.allProductSingle6 .related .items .item .des .title {
  font-size: 0.85rem;
  font-weight: 500;
  color: #000;
  height: 3rem;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  text-overflow: ellipsis;
}
.allProductSingle6 .related .items .item .des .prices {
  margin-top: 0.5rem;
}
.allProductSingle6 .related .items .item .des .prices .offer {
  display: flex;
  justify-content: left;
  gap: 0.5rem;
}
.allProductSingle6 .related .items .item .des .prices .offer s {
  font-size: 0.8rem;
  font-weight: 300;
  color: #444;
}
.allProductSingle6 .related .items .item .des .prices .offer span {
  background: red;
  border-radius: 8px;
  font-weight: 900;
  color: white;
  display: grid;
  box-shadow: 0 0 10px rgba(255, 0, 0, 0.3);
  align-items: center;
  line-height: 0.7rem;
  padding: 2px 5px;
  font-size: 0.7rem;
}
.allProductSingle6 .related .items .item .des .prices .priceF {
  text-align: left;
  font-size: 1rem;
  font-weight: 900;
  color: black;
}
.allProductSingle6 .related .items .item .des .prices .priceF span {
  font-size: 0.6rem;
  opacity: 0.6;
}
.allProductSingle6 .related .items .item .des .content {
  display: grid;
  align-items: end;
  font-size: 0.95rem;
  font-weight: 900;
  color: #000;
  margin-top: 1rem;
}
.allProductSingle6 .related .items .item .des .content span {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
.allProductSingle6 .related .items .item:hover .pic .cover {
  opacity: 1;
}
.allProductSingle6 .sellerInfo {
  background: rgba(0, 0, 0, 0.5);
  z-index: 4000;
  position: fixed;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-columns: 1fr;
  justify-content: center;
}
.allProductSingle6 .sellerInfo .data {
  width: 30%;
  margin: auto;
  background: white;
  display: grid;
  grid-template-columns: 1fr;
  border-radius: 20px;
  overflow: hidden;
}
.allProductSingle6 .sellerInfo .data .title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem;
  border-bottom: 2px solid #eee;
}
.allProductSingle6 .sellerInfo .data .title .name {
  font-size: 1.5rem;
  font-weight: 900;
  color: #444;
}
.allProductSingle6 .sellerInfo .data .title .location {
  display: flex;
  justify-content: left;
  align-items: center;
  gap: 0.3rem;
  font-size: 1rem;
  font-weight: 500;
  color: var(--green-color);
}
.allProductSingle6 .sellerInfo .data .title .location i {
  display: grid;
  align-items: center;
}
.allProductSingle6 .sellerInfo .data .title .location i svg {
  width: 1.2rem;
  height: 1.2rem;
  fill: var(--green-color);
}
.allProductSingle6 .sellerInfo .data .profile {
  margin: 1rem 0;
  padding: 0 1rem;
}
.allProductSingle6 .sellerInfo .data .profile .pic {
  display: grid;
  justify-content: center;
}
.allProductSingle6 .sellerInfo .data .profile .pic img {
  width: auto;
  height: 5rem;
  object-fit: cover;
}
.allProductSingle6 .sellerInfo .data .profile .name {
  font-size: 1.3rem;
  font-weight: 900;
  color: black;
  text-align: center;
  margin-top: 0.5rem;
}
.allProductSingle6 .sellerInfo .data .profile p {
  font-size: 0.9rem;
  font-weight: 300;
  text-align: center;
  margin-top: 0.5rem;
  line-height: 2rem;
  color: #444;
  white-space: pre-line;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  box-orient: vertical;
  -webkit-box-orient: vertical;
  line-clamp: 2;
  -webkit-line-clamp: 2;
  overflow: hidden;
  text-overflow: ellipsis;
}
.allProductSingle6 .sellerInfo .data .options {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 1rem;
  padding: 0 1rem;
}
.allProductSingle6 .sellerInfo .data .options .option {
  background: #f5f5f5;
  padding: 0.5rem 1rem;
  text-align: center;
  border-radius: 10px;
}
.allProductSingle6 .sellerInfo .data .options .option .body2 {
  font-size: 1.2rem;
  font-weight: 700;
  color: black;
}
.allProductSingle6 .sellerInfo .data .options .option .title2 {
  font-size: 1rem;
  font-weight: 500;
  color: #444;
  opacity: 0.7;
}
.allProductSingle6 .sellerInfo .data label {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  grid-gap: 0.5rem;
  margin: 1rem;
}
.allProductSingle6 .sellerInfo .data label input {
  border: 1px solid #ddd;
  font-size: 1rem;
  padding: 0.7rem 1rem;
  border-radius: 5rem;
  font-weight: 700;
  opacity: 0.7;
}
.allProductSingle6 .sellerInfo .data label i {
  display: grid;
  align-items: center;
  justify-content: center;
  transform: rotate(-135deg);
  border: 1px solid var(--green-color);
  border-radius: 50%;
  width: 3rem;
  height: 3rem;
}
.allProductSingle6 .sellerInfo .data label i svg {
  width: 1.2rem;
  height: 1.2rem;
  fill: var(--green-color);
}
.allProductSingle6 .sellerInfo .data .time {
  font-size: 1rem;
  font-weight: 300;
  color: #444;
  text-align: center;
  margin-right: 1rem;
}
.allProductSingle6 .sellerInfo .data .time span {
  color: red;
  font-weight: 700;
}
.allProductSingle6 .sellerInfo .data .time .active {
  color: green;
}
.allProductSingle6 .sellerInfo .data .buttons {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 1rem;
  padding: 1rem;
}
.allProductSingle6 .sellerInfo .data .buttons a {
  padding: 0.5rem 1rem;
  border-radius: 5px;
  font-size: 1rem;
  text-align: center;
  background: white;
  font-weight: 700;
  color: var(--green-color);
  border: 2px solid var(--green-color);
}
.allProductSingle6 .sellerInfo .data .buttons a:last-child {
  color: white;
  border: 2px solid var(--green-color);
  background: var(--green-color);
}
.allProductSingle6 .allTicket {
  background: rgba(0, 0, 0, 0.5);
  z-index: 4000;
  position: fixed;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-columns: 1fr;
  justify-content: center;
}
.allProductSingle6 .allTicket .chatContent {
  width: 40%;
  margin: auto;
  background: white;
  display: grid;
  grid-template-columns: 1fr;
  border-radius: 20px;
  overflow: hidden;
}
.allProductSingle6 .allTicket .chatContent .header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem;
  background: white;
}
.allProductSingle6 .allTicket .chatContent .header .profile {
  display: flex;
  justify-content: right;
  gap: 0.5rem;
  align-items: center;
}
.allProductSingle6 .allTicket .chatContent .header .profile .pic {
  overflow: hidden;
  border-radius: 50%;
}
.allProductSingle6 .allTicket .chatContent .header .profile .pic img {
  width: 3rem;
  height: 3rem;
  object-fit: cover;
}
.allProductSingle6 .allTicket .chatContent .header .profile .name {
  font-size: 1.2rem;
  font-weight: 300;
  color: black;
}
.allProductSingle6 .allTicket .chatContent .header .leftHeader {
  display: flex;
  justify-content: left;
  gap: 0.5rem;
}
.allProductSingle6 .allTicket .chatContent .header i {
  display: grid;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.allProductSingle6 .allTicket .chatContent .header i svg {
  width: 1.3rem;
  height: 1.3rem;
  fill: #444;
}
.allProductSingle6 .allTicket .chatContent .body {
  padding: 0.5rem;
  overflow-y: scroll;
  height: 30rem;
}
.allProductSingle6 .allTicket .chatContent .body p {
  display: none;
  font-size: 0.8rem;
  font-weight: 300;
  color: #000;
  opacity: 0.7;
}
.allProductSingle6 .allTicket .chatContent .body p .closeChats {
  padding: 0.2rem 0.4rem;
  background: red;
  color: white;
  border-radius: 5px;
  font-size: 0.7rem;
  cursor: pointer;
}
.allProductSingle6 .allTicket .chatContent .body .choice {
  display: grid;
  padding: 0.8rem;
  border: 1px solid #bbb;
  font-size: 0.9rem;
  font-weight: 300;
  color: #000;
  margin-top: 0.5rem;
  border-radius: 5px;
  cursor: pointer;
  transition: all 0.3s ease-in-out;
}
.allProductSingle6 .allTicket .chatContent .body .choice:hover {
  color: var(--green-color);
  border: 1px solid var(--green-color);
}
.allProductSingle6 .allTicket .chatContent .body .login {
  display: grid;
}
.allProductSingle6 .allTicket .chatContent .body .bodyLabel {
  display: grid;
  grid-template-columns: 1fr;
  grid-gap: 0.5rem;
  font-size: 0.9rem;
  font-weight: 300;
  color: #000;
  margin-top: 1rem;
}
.allProductSingle6 .allTicket .chatContent .body .bodyLabel input, .allProductSingle6 .allTicket .chatContent .body .bodyLabel select, .allProductSingle6 .allTicket .chatContent .body .bodyLabel textarea {
  background: var(--back1-color);
  border: 1px solid #eee;
  padding: 0.3rem 0.5rem;
  color: #000;
  border-radius: 5px;
  font-size: 0.9rem;
  font-weight: 300;
  width: 100%;
  transition: all 0.3s ease-in-out;
}
.allProductSingle6 .allTicket .chatContent .body .message11 {
  margin-top: 1rem;
  font-size: 0.9rem;
  font-weight: 300;
  color: #444;
}
.allProductSingle6 .allTicket .chatContent .body .message11 .time {
  font-size: 0.7rem;
}
.allProductSingle6 .allTicket .chatContent .body .message11 .messages {
  padding: 0.5rem;
  border-radius: 10px;
  border: 2px solid #bbb;
}
.allProductSingle6 .allTicket .chatContent .body .messages {
  background: white;
}
.allProductSingle6 .allTicket .chatContent .body .opp {
  display: grid;
  justify-content: left;
  text-align: left;
}
.allProductSingle6 .allTicket .chatContent .body .me {
  display: grid;
  justify-content: right;
  text-align: right;
}
.allProductSingle6 .allTicket .chatContent .body .me .messages {
  border: 2px solid var(--green-color);
}
.allProductSingle6 .allTicket .chatContent .body .submit {
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--green-color);
  text-align: center;
  background: transparent;
  width: 100%;
  border: 1px solid var(--green-color);
  padding: 0.5rem 1rem;
  border-radius: 5px;
  margin-top: 1rem;
  transition: all 0.3s ease-in-out;
}
.allProductSingle6 .allTicket .chatContent .body .submit:hover {
  background: var(--green-color);
  color: white;
}
.allProductSingle6 .allTicket .chatContent .body .sendImage {
  background: white;
  border-radius: 10px;
  overflow: hidden;
  display: grid;
  grid-template-columns: 1fr;
  justify-content: center;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
  margin-top: 1rem;
}
.allProductSingle6 .allTicket .chatContent .body .sendImage .dropify-wrapper {
  height: 100px;
  border: 1px solid #eee !important;
}
.allProductSingle6 .allTicket .chatContent .body .sendImage .dropify-wrapper .file-icon:before {
  opacity: 0 !important;
  position: absolute !important;
  top: 0 !important;
  visibility: hidden !important;
}
.allProductSingle6 .allTicket .chatContent .body .sendImage .dropify-wrapper .dropify-message {
  position: relative !important;
  top: auto !important;
  margin-top: 2rem;
}
.allProductSingle6 .allTicket .chatContent .body .sendImage .dropify-wrapper .dropify-message p {
  margin: 0;
  font-size: 1rem;
  color: rgba(0, 128, 0, 0.5098039216);
}
.allProductSingle6 .allTicket .chatContent .send {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-gap: 1rem;
  padding: 0.5rem;
}
.allProductSingle6 .allTicket .chatContent .send input {
  background: white;
  border: 1px solid #eee;
  padding: 0.5rem 1rem;
  color: #000;
  border-radius: 5rem;
  font-size: 1rem;
  font-weight: 300;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
  width: 100%;
  transition: all 0.3s ease-in-out;
}
.allProductSingle6 .allTicket .chatContent .send button {
  font-size: 0.9rem;
  font-weight: 300;
  color: white;
  border-radius: 5rem;
  background: var(--green-color);
  padding: 0 1rem;
}
.allProductSingle6 .allTicket .chatContent .loginChat {
  background: red;
  border-top: 1px solid #eee;
  padding: 0.5rem;
  text-align: center;
  font-size: 0.8rem;
  font-weight: 300;
  color: white;
  display: grid;
  width: 100%;
}
.allProductSingle6 .allTicket .chatContent .typeLogin1 {
  margin-top: 1rem;
  border-radius: 5px;
}
.allProductSingle6 .allChangeList {
  background: rgba(0, 0, 0, 0.5);
  z-index: 4000;
  position: fixed;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-columns: 1fr;
  justify-content: center;
}
.allProductSingle6 .allChangeList .changeList {
  width: 40%;
  margin: auto;
  background: white;
  display: grid;
  grid-template-columns: 1fr;
  border-radius: 20px;
  overflow: hidden;
  padding: 2rem;
}
.allProductSingle6 .allChangeList .changeList .title2 {
  text-align: center;
  font-size: 1.2rem;
  font-weight: 700;
  color: black;
  margin-bottom: 1rem;
}
.allProductSingle6 .allBenefit {
  background: rgba(0, 0, 0, 0.5);
  z-index: 4000;
  position: fixed;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-columns: 1fr;
  justify-content: center;
  backdrop-filter: blur(10px);
}
.allProductSingle6 .allBenefit .showB {
  width: 30%;
  margin: auto;
  background: white;
  display: grid;
  grid-template-columns: 1fr;
  border-radius: 20px;
  overflow: hidden;
}
.allProductSingle6 .allBenefit .showB .title2 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  text-align: center;
  font-size: 1.2rem;
  font-weight: 700;
  color: black;
  padding: 1rem;
  border-bottom: 2px solid rgb(238, 238, 241);
}
.allProductSingle6 .allBenefit .showB .title2 i {
  display: grid;
  align-items: center;
}
.allProductSingle6 .allBenefit .showB .title2 i svg {
  width: 1.5rem;
  height: 1.5rem;
  fill: #000;
}
.allProductSingle6 .allBenefit .showB .items {
  padding: 1rem;
  padding-top: 0;
}
.allProductSingle6 .allBenefit .showB .items .item {
  margin-top: 1rem;
  padding: 0.5rem;
  border-radius: 10px;
  border: 1px solid rgb(238, 238, 241);
  cursor: pointer;
  display: grid;
}
.allProductSingle6 .allBenefit .showB .items .item .name {
  font-size: 0.9rem;
  font-weight: 700;
  color: #444;
  margin-bottom: 0.5rem;
}
.allProductSingle6 .allBenefit .showB .items .item .body {
  font-size: 0.8rem;
  font-weight: 300;
  color: #000;
  opacity: 0.5;
}

@media screen and (max-width: 800px) {
  .allProductSingle6 {
    width: 100% !important;
    margin-top: 0;
  }
  .allProductSingle6 .address {
    display: none;
  }
  .allProductSingle6 .res1 {
    display: flex;
  }
  .allProductSingle6 .containers {
    display: flex;
    flex-direction: column;
    align-items: unset;
  }
  .allProductSingle6 .containers .container3 {
    display: none;
  }
  .allProductSingle6 .containers .container1 .gallery .showImage {
    display: none;
  }
  .allProductSingle6 .containers .container1 .gallery .imageSlider {
    margin-top: 0;
  }
  .allProductSingle6 .containers .container1 .gallery .imageSlider figure {
    border: 0;
    padding: 0;
  }
  .allProductSingle6 .containers .container1 .gallery .imageSlider figure img {
    width: 100%;
    height: 100%;
  }
  .allProductSingle6 .containers .container2 {
    padding: 0.5rem;
  }
  .allProductSingle6 .bot1 {
    margin-top: 0;
    padding-top: 1rem;
    border-top: 0;
  }
  .allProductSingle6 .bot1 .tabs {
    margin-bottom: 0.5rem;
    padding: 0 0.5rem;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
  }
  .allProductSingle6 .bot1 .tabs .tab {
    font-size: 0.9rem;
    padding: 0.5rem;
  }
  .allProductSingle6 .bot1 .tabs .tab i svg {
    width: 1rem;
    height: 1rem;
  }
  .allProductSingle6 .bot1 .tabs .tab span {
    width: 1.3rem;
    height: 1.3rem;
    font-size: 0.75rem;
  }
  .allProductSingle6 .bot1 .data1 {
    padding: 0.5rem;
  }
  .allProductSingle6 .bot1 .data1 .ability1 .items .item {
    grid-template-columns: 1fr 2fr;
  }
  .allProductSingle6 .bot1 .data1 .ability1 .items .item .name1 {
    font-size: 0.75rem;
  }
  .allProductSingle6 .bot1 .data1 .ability1 .items .item .body1 {
    font-size: 0.75rem;
  }
  .allProductSingle6 .bot1 .data1 .comments1 {
    display: none;
  }
  .allProductSingle6 .bot1 .data1 .comments1 .topC1 {
    margin-bottom: 1rem;
  }
  .allProductSingle6 .bot1 .data1 .comments1 .topC1 .title2 {
    font-size: 1.1rem;
    font-weight: 900;
    color: #000;
    margin-bottom: 0.5rem;
  }
  .allProductSingle6 .bot1 .data1 .comments1 .topC1 .para1 {
    font-size: 0.9rem;
    font-weight: 300;
    color: #444;
  }
  .allProductSingle6 .bot1 .data1 .comments1 .showComments {
    background: #f7f7f7 !important;
    border-radius: 15px;
  }
  .allProductSingle6 .bot1 .data1 .lottery1 {
    display: none;
  }
  .allProductSingle6 .bot1 .data1 .lottery1 .title {
    font-size: 1rem;
    font-weight: 900;
    color: #000;
    margin-bottom: 1rem;
  }
  .allProductSingle6 .bot1 .data1 .lottery1 table {
    width: 100%;
    border-collapse: collapse;
  }
  .allProductSingle6 .bot1 .data1 .lottery1 table tr {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    align-items: center;
    grid-gap: 0.5rem;
    padding: 1rem;
    border-radius: 10px;
    border-bottom: 1px solid #eee;
  }
  .allProductSingle6 .bot1 .data1 .lottery1 table tr th {
    font-weight: 700;
    color: #000;
    font-size: 0.9rem;
    text-align: right;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
  }
  .allProductSingle6 .bot1 .data1 .lottery1 table tr td {
    font-weight: 700;
    font-size: 0.9rem;
    text-align: right;
    color: #000;
  }
  .allProductSingle6 .bot1 .data1 .lottery1 table tr:last-child {
    border-bottom: 0;
  }
  .allProductSingle6 .bot1 .data1 .lottery1 table tr:first-child {
    background: #F6F8FB;
  }
  .allProductSingle6 .related {
    margin-top: 1rem;
    border-top: 0;
    padding: 0 0.5rem;
  }
  .allProductSingle6 .related .items {
    grid-template-columns: 1fr 1fr;
    grid-gap: 0.5rem;
  }
  .allProductSingle6 .related .items .item .pic {
    padding: 0.5rem;
    border-radius: 10px;
  }
  .allProductSingle6 .related .items .item .pic img {
    height: 10rem;
  }
  .allProductSingle6 .related .items .item .pic .cover {
    inset: 0.5rem;
  }
  .allProductSingle6 .related .items .item .des {
    overflow: hidden;
    padding: 0.5rem;
  }
  .allProductSingle6 .related .items .item .des .title {
    font-size: 0.85rem;
    font-weight: 500;
    color: #000;
    height: 3rem;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
  }
  .allProductSingle6 .related .items .item .des .prices {
    margin-top: 0.5rem;
  }
  .allProductSingle6 .related .items .item .des .prices .offer {
    display: flex;
    justify-content: left;
    gap: 0.5rem;
  }
  .allProductSingle6 .related .items .item .des .prices .offer s {
    font-size: 0.8rem;
    font-weight: 300;
    color: #444;
  }
  .allProductSingle6 .related .items .item .des .prices .offer span {
    background: red;
    border-radius: 8px;
    font-weight: 900;
    color: white;
    display: grid;
    box-shadow: 0 0 10px rgba(255, 0, 0, 0.3);
    align-items: center;
    line-height: 0.7rem;
    padding: 2px 5px;
    font-size: 0.7rem;
  }
  .allProductSingle6 .related .items .item .des .prices .priceF {
    text-align: left;
    font-size: 1rem;
    font-weight: 900;
    color: black;
  }
  .allProductSingle6 .related .items .item .des .prices .priceF span {
    font-size: 0.6rem;
    opacity: 0.6;
  }
  .allProductSingle6 .related .items .item .des .content {
    display: grid;
    align-items: end;
    font-size: 0.95rem;
    font-weight: 900;
    color: #000;
    margin-top: 1rem;
  }
  .allProductSingle6 .related .items .item .des .content span {
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
  }
  .allProductSingle6 .addRes {
    display: block;
    position: fixed;
    bottom: 0;
    right: 0;
    left: 0;
    z-index: 120;
    padding: 0.5rem;
    background: white;
    box-shadow: 0 -10px 10px rgba(0, 0, 0, 0.1);
  }
  .allProductSingle6 .addRes .top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
  }
  .allProductSingle6 .addRes .top select {
    padding: 0.2rem 0.8rem;
    background: transparent;
    border-radius: 10px;
    font-size: 1rem;
    font-weight: 500;
    color: #000;
    border: 1px solid #eee;
  }
  .allProductSingle6 .addRes .top .prices .name {
    font-size: 0.8rem;
    font-weight: 500;
    color: #000;
  }
  .allProductSingle6 .addRes .top .prices .price {
    display: flex;
    gap: 0.2rem;
    align-items: center;
    font-size: 0.85rem;
    font-weight: 700;
    color: black;
  }
  .allProductSingle6 .addRes .top .prices .price span {
    font-size: 0.6rem;
  }
  .allProductSingle6 .addRes .top .final .price {
    font-size: 1.3rem;
  }
  .allProductSingle6 .addRes .top .final .price span {
    opacity: 0.7;
    font-size: 0.7rem;
  }
  .allProductSingle6 .addRes .bot {
    display: grid;
    grid-template-columns: 1fr auto auto;
    grid-gap: 0.5rem;
  }
  .allProductSingle6 .addRes .bot .addCart {
    background: var(--green-color);
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9rem;
    font-weight: 500;
    color: white;
    border-radius: 5px;
    padding: 0.5rem;
  }
  .allProductSingle6 .addRes .bot .addCart i {
    display: grid;
    align-items: center;
  }
  .allProductSingle6 .addRes .bot .addCart i svg {
    width: 1.1rem;
    height: 1.1rem;
    fill: white;
  }
  .allProductSingle6 .addRes .bot .info, .allProductSingle6 .addRes .bot .chat {
    display: grid;
    padding: 0.5rem;
    border-radius: 5px;
    border: 2px solid #eee;
  }
  .allProductSingle6 .addRes .bot .info i, .allProductSingle6 .addRes .bot .chat i {
    display: grid;
    align-items: center;
  }
  .allProductSingle6 .addRes .bot .info i svg, .allProductSingle6 .addRes .bot .chat i svg {
    width: 1.2rem;
    height: 1.2rem;
    fill: #000;
  }
  .allProductSingle6 .sellerInfo .data {
    width: 98%;
    border-radius: 10px;
  }
  .allProductSingle6 .sellerInfo .data .title {
    padding: 0.5rem;
  }
  .allProductSingle6 .sellerInfo .data .title .name {
    font-size: 1rem;
  }
  .allProductSingle6 .sellerInfo .data .title .location {
    font-size: 0.8rem;
  }
  .allProductSingle6 .sellerInfo .data .title .location i svg {
    width: 0.9rem;
    height: 0.9rem;
  }
  .allProductSingle6 .sellerInfo .data .profile {
    margin: 0.5rem 0;
    padding: 0 0.5rem;
  }
  .allProductSingle6 .sellerInfo .data .profile .pic img {
    height: 4rem;
  }
  .allProductSingle6 .sellerInfo .data .profile .name {
    font-size: 1rem;
  }
  .allProductSingle6 .sellerInfo .data .profile p {
    font-size: 0.8rem;
  }
  .allProductSingle6 .sellerInfo .data .options {
    display: grid;
    grid-gap: 0.5rem;
    padding: 0 0.5rem;
  }
  .allProductSingle6 .sellerInfo .data .options .option {
    padding: 0.5rem;
  }
  .allProductSingle6 .sellerInfo .data .options .option .body2 {
    font-size: 0.9rem;
  }
  .allProductSingle6 .sellerInfo .data .options .option .title2 {
    font-size: 0.8rem;
  }
  .allProductSingle6 .sellerInfo .data label {
    margin: 0.5rem;
  }
  .allProductSingle6 .sellerInfo .data label input {
    font-size: 0.85rem;
    padding: 0.5rem 0.8rem;
  }
  .allProductSingle6 .sellerInfo .data label i {
    width: 2.5rem;
    height: 2.5rem;
  }
  .allProductSingle6 .sellerInfo .data label i svg {
    width: 1rem;
    height: 1rem;
  }
  .allProductSingle6 .sellerInfo .data .time {
    font-size: 0.9rem;
    margin-right: 0.5rem;
  }
  .allProductSingle6 .sellerInfo .data .buttons {
    grid-gap: 0.5rem;
    padding: 0.5rem;
  }
  .allProductSingle6 .sellerInfo .data .buttons a {
    padding: 0.5rem;
    font-size: 0.8rem;
  }
  .allProductSingle6 .allTicket .chatContent {
    width: 100%;
    border-radius: 0;
  }
  .allProductSingle6 .allTicket .chatContent .header .profile .pic img {
    width: 2rem;
    height: 2rem;
  }
  .allProductSingle6 .allTicket .chatContent .header .profile .name {
    font-size: 0.8rem;
  }
  .allProductSingle6 .allTicket .chatContent .header i svg {
    width: 1.1rem;
    height: 1.1rem;
  }
  .allProductSingle6 .allTicket .chatContent .body {
    height: calc(100vh - 6.4rem);
  }
  .allProductSingle6 .allTicket .chatContent .body p {
    font-size: 0.7rem;
  }
  .allProductSingle6 .allTicket .chatContent .body p .closeChats {
    padding: 0.2rem;
  }
  .allProductSingle6 .allTicket .chatContent .body .choice {
    padding: 0.5rem;
    font-size: 0.7rem;
  }
  .allProductSingle6 .allTicket .chatContent .body .bodyLabel {
    font-size: 0.7rem;
    margin-top: 0.5rem;
  }
  .allProductSingle6 .allTicket .chatContent .body .bodyLabel input, .allProductSingle6 .allTicket .chatContent .body .bodyLabel select, .allProductSingle6 .allTicket .chatContent .body .bodyLabel textarea {
    padding: 0.3rem;
    font-size: 0.7rem;
  }
  .allProductSingle6 .allTicket .chatContent .body .message11 {
    margin-top: 1rem;
    font-size: 0.8rem;
  }
  .allProductSingle6 .allTicket .chatContent .body .message11 .time {
    font-size: 0.6rem;
  }
  .allProductSingle6 .allTicket .chatContent .body .message11 .messages {
    padding: 0.3rem;
  }
  .allProductSingle6 .allTicket .chatContent .body .submit {
    font-size: 0.8rem;
    padding: 0.3rem 0.5rem;
    margin-top: 0.5rem;
  }
  .allProductSingle6 .allTicket .chatContent .body .sendImage {
    margin-top: 0.5rem;
  }
  .allProductSingle6 .allTicket .chatContent .send {
    grid-gap: 0.5rem;
    padding: 0.5rem;
  }
  .allProductSingle6 .allTicket .chatContent .send input {
    padding: 0.5rem;
    font-size: 0.85rem;
  }
  .allProductSingle6 .allTicket .chatContent .send button {
    font-size: 0.7rem;
    padding: 0 1rem;
  }
  .allProductSingle6 .allTicket .chatContent .loginChat {
    font-size: 1rem;
    height: 3.5rem;
    align-items: center;
  }
  .allProductSingle6 .allTicket .chatContent .typeLogin1 {
    margin-top: 0.5rem;
  }
  .allProductSingle6 .allChangeList .changeList {
    width: 100%;
    padding: 0.5rem;
  }
  .allProductSingle6 .allChangeList .changeList .title2 {
    font-size: 0.9rem;
    margin-bottom: 0.5rem;
  }
}
.allProductSingle7 {
  margin: auto;
  margin-top: 1rem;
}
.allProductSingle7 .address {
  display: flex;
  justify-content: right;
  align-items: center;
  position: relative;
  margin-bottom: 1rem;
  border-radius: 15px;
}
.allProductSingle7 .address a {
  font-size: 0.75rem;
  font-weight: 500;
  color: rgb(122, 138, 174);
  white-space: pre-line;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  box-orient: vertical;
  -webkit-box-orient: vertical;
  line-clamp: 1;
  -webkit-line-clamp: 1;
  overflow: hidden;
  text-overflow: ellipsis;
}
.allProductSingle7 .address a:after {
  content: "/";
  padding: 0 0.4rem;
}
.allProductSingle7 .address a:last-child {
  color: #000;
}
.allProductSingle7 .address a:last-child:after {
  content: "";
  padding: 0;
}
.allProductSingle7 .adminButtons {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 1rem;
  margin-bottom: 1rem;
}
.allProductSingle7 .adminButtons .sendDashboard {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.7rem;
  border-radius: 10px;
  background: #f3c8ff;
  color: purple;
  font-size: 0.9rem;
  font-weight: 700;
  box-shadow: 0 5px 5px rgba(0, 0, 0, 0.08);
}
.allProductSingle7 .adminButtons .sendDashboard i {
  display: grid;
  align-items: center;
}
.allProductSingle7 .adminButtons .sendDashboard i svg {
  width: 1.2rem;
  height: 1.2rem;
  color: purple;
}
.allProductSingle7 .adminButtons .sendDashboard:nth-child(2) {
  background: #c8d8ff;
  color: #002480;
}
.allProductSingle7 .adminButtons .sendDashboard:nth-child(2) i svg {
  color: #002480;
}
.allProductSingle7 .adminButtons .sendDashboard:nth-child(3) {
  background: #c8ffcf;
  color: #008002;
}
.allProductSingle7 .adminButtons .sendDashboard:nth-child(3) i svg {
  color: #008002;
}
.allProductSingle7 .containers {
  display: grid;
  grid-template-columns: 2.5fr 1fr;
  grid-gap: 2rem;
}
.allProductSingle7 .containers .txtE {
  margin-bottom: 1rem;
  position: relative;
  width: 100%;
}
.allProductSingle7 .containers .txtE textarea {
  font-size: 0.9rem;
  font-weight: 300;
  color: #000;
  border: 1px solid #eee;
  width: 100%;
  height: 3rem;
  border-radius: 10px;
  padding: 1rem;
  resize: vertical;
}
.allProductSingle7 .containers .txtE:before {
  content: attr(data-tooltip);
  position: absolute;
  top: -0.5rem;
  background: purple;
  color: white;
  padding: 1px 5px;
  font-size: 0.7rem;
  border-radius: 5px;
  font-weight: 500;
}
.allProductSingle7 .containers .right11 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 1rem;
  background: white;
  border-radius: 15px;
  padding: 2rem;
  border: 1px solid rgb(211, 216, 228);
}
.allProductSingle7 .containers .right11 .data .title2 .titleEn {
  font-size: 0.8rem;
  font-weight: 500;
  color: #444;
  opacity: 0.8;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  text-overflow: ellipsis;
  margin-bottom: 5px;
}
.allProductSingle7 .containers .right11 .data .title2 h1 {
  font-size: 1.1rem;
  font-weight: 700;
  color: #000;
  margin-bottom: 1rem;
}
.allProductSingle7 .containers .right11 .data .title2 .op1 {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-gap: 1rem;
}
.allProductSingle7 .containers .right11 .data .title2 .op1 .right {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.allProductSingle7 .containers .right11 .data .title2 .op1 .right .option {
  font-size: 0.85rem;
  font-weight: 500;
  padding: 0.3rem 0.8rem;
  border-radius: 8px;
  background: rgb(244, 244, 244);
  color: #444;
}
.allProductSingle7 .containers .right11 .data .title2 .op1 .left .guideS {
  color: blue;
  font-weight: 700;
  font-size: 0.8rem;
  cursor: pointer;
}
.allProductSingle7 .containers .right11 .data .choice {
  padding: 0.5rem 0;
  margin-top: 1rem;
}
.allProductSingle7 .containers .right11 .data .choice .title1 {
  font-size: 0.85rem;
  font-weight: 500;
  color: #000;
  margin-bottom: 0.5rem;
}
.allProductSingle7 .containers .right11 .data .choice ul {
  display: flex;
  justify-content: right;
  align-items: center;
  gap: 0.5rem;
}
.allProductSingle7 .containers .right11 .data .choice ul li {
  position: relative;
  border: 1px solid #ddd;
  font-size: 0.8rem;
  font-weight: 300;
  background: white;
  color: #000;
  padding: 0.3rem 1rem;
  cursor: pointer;
  border-radius: 5px;
}
.allProductSingle7 .containers .right11 .data .choice ul li[data-empty=empty] {
  background: #ffbebe;
  opacity: 0.7;
  color: #555;
}
.allProductSingle7 .containers .right11 .data .choice ul li[data-empty=empty]:before {
  content: "ناموجود";
  position: absolute;
  left: 0;
  top: -0.5rem;
  font-size: 0.6rem;
  font-weight: 700;
  color: red;
}
.allProductSingle7 .containers .right11 .data .choice ul .active {
  border: 2px solid var(--green-color);
}
.allProductSingle7 .containers .right11 .data .choice:nth-child(2) {
  border-bottom: 0;
  padding-bottom: 0;
}
.allProductSingle7 .containers .right11 .data .choice:nth-child(3) {
  border-bottom: 0;
  padding-bottom: 0;
}
.allProductSingle7 .containers .right11 .data .info1 {
  margin-top: 3rem;
  padding: 0.8rem;
  border-radius: 7px;
  border: 1px solid rgb(211, 216, 228);
  font-size: 0.8rem;
  font-weight: 300;
  color: #444;
}
.allProductSingle7 .containers .right11 .data .info1 .title2 {
  font-size: 0.9rem;
  font-weight: 700;
  color: #000;
  margin-bottom: 5px;
}
.allProductSingle7 .containers .right11 .data .box {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  justify-content: right;
  font-size: 0.7rem;
  font-weight: 300;
  color: #444;
  margin-top: 1rem;
}
.allProductSingle7 .containers .right11 .data .box i {
  display: grid;
  align-items: center;
  opacity: 0.7;
}
.allProductSingle7 .containers .right11 .data .box i svg {
  width: 0.9rem;
  height: 0.9rem;
  fill: #444;
}
.allProductSingle7 .containers .right11 .gallery {
  position: relative;
}
.allProductSingle7 .containers .right11 .gallery .options {
  position: absolute;
  left: 0;
  display: flex;
  justify-content: center;
  gap: 1rem;
  top: 0;
  z-index: 10;
}
.allProductSingle7 .containers .right11 .gallery .options .option {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.5rem;
  border-radius: 5px;
  box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.14);
  background: white;
  font-size: 0.9rem;
  font-weight: 700;
  color: #000;
  cursor: pointer;
  margin-bottom: 0.5rem;
}
.allProductSingle7 .containers .right11 .gallery .options .option i {
  display: grid;
  align-items: center;
}
.allProductSingle7 .containers .right11 .gallery .options .option i svg {
  width: 1.1rem;
  height: 1.1rem;
  color: #000;
}
.allProductSingle7 .containers .right11 .gallery .pics .pic {
  position: relative;
  display: grid;
  overflow: hidden;
  justify-content: center;
}
.allProductSingle7 .containers .right11 .gallery .pics .pic img {
  height: 30rem;
  object-fit: contain;
}
.allProductSingle7 .containers .right11 .gallery .pics .images {
  margin-top: 1rem;
}
.allProductSingle7 .containers .right11 .gallery .pics .images .slider-image {
  display: grid;
}
.allProductSingle7 .containers .right11 .gallery .pics .images .slider-image .item {
  padding: 0.5rem;
  border: 1px solid #eee;
  border-radius: 15px;
  cursor: pointer;
}
.allProductSingle7 .containers .right11 .gallery .pics .images .slider-image .item img {
  height: 4rem;
  object-fit: contain;
}
.allProductSingle7 .containers .right11 .gallery .pics .images .slider-image .active2 {
  border: 1px solid var(--green-color);
}
.allProductSingle7 .containers .right11 .gallery .pics .images .slider-image .owl-next, .allProductSingle7 .containers .right11 .gallery .pics .images .slider-image .owl-prev {
  padding: 0.5rem;
  background: white !important;
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto;
  right: 0;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}
.allProductSingle7 .containers .right11 .gallery .pics .images .slider-image .owl-next span, .allProductSingle7 .containers .right11 .gallery .pics .images .slider-image .owl-prev span {
  font-size: 2rem;
  line-height: 2rem;
}
.allProductSingle7 .containers .right11 .gallery .pics .images .slider-image .owl-next {
  left: 0;
  right: auto;
}
.allProductSingle7 .containers .left .lottery {
  background: white;
  box-shadow: 0px 4px 24px 0px rgba(0, 0, 0, 0.1);
  border-radius: 15px;
  padding: 1rem;
  margin-bottom: 1rem;
}
.allProductSingle7 .containers .left .lottery .title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
}
.allProductSingle7 .containers .left .lottery .title .title1 {
  font-size: 0.85rem;
  font-weight: 500;
  color: #000;
}
.allProductSingle7 .containers .left .lottery .title .name {
  font-size: 0.8rem;
  font-weight: 700;
  color: red;
}
.allProductSingle7 .containers .left .lottery .bars {
  height: 10px;
  width: 100%;
  background: #f7f7f7;
  border-radius: 5rem;
  direction: ltr;
}
.allProductSingle7 .containers .left .lottery .bars .bar1 {
  height: 100%;
  background: red;
  border-radius: 5rem;
  position: relative;
}
.allProductSingle7 .containers .left .lottery .bars .bar1 div {
  width: 0;
  height: 100%;
  background: white;
  opacity: 0.5;
  box-shadow: 0 0 5px rgba(255, 0, 0, 0.3);
  border-radius: 5rem;
  transition: all 0.3s ease-in-out;
  animation: arrow-anim5 1s ease infinite;
}
@keyframes arrow-anim5 {
  0% {
    width: 0%;
  }
  5% {
    width: 5%;
  }
  10% {
    width: 10%;
  }
  15% {
    width: 15%;
  }
  20% {
    width: 20%;
  }
  25% {
    width: 25%;
  }
  30% {
    width: 30%;
  }
  35% {
    width: 35%;
  }
  40% {
    width: 40%;
  }
  45% {
    width: 45%;
  }
  50% {
    width: 50%;
  }
  55% {
    width: 55%;
  }
  60% {
    width: 60%;
  }
  65% {
    width: 65%;
  }
  70% {
    width: 70%;
  }
  75% {
    width: 75%;
  }
  80% {
    width: 80%;
  }
  85% {
    width: 85%;
  }
  90% {
    width: 90%;
  }
  95% {
    width: 95%;
  }
  100% {
    width: 100%;
  }
}
.allProductSingle7 .containers .left .details {
  background: white;
  box-shadow: 0px 4px 24px 0px rgba(0, 0, 0, 0.1);
  border-radius: 15px;
  padding: 1.5rem;
  margin-bottom: 1rem;
  position: relative;
}
.allProductSingle7 .containers .left .details .seller {
  background: #F3F8FD;
  border-radius: 10px;
  overflow: hidden;
  margin-bottom: 1rem;
}
.allProductSingle7 .containers .left .details .seller .title1 {
  padding: 0.8rem;
  border-bottom: 2px solid white;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem;
}
.allProductSingle7 .containers .left .details .seller .title1 .name {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  font-size: 0.9rem;
  font-weight: 700;
  color: #000;
}
.allProductSingle7 .containers .left .details .seller .title1 .name i {
  display: grid;
  align-items: center;
}
.allProductSingle7 .containers .left .details .seller .title1 .name i svg {
  width: 1rem;
  height: 1rem;
  fill: #385086;
}
.allProductSingle7 .containers .left .details .seller .title1 .more {
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--green-color);
}
.allProductSingle7 .containers .left .details .seller .op1 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-bottom: 2px solid white;
}
.allProductSingle7 .containers .left .details .seller .op1 .option {
  padding: 0.8rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
  font-size: 0.8rem;
  font-weight: 500;
  color: #000;
}
.allProductSingle7 .containers .left .details .seller .op1 .option i {
  display: grid;
  align-items: center;
}
.allProductSingle7 .containers .left .details .seller .op1 .option i svg {
  width: 1rem;
  height: 1rem;
  fill: #385086;
}
.allProductSingle7 .containers .left .details .seller .op1 .option:first-child {
  border-left: 2px solid white;
}
.allProductSingle7 .containers .left .details .seller .btnChatSingle {
  padding: 0.8rem;
  display: grid;
  grid-template-columns: auto 1fr auto;
  grid-gap: 0.5rem;
  font-size: 0.8rem;
  font-weight: 500;
  color: #000;
  cursor: pointer;
}
.allProductSingle7 .containers .left .details .seller .btnChatSingle i {
  display: grid;
  align-items: center;
}
.allProductSingle7 .containers .left .details .seller .btnChatSingle i svg {
  width: 1rem;
  height: 1rem;
  fill: #385086;
}
.allProductSingle7 .containers .left .details .prices {
  margin-bottom: 1rem;
}
.allProductSingle7 .containers .left .details .prices .offP {
  display: grid;
  justify-content: left;
  margin-bottom: 0.5rem;
}
.allProductSingle7 .containers .left .details .prices .offP span {
  background: #DA1E28;
  border-radius: 5rem;
  padding: 2px 1rem;
  font-size: 0.8rem;
  font-weight: 900;
  box-shadow: 0 0 10px rgba(255, 0, 0, 0.3);
  color: white;
}
.allProductSingle7 .containers .left .details .prices .price {
  display: flex;
  justify-content: left;
  align-items: center;
  grid-gap: 1rem;
  margin-top: 1rem;
  text-align: left;
}
.allProductSingle7 .containers .left .details .prices .price s {
  font-size: 1rem;
  opacity: 0.7;
  font-weight: 700;
  color: #444;
  line-height: 1rem;
}
.allProductSingle7 .containers .left .details .prices .price bdi {
  font-size: 0.7rem;
  font-weight: 500;
  color: #000;
  line-height: 1rem;
}
.allProductSingle7 .containers .left .details .prices .price bdi span {
  font-size: 1.3rem;
  font-weight: 900;
  margin-left: 5px;
  line-height: 0.7rem;
}
.allProductSingle7 .containers .left .details .add .addCarts {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  grid-gap: 1rem;
}
.allProductSingle7 .containers .left .details .add .addCarts .addCart {
  padding: 0.4rem 0.8rem;
  font-size: 0.9rem;
  font-weight: 700;
  border-radius: 10px;
  box-shadow: 0 5px 5px rgba(0, 0, 0, 0.05);
  background: var(--green-color);
  color: white;
  text-align: center;
  transition: all 0.3s ease-in-out;
  cursor: pointer;
}
.allProductSingle7 .containers .left .details .add .addCarts .addCart:hover {
  opacity: 1;
}
.allProductSingle7 .containers .left .details .add .addCarts .counts {
  display: flex;
  align-items: center;
  border: 1px solid #eee;
  border-radius: 10px;
  height: 100%;
  padding: 6px;
}
.allProductSingle7 .containers .left .details .add .addCarts .counts input {
  width: 1.8rem;
  height: 1.8rem;
  background: transparent;
  text-align: center;
  font-size: 1rem;
  font-weight: 900;
  color: #000;
}
.allProductSingle7 .containers .left .details .add .addCarts .counts i {
  display: grid;
  justify-content: center;
  align-items: center;
  width: 1.8rem;
  height: 1.8rem;
  cursor: pointer;
  background: var(--green-color);
  border-radius: 8px;
}
.allProductSingle7 .containers .left .details .add .addCarts .counts i svg {
  width: 0.7rem;
  height: 0.7rem;
  fill: white;
}
.allProductSingle7 .containers .left .details .empty {
  display: grid;
  padding: 0.5rem 0.8rem;
  font-size: 1.1rem;
  font-weight: 900;
  border-radius: 10px;
  box-shadow: 0 5px 5px rgba(0, 0, 0, 0.05);
  background: red;
  color: white;
  text-align: center;
  transition: all 0.3s ease-in-out;
  cursor: pointer;
}
.allProductSingle7 .containers .left .details .empty:hover {
  opacity: 1;
}
.allProductSingle7 .containers .left .details .contact {
  background: var(--green-color);
}
.allProductSingle7 .containers .left .boxB {
  background: white;
  box-shadow: 0 4px 24px 0 rgba(0, 0, 0, 0.1);
  border-radius: 15px;
  overflow: hidden;
  padding: 1rem;
  margin-bottom: 1rem;
  display: grid;
  grid-template-columns: 1fr auto;
  grid-gap: 1rem;
  font-size: 0.9rem;
  font-weight: 500;
  color: #000;
  cursor: pointer;
}
.allProductSingle7 .containers .left .boxB i {
  display: grid;
  align-items: center;
}
.allProductSingle7 .containers .left .boxB i svg {
  width: 1rem;
  height: 1rem;
  fill: #000;
}
.allProductSingle7 .addFloat {
  position: fixed;
  bottom: 0;
  right: 0;
  left: 0;
  z-index: 100;
  background: white;
  box-shadow: 0 -10px 10px rgba(0, 0, 0, 0.1);
  padding: 0.5rem;
  display: none;
}
.allProductSingle7 .addFloat .top .price {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.allProductSingle7 .addFloat .top .price .offer {
  display: flex;
  justify-content: left;
  align-items: center;
  gap: 0.5rem;
}
.allProductSingle7 .addFloat .top .price .offer s {
  font-size: 0.9rem;
  font-weight: 300;
  color: #000;
  opacity: 0.5;
}
.allProductSingle7 .addFloat .top .price .offer .off {
  background: red;
  padding: 0.1rem 0.5rem;
  border-radius: 5rem;
  font-size: 0.8rem;
  font-weight: 900;
  color: white;
}
.allProductSingle7 .addFloat .top .price .priceF {
  font-size: 0.7rem;
  font-weight: 300;
  color: #000;
}
.allProductSingle7 .addFloat .top .price .priceF span {
  font-size: 1.2rem;
  font-weight: 700;
}
.allProductSingle7 .addFloat .bot {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-gap: 0.5rem;
  margin-top: 0.5rem;
}
.allProductSingle7 .addFloat .bot .addCarts {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-gap: 0.5rem;
}
.allProductSingle7 .addFloat .bot .addCarts .addCart {
  display: grid;
  align-items: center;
  padding: 0.3rem;
  opacity: 0.7;
  font-size: 0.8rem;
  font-weight: 700;
  border-radius: 5px;
  background: var(--green-color);
  color: white;
  text-align: center;
  transition: all 0.3s ease-in-out;
  cursor: pointer;
}
.allProductSingle7 .addFloat .bot .addCarts .addCart:hover {
  opacity: 1;
}
.allProductSingle7 .addFloat .bot .addCarts .counts {
  display: flex;
  align-items: center;
  border: 2px solid #eee;
  border-radius: 5px;
  height: 100%;
}
.allProductSingle7 .addFloat .bot .addCarts .counts input {
  width: 2rem;
  padding: 0.3rem 0.2rem;
  background: transparent;
  text-align: center;
  font-size: 0.8rem;
  font-weight: 700;
  color: #000;
}
.allProductSingle7 .addFloat .bot .addCarts .counts i {
  display: grid;
  align-items: center;
  padding: 0.3rem;
  cursor: pointer;
}
.allProductSingle7 .addFloat .bot .addCarts .counts i svg {
  width: 0.7rem;
  height: 0.7rem;
  fill: #000;
}
.allProductSingle7 .addFloat .bot .empty, .allProductSingle7 .addFloat .bot .contact {
  padding: 0.6rem;
  font-size: 1rem;
  font-weight: 700;
  border-radius: 5px;
  background: grey;
  color: white;
  text-align: center;
  transition: all 0.3s ease-in-out;
  cursor: pointer;
  opacity: 1;
}
.allProductSingle7 .addFloat .bot .contact {
  background: var(--green-color);
  font-size: 0.8rem;
}
.allProductSingle7 .addFloat .bot .cartS {
  border: 1px solid var(--green-color);
  border-radius: 5px;
  position: relative;
}
.allProductSingle7 .addFloat .bot .cartS i {
  display: grid;
  align-items: center;
  justify-content: center;
  width: 2rem;
}
.allProductSingle7 .addFloat .bot .cartS i svg {
  width: 1rem;
  height: 1rem;
  fill: var(--green-color);
}
.allProductSingle7 .addFloat .bot .cartS .showCartCount {
  position: absolute;
  top: -6px;
  left: -6px;
  background: var(--green-color);
  width: 17px;
  height: 17px;
  color: white;
  font-size: 0.7rem;
  line-height: 17px;
  border-radius: 50%;
  display: grid;
  justify-content: center;
  align-items: center;
}
.allProductSingle7 .sellers {
  margin-top: 2rem;
}
.allProductSingle7 .sellers .title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 1rem;
  font-weight: 700;
  color: #000;
  padding: 1rem;
  background: white;
  border: 1px solid #eee;
  border-radius: 15px;
}
.allProductSingle7 .sellers .title i {
  display: grid;
  align-items: center;
}
.allProductSingle7 .sellers .title i svg {
  width: 1.3rem;
  height: 1.3rem;
  fill: #000;
}
.allProductSingle7 .sellers .items {
  background: white;
  border: 1px solid #eee;
  border-radius: 15px;
  margin-top: 0.5rem;
}
.allProductSingle7 .sellers .items .item {
  padding: 1rem;
  border-bottom: 1px solid #eee;
}
.allProductSingle7 .sellers .items .item .postTop {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
}
.allProductSingle7 .sellers .items .item .postTop .postTitle {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-gap: 1rem;
  align-items: center;
}
.allProductSingle7 .sellers .items .item .postTop .postTitle .image img {
  height: 2.5rem;
  object-fit: contain;
  width: 2.5rem;
  border-radius: 100%;
}
.allProductSingle7 .sellers .items .item .postTop .postTitle ul {
  display: flex;
  justify-content: right;
  flex-wrap: wrap;
  align-items: center;
  gap: 2rem;
}
.allProductSingle7 .sellers .items .item .postTop .postTitle ul li {
  display: flex;
  justify-content: right;
  align-items: center;
  grid-gap: 0.5rem;
}
.allProductSingle7 .sellers .items .item .postTop .postTitle ul li span, .allProductSingle7 .sellers .items .item .postTop .postTitle ul li label, .allProductSingle7 .sellers .items .item .postTop .postTitle ul li a {
  font-size: 0.9rem;
  font-weight: 300;
  color: #000;
  opacity: 0.7;
}
.allProductSingle7 .sellers .items .item .postTop .postTitle ul li span:last-child, .allProductSingle7 .sellers .items .item .postTop .postTitle ul li label:last-child, .allProductSingle7 .sellers .items .item .postTop .postTitle ul li a:last-child {
  font-size: 1rem;
  font-weight: 500;
  opacity: 1;
}
.allProductSingle7 .sellers .items .item .postTop .postTitle ul li select {
  background: var(--back1-color);
  border: 1px solid #eee;
  padding: 0.3rem 0.5rem;
  color: #000;
  border-radius: 0.3rem;
  font-size: 0.8rem;
  width: 100%;
  height: 2rem;
  min-width: 8rem;
  transition: all 0.3s ease-in-out;
}
.allProductSingle7 .sellers .items .item .postTop .postTitle ul li select:focus {
  box-shadow: 0 3px 8px 0 rgba(0, 0, 0, 0.1);
  border: 1px solid #19bfd3;
}
.allProductSingle7 .sellers .items .item .postTop .postOptions {
  display: grid;
  justify-content: left;
  align-items: center;
}
.allProductSingle7 .sellers .items .item .postTop .postOptions .addCart {
  padding: 0.5rem 2rem;
  border: 1px solid var(--green-color);
  border-radius: 10px;
  cursor: pointer;
  font-size: 1rem;
  font-weight: 500;
  color: var(--green-color);
  transition: all 0.3s ease-in;
}
.allProductSingle7 .sellers .items .item .postTop .postOptions .addCart:hover {
  background: var(--green-color);
  color: white;
}
.allProductSingle7 .sellers .items .item .postBot {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  grid-gap: 0.5rem;
  margin-top: 0.5rem;
  background: var(--back2-color);
  border-radius: 5px;
  padding: 1rem;
}
.allProductSingle7 .sellers .items .item .postBot ul {
  display: grid;
  grid-template-columns: auto auto auto auto auto;
  justify-content: right;
  grid-gap: 2rem;
  align-items: center;
}
.allProductSingle7 .sellers .items .item .postBot ul li {
  display: grid;
  grid-template-columns: auto auto;
  justify-content: right;
  align-items: center;
  grid-gap: 0.5rem;
}
.allProductSingle7 .sellers .items .item .postBot ul li span {
  font-size: 0.85rem;
  font-weight: 300;
  color: #000;
  opacity: 0.6;
}
.allProductSingle7 .sellers .items .item .postBot ul li span:last-child {
  color: #444;
  font-weight: 700;
  opacity: 1;
}
.allProductSingle7 .sellers .items .item:last-child {
  border-bottom: 0;
}
.allProductSingle7 .showEditBtn {
  position: fixed;
  bottom: 1rem;
  left: 1rem;
  background: purple;
  padding: 0.5rem;
  border-radius: 10px;
  color: white;
  font-size: 1rem;
  font-weight: 500;
  z-index: 10;
  display: none;
  cursor: pointer;
}
.allProductSingle7 .containersD {
  margin-top: 2rem;
}
.allProductSingle7 .containersD .tabs {
  display: flex;
  flex-wrap: wrap;
  justify-content: right;
  gap: 1rem;
  align-items: center;
  margin-bottom: 2rem;
  background: rgb(243, 248, 253);
  position: sticky;
  top: 0;
  z-index: 10;
  border-bottom: 1px solid var(--green-color);
}
.allProductSingle7 .containersD .tabs .tab {
  font-size: 0.9rem;
  font-weight: 700;
  color: #444;
  opacity: 0.7;
  cursor: pointer;
  padding: 1rem;
  position: relative;
}
.allProductSingle7 .containersD .tabs .active {
  color: var(--green-color);
  opacity: 1;
}
.allProductSingle7 .containersD .tabs .active:before {
  content: "";
  position: absolute;
  right: 0;
  left: 0;
  bottom: 0;
  height: 5px;
  background: var(--green-color);
  width: 50%;
  margin: auto;
  border-radius: 10px;
}
.allProductSingle7 .containersD .containerD {
  display: grid;
  grid-template-columns: 1fr 25rem;
  grid-gap: 3rem;
}
.allProductSingle7 .containersD .containerD .right .data1 .des .title1 {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 1.2rem;
  font-weight: 700;
  color: #000;
}
.allProductSingle7 .containersD .containerD .right .data1 .des .title1:before {
  width: 8px;
  height: 8px;
  display: grid;
  background: var(--green-color);
  border-radius: 50%;
  content: "";
}
.allProductSingle7 .containersD .containerD .right .data1 .des .body {
  margin-bottom: 1rem;
}
.allProductSingle7 .containersD .containerD .right .data1 .des .body p {
  opacity: 0.7;
  font-size: 1rem;
  font-weight: 400;
  color: #000;
  margin-top: 1rem;
  line-height: 2rem;
}
.allProductSingle7 .containersD .containerD .right .data1 .des .body .image {
  display: grid;
  justify-content: center;
  margin: 1rem 0;
}
.allProductSingle7 .containersD .containerD .right .data1 .des .body img {
  object-fit: cover !important;
  height: 600px !important;
  width: 100% !important;
  margin: 20px 0 !important;
}
.allProductSingle7 .containersD .containerD .right .data1 .des .body ul, .allProductSingle7 .containersD .containerD .right .data1 .des .body ol {
  margin: 2rem;
}
.allProductSingle7 .containersD .containerD .right .data1 .des .body ul li, .allProductSingle7 .containersD .containerD .right .data1 .des .body ol li {
  list-style: decimal;
  margin-bottom: 0.5rem;
  font-size: 0.9rem;
}
.allProductSingle7 .containersD .containerD .right .data1 .des .body ul ul, .allProductSingle7 .containersD .containerD .right .data1 .des .body ol ul {
  margin: 0;
  margin-top: 1rem;
  margin-right: 1rem;
}
.allProductSingle7 .containersD .containerD .right .data1 .des .body ul li {
  list-style: disc;
}
.allProductSingle7 .containersD .containerD .right .data1 .des .body table {
  margin: 1rem 0;
  border: 1px solid #eee;
  width: 100%;
}
.allProductSingle7 .containersD .containerD .right .data1 .des .body table thead tr {
  background: #eee;
}
.allProductSingle7 .containersD .containerD .right .data1 .des .body table tr {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(1px, 1fr));
  align-items: center;
  grid-gap: 1rem;
  padding: 1rem;
}
.allProductSingle7 .containersD .containerD .right .data1 .des .body table tr th {
  font-weight: 700;
  color: #000;
  font-size: 0.85rem;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  display: grid;
  align-items: center;
  justify-content: center;
}
.allProductSingle7 .containersD .containerD .right .data1 .des .body table tr td {
  font-weight: 300;
  font-size: 0.85rem;
  text-align: center;
  color: #000;
}
.allProductSingle7 .containersD .containerD .right .data1 .des .body table tr td p {
  font-weight: 300;
  font-size: 0.85rem;
  text-align: center;
  color: #000;
  margin-bottom: 0;
  line-height: unset;
}
.allProductSingle7 .containersD .containerD .right .data1 .des .body table tr td img {
  width: 2.5rem;
  height: 2.5rem;
  object-fit: cover;
  border-radius: 5rem;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
.allProductSingle7 .containersD .containerD .right .data1 .des .body table tr td a {
  display: grid;
  align-items: center;
}
.allProductSingle7 .containersD .containerD .right .data1 .des .body table tr td a svg {
  margin-left: 0.5rem;
}
.allProductSingle7 .containersD .containerD .right .data1 .des .body table tr:nth-child(even) {
  background: #eee;
}
.allProductSingle7 .containersD .containerD .right .data1 .des .body h2, .allProductSingle7 .containersD .containerD .right .data1 .des .body h3, .allProductSingle7 .containersD .containerD .right .data1 .des .body h4 {
  margin-bottom: 1rem;
}
.allProductSingle7 .containersD .containerD .right .data1 .des .body h2 {
  font-size: 1.5rem;
}
.allProductSingle7 .containersD .containerD .right .data1 .des .body h3 {
  font-size: 1.3rem;
}
.allProductSingle7 .containersD .containerD .right .data1 .des .body h4 {
  font-size: 1.2rem;
}
.allProductSingle7 .containersD .containerD .right .data1 .ability1 {
  margin-top: 3rem;
  padding-top: 3rem;
  border-top: 7px double rgb(211, 216, 228);
}
.allProductSingle7 .containersD .containerD .right .data1 .ability1 .title1 {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 1.2rem;
  font-weight: 700;
  color: #000;
}
.allProductSingle7 .containersD .containerD .right .data1 .ability1 .title1:before {
  width: 8px;
  height: 8px;
  display: grid;
  background: var(--green-color);
  border-radius: 50%;
  content: "";
}
.allProductSingle7 .containersD .containerD .right .data1 .ability1 .items .item {
  margin-top: 1rem;
  display: grid;
  grid-template-columns: 1fr;
  grid-gap: 0.5rem;
  background: rgb(243, 248, 253);
  border-radius: 10px;
  padding: 1rem;
}
.allProductSingle7 .containersD .containerD .right .data1 .ability1 .items .item .name1 {
  font-size: 1rem;
  font-weight: 700;
  color: #000;
  margin-bottom: 0.3rem;
}
.allProductSingle7 .containersD .containerD .right .data1 .ability1 .items .item .body1 {
  font-size: 1rem;
  font-weight: 300;
  color: #000;
}
.allProductSingle7 .containersD .containerD .right .data1 .comments1 {
  padding-top: 3rem;
  margin-top: 3rem;
  border-top: 7px double rgb(211, 216, 228);
}
.allProductSingle7 .containersD .containerD .right .data1 .comments1 .topC1 {
  margin-bottom: 1rem;
}
.allProductSingle7 .containersD .containerD .right .data1 .comments1 .topC1 .title2 {
  font-size: 1.1rem;
  font-weight: 900;
  color: #000;
  margin-bottom: 0.5rem;
}
.allProductSingle7 .containersD .containerD .right .data1 .comments1 .topC1 .para1 {
  font-size: 0.9rem;
  font-weight: 300;
  color: #444;
}
.allProductSingle7 .containersD .containerD .right .data1 .comments1 .showComments {
  background: #f7f7f7 !important;
  border-radius: 15px;
}
.allProductSingle7 .containersD .containerD .right .data1 .lottery1 .title {
  font-size: 1rem;
  font-weight: 900;
  color: #000;
  margin-bottom: 1rem;
}
.allProductSingle7 .containersD .containerD .right .data1 .lottery1 table {
  width: 100%;
  border-collapse: collapse;
}
.allProductSingle7 .containersD .containerD .right .data1 .lottery1 table tr {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  align-items: center;
  grid-gap: 0.5rem;
  padding: 1rem;
  border-radius: 10px;
  border-bottom: 1px solid #eee;
}
.allProductSingle7 .containersD .containerD .right .data1 .lottery1 table tr th {
  font-weight: 700;
  color: #000;
  font-size: 0.9rem;
  text-align: right;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
.allProductSingle7 .containersD .containerD .right .data1 .lottery1 table tr td {
  font-weight: 700;
  font-size: 0.9rem;
  text-align: right;
  color: #000;
}
.allProductSingle7 .containersD .containerD .right .data1 .lottery1 table tr:last-child {
  border-bottom: 0;
}
.allProductSingle7 .containersD .containerD .right .data1 .lottery1 table tr:first-child {
  background: #F6F8FB;
}
.allProductSingle7 .containersD .containerD .boxP {
  padding: 1rem;
  background: white;
  box-shadow: 0px 4px 24px 0px rgba(0, 0, 0, 0.1);
  border-radius: 15px;
  position: sticky;
  top: 5rem;
}
.allProductSingle7 .containersD .containerD .boxP .title1 {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-gap: 0.5rem;
}
.allProductSingle7 .containersD .containerD .boxP .title1 .pic {
  border-radius: 10px;
  overflow: hidden;
}
.allProductSingle7 .containersD .containerD .boxP .title1 .pic img {
  width: 5rem;
  height: 5rem;
  object-fit: contain;
}
.allProductSingle7 .containersD .containerD .boxP .title1 .name {
  font-size: 1rem;
  font-weight: 700;
  color: #000;
}
.allProductSingle7 .containersD .containerD .boxP .user {
  padding: 1rem 0;
  margin-top: 1rem;
  border-top: 2px solid #eee;
  border-bottom: 2px solid #eee;
}
.allProductSingle7 .containersD .containerD .boxP .user .name {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.9rem;
  font-weight: 700;
  color: #000;
}
.allProductSingle7 .containersD .containerD .boxP .user .name i {
  display: grid;
  align-items: center;
}
.allProductSingle7 .containersD .containerD .boxP .user .name i svg {
  width: 1.1rem;
  height: 1.1rem;
  fill: #000;
}
.allProductSingle7 .containersD .containerD .boxP .user .option {
  margin-top: 1rem;
  padding: 0.7rem;
  border-radius: 10px;
  background: white;
  border: 1px solid #eee;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
}
.allProductSingle7 .containersD .containerD .boxP .user .option .name {
  color: #444;
  font-size: 0.9rem;
  font-weight: 700;
}
.allProductSingle7 .containersD .containerD .boxP .user .option i {
  display: grid;
  align-items: center;
}
.allProductSingle7 .containersD .containerD .boxP .user .option i svg {
  width: 1rem;
  height: 1rem;
  fill: #444;
}
.allProductSingle7 .containersD .containerD .boxP .user .option i:last-child svg {
  width: 1.3rem;
  height: 1.3rem;
}
.allProductSingle7 .containersD .containerD .boxP .prices {
  margin: 1rem 0;
}
.allProductSingle7 .containersD .containerD .boxP .prices .offP {
  display: grid;
  justify-content: left;
  margin-bottom: 0.5rem;
}
.allProductSingle7 .containersD .containerD .boxP .prices .offP span {
  background: #DA1E28;
  border-radius: 5rem;
  padding: 2px 1rem;
  font-size: 0.8rem;
  font-weight: 900;
  box-shadow: 0 0 10px rgba(255, 0, 0, 0.3);
  color: white;
}
.allProductSingle7 .containersD .containerD .boxP .prices .price {
  display: flex;
  justify-content: left;
  align-items: center;
  grid-gap: 1rem;
  margin-top: 1rem;
  text-align: left;
}
.allProductSingle7 .containersD .containerD .boxP .prices .price s {
  font-size: 1rem;
  opacity: 0.7;
  font-weight: 700;
  color: #444;
  line-height: 1rem;
}
.allProductSingle7 .containersD .containerD .boxP .prices .price bdi {
  font-size: 0.7rem;
  font-weight: 500;
  color: #000;
  line-height: 1rem;
}
.allProductSingle7 .containersD .containerD .boxP .prices .price bdi span {
  font-size: 1.3rem;
  font-weight: 900;
  margin-left: 5px;
  line-height: 0.7rem;
}
.allProductSingle7 .containersD .containerD .boxP .add {
  margin-top: 1rem;
}
.allProductSingle7 .containersD .containerD .boxP .add .addCarts {
  display: grid;
  grid-template-columns: 1fr;
}
.allProductSingle7 .containersD .containerD .boxP .add .addCarts .addCart {
  padding: 0.6rem;
  font-size: 1rem;
  font-weight: 700;
  border-radius: 10px;
  background: var(--green-color);
  color: white;
  text-align: center;
  transition: all 0.3s ease-in-out;
  box-shadow: 0 10px 5px rgba(0, 0, 0, 0.05);
  cursor: pointer;
}
.allProductSingle7 .containersD .containerD .boxP .empty {
  padding: 0.6rem;
  font-size: 1rem;
  font-weight: 700;
  border-radius: 5px;
  background: grey;
  color: white;
  text-align: center;
  transition: all 0.3s ease-in-out;
  cursor: pointer;
  opacity: 1;
  display: grid;
}
.allProductSingle7 .containersD .containerD .boxP .contact {
  background: var(--green-color);
}
.allProductSingle7 .listIndex30 {
  margin-top: 3rem;
}
.allProductSingle7 .sellerInfo {
  background: rgba(0, 0, 0, 0.5);
  z-index: 4000;
  position: fixed;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-columns: 1fr;
  justify-content: center;
}
.allProductSingle7 .sellerInfo .data {
  width: 30%;
  margin: auto;
  background: white;
  display: grid;
  grid-template-columns: 1fr;
  border-radius: 20px;
  overflow: hidden;
}
.allProductSingle7 .sellerInfo .data .title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem;
  border-bottom: 2px solid #eee;
}
.allProductSingle7 .sellerInfo .data .title .name {
  font-size: 1.5rem;
  font-weight: 900;
  color: #444;
}
.allProductSingle7 .sellerInfo .data .title .location {
  display: flex;
  justify-content: left;
  align-items: center;
  gap: 0.3rem;
  font-size: 1rem;
  font-weight: 500;
  color: var(--green-color);
}
.allProductSingle7 .sellerInfo .data .title .location i {
  display: grid;
  align-items: center;
}
.allProductSingle7 .sellerInfo .data .title .location i svg {
  width: 1.2rem;
  height: 1.2rem;
  fill: var(--green-color);
}
.allProductSingle7 .sellerInfo .data .profile {
  margin: 1rem 0;
  padding: 0 1rem;
}
.allProductSingle7 .sellerInfo .data .profile .pic {
  display: grid;
  justify-content: center;
}
.allProductSingle7 .sellerInfo .data .profile .pic img {
  width: auto;
  height: 5rem;
  object-fit: cover;
}
.allProductSingle7 .sellerInfo .data .profile .name {
  font-size: 1.3rem;
  font-weight: 900;
  color: black;
  text-align: center;
  margin-top: 0.5rem;
}
.allProductSingle7 .sellerInfo .data .profile p {
  font-size: 0.9rem;
  font-weight: 300;
  text-align: center;
  margin-top: 0.5rem;
  line-height: 2rem;
  color: #444;
  white-space: pre-line;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  box-orient: vertical;
  -webkit-box-orient: vertical;
  line-clamp: 2;
  -webkit-line-clamp: 2;
  overflow: hidden;
  text-overflow: ellipsis;
}
.allProductSingle7 .sellerInfo .data .options {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 1rem;
  padding: 0 1rem;
}
.allProductSingle7 .sellerInfo .data .options .option {
  background: #f5f5f5;
  padding: 0.5rem 1rem;
  text-align: center;
  border-radius: 10px;
}
.allProductSingle7 .sellerInfo .data .options .option .body2 {
  font-size: 1.2rem;
  font-weight: 700;
  color: black;
}
.allProductSingle7 .sellerInfo .data .options .option .title2 {
  font-size: 1rem;
  font-weight: 500;
  color: #444;
  opacity: 0.7;
}
.allProductSingle7 .sellerInfo .data label {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  grid-gap: 0.5rem;
  margin: 1rem;
}
.allProductSingle7 .sellerInfo .data label input {
  border: 1px solid #ddd;
  font-size: 1rem;
  padding: 0.7rem 1rem;
  border-radius: 5rem;
  font-weight: 700;
  opacity: 0.7;
}
.allProductSingle7 .sellerInfo .data label i {
  display: grid;
  align-items: center;
  justify-content: center;
  transform: rotate(-135deg);
  border: 1px solid var(--green-color);
  border-radius: 50%;
  width: 3rem;
  height: 3rem;
}
.allProductSingle7 .sellerInfo .data label i svg {
  width: 1.2rem;
  height: 1.2rem;
  fill: var(--green-color);
}
.allProductSingle7 .sellerInfo .data .time {
  font-size: 1rem;
  font-weight: 300;
  color: #444;
  text-align: center;
  margin-right: 1rem;
}
.allProductSingle7 .sellerInfo .data .time span {
  color: red;
  font-weight: 700;
}
.allProductSingle7 .sellerInfo .data .time .active {
  color: green;
}
.allProductSingle7 .sellerInfo .data .buttons {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 1rem;
  padding: 1rem;
}
.allProductSingle7 .sellerInfo .data .buttons a {
  padding: 0.5rem 1rem;
  border-radius: 5px;
  font-size: 1rem;
  text-align: center;
  background: white;
  font-weight: 700;
  color: var(--green-color);
  border: 2px solid var(--green-color);
}
.allProductSingle7 .sellerInfo .data .buttons a:last-child {
  color: white;
  border: 2px solid var(--green-color);
  background: var(--green-color);
}
.allProductSingle7 .allTicket {
  background: rgba(0, 0, 0, 0.5);
  z-index: 4000;
  position: fixed;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-columns: 1fr;
  justify-content: center;
}
.allProductSingle7 .allTicket .chatContent {
  width: 40%;
  margin: auto;
  background: white;
  display: grid;
  grid-template-columns: 1fr;
  border-radius: 20px;
  overflow: hidden;
}
.allProductSingle7 .allTicket .chatContent .header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem;
  background: white;
}
.allProductSingle7 .allTicket .chatContent .header .profile {
  display: flex;
  justify-content: right;
  gap: 0.5rem;
  align-items: center;
}
.allProductSingle7 .allTicket .chatContent .header .profile .pic {
  overflow: hidden;
  border-radius: 50%;
}
.allProductSingle7 .allTicket .chatContent .header .profile .pic img {
  width: 3rem;
  height: 3rem;
  object-fit: cover;
}
.allProductSingle7 .allTicket .chatContent .header .profile .name {
  font-size: 1.2rem;
  font-weight: 300;
  color: black;
}
.allProductSingle7 .allTicket .chatContent .header .leftHeader {
  display: flex;
  justify-content: left;
  gap: 0.5rem;
}
.allProductSingle7 .allTicket .chatContent .header i {
  display: grid;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.allProductSingle7 .allTicket .chatContent .header i svg {
  width: 1.3rem;
  height: 1.3rem;
  fill: #444;
}
.allProductSingle7 .allTicket .chatContent .body {
  padding: 0.5rem;
  overflow-y: scroll;
  height: 30rem;
}
.allProductSingle7 .allTicket .chatContent .body p {
  display: none;
  font-size: 0.8rem;
  font-weight: 300;
  color: #000;
  opacity: 0.7;
}
.allProductSingle7 .allTicket .chatContent .body p .closeChats {
  padding: 0.2rem 0.4rem;
  background: red;
  color: white;
  border-radius: 5px;
  font-size: 0.7rem;
  cursor: pointer;
}
.allProductSingle7 .allTicket .chatContent .body .choice {
  display: grid;
  padding: 0.8rem;
  border: 1px solid #bbb;
  font-size: 0.9rem;
  font-weight: 300;
  color: #000;
  margin-top: 0.5rem;
  border-radius: 5px;
  cursor: pointer;
  transition: all 0.3s ease-in-out;
}
.allProductSingle7 .allTicket .chatContent .body .choice:hover {
  color: var(--green-color);
  border: 1px solid var(--green-color);
}
.allProductSingle7 .allTicket .chatContent .body .login {
  display: grid;
}
.allProductSingle7 .allTicket .chatContent .body .bodyLabel {
  display: grid;
  grid-template-columns: 1fr;
  grid-gap: 0.5rem;
  font-size: 0.9rem;
  font-weight: 300;
  color: #000;
  margin-top: 1rem;
}
.allProductSingle7 .allTicket .chatContent .body .bodyLabel input, .allProductSingle7 .allTicket .chatContent .body .bodyLabel select, .allProductSingle7 .allTicket .chatContent .body .bodyLabel textarea {
  background: var(--back1-color);
  border: 1px solid #eee;
  padding: 0.3rem 0.5rem;
  color: #000;
  border-radius: 5px;
  font-size: 0.9rem;
  font-weight: 300;
  width: 100%;
  transition: all 0.3s ease-in-out;
}
.allProductSingle7 .allTicket .chatContent .body .message11 {
  margin-top: 1rem;
  font-size: 0.9rem;
  font-weight: 300;
  color: #444;
}
.allProductSingle7 .allTicket .chatContent .body .message11 .time {
  font-size: 0.7rem;
}
.allProductSingle7 .allTicket .chatContent .body .message11 .messages {
  padding: 0.5rem;
  border-radius: 10px;
  border: 2px solid #bbb;
}
.allProductSingle7 .allTicket .chatContent .body .messages {
  background: white;
}
.allProductSingle7 .allTicket .chatContent .body .opp {
  display: grid;
  justify-content: left;
  text-align: left;
}
.allProductSingle7 .allTicket .chatContent .body .me {
  display: grid;
  justify-content: right;
  text-align: right;
}
.allProductSingle7 .allTicket .chatContent .body .me .messages {
  border: 2px solid var(--green-color);
}
.allProductSingle7 .allTicket .chatContent .body .submit {
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--green-color);
  text-align: center;
  background: transparent;
  width: 100%;
  border: 1px solid var(--green-color);
  padding: 0.5rem 1rem;
  border-radius: 5px;
  margin-top: 1rem;
  transition: all 0.3s ease-in-out;
}
.allProductSingle7 .allTicket .chatContent .body .submit:hover {
  background: var(--green-color);
  color: white;
}
.allProductSingle7 .allTicket .chatContent .body .sendImage {
  background: white;
  border-radius: 10px;
  overflow: hidden;
  display: grid;
  grid-template-columns: 1fr;
  justify-content: center;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
  margin-top: 1rem;
}
.allProductSingle7 .allTicket .chatContent .body .sendImage .dropify-wrapper {
  height: 100px;
  border: 1px solid #eee !important;
}
.allProductSingle7 .allTicket .chatContent .body .sendImage .dropify-wrapper .file-icon:before {
  opacity: 0 !important;
  position: absolute !important;
  top: 0 !important;
  visibility: hidden !important;
}
.allProductSingle7 .allTicket .chatContent .body .sendImage .dropify-wrapper .dropify-message {
  position: relative !important;
  top: auto !important;
  margin-top: 2rem;
}
.allProductSingle7 .allTicket .chatContent .body .sendImage .dropify-wrapper .dropify-message p {
  margin: 0;
  font-size: 1rem;
  color: rgba(0, 128, 0, 0.5098039216);
}
.allProductSingle7 .allTicket .chatContent .send {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-gap: 1rem;
  padding: 0.5rem;
}
.allProductSingle7 .allTicket .chatContent .send input {
  background: white;
  border: 1px solid #eee;
  padding: 0.5rem 1rem;
  color: #000;
  border-radius: 5rem;
  font-size: 1rem;
  font-weight: 300;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
  width: 100%;
  transition: all 0.3s ease-in-out;
}
.allProductSingle7 .allTicket .chatContent .send button {
  font-size: 0.9rem;
  font-weight: 300;
  color: white;
  border-radius: 5rem;
  background: var(--green-color);
  padding: 0 1rem;
}
.allProductSingle7 .allTicket .chatContent .loginChat {
  background: red;
  border-top: 1px solid #eee;
  padding: 0.5rem;
  text-align: center;
  font-size: 0.8rem;
  font-weight: 300;
  color: white;
  display: grid;
  width: 100%;
}
.allProductSingle7 .allTicket .chatContent .typeLogin1 {
  margin-top: 1rem;
  border-radius: 5px;
}
.allProductSingle7 .allChangeList {
  background: rgba(0, 0, 0, 0.5);
  z-index: 4000;
  position: fixed;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-columns: 1fr;
  justify-content: center;
}
.allProductSingle7 .allChangeList .changeList {
  width: 40%;
  margin: auto;
  background: white;
  display: grid;
  grid-template-columns: 1fr;
  border-radius: 20px;
  overflow: hidden;
  padding: 2rem;
}
.allProductSingle7 .allChangeList .changeList .title2 {
  text-align: center;
  font-size: 1.2rem;
  font-weight: 700;
  color: black;
  margin-bottom: 1rem;
}
.allProductSingle7 .allBenefit {
  background: rgba(0, 0, 0, 0.5);
  z-index: 4000;
  position: fixed;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-columns: 1fr;
  justify-content: center;
}
.allProductSingle7 .allBenefit .showB {
  width: 30%;
  margin: auto;
  background: white;
  display: grid;
  grid-template-columns: 1fr;
  border-radius: 20px;
  overflow: hidden;
}
.allProductSingle7 .allBenefit .showB .title2 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  text-align: center;
  font-size: 1.2rem;
  font-weight: 700;
  color: black;
  padding: 1rem;
  border-bottom: 2px solid rgb(238, 238, 241);
}
.allProductSingle7 .allBenefit .showB .title2 i {
  display: grid;
  align-items: center;
}
.allProductSingle7 .allBenefit .showB .title2 i svg {
  width: 1.5rem;
  height: 1.5rem;
  fill: #000;
}
.allProductSingle7 .allBenefit .showB .items {
  padding: 1rem;
  padding-top: 0;
}
.allProductSingle7 .allBenefit .showB .items .item {
  margin-top: 1rem;
  padding: 0.5rem;
  border-radius: 10px;
  border: 1px solid rgb(238, 238, 241);
  cursor: pointer;
  display: grid;
}
.allProductSingle7 .allBenefit .showB .items .item .name {
  font-size: 0.9rem;
  font-weight: 700;
  color: #444;
  margin-bottom: 0.5rem;
}
.allProductSingle7 .allBenefit .showB .items .item .body {
  font-size: 0.8rem;
  font-weight: 300;
  color: #000;
  opacity: 0.5;
}
.allProductSingle7 .allBulk {
  background: rgba(0, 0, 0, 0.5);
  z-index: 4000;
  position: fixed;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-columns: 1fr;
  justify-content: center;
}
.allProductSingle7 .allBulk .showB {
  width: 30%;
  margin: auto;
  background: white;
  display: grid;
  grid-template-columns: 1fr;
  border-radius: 20px;
  overflow: hidden;
}
.allProductSingle7 .allBulk .showB .title2 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  text-align: center;
  font-size: 1.2rem;
  font-weight: 700;
  color: black;
  padding: 1rem;
  border-bottom: 2px solid rgb(238, 238, 241);
}
.allProductSingle7 .allBulk .showB .title2 i {
  display: grid;
  align-items: center;
  cursor: pointer;
}
.allProductSingle7 .allBulk .showB .title2 i svg {
  width: 1.5rem;
  height: 1.5rem;
  fill: #000;
}
.allProductSingle7 .allBulk .showB table {
  border-radius: 20px;
  width: 100%;
  border-collapse: collapse;
}
.allProductSingle7 .allBulk .showB table tr {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  align-items: center;
  grid-gap: 0.5rem;
  padding: 0.5rem 1rem;
  border-bottom: 1px solid #eee;
}
.allProductSingle7 .allBulk .showB table tr th {
  font-weight: 700;
  color: #000;
  font-size: 0.9rem;
  text-align: right;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
.allProductSingle7 .allBulk .showB table tr td {
  font-weight: 700;
  font-size: 0.9rem;
  text-align: right;
  color: #000;
}
.allProductSingle7 .allBulk .showB table tr:first-child {
  background: #F6F8FB;
}
.allProductSingle7 .allGuide {
  background: rgba(0, 0, 0, 0.5);
  z-index: 4000;
  position: fixed;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-columns: 1fr;
  justify-content: center;
}
.allProductSingle7 .allGuide .showB {
  width: 60%;
  margin: auto;
  background: white;
  display: grid;
  grid-template-columns: 1fr;
  border-radius: 20px;
  overflow: hidden;
}
.allProductSingle7 .allGuide .showB .title2 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  text-align: center;
  font-size: 1.2rem;
  font-weight: 700;
  color: black;
  padding: 1rem;
  border-bottom: 2px solid rgb(238, 238, 241);
}
.allProductSingle7 .allGuide .showB .title2 i {
  display: grid;
  align-items: center;
  cursor: pointer;
}
.allProductSingle7 .allGuide .showB .title2 i svg {
  width: 1.5rem;
  height: 1.5rem;
  fill: #000;
}
.allProductSingle7 .allGuide .showB table {
  border-radius: 20px;
  width: 100%;
  border-collapse: collapse;
}
.allProductSingle7 .allGuide .showB table tr {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  align-items: center;
  grid-gap: 0.5rem;
  padding: 0.5rem 1rem;
  border-bottom: 1px solid #eee;
}
.allProductSingle7 .allGuide .showB table tr th {
  font-weight: 700;
  color: #000;
  font-size: 0.9rem;
  text-align: right;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
.allProductSingle7 .allGuide .showB table tr td {
  font-weight: 700;
  font-size: 0.9rem;
  text-align: right;
  color: #000;
}
.allProductSingle7 .allGuide .showB table tr:first-child {
  background: #F6F8FB;
}
.allProductSingle7 .allGuide .showB .c4 tr {
  grid-template-columns: repeat(4, 1fr);
}
.allProductSingle7 #copy-btn {
  display: none;
}
@media screen and (max-width: 700px) {
  .allProductSingle7 {
    width: 100% !important;
    margin-top: 0;
  }
  .allProductSingle7 .address {
    overflow-x: scroll;
    padding: 0.5rem 0;
    margin-bottom: 0;
    margin-right: 0.3rem;
    border-radius: 0;
  }
  .allProductSingle7 .address i {
    display: none;
  }
  .allProductSingle7 .address a {
    overflow: unset;
    white-space: nowrap;
  }
  .allProductSingle7 .adminButtons {
    grid-template-columns: 1fr;
    padding: 0.5rem;
  }
  .allProductSingle7 .showEditBtn {
    bottom: 6rem;
    left: 0.5rem;
    font-size: 0.8rem;
  }
  .allProductSingle7 .containers {
    display: block;
  }
  .allProductSingle7 .containers .right11 {
    display: flex;
    flex-direction: column-reverse;
    grid-gap: 0.5rem;
    border-radius: 5px;
    padding: 0.5rem;
    border: 0;
  }
  .allProductSingle7 .containers .right11 .data .title2 h1 {
    font-size: 1rem;
  }
  .allProductSingle7 .containers .right11 .data .title2 .titleEn {
    font-size: 0.8rem;
  }
  .allProductSingle7 .containers .right11 .data .title2 .op1 {
    display: block;
    grid-gap: 0.5rem;
    padding-bottom: 0.5rem;
  }
  .allProductSingle7 .containers .right11 .data .title2 .op1 .right .option {
    font-size: 0.7rem;
    padding: 0.2rem 0.5rem;
  }
  .allProductSingle7 .containers .right11 .data .title2 .op1 .left .guideS {
    font-size: 0.7rem;
  }
  .allProductSingle7 .containers .right11 .data .abilities {
    margin-top: 1rem;
  }
  .allProductSingle7 .containers .right11 .data .abilities .name2 {
    font-size: 0.9rem;
  }
  .allProductSingle7 .containers .right11 .data .abilities ul li {
    padding: 0.5rem;
  }
  .allProductSingle7 .containers .right11 .data .abilities ul li .name1, .allProductSingle7 .containers .right11 .data .abilities ul li .body1 {
    font-size: 0.75rem;
  }
  .allProductSingle7 .containers .right11 .data .abilities ul li .body1 {
    font-size: 0.8rem;
  }
  .allProductSingle7 .containers .right11 .data .abilities .more span {
    font-size: 0.7rem;
    padding: 0.2rem 0.3rem;
    margin-left: 0.5rem;
  }
  .allProductSingle7 .containers .right11 .data .abilities .more span i svg {
    width: 0.8rem;
    height: 0.8rem;
  }
  .allProductSingle7 .containers .right11 .data .info1 {
    padding: 0.5rem;
    font-size: 0.8rem;
  }
  .allProductSingle7 .containers .right11 .data .info1 .title2 {
    font-size: 0.9rem;
  }
  .allProductSingle7 .containers .right11 .data .info1 .title2 i svg {
    width: 1rem;
    height: 1rem;
  }
  .allProductSingle7 .containers .right11 .data .box {
    margin: 1rem 0;
  }
  .allProductSingle7 .containers .right11 .data .box i svg {
    width: 0.8rem;
    height: 0.8rem;
  }
  .allProductSingle7 .containers .right11 .gallery {
    position: relative;
  }
  .allProductSingle7 .containers .right11 .gallery .options {
    gap: 0.5rem;
  }
  .allProductSingle7 .containers .right11 .gallery .options .option {
    padding: 0.5rem;
    font-size: 0.7rem;
    margin-bottom: 0.2rem;
    border-radius: 50%;
  }
  .allProductSingle7 .containers .right11 .gallery .options .option i svg {
    width: 1.2rem;
    height: 1.2rem;
  }
  .allProductSingle7 .containers .right11 .gallery .pics .pic {
    display: none;
  }
  .allProductSingle7 .containers .right11 .gallery .pics .images {
    margin-top: 0;
  }
  .allProductSingle7 .containers .right11 .gallery .pics .images .slider-image .item {
    padding: 0;
    border-radius: 0;
  }
  .allProductSingle7 .containers .right11 .gallery .pics .images .slider-image .item img {
    height: 100dvw;
  }
  .allProductSingle7 .containers .right11 .gallery .pics .images .slider-image .active2 {
    border: 0;
  }
  .allProductSingle7 .containers .right11 .gallery .pics .images .slider-image .owl-next, .allProductSingle7 .containers .right11 .gallery .pics .images .slider-image .owl-prev {
    padding: 0.5rem;
    background: white !important;
    position: absolute;
    top: 0;
    bottom: 0;
    margin: auto;
    right: 0.5rem;
    width: 2.5rem;
    border: 2px solid black !important;
    font-size: 1.5rem !important;
    border-radius: 50%;
    color: black !important;
    height: 2.5rem;
    transition: all 0.3s ease-in-out;
  }
  .allProductSingle7 .containers .right11 .gallery .pics .images .slider-image .owl-next:hover, .allProductSingle7 .containers .right11 .gallery .pics .images .slider-image .owl-prev:hover {
    background: black !important;
    color: white !important;
  }
  .allProductSingle7 .containers .right11 .gallery .pics .images .slider-image .owl-next {
    left: 0.5rem;
    right: auto;
  }
  .allProductSingle7 .containers .left {
    display: none;
  }
  .allProductSingle7 .addFloat {
    display: block;
  }
  .allProductSingle7 .containersD .tabs {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.5rem;
    margin-bottom: 0;
  }
  .allProductSingle7 .containersD .tabs .tab {
    font-size: 0.85rem;
    font-weight: 700;
    padding: 1rem 0.5rem;
    position: relative;
    text-align: center;
  }
  .allProductSingle7 .containersD .tabs .active:before {
    height: 4px;
    width: 50%;
  }
  .allProductSingle7 .containersD .containerD {
    margin-top: 0;
    display: block;
  }
  .allProductSingle7 .containersD .containerD .right .data1 {
    padding: 1rem;
  }
  .allProductSingle7 .containersD .containerD .right .data1 .des .title1 {
    font-size: 1rem;
  }
  .allProductSingle7 .containersD .containerD .right .data1 .des .title1:before {
    width: 6px;
    height: 6px;
  }
  .allProductSingle7 .containersD .containerD .right .data1 .des .body p {
    font-size: 0.9rem;
    margin-top: 0.5rem;
  }
  .allProductSingle7 .containersD .containerD .right .data1 .ability1 {
    margin-top: 2rem;
    padding-top: 2rem;
  }
  .allProductSingle7 .containersD .containerD .right .data1 .ability1 .title1 {
    font-size: 1rem;
  }
  .allProductSingle7 .containersD .containerD .right .data1 .ability1 .title1:before {
    width: 6px;
    height: 6px;
  }
  .allProductSingle7 .containersD .containerD .right .data1 .ability1 .items .item {
    grid-template-columns: 1fr;
    border-radius: 5px;
    grid-gap: 0;
    padding: 0.5rem;
  }
  .allProductSingle7 .containersD .containerD .right .data1 .ability1 .items .item .name1 {
    font-size: 0.8rem;
    background: transparent;
  }
  .allProductSingle7 .containersD .containerD .right .data1 .ability1 .items .item .body1 {
    font-size: 0.8rem;
  }
  .allProductSingle7 .containersD .containerD .right .data1 .comments1 {
    margin-top: 2rem;
    padding-top: 2rem;
  }
  .allProductSingle7 .containersD .containerD .right .data1 .comments1 .title1 {
    font-size: 1rem;
  }
  .allProductSingle7 .containersD .containerD .right .data1 .comments1 .title1:before {
    width: 6px;
    height: 6px;
  }
  .allProductSingle7 .containersD .containerD .boxP {
    display: none;
  }
  .allProductSingle7 .listIndex30 {
    margin-top: 1rem;
  }
  .allProductSingle7 .sellerInfo .data {
    width: 98%;
    border-radius: 10px;
  }
  .allProductSingle7 .sellerInfo .data .title {
    padding: 0.5rem;
  }
  .allProductSingle7 .sellerInfo .data .title .name {
    font-size: 1rem;
  }
  .allProductSingle7 .sellerInfo .data .title .location {
    font-size: 0.8rem;
  }
  .allProductSingle7 .sellerInfo .data .title .location i svg {
    width: 0.9rem;
    height: 0.9rem;
  }
  .allProductSingle7 .sellerInfo .data .profile {
    margin: 0.5rem 0;
    padding: 0 0.5rem;
  }
  .allProductSingle7 .sellerInfo .data .profile .pic img {
    height: 4rem;
  }
  .allProductSingle7 .sellerInfo .data .profile .name {
    font-size: 1rem;
  }
  .allProductSingle7 .sellerInfo .data .profile p {
    font-size: 0.8rem;
  }
  .allProductSingle7 .sellerInfo .data .options {
    display: grid;
    grid-gap: 0.5rem;
    padding: 0 0.5rem;
  }
  .allProductSingle7 .sellerInfo .data .options .option {
    padding: 0.5rem;
  }
  .allProductSingle7 .sellerInfo .data .options .option .body2 {
    font-size: 0.9rem;
  }
  .allProductSingle7 .sellerInfo .data .options .option .title2 {
    font-size: 0.8rem;
  }
  .allProductSingle7 .sellerInfo .data label {
    margin: 0.5rem;
  }
  .allProductSingle7 .sellerInfo .data label input {
    font-size: 0.85rem;
    padding: 0.5rem 0.8rem;
  }
  .allProductSingle7 .sellerInfo .data label i {
    width: 2.5rem;
    height: 2.5rem;
  }
  .allProductSingle7 .sellerInfo .data label i svg {
    width: 1rem;
    height: 1rem;
  }
  .allProductSingle7 .sellerInfo .data .time {
    font-size: 0.9rem;
    margin-right: 0.5rem;
  }
  .allProductSingle7 .sellerInfo .data .buttons {
    grid-gap: 0.5rem;
    padding: 0.5rem;
  }
  .allProductSingle7 .sellerInfo .data .buttons a {
    padding: 0.5rem;
    font-size: 0.8rem;
  }
  .allProductSingle7 .allTicket .chatContent {
    width: 100%;
    border-radius: 0;
  }
  .allProductSingle7 .allTicket .chatContent .header .profile .pic img {
    width: 2rem;
    height: 2rem;
  }
  .allProductSingle7 .allTicket .chatContent .header .profile .name {
    font-size: 0.8rem;
  }
  .allProductSingle7 .allTicket .chatContent .header i svg {
    width: 1.1rem;
    height: 1.1rem;
  }
  .allProductSingle7 .allTicket .chatContent .body {
    height: calc(100vh - 6.4rem);
  }
  .allProductSingle7 .allTicket .chatContent .body p {
    font-size: 0.7rem;
  }
  .allProductSingle7 .allTicket .chatContent .body p .closeChats {
    padding: 0.2rem;
  }
  .allProductSingle7 .allTicket .chatContent .body .choice {
    padding: 0.5rem;
    font-size: 0.7rem;
  }
  .allProductSingle7 .allTicket .chatContent .body .bodyLabel {
    font-size: 0.7rem;
    margin-top: 0.5rem;
  }
  .allProductSingle7 .allTicket .chatContent .body .bodyLabel input, .allProductSingle7 .allTicket .chatContent .body .bodyLabel select, .allProductSingle7 .allTicket .chatContent .body .bodyLabel textarea {
    padding: 0.3rem;
    font-size: 0.7rem;
  }
  .allProductSingle7 .allTicket .chatContent .body .message11 {
    margin-top: 1rem;
    font-size: 0.8rem;
  }
  .allProductSingle7 .allTicket .chatContent .body .message11 .time {
    font-size: 0.6rem;
  }
  .allProductSingle7 .allTicket .chatContent .body .message11 .messages {
    padding: 0.3rem;
  }
  .allProductSingle7 .allTicket .chatContent .body .submit {
    font-size: 0.8rem;
    padding: 0.3rem 0.5rem;
    margin-top: 0.5rem;
  }
  .allProductSingle7 .allTicket .chatContent .body .sendImage {
    margin-top: 0.5rem;
  }
  .allProductSingle7 .allTicket .chatContent .send {
    grid-gap: 0.5rem;
    padding: 0.5rem;
  }
  .allProductSingle7 .allTicket .chatContent .send input {
    padding: 0.5rem;
    font-size: 0.85rem;
  }
  .allProductSingle7 .allTicket .chatContent .send button {
    font-size: 0.7rem;
    padding: 0 1rem;
  }
  .allProductSingle7 .allTicket .chatContent .loginChat {
    font-size: 1rem;
    height: 3.5rem;
    align-items: center;
  }
  .allProductSingle7 .allTicket .chatContent .typeLogin1 {
    margin-top: 0.5rem;
  }
  .allProductSingle7 .allChangeList .changeList {
    width: 100%;
    padding: 0.5rem;
  }
  .allProductSingle7 .allChangeList .changeList .title2 {
    font-size: 0.9rem;
    margin-bottom: 0.5rem;
  }
  .allProductSingle7 .allBenefit .showB {
    width: 100%;
    border-radius: 0;
    height: 100vh;
    display: block;
  }
  .allProductSingle7 .allBenefit .showB .title2 {
    font-size: 0.9rem;
    padding: 0.5rem;
  }
  .allProductSingle7 .allBenefit .showB .title2 i svg {
    width: 1rem;
    height: 1rem;
  }
  .allProductSingle7 .allBenefit .showB .items {
    padding: 0.5rem;
    padding-top: 0;
  }
  .allProductSingle7 .allGuide .showB {
    width: 100%;
    border-radius: 0;
    height: 100vh;
    display: block;
  }
  .allProductSingle7 .allGuide .showB .title2 {
    font-size: 0.9rem;
    padding: 0.5rem;
  }
  .allProductSingle7 .allGuide .showB .title2 i svg {
    width: 1rem;
    height: 1rem;
  }
  .allProductSingle7 .allGuide .showB .table {
    overflow-x: scroll;
  }
  .allProductSingle7 .allGuide .showB table {
    border-radius: 10px;
  }
  .allProductSingle7 .allGuide .showB table tr {
    padding: 0.5rem;
    grid-template-columns: repeat(5, 7rem);
  }
  .allProductSingle7 .allGuide .showB table tr th {
    font-size: 0.7rem;
  }
  .allProductSingle7 .allGuide .showB table tr td {
    font-size: 0.7rem;
  }
  .allProductSingle7 .allGuide .showB .c4 tr {
    grid-template-columns: repeat(4, 7rem);
  }
  .allProductSingle7 .allBulk .showB {
    width: 100%;
    border-radius: 0;
  }
  .allProductSingle7 .allBulk .showB .title2 {
    font-size: 0.9rem;
    padding: 0.5rem;
  }
  .allProductSingle7 .allBulk .showB .title2 i svg {
    width: 1rem;
    height: 1rem;
  }
  .allProductSingle7 .allBulk .showB table {
    border-radius: 10px;
  }
  .allProductSingle7 .allBulk .showB table tr {
    padding: 0.5rem;
  }
  .allProductSingle7 .allBulk .showB table tr th {
    font-size: 0.8rem;
  }
  .allProductSingle7 .allBulk .showB table tr td {
    font-size: 0.8rem;
  }
}

.allSingleProject {
  display: grid;
  grid-template-columns: 1fr 25rem;
  grid-gap: 1rem;
  margin: 1rem auto;
  min-height: calc(100vh - 12rem);
}
.allSingleProject .right h1 {
  font-size: 1.7rem;
  font-weight: 900;
  color: #000;
  margin-bottom: 1rem;
  line-height: 3rem;
}
.allSingleProject .right .pic {
  border-radius: 15px;
  overflow: hidden;
}
.allSingleProject .right .pic img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.allSingleProject .right .options {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  padding: 1rem;
  margin: 1rem 0;
  background: white;
  gap: 1rem;
  border-radius: 15px;
  position: relative;
  z-index: 1;
}
.allSingleProject .right .options .option {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.allSingleProject .right .options .option h3 {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--green-color);
}
.allSingleProject .right .options .option .des {
  font-size: 0.9rem;
  font-weight: 300;
  color: #444;
}
.allSingleProject .right .options:before {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 0;
  box-shadow: 0 0 30px var(--red-color);
  opacity: 0.1;
  border-radius: 15px;
}
.allSingleProject .right .body {
  font-size: 1rem;
  font-weight: 400;
  color: #000;
}
.allSingleProject .right .body p {
  font-size: 1rem;
  font-weight: 400;
  color: #000;
  margin-bottom: 1rem;
  line-height: 3rem;
}
.allSingleProject .right .body .image {
  display: grid;
  justify-content: center;
  margin: 1rem 0;
}
.allSingleProject .right .body ul {
  margin: 2rem;
}
.allSingleProject .right .body ul li {
  list-style: decimal;
  margin-bottom: 1rem;
}
.allSingleProject .right .body ul ul {
  margin: 0;
  margin-top: 1rem;
  margin-right: 1rem;
}
.allSingleProject .right .body figure {
  display: grid;
}
.allSingleProject .right .body table {
  background: white;
  border-radius: 0.3rem;
  box-shadow: 0 0 10px #eee;
  width: 100%;
  margin-bottom: 1rem;
}
.allSingleProject .right .body table tr {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(1px, 1fr));
  align-items: center;
  grid-gap: 1rem;
  padding: 1rem;
}
.allSingleProject .right .body table tr th {
  font-weight: 700;
  color: #000;
  font-size: 0.75rem;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  display: grid;
  align-items: center;
  justify-content: center;
}
.allSingleProject .right .body table tr td {
  font-weight: 300;
  font-size: 0.75rem;
  text-align: center;
  color: #000;
}
.allSingleProject .right .body table tr td svg {
  fill: #000;
  width: 1rem;
  height: 1rem;
  cursor: pointer;
}
.allSingleProject .right .body table tr td img {
  width: 2.5rem;
  height: 2.5rem;
  object-fit: cover;
  border-radius: 5rem;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
.allSingleProject .right .body table tr td a {
  display: grid;
  align-items: center;
}
.allSingleProject .right .body table tr td a svg {
  margin-left: 0.5rem;
}
.allSingleProject .right .body table tr .buttons a {
  font-size: 0.8rem;
  padding: 0.3rem;
  border-radius: 5px;
  color: white;
  background: green;
}
.allSingleProject .right .body table tr .buttons button {
  font-size: 0.8rem;
  padding: 0.3rem;
  border-radius: 5px;
  color: white;
  background: orange;
}
.allSingleProject .right .body table tr:nth-child(even) {
  background: #f5f5f5;
}
.allSingleProject .left .postsList {
  padding: 0.5rem;
  background: white;
  border-radius: 15px;
  position: relative;
}
.allSingleProject .left .postsList .titles {
  margin-bottom: 1rem;
  display: grid;
  justify-content: center;
}
.allSingleProject .left .postsList .titles .name {
  text-align: center;
  font-size: 1.5rem;
  font-weight: 900;
  position: relative;
  color: #000;
}
.allSingleProject .left .postsList .titles .name:before {
  content: "";
  position: absolute;
  top: 100%;
  width: 2rem;
  right: 0;
  left: 0;
  margin: auto;
  background: var(--red-color);
  height: 5px;
  border-radius: 10px;
  box-shadow: 0 5px 5px rgba(0, 0, 0, 0.1);
}
.allSingleProject .left .postsList .items .item {
  position: relative;
  z-index: 1;
}
.allSingleProject .left .postsList .items .item a {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  position: relative;
  z-index: 2;
  border: 1px solid #eee;
  border-radius: 15px;
  padding: 0.5rem;
}
.allSingleProject .left .postsList .items .item a .pic img {
  border-radius: 10px;
  width: 6rem;
  height: 6rem;
  object-fit: cover;
}
.allSingleProject .left .postsList .items .item a .des {
  padding: 0.5rem;
}
.allSingleProject .left .postsList .items .item a .des .title, .allSingleProject .left .postsList .items .item a .des .body {
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  text-overflow: ellipsis;
  font-size: 1rem;
  font-weight: 700;
  color: #000;
  margin-bottom: 0.5rem;
}
.allSingleProject .left .postsList .items .item a .des .body {
  -webkit-line-clamp: 2;
  font-weight: 500;
  font-size: 0.8rem;
  opacity: 0.5;
  margin-bottom: 0;
}
.allSingleProject .left .postsList:before {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 0;
  box-shadow: 0 0 30px var(--red-color);
  opacity: 0.1;
  border-radius: 15px;
}
@media screen and (max-width: 1000px) {
  .allSingleProject {
    display: block;
  }
  .allSingleProject .right {
    margin-bottom: 1rem;
  }
  .allSingleProject .right h1 {
    font-size: 1.3rem;
  }
  .allSingleProject .right .options {
    padding: 0;
    margin: 0.5rem 0;
    gap: 0.5rem;
    border-radius: 10px;
    background: transparent;
  }
  .allSingleProject .right .options:before {
    content: unset;
  }
  .allSingleProject .right .body {
    font-size: 0.9rem;
  }
  .allSingleProject .right .body p {
    font-size: 0.9rem;
  }
  .allSingleProject .right .body .image {
    display: grid;
    justify-content: center;
    margin: 1rem 0;
  }
  .allSingleProject .left .postsList {
    border-radius: 10px;
  }
  .allSingleProject .left .postsList .titles .name {
    font-size: 1.2rem;
  }
  .allSingleProject .left .postsList .titles .name:before {
    height: 3px;
  }
  .allSingleProject .left .postsList .items .item a {
    border-radius: 10px;
    padding: 0.5rem;
  }
  .allSingleProject .left .postsList .items .item a .pic img {
    width: 4rem;
    height: 4rem;
  }
  .allSingleProject .left .postsList .items .item a .des {
    padding: 0;
    padding-right: 0.5rem;
  }
  .allSingleProject .left .postsList .items .item a .des .title, .allSingleProject .left .postsList .items .item a .des .body {
    font-size: 0.9rem;
  }
  .allSingleProject .left .postsList .items .item a .des .body {
    font-size: 0.7rem;
  }
  .allSingleProject .left .postsList:before {
    content: "";
    position: absolute;
    z-index: 1;
    inset: 0;
    box-shadow: 0 0 30px var(--red-color);
    opacity: 0.1;
    border-radius: 15px;
  }
}

.allCounseling {
  position: fixed;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  background: hsla(0, 0%, 52.9%, 0.5);
  z-index: 999;
  display: none;
  overflow-y: scroll;
}
.allCounseling .counselingFast {
  background: white;
  width: 50%;
  margin: auto;
  border-radius: 20px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
}
.allCounseling .counselingFast .title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 2px solid rgb(238, 238, 241);
  padding: 1rem;
  margin-bottom: 0.5rem;
}
.allCounseling .counselingFast .title .title2 {
  font-size: 1.1rem;
  font-weight: 500;
  color: #000;
}
.allCounseling .counselingFast .title i {
  display: grid;
  align-items: center;
  cursor: pointer;
}
.allCounseling .counselingFast .title i svg {
  width: 1.5rem;
  height: 1.5rem;
  fill: #000;
}
.allCounseling .counselingFast .cc1 {
  padding: 1rem;
  padding-top: 0.5rem;
}
.allCounseling .counselingFast .counselingTitleProduct {
  font-size: 0.9rem;
  font-weight: 300;
  color: #000;
  background: #f5f5f5;
  border-radius: 10px;
  padding: 1rem;
  text-align: center;
}
.allCounseling .counselingFast .counselingFastData {
  margin: 1rem 0;
}
.allCounseling .counselingFast .counselingFastData label {
  font-size: 1rem;
  font-weight: 700;
  color: #444;
  margin-bottom: 0.5rem;
  display: grid;
  text-align: right;
}
.allCounseling .counselingFast .counselingFastData input, .allCounseling .counselingFast .counselingFastData textarea {
  background: white;
  border: 1px solid #eee;
  padding: 0.7rem;
  color: #000;
  border-radius: 10px;
  font-size: 1rem;
  width: 100%;
  transition: all 0.3s ease-in-out;
  resize: vertical;
  outline: transparent;
}
.allCounseling .counselingFast button, .allCounseling .counselingFast a {
  background: var(--green-color);
  color: white;
  font-size: 1rem;
  font-weight: 300;
  padding: 0.3rem 1rem;
  border-radius: 5px;
  margin-top: 1rem;
}

@media screen and (max-width: 800px) {
  .allCounseling .counselingFast {
    width: 98%;
    border-radius: 10px;
  }
  .allCounseling .counselingFast .title {
    padding: 0.5rem;
  }
  .allCounseling .counselingFast .title .title2 {
    font-size: 0.9rem;
  }
  .allCounseling .counselingFast .title i svg {
    width: 1rem;
    height: 1rem;
  }
  .allCounseling .counselingFast .cc1 {
    padding: 0.5rem;
  }
  .allCounseling .counselingFast .counselingTitleProduct {
    font-size: 0.8rem;
    padding: 0.5rem;
  }
  .allCounseling .counselingFast .counselingFastData {
    margin: 0.5rem 0;
  }
  .allCounseling .counselingFast .counselingFastData label {
    font-size: 0.8rem;
  }
  .allCounseling .counselingFast .counselingFastData input, .allCounseling .counselingFast .counselingFastData textarea {
    padding: 0.5rem;
    font-size: 0.8rem;
  }
  .allCounseling .counselingFast button, .allCounseling .counselingFast a {
    font-size: 0.8rem;
    padding: 0.3rem 0.5rem;
    margin-top: 0.5rem;
  }
}
.allSellerSingle {
  margin: 1rem auto;
}
.allSellerSingle .info1 {
  width: 350px;
  background: white;
  padding: 1rem;
  position: sticky;
  border: 1px solid #eee;
  box-shadow: 0 4px 16px 0 rgba(36, 43, 61, 0.1);
  top: 5rem;
  border-radius: 20px;
}
.allSellerSingle .info1 .profile {
  display: grid;
  gap: 0.5rem;
  justify-content: center;
  align-content: center;
}
.allSellerSingle .info1 .profile .pic {
  display: grid;
  justify-content: center;
  overflow: hidden;
}
.allSellerSingle .info1 .profile .pic img {
  width: 4rem;
  height: 4rem;
  object-fit: cover;
  border-radius: 50%;
}
.allSellerSingle .info1 .profile .detail2 {
  display: grid;
  align-items: center;
  gap: 0.5rem;
  justify-content: center;
}
.allSellerSingle .info1 .profile .detail2 .name {
  font-size: 1.2rem;
  font-weight: 900;
  color: black;
}
.allSellerSingle .info1 .profile .detail2 .city {
  font-size: 0.8rem;
  font-weight: 500;
  color: #444;
  border: 1px solid #ddd;
  padding: 2px 10px;
  background: #f7f7f7;
  text-align: center;
  border-radius: 5rem;
}
.allSellerSingle .info1 .options {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.5rem;
  flex-wrap: wrap;
  align-items: center;
  margin-top: 1rem;
}
.allSellerSingle .info1 .options .share, .allSellerSingle .info1 .options .report, .allSellerSingle .info1 .options .chat {
  padding: 0.5rem;
  border: 1px solid var(--green-color);
  border-radius: 5px;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--green-color);
}
.allSellerSingle .info1 .options .share i, .allSellerSingle .info1 .options .report i, .allSellerSingle .info1 .options .chat i {
  display: grid;
  align-items: center;
  justify-content: center;
}
.allSellerSingle .info1 .options .share i svg, .allSellerSingle .info1 .options .report i svg, .allSellerSingle .info1 .options .chat i svg {
  width: 1rem;
  height: 1rem;
  fill: var(--green-color);
}
.allSellerSingle .info1 .options2 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  align-items: center;
  gap: 0.5rem;
  margin-top: 1rem;
}
.allSellerSingle .info1 .options2 .option {
  padding: 0.5rem;
  text-align: center;
  background: #f7f7f7;
  border: 1px solid #eee;
  border-radius: 5px;
}
.allSellerSingle .info1 .options2 .option .body2 {
  font-size: 0.9rem;
  font-weight: 900;
  color: black;
}
.allSellerSingle .info1 .options2 .option .title2 {
  font-size: 0.7rem;
  font-weight: 300;
  color: #000;
}
.allSellerSingle .tabs {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1rem;
  margin: 1rem 0;
}
.allSellerSingle .tabs .tab {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
  font-size: 1rem;
  font-weight: 700;
  border: 1px solid #ddd;
  color: #444;
  cursor: pointer;
  width: 13rem;
  padding: 0.5rem 1rem;
  border-radius: 5rem;
}
.allSellerSingle .tabs .tab i {
  display: grid;
  align-items: center;
}
.allSellerSingle .tabs .tab i svg {
  width: 1.2rem;
  height: 1.2rem;
  fill: #000;
}
.allSellerSingle .tabs .tab span {
  background: var(--green-color);
  width: 1.5rem;
  height: 1.5rem;
  display: grid;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
  font-weight: 500;
  color: white;
  border-radius: 5px;
}
.allSellerSingle .tabs .active {
  color: white;
  background: var(--green-color);
  border: 1px solid var(--green-color);
}
.allSellerSingle .tabs .active span {
  background: white;
  color: var(--green-color);
}
.allSellerSingle .tabs .active i svg {
  fill: white;
}
.allSellerSingle .homes {
  background: white;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
  border: 1px solid #eee;
  padding: 1rem;
  border-radius: 10px;
  margin-top: 1rem;
}
.allSellerSingle .homes .about .title {
  font-size: 1.2rem;
  font-weight: 700;
  color: #444;
}
.allSellerSingle .homes .about p {
  font-size: 1rem;
  font-weight: 300;
  color: #444;
  line-height: 2.5rem;
  margin-top: 1rem;
}
.allSellerSingle .homes .myCategory {
  margin-top: 2rem;
}
.allSellerSingle .homes .myCategory .title {
  font-size: 1.2rem;
  font-weight: 700;
  color: #444;
}
.allSellerSingle .homes .myCategory ul {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
  grid-gap: 1rem;
  margin-top: 1rem;
}
.allSellerSingle .homes .myCategory ul li a {
  display: grid;
  padding: 0.5rem;
  border-radius: 10px;
  background: white;
  border: 3px solid #eee;
}
.allSellerSingle .homes .myCategory ul li a .pic {
  display: grid;
  justify-content: center;
}
.allSellerSingle .homes .myCategory ul li a .pic img {
  width: 100%;
  height: 4rem;
  object-fit: contain;
}
.allSellerSingle .homes .myCategory ul li a .name {
  text-align: center;
  font-size: 1rem;
  font-weight: 700;
  color: #000;
  margin-top: 1rem;
}
.allSellerSingle .comments {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-gap: 1rem;
}
.allSellerSingle .comments .info1 {
  width: 100%;
  position: relative;
  top: auto;
}
.allSellerSingle .comments .comment1 {
  background: white;
  border: 1px solid #eee;
  border-radius: 20px;
  margin-top: 1rem;
  padding: 1rem;
  overflow: hidden;
}
.allSellerSingle .allTicket {
  background: rgba(0, 0, 0, 0.5);
  z-index: 4000;
  position: fixed;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-columns: 1fr;
  justify-content: center;
}
.allSellerSingle .allTicket .chatContent {
  width: 40%;
  margin: auto;
  background: white;
  display: grid;
  grid-template-columns: 1fr;
  border-radius: 20px;
  overflow: hidden;
}
.allSellerSingle .allTicket .chatContent .header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem;
  background: white;
}
.allSellerSingle .allTicket .chatContent .header .profile {
  display: flex;
  justify-content: right;
  gap: 0.5rem;
  align-items: center;
}
.allSellerSingle .allTicket .chatContent .header .profile .pic {
  overflow: hidden;
  border-radius: 50%;
}
.allSellerSingle .allTicket .chatContent .header .profile .pic img {
  width: 3rem;
  height: 3rem;
  object-fit: cover;
}
.allSellerSingle .allTicket .chatContent .header .profile .name {
  font-size: 1.2rem;
  font-weight: 300;
  color: black;
}
.allSellerSingle .allTicket .chatContent .header .leftHeader {
  display: flex;
  justify-content: left;
  gap: 0.5rem;
}
.allSellerSingle .allTicket .chatContent .header i {
  display: grid;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.allSellerSingle .allTicket .chatContent .header i svg {
  width: 1.3rem;
  height: 1.3rem;
  fill: #444;
}
.allSellerSingle .allTicket .chatContent .body {
  padding: 0.5rem;
  overflow-y: scroll;
  height: 30rem;
}
.allSellerSingle .allTicket .chatContent .body p {
  display: none;
  font-size: 0.8rem;
  font-weight: 300;
  color: #000;
  opacity: 0.7;
}
.allSellerSingle .allTicket .chatContent .body p .closeChats {
  padding: 0.2rem 0.4rem;
  background: red;
  color: white;
  border-radius: 5px;
  font-size: 0.7rem;
  cursor: pointer;
}
.allSellerSingle .allTicket .chatContent .body .choice {
  display: grid;
  padding: 0.8rem;
  border: 1px solid #bbb;
  font-size: 0.9rem;
  font-weight: 300;
  color: #000;
  margin-top: 0.5rem;
  border-radius: 5px;
  cursor: pointer;
  transition: all 0.3s ease-in-out;
}
.allSellerSingle .allTicket .chatContent .body .choice:hover {
  color: var(--green-color);
  border: 1px solid var(--green-color);
}
.allSellerSingle .allTicket .chatContent .body .login {
  display: grid;
}
.allSellerSingle .allTicket .chatContent .body .bodyLabel {
  display: grid;
  grid-template-columns: 1fr;
  grid-gap: 0.5rem;
  font-size: 0.9rem;
  font-weight: 300;
  color: #000;
  margin-top: 1rem;
}
.allSellerSingle .allTicket .chatContent .body .bodyLabel input, .allSellerSingle .allTicket .chatContent .body .bodyLabel select, .allSellerSingle .allTicket .chatContent .body .bodyLabel textarea {
  background: var(--back1-color);
  border: 1px solid #eee;
  padding: 0.3rem 0.5rem;
  color: #000;
  border-radius: 5px;
  font-size: 0.9rem;
  font-weight: 300;
  width: 100%;
  transition: all 0.3s ease-in-out;
}
.allSellerSingle .allTicket .chatContent .body .message11 {
  margin-top: 1rem;
  font-size: 0.9rem;
  font-weight: 300;
  color: #444;
}
.allSellerSingle .allTicket .chatContent .body .message11 .time {
  font-size: 0.7rem;
}
.allSellerSingle .allTicket .chatContent .body .message11 .messages {
  padding: 0.5rem;
  border-radius: 10px;
  border: 2px solid #bbb;
}
.allSellerSingle .allTicket .chatContent .body .messages {
  background: white;
}
.allSellerSingle .allTicket .chatContent .body .opp {
  display: grid;
  justify-content: left;
  text-align: left;
}
.allSellerSingle .allTicket .chatContent .body .me {
  display: grid;
  justify-content: right;
  text-align: right;
}
.allSellerSingle .allTicket .chatContent .body .me .messages {
  border: 2px solid var(--green-color);
}
.allSellerSingle .allTicket .chatContent .body .submit {
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--green-color);
  text-align: center;
  background: transparent;
  width: 100%;
  border: 1px solid var(--green-color);
  padding: 0.5rem 1rem;
  border-radius: 5px;
  margin-top: 1rem;
  transition: all 0.3s ease-in-out;
}
.allSellerSingle .allTicket .chatContent .body .submit:hover {
  background: var(--green-color);
  color: white;
}
.allSellerSingle .allTicket .chatContent .body .sendImage {
  background: white;
  border-radius: 10px;
  overflow: hidden;
  display: grid;
  grid-template-columns: 1fr;
  justify-content: center;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
  margin-top: 1rem;
}
.allSellerSingle .allTicket .chatContent .body .sendImage .dropify-wrapper {
  height: 100px;
  border: 1px solid #eee !important;
}
.allSellerSingle .allTicket .chatContent .body .sendImage .dropify-wrapper .file-icon:before {
  opacity: 0 !important;
  position: absolute !important;
  top: 0 !important;
  visibility: hidden !important;
}
.allSellerSingle .allTicket .chatContent .body .sendImage .dropify-wrapper .dropify-message {
  position: relative !important;
  top: auto !important;
  margin-top: 2rem;
}
.allSellerSingle .allTicket .chatContent .body .sendImage .dropify-wrapper .dropify-message p {
  margin: 0;
  font-size: 1rem;
  color: rgba(0, 128, 0, 0.5098039216);
}
.allSellerSingle .allTicket .chatContent .send {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-gap: 1rem;
  padding: 0.5rem;
}
.allSellerSingle .allTicket .chatContent .send input {
  background: white;
  border: 1px solid #eee;
  padding: 0.5rem 1rem;
  color: #000;
  border-radius: 5rem;
  font-size: 1rem;
  font-weight: 300;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
  width: 100%;
  transition: all 0.3s ease-in-out;
}
.allSellerSingle .allTicket .chatContent .send button {
  font-size: 0.9rem;
  font-weight: 300;
  color: white;
  border-radius: 5rem;
  background: var(--green-color);
  padding: 0 1rem;
}
.allSellerSingle .allTicket .chatContent .loginChat {
  background: red;
  border-top: 1px solid #eee;
  padding: 0.5rem;
  text-align: center;
  font-size: 0.8rem;
  font-weight: 300;
  color: white;
  display: grid;
  width: 100%;
}
.allSellerSingle .allTicket .chatContent .typeLogin1 {
  margin-top: 1rem;
  border-radius: 5px;
}
@media screen and (max-width: 700px) {
  .allSellerSingle .allTicket .chatContent .body {
    height: 20rem;
  }
}
@media screen and (max-width: 700px) {
  .allSellerSingle .tabs {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.5rem;
  }
  .allSellerSingle .tabs .tab {
    font-size: 0.7rem;
    width: auto;
    padding: 0.5rem 0.2rem;
  }
  .allSellerSingle .tabs .tab i svg {
    width: 1rem;
    height: 1rem;
  }
  .allSellerSingle .tabs .tab span {
    background: var(--green-color);
    width: auto;
    min-width: 1rem;
    height: 1rem;
    font-size: 0.6rem;
  }
  .allSellerSingle .tabs .active {
    color: white;
    background: var(--green-color);
    border: 1px solid var(--green-color);
  }
  .allSellerSingle .tabs .active span {
    background: white;
    color: var(--green-color);
  }
  .allSellerSingle .tabs .active i svg {
    fill: white;
  }
  .allSellerSingle .comments {
    display: block;
  }
  .allSellerSingle .allTicket .chatContent {
    width: 95%;
  }
  .allSellerSingle .allTicket .chatContent .body {
    height: 20rem;
  }
}

.emptyWidget {
  display: grid;
  justify-items: center;
  padding: 1rem;
  border-radius: 20px;
  background: rgba(255, 0, 0, 0.2);
  margin: auto;
  margin-top: 1rem;
}
.emptyWidget i {
  display: grid;
  justify-items: center;
}
.emptyWidget i svg {
  width: 2rem;
  height: 2rem;
  fill: #000;
}
.emptyWidget p {
  margin: 1rem 0;
  font-size: 1.5rem;
  font-weight: 900;
  color: #000;
}
.emptyWidget a {
  padding: 0.5rem 1rem;
  background: red;
  color: white;
  font-size: 0.9rem;
  border-radius: 10px;
}

.showAllShare {
  background: rgba(0, 0, 0, 0.5);
  z-index: 4000;
  position: fixed;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-columns: 1fr;
  justify-content: center;
}
.showAllShare .showAllShareHome {
  width: 30%;
  margin: auto;
  background: white;
  display: grid;
  grid-template-columns: 1fr;
  border-radius: 20px;
  overflow: hidden;
}
.showAllShare .showAllShareHome .showAllShareTop {
  display: grid;
  grid-template-columns: 1fr auto;
  background: #f7f7f7;
}
.showAllShare .showAllShareHome .showAllShareTop .title2 {
  font-size: 1rem;
  font-weight: 700;
  padding: 1rem;
  text-align: center;
  color: #444;
}
.showAllShare .showAllShareHome .items {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  justify-content: center;
  align-items: center;
  grid-gap: 1rem;
  background: white;
  padding: 1rem;
  padding-bottom: 0;
}
.showAllShare .showAllShareHome .items .item {
  display: grid;
  align-items: center;
  justify-content: center;
  grid-gap: 0.4rem;
  text-align: center;
  border: 1px solid #eee;
  padding: 0.5rem;
  border-radius: 10px;
}
.showAllShare .showAllShareHome .items .item .itemName .title2 {
  font-size: 1rem;
  text-align: center;
  color: #000;
  font-weight: 300;
}
.showAllShare .showAllShareHome .items .item a {
  display: grid;
  justify-content: center;
  align-items: center;
}
.showAllShare .showAllShareHome .items .item a i svg {
  width: 2.5rem;
  height: 2.5rem;
}
.showAllShare .showAllShareHome .tag {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  justify-content: left;
  direction: ltr;
  grid-gap: 0.5rem;
  margin: 1rem;
  padding: 0.8rem;
  border-radius: 10px;
  border: 1px solid #eee;
}
.showAllShare .showAllShareHome .tag i {
  display: grid;
  justify-content: center;
  align-items: center;
}
.showAllShare .showAllShareHome .tag i svg {
  fill: #000;
  width: 1.3rem;
  height: 1.3rem;
}
.showAllShare .showAllShareHome .tag i .copy {
  fill: var(--green-color);
}
.showAllShare .showAllShareHome .tag .title2 {
  color: #000;
  text-align: left;
  font-weight: 700;
}
.showAllShare .showAllShareHome .tag input {
  display: none;
}

@media screen and (max-width: 1200px) {
  .showAllShare .showAllShareHome {
    width: 50%;
  }
}
@media screen and (max-width: 1000px) {
  .showAllShare .showAllShareHome {
    width: 55%;
  }
}
@media screen and (max-width: 800px) {
  .showAllShare .showAllShareHome {
    width: 98%;
    display: block;
  }
}
.allSingleNews {
  display: grid;
  grid-template-columns: 3fr 1fr;
  grid-gap: 1rem;
  margin: 1rem auto;
  min-height: calc(100vh - 12rem);
}
.allSingleNews .left .postsList {
  padding: 1rem;
  background: white;
  border-radius: 15px;
  border: 1.5px solid #eee;
  box-shadow: 0 4px 16px 0 rgba(36, 43, 61, 0.1);
}
.allSingleNews .left .postsList .titleList {
  font-size: 1rem;
  font-weight: 500;
  color: #000;
  padding-bottom: 1rem;
  border-bottom: 2px solid #eee;
}
.allSingleNews .left .postsList ul li {
  margin-top: 1rem;
  transition: all 0.3s ease-in-out;
}
.allSingleNews .left .postsList ul li a {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-gap: 0.5rem;
  align-items: center;
}
.allSingleNews .left .postsList ul li a .pic {
  display: grid;
  align-items: center;
  border-radius: 50%;
  overflow: hidden;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}
.allSingleNews .left .postsList ul li a .pic img {
  width: 4rem;
  height: 4rem;
  object-fit: cover;
}
.allSingleNews .left .postsList ul li a .showInfo {
  display: grid;
  justify-content: right;
  text-align: right;
  align-items: center;
  grid-gap: 0.5rem;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
.allSingleNews .left .postsList ul li a .showInfo h4 {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  font-weight: 700;
  color: #000;
  font-size: 1rem;
  transition: all 0.3s ease-in-out;
}
.allSingleNews .left .postsList ul li a .showInfo span {
  font-size: 0.7rem;
  color: #000;
  font-weight: 500;
}
.allSingleNews .left .postsList ul li a:hover .showInfo h4 {
  color: var(--green-color);
}
.allSingleNews .right {
  border-radius: 10px;
  padding: 1rem;
  background: white;
}
.allSingleNews .right .pic {
  border-radius: 15px;
  overflow: hidden;
}
.allSingleNews .right .pic img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.allSingleNews .right .top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem;
}
.allSingleNews .right .top h1 {
  font-size: 1.7rem;
  font-weight: 900;
  color: #000;
  margin-top: 1rem;
  line-height: 3rem;
}
.allSingleNews .right .top i {
  display: grid;
  align-items: center;
  cursor: pointer;
}
.allSingleNews .right .top i svg {
  width: 2rem;
  height: 2rem;
  fill: #000;
}
.allSingleNews .right .leftItem {
  display: flex;
  flex-wrap: wrap;
  justify-content: right;
  align-items: center;
  padding: 1rem 0;
  margin: 1rem 0;
  border-bottom: 1px solid #eee;
  gap: 1rem;
}
.allSingleNews .right .leftItem .option {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.allSingleNews .right .leftItem .option h3 {
  font-size: 0.9rem;
  font-weight: 700;
  color: #000;
}
.allSingleNews .right .leftItem .option .des {
  font-size: 0.9rem;
  font-weight: 300;
  color: #444;
}
.allSingleNews .right .leftP p {
  font-size: 1rem;
  font-weight: 400;
  color: #000;
  margin-bottom: 1rem;
  line-height: 3rem;
}
.allSingleNews .right .leftP .image {
  display: grid;
  justify-content: center;
  margin: 1rem 0;
}
.allSingleNews .right .leftP ul {
  margin: 2rem;
}
.allSingleNews .right .leftP ul li {
  list-style: decimal;
  margin-bottom: 1rem;
}
.allSingleNews .right .leftP ul ul {
  margin: 0;
  margin-top: 1rem;
  margin-right: 1rem;
}
.allSingleNews .right .leftP figure {
  display: grid;
}
.allSingleNews .right .leftP table {
  background: white;
  border-radius: 0.3rem;
  box-shadow: 0 0 10px #eee;
  width: 100%;
  margin-bottom: 1rem;
}
.allSingleNews .right .leftP table tr {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(1px, 1fr));
  align-items: center;
  grid-gap: 1rem;
  padding: 1rem;
}
.allSingleNews .right .leftP table tr th {
  font-weight: 700;
  color: #000;
  font-size: 0.75rem;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  display: grid;
  align-items: center;
  justify-content: center;
}
.allSingleNews .right .leftP table tr td {
  font-weight: 300;
  font-size: 0.75rem;
  text-align: center;
  color: #000;
}
.allSingleNews .right .leftP table tr td svg {
  fill: #000;
  width: 1rem;
  height: 1rem;
  cursor: pointer;
}
.allSingleNews .right .leftP table tr td img {
  width: 2.5rem;
  height: 2.5rem;
  object-fit: cover;
  border-radius: 5rem;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
.allSingleNews .right .leftP table tr td a {
  display: grid;
  align-items: center;
}
.allSingleNews .right .leftP table tr td a svg {
  margin-left: 0.5rem;
}
.allSingleNews .right .leftP table tr .buttons a {
  font-size: 0.8rem;
  padding: 0.3rem;
  border-radius: 5px;
  color: white;
  background: green;
}
.allSingleNews .right .leftP table tr .buttons button {
  font-size: 0.8rem;
  padding: 0.3rem;
  border-radius: 5px;
  color: white;
  background: orange;
}
.allSingleNews .right .leftP table tr:nth-child(even) {
  background: #f5f5f5;
}

@media screen and (max-width: 700px) {
  .allSingleNews {
    display: block;
  }
  .allSingleNews .right {
    margin-bottom: 1rem;
  }
  .allSingleNews .right .postsList {
    position: absolute;
    opacity: 0;
    visibility: hidden;
  }
  .allSingleNews .left .top h1 {
    font-size: 1.2rem;
  }
  .allSingleNews .left .top i svg {
    width: 1.5rem;
    height: 1.5rem;
  }
  .allSingleNews .left .leftP {
    display: block;
  }
  .allSingleNews .left .leftItem {
    gap: 1rem;
  }
  .allSingleNews .left .leftItem .option {
    padding-left: 1rem;
  }
  .allSingleNews .left .leftItem .option h3 {
    font-size: 0.7rem;
  }
  .allSingleNews .left .leftItem .option h4 {
    font-size: 0.7rem;
  }
  .allSingleNews .left .leftItem .option a {
    font-size: 0.7rem;
  }
  .allSingleNews .left .leftItem .option a span {
    font-size: 0.9rem;
  }
}
.allComment .top1 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 3rem;
  padding: 1rem;
  padding-top: 0;
}
.allComment .top1 .allRates {
  display: grid;
  grid-template-columns: 10rem 1fr;
  grid-gap: 0.5rem;
  align-items: center;
}
.allComment .top1 .allRates .rateR .topR {
  display: flex;
  justify-content: right;
  align-items: center;
  gap: 0.5rem;
  font-size: 2rem;
  font-weight: 900;
  color: #444;
}
.allComment .top1 .allRates .rateR .topR i {
  display: grid;
  align-items: center;
}
.allComment .top1 .allRates .rateR .topR i svg {
  width: 1.5rem;
  height: 1.5rem;
}
.allComment .top1 .allRates .rateR .botR {
  font-size: 0.7rem;
  font-weight: 500;
  color: #777;
}
.allComment .top1 .allRates .rateR .botR span {
  font-size: 0.8rem;
  color: #000;
}
.allComment .top1 .allRates .rateL {
  display: grid;
  grid-gap: 5px;
}
.allComment .top1 .allRates .rateL .item {
  display: grid;
  grid-template-columns: 6rem 1fr;
  align-items: center;
  grid-gap: 1rem;
  margin-top: 0.5rem;
}
.allComment .top1 .allRates .rateL .item .stars {
  display: flex;
  justify-content: left;
  gap: 8px;
  align-items: center;
}
.allComment .top1 .allRates .rateL .item .stars i {
  display: grid;
  align-items: center;
  filter: grayscale(1);
  opacity: 0.3;
}
.allComment .top1 .allRates .rateL .item .stars i svg {
  width: 1rem;
  height: 1rem;
  fill: #777;
}
.allComment .top1 .allRates .rateL .item .bars {
  height: 8px;
  border-radius: 5rem;
  background: #eee;
  overflow: hidden;
}
.allComment .top1 .allRates .rateL .item .bars .bar {
  height: 100%;
  transition: all 0.5s ease-in-out;
}
.allComment .top1 .allRates .rateL .item .bars .red {
  background: red;
}
.allComment .top1 .allRates .rateL .item .bars .orange {
  background: orange;
}
.allComment .top1 .allRates .rateL .item .bars .yellow {
  background: yellow;
}
.allComment .top1 .allRates .rateL .item .bars .green1 {
  background: greenyellow;
}
.allComment .top1 .allRates .rateL .item .bars .green {
  background: green;
}
.allComment .top1 .left1 .body1 {
  font-size: 1.3rem;
  font-weight: 900;
  color: #444;
}
.allComment .top1 .left1 p {
  margin: 1rem 0;
  font-size: 1rem;
  font-weight: 500;
  color: #444;
  line-height: 2rem;
}
.allComment .top1 .left1 .showAdd {
  display: grid;
  grid-template-columns: auto auto;
  justify-content: right;
  align-items: center;
  grid-gap: 1rem;
  border-radius: 10px;
  margin-top: 1rem;
  overflow: hidden;
  background: var(--green-color);
  box-shadow: -46px 0px 0px 0px rgba(0, 0, 0, 0.12) inset;
  padding: 0 0.8rem;
  transition: all 0.3s ease-in-out;
  cursor: pointer;
  width: 15rem;
}
.allComment .top1 .left1 .showAdd i {
  display: grid;
  justify-content: center;
  align-items: center;
}
.allComment .top1 .left1 .showAdd i svg {
  width: 1.3rem;
  height: 1.3rem;
  fill: white;
}
.allComment .top1 .left1 .showAdd button {
  font-size: 1rem;
  color: #fff;
  font-weight: 900;
  overflow: hidden;
  text-align: center;
  padding: 0.8rem;
  background: transparent;
}
.allComment .top1 .left1 .showAdd:hover {
  box-shadow: -300px 0px 0px 0px rgba(0, 0, 0, 0.12) inset;
}
.allComment .addComments {
  display: none;
  padding: 1rem;
}
.allComment .addComments .addComment .alert {
  color: red;
  font-size: 0.8rem;
  font-weight: 300;
}
.allComment .addComments .addComment .sendCommentItem {
  display: grid;
  grid-template-columns: 1fr;
  grid-gap: 0.5rem;
  margin-top: 1rem;
}
.allComment .addComments .addComment .sendCommentItem input, .allComment .addComments .addComment .sendCommentItem textarea {
  padding: 0.7rem;
  border: 1px solid #eee;
  border-radius: 10px;
  width: 100%;
  transition: all 0.3s ease-in-out;
  font-size: 1rem;
  font-weight: 300;
  resize: vertical;
}
.allComment .addComments .addComment .sendCommentItem textarea {
  height: 10rem;
}
.allComment .addComments .addComment .sendCommentItem .sendCommentItemTitle {
  display: grid;
  grid-template-columns: auto auto;
  justify-content: right;
  grid-gap: 0.5rem;
  align-items: center;
}
.allComment .addComments .addComment .sendCommentItem .sendCommentItemTitle i {
  display: grid;
  justify-content: center;
  align-items: center;
}
.allComment .addComments .addComment .sendCommentItem .sendCommentItemTitle i svg {
  fill: orange;
  width: 0.6rem;
  height: 0.6rem;
}
.allComment .addComments .addComment .sendCommentItem label {
  font-size: 0.95rem;
  line-height: 1.692;
  color: #000;
  position: relative;
}
.allComment .addComments .addComment .sendCommentItem label i {
  position: absolute;
  left: 1rem;
  top: 0;
  bottom: 0;
  display: grid;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}
.allComment .addComments .addComment .sendCommentItem label i svg {
  width: 1.2rem;
  height: 1.2rem;
}
.allComment .addComments .addComment .sendCommentItem span {
  margin-top: 0.5rem;
  width: 100%;
  border: 1px solid green;
  background: #EDF6F7;
  position: relative;
  padding: 0.5rem;
  color: green;
  border-radius: 5px;
}
.allComment .addComments .addComment .sendCommentItem span i {
  position: absolute;
  left: 1rem;
  top: 0;
  bottom: 0;
  display: grid;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}
.allComment .addComments .addComment .sendCommentItem span i svg {
  width: 1rem;
  height: 1rem;
}
.allComment .addComments .addComment #badContainer span {
  border: 1px solid red;
  background: #F7EDED;
  color: red;
}
.allComment .addComments .addComment .rates {
  display: grid;
  justify-content: center;
  align-items: center;
  grid-gap: 1rem;
  margin-top: 1rem;
  text-align: center;
}
.allComment .addComments .addComment .rates h4 {
  font-size: 1.1rem;
  color: #000;
  font-weight: 500;
}
.allComment .addComments .addComment .rates .rateItem {
  direction: ltr;
}
.allComment .addComments .addComment .rates img {
  height: 2rem;
}
.allComment .addComments .addComment .allCommentButtons {
  display: flex;
  justify-content: center;
  align-items: center;
  grid-gap: 1rem;
  margin-top: 1rem;
}
.allComment .addComments .addComment .allCommentButtons button {
  display: flex;
  justify-content: center;
  align-items: center;
  color: white;
  background: green;
  padding: 0.5rem 4rem;
  border-radius: 10px;
}
.allComment .addComments .addComment .allCommentButtons button i {
  display: grid;
  justify-content: center;
  align-items: center;
}
.allComment .addComments .addComment .allCommentButtons button i svg {
  fill: white;
  width: 1rem;
  height: 1rem;
}
.allComment .addComments .addComment .allCommentButtons button img {
  width: 4rem;
  height: 1rem;
  object-fit: cover;
}
.allComment .addComments .addComment .allCommentButtons button:last-child {
  display: block;
  background: red;
}
.allComment .showComments {
  background: #eee;
  padding: 1rem;
}
.allComment .showComments .comments-list {
  position: relative;
}
.allComment .showComments .comments-list:before {
  content: "";
  width: 2px;
  height: 100%;
  background: #c7cacb;
  position: absolute;
  right: 32px;
  top: 0;
}
.allComment .showComments .comments-list li {
  display: block;
  position: relative;
}
.allComment .showComments .comments-list li:after {
  content: "";
  display: block;
  clear: both;
  height: 0;
  width: 0;
}
.allComment .showComments .comments-list li .comment-main-level {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-gap: 2rem;
}
.allComment .showComments .comments-list .comment-avatar {
  width: 65px;
  height: 65px;
  position: relative;
  z-index: 99;
  float: right;
  border: 3px solid #FFF;
  border-radius: 50%;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
  overflow: hidden;
}
.allComment .showComments .comments-list .comment-avatar img {
  width: 100%;
  height: 100%;
}
.allComment .showComments .comments-list .comment-box {
  position: relative;
}
.allComment .showComments .comments-list .comment-box:before, .allComment .showComments .comments-list .comment-box:after {
  content: "";
  height: 0;
  width: 0;
  position: absolute;
  display: block;
  border-style: solid;
  top: 25px;
  right: -11px;
}
.allComment .showComments .comments-list .comment-box:after {
  border-width: 10px 0 10px 12px;
  border-color: transparent #FCFCFC;
}
.allComment .showComments .comments-list .comment-box:before {
  border-width: 11px 0 11px 13px;
  border-color: transparent rgba(0, 0, 0, 0.05);
  right: -12px;
}
.allComment .showComments .comments-list .comment-box .comment-head {
  background: white;
  padding: 10px 12px;
  border-bottom: 1px solid #eee;
  overflow: hidden;
  border-radius: 10px 10px 0 0;
  display: flex;
  justify-content: space-between;
}
.allComment .showComments .comments-list .comment-box .comment-head .right2 {
  display: flex;
  align-items: center;
  gap: 10px;
}
.allComment .showComments .comments-list .comment-box .comment-head .left2 {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.allComment .showComments .comments-list .comment-box .comment-head .left2 .rates {
  display: flex;
}
.allComment .showComments .comments-list .comment-box .comment-head .left2 .rates img {
  height: 1.2rem;
}
.allComment .showComments .comments-list .comment-box .comment-head .left2 span {
  background: green;
  padding: 0.2rem 1rem;
  border-radius: 5px;
  color: white;
  font-size: 0.7rem;
}
.allComment .showComments .comments-list .comment-box .comment-head .left2 .unActive {
  background: red;
}
.allComment .showComments .comments-list .comment-box .comment-head .comment-name {
  color: #444;
  font-size: 1.1rem;
  font-weight: 700;
  float: right;
}
.allComment .showComments .comments-list .comment-box .comment-head span {
  color: #999;
  font-size: 13px;
  position: relative;
}
.allComment .showComments .comments-list .comment-box .comment-content {
  background: #FFF;
  padding: 12px;
  font-size: 15px;
  color: #595959;
  border-radius: 0 0 10px 10px;
}
.allComment .showComments .comments-list .comment-box .comment-content .title5 {
  padding: 0.5rem;
  font-size: 1rem;
  font-weight: 700;
  color: #444;
  background: #f5f5f5;
  border-radius: 5px;
}
.allComment .showComments .comments-list .comment-box .comment-content p {
  margin: 2rem 0;
}
.allComment .showComments .comments-list .comment-box .comment-content .ability3 {
  display: flex;
  justify-content: right;
  grid-gap: 5rem;
}
.allComment .showComments .comments-list .comment-box .comment-content .getCommentData h5 {
  font-size: 0.9rem;
  font-weight: 500;
  color: #000;
  margin-bottom: 0.5rem;
}
.allComment .showComments .comments-list .comment-box .comment-content .getCommentData .items {
  display: grid;
  grid-gap: 0.5rem;
}
.allComment .showComments .comments-list .comment-box .comment-content .getCommentData .items .item {
  display: grid;
  grid-template-columns: auto 1fr;
  justify-content: right;
  align-items: center;
  grid-gap: 0.5rem;
  color: #000;
  font-weight: 300;
  font-size: 0.8rem;
}
.allComment .showComments .comments-list .comment-box .comment-content .getCommentData .items .item i {
  display: grid;
  justify-content: center;
  align-items: center;
}
.allComment .showComments .comments-list .comment-box .comment-content .getCommentData .items .item i svg {
  fill: green;
  width: 0.5rem;
  height: 0.5rem;
}
.allComment .showComments .comments-list .comment-box .comment-content .bad .items .item i svg {
  fill: red;
}
.allComment .showComments .comment-main-level:after {
  content: "";
  width: 0;
  height: 0;
  display: block;
  clear: both;
}
.allComment .showComments .empty {
  font-size: 1rem;
  font-weight: 700;
  color: #000;
}
@media screen and (max-width: 1000px) {
  .allComment .top1 {
    grid-template-columns: 1fr;
    grid-gap: 1rem;
    padding: 0.5rem;
  }
  .allComment .top1 .allRates {
    grid-template-columns: auto 1fr;
    grid-gap: 0.5rem;
    align-items: center;
  }
  .allComment .top1 .allRates .rateR .topR {
    font-size: 1.3rem;
  }
  .allComment .top1 .allRates .rateR .topR i svg {
    width: 1rem;
    height: 1rem;
  }
  .allComment .top1 .allRates .rateR .botR {
    font-size: 0.6rem;
  }
  .allComment .top1 .allRates .rateR .botR span {
    font-size: 0.7rem;
  }
  .allComment .top1 .allRates .rateL .item {
    display: grid;
    grid-template-columns: 4rem 1fr;
    grid-gap: 0.5rem;
  }
  .allComment .top1 .allRates .rateL .item .stars {
    gap: 5px;
  }
  .allComment .top1 .allRates .rateL .item .stars i svg {
    width: 0.5rem;
    height: 0.5rem;
  }
  .allComment .top1 .allRates .rateL .item .bars {
    height: 5px;
  }
  .allComment .top1 .left1 .body1 {
    font-size: 1rem;
  }
  .allComment .top1 .left1 p {
    margin: 0.5rem 0;
    font-size: 0.8rem;
    line-height: 1.3rem;
  }
  .allComment .top1 .left1 .showAdd {
    grid-gap: 0.5rem;
    margin-top: 0.5rem;
    width: 100%;
  }
  .allComment .top1 .left1 .showAdd i svg {
    width: 1.3rem;
    height: 1.3rem;
  }
  .allComment .top1 .left1 .showAdd button {
    font-size: 0.9rem;
    padding: 0.7rem;
  }
  .allComment .addComments {
    padding: 0.5rem;
  }
  .allComment .addComments .addComment .alert {
    font-size: 0.7rem;
  }
  .allComment .addComments .addComment .sendCommentItem {
    margin-top: 0.5rem;
  }
  .allComment .addComments .addComment .sendCommentItem input, .allComment .addComments .addComment .sendCommentItem textarea {
    padding: 0.5rem;
    border-radius: 5px;
    font-size: 0.8rem;
  }
  .allComment .addComments .addComment .sendCommentItem textarea {
    height: 8rem;
  }
  .allComment .addComments .addComment .sendCommentItem .sendCommentItemTitle i svg {
    width: 0.4rem;
    height: 0.4rem;
  }
  .allComment .addComments .addComment .sendCommentItem label {
    font-size: 0.85rem;
  }
  .allComment .addComments .addComment .sendCommentItem label i svg {
    width: 1rem;
    height: 1rem;
  }
  .allComment .addComments .addComment .sendCommentItem span {
    margin-top: 0.5rem;
    padding: 0.4rem;
  }
  .allComment .addComments .addComment .sendCommentItem span i svg {
    width: 0.8rem;
    height: 0.8rem;
  }
  .allComment .addComments .addComment .rates {
    grid-gap: 0.5rem;
    margin-top: 0.5rem;
  }
  .allComment .addComments .addComment .rates h4 {
    font-size: 0.8rem;
  }
  .allComment .addComments .addComment .rates img {
    height: 1.5rem;
  }
  .allComment .addComments .addComment .allCommentButtons {
    grid-gap: 0.5rem;
    margin-top: 0.5rem;
  }
  .allComment .addComments .addComment .allCommentButtons button {
    padding: 0.3rem 2rem;
    font-size: 0.9rem;
  }
  .allComment .addComments .addComment .allCommentButtons button i svg {
    width: 0.8rem;
    height: 0.8rem;
  }
  .allComment .addComments .addComment .allCommentButtons button img {
    width: 3rem;
  }
  .allComment .showComments {
    display: grid;
    grid-gap: 0.5rem;
    padding: 0.5rem;
  }
  .allComment .showComments .comments-list:before {
    content: unset;
  }
  .allComment .showComments .comments-list li {
    display: block;
  }
  .allComment .showComments .comments-list li .comment-main-level {
    display: block;
  }
  .allComment .showComments .comments-list .comment-avatar {
    display: none;
  }
  .allComment .showComments .comments-list .comment-box:before, .allComment .showComments .comments-list .comment-box:after {
    content: unset;
  }
  .allComment .showComments .comments-list .comment-box:after, .allComment .showComments .comments-list .comment-box:before {
    display: none;
  }
  .allComment .showComments .comments-list .comment-box .comment-head {
    padding: 5px;
    border-radius: 5px;
  }
  .allComment .showComments .comments-list .comment-box .comment-head .right2 {
    gap: 5px;
  }
  .allComment .showComments .comments-list .comment-box .comment-head .left2 .rates img {
    height: 0.9rem;
  }
  .allComment .showComments .comments-list .comment-box .comment-head .left2 span {
    padding: 0.2rem 0.5rem;
    font-size: 0.6rem;
  }
  .allComment .showComments .comments-list .comment-box .comment-head .comment-name {
    color: #444;
    font-size: 0.8rem;
  }
  .allComment .showComments .comments-list .comment-box .comment-head span {
    font-size: 10px;
  }
  .allComment .showComments .comments-list .comment-box .comment-content {
    padding: 5px;
    font-size: 10px;
  }
  .allComment .showComments .comments-list .comment-box .comment-content .title5 {
    padding: 0.3rem;
    font-size: 0.8rem;
  }
  .allComment .showComments .comments-list .comment-box .comment-content p {
    margin: 1rem 0;
  }
  .allComment .showComments .comments-list .comment-box .comment-content .getCommentData h5 {
    font-size: 0.75rem;
  }
  .allComment .showComments .comments-list .comment-box .comment-content .getCommentData .items .item {
    font-size: 0.7rem;
  }
  .allComment .showComments .comment-main-level:after {
    content: unset;
  }
  .allComment .showComments .empty {
    font-size: 0.8rem;
    font-weight: 700;
    color: #000;
  }
}

.allProjects {
  margin: auto;
}
.allProjects .titles {
  margin-bottom: 2rem;
  display: grid;
  justify-content: center;
}
.allProjects .titles .name {
  text-align: center;
  font-size: 2.5rem;
  font-weight: 900;
  position: relative;
}
.allProjects .titles .name:before {
  content: "";
  position: absolute;
  top: 100%;
  width: 5rem;
  right: 0;
  left: 0;
  margin: auto;
  background: var(--red-color);
  height: 7px;
  border-radius: 10px;
  box-shadow: 0 5px 5px rgba(0, 0, 0, 0.1);
}
.allProjects .titles p {
  font-size: 1.1rem;
  opacity: 0.7;
  font-weight: 500;
  color: #000;
  margin-top: 2rem;
  text-align: center;
}
.allProjects .items {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
}
.allProjects .items .item {
  position: relative;
  z-index: 1;
  padding: 1rem;
}
.allProjects .items .item a {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  position: relative;
  z-index: 2;
  background: white;
  border-radius: 15px;
  padding: 1rem;
}
.allProjects .items .item a .pic img {
  border-radius: 15px;
  width: 7rem;
  height: 7rem;
  object-fit: cover;
}
.allProjects .items .item a .des {
  padding: 1rem;
}
.allProjects .items .item a .des .title, .allProjects .items .item a .des .body {
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  text-overflow: ellipsis;
  font-size: 1rem;
  font-weight: 700;
  color: #000;
  margin-bottom: 0.5rem;
}
.allProjects .items .item a .des .body {
  -webkit-line-clamp: 2;
  font-weight: 500;
  font-size: 0.9rem;
  opacity: 0.5;
  margin-bottom: 0;
}
.allProjects .items .item a i {
  display: grid;
  align-items: center;
  background: #f5f5f5;
  border-radius: 15px;
  padding: 1rem;
}
.allProjects .items .item a i svg {
  width: 2rem;
  height: 2rem;
  color: var(--green-color);
}
.allProjects .items .item:before {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 1rem;
  box-shadow: 0 0 20px var(--red-color);
  opacity: 0.2;
  border-radius: 15px;
}
@media screen and (max-width: 1000px) {
  .allProjects {
    margin-top: 2rem;
  }
  .allProjects .titles {
    margin-bottom: 1rem;
  }
  .allProjects .titles .name {
    font-size: 1.8rem;
  }
  .allProjects .titles .name:before {
    width: 2rem;
    height: 5px;
  }
  .allProjects .titles p {
    font-size: 1rem;
  }
  .allProjects .items {
    grid-template-columns: 1fr;
  }
  .allProjects .items .item {
    padding: 0.5rem;
  }
  .allProjects .items .item a {
    border-radius: 10px;
    padding: 0.5rem;
  }
  .allProjects .items .item a .pic img {
    width: 5rem;
    height: 5rem;
    border-radius: 10px;
  }
  .allProjects .items .item a .des {
    padding: 0.5rem;
  }
  .allProjects .items .item a .des .title, .allProjects .items .item a .des .body {
    font-size: 0.85rem;
  }
  .allProjects .items .item a .des .body {
    font-size: 0.7rem;
    margin-bottom: 0;
  }
  .allProjects .items .item a i {
    padding: 0.5rem;
  }
  .allProjects .items .item a i svg {
    width: 1rem;
    height: 1rem;
  }
  .allProjects .items .item:before {
    inset: 0.5rem;
    opacity: 0.1;
    border-radius: 10px;
  }
}

.allSamples {
  margin: auto;
}
.allSamples .titles {
  margin-bottom: 2rem;
  display: grid;
  justify-content: center;
}
.allSamples .titles .name {
  text-align: center;
  font-size: 2.5rem;
  font-weight: 900;
  position: relative;
}
.allSamples .titles .name:before {
  content: "";
  position: absolute;
  top: 100%;
  width: 5rem;
  right: 0;
  left: 0;
  margin: auto;
  background: var(--red-color);
  height: 7px;
  border-radius: 10px;
  box-shadow: 0 5px 5px rgba(0, 0, 0, 0.1);
}
.allSamples .titles p {
  font-size: 1.1rem;
  opacity: 0.7;
  font-weight: 500;
  color: #000;
  margin-top: 2rem;
  text-align: center;
}
.allSamples .items {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}
.allSamples .items .item {
  position: relative;
  z-index: 1;
  padding: 1rem;
}
.allSamples .items .item .des {
  position: relative;
  z-index: 2;
  background: white;
  border-radius: 15px;
}
.allSamples .items .item .des .pic {
  border-radius: 15px;
  overflow: hidden;
}
.allSamples .items .item .des .dd {
  padding: 1rem;
}
.allSamples .items .item .des .dd .title, .allSamples .items .item .des .dd p {
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  text-overflow: ellipsis;
  font-size: 1rem;
  font-weight: 700;
  color: #000;
  margin-bottom: 0.5rem;
}
.allSamples .items .item .des .dd p {
  -webkit-line-clamp: 2;
  font-weight: 500;
  font-size: 0.9rem;
  opacity: 0.7;
  margin-bottom: 0;
  height: auto;
}
.allSamples .items .item:before {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 1rem;
  box-shadow: 0 0 20px var(--red-color);
  opacity: 0.2;
  border-radius: 15px;
}
@media screen and (max-width: 1000px) {
  .allSamples {
    margin-top: 2rem;
  }
  .allSamples .titles {
    margin-bottom: 1rem;
  }
  .allSamples .titles .name {
    font-size: 1.8rem;
  }
  .allSamples .titles .name:before {
    width: 2rem;
    height: 5px;
  }
  .allSamples .titles p {
    font-size: 1rem;
    margin-top: 1rem;
  }
  .allSamples .items {
    display: grid;
    grid-template-columns: 1fr;
  }
  .allSamples .items .item {
    padding: 0.5rem;
  }
  .allSamples .items .item .des {
    border-radius: 10px;
  }
  .allSamples .items .item .des .pic {
    border-radius: 10px;
  }
  .allSamples .items .item .des .dd {
    padding: 0.5rem;
  }
  .allSamples .items .item .des .dd .title, .allSamples .items .item .des .dd p {
    font-size: 0.9rem;
  }
  .allSamples .items .item .des .dd p {
    font-size: 0.7rem;
  }
  .allSamples .items .item:before {
    inset: 0.5rem;
    opacity: 0.1;
    border-radius: 10px;
  }
}

.allProductArchive {
  margin: auto;
  margin-top: 1rem;
}
.allProductArchive .address {
  display: flex;
  justify-content: right;
  align-items: center;
  position: relative;
  margin-bottom: 1rem;
}
.allProductArchive .address i {
  display: grid;
  align-items: center;
  margin-left: 0.5rem;
  opacity: 0.7;
}
.allProductArchive .address i svg {
  width: 1.1rem;
  height: 1.1rem;
  fill: #444;
}
.allProductArchive .address a {
  font-size: 0.9rem;
  font-weight: 500;
  color: #444;
  opacity: 0.7;
}
.allProductArchive .address a:after {
  content: "/";
  padding: 0 0.8rem;
}
.allProductArchive .address a:last-child {
  opacity: 1;
}
.allProductArchive .address a:last-child:after {
  content: "";
  padding: 0;
}
.allProductArchive .cats {
  background: white;
  border-radius: 20px;
  margin-bottom: 1rem;
  padding: 1rem;
}
.allProductArchive .cats .name2 {
  font-size: 1.1rem;
  font-weight: 900;
  color: #000;
  margin-bottom: 0.5rem;
}
.allProductArchive .cats .item {
  border: 1px solid #eee;
  border-radius: 10px;
  display: grid;
  padding: 0.5rem;
}
.allProductArchive .cats .item .pic {
  display: grid;
  justify-content: center;
  margin-bottom: 0.5rem;
}
.allProductArchive .cats .item .pic img {
  height: 4rem;
  object-fit: contain;
}
.allProductArchive .cats .item .name {
  font-size: 0.8rem;
  font-weight: 300;
  color: #000;
  text-align: center;
}
.allProductArchive .productArchive {
  display: grid;
  grid-template-columns: 18rem 1fr;
  grid-gap: 1rem;
}
.allProductArchive .productArchive .showFilterContent {
  padding: 0.8rem;
  background: white;
  border-radius: 10px;
  margin-bottom: 1rem;
  font-size: 0.9rem;
  font-weight: 700;
  color: #444;
  cursor: pointer;
  display: none;
  justify-content: space-between;
  align-items: center;
  grid-gap: 0.5rem;
}
.allProductArchive .productArchive .showFilterContent i {
  display: grid;
  align-items: center;
}
.allProductArchive .productArchive .showFilterContent i svg {
  width: 1rem;
  height: 1rem;
  fill: #444;
}
.allProductArchive .productArchive .filterArchive .filterItems {
  margin-bottom: 1rem;
  overflow: hidden;
  padding: 1rem;
  background: white;
  border: 1px solid #eee;
  border-radius: 20px;
}
.allProductArchive .productArchive .filterArchive .filterItems .filterTitle {
  display: flex;
  align-items: center;
  grid-gap: 0.5rem;
}
.allProductArchive .productArchive .filterArchive .filterItems .filterTitle i {
  display: grid;
  align-items: center;
}
.allProductArchive .productArchive .filterArchive .filterItems .filterTitle i svg {
  width: 1.3rem;
  height: 1.3rem;
  fill: #000;
}
.allProductArchive .productArchive .filterArchive .filterItems .filterTitle span {
  font-size: 1rem;
  font-weight: 900;
  color: #000;
}
.allProductArchive .productArchive .filterArchive .filterItems .priceItems {
  margin-top: 1rem;
}
.allProductArchive .productArchive .filterArchive .filterItems .priceItem {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-gap: 0.5rem;
  align-items: center;
  margin-top: 1rem;
}
.allProductArchive .productArchive .filterArchive .filterItems .priceItem label {
  font-size: 0.9rem;
  font-weight: 500;
  color: #000;
}
.allProductArchive .productArchive .filterArchive .filterItems .priceItem input {
  padding: 0.5rem;
  border-radius: 5px;
  font-size: 1rem;
  font-weight: 300;
  color: #000;
  text-align: left;
  letter-spacing: 0.1px;
  border: 1px solid #eee;
  height: 35px !important;
}
.allProductArchive .productArchive .filterArchive .filterItems .priceFilter {
  background: var(--green-color);
  border-radius: 5px;
  width: 100%;
  padding: 0.5rem;
  font-size: 0.8rem;
  font-weight: 300;
  color: white;
  transition: all 0.3s ease-in-out;
  margin-top: 1rem;
  opacity: 0.7;
}
.allProductArchive .productArchive .filterArchive .filterItems .priceFilter:hover {
  opacity: 1;
}
.allProductArchive .productArchive .filterArchive .filterItems .filterCategories {
  display: grid;
  grid-template-columns: 1fr;
  margin-top: 1rem;
  max-height: 15rem;
  overflow-y: scroll;
}
.allProductArchive .productArchive .filterArchive .filterItems .filterCategories a {
  direction: rtl;
  font-size: 0.9rem;
  font-weight: 500;
  color: #000;
  margin-top: 1rem;
}
.allProductArchive .productArchive .filterArchive .filterItems .filterCategories a a {
  font-size: 0.85rem;
  color: #000;
  margin-right: 1rem;
}
.allProductArchive .productArchive .filterArchive .filterItems .filterCategories a a span {
  display: grid;
  grid-template-columns: auto auto;
  justify-content: right;
  align-items: center;
  grid-gap: 0.5rem;
  margin-top: 1rem;
  margin-right: 1rem;
}
.allProductArchive .productArchive .filterArchive .filterItems .filterCategories a a span:before {
  content: "";
  width: 17px;
  border-radius: 100%;
  height: 17px;
  background: #b3b3b3;
  border: 2px solid white;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
}
.allProductArchive .productArchive .filterArchive .filterItems .filterCategories a a a {
  color: #000;
  font-weight: 300;
}
.allProductArchive .productArchive .filterArchive .filterItems .filterCategories a a a span {
  margin-right: 2rem;
}
.allProductArchive .productArchive .filterArchive .filterItems .filterCategories a a a span:before {
  content: "";
  width: 1rem;
  border-radius: 100%;
  height: 1rem;
  background: white;
  border: 2px solid #E7EBEE;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
}
.allProductArchive .productArchive .filterArchive .filterItems .filterCategories a:first-child {
  margin-top: 0;
}
.allProductArchive .productArchive .filterArchive .filterItems .filterCategories li {
  font-size: 0.9rem;
  font-weight: 300;
  color: #000;
  cursor: pointer;
  margin-top: 1rem;
}
.allProductArchive .productArchive .filterArchive .filterItems .filterCategories li span {
  display: grid;
  grid-template-columns: auto auto;
  justify-content: right;
  align-items: center;
  grid-gap: 0.5rem;
}
.allProductArchive .productArchive .filterArchive .filterItems .filterCategories li span:before {
  content: "";
  width: 1rem;
  height: 1rem;
  border-radius: 5rem;
  display: grid;
  border: 1px solid #eee;
}
.allProductArchive .productArchive .filterArchive .filterItems .filterCategories li .active {
  color: var(--green-color);
}
.allProductArchive .productArchive .filterArchive .filterItems .filterCategories li .active:before {
  background: var(--green-color);
  border: 1px solid var(--green-color);
}
.allProductArchive .productArchive .filterArchive .filterItems .filterCategories li:first-child {
  margin-top: 0;
}
.allProductArchive .productArchive .filterArchive .filterItems .filterSearch {
  margin-top: 1rem;
}
.allProductArchive .productArchive .filterArchive .filterItems .filterSearch label {
  display: grid;
  align-items: center;
  padding: 0.5rem;
  border-radius: 5px;
  border: 1px solid #eee;
  cursor: text;
  transition: all 0.3s ease-in-out;
}
.allProductArchive .productArchive .filterArchive .filterItems .filterSearch label i {
  display: grid;
  align-items: center;
}
.allProductArchive .productArchive .filterArchive .filterItems .filterSearch label svg {
  width: 1rem;
  height: 1rem;
}
.allProductArchive .productArchive .filterArchive .filterItems .filterSearch label input {
  font-size: 0.85rem;
  font-weight: 300;
  color: #000;
  background: transparent;
}
.allProductArchive .productArchive .filterArchive .filterItems .filterContainer {
  padding-top: 0.5rem;
  max-height: 15rem;
  overflow-y: scroll;
}
.allProductArchive .productArchive .filterArchive .filterItems .filterContainer .allProductArchiveFiltersItem {
  direction: rtl;
}
.allProductArchive .productArchive .filterArchive .filterItems .filterContainer .allProductArchiveFiltersItem label {
  display: flex;
  padding: 0.5rem;
  grid-gap: 0.5rem;
  justify-content: right;
  align-items: center;
  cursor: pointer;
  color: #000;
  letter-spacing: 0.1px;
  font-weight: 300;
  font-size: 12px;
  line-height: 1.571;
  max-width: 15rem;
}
@supports (-webkit-appearance: none) or (-moz-appearance: none) {
  .allProductArchive .productArchive .filterArchive .filterItems .filterContainer .allProductArchiveFiltersItem input[type=checkbox],
  .allProductArchive .productArchive .filterArchive .filterItems .filterContainer .allProductArchiveFiltersItem input[type=radio] {
    --active: #F9AB3B;
    --active-inner: #fff;
    --focus: 2px rgba(255, 159, 0, 0.5);
    --border: #EEEEEE;
    --border-hover: #EEEEEE;
    --background: #EEEEEE;
    --disabled: #F6F8FF;
    --disabled-inner: #E1E6F9;
    -webkit-appearance: none;
    -moz-appearance: none;
    height: 17px;
    border-radius: 5rem;
    outline: none;
    display: inline-block;
    vertical-align: top;
    position: relative;
    margin: 0;
    cursor: pointer;
    border: 1px solid var(--bc, var(--border));
    background: var(--b, var(--background));
    transition: background 0.3s, border-color 0.3s, box-shadow 0.2s;
  }
  .allProductArchive .productArchive .filterArchive .filterItems .filterContainer .allProductArchiveFiltersItem input[type=checkbox]:after,
  .allProductArchive .productArchive .filterArchive .filterItems .filterContainer .allProductArchiveFiltersItem input[type=radio]:after {
    content: "";
    display: block;
    left: 0;
    top: 0;
    position: absolute;
    transition: all 0.3s ease-in-out;
  }
  .allProductArchive .productArchive .filterArchive .filterItems .filterContainer .allProductArchiveFiltersItem input[type=checkbox]:checked,
  .allProductArchive .productArchive .filterArchive .filterItems .filterContainer .allProductArchiveFiltersItem input[type=radio]:checked {
    --b: var(--active);
    --bc: var(--active);
    --d-o: .3s;
    --d-t: .6s;
    --d-t-e: cubic-bezier(.2, .85, .32, 1.2);
  }
  .allProductArchive .productArchive .filterArchive .filterItems .filterContainer .allProductArchiveFiltersItem input[type=checkbox]:disabled,
  .allProductArchive .productArchive .filterArchive .filterItems .filterContainer .allProductArchiveFiltersItem input[type=radio]:disabled {
    --b: var(--disabled);
    cursor: not-allowed;
    opacity: 0.9;
  }
  .allProductArchive .productArchive .filterArchive .filterItems .filterContainer .allProductArchiveFiltersItem input[type=checkbox]:disabled:checked,
  .allProductArchive .productArchive .filterArchive .filterItems .filterContainer .allProductArchiveFiltersItem input[type=radio]:disabled:checked {
    --b: var(--disabled-inner);
    --bc: var(--border);
  }
  .allProductArchive .productArchive .filterArchive .filterItems .filterContainer .allProductArchiveFiltersItem input[type=checkbox]:disabled + label,
  .allProductArchive .productArchive .filterArchive .filterItems .filterContainer .allProductArchiveFiltersItem input[type=radio]:disabled + label {
    cursor: not-allowed;
  }
  .allProductArchive .productArchive .filterArchive .filterItems .filterContainer .allProductArchiveFiltersItem input[type=checkbox]:hover:not(:checked):not(:disabled),
  .allProductArchive .productArchive .filterArchive .filterItems .filterContainer .allProductArchiveFiltersItem input[type=radio]:hover:not(:checked):not(:disabled) {
    --bc: var(--border-hover);
  }
  .allProductArchive .productArchive .filterArchive .filterItems .filterContainer .allProductArchiveFiltersItem input[type=checkbox]:focus,
  .allProductArchive .productArchive .filterArchive .filterItems .filterContainer .allProductArchiveFiltersItem input[type=radio]:focus {
    box-shadow: 0 0 0 var(--focus);
  }
  .allProductArchive .productArchive .filterArchive .filterItems .filterContainer .allProductArchiveFiltersItem input[type=checkbox]:not(.switch),
  .allProductArchive .productArchive .filterArchive .filterItems .filterContainer .allProductArchiveFiltersItem input[type=radio]:not(.switch) {
    width: 17px;
  }
  .allProductArchive .productArchive .filterArchive .filterItems .filterContainer .allProductArchiveFiltersItem input[type=checkbox]:not(.switch):after,
  .allProductArchive .productArchive .filterArchive .filterItems .filterContainer .allProductArchiveFiltersItem input[type=radio]:not(.switch):after {
    opacity: var(--o, 0);
  }
  .allProductArchive .productArchive .filterArchive .filterItems .filterContainer .allProductArchiveFiltersItem input[type=checkbox]:not(.switch):checked,
  .allProductArchive .productArchive .filterArchive .filterItems .filterContainer .allProductArchiveFiltersItem input[type=radio]:not(.switch):checked {
    --o: 1;
  }
  .allProductArchive .productArchive .filterArchive .filterItems .filterContainer .allProductArchiveFiltersItem input[type=checkbox] + label,
  .allProductArchive .productArchive .filterArchive .filterItems .filterContainer .allProductArchiveFiltersItem input[type=radio] + label {
    font-size: 14px;
    line-height: 21px;
    display: inline-block;
    vertical-align: top;
    cursor: pointer;
    margin-left: 4px;
  }
  .allProductArchive .productArchive .filterArchive .filterItems .filterContainer .allProductArchiveFiltersItem input[type=checkbox]:not(.switch):after {
    width: 5px;
    height: 9px;
    border: 2px solid var(--active-inner);
    border-top: 0;
    border-left: 0;
    left: 5px;
    top: 2px;
    transform: rotate(var(--r, 20deg));
  }
  .allProductArchive .productArchive .filterArchive .filterItems .filterContainer .allProductArchiveFiltersItem input[type=checkbox]:not(.switch):checked {
    --r: 43deg;
  }
  .allProductArchive .productArchive .filterArchive .filterItems .filterContainer .allProductArchiveFiltersItem input[type=checkbox].switch {
    width: 10px;
  }
  .allProductArchive .productArchive .filterArchive .filterItems .filterContainer .allProductArchiveFiltersItem input[type=checkbox].switch:after {
    left: 2px;
    top: 2px;
    width: 10px;
    height: 10px;
    background: var(--ab, var(--border));
    transform: translateX(var(--x, 0));
  }
  .allProductArchive .productArchive .filterArchive .filterItems .filterContainer .allProductArchiveFiltersItem input[type=checkbox].switch:checked {
    --ab: var(--active-inner);
    --x: 10px;
  }
  .allProductArchive .productArchive .filterArchive .filterItems .filterContainer .allProductArchiveFiltersItem input[type=checkbox].switch:disabled:not(:checked):after {
    opacity: 0.6;
  }
  .allProductArchive .productArchive .filterArchive .filterItems .filterContainer .allProductArchiveFiltersItem input[type=radio]:after {
    width: 10px;
    height: 10px;
    background: var(--active-inner);
    opacity: 0;
    transform: scale(var(--s, 0.7));
  }
  .allProductArchive .productArchive .filterArchive .filterItems .filterContainer .allProductArchiveFiltersItem input[type=radio]:checked {
    --s: .5;
  }
}
.allProductArchive .productArchive .filterArchive .filterItems:last-child {
  margin-bottom: 0;
}
.allProductArchive .productArchive .productContainer .productLists {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
  background: white;
  border-radius: 20px;
  overflow: hidden;
}
.allProductArchive .productArchive .productContainer .productLists .productList a {
  transition: all 0.3s ease-in-out;
  display: grid;
  position: relative;
  overflow: hidden;
  border: 1px solid #eee;
  padding: 1rem;
}
.allProductArchive .productArchive .productContainer .productLists .productList a .pic {
  display: grid;
  justify-content: center;
}
.allProductArchive .productArchive .productContainer .productLists .productList a .pic img {
  width: 100%;
  height: 12rem;
  object-fit: contain;
}
.allProductArchive .productArchive .productContainer .productLists .productList a .images {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  justify-content: center;
  margin-top: 0.5rem;
  height: 3rem;
  overflow: hidden;
}
.allProductArchive .productArchive .productContainer .productLists .productList a .images img {
  height: 3rem;
  width: 3rem;
  border: 1px solid #eee;
  border-radius: 5px;
}
.allProductArchive .productArchive .productContainer .productLists .productList a .images .active {
  border: 1px solid var(--green-color);
}
.allProductArchive .productArchive .productContainer .productLists .productList a .off2 {
  position: absolute;
  left: 0.5rem;
  top: 0.5rem;
}
.allProductArchive .productArchive .productContainer .productLists .productList a .off2 .off {
  position: relative;
}
.allProductArchive .productArchive .productContainer .productLists .productList a .off2 .off i {
  display: grid;
  align-items: center;
  animation: shine 3s ease-in-out infinite;
  width: 2.7rem;
  height: 2.7rem;
}
@keyframes shine {
  0% {
    transform: rotate(0deg);
  }
  50% {
    transform: rotate(360deg);
  }
  100% {
    transform: rotate(0);
  }
}
.allProductArchive .productArchive .productContainer .productLists .productList a .off2 .off i svg {
  width: 2.7rem;
  height: 2.7rem;
  fill: red;
}
.allProductArchive .productArchive .productContainer .productLists .productList a .off2 .off span {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  font-size: 0.9rem;
  font-weight: 500;
  color: white;
  margin: auto;
  display: grid;
  align-items: center;
  justify-content: center;
  z-index: 2;
}
.allProductArchive .productArchive .productContainer .productLists .productList a .title2 {
  font-size: 0.85rem;
  font-weight: 300;
  color: #000;
  line-height: 1.7rem;
  text-align: right;
  margin: 0.8rem 0;
  height: 3.2rem;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  text-overflow: ellipsis;
}
.allProductArchive .productArchive .productContainer .productLists .productList a .price {
  display: flex;
  justify-content: left;
  align-items: center;
  gap: 0.5rem;
}
.allProductArchive .productArchive .productContainer .productLists .productList a .price s {
  font-size: 0.8rem;
  font-weight: 500;
  color: #000;
  opacity: 0.6;
}
.allProductArchive .productArchive .productContainer .productLists .productList a .price .price1 {
  display: flex;
  justify-content: left;
  align-items: center;
  grid-gap: 0.5rem;
  font-size: 1.2rem;
  font-weight: 900;
  color: #000;
}
.allProductArchive .productArchive .productContainer .productLists .productList a .price .price1:after {
  content: "\f06c︎";
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  font-weight: 400;
  letter-spacing: normal;
  font-family: digikala;
  font-size: 1.1rem;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-style: normal;
  font-variant: normal;
  font-weight: 400;
  text-decoration: none;
  text-transform: none;
  line-height: 1;
  box-sizing: inherit;
}
.allProductArchive .productArchive .productContainer .productLists .productList a .empty1 {
  text-align: center;
  background: grey;
  padding: 0.2rem 0;
  border-radius: 5px;
  color: white;
  font-size: 0.9rem;
}
.allProductArchive .productArchive .productContainer .productLists .productList a .call {
  background: var(--green-color);
}
.allProductArchive .productArchive .productContainer .productLists .productList a:hover .price .price1 {
  color: var(--green-color);
}
.allProductArchive .description {
  overflow: hidden;
  padding: 1rem;
  background: white;
  border-radius: 20px;
  margin-top: 1rem;
}
.allProductArchive .description .title1 {
  font-size: 1.5rem;
  font-weight: 900;
  color: #000;
}
.allProductArchive .description p {
  font-size: 0.9rem;
  opacity: 0.7;
  font-weight: 500;
  color: #000;
  line-height: 2.2rem;
}
@media screen and (max-width: 800px) {
  .allProductArchive {
    margin-top: 0.5rem;
  }
  .allProductArchive .cats {
    display: none;
  }
  .allProductArchive .address {
    overflow-x: scroll;
    padding-bottom: 0.5rem;
    margin-bottom: 0;
    margin-right: 0.3rem;
  }
  .allProductArchive .address i {
    display: none;
  }
  .allProductArchive .address a {
    overflow: unset;
    font-size: 0.7rem;
    white-space: nowrap;
  }
  .allProductArchive .productArchive {
    display: block;
  }
  .allProductArchive .productArchive .filterArchive {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    z-index: 200;
    padding: 0.5rem;
    background: #eee;
    overflow-y: scroll;
    display: none;
  }
  .allProductArchive .productArchive .filterArchive .filterItems {
    border-radius: 10px;
    padding: 0.5rem;
    margin-bottom: 0.5rem;
  }
  .allProductArchive .productArchive .showFilterContent {
    display: flex;
    margin-bottom: 0.5rem;
  }
  .allProductArchive .productArchive .productContainer .productLists {
    grid-template-columns: 1fr;
    grid-gap: 0;
    padding: 0;
    border-radius: 10px;
  }
  .allProductArchive .productArchive .productContainer .productLists .productList a {
    border: 0;
    border-bottom: 1px solid #eee;
  }
  .allProductArchive .productArchive .productContainer .productLists .productList a .pic img {
    height: 10rem;
  }
  .allProductArchive .description {
    padding: 0.5rem;
    border-radius: 10px;
    margin-top: 0.5rem;
  }
  .allProductArchive .description .title1 {
    font-size: 1rem;
  }
  .allProductArchive .description p {
    font-size: 0.8rem;
  }
}

.allProductArchive2 {
  margin: auto;
  margin-top: 1rem;
}
.allProductArchive2 .address {
  display: flex;
  justify-content: right;
  align-items: center;
  position: relative;
  margin-bottom: 1rem;
}
.allProductArchive2 .address i {
  display: grid;
  align-items: center;
  margin-left: 0.5rem;
  opacity: 0.7;
}
.allProductArchive2 .address i svg {
  width: 1.1rem;
  height: 1.1rem;
  fill: #444;
}
.allProductArchive2 .address a {
  font-size: 0.9rem;
  font-weight: 500;
  color: #444;
  opacity: 0.7;
}
.allProductArchive2 .address a:after {
  content: "/";
  padding: 0 0.8rem;
}
.allProductArchive2 .address a:last-child {
  opacity: 1;
}
.allProductArchive2 .address a:last-child:after {
  content: "";
  padding: 0;
}
.allProductArchive2 .productArchive {
  display: grid;
  grid-template-columns: 18rem 1fr;
  align-items: start;
  grid-gap: 1rem;
}
.allProductArchive2 .productArchive .showFilterContent {
  padding: 0.8rem;
  background: white;
  border-radius: 10px;
  margin-bottom: 1rem;
  font-size: 0.9rem;
  font-weight: 700;
  border: 1px solid #eee;
  color: #444;
  cursor: pointer;
  display: none;
  justify-content: space-between;
  align-items: center;
  grid-gap: 0.5rem;
}
.allProductArchive2 .productArchive .showFilterContent i {
  display: grid;
  align-items: center;
}
.allProductArchive2 .productArchive .showFilterContent i svg {
  width: 1rem;
  height: 1rem;
  fill: #444;
}
.allProductArchive2 .productArchive .filterArchive {
  background: white;
  box-shadow: 0px 4px 24px 0px rgba(0, 0, 0, 0.1);
  border-radius: 15px;
  overflow: hidden;
}
.allProductArchive2 .productArchive .filterArchive .filterItems {
  padding: 1rem;
  background: white;
  border-bottom: 1px solid #eee;
}
.allProductArchive2 .productArchive .filterArchive .filterItems .filterTitle {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  grid-gap: 0.5rem;
  cursor: pointer;
}
.allProductArchive2 .productArchive .filterArchive .filterItems .filterTitle i {
  display: grid;
  align-items: center;
}
.allProductArchive2 .productArchive .filterArchive .filterItems .filterTitle i svg {
  width: 1rem;
  height: 1rem;
  fill: #000;
}
.allProductArchive2 .productArchive .filterArchive .filterItems .filterTitle i:first-child {
  padding: 0.5rem;
  border-radius: 5px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
}
.allProductArchive2 .productArchive .filterArchive .filterItems .filterTitle span {
  font-size: 0.95rem;
  font-weight: 700;
  color: #000;
}
.allProductArchive2 .productArchive .filterArchive .filterItems .priceItems {
  margin-top: 1rem;
}
.allProductArchive2 .productArchive .filterArchive .filterItems .fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 0.5rem;
}
.allProductArchive2 .productArchive .filterArchive .filterItems .fields .priceItem {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-gap: 0.5rem;
  align-items: center;
  margin-top: 1rem;
}
.allProductArchive2 .productArchive .filterArchive .filterItems .fields .priceItem label {
  font-size: 0.9rem;
  font-weight: 500;
  color: #000;
}
.allProductArchive2 .productArchive .filterArchive .filterItems .fields .priceItem input {
  padding: 0.5rem;
  border-radius: 5px;
  width: 100%;
  font-size: 1rem;
  font-weight: 300;
  color: #000;
  text-align: left;
  letter-spacing: 0.1px;
  border: 1px solid #eee;
  height: 35px !important;
}
.allProductArchive2 .productArchive .filterArchive .filterItems .range1 {
  direction: ltr;
}
.allProductArchive2 .productArchive .filterArchive .filterItems .range1 .noUi-connect {
  background: var(--green-color);
}
.allProductArchive2 .productArchive .filterArchive .filterItems .range1 .noUi-handle {
  background: white;
  border: 2px solid var(--green-color);
  border-radius: 50%;
  width: 20px;
  height: 20px;
  top: -6px;
  right: -9px;
}
.allProductArchive2 .productArchive .filterArchive .filterItems .range1 .noUi-handle:before, .allProductArchive2 .productArchive .filterArchive .filterItems .range1 .noUi-handle:after {
  content: unset;
}
.allProductArchive2 .productArchive .filterArchive .filterItems .range1 .noUi-horizontal {
  height: 10px;
}
.allProductArchive2 .productArchive .filterArchive .filterItems .priceFilter {
  border: 1px solid green;
  border-radius: 10px;
  width: 100%;
  padding: 0.5rem;
  font-size: 0.8rem;
  background: transparent;
  font-weight: 700;
  color: green;
  transition: all 0.3s ease-in-out;
  margin-top: 1rem;
}
.allProductArchive2 .productArchive .filterArchive .filterItems .priceFilter:hover {
  background: green;
  color: white;
}
.allProductArchive2 .productArchive .filterArchive .filterItems .filterCategories {
  display: grid;
  grid-template-columns: 1fr;
  margin-top: 1rem;
  max-height: 15rem;
  overflow-y: scroll;
}
.allProductArchive2 .productArchive .filterArchive .filterItems .filterCategories a {
  direction: rtl;
  font-size: 0.9rem;
  font-weight: 300;
  color: #444;
  margin-top: 1rem;
}
.allProductArchive2 .productArchive .filterArchive .filterItems .filterCategories a span {
  display: flex;
  justify-content: right;
  align-items: center;
  grid-gap: 0.5rem;
}
.allProductArchive2 .productArchive .filterArchive .filterItems .filterCategories a span:before {
  content: "";
  width: 8px;
  border-radius: 100%;
  height: 8px;
  background: #ccc;
}
.allProductArchive2 .productArchive .filterArchive .filterItems .filterCategories a:first-child {
  margin-top: 0;
}
.allProductArchive2 .productArchive .filterArchive .filterItems .filterCategories li {
  font-size: 0.9rem;
  font-weight: 300;
  color: #000;
  cursor: pointer;
  margin-top: 1rem;
}
.allProductArchive2 .productArchive .filterArchive .filterItems .filterCategories li span {
  display: grid;
  grid-template-columns: auto auto;
  justify-content: right;
  align-items: center;
  grid-gap: 0.5rem;
}
.allProductArchive2 .productArchive .filterArchive .filterItems .filterCategories li span:before {
  content: "";
  width: 1rem;
  height: 1rem;
  border-radius: 5rem;
  display: grid;
  border: 1px solid #eee;
}
.allProductArchive2 .productArchive .filterArchive .filterItems .filterCategories li .active {
  color: var(--green-color);
}
.allProductArchive2 .productArchive .filterArchive .filterItems .filterCategories li .active:before {
  background: var(--green-color);
  border: 1px solid var(--green-color);
}
.allProductArchive2 .productArchive .filterArchive .filterItems .filterCategories li:first-child {
  margin-top: 0;
}
.allProductArchive2 .productArchive .filterArchive .filterItems .filterSearch {
  margin-top: 1rem;
}
.allProductArchive2 .productArchive .filterArchive .filterItems .filterSearch label {
  display: grid;
  align-items: center;
  padding: 0.7rem;
  border-radius: 10px;
  border: 1px solid #eee;
  cursor: text;
  transition: all 0.3s ease-in-out;
}
.allProductArchive2 .productArchive .filterArchive .filterItems .filterSearch label i {
  display: grid;
  align-items: center;
}
.allProductArchive2 .productArchive .filterArchive .filterItems .filterSearch label svg {
  width: 1rem;
  height: 1rem;
}
.allProductArchive2 .productArchive .filterArchive .filterItems .filterSearch label input {
  font-size: 0.95rem;
  font-weight: 300;
  color: #000;
  background: transparent;
}
.allProductArchive2 .productArchive .filterArchive .filterItems .searchA input {
  padding: 0.3rem 0.5rem;
  border-radius: 5px;
  background: #f7f7f7;
  font-size: 0.9rem;
  font-weight: 500;
  color: #000;
  border: 1px solid #eee;
  width: 100%;
  margin: 0.5rem 0;
}
.allProductArchive2 .productArchive .filterArchive .filterItems .filterContainer {
  padding-top: 0.5rem;
  max-height: 15rem;
  overflow-y: scroll;
}
.allProductArchive2 .productArchive .filterArchive .filterItems .filterContainer .allProductArchiveFiltersItem {
  direction: rtl;
}
.allProductArchive2 .productArchive .filterArchive .filterItems .filterContainer .allProductArchiveFiltersItem label {
  display: flex;
  padding: 0.5rem 0;
  gap: 0.5rem;
  align-items: center;
  cursor: pointer;
  color: #000;
  letter-spacing: 0.1px;
  font-weight: 300;
  font-size: 0.9rem;
  line-height: 1.571;
  max-width: 15rem;
}
@supports (-webkit-appearance: none) or (-moz-appearance: none) {
  .allProductArchive2 .productArchive .filterArchive .filterItems .filterContainer .allProductArchiveFiltersItem input[type=checkbox],
  .allProductArchive2 .productArchive .filterArchive .filterItems .filterContainer .allProductArchiveFiltersItem input[type=radio] {
    --active: blue;
    --active-inner: #fff;
    --focus: 2px rgba(0, 225, 255, 0.5);
    --border: #EEEEEE;
    --border-hover: #EEEEEE;
    --background: #EEEEEE;
    --disabled: #F6F8FF;
    --disabled-inner: #E1E6F9;
    -webkit-appearance: none;
    -moz-appearance: none;
    height: 17px;
    border-radius: 5rem;
    outline: none;
    display: inline-block;
    vertical-align: top;
    position: relative;
    margin: 0;
    cursor: pointer;
    border: 1px solid var(--bc, var(--border));
    background: var(--b, var(--background));
    transition: background 0.3s, border-color 0.3s, box-shadow 0.2s;
  }
  .allProductArchive2 .productArchive .filterArchive .filterItems .filterContainer .allProductArchiveFiltersItem input[type=checkbox]:after,
  .allProductArchive2 .productArchive .filterArchive .filterItems .filterContainer .allProductArchiveFiltersItem input[type=radio]:after {
    content: "";
    display: block;
    left: 0;
    top: 0;
    position: absolute;
    transition: all 0.3s ease-in-out;
  }
  .allProductArchive2 .productArchive .filterArchive .filterItems .filterContainer .allProductArchiveFiltersItem input[type=checkbox]:checked,
  .allProductArchive2 .productArchive .filterArchive .filterItems .filterContainer .allProductArchiveFiltersItem input[type=radio]:checked {
    --b: var(--active);
    --bc: var(--active);
    --d-o: .3s;
    --d-t: .6s;
    --d-t-e: cubic-bezier(.2, .85, .32, 1.2);
  }
  .allProductArchive2 .productArchive .filterArchive .filterItems .filterContainer .allProductArchiveFiltersItem input[type=checkbox]:disabled,
  .allProductArchive2 .productArchive .filterArchive .filterItems .filterContainer .allProductArchiveFiltersItem input[type=radio]:disabled {
    --b: var(--disabled);
    cursor: not-allowed;
    opacity: 0.9;
  }
  .allProductArchive2 .productArchive .filterArchive .filterItems .filterContainer .allProductArchiveFiltersItem input[type=checkbox]:disabled:checked,
  .allProductArchive2 .productArchive .filterArchive .filterItems .filterContainer .allProductArchiveFiltersItem input[type=radio]:disabled:checked {
    --b: var(--disabled-inner);
    --bc: var(--border);
  }
  .allProductArchive2 .productArchive .filterArchive .filterItems .filterContainer .allProductArchiveFiltersItem input[type=checkbox]:disabled + label,
  .allProductArchive2 .productArchive .filterArchive .filterItems .filterContainer .allProductArchiveFiltersItem input[type=radio]:disabled + label {
    cursor: not-allowed;
  }
  .allProductArchive2 .productArchive .filterArchive .filterItems .filterContainer .allProductArchiveFiltersItem input[type=checkbox]:hover:not(:checked):not(:disabled),
  .allProductArchive2 .productArchive .filterArchive .filterItems .filterContainer .allProductArchiveFiltersItem input[type=radio]:hover:not(:checked):not(:disabled) {
    --bc: var(--border-hover);
  }
  .allProductArchive2 .productArchive .filterArchive .filterItems .filterContainer .allProductArchiveFiltersItem input[type=checkbox]:focus,
  .allProductArchive2 .productArchive .filterArchive .filterItems .filterContainer .allProductArchiveFiltersItem input[type=radio]:focus {
    box-shadow: 0 0 0 var(--focus);
  }
  .allProductArchive2 .productArchive .filterArchive .filterItems .filterContainer .allProductArchiveFiltersItem input[type=checkbox]:not(.switch),
  .allProductArchive2 .productArchive .filterArchive .filterItems .filterContainer .allProductArchiveFiltersItem input[type=radio]:not(.switch) {
    width: 17px;
  }
  .allProductArchive2 .productArchive .filterArchive .filterItems .filterContainer .allProductArchiveFiltersItem input[type=checkbox]:not(.switch):after,
  .allProductArchive2 .productArchive .filterArchive .filterItems .filterContainer .allProductArchiveFiltersItem input[type=radio]:not(.switch):after {
    opacity: var(--o, 0);
  }
  .allProductArchive2 .productArchive .filterArchive .filterItems .filterContainer .allProductArchiveFiltersItem input[type=checkbox]:not(.switch):checked,
  .allProductArchive2 .productArchive .filterArchive .filterItems .filterContainer .allProductArchiveFiltersItem input[type=radio]:not(.switch):checked {
    --o: 1;
  }
  .allProductArchive2 .productArchive .filterArchive .filterItems .filterContainer .allProductArchiveFiltersItem input[type=checkbox] + label,
  .allProductArchive2 .productArchive .filterArchive .filterItems .filterContainer .allProductArchiveFiltersItem input[type=radio] + label {
    font-size: 14px;
    line-height: 21px;
    display: inline-block;
    vertical-align: top;
    cursor: pointer;
    margin-left: 4px;
  }
  .allProductArchive2 .productArchive .filterArchive .filterItems .filterContainer .allProductArchiveFiltersItem input[type=checkbox]:not(.switch):after {
    width: 5px;
    height: 9px;
    border: 2px solid var(--active-inner);
    border-top: 0;
    border-left: 0;
    left: 5px;
    top: 2px;
    transform: rotate(var(--r, 20deg));
  }
  .allProductArchive2 .productArchive .filterArchive .filterItems .filterContainer .allProductArchiveFiltersItem input[type=checkbox]:not(.switch):checked {
    --r: 43deg;
  }
  .allProductArchive2 .productArchive .filterArchive .filterItems .filterContainer .allProductArchiveFiltersItem input[type=checkbox].switch {
    width: 10px;
  }
  .allProductArchive2 .productArchive .filterArchive .filterItems .filterContainer .allProductArchiveFiltersItem input[type=checkbox].switch:after {
    left: 2px;
    top: 2px;
    width: 10px;
    height: 10px;
    background: var(--ab, var(--border));
    transform: translateX(var(--x, 0));
  }
  .allProductArchive2 .productArchive .filterArchive .filterItems .filterContainer .allProductArchiveFiltersItem input[type=checkbox].switch:checked {
    --ab: var(--active-inner);
    --x: 10px;
  }
  .allProductArchive2 .productArchive .filterArchive .filterItems .filterContainer .allProductArchiveFiltersItem input[type=checkbox].switch:disabled:not(:checked):after {
    opacity: 0.6;
  }
  .allProductArchive2 .productArchive .filterArchive .filterItems .filterContainer .allProductArchiveFiltersItem input[type=radio]:after {
    width: 10px;
    height: 10px;
    background: var(--active-inner);
    opacity: 0;
    transform: scale(var(--s, 0.7));
  }
  .allProductArchive2 .productArchive .filterArchive .filterItems .filterContainer .allProductArchiveFiltersItem input[type=radio]:checked {
    --s: .5;
  }
}
.allProductArchive2 .productArchive .filterArchive .filterItems .filterChecked {
  display: grid;
  grid-template-columns: 1fr;
  grid-gap: 1rem;
}
.allProductArchive2 .productArchive .filterArchive .filterItems .filterChecked .item {
  display: flex;
  align-items: center;
  justify-content: right;
  gap: 0.5rem;
  font-size: 0.9rem;
  font-weight: 700;
  cursor: pointer;
}
@supports (-webkit-appearance: none) or (-moz-appearance: none) {
  .allProductArchive2 .productArchive .filterArchive .filterItems .filterChecked .item input[type=checkbox],
  .allProductArchive2 .productArchive .filterArchive .filterItems .filterChecked .item input[type=radio] {
    --active: #275EFE;
    --active-inner: #fff;
    --focus: 2px rgba(39, 94, 254, .3);
    --border: #BBC1E1;
    --border-hover: #275EFE;
    --background: #fff;
    --disabled: #F6F8FF;
    --disabled-inner: #E1E6F9;
    -webkit-appearance: none;
    -moz-appearance: none;
    height: 21px;
    outline: none;
    display: inline-block;
    vertical-align: top;
    position: relative;
    margin: 0;
    cursor: pointer;
    border: 1px solid var(--bc, var(--border));
    background: var(--b, var(--background));
    transition: background 0.3s, border-color 0.3s, box-shadow 0.2s;
  }
  .allProductArchive2 .productArchive .filterArchive .filterItems .filterChecked .item input[type=checkbox]:after,
  .allProductArchive2 .productArchive .filterArchive .filterItems .filterChecked .item input[type=radio]:after {
    content: "";
    display: block;
    left: 0;
    top: 0;
    position: absolute;
    transition: transform var(--d-t) var(--d-t-e, ease), opacity var(--d-o, 0.2s);
  }
  .allProductArchive2 .productArchive .filterArchive .filterItems .filterChecked .item input[type=checkbox]:checked,
  .allProductArchive2 .productArchive .filterArchive .filterItems .filterChecked .item input[type=radio]:checked {
    --b: var(--active);
    --bc: var(--active);
    --d-o: .3s;
    --d-t: .6s;
    --d-t-e: cubic-bezier(.2, .85, .32, 1.2);
  }
  .allProductArchive2 .productArchive .filterArchive .filterItems .filterChecked .item input[type=checkbox]:disabled,
  .allProductArchive2 .productArchive .filterArchive .filterItems .filterChecked .item input[type=radio]:disabled {
    --b: var(--disabled);
    cursor: not-allowed;
    opacity: 0.9;
  }
  .allProductArchive2 .productArchive .filterArchive .filterItems .filterChecked .item input[type=checkbox]:disabled:checked,
  .allProductArchive2 .productArchive .filterArchive .filterItems .filterChecked .item input[type=radio]:disabled:checked {
    --b: var(--disabled-inner);
    --bc: var(--border);
  }
  .allProductArchive2 .productArchive .filterArchive .filterItems .filterChecked .item input[type=checkbox]:disabled + label,
  .allProductArchive2 .productArchive .filterArchive .filterItems .filterChecked .item input[type=radio]:disabled + label {
    cursor: not-allowed;
  }
  .allProductArchive2 .productArchive .filterArchive .filterItems .filterChecked .item input[type=checkbox]:hover:not(:checked):not(:disabled),
  .allProductArchive2 .productArchive .filterArchive .filterItems .filterChecked .item input[type=radio]:hover:not(:checked):not(:disabled) {
    --bc: var(--border-hover);
  }
  .allProductArchive2 .productArchive .filterArchive .filterItems .filterChecked .item input[type=checkbox]:focus,
  .allProductArchive2 .productArchive .filterArchive .filterItems .filterChecked .item input[type=radio]:focus {
    box-shadow: 0 0 0 var(--focus);
  }
  .allProductArchive2 .productArchive .filterArchive .filterItems .filterChecked .item input[type=checkbox]:not(.switch),
  .allProductArchive2 .productArchive .filterArchive .filterItems .filterChecked .item input[type=radio]:not(.switch) {
    width: 21px;
  }
  .allProductArchive2 .productArchive .filterArchive .filterItems .filterChecked .item input[type=checkbox]:not(.switch):after,
  .allProductArchive2 .productArchive .filterArchive .filterItems .filterChecked .item input[type=radio]:not(.switch):after {
    opacity: var(--o, 0);
  }
  .allProductArchive2 .productArchive .filterArchive .filterItems .filterChecked .item input[type=checkbox]:not(.switch):checked,
  .allProductArchive2 .productArchive .filterArchive .filterItems .filterChecked .item input[type=radio]:not(.switch):checked {
    --o: 1;
  }
  .allProductArchive2 .productArchive .filterArchive .filterItems .filterChecked .item input[type=checkbox] + label,
  .allProductArchive2 .productArchive .filterArchive .filterItems .filterChecked .item input[type=radio] + label {
    font-size: 14px;
    line-height: 21px;
    display: inline-block;
    vertical-align: top;
    cursor: pointer;
    margin-left: 4px;
  }
  .allProductArchive2 .productArchive .filterArchive .filterItems .filterChecked .item input[type=checkbox]:not(.switch) {
    border-radius: 7px;
  }
  .allProductArchive2 .productArchive .filterArchive .filterItems .filterChecked .item input[type=checkbox]:not(.switch):after {
    width: 5px;
    height: 9px;
    border: 2px solid var(--active-inner);
    border-top: 0;
    border-left: 0;
    left: 7px;
    top: 4px;
    transform: rotate(var(--r, 20deg));
  }
  .allProductArchive2 .productArchive .filterArchive .filterItems .filterChecked .item input[type=checkbox]:not(.switch):checked {
    --r: 43deg;
  }
  .allProductArchive2 .productArchive .filterArchive .filterItems .filterChecked .item input[type=checkbox].switch {
    width: 38px;
    border-radius: 11px;
  }
  .allProductArchive2 .productArchive .filterArchive .filterItems .filterChecked .item input[type=checkbox].switch:after {
    left: 2px;
    top: 2px;
    border-radius: 50%;
    width: 15px;
    height: 15px;
    background: var(--ab, var(--border));
    transform: translateX(var(--x, 0));
  }
  .allProductArchive2 .productArchive .filterArchive .filterItems .filterChecked .item input[type=checkbox].switch:checked {
    --ab: var(--active-inner);
    --x: 17px;
  }
  .allProductArchive2 .productArchive .filterArchive .filterItems .filterChecked .item input[type=checkbox].switch:disabled:not(:checked):after {
    opacity: 0.6;
  }
  .allProductArchive2 .productArchive .filterArchive .filterItems .filterChecked .item input[type=radio] {
    border-radius: 50%;
  }
  .allProductArchive2 .productArchive .filterArchive .filterItems .filterChecked .item input[type=radio]:after {
    width: 19px;
    height: 19px;
    border-radius: 50%;
    background: var(--active-inner);
    opacity: 0;
    transform: scale(var(--s, 0.7));
  }
  .allProductArchive2 .productArchive .filterArchive .filterItems .filterChecked .item input[type=radio]:checked {
    --s: .5;
  }
}
.allProductArchive2 .productArchive .filterArchive .filterItems:last-child {
  margin-bottom: 0;
}
.allProductArchive2 .productArchive .productContainer .filterItems {
  background: #f7f7f7;
  padding: 1rem;
  border-radius: 10px;
  display: grid;
  grid-template-columns: auto 1fr;
  grid-gap: 0.5rem;
}
.allProductArchive2 .productArchive .productContainer .filterItems .filterTitle {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  font-size: 0.9rem;
  font-weight: 700;
  color: #000;
}
.allProductArchive2 .productArchive .productContainer .filterItems .filterTitle i {
  display: grid;
  align-items: center;
}
.allProductArchive2 .productArchive .productContainer .filterItems .filterTitle i svg {
  width: 1.1rem;
  height: 1.1rem;
  fill: #000;
}
.allProductArchive2 .productArchive .productContainer .filterItems ul {
  display: flex;
  align-items: center;
  gap: 1rem;
}
.allProductArchive2 .productArchive .productContainer .filterItems ul li {
  font-size: 0.9rem;
  font-weight: 300;
  color: #000;
  cursor: pointer;
}
.allProductArchive2 .productArchive .productContainer .filterItems ul li .active {
  font-weight: 700;
  color: var(--green-color);
}
.allProductArchive2 .productArchive .productContainer .productLists {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
  grid-gap: 1rem;
  margin-top: 1rem;
}
.allProductArchive2 .productArchive .productContainer .productLists .productList {
  display: grid;
  background: var(--green-color);
  position: relative;
  overflow: hidden;
  border-radius: 15px;
}
.allProductArchive2 .productArchive .productContainer .productLists .productList a {
  transition: all 0.3s ease-in-out;
  display: grid;
  position: relative;
  z-index: 2;
  border: 1px solid #eee;
  padding: 0.5rem 1rem;
}
.allProductArchive2 .productArchive .productContainer .productLists .productList a .pic {
  display: grid;
  justify-content: center;
}
.allProductArchive2 .productArchive .productContainer .productLists .productList a .pic img {
  width: 100%;
  height: 10rem;
  object-fit: contain;
}
.allProductArchive2 .productArchive .productContainer .productLists .productList a .images {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  justify-content: center;
  margin-top: 0.5rem;
  height: 2.5rem;
  overflow: hidden;
}
.allProductArchive2 .productArchive .productContainer .productLists .productList a .images img {
  height: 2.5rem;
  width: 2.5rem;
  border: 1px solid #eee;
  border-radius: 5px;
}
.allProductArchive2 .productArchive .productContainer .productLists .productList a .images .active {
  border: 1px solid var(--green-color);
}
.allProductArchive2 .productArchive .productContainer .productLists .productList a .title2 {
  font-size: 0.85rem;
  font-weight: 300;
  color: #000;
  line-height: 1.7rem;
  text-align: right;
  margin: 0.8rem 0;
  height: 3.2rem;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  text-overflow: ellipsis;
}
.allProductArchive2 .productArchive .productContainer .productLists .productList a .price1 {
  text-align: left;
  height: 3.5rem;
}
.allProductArchive2 .productArchive .productContainer .productLists .productList a .price1 .prices {
  margin-top: 1rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 2px;
}
.allProductArchive2 .productArchive .productContainer .productLists .productList a .price1 .prices .off {
  background: red;
  color: white;
  padding: 0 0.5rem;
  border-radius: 5rem;
  font-size: 0.9rem;
  font-weight: 700;
}
.allProductArchive2 .productArchive .productContainer .productLists .productList a .price1 .prices .price {
  font-size: 1.2rem;
  font-weight: 900;
  color: #000;
}
.allProductArchive2 .productArchive .productContainer .productLists .productList a .price1 .prices .price span {
  font-size: 0.7rem;
}
.allProductArchive2 .productArchive .productContainer .productLists .productList a .price1 s {
  font-size: 0.8rem;
  font-weight: 500;
  color: #444;
  opacity: 0.5;
}
.allProductArchive2 .productArchive .productContainer .productLists .productList a .price1 s span {
  font-size: 0.7rem;
}
.allProductArchive2 .productArchive .productContainer .productLists .productList a .empty1 {
  display: grid;
  align-items: end;
  font-size: 1rem;
  font-weight: 900;
  color: #000;
  height: 3.5rem;
}
.allProductArchive2 .productArchive .productContainer .productLists .productList a .empty1 span {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
.allProductArchive2 .productArchive .productContainer .productLists .productList:before {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  background: white;
  z-index: 1;
  border-bottom-right-radius: 15px;
  border-bottom-left-radius: 15px;
  height: 100%;
  transition: all 0.3s ease-in-out;
  content: "";
}
.allProductArchive2 .productArchive .productContainer .productLists .productList:hover a .price1 .prices .price {
  color: white;
}
.allProductArchive2 .productArchive .productContainer .productLists .productList:hover a .price1 s {
  color: white;
}
.allProductArchive2 .productArchive .productContainer .productLists .productList:hover a .empty1 {
  color: white;
}
.allProductArchive2 .productArchive .productContainer .productLists .productList:hover:before {
  height: calc(100% - 4.5rem);
}
.allProductArchive2 .description {
  overflow: hidden;
  padding: 1rem;
  background: white;
  border-radius: 20px;
  margin-top: 1rem;
}
.allProductArchive2 .description .title1 {
  font-size: 1.5rem;
  font-weight: 900;
  color: #000;
}
.allProductArchive2 .description p {
  font-size: 0.9rem;
  opacity: 0.7;
  font-weight: 500;
  color: #000;
  line-height: 2.2rem;
}
@media screen and (max-width: 800px) {
  .allProductArchive2 {
    margin-top: 0.5rem;
  }
  .allProductArchive2 .cats {
    display: none;
  }
  .allProductArchive2 .address {
    overflow-x: scroll;
    padding-bottom: 0.5rem;
    margin-bottom: 0;
    margin-right: 0.3rem;
  }
  .allProductArchive2 .address i {
    display: none;
  }
  .allProductArchive2 .address a {
    overflow: unset;
    font-size: 0.7rem;
    white-space: nowrap;
  }
  .allProductArchive2 .productArchive {
    display: block;
  }
  .allProductArchive2 .productArchive .filterArchive {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    z-index: 200;
    padding: 0.5rem;
    background: #eee;
    overflow-y: scroll;
    display: none;
  }
  .allProductArchive2 .productArchive .filterArchive .filterItems {
    border-radius: 10px;
    padding: 0.5rem;
    margin-bottom: 0.5rem;
  }
  .allProductArchive2 .productArchive .showFilterContent {
    display: flex;
    margin-bottom: 0.5rem;
  }
  .allProductArchive2 .productArchive .productContainer .filterItems {
    display: block;
    padding: 0;
  }
  .allProductArchive2 .productArchive .productContainer .filterItems .filterTitle {
    display: none;
  }
  .allProductArchive2 .productArchive .productContainer .filterItems ul {
    padding: 0.5rem;
    flex-wrap: wrap;
    justify-content: center;
  }
  .allProductArchive2 .productArchive .productContainer .filterItems ul li {
    font-size: 0.9rem;
  }
  .allProductArchive2 .productArchive .productContainer .productLists {
    grid-template-columns: 1fr 1fr;
    grid-gap: 0.5rem;
    margin-top: 0.5rem;
  }
  .allProductArchive2 .productArchive .productContainer .productLists .productList {
    border-radius: 10px;
  }
  .allProductArchive2 .productArchive .productContainer .productLists .productList a {
    padding: 0.5rem;
  }
  .allProductArchive2 .productArchive .productContainer .productLists .productList a .pic img {
    height: 8rem;
  }
  .allProductArchive2 .productArchive .productContainer .productLists .productList a .images {
    height: 2rem;
    overflow: hidden;
  }
  .allProductArchive2 .productArchive .productContainer .productLists .productList a .images img {
    height: 2rem;
    width: 2rem;
  }
  .allProductArchive2 .productArchive .productContainer .productLists .productList a .title2 {
    font-size: 0.7rem;
    line-height: 1.3rem;
    text-align: right;
    margin: 0.5rem 0;
    height: 2.5rem;
  }
  .allProductArchive2 .productArchive .productContainer .productLists .productList a .price1 .prices {
    margin-top: 0.5rem;
  }
  .allProductArchive2 .productArchive .productContainer .productLists .productList a .price1 .prices .off {
    font-size: 0.8rem;
  }
  .allProductArchive2 .productArchive .productContainer .productLists .productList a .price1 .prices .price {
    font-size: 1rem;
  }
  .allProductArchive2 .productArchive .productContainer .productLists .productList a .price1 .prices .price span {
    font-size: 0.6rem;
  }
  .allProductArchive2 .productArchive .productContainer .productLists .productList a .price1 s {
    font-size: 0.6rem;
  }
  .allProductArchive2 .productArchive .productContainer .productLists .productList a .price1 s span {
    font-size: 0.6rem;
  }
  .allProductArchive2 .productArchive .productContainer .productLists .productList a .empty1 {
    text-align: center;
    background: grey;
    padding: 0.2rem 0;
    border-radius: 5px;
    color: white;
    font-size: 1rem;
  }
  .allProductArchive2 .productArchive .productContainer .productLists .productList:before {
    border-bottom-right-radius: 10px;
    border-bottom-left-radius: 10px;
  }
  .allProductArchive2 .productArchive .productContainer .productLists .productList:hover a .price1 .prices .price {
    color: #000;
  }
  .allProductArchive2 .productArchive .productContainer .productLists .productList:hover a .price1 s {
    color: #444;
  }
  .allProductArchive2 .productArchive .productContainer .productLists .productList:hover:before {
    height: 100%;
  }
  .allProductArchive2 .description {
    padding: 0.5rem;
    border-radius: 10px;
    margin-top: 0.5rem;
  }
  .allProductArchive2 .description .title1 {
    font-size: 1rem;
  }
  .allProductArchive2 .description p {
    font-size: 0.8rem;
  }
}

.allBlogs {
  min-height: calc(100vh - 10rem);
}
.allBlogs .titles {
  width: 100%;
  background: black;
  padding: 2rem 0;
}
.allBlogs .titles .width {
  margin: auto;
}
.allBlogs .titles .name {
  font-size: 2rem;
  font-weight: 900;
  color: white;
  text-align: center;
}
.allBlogs .titles .body {
  font-size: 1rem;
  font-weight: 300;
  color: white;
  text-align: center;
}
.allBlogs .items {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr));
  grid-gap: 1rem;
  margin: auto;
  margin-top: 1rem;
}
.allBlogs .items .item {
  background: white;
  border-radius: 10px;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.05);
}
.allBlogs .items .item .pic {
  border-bottom: 1px solid #eee;
}
.allBlogs .items .item .pic img {
  height: 15rem;
  object-fit: cover;
}
.allBlogs .items .item .name {
  font-size: 1.1rem;
  font-weight: 900;
  color: #000;
  margin: 0.5rem;
}
.allBlogs .items .item .body {
  font-size: 0.9rem;
  font-weight: 700;
  color: #444;
  opacity: 0.8;
  margin: 0 0.5rem;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  text-overflow: ellipsis;
}
.allBlogs .items .item .more {
  display: grid;
  justify-content: center;
  margin: 1rem 0.5rem;
}
.allBlogs .items .item .more span {
  background: var(--green-color);
  padding: 0.3rem 1rem;
  border-radius: 5rem;
  color: white;
  font-size: 0.85rem;
  font-weight: 500;
}

.allProductSuggest {
  margin: auto;
}
.allProductSuggest .tops {
  background: red;
  text-align: center;
  padding: 2rem;
  color: white;
  font-size: 2rem;
  font-weight: 900;
}
.allProductSuggest .productLists {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
  background: white;
  border-radius: 20px;
  overflow: hidden;
}
.allProductSuggest .productLists .productList a {
  transition: all 0.3s ease-in-out;
  display: grid;
  position: relative;
  overflow: hidden;
  border: 1px solid #eee;
  padding: 1rem;
}
.allProductSuggest .productLists .productList a .pic {
  display: grid;
  justify-content: center;
}
.allProductSuggest .productLists .productList a .pic img {
  width: 100%;
  height: 12rem;
  object-fit: contain;
}
.allProductSuggest .productLists .productList a .images {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  justify-content: center;
  margin-top: 0.5rem;
  height: 3rem;
  overflow: hidden;
}
.allProductSuggest .productLists .productList a .images img {
  height: 3rem;
  width: 3rem;
  border: 1px solid #eee;
  border-radius: 5px;
}
.allProductSuggest .productLists .productList a .images .active {
  border: 1px solid var(--green-color);
}
.allProductSuggest .productLists .productList a .off2 {
  position: absolute;
  left: 0.5rem;
  top: 0.5rem;
}
.allProductSuggest .productLists .productList a .off2 .off {
  position: relative;
}
.allProductSuggest .productLists .productList a .off2 .off i {
  display: grid;
  align-items: center;
  animation: shine 3s ease-in-out infinite;
  width: 2.7rem;
  height: 2.7rem;
}
@keyframes shine {
  0% {
    transform: rotate(0deg);
  }
  50% {
    transform: rotate(360deg);
  }
  100% {
    transform: rotate(0);
  }
}
.allProductSuggest .productLists .productList a .off2 .off i svg {
  width: 2.7rem;
  height: 2.7rem;
  fill: red;
}
.allProductSuggest .productLists .productList a .off2 .off span {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  font-size: 0.9rem;
  font-weight: 500;
  color: white;
  margin: auto;
  display: grid;
  align-items: center;
  justify-content: center;
  z-index: 2;
}
.allProductSuggest .productLists .productList a .title2 {
  font-size: 0.85rem;
  font-weight: 300;
  color: #000;
  line-height: 1.7rem;
  text-align: right;
  margin: 0.8rem 0;
  height: 3.2rem;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  text-overflow: ellipsis;
}
.allProductSuggest .productLists .productList a .price {
  display: flex;
  justify-content: left;
  align-items: center;
  gap: 0.5rem;
}
.allProductSuggest .productLists .productList a .price s {
  font-size: 0.8rem;
  font-weight: 500;
  color: #000;
  opacity: 0.6;
}
.allProductSuggest .productLists .productList a .price .price1 {
  display: flex;
  justify-content: left;
  align-items: center;
  grid-gap: 0.5rem;
  font-size: 1.2rem;
  font-weight: 900;
  color: #000;
}
.allProductSuggest .productLists .productList a .price .price1:after {
  content: "\f06c︎";
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  font-weight: 400;
  letter-spacing: normal;
  font-family: digikala;
  font-size: 1.1rem;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-style: normal;
  font-variant: normal;
  font-weight: 400;
  text-decoration: none;
  text-transform: none;
  line-height: 1;
  box-sizing: inherit;
}
.allProductSuggest .productLists .productList a .empty1 {
  text-align: center;
  background: grey;
  padding: 0.2rem 0;
  border-radius: 5px;
  color: white;
  font-size: 1rem;
}
.allProductSuggest .productLists .productList a:hover .price .price1 {
  color: var(--green-color);
}
@media screen and (max-width: 800px) {
  .allProductSuggest .productLists {
    grid-template-columns: 1fr 1fr;
    grid-gap: 0.5rem;
    padding: 0.3rem;
  }
  .allProductSuggest .productLists .productList a .pic img {
    height: 10rem;
  }
  .allProductSuggest .productLists .productList a .title2 {
    font-size: 0.75rem;
    margin: 0.5rem;
    height: auto;
  }
  .allProductSuggest .productLists .productList a .seller {
    top: 0.5rem;
    right: 0.5rem;
    font-size: 0.7rem;
  }
}

.allProfileIndex {
  margin: auto;
  margin-top: 1rem;
  display: grid;
  grid-template-columns: auto 1fr;
  grid-gap: 1rem;
}
.allProfileIndex .profileIndex .notes {
  padding: 1rem;
  border-radius: 20px;
  overflow: hidden;
  margin-bottom: 1rem;
  box-shadow: 0 4px 16px 0 rgba(36, 43, 61, 0.1);
  border: 1px solid #eee;
  background: var(--back1-color);
}
.allProfileIndex .profileIndex .notes .noteTitle {
  font-size: 1.1rem;
  font-weight: 700;
  color: #000;
}
.allProfileIndex .profileIndex .notes .items {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(30rem, 1fr));
  grid-gap: 1rem;
  margin-top: 1rem;
}
.allProfileIndex .profileIndex .notes .items .item {
  border-radius: 20px;
  overflow: hidden;
  border: 1px solid rgb(238, 238, 241);
}
.allProfileIndex .profileIndex .notes .items .item h4 {
  font-weight: 700;
  font-size: 0.9rem;
  color: #000;
  padding: 1rem;
  background: #f9f9f9;
  border-bottom: 1px solid rgb(238, 238, 241);
}
.allProfileIndex .profileIndex .notes .items .item p {
  font-weight: 300;
  font-size: 0.85rem;
  color: #000;
  margin: 1rem;
}
.allProfileIndex .profileIndex .about {
  border-radius: 20px;
  border: 1px solid #eee;
  box-shadow: 0 4px 16px 0 rgba(36, 43, 61, 0.1);
  background: white;
}
.allProfileIndex .profileIndex .about .items {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
}
.allProfileIndex .profileIndex .about .items .item {
  border-left: 1px solid #eee;
  border-bottom: 1px solid #eee;
  padding: 1rem;
}
.allProfileIndex .profileIndex .about .items .item .name {
  font-size: 0.9rem;
  font-weight: 300;
  color: #444;
  margin-bottom: 0.5rem;
}
.allProfileIndex .profileIndex .about .items .item .body {
  font-size: 1rem;
  font-weight: 700;
  color: #000;
  border-radius: 5px;
}
.allProfileIndex .profileIndex .about .items .item:nth-child(2), .allProfileIndex .profileIndex .about .items .item:nth-child(4) {
  border-left: 0;
}
.allProfileIndex .profileIndex .about .items .item:nth-child(3), .allProfileIndex .profileIndex .about .items .item:nth-child(4) {
  border-bottom: 0;
}
.allProfileIndex .profileIndex .payW {
  margin-bottom: 1rem;
  background: white;
  box-shadow: 0 4px 16px 0 rgba(36, 43, 61, 0.1);
  border: 1px solid #eee;
  border-radius: 20px;
  overflow: hidden;
}
.allProfileIndex .profileIndex .payW .items {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}
.allProfileIndex .profileIndex .payW .items .item {
  padding: 1rem;
  border-left: 1px solid #eee;
  display: grid;
}
.allProfileIndex .profileIndex .payW .items .item i {
  display: grid;
  align-items: center;
  justify-content: center;
  opacity: 0.8;
}
.allProfileIndex .profileIndex .payW .items .item i svg {
  width: 2.5rem;
  height: 2.5rem;
  fill: var(--green-color);
}
.allProfileIndex .profileIndex .payW .items .item .name {
  font-size: 0.7rem;
  font-weight: 500;
  color: #000;
  text-align: center;
  margin-top: 1rem;
  opacity: 0.7;
}
.allProfileIndex .profileIndex .payW .items .item .val {
  text-align: center;
  font-size: 1.3rem;
  font-weight: 900;
  color: black;
}
.allProfileIndex .profileIndex .payW .items .item:last-child {
  border-left: 0;
}
.allProfileIndex .profileIndex label {
  color: #000;
  font-size: 1rem;
  font-weight: 500;
  padding-right: 1rem;
}
.allProfileIndex .allUserIndexInfo .box {
  background: var(--back1-color);
  border: 1px solid #eee;
  margin-top: 1rem;
  border-radius: 10px;
  overflow: hidden;
}
.allProfileIndex .allUserIndexInfo .box .items {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(1px, 1fr));
  border-top: 1px solid #eee;
}
.allProfileIndex .allUserIndexInfo .box .items .item {
  padding: 1rem;
  display: grid;
  grid-template-columns: 1fr;
  grid-gap: 0.5rem;
}
.allProfileIndex .allUserIndexInfo .box .items .item input, .allProfileIndex .allUserIndexInfo .box .items .item textarea {
  padding: 0.5rem;
  background: var(--back2-color);
  border-radius: 0.2rem;
  width: 100%;
  transition: all 0.3s ease-in-out;
  font-size: 0.9rem;
  line-height: 1.571;
  color: #81858b;
  height: 2.5rem;
}
.allProfileIndex .allUserIndexInfo .box .items .item textarea {
  height: 10rem;
}
.allProfileIndex .allUserIndexInfo .box .items .item label {
  font-size: 0.9rem;
  line-height: 1.692;
  color: #000;
}
.allProfileIndex .allUserIndexInfo .box .items .item h4 {
  height: 2.5rem;
  width: 100%;
  cursor: pointer;
  background: var(--back2-color);
  border-radius: 0.2rem;
  color: #000;
  display: grid;
  align-items: center;
  padding-right: 0.5rem;
  font-weight: 300;
}
.allProfileIndex .allUserIndexInfo .box .items .item:first-child {
  border-left: 1px solid #eee;
}
.allProfileIndex .allUserIndexInfo .box .items:first-child {
  border-top: 0;
}
.allProfileIndex .allUserIndexInfo .infoButton {
  font-size: 0.9rem;
  font-weight: 300;
  color: white;
  background: var(--green-color);
  border-radius: 5px;
  padding: 0.3rem 0.5rem;
  display: grid;
  margin-top: 1rem;
}
.allProfileIndex .profileIndexPay {
  overflow: hidden;
  border-radius: 20px;
  box-shadow: 0 4px 16px 0 rgba(36, 43, 61, 0.1);
  border: 1px solid #eee;
  background: white;
}
.allProfileIndex .profileIndexPay .table1 {
  overflow-x: scroll;
}
.allProfileIndex .profileIndexPay table {
  clear: both;
  margin-top: 6px !important;
  margin-bottom: 6px !important;
  max-width: none !important;
  border-collapse: separate !important;
  width: 100%;
}
.allProfileIndex .profileIndexPay table tr {
  display: grid;
  background: white;
  grid-template-columns: repeat(auto-fit, minmax(1px, 1fr));
}
.allProfileIndex .profileIndexPay table tr:nth-child(even) {
  background: #f5f5f5;
}
.allProfileIndex .profileIndexPay table tr th {
  font-weight: 700;
  color: #000;
  font-size: 0.85rem;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
  height: 100%;
  overflow: hidden;
  border-left: 1px solid #eee;
  padding: 0.8rem;
}
.allProfileIndex .profileIndexPay table tr td {
  display: flex;
  justify-content: center;
  align-items: center;
  grid-gap: 0.5rem;
  font-weight: 300;
  color: #000;
  font-size: 0.85rem;
  text-overflow: ellipsis;
  white-space: nowrap;
  height: 100%;
  overflow: hidden;
  border-left: 1px solid #eee;
  padding: 0.8rem;
}
.allProfileIndex .profileIndexPay table tr td a {
  color: var(--green-color);
}
.allProfileIndex .profileIndexPay table tr .active {
  display: flex;
  justify-content: right;
  align-items: center;
  font-weight: 300;
  padding: 0.3rem 0.5rem;
  border-radius: 5px;
  background: green;
  color: white;
}
.allProfileIndex .profileIndexPay table tr .unActive {
  display: flex;
  justify-content: right;
  align-items: center;
  font-weight: 300;
  padding: 0.3rem 0.5rem;
  border-radius: 5px;
  background: red;
  color: white;
}
@media screen and (max-width: 700px) {
  .allProfileIndex .profileIndexPay table tr {
    grid-template-columns: repeat(5, 10rem);
  }
  .allProfileIndex .profileIndexPay table tr th {
    padding: 1rem 0;
  }
  .allProfileIndex .profileIndexPay table tr td {
    padding: 1rem 0;
  }
}

@media screen and (max-width: 800px) {
  .allProfileIndex {
    display: block;
  }
  .allProfileIndex .allProfileList {
    display: none;
  }
  .allProfileIndex .profileIndex .about {
    display: none;
  }
  .allProfileIndex .profileIndex .payW .items {
    grid-template-columns: repeat(2, 1fr);
  }
  .allProfileIndex .profileIndex .payW .items .item {
    border-left: 1px solid #eee;
  }
  .allProfileIndex .profileIndex .payW .items .item i svg {
    width: 1.5rem;
    height: 1.5rem;
  }
  .allProfileIndex .profileIndex .payW .items .item .val {
    font-size: 1rem;
  }
  .allProfileIndex .profileIndex .payW .items .item:nth-child(3), .allProfileIndex .profileIndex .payW .items .item:nth-child(4) {
    border-top: 1px solid #eee;
  }
}
.detailTransaction {
  display: grid;
  grid-template-columns: 2fr 1fr;
  grid-gap: 1rem;
  margin: auto;
  margin-top: 1rem;
}
.detailTransaction .right .box {
  background: white;
  box-shadow: 0px 4px 24px 0px rgba(0, 0, 0, 0.1);
  border-radius: 10px;
  padding: 1rem;
  margin-top: 1rem;
}
.detailTransaction .right .box .title {
  font-size: 1.1rem;
  font-weight: 700;
  color: black;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.detailTransaction .right .box .title .left {
  display: flex;
  justify-content: left;
  align-items: center;
  gap: 1rem;
}
.detailTransaction .right .box .title .left .print {
  font-size: 0.8rem;
  font-weight: 300;
  color: white;
  background: orange;
  border-radius: 5px;
  padding: 0.3rem 1rem;
  cursor: pointer;
}
.detailTransaction .right .box .title .left .status0, .detailTransaction .right .box .title .left .status50, .detailTransaction .right .box .title .left .status100 {
  background: red;
  color: white;
  padding: 0.3rem 0.5rem;
  border-radius: 5px;
  font-size: 0.8rem;
}
.detailTransaction .right .box .title .left .status50 {
  background: yellowgreen;
}
.detailTransaction .right .box .title .left .status100 {
  background: green;
}
.detailTransaction .right .box .body {
  margin-top: 1rem;
  border: 1px solid rgb(238, 238, 241);
  border-radius: 10px;
  padding: 1rem;
}
.detailTransaction .right .box .body .name {
  font-size: 0.8rem;
  font-weight: 300;
  color: #000;
  margin-bottom: 0.5rem;
}
.detailTransaction .right .box .body p {
  font-size: 0.9rem;
  font-weight: 500;
  color: black;
}
.detailTransaction .right .box .options {
  margin-top: 1rem;
  border-right: 1px solid rgb(238, 238, 241);
  border-top: 1px solid rgb(238, 238, 241);
  border-radius: 10px;
  overflow: hidden;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
}
.detailTransaction .right .box .options .option {
  border: 1px solid rgb(238, 238, 241);
  border-right: 0;
  border-top: 0;
  padding: 1rem;
}
.detailTransaction .right .box .options .option .name {
  font-size: 0.8rem;
  font-weight: 300;
  color: #000;
  margin-bottom: 0.5rem;
}
.detailTransaction .right .box .options .option .value {
  font-size: 0.9rem;
  font-weight: 500;
  color: black;
}
.detailTransaction .right .box .grid4 {
  grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
}
.detailTransaction .right .box .table {
  margin-top: 1rem;
  border: 1px solid #eee;
}
.detailTransaction .right .box .table table {
  width: 100%;
}
.detailTransaction .right .box .table table tr {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(1px, 1fr));
  align-items: center;
  border-top: 1px solid #eee;
}
.detailTransaction .right .box .table table tr th {
  font-weight: 700;
  color: black;
  font-size: 0.85rem;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
  height: 100%;
  overflow: hidden;
  border-left: 1px solid #eee;
  padding: 0.8rem;
}
.detailTransaction .right .box .table table tr th:last-child {
  border-left: 0;
}
.detailTransaction .right .box .table table tr td {
  display: grid;
  align-items: center;
  font-weight: 700;
  font-size: 0.85rem;
  text-align: center;
  color: #000;
  height: 100%;
  border-left: 1px solid #eee;
  padding: 0.8rem;
}
.detailTransaction .right .box .table table tr td .status0 {
  background: red;
  color: white;
  padding: 0.2rem 0.5rem;
  border-radius: 5px;
}
.detailTransaction .right .box .table table tr td .status50 {
  background: yellowgreen;
  color: white;
  padding: 0.2rem 0.5rem;
  border-radius: 5px;
}
.detailTransaction .right .box .table table tr td .status100 {
  background: green;
  color: white;
  padding: 0.2rem 0.5rem;
  border-radius: 5px;
}
.detailTransaction .right .box .table table tr td .buttons {
  position: relative;
}
.detailTransaction .right .box .table table tr td .buttons .operate {
  font-size: 0.8rem;
  padding: 0.3rem;
  border-radius: 5px;
  color: var(--green-color);
  background: transparent;
  border: 1px solid var(--green-color);
  width: 100%;
}
.detailTransaction .right .box .table table tr td .buttons .items {
  position: absolute;
  top: calc(100% + 5px);
  z-index: 10;
  width: 100%;
  background: white;
  border-radius: 5px;
  border: 1px solid var(--green-color);
  display: none;
  grid-template-columns: 1fr;
}
.detailTransaction .right .box .table table tr td .buttons .items a {
  display: grid;
  padding: 0.5rem;
  font-size: 0.8rem;
  font-weight: 300;
  color: var(--green-color);
  text-align: right;
  border-top: 1px solid var(--green-color);
  transition: all 0.3s ease-in-out;
}
.detailTransaction .right .box .table table tr td .buttons .items a:first-child {
  border-top: 0;
}
.detailTransaction .right .box .table table tr td .buttons .items a:hover {
  background: var(--green-color);
  color: white;
}
.detailTransaction .right .box .table table tr td:last-child {
  border-left: 0;
}
.detailTransaction .right .box .table table tr:first-child {
  border-top: 0;
}
.detailTransaction .right .box:first-child {
  margin-top: 0;
}
.detailTransaction .left .cardData {
  background: white;
  box-shadow: 0px 4px 24px 0px rgba(0, 0, 0, 0.1);
  border-radius: 10px;
  padding: 0.5rem;
  margin-bottom: 1rem;
}
.detailTransaction .left .cardData .pic {
  display: grid;
  justify-content: center;
  position: relative;
}
.detailTransaction .left .cardData .pic img {
  height: 5rem;
}
.detailTransaction .left .cardData .pic .cancel {
  position: absolute;
  right: 0;
  top: 0;
  background: red;
  color: white;
  padding: 0.2rem 0.5rem;
  border-radius: 5px;
}
.detailTransaction .left .cardData .options {
  border-right: 1px solid rgb(238, 238, 241);
  border-top: 1px solid rgb(238, 238, 241);
  border-radius: 10px;
  overflow: hidden;
  margin-top: 0.5rem;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
}
.detailTransaction .left .cardData .options .option {
  border: 1px solid rgb(238, 238, 241);
  border-right: 0;
  border-top: 0;
  padding: 0.5rem;
}
.detailTransaction .left .cardData .options .option .name {
  font-size: 0.6rem;
  font-weight: 300;
  color: #000;
  margin-bottom: 0.5rem;
}
.detailTransaction .left .cardData .options .option .val {
  font-size: 0.7rem;
  font-weight: 900;
  color: black;
}

.allCheckoutProfile {
  width: 100%;
}
.allCheckoutProfile .tabs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(1rem, 1fr));
  gap: 1rem;
  margin-bottom: 1rem;
}
.allCheckoutProfile .tabs .tab {
  border: 2px solid rgb(238, 238, 241);
  border-radius: 5rem;
  font-size: 1rem;
  font-weight: 700;
  color: #000;
  text-align: center;
  padding: 0.5rem 1rem;
  cursor: pointer;
}
.allCheckoutProfile .tabs .active {
  background: green;
  border: 2px solid green;
  color: white;
}
.allCheckoutProfile .chargeWidgets {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  border-radius: 20px;
  background: white;
  margin-bottom: 1rem;
  border: 1px solid #eee;
}
.allCheckoutProfile .chargeWidgets .WidgetItem {
  padding: 1rem 0.5rem;
  border-left: 2px solid rgb(238, 238, 241);
}
.allCheckoutProfile .chargeWidgets .WidgetItem .WidgetSubject h4 {
  font-size: 0.9rem;
  color: #444;
  text-align: center;
  font-weight: 500;
}
.allCheckoutProfile .chargeWidgets .WidgetItem .WidgetSubject h5 {
  font-size: 1.1rem;
  color: #000;
  text-align: center;
  font-weight: 900;
  margin-top: 0.5rem;
}
.allCheckoutProfile .chargeWidgets .WidgetItem:last-child {
  border-left: 0;
}
.allCheckoutProfile .table1 {
  overflow-x: scroll;
  border: 1px solid #eee;
  border-radius: 20px;
}
.allCheckoutProfile .table1 table {
  clear: both;
  border-collapse: collapse;
  width: 100%;
  overflow: hidden;
}
.allCheckoutProfile .table1 table tr {
  display: grid;
  background: white;
  grid-template-columns: repeat(auto-fit, minmax(1px, 1fr));
}
.allCheckoutProfile .table1 table tr:nth-child(even) {
  background: #f5f5f5;
}
.allCheckoutProfile .table1 table tr th {
  font-weight: 700;
  color: #000;
  font-size: 0.85rem;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
  height: 100%;
  overflow: hidden;
  border-left: 1px solid #eee;
  padding: 0.8rem;
}
.allCheckoutProfile .table1 table tr td {
  display: flex;
  justify-content: center;
  align-items: center;
  grid-gap: 0.5rem;
  font-weight: 300;
  color: #000;
  font-size: 0.85rem;
  text-overflow: ellipsis;
  white-space: nowrap;
  height: 100%;
  overflow: hidden;
  border-left: 1px solid #eee;
  padding: 0.8rem;
}
.allCheckoutProfile .table1 table tr td a {
  color: var(--green-color);
}
.allCheckoutProfile .table1 table tr .active {
  display: flex;
  justify-content: right;
  align-items: center;
  font-weight: 300;
  padding: 0.3rem 0.5rem;
  border-radius: 5px;
  background: green;
  color: white;
}
.allCheckoutProfile .table1 table tr .unActive {
  display: flex;
  justify-content: right;
  align-items: center;
  font-weight: 300;
  padding: 0.3rem 0.5rem;
  border-radius: 5px;
  background: red;
  color: white;
}
.allCheckoutProfile .allChargeIndex .success {
  background: rgba(0, 128, 0, 0.26);
  color: #006200;
  padding: 1rem;
  border-radius: 0.3rem;
  font-size: 0.85rem;
  font-weight: 300;
  margin-bottom: 1rem;
}
.allCheckoutProfile .allChargeIndex .error {
  color: red;
  background: rgba(255, 0, 0, 0.1);
  padding: 1rem;
  border-radius: 0.3rem;
  font-size: 0.85rem;
  font-weight: 300;
  margin-bottom: 1rem;
}
.allCheckoutProfile .allChargeIndex .chargePrice form .chargeField {
  background: white;
  border-radius: 20px;
  padding: 1rem;
  overflow: hidden;
}
.allCheckoutProfile .allChargeIndex .chargePrice form .chargeField .top {
  display: grid;
  grid-template-columns: 1fr;
  grid-gap: 0.5rem;
}
.allCheckoutProfile .allChargeIndex .chargePrice form .chargeField .top .right1 {
  font-size: 0.9rem;
  font-weight: 700;
  color: #000;
}
.allCheckoutProfile .allChargeIndex .chargePrice form .chargeField .top input {
  direction: ltr;
  text-align: left;
  border: 1px solid #eee;
  padding: 0.5rem 1rem;
  color: #000;
  border-radius: 10px;
  font-size: 1rem;
}
.allCheckoutProfile .allChargeIndex .chargePrice form .chargeField .top p {
  font-size: 0.75rem;
  font-weight: 700;
  color: red;
  text-align: center;
}
.allCheckoutProfile .allChargeIndex .chargePrice form .chargeField .finalPrice {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  margin-top: 1rem;
}
.allCheckoutProfile .allChargeIndex .chargePrice form .chargeField .finalPrice .title2 {
  font-size: 1.1rem;
  font-weight: 900;
  color: black;
}
.allCheckoutProfile .allChargeIndex .chargePrice form .chargeField .finalPrice .price {
  font-size: 1.1rem;
  font-weight: 900;
  color: black;
}
.allCheckoutProfile .allChargeIndex .chargePrice form .chargeField .finalPrice button {
  font-size: 1rem;
  font-weight: 700;
  color: white;
  background: green;
  padding: 0.5rem 2rem;
  border-radius: 5px;
  cursor: pointer;
}
.allCheckoutProfile .allChargeIndex .chargePrice form .bot {
  display: grid;
  align-items: center;
  gap: 1rem;
  margin-top: 1rem;
}
.allCheckoutProfile .allChargeIndex .chargePrice form .bot .gateItems {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem;
}
.allCheckoutProfile .allChargeIndex .chargePrice form .bot .gateItems .gateItem {
  display: grid;
  justify-content: center;
  padding: 0.5rem;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  border-radius: 10px;
  background: white;
  cursor: pointer;
  border: 2px solid white;
  filter: grayscale(1);
  transition: all 0.3s ease-in-out;
}
.allCheckoutProfile .allChargeIndex .chargePrice form .bot .gateItems .gateItem img {
  height: 3.5rem;
  width: 3.5rem;
  object-fit: contain;
}
.allCheckoutProfile .allChargeIndex .chargePrice form .bot .gateItems .gateItem:hover {
  filter: grayscale(0);
}
.allCheckoutProfile .allChargeIndex .chargePrice form .bot .gateItems .active {
  border: 2px solid var(--green-color);
  filter: grayscale(0);
}
.allCheckoutProfile .allChargeIndex .chargePrice form .bot button {
  font-size: 1rem;
  font-weight: 700;
  color: white;
  background: var(--green-color);
  padding: 0.5rem 2rem;
  border-radius: 5px;
  cursor: pointer;
}
@media screen and (max-width: 1000px) {
  .allCheckoutProfile .allChargeIndex {
    margin: 0;
  }
  .allCheckoutProfile .allChargeIndex .chargePrice form .chargeField {
    border-radius: 5px;
    padding: 0.5rem;
  }
  .allCheckoutProfile .allChargeIndex .chargePrice form .chargeField .suggest {
    margin-bottom: 1rem;
  }
  .allCheckoutProfile .allChargeIndex .chargePrice form .chargeField .suggest .title1 {
    text-align: center;
    margin-bottom: 0.5rem;
  }
  .allCheckoutProfile .allChargeIndex .chargePrice form .chargeField .suggest .boxes {
    flex-wrap: wrap;
    justify-content: center;
  }
  .allCheckoutProfile .allChargeIndex .chargePrice form .chargeField .suggest .boxes .box {
    font-size: 0.7rem;
    padding: 0.5rem;
  }
  .allCheckoutProfile .allChargeIndex .chargePrice form .chargeField .top {
    padding-bottom: 0.5rem;
  }
  .allCheckoutProfile .allChargeIndex .chargePrice form .chargeField .top .right1 {
    font-size: 0.8rem;
  }
  .allCheckoutProfile .allChargeIndex .chargePrice form .chargeField .top input {
    font-size: 0.85rem;
  }
  .allCheckoutProfile .allChargeIndex .chargePrice form .chargeField .finalPrice {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.5rem;
  }
  .allCheckoutProfile .allChargeIndex .chargePrice form .chargeField .finalPrice .title2 {
    font-size: 0.9rem;
  }
  .allCheckoutProfile .allChargeIndex .chargePrice form .chargeField .finalPrice .price {
    font-size: 0.9rem;
  }
  .allCheckoutProfile .allChargeIndex .chargePrice form .chargeField .finalPrice button {
    font-size: 0.8rem;
    padding: 0.5rem 1rem;
  }
  .allCheckoutProfile .allChargeIndex .chargePrice form .bot {
    display: block;
  }
  .allCheckoutProfile .allChargeIndex .chargePrice form .bot .gateItems {
    margin: 1rem 0;
  }
  .allCheckoutProfile .allChargeIndex .chargePrice form .bot .gateItems .gateItem img {
    height: 3rem;
    width: 3rem;
  }
  .allCheckoutProfile .allChargeIndex .chargePrice form .bot button {
    width: 100%;
    padding: 0.5rem 1rem;
  }
  .allCheckoutProfile .allChargeIndex .chargePrice form .top .right1 {
    font-size: 0.8rem;
  }
  .allCheckoutProfile .allChargeIndex .chargePrice form .top input {
    font-size: 0.8rem;
    width: 100%;
  }
}
@media screen and (max-width: 800px) {
  .allCheckoutProfile .tabs {
    gap: 0.5rem;
  }
  .allCheckoutProfile .tabs .tab {
    font-size: 0.75rem;
    padding: 0.5rem;
  }
  .allCheckoutProfile .chargeWidgets {
    grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
    border-radius: 10px;
  }
  .allCheckoutProfile .chargeWidgets .WidgetItem {
    padding: 0.5rem;
  }
  .allCheckoutProfile .chargeWidgets .WidgetItem .WidgetSubject h4 {
    font-size: 0.7rem;
  }
  .allCheckoutProfile .chargeWidgets .WidgetItem .WidgetSubject h5 {
    font-size: 0.8rem;
  }
  .allCheckoutProfile .chargeWidgets .WidgetItem:last-child {
    border-left: 0;
  }
  .allCheckoutProfile .table1 table tr {
    grid-template-columns: repeat(5, 10rem);
  }
}

.profileIndexLike label {
  color: #000;
  font-size: 1rem;
  font-weight: 500;
}
.profileIndexLike ul {
  background: var(--back1-color);
  margin-top: 1rem;
  border-radius: 20px;
  overflow: hidden;
}
.profileIndexLike ul li {
  display: grid;
  grid-template-columns: 1fr auto;
  border-bottom: 1px solid #eee;
  grid-gap: 1rem;
  padding: 1rem;
  height: 6.5rem;
}
.profileIndexLike ul li a {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-gap: 0.5rem;
}
.profileIndexLike ul li a .userItemPic img {
  width: 5rem;
  height: 5rem;
  object-fit: cover;
}
.profileIndexLike ul li a .userItemSubject .userItemSubjectTitle {
  font-size: 0.9rem;
  font-weight: 400;
  height: 2.5rem;
  overflow: hidden;
  color: #000;
}
.profileIndexLike ul li a .userItemSubject .postPriceItem {
  text-align: left;
  overflow: hidden;
}
.profileIndexLike ul li a .userItemSubject .postPriceItem .offPrice {
  display: grid;
  justify-content: left;
}
.profileIndexLike ul li a .userItemSubject .postPriceItem .offPrice s {
  font-size: 0.8rem;
  line-height: 1.692;
  font-weight: 300;
  color: #000;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  width: 100%;
}
.profileIndexLike ul li a .userItemSubject .postPriceItem h3 {
  text-align: left;
  width: 100%;
  color: red;
  letter-spacing: 0.1px;
  font-weight: 700;
  font-size: 1.1rem;
  line-height: 1.5;
}

.allProduct .table1 {
  overflow-x: scroll;
  border: 1px solid #eee;
  border-radius: 20px;
}
.allProduct table {
  clear: both;
  border-collapse: collapse;
  width: 100%;
}
.allProduct table tr {
  display: grid;
  background: white;
  grid-template-columns: repeat(auto-fit, minmax(1px, 1fr));
}
.allProduct table tr:nth-child(even) {
  background: #f5f5f5;
}
.allProduct table tr th {
  font-weight: 700;
  color: #000;
  font-size: 0.85rem;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
  height: 100%;
  overflow: hidden;
  border-left: 1px solid #eee;
  padding: 0.8rem;
}
.allProduct table tr td {
  display: flex;
  justify-content: center;
  align-items: center;
  grid-gap: 0.5rem;
  font-weight: 300;
  color: #000;
  font-size: 0.85rem;
  text-overflow: ellipsis;
  white-space: nowrap;
  height: 100%;
  overflow: hidden;
  border-left: 1px solid #eee;
  padding: 0.8rem;
}
.allProduct table tr td a {
  color: var(--green-color);
}
.allProduct table tr td .pic img {
  height: 2.5rem;
  object-fit: contain;
}
.allProduct table tr .active {
  display: flex;
  justify-content: right;
  align-items: center;
  font-weight: 300;
  padding: 0.3rem 0.5rem;
  border-radius: 5px;
  background: green;
  color: white;
}
.allProduct table tr .unActive {
  display: flex;
  justify-content: right;
  align-items: center;
  font-weight: 300;
  padding: 0.3rem 0.5rem;
  border-radius: 5px;
  background: red;
  color: white;
}

.allProfileLists .showFilter {
  display: none;
  width: 100%;
  background: white;
  padding: 0.5rem 0;
  text-align: center;
  margin: 0.5rem 0;
  font-size: 1rem;
  font-weight: 700;
  box-shadow: 0 4px 16px 0 rgba(36, 43, 61, 0.1);
  border: 1px solid #eee;
  border-radius: 10px;
  cursor: pointer;
}
.allProfileLists .allProfileList {
  width: 270px;
  border-radius: 20px;
  overflow: hidden;
  background: white;
  box-shadow: 0 4px 16px 0 rgba(36, 43, 61, 0.1);
  border: 1px solid #eee;
}
.allProfileLists .allProfileList .list1 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding: 1rem;
  border-bottom: 1px solid rgb(238, 238, 241);
}
.allProfileLists .allProfileList .list1 .name {
  font-size: 0.9rem;
  font-weight: 700;
  color: #444;
}
.allProfileLists .allProfileList .list1 i {
  display: grid;
  align-items: center;
  padding: 0.5rem;
  border-radius: 5px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
}
.allProfileLists .allProfileList .list1 i svg {
  width: 1rem;
  height: 1rem;
  fill: var(--green-color);
  color: var(--green-color);
}
.allProfileLists .allProfileList .list1 .body {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--green-color);
  border-bottom: 2px dashed var(--green-color);
}
.allProfileLists .allProfileList .list1 .body span {
  font-size: 0.7rem;
}
.allProfileLists .allProfileList .walletData {
  border-radius: 10px;
  overflow: hidden;
  margin-top: 1rem;
  padding: 1rem;
  background: white;
}
.allProfileLists .allProfileList .walletData i {
  display: grid;
  justify-content: center;
}
.allProfileLists .allProfileList .walletData i svg {
  width: 5rem;
  height: 5rem;
}
.allProfileLists .allProfileList .walletData h3 {
  font-size: 1.2rem;
  font-weight: 300;
  color: #444;
  text-align: center;
}
.allProfileLists .allProfileList .walletData h3 span {
  font-size: 1rem;
  letter-spacing: 0.1px;
}
.allProfileLists .allProfileList .walletData a {
  display: grid;
  width: 100%;
  text-align: center;
  font-size: 0.9rem;
  font-weight: 300;
  color: var(--green-color);
  margin-top: 0.5rem;
}
.allProfileLists .allProfileList .allUserIndexListsItems {
  margin-top: 1rem;
  border-radius: 10px;
  overflow: hidden;
  position: sticky;
  top: 1rem;
  padding: 1rem 0.5rem;
  background: white;
}
.allProfileLists .allProfileList .allUserIndexListsItems .allUserIndexListsItem {
  display: grid;
  grid-template-columns: 1fr auto;
  justify-content: right;
  align-items: center;
  grid-gap: 0.5rem;
  margin-top: 1.5rem;
  cursor: pointer;
}
.allProfileLists .allProfileList .allUserIndexListsItems .allUserIndexListsItem i {
  display: grid;
  justify-content: center;
  align-items: center;
}
.allProfileLists .allProfileList .allUserIndexListsItems .allUserIndexListsItem i svg {
  width: 0.8rem;
  height: 0.8rem;
  fill: #444;
}
.allProfileLists .allProfileList .allUserIndexListsItems .allUserIndexListsItem a, .allProfileLists .allProfileList .allUserIndexListsItems .allUserIndexListsItem h3 {
  transition: all 0.3s ease-in-out;
  font-size: 0.9rem;
  font-weight: 700;
  color: #000;
  letter-spacing: 0.2px;
  opacity: 0.6;
}
.allProfileLists .allProfileList .allUserIndexListsItems .allUserIndexListsItem:first-child {
  margin-top: 0;
}
.allProfileLists .allProfileList .allUserIndexListsItems .userProducts {
  margin-top: 1.5rem;
}
.allProfileLists .allProfileList .allUserIndexListsItems .userProducts .slide-fade-enter-active {
  transition: all 0.3s ease-in-out;
}
.allProfileLists .allProfileList .allUserIndexListsItems .userProducts .slide-fade-leave-active {
  transition: all 0.3s ease-in-out;
}
.allProfileLists .allProfileList .allUserIndexListsItems .userProducts .slide-fade-enter {
  transform: translateY(-10px);
}
.allProfileLists .allProfileList .allUserIndexListsItems .userProducts .slide-fade-leave-to {
  transform: translateY(-10px);
}
.allProfileLists .allProfileList .allUserIndexListsItems .userProducts ul li {
  margin-top: 0.8rem;
}
.allProfileLists .allProfileList .allUserIndexListsItems .userProducts ul li a {
  font-size: 0.8rem;
  font-weight: 300;
  padding-right: 0.5rem;
  color: #000;
  letter-spacing: 0.2px;
  display: grid;
  grid-template-columns: 1.4rem 1fr;
  justify-content: right;
  align-items: center;
}
.allProfileLists .allProfileList .allUserIndexListsItems .userProducts ul li a:before {
  content: "";
  display: grid;
  width: 5px;
  height: 5px;
  border-radius: 5px;
  background: #000;
  transition: all 0.3s ease-in-out;
}
.allProfileLists .allProfileList .allUserIndexListsItems .userProducts ul li a:hover:before {
  width: 1rem;
}
.allProfileLists .allProfileList .becomeList {
  margin-top: 1rem;
  border-radius: 10px;
  position: relative;
  display: grid;
  overflow: hidden;
  background: var(--green-color);
}
.allProfileLists .allProfileList .becomeList h4 {
  display: grid;
  grid-template-columns: auto auto;
  align-items: center;
  justify-content: right;
  grid-gap: 0.5rem;
  margin: 1rem;
  font-size: 1rem;
  font-weight: 500;
  color: white;
  z-index: 20;
}
.allProfileLists .allProfileList .becomeList h4 i {
  display: grid;
  align-items: center;
}
.allProfileLists .allProfileList .becomeList h4 i svg {
  width: 1.3rem;
  height: 1.3rem;
  fill: white;
}
@media screen and (max-width: 800px) {
  .allProfileLists .showFilter {
    display: block;
  }
  .allProfileLists .allProfileList {
    width: 100%;
    overflow-y: scroll;
    display: none;
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    z-index: 1000;
    padding: 0;
    border-radius: 0;
  }
  .allProfileLists .allProfileList .showFilter {
    margin-top: 0;
    border-radius: 0;
    border-bottom: 1px solid #eee;
  }
}

.allChatProfile .success {
  background: rgba(0, 128, 0, 0.26);
  color: #006200;
  padding: 1rem;
  border-radius: 0.3rem;
  font-size: 0.85rem;
  font-weight: 300;
  margin: 1rem 0;
}
.allChatProfile .allTickets {
  border-radius: 20px;
  overflow: hidden;
  margin-bottom: 1rem;
}
.allChatProfile .allTickets .container {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-gap: 0.5rem;
}
.allChatProfile .allTickets .container .people-list {
  width: 20rem;
  background: white;
  border-radius: 20px;
  overflow: hidden;
}
.allChatProfile .allTickets .container .people-list ul {
  height: 560px;
  overflow-y: scroll;
}
.allChatProfile .allTickets .container .people-list ul li {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-gap: 1rem;
  align-items: center;
  padding: 1rem;
  cursor: pointer;
  transition: all 0.3s ease-in-out;
}
.allChatProfile .allTickets .container .people-list ul li img {
  width: 3rem;
  height: 3rem;
  object-fit: cover;
  border-radius: 100%;
}
.allChatProfile .allTickets .container .people-list ul li .about {
  padding-left: 8px;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
.allChatProfile .allTickets .container .people-list ul li .about .name {
  display: flex;
  align-items: center;
  gap: 5px;
  font-weight: 900;
  font-size: 0.75rem;
  color: #000;
  margin-bottom: 0.5rem;
}
.allChatProfile .allTickets .container .people-list ul li .about .name span {
  font-size: 0.6rem;
  font-weight: 300;
}
.allChatProfile .allTickets .container .people-list ul li .about p {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  font-weight: 300;
  font-size: 0.7rem;
  color: #444;
}
.allChatProfile .allTickets .container .people-list ul li:nth-child(even) {
  background: #f9f9f9;
}
.allChatProfile .allTickets .container .chat {
  display: grid;
  background: white;
  color: #434651;
  border-radius: 20px;
  overflow: hidden;
}
.allChatProfile .allTickets .container .chat .chat-header {
  padding: 10px;
  border-bottom: 1px solid #eee;
  display: flex;
  justify-content: space-between;
  align-items: center;
  grid-gap: 1rem;
}
.allChatProfile .allTickets .container .chat .chat-header .right {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.allChatProfile .allTickets .container .chat .chat-header .right img {
  width: 3rem;
  height: 3rem;
  object-fit: cover;
  border-radius: 100%;
}
.allChatProfile .allTickets .container .chat .chat-header .right .chat-with {
  font-weight: bold;
  font-size: 16px;
}
.allChatProfile .allTickets .container .chat .chat-header .left i {
  display: grid;
  align-items: center;
}
.allChatProfile .allTickets .container .chat .chat-header .left i svg {
  width: 1.1rem;
  height: 1.1rem;
  fill: red;
}
.allChatProfile .allTickets .container .chat .chat-history {
  padding: 15px;
  border-bottom: 2px solid white;
  overflow-y: scroll;
  height: 400px;
}
.allChatProfile .allTickets .container .chat .chat-history .message-data {
  display: flex;
  align-items: center;
  margin-bottom: 15px;
}
.allChatProfile .allTickets .container .chat .chat-history .message-data-time {
  color: #000;
  font-size: 0.6rem;
  margin-right: 5px;
}
.allChatProfile .allTickets .container .chat .chat-history .message-data-name {
  color: #000;
  font-size: 1rem;
  font-weight: 900;
}
.allChatProfile .allTickets .container .chat .chat-history ul {
  display: grid;
}
.allChatProfile .allTickets .container .chat .chat-history .message {
  color: white;
  padding: 10px 20px;
  font-size: 0.9rem;
  text-align: right;
  border-radius: 10px;
  font-weight: 900;
  margin-bottom: 30px;
  max-width: 90%;
  position: relative;
  box-shadow: 0 10px 10px rgba(0, 0, 0, 0.1);
}
.allChatProfile .allTickets .container .chat .chat-history .message i {
  display: grid;
  align-items: center;
  justify-content: left;
  margin-top: 0.3rem;
}
.allChatProfile .allTickets .container .chat .chat-history .message i svg {
  width: 1rem;
  height: 1rem;
  fill: white;
}
.allChatProfile .allTickets .container .chat .chat-history .message:after {
  bottom: 100%;
  right: 10px;
  border: solid transparent;
  content: " ";
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
  border-bottom-color: green;
  border-width: 10px;
  margin-left: -10px;
}
.allChatProfile .allTickets .container .chat .chat-history .my-message {
  float: right;
  background: green;
}
.allChatProfile .allTickets .container .chat .chat-history .other-message {
  background: var(--red-color);
}
.allChatProfile .allTickets .container .chat .chat-history .other-message:after {
  border-bottom-color: var(--red-color);
  right: auto;
  left: 1.3rem;
}
.allChatProfile .allTickets .container .chat .chat-message {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-gap: 1rem;
  align-items: center;
  background: #f5f5f5;
  padding: 10px;
}
.allChatProfile .allTickets .container .chat .chat-message .messageData {
  position: relative;
}
.allChatProfile .allTickets .container .chat .chat-message .messageData textarea {
  width: 100%;
  font-size: 1rem;
  padding: 10px;
  height: 3rem;
  border-radius: 10px;
  resize: vertical;
  background: white;
  box-shadow: 0 5px 5px rgba(0, 0, 0, 0.05);
}
.allChatProfile .allTickets .container .chat .chat-message .messageData span {
  position: absolute;
  bottom: 1rem;
  left: 0.5rem;
  background: #777;
  padding: 0.3rem 0.5rem;
  border-radius: 5px;
  font-weight: 300;
  font-size: 0.7rem;
  color: white;
}
.allChatProfile .allTickets .container .chat .chat-message .chatButtons {
  display: flex;
  gap: 0.5rem;
}
.allChatProfile .allTickets .container .chat .chat-message .chatButtons button {
  display: flex;
  gap: 0.5rem;
  font-size: 14px;
  cursor: pointer;
  font-weight: 300;
  background: white;
  color: var(--green-color);
  height: 100%;
  border: 2px solid var(--green-color);
  padding: 0.5rem 2rem;
  border-radius: 5rem;
  box-shadow: 0 5px 5px rgba(0, 0, 0, 0.05);
  position: relative;
}
.allChatProfile .allTickets .container .chat .chat-message .chatButtons button i {
  display: flex;
  justify-content: center;
  align-items: center;
}
.allChatProfile .allTickets .container .chat .chat-message .chatButtons button i svg {
  width: 1rem;
  height: 1rem;
  fill: white;
}
.allChatProfile .allTickets .container .chat .chat-message .chatButtons button:last-child {
  background: green;
  border: 2px solid green;
  color: white;
}
.allChatProfile .allTickets .container .align-left {
  justify-content: left;
  text-align: left;
}
.allChatProfile .allTickets .container .float-left {
  float: left;
  text-align: left;
}
.allChatProfile .allTickets .createFilled .alert {
  font-size: 0.8rem;
  font-weight: 500;
  color: red;
}
.allChatProfile .allTickets .createFilled .allCreatePostSubject {
  background: white;
  border-radius: 0.3rem;
  padding: 1rem;
}
.allChatProfile .allTickets .createFilled .allCreatePostSubject label {
  color: #000;
  font-weight: 500;
  font-size: 0.9rem;
}
.allChatProfile .allTickets .createFilled .allCreatePostSubject select, .allChatProfile .allTickets .createFilled .allCreatePostSubject input {
  background: white;
  border: 1px solid #DFE3E7;
  padding: 0.3rem 0.5rem;
  color: #000;
  border-radius: 0.3rem;
  font-size: 0.8rem;
  width: 100%;
  height: 2rem;
  transition: all 0.3s ease-in-out;
}
.allChatProfile .allTickets .createFilled .allCreatePostSubject select:focus, .allChatProfile .allTickets .createFilled .allCreatePostSubject input:focus {
  box-shadow: 0 3px 8px 0 rgba(0, 0, 0, 0.1);
  border: 1px solid #19bfd3;
}
.allChatProfile .allTickets .createFilled .allCreatePostSubject .allCreatePostItems {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
  grid-gap: 1rem;
  align-items: center;
}
.allChatProfile .allTickets .createFilled .allCreatePostSubject .allCreatePostItem {
  display: grid;
  grid-template-columns: 1fr;
  grid-gap: 0.5rem;
  margin-bottom: 1rem;
}
.allChatProfile .allTickets .createFilled .allCreatePostSubject .allCreatePostItem textarea {
  border: 1px solid #DFE3E7;
  padding: 0.4rem 0.5rem;
  color: #000;
  border-radius: 0.3rem;
  font-size: 0.7rem;
  width: 100%;
  height: 15rem;
  transition: all 0.3s ease-in-out;
  resize: vertical;
  outline: transparent;
}
.allChatProfile .allTickets .createFilled .allCreatePostSubject .allCreatePostItem textarea:focus {
  box-shadow: 0 3px 8px 0 rgba(0, 0, 0, 0.1);
  border: 1px solid #19bfd3;
}
.allChatProfile .allTickets .createFilled .allCreatePostSubject .grid2 {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-gap: 0.5rem;
}
.allChatProfile .allTickets .createFilled .allCreatePostSubject .sendGallery {
  background: white;
  border-radius: 0.2rem;
  display: grid;
  grid-template-columns: 1fr;
  justify-content: center;
  margin-bottom: 1rem;
}
.allChatProfile .allTickets .createFilled .allCreatePostSubject .sendGallery .getImageItem {
  min-height: 12rem;
  border-radius: 0.4rem;
  border: 2px dashed #DFE3E7;
  display: grid;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  grid-template-columns: repeat(auto-fit, minmax(10rem, auto));
  grid-gap: 1rem;
  padding: 1rem;
}
.allChatProfile .allTickets .createFilled .allCreatePostSubject .sendGallery .getImageItem span {
  color: #494f56;
  font-size: 0.7rem;
  font-weight: 300;
  text-align: center;
}
.allChatProfile .allTickets .createFilled .allCreatePostSubject .sendGallery .getImageItem .getImagePic {
  position: relative;
}
.allChatProfile .allTickets .createFilled .allCreatePostSubject .sendGallery .getImageItem .getImagePic:hover i {
  visibility: visible;
  opacity: 1;
}
.allChatProfile .allTickets .createFilled .allCreatePostSubject .sendGallery .getImageItem .getImagePic i {
  display: grid;
  justify-content: center;
  align-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 5rem;
  visibility: hidden;
  opacity: 0;
  transition: all 0.3s ease-in-out;
  background: #cbbdbd;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
}
.allChatProfile .allTickets .createFilled .allCreatePostSubject .sendGallery .getImageItem .getImagePic i svg {
  width: 1.5rem;
  height: 1.5rem;
  fill: black;
}
.allChatProfile .allTickets .createFilled .allCreatePostSubject .sendGallery .getImageItem img {
  height: 10rem;
  width: 10rem;
  object-fit: cover;
}
.allChatProfile .allTickets .createFilled .allCreatePostSubject .sendGallery .sendFileItem {
  border-radius: 0.4rem;
  display: grid;
  justify-content: center;
  align-items: center;
  grid-template-columns: 1fr;
  cursor: pointer;
  grid-gap: 1rem;
  border: 2px dashed #eee;
  background: white;
  margin-bottom: 1rem;
  padding: 1rem;
  margin-top: 0.5rem;
  position: relative;
}
.allChatProfile .allTickets .createFilled .allCreatePostSubject .sendGallery .sendFileItem .vue-dropzone {
  border-radius: 0.3rem;
  color: black;
  border: 0;
}
.allChatProfile .allTickets .createFilled .allCreatePostSubject .sendGallery .sendFileItem .vue-dropzone span {
  margin-right: 0.5rem;
  font-size: 1rem;
  font-weight: 500;
  color: black;
}
.allChatProfile .allTickets .createFilled .allCreatePostSubject .sendGallery .sendFileItem .vue-dropzone .dropzone-custom-content {
  text-align: center;
}
.allChatProfile .allTickets .createFilled .allCreatePostSubject .sendGallery .sendFileItem .vue-dropzone .dropzone-custom-title {
  margin-top: 0;
  color: orange;
  font-family: "irsans";
  font-style: normal;
  font-weight: 900;
  font-size: 1rem;
}
.allChatProfile .allTickets .createFilled .allCreatePostSubject .sendGallery .sendFileItem .vue-dropzone .subtitle {
  margin-top: 1rem;
  color: #000;
  font-family: "irsans";
  font-style: normal;
  font-weight: 500;
  font-size: 0.8rem;
}
.allChatProfile .allTickets .createFilled .allCreatePostSubject .sendGallery .sendFileItem .sendFileItemPic {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 1rem;
  margin: auto;
}
.allChatProfile .allTickets .createFilled .allCreatePostSubject .sendGallery .sendFileItem .sendFileItemPic img {
  object-fit: contain;
  width: 7rem;
  height: 100%;
}
.allChatProfile .allTickets .createFilled .allCreatePostSubject .button, .allChatProfile .allTickets .createFilled .allCreatePostSubject .btnClose {
  padding: 0.5rem 1rem;
  border-radius: 0.3rem;
  background-color: #19bfd3;
  color: white;
  box-shadow: 0 2px 4px 0 rgba(90, 141, 238, 0.5);
  transition: all 0.3s ease-in-out;
}
.allChatProfile .allTickets .createFilled .allCreatePostSubject .button:hover, .allChatProfile .allTickets .createFilled .allCreatePostSubject .btnClose:hover {
  background-color: blue;
}
.allChatProfile .allTickets .createFilled .allCreatePostSubject .btnClose {
  margin-right: 1rem;
  background: #ff5a5a;
}
.allChatProfile .allTickets .createFilled .allCreatePostSubject .btnClose:hover {
  background-color: red;
}
.allChatProfile .allTickets .createFilled .allCreatePostDetails {
  width: 25rem;
}
.allChatProfile .allTickets .createFilled .allCreatePostDetails .allCreatePostDetail {
  box-shadow: 0 10px 15px -5px rgba(172, 172, 172, 0.1);
  margin-bottom: 1rem;
}
.allChatProfile .allTickets .createFilled .allCreatePostDetails .allCreatePostDetail .allCreatePostDetailItemsTitle {
  background: white;
  display: grid;
  grid-template-columns: auto auto;
  justify-content: space-between;
  align-items: center;
  color: #000;
  font-weight: 500;
  font-size: 0.85rem;
  padding: 0.8rem;
  letter-spacing: 0.5px;
  border-radius: 0.3rem;
  z-index: 10;
}
.allChatProfile .allTickets .createFilled .allCreatePostDetails .allCreatePostDetail .allCreatePostDetailItemsTitle svg {
  width: 0.75rem;
  height: 0.75rem;
  fill: #000;
}
.allChatProfile .allTickets .createFilled .allCreatePostDetails .allCreatePostDetail .allCreatePostDetailItems {
  background: white;
  width: 100%;
  border-bottom-left-radius: 0.3rem;
  border-bottom-right-radius: 0.3rem;
  padding: 0.5rem;
  margin-top: -0.3rem;
  z-index: 2;
}
.allChatProfile .allTickets .createFilled .allCreatePostDetails .allCreatePostDetail .allCreatePostDetailItems .allCreatePostDetailItem {
  display: grid;
  grid-template-columns: 1fr;
  grid-gap: 0.5rem;
  margin-top: 1rem;
}
.allChatProfile .allTickets .createFilled .allCreatePostDetails .allCreatePostDetail .allCreatePostDetailItems .allCreatePostDetailItem .grid2 {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-gap: 0.5rem;
}
.allChatProfile .allTickets .createFilled .allCreatePostDetails .allCreatePostDetail .allCreatePostDetailItems .allCreatePostDetailItem label {
  color: #000;
  font-weight: 500;
  font-size: 0.8rem;
}
.allChatProfile .allTickets .createFilled .allCreatePostDetails .allCreatePostDetail .allCreatePostDetailItems .allCreatePostDetailItem input, .allChatProfile .allTickets .createFilled .allCreatePostDetails .allCreatePostDetail .allCreatePostDetailItems .allCreatePostDetailItem select {
  background: white;
  border: 1px solid #DFE3E7;
  padding: 0.4rem 0.5rem;
  color: #000;
  border-radius: 0.3rem;
  font-size: 0.7rem;
  width: 100%;
  transition: all 0.3s ease-in-out;
  resize: vertical;
  outline: transparent;
}
.allChatProfile .allTickets .createFilled .allCreatePostDetails .allCreatePostDetail .allCreatePostDetailItems .allCreatePostDetailItem input:focus, .allChatProfile .allTickets .createFilled .allCreatePostDetails .allCreatePostDetail .allCreatePostDetailItems .allCreatePostDetailItem select:focus {
  box-shadow: 0 3px 8px 0 rgba(0, 0, 0, 0.1);
  border: 1px solid #19bfd3;
}
.allChatProfile .allTickets .createFilled .allCreatePostDetails .allCreatePostDetail .allCreatePostDetailItems .allCreatePostDetailItem:first-child {
  margin-top: 0;
}
.allChatProfile .allTickets .createFilled .allCreatePostDetails .allCreatePostDetail .allCreatePostDetailItems .select2-container {
  width: 100% !important;
}
.allChatProfile .allTickets .createFilled .allCreatePostDetails .allCreatePostDetail .allCreatePostDetailItems .costCheck {
  display: grid;
  grid-template-columns: auto auto;
  align-items: center;
  justify-content: space-between;
  grid-gap: 0.5rem;
  padding: 0 0.5rem;
  border-radius: 0.4rem;
  height: 3rem;
  color: #000;
  cursor: pointer;
  font-size: 0.85rem;
  font-weight: 300;
  margin-top: 1rem;
}
@supports (-webkit-appearance: none) or (-moz-appearance: none) {
  .allChatProfile .allTickets .createFilled .allCreatePostDetails .allCreatePostDetail .allCreatePostDetailItems .costCheck input[type=checkbox],
  .allChatProfile .allTickets .createFilled .allCreatePostDetails .allCreatePostDetail .allCreatePostDetailItems .costCheck input[type=radio] {
    --active: #275EFE;
    --active-inner: #fff;
    --focus: 2px rgba(39, 94, 254, .3);
    --border: #BBC1E1;
    --border-hover: #275EFE;
    --background: #fff;
    --disabled: #F6F8FF;
    --disabled-inner: #E1E6F9;
    -webkit-appearance: none;
    -moz-appearance: none;
    height: 21px;
    outline: none;
    display: inline-block;
    vertical-align: top;
    position: relative;
    margin: 0;
    cursor: pointer;
    border: 1px solid var(--bc, var(--border));
    background: var(--b, var(--background));
    transition: background 0.3s, border-color 0.3s, box-shadow 0.2s;
  }
  .allChatProfile .allTickets .createFilled .allCreatePostDetails .allCreatePostDetail .allCreatePostDetailItems .costCheck input[type=checkbox]:after,
  .allChatProfile .allTickets .createFilled .allCreatePostDetails .allCreatePostDetail .allCreatePostDetailItems .costCheck input[type=radio]:after {
    content: "";
    display: block;
    left: 0;
    top: 0;
    position: absolute;
    transition: transform var(--d-t) var(--d-t-e, ease), opacity var(--d-o, 0.2s);
  }
  .allChatProfile .allTickets .createFilled .allCreatePostDetails .allCreatePostDetail .allCreatePostDetailItems .costCheck input[type=checkbox]:checked,
  .allChatProfile .allTickets .createFilled .allCreatePostDetails .allCreatePostDetail .allCreatePostDetailItems .costCheck input[type=radio]:checked {
    --b: var(--active);
    --bc: var(--active);
    --d-o: .3s;
    --d-t: .6s;
    --d-t-e: cubic-bezier(.2, .85, .32, 1.2);
  }
  .allChatProfile .allTickets .createFilled .allCreatePostDetails .allCreatePostDetail .allCreatePostDetailItems .costCheck input[type=checkbox]:disabled,
  .allChatProfile .allTickets .createFilled .allCreatePostDetails .allCreatePostDetail .allCreatePostDetailItems .costCheck input[type=radio]:disabled {
    --b: var(--disabled);
    cursor: not-allowed;
    opacity: 0.9;
  }
  .allChatProfile .allTickets .createFilled .allCreatePostDetails .allCreatePostDetail .allCreatePostDetailItems .costCheck input[type=checkbox]:disabled:checked,
  .allChatProfile .allTickets .createFilled .allCreatePostDetails .allCreatePostDetail .allCreatePostDetailItems .costCheck input[type=radio]:disabled:checked {
    --b: var(--disabled-inner);
    --bc: var(--border);
  }
  .allChatProfile .allTickets .createFilled .allCreatePostDetails .allCreatePostDetail .allCreatePostDetailItems .costCheck input[type=checkbox]:disabled + label,
  .allChatProfile .allTickets .createFilled .allCreatePostDetails .allCreatePostDetail .allCreatePostDetailItems .costCheck input[type=radio]:disabled + label {
    cursor: not-allowed;
  }
  .allChatProfile .allTickets .createFilled .allCreatePostDetails .allCreatePostDetail .allCreatePostDetailItems .costCheck input[type=checkbox]:hover:not(:checked):not(:disabled),
  .allChatProfile .allTickets .createFilled .allCreatePostDetails .allCreatePostDetail .allCreatePostDetailItems .costCheck input[type=radio]:hover:not(:checked):not(:disabled) {
    --bc: var(--border-hover);
  }
  .allChatProfile .allTickets .createFilled .allCreatePostDetails .allCreatePostDetail .allCreatePostDetailItems .costCheck input[type=checkbox]:focus,
  .allChatProfile .allTickets .createFilled .allCreatePostDetails .allCreatePostDetail .allCreatePostDetailItems .costCheck input[type=radio]:focus {
    box-shadow: 0 0 0 var(--focus);
  }
  .allChatProfile .allTickets .createFilled .allCreatePostDetails .allCreatePostDetail .allCreatePostDetailItems .costCheck input[type=checkbox]:not(.switch),
  .allChatProfile .allTickets .createFilled .allCreatePostDetails .allCreatePostDetail .allCreatePostDetailItems .costCheck input[type=radio]:not(.switch) {
    width: 21px;
  }
  .allChatProfile .allTickets .createFilled .allCreatePostDetails .allCreatePostDetail .allCreatePostDetailItems .costCheck input[type=checkbox]:not(.switch):after,
  .allChatProfile .allTickets .createFilled .allCreatePostDetails .allCreatePostDetail .allCreatePostDetailItems .costCheck input[type=radio]:not(.switch):after {
    opacity: var(--o, 0);
  }
  .allChatProfile .allTickets .createFilled .allCreatePostDetails .allCreatePostDetail .allCreatePostDetailItems .costCheck input[type=checkbox]:not(.switch):checked,
  .allChatProfile .allTickets .createFilled .allCreatePostDetails .allCreatePostDetail .allCreatePostDetailItems .costCheck input[type=radio]:not(.switch):checked {
    --o: 1;
  }
  .allChatProfile .allTickets .createFilled .allCreatePostDetails .allCreatePostDetail .allCreatePostDetailItems .costCheck input[type=checkbox] + label,
  .allChatProfile .allTickets .createFilled .allCreatePostDetails .allCreatePostDetail .allCreatePostDetailItems .costCheck input[type=radio] + label {
    font-size: 14px;
    line-height: 21px;
    display: inline-block;
    vertical-align: top;
    cursor: pointer;
    margin-left: 4px;
  }
  .allChatProfile .allTickets .createFilled .allCreatePostDetails .allCreatePostDetail .allCreatePostDetailItems .costCheck input[type=checkbox]:not(.switch) {
    border-radius: 7px;
  }
  .allChatProfile .allTickets .createFilled .allCreatePostDetails .allCreatePostDetail .allCreatePostDetailItems .costCheck input[type=checkbox]:not(.switch):after {
    width: 5px;
    height: 9px;
    border: 2px solid var(--active-inner);
    border-top: 0;
    border-left: 0;
    left: 7px;
    top: 4px;
    transform: rotate(var(--r, 20deg));
  }
  .allChatProfile .allTickets .createFilled .allCreatePostDetails .allCreatePostDetail .allCreatePostDetailItems .costCheck input[type=checkbox]:not(.switch):checked {
    --r: 43deg;
  }
  .allChatProfile .allTickets .createFilled .allCreatePostDetails .allCreatePostDetail .allCreatePostDetailItems .costCheck input[type=checkbox].switch {
    width: 38px;
    border-radius: 11px;
  }
  .allChatProfile .allTickets .createFilled .allCreatePostDetails .allCreatePostDetail .allCreatePostDetailItems .costCheck input[type=checkbox].switch:after {
    left: 2px;
    top: 2px;
    border-radius: 50%;
    width: 15px;
    height: 15px;
    background: var(--ab, var(--border));
    transform: translateX(var(--x, 0));
  }
  .allChatProfile .allTickets .createFilled .allCreatePostDetails .allCreatePostDetail .allCreatePostDetailItems .costCheck input[type=checkbox].switch:checked {
    --ab: var(--active-inner);
    --x: 17px;
  }
  .allChatProfile .allTickets .createFilled .allCreatePostDetails .allCreatePostDetail .allCreatePostDetailItems .costCheck input[type=checkbox].switch:disabled:not(:checked):after {
    opacity: 0.6;
  }
  .allChatProfile .allTickets .createFilled .allCreatePostDetails .allCreatePostDetail .allCreatePostDetailItems .costCheck input[type=radio] {
    border-radius: 50%;
  }
  .allChatProfile .allTickets .createFilled .allCreatePostDetails .allCreatePostDetail .allCreatePostDetailItems .costCheck input[type=radio]:after {
    width: 19px;
    height: 19px;
    border-radius: 50%;
    background: var(--active-inner);
    opacity: 0;
    transform: scale(var(--s, 0.7));
  }
  .allChatProfile .allTickets .createFilled .allCreatePostDetails .allCreatePostDetail .allCreatePostDetailItems .costCheck input[type=radio]:checked {
    --s: .5;
  }
}
.allChatProfile .allTickets .createFilled .allCreatePostDetails .allCreatePostDetail .allCreatePostDetailItems .costCheck input[type=number] {
  border: 1px solid #DFE3E7;
  width: 3rem;
  padding: 0.3rem;
  color: #000;
  border-radius: 0.3rem;
  font-size: 0.7rem;
  transition: all 0.3s ease-in-out;
  resize: vertical;
}
.allChatProfile .allTickets .createFilled .allCreatePostDetails .allCreatePostDetail .allCreatePostDetailItems .costCheck input[type=number]:focus {
  box-shadow: 0 3px 8px 0 rgba(0, 0, 0, 0.1);
  border: 1px solid #19bfd3;
}
.allChatProfile .allTickets .createFilled .allCreatePostDetails .allCreatePostDetail:nth-child(3) {
  position: sticky;
  top: 5.5rem;
  margin-bottom: 0;
}
.allChatProfile .sendFiles {
  background: rgba(0, 0, 0, 0.5);
  z-index: 4000;
  position: fixed;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-columns: 1fr;
  justify-content: center;
}
.allChatProfile .sendFiles .sendPos {
  width: 40%;
  padding: 1rem;
  margin: auto;
  background: white;
  border-radius: 0.4rem;
  position: relative;
}
.allChatProfile .sendFiles .sendPos .sendGallery {
  background: white;
  border-radius: 0.2rem;
  display: grid;
  grid-template-columns: 1fr;
  justify-content: center;
}
.allChatProfile .sendFiles .sendPos .sendGallery .getImageItem {
  min-height: 12rem;
  border-radius: 0.4rem;
  border: 2px dashed #DFE3E7;
  display: grid;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  grid-template-columns: repeat(auto-fit, minmax(10rem, auto));
  grid-gap: 1rem;
  padding: 1rem;
}
.allChatProfile .sendFiles .sendPos .sendGallery .getImageItem span {
  color: #494f56;
  font-size: 0.7rem;
  font-weight: 300;
  text-align: center;
}
.allChatProfile .sendFiles .sendPos .sendGallery .getImageItem .getImagePic {
  position: relative;
}
.allChatProfile .sendFiles .sendPos .sendGallery .getImageItem .getImagePic:hover i {
  visibility: visible;
  opacity: 1;
}
.allChatProfile .sendFiles .sendPos .sendGallery .getImageItem .getImagePic i {
  display: grid;
  justify-content: center;
  align-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 5rem;
  visibility: hidden;
  opacity: 0;
  transition: all 0.3s ease-in-out;
  background: #cbbdbd;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
}
.allChatProfile .sendFiles .sendPos .sendGallery .getImageItem .getImagePic i svg {
  width: 1.5rem;
  height: 1.5rem;
  fill: black;
}
.allChatProfile .sendFiles .sendPos .sendGallery .getImageItem img {
  height: 10rem;
  width: 10rem;
  object-fit: cover;
}
.allChatProfile .sendFiles .sendPos .sendGallery .sendFileItem {
  border-radius: 0.4rem;
  display: grid;
  justify-content: center;
  align-items: center;
  grid-template-columns: 1fr;
  cursor: pointer;
  grid-gap: 1rem;
  border: 2px dashed #eee;
  background: white;
  margin-bottom: 1rem;
  padding: 1rem;
  margin-top: 0.5rem;
  position: relative;
}
.allChatProfile .sendFiles .sendPos .sendGallery .sendFileItem .vue-dropzone {
  border-radius: 0.3rem;
  color: black;
  border: 0;
}
.allChatProfile .sendFiles .sendPos .sendGallery .sendFileItem .vue-dropzone span {
  margin-right: 0.5rem;
  font-size: 1rem;
  font-weight: 500;
  color: black;
}
.allChatProfile .sendFiles .sendPos .sendGallery .sendFileItem .vue-dropzone .dropzone-custom-content {
  text-align: center;
}
.allChatProfile .sendFiles .sendPos .sendGallery .sendFileItem .vue-dropzone .dropzone-custom-title {
  margin-top: 0;
  color: orange;
  font-family: "irsans";
  font-style: normal;
  font-weight: 900;
  font-size: 1rem;
}
.allChatProfile .sendFiles .sendPos .sendGallery .sendFileItem .vue-dropzone .subtitle {
  margin-top: 1rem;
  color: #000;
  font-family: "irsans";
  font-style: normal;
  font-weight: 500;
  font-size: 0.8rem;
}
.allChatProfile .sendFiles .sendPos .sendGallery .sendFileItem .sendFileItemPic {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 1rem;
  margin: auto;
}
.allChatProfile .sendFiles .sendPos .sendGallery .sendFileItem .sendFileItemPic img {
  object-fit: contain;
  width: 7rem;
  height: 100%;
}
@media screen and (max-width: 800px) {
  .allChatProfile .allTickets .container {
    display: block;
  }
  .allChatProfile .allTickets .container .people-list {
    width: 100%;
    border-left: 0;
    border-bottom: 1px solid #eee;
  }
  .allChatProfile .allTickets .container .chat {
    display: grid;
    background: white;
    color: #434651;
  }
  .allChatProfile .allTickets .container .chat .chat-message .chatButtons {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-gap: 0.5rem;
  }
  .allChatProfile .allTickets .container .chat .chat-message .chatButtons button {
    font-size: 0.7rem;
    padding: 0.5rem;
  }
  .allChatProfile .allTickets .container .chat .chat-message .chatButtons button i svg {
    width: 0.6rem;
    height: 0.6rem;
  }
  .allChatProfile .sendFiles .sendPos {
    width: 90%;
  }
}

.profileIndexTicket .tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin-bottom: 1rem;
}
.profileIndexTicket .tabs .tab {
  border: 2px solid rgb(238, 238, 241);
  border-radius: 5rem;
  font-size: 1rem;
  font-weight: 700;
  color: #000;
  text-align: center;
  padding: 0.5rem 1rem;
  cursor: pointer;
}
.profileIndexTicket .tabs .active {
  background: green;
  border: 2px solid green;
  color: white;
}
.profileIndexTicket h6 {
  font-size: 1.2rem;
  font-weight: 500;
  color: #000;
  margin-bottom: 1rem;
}
.profileIndexTicket .alert {
  background: rgba(0, 128, 0, 0.26);
  color: #006200;
  padding: 1rem;
  border-radius: 0.3rem;
  font-size: 0.85rem;
  font-weight: 300;
  margin: 1rem 0;
}
.profileIndexTicket .referralCode {
  background: white;
  border-radius: 0.3rem;
  box-shadow: 0 0 10px #eee;
  margin-bottom: 1rem;
  padding: 1rem;
  display: grid;
  grid-template-columns: auto 1fr;
  grid-gap: 1rem;
  align-items: center;
}
.profileIndexTicket .referralCode span {
  font-size: 0.9rem;
  font-weight: 300;
  color: #000;
}
.profileIndexTicket .referralCode h5 {
  font-size: 0.9rem;
  font-weight: 300;
  color: #000;
  padding: 0.5rem;
  border: 1px solid #eee;
  border-radius: 5px;
}
.profileIndexTicket .containerSub {
  background: white;
  border-radius: 0.3rem;
  box-shadow: 0 0 10px #eee;
  margin-bottom: 1rem;
  padding: 1rem;
  overflow: hidden;
}
.profileIndexTicket .containerSub table {
  margin-bottom: 0;
}
.profileIndexTicket .emptyUser {
  margin: 1rem 0;
  font-size: 1.1rem;
  font-weight: 700;
  color: green;
  text-align: center;
}
.profileIndexTicket table {
  background: white;
  border-radius: 20px;
  width: 100%;
  border: 1px solid #eee;
  margin-bottom: 1rem;
}
.profileIndexTicket table tr {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(1px, 1fr));
  align-items: center;
  grid-gap: 1rem;
  padding: 1rem;
}
.profileIndexTicket table tr th {
  font-weight: 700;
  color: #000;
  font-size: 0.85rem;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  display: grid;
  align-items: center;
  justify-content: center;
}
.profileIndexTicket table tr td {
  font-weight: 300;
  font-size: 0.85rem;
  text-align: center;
  color: #000;
}
.profileIndexTicket table tr td svg {
  fill: #000;
  width: 1rem;
  height: 1rem;
  cursor: pointer;
}
.profileIndexTicket table tr td img {
  width: 2.5rem;
  height: 2.5rem;
  object-fit: cover;
  border-radius: 5rem;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
.profileIndexTicket table tr td a {
  display: grid;
  align-items: center;
}
.profileIndexTicket table tr td a svg {
  margin-left: 0.5rem;
}
.profileIndexTicket table tr .buttons button {
  font-size: 0.9rem;
  padding: 0.2rem;
  border-radius: 5px;
  color: white;
  font-weight: 900;
  width: 100%;
  background: var(--green-color);
}
.profileIndexTicket table tr:nth-child(even) {
  background: #f5f5f5;
}
.profileIndexTicket .allTickets .container {
  border-radius: 20px;
  background: white;
}
.profileIndexTicket .allTickets .container .chat {
  display: grid;
  color: #434651;
}
.profileIndexTicket .allTickets .container .chat .chat-header {
  padding: 1rem;
  border-bottom: 1px solid rgb(238, 238, 241);
  display: flex;
  justify-content: space-between;
  align-items: center;
  grid-gap: 0.5rem;
}
.profileIndexTicket .allTickets .container .chat .chat-header .right {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.profileIndexTicket .allTickets .container .chat .chat-header .right img {
  width: 3rem;
  height: 3rem;
  object-fit: cover;
  border-radius: 100%;
}
.profileIndexTicket .allTickets .container .chat .chat-header .right .chat-with {
  font-weight: bold;
  font-size: 16px;
}
.profileIndexTicket .allTickets .container .chat .chat-header .left i {
  display: grid;
  align-items: center;
  cursor: pointer;
}
.profileIndexTicket .allTickets .container .chat .chat-header .left i svg {
  width: 1.5rem;
  height: 1.5rem;
  fill: red;
}
.profileIndexTicket .allTickets .container .chat .chat-history {
  padding: 15px;
  border-bottom: 2px solid white;
  overflow-y: scroll;
  height: 80vh;
}
.profileIndexTicket .allTickets .container .chat .chat-history .message-data {
  display: flex;
  align-items: center;
  margin-bottom: 15px;
}
.profileIndexTicket .allTickets .container .chat .chat-history .message-data-time {
  color: #000;
  font-size: 0.6rem;
  margin-right: 5px;
}
.profileIndexTicket .allTickets .container .chat .chat-history .message-data-name {
  color: #000;
  font-size: 1rem;
  font-weight: 900;
}
.profileIndexTicket .allTickets .container .chat .chat-history ul {
  display: grid;
}
.profileIndexTicket .allTickets .container .chat .chat-history .message {
  color: white;
  padding: 10px 20px;
  font-size: 0.9rem;
  text-align: right;
  border-radius: 10px;
  font-weight: 900;
  margin-bottom: 30px;
  max-width: 90%;
  position: relative;
  box-shadow: 0 10px 10px rgba(0, 0, 0, 0.1);
}
.profileIndexTicket .allTickets .container .chat .chat-history .message i {
  display: grid;
  align-items: center;
  justify-content: left;
  margin-top: 0.3rem;
}
.profileIndexTicket .allTickets .container .chat .chat-history .message i svg {
  width: 1rem;
  height: 1rem;
  fill: white;
}
.profileIndexTicket .allTickets .container .chat .chat-history .message:after {
  bottom: 100%;
  right: 7%;
  border: solid transparent;
  content: " ";
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
  border-bottom-color: green;
  border-width: 10px;
  margin-left: -10px;
}
.profileIndexTicket .allTickets .container .chat .chat-history .my-message {
  float: right;
  background: green;
}
.profileIndexTicket .allTickets .container .chat .chat-history .other-message {
  background: var(--red-color);
}
.profileIndexTicket .allTickets .container .chat .chat-history .other-message:after {
  border-bottom-color: var(--red-color);
  right: auto;
  left: 1.3rem;
}
.profileIndexTicket .allTickets .container .chat .chat-message {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-gap: 1rem;
  align-items: center;
  background: #f5f5f5;
  padding: 10px;
}
.profileIndexTicket .allTickets .container .chat .chat-message .messageData {
  position: relative;
}
.profileIndexTicket .allTickets .container .chat .chat-message .messageData textarea {
  width: 100%;
  font-size: 1rem;
  padding: 10px;
  height: 3rem;
  border-radius: 10px;
  resize: vertical;
  background: white;
  box-shadow: 0 5px 5px rgba(0, 0, 0, 0.05);
}
.profileIndexTicket .allTickets .container .chat .chat-message .messageData span {
  position: absolute;
  bottom: 1rem;
  left: 0.5rem;
  background: #777;
  padding: 0.3rem 0.5rem;
  border-radius: 5px;
  font-weight: 300;
  font-size: 0.7rem;
  color: white;
}
.profileIndexTicket .allTickets .container .chat .chat-message .chatButtons {
  display: flex;
  gap: 0.5rem;
}
.profileIndexTicket .allTickets .container .chat .chat-message .chatButtons button {
  display: flex;
  gap: 0.5rem;
  font-size: 14px;
  cursor: pointer;
  font-weight: 300;
  background: white;
  color: var(--green-color);
  height: 100%;
  border: 2px solid var(--green-color);
  padding: 0.5rem 2rem;
  border-radius: 5rem;
  box-shadow: 0 5px 5px rgba(0, 0, 0, 0.05);
  position: relative;
}
.profileIndexTicket .allTickets .container .chat .chat-message .chatButtons button i {
  display: flex;
  justify-content: center;
  align-items: center;
}
.profileIndexTicket .allTickets .container .chat .chat-message .chatButtons button i svg {
  width: 1rem;
  height: 1rem;
  fill: white;
}
.profileIndexTicket .allTickets .container .chat .chat-message .chatButtons button:last-child {
  background: green;
  border: 2px solid green;
  color: white;
}
.profileIndexTicket .allTickets .container .align-left {
  justify-content: left;
  text-align: left;
}
.profileIndexTicket .allTickets .container .float-left {
  float: left;
  text-align: left;
}
.profileIndexTicket .sendFiles {
  background: rgba(0, 0, 0, 0.5);
  z-index: 4000;
  position: fixed;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-columns: 1fr;
  justify-content: center;
}
.profileIndexTicket .sendFiles .sendPos {
  width: 40%;
  padding: 1rem;
  margin: auto;
  background: white;
  border-radius: 0.4rem;
  position: relative;
}
.profileIndexTicket .sendFiles .sendPos .sendImage {
  background: white;
  border-radius: 10px;
  overflow: hidden;
  display: grid;
  grid-template-columns: 1fr;
  justify-content: center;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
  margin-top: 1rem;
}
.profileIndexTicket .sendFiles .sendPos .sendImage .dropify-wrapper {
  height: 100px;
  border: 1px solid #eee !important;
}
.profileIndexTicket .sendFiles .sendPos .sendImage .dropify-wrapper .file-icon:before {
  opacity: 0 !important;
  position: absolute !important;
  top: 0 !important;
  visibility: hidden !important;
}
.profileIndexTicket .sendFiles .sendPos .sendImage .dropify-wrapper .dropify-message {
  position: relative !important;
  top: auto !important;
  margin-top: 2rem;
}
.profileIndexTicket .sendFiles .sendPos .sendImage .dropify-wrapper .dropify-message p {
  margin: 0;
  font-size: 1rem;
  font-family: irsans;
  color: rgba(0, 128, 0, 0.5098039216);
}
.profileIndexTicket .createTicket {
  padding: 1rem;
  background: white;
  border-radius: 5px;
}
.profileIndexTicket .createTicket .bodyLabel {
  display: grid;
  grid-template-columns: 1fr;
  grid-gap: 0.5rem;
  font-size: 0.9rem;
  font-weight: 300;
  color: #000;
  margin-top: 1rem;
}
.profileIndexTicket .createTicket .bodyLabel input, .profileIndexTicket .createTicket .bodyLabel select, .profileIndexTicket .createTicket .bodyLabel textarea {
  background: #f9f9f9;
  border: 1px solid rgb(238, 238, 241);
  padding: 0.8rem;
  color: #000;
  border-radius: 5px;
  font-size: 0.9rem;
  font-weight: 300;
  width: 100%;
  transition: all 0.3s ease-in-out;
}
.profileIndexTicket .createTicket .buttons .submit {
  font-size: 0.9rem;
  font-weight: 500;
  color: white;
  text-align: center;
  width: 100%;
  background: green;
  padding: 0.5rem 1rem;
  border-radius: 10px;
  margin-top: 1rem;
  transition: all 0.3s ease-in-out;
}
.profileIndexTicket .createTicket .sendImage {
  background: #f9f9f9;
  border: 1px solid rgb(238, 238, 241);
  border-radius: 10px;
  overflow: hidden;
  display: grid;
  grid-template-columns: 1fr;
  justify-content: center;
  margin-top: 1rem;
}
.profileIndexTicket .createTicket .sendImage .dropify-wrapper {
  border: 1px solid #eee !important;
  display: grid;
  align-items: center;
}
.profileIndexTicket .createTicket .sendImage .dropify-wrapper .file-icon:before {
  display: none !important;
}
.profileIndexTicket .createTicket .sendImage .dropify-wrapper .dropify-message {
  position: relative !important;
  top: auto !important;
}
.profileIndexTicket .createTicket .sendImage .dropify-wrapper .dropify-message p {
  margin: 0;
  font-size: 1rem;
  color: var(--green-color);
}
.profileIndexTicket .createTicket .sendImage .dropify-wrapper:hover {
  background-image: none;
  background-color: #f5f5f5;
}
.profileIndexTicket .popUp {
  background: rgba(0, 0, 0, 0.5);
  z-index: 4000;
  position: fixed;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-columns: 1fr;
  justify-content: center;
}
.profileIndexTicket .popUp .popUpItem {
  width: 40%;
  margin: auto;
  background: white;
  border-radius: 0.4rem;
  position: relative;
  padding: 1rem;
}
.profileIndexTicket .popUp .popUpItem .title {
  font-size: 1.2rem;
  font-weight: 500;
  color: #000;
  text-align: center;
}
.profileIndexTicket .popUp .popUpItem p {
  margin-top: 0.5rem;
  font-size: 1rem;
  font-weight: 300;
  color: #000;
  text-align: center;
}
.profileIndexTicket .popUp .popUpItem .buttonsPop {
  display: grid;
  grid-template-columns: auto auto;
  justify-content: center;
  align-items: center;
  grid-gap: 1rem;
  margin-top: 2rem;
}
.profileIndexTicket .popUp .popUpItem .buttonsPop button {
  font-size: 0.9rem;
  padding: 0.3rem 1rem;
  border-radius: 5px;
  background: green;
  color: white;
}
.profileIndexTicket .popUp .popUpItem .buttonsPop button:nth-child(2) {
  background: red;
}
.profileIndexTicket .showTicket {
  background: rgba(0, 0, 0, 0.5);
  z-index: 4000;
  position: fixed;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-columns: 1fr;
  justify-content: center;
  overflow-y: scroll;
}
.profileIndexTicket .showTicket .ticketData {
  width: 40%;
  margin: auto;
  background: white;
  border-radius: 0.4rem;
  position: relative;
  padding: 1rem;
}
.profileIndexTicket .showTicket .ticketData .itemsAnswer {
  margin-top: 2rem;
}
.profileIndexTicket .showTicket .ticketData h4 {
  font-size: 0.9rem;
  font-weight: 500;
  color: #000;
  margin-bottom: 0.5rem;
}
.profileIndexTicket .showTicket .ticketData p {
  padding: 0.5rem;
  background: #f5f5f5;
  border-radius: 5px;
  font-size: 0.85rem;
  font-weight: 300;
  color: #000;
}
.profileIndexTicket .showTicket .ticketData .buttonsPop {
  display: grid;
  grid-template-columns: auto auto;
  justify-content: center;
  align-items: center;
  grid-gap: 1rem;
  margin-top: 2rem;
}
.profileIndexTicket .showTicket .ticketData .buttonsPop button {
  font-size: 0.9rem;
  padding: 0.3rem 1rem;
  border-radius: 5px;
  background: green;
  color: white;
}
.profileIndexTicket .showTicket .ticketData .buttonsPop button:nth-child(2) {
  background: red;
}
@media screen and (max-width: 700px) {
  .profileIndexTicket {
    padding: 0;
  }
  .profileIndexTicket .allTickets .container {
    display: block;
  }
  .profileIndexTicket .allTickets .container .people-list {
    border-left: 0;
    width: 100%;
    border-bottom: 1px solid #eee;
  }
  .profileIndexTicket .allTickets .container .chat {
    display: grid;
    background: white;
    color: #434651;
  }
  .profileIndexTicket .allTickets .container .chat .chat-message .chatButtons {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-gap: 0.5rem;
  }
  .profileIndexTicket .allTickets .container .chat .chat-message .chatButtons button {
    font-size: 0.7rem;
    padding: 0.5rem;
  }
  .profileIndexTicket .allTickets .container .chat .chat-message .chatButtons button i svg {
    width: 0.6rem;
    height: 0.6rem;
  }
  .profileIndexTicket .sendFiles .sendPos {
    width: 90%;
  }
  .profileIndexTicket .titleTicket h1 {
    font-size: 0.9rem;
  }
  .profileIndexTicket .titleTicket button {
    font-size: 0.8rem;
  }
}

.allVipIndex {
  margin-left: 1rem;
}
.allVipIndex .success {
  background: rgba(0, 128, 0, 0.26);
  color: #006200;
  padding: 1rem;
  border-radius: 0.3rem;
  font-size: 0.85rem;
  font-weight: 300;
  margin-bottom: 1rem;
}
.allVipIndex .error {
  color: red;
  background: rgba(255, 0, 0, 0.1);
  padding: 1rem;
  border-radius: 0.3rem;
  font-size: 0.85rem;
  font-weight: 300;
  margin-bottom: 1rem;
}
.allVipIndex .chargePrice {
  background: white;
  margin-top: 1rem;
  border: 1px solid #eee;
  border-radius: 10px;
  padding: 1rem;
  overflow: hidden;
}
.allVipIndex .chargePrice form {
  text-align: center;
}
.allVipIndex .chargePrice form .top .right1 {
  font-size: 0.9rem;
  font-weight: 500;
  color: #000;
}
.allVipIndex .chargePrice form .top input {
  border: 1px solid #eee;
  padding: 0.3rem 0.5rem;
  color: #000;
  border-radius: 5px;
  font-size: 1rem;
  width: 15rem;
  transition: all 0.3s ease-in-out;
}
.allVipIndex .chargePrice form .top input:focus {
  box-shadow: 0 3px 8px 0 rgba(0, 0, 0, 0.1);
  border: 1px solid #19bfd3;
}
.allVipIndex .chargePrice form p {
  margin-top: 1rem;
  font-size: 1rem;
  font-weight: 500;
  color: red;
}
.allVipIndex .chargePrice form .gateItems {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem;
  margin: 1rem 0;
}
.allVipIndex .chargePrice form .gateItems .gateItem {
  display: grid;
  justify-content: center;
  padding: 0.5rem;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  border-radius: 10px;
  cursor: pointer;
  border: 2px solid #eee;
  filter: grayscale(1);
  transition: all 0.3s ease-in-out;
}
.allVipIndex .chargePrice form .gateItems .gateItem img {
  height: 3.5rem;
  width: 3.5rem;
  object-fit: contain;
}
.allVipIndex .chargePrice form .gateItems .gateItem:hover {
  filter: grayscale(0);
}
.allVipIndex .chargePrice form .gateItems .active {
  border: 2px solid var(--green-color);
  filter: grayscale(0);
}
.allVipIndex .chargePrice form button {
  font-size: 0.9rem;
  font-weight: 300;
  color: white;
  background: var(--green-color);
  padding: 0.3rem 1rem;
  border-radius: 5px;
  cursor: pointer;
  height: 2.2rem;
}
.allVipIndex .chargeWidgets {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  grid-gap: 1rem;
}
.allVipIndex .chargeWidgets .WidgetItem {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  grid-gap: 1rem;
  padding: 1rem;
  border-radius: 10px;
  overflow: hidden;
  position: relative;
  background: white;
  z-index: 1;
  border: 1px solid #eee;
}
.allVipIndex .chargeWidgets .WidgetItem .WidgetIcon {
  position: relative;
  display: grid;
  justify-content: center;
  align-items: center;
}
.allVipIndex .chargeWidgets .WidgetItem .WidgetIcon svg {
  width: 4rem;
  height: 4rem;
}
.allVipIndex .chargeWidgets .WidgetItem .WidgetSubject {
  position: relative;
  z-index: 5;
}
.allVipIndex .chargeWidgets .WidgetItem .WidgetSubject h4 {
  font-size: 0.8rem;
  color: #000;
  font-weight: 300;
}
.allVipIndex .chargeWidgets .WidgetItem .WidgetSubject h5 {
  font-size: 0.85rem;
  color: #444;
  font-weight: 700;
  margin-top: 0.5rem;
}
.allVipIndex .chargeWidgets .WidgetItem .WidgetSubject h5 span {
  letter-spacing: 0.2px;
}
.allVipIndex .packs {
  background: white;
  padding: 1rem;
  margin: 1rem 0;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  border-radius: 10px;
}
.allVipIndex .packs .title {
  font-size: 1.2rem;
  font-weight: 700;
  color: #444;
  margin-bottom: 0.5rem;
}
.allVipIndex .packs .body {
  font-size: 1rem;
  font-weight: 500;
  color: #000;
  margin-bottom: 1rem;
}
.allVipIndex .packs .items {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr));
  grid-gap: 1rem;
}
.allVipIndex .packs .items .item {
  display: grid;
  padding: 1rem;
  border-radius: 10px;
  border: 1px solid #ddd;
}
.allVipIndex .packs .items .item h4 {
  text-align: center;
  font-size: 1rem;
  font-weight: 700;
  color: #444;
  margin-bottom: 0.5rem;
}
.allVipIndex .packs .items .item p {
  text-align: center;
  font-size: 0.9rem;
  font-weight: 300;
  color: #000;
  margin-bottom: 1rem;
}
.allVipIndex .packs .items .item .option {
  margin-bottom: 1rem;
  font-size: 0.9rem;
  font-weight: 700;
  color: #444;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}
.allVipIndex .packs .items .item .option span:first-child {
  font-weight: 300;
  font-size: 0.8rem;
  opacity: 0.7;
}
.allVipIndex .packs .items .item .button {
  display: grid;
  width: 100%;
  background: green;
  border-radius: 5px;
  padding: 0.3rem 1rem;
  font-size: 1rem;
  font-weight: 300;
  color: white;
  text-align: center;
}
.allVipIndex table {
  margin-top: 1rem;
  background: white;
  border-radius: 10px;
  width: 100%;
  border: 1px solid #eee;
}
.allVipIndex table tr {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(1px, 1fr));
  align-items: center;
  grid-gap: 1rem;
  padding: 1rem;
}
.allVipIndex table tr th {
  font-weight: 700;
  color: #000;
  font-size: 0.85rem;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  display: grid;
  align-items: center;
  justify-content: center;
}
.allVipIndex table tr td {
  font-weight: 300;
  font-size: 0.85rem;
  text-align: center;
  color: #000;
}
.allVipIndex table tr td .active {
  background: green;
  padding: 0.3rem 0.5rem;
  font-size: 0.8rem;
  font-weight: 300;
  color: white !important;
  border-radius: 5px;
}
.allVipIndex table tr td .unActive {
  background: red;
  padding: 0.3rem 0.5rem;
  font-size: 0.8rem;
  font-weight: 300;
  color: white !important;
  border-radius: 5px;
}
.allVipIndex table tr:nth-child(even) {
  background: #eeeeee;
}
@media screen and (max-width: 1000px) {
  .allVipIndex {
    margin: 0.5rem;
  }
  .allVipIndex .chargePrice {
    padding: 0.5rem;
  }
  .allVipIndex .chargePrice form .top .right1 {
    font-size: 0.8rem;
  }
  .allVipIndex .chargePrice form .top input {
    font-size: 0.8rem;
    width: 100%;
  }
  .allVipIndex .chargePrice form .gateItems .gateItem img {
    height: 2rem;
    width: 2rem;
  }
  .allVipIndex .chargeWidgets {
    grid-template-columns: 1fr 1fr;
    grid-gap: 0.5rem;
  }
  .allVipIndex .chargeWidgets .WidgetItem {
    display: block;
    padding: 0.5rem;
  }
  .allVipIndex .chargeWidgets .WidgetItem .WidgetIcon {
    display: none;
  }
  .allVipIndex .chargeWidgets .WidgetItem .WidgetSubject h4 {
    font-size: 0.75rem;
  }
  .allVipIndex .chargeWidgets .WidgetItem .WidgetSubject h5 {
    font-size: 0.8rem;
  }
  .allVipIndex .allTables {
    overflow-x: scroll;
  }
  .allVipIndex .allTables table {
    clear: both;
    margin-top: 6px !important;
    margin-bottom: 6px !important;
    max-width: none !important;
    border-collapse: separate !important;
    width: 100%;
  }
  .allVipIndex .allTables table tbody {
    background: white;
  }
  .allVipIndex .allTables table tr {
    display: flex;
  }
  .allVipIndex .allTables table tr td, .allVipIndex .allTables table tr th {
    min-width: 6rem;
  }
  .allVipIndex .allTables table tr .buttons {
    min-width: 6rem;
  }
}

.allCartIndex {
  margin: auto;
  margin-top: 1rem;
}
.allCartIndex .tops {
  background: white;
  padding: 1rem;
  border-radius: 20px;
  border: 1px solid #eee;
}
.allCartIndex .tops .pic {
  display: grid;
  justify-content: center;
}
.allCartIndex .tops .pic img {
  height: 6rem;
  max-width: 20rem;
  object-fit: contain;
}
.allCartIndex .tops ul {
  display: flex;
  width: 70%;
  justify-content: space-between;
  grid-gap: 5rem;
  margin: 2rem auto;
  position: relative;
}
.allCartIndex .tops ul li {
  display: flex;
  gap: 0.5rem;
  justify-content: center;
  align-items: center;
  font-size: 1rem;
  font-weight: 700;
  color: #444;
  position: relative;
  z-index: 2;
  width: 10rem;
  background: white;
}
.allCartIndex .tops ul li i {
  display: grid;
  align-items: center;
}
.allCartIndex .tops ul li i svg {
  width: 1.5rem;
  height: 1.5rem;
  fill: #444;
}
.allCartIndex .tops ul:before {
  content: "";
  position: absolute;
  z-index: 1;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  margin: auto;
  height: 2px;
  background: #eee;
}
.allCartIndex .tops ul .active {
  color: var(--green-color);
}
.allCartIndex .tops ul .active i svg {
  fill: var(--green-color);
}
.allCartIndex .title2 {
  display: flex;
  justify-content: right;
  align-items: center;
  gap: 2rem;
  border-bottom: 1px solid #eee;
  margin-bottom: 1rem;
  margin-top: 1rem;
}
.allCartIndex .title2 .option {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 1rem;
  font-weight: 500;
  color: #000;
  padding: 0.5rem;
  padding-top: 0;
  margin-bottom: -1px;
}
.allCartIndex .title2 .option i {
  display: grid;
  align-items: center;
}
.allCartIndex .title2 .option i svg {
  width: 1rem;
  height: 1rem;
  fill: #000;
}
.allCartIndex .title2 .active {
  border-bottom: 2px solid var(--green-color);
  color: var(--green-color);
}
.allCartIndex .title2 .active i svg {
  fill: var(--green-color);
}
.allCartIndex .container1 {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-gap: 1rem;
  margin-top: 1rem;
}
.allCartIndex .container1 .right .carts {
  display: grid;
  grid-template-columns: 1fr;
  grid-gap: 1rem;
}
.allCartIndex .container1 .right .carts .item {
  background: white;
  border-radius: 10px;
  padding: 1rem;
}
.allCartIndex .container1 .right .carts .item .topItem {
  display: grid;
  grid-template-columns: 10rem 1fr;
  grid-gap: 1rem;
}
.allCartIndex .container1 .right .carts .item .topItem .description .title3 {
  font-size: 1.1rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
  color: black;
  white-space: pre-line;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  box-orient: vertical;
  -webkit-box-orient: vertical;
  line-clamp: 2;
  -webkit-line-clamp: 2;
  overflow: hidden;
  text-overflow: ellipsis;
}
.allCartIndex .container1 .right .carts .item .topItem .description .price {
  display: flex;
  justify-content: right;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.8rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
  color: #444;
}
.allCartIndex .container1 .right .carts .item .topItem .description .price .name {
  font-size: 0.8rem;
  font-weight: 300;
  color: #444;
}
.allCartIndex .container1 .right .carts .item .topItem .description .options {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-gap: 1rem;
  align-items: center;
  margin-top: 1rem;
}
.allCartIndex .container1 .right .carts .item .topItem .description .options .change {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1rem;
}
.allCartIndex .container1 .right .carts .item .topItem .description .options .change .count {
  font-size: 1rem;
}
.allCartIndex .container1 .right .carts .item .topItem .description .options .change .button1 {
  border-radius: 50%;
  width: 2.3rem;
  height: 2.3rem;
  display: grid;
  align-items: center;
  justify-content: center;
  background: #eee;
  cursor: pointer;
}
.allCartIndex .container1 .right .carts .item .topItem .description .options .change .button1 i {
  display: grid;
  align-items: center;
}
.allCartIndex .container1 .right .carts .item .topItem .description .options .change .button1 svg {
  width: 0.8rem;
  height: 0.8rem;
  fill: black;
}
.allCartIndex .container1 .right .carts .item .topItem .description .options ul {
  display: flex;
  align-items: center;
  justify-content: left;
  gap: 1rem;
}
.allCartIndex .container1 .right .carts .item .topItem .description .options ul li {
  padding: 0.5rem 1rem;
  font-size: 0.9rem;
  font-weight: 500;
  color: #000;
  cursor: pointer;
  border-radius: 5px;
  background: rgb(238, 238, 241);
}
.allCartIndex .container1 .right .carts .item .topItem .description .options ul li:hover {
  background: var(--green-color);
  color: white;
}
.allCartIndex .container1 .right .carts .item .topItem .description .options ul li:last-child {
  background: red;
  color: white;
}
.allCartIndex .container1 .right .carts .item .topItem .pic {
  display: grid;
  align-items: center;
  border-radius: 10px;
  padding: 0.5rem;
  border: 2px solid rgb(238, 238, 241);
}
.allCartIndex .container1 .left {
  width: 25rem;
}
.allCartIndex .container1 .left .box {
  background: white;
  border-radius: 10px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
  padding: 1rem;
  padding-top: 0;
  margin-bottom: 1rem;
}
.allCartIndex .container1 .left .box .item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem;
  padding: 1rem 0;
  border-bottom: 1px solid #eee;
}
.allCartIndex .container1 .left .box .item .name {
  font-weight: 900;
  color: #444;
  font-size: 1rem;
}
.allCartIndex .container1 .left .box .item .body {
  display: flex;
  gap: 5px;
  align-items: center;
  font-weight: 700;
  color: black;
  font-size: 0.9rem;
}
.allCartIndex .container1 .left .box .item .body:after {
  content: "\f06c︎";
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  font-weight: 400;
  letter-spacing: normal;
  font-family: digikala;
  font-size: 1.1rem;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-style: normal;
  font-variant: normal;
  text-decoration: none;
  text-transform: none;
  line-height: 1;
  box-sizing: inherit;
}
.allCartIndex .container1 .left .box .item .body1 {
  font-weight: 700;
  color: black;
  font-size: 0.9rem;
}
.allCartIndex .container1 .left .box .item:nth-last-child(2) {
  border-bottom: 0;
}
.allCartIndex .container1 .left .box .final .name {
  font-size: 1rem;
  color: var(--green-color);
}
.allCartIndex .container1 .left .box .final .body {
  font-size: 1.2rem;
  color: var(--green-color);
}
.allCartIndex .container1 .left .box .next1 {
  background: var(--green-color);
  padding: 0.5rem;
  text-align: center;
  color: white;
  font-size: 1rem;
  font-weight: 700;
  display: grid;
  width: 100%;
  border-radius: 5px;
}
.allCartIndex .allCartIndexEmpty {
  margin-top: 1rem;
  display: grid;
  text-align: center;
  justify-content: center;
  align-items: center;
}
.allCartIndex .allCartIndexEmpty i svg {
  fill: var(--green-color);
  width: 7rem;
  height: 7rem;
}
.allCartIndex .allCartIndexEmpty p {
  color: #444;
  margin-top: 1rem;
  font-size: 1.2rem;
}
@media screen and (max-width: 700px) {
  .allCartIndex .container1 {
    grid-template-columns: 1fr;
    grid-gap: 1rem;
  }
  .allCartIndex .container1 .right .carts {
    grid-template-columns: 1fr;
    grid-gap: 0.5rem;
  }
  .allCartIndex .container1 .right .carts .item {
    padding: 0.5rem;
  }
  .allCartIndex .container1 .right .carts .item .topItem {
    display: flex;
    flex-direction: column-reverse;
    grid-gap: 0.5rem;
  }
  .allCartIndex .container1 .right .carts .item .topItem .description .title3 {
    font-size: 1.1rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
    color: black;
    white-space: pre-line;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    box-orient: vertical;
    -webkit-box-orient: vertical;
    line-clamp: 2;
    -webkit-line-clamp: 2;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .allCartIndex .container1 .right .carts .item .topItem .description .price {
    display: flex;
    justify-content: right;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.8rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
    color: #444;
  }
  .allCartIndex .container1 .right .carts .item .topItem .description .price .name {
    font-size: 0.8rem;
    font-weight: 300;
    color: #444;
  }
  .allCartIndex .container1 .right .carts .item .topItem .description .options {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 0.5rem;
  }
  .allCartIndex .container1 .right .carts .item .topItem .description .options .option {
    background: #f5f5f5;
    text-align: center;
    padding: 0.2rem 0.5rem;
    border-radius: 5rem;
    font-size: 0.8rem;
    font-weight: 700;
    color: black;
    border: 1px solid #ccc;
  }
  .allCartIndex .container1 .right .carts .item .topItem .pic {
    justify-content: center;
  }
  .allCartIndex .container1 .right .carts .item .topItem .pic img {
    height: 10rem;
  }
  .allCartIndex .container1 .right .carts .item .botItem {
    display: grid;
    grid-template-columns: 2fr 1fr;
    grid-gap: 1rem;
    margin-top: 1rem;
  }
  .allCartIndex .container1 .right .carts .item .botItem .operations {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-gap: 0.5rem;
    align-items: center;
    position: relative;
  }
  .allCartIndex .container1 .right .carts .item .botItem .operations .operation {
    border-radius: 50%;
    width: 1.7rem;
    height: 1.7rem;
    display: grid;
    align-items: center;
    justify-content: center;
    background: var(--green-color);
    cursor: pointer;
  }
  .allCartIndex .container1 .right .carts .item .botItem .operations .operation i {
    display: grid;
    align-items: center;
  }
  .allCartIndex .container1 .right .carts .item .botItem .operations .operation svg {
    width: 0.7rem;
    height: 0.7rem;
    fill: white;
  }
  .allCartIndex .container1 .right .carts .item .botItem .operations .seller {
    padding: 0.1rem 0.5rem;
    border-radius: 5rem;
    font-size: 0.9rem;
    text-align: center;
    color: var(--green-color);
    border: 1px solid var(--green-color);
  }
  .allCartIndex .container1 .right .carts .item .botItem .operations ul {
    display: none;
    position: absolute;
    top: calc(100% + 0.5rem);
    right: 0;
    background: white;
    border-radius: 5px;
    border: 1px solid #eee;
    box-shadow: 0 10px 10px rgba(0, 0, 0, 0.1);
    overflow: hidden;
  }
  .allCartIndex .container1 .right .carts .item .botItem .operations ul li {
    padding: 5px 10px;
    font-size: 0.85rem;
    font-weight: 300;
    color: #000;
    cursor: pointer;
  }
  .allCartIndex .container1 .right .carts .item .botItem .operations ul li:hover {
    background: var(--green-color);
    color: white;
  }
  .allCartIndex .container1 .right .carts .item .botItem .change {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1rem;
  }
  .allCartIndex .container1 .right .carts .item .botItem .change .button1 {
    border-radius: 50%;
    width: 1.7rem;
    height: 1.7rem;
    display: grid;
    align-items: center;
    justify-content: center;
    background: #eee;
    cursor: pointer;
  }
  .allCartIndex .container1 .right .carts .item .botItem .change .button1 i {
    display: grid;
    align-items: center;
  }
  .allCartIndex .container1 .right .carts .item .botItem .change .button1 svg {
    width: 0.7rem;
    height: 0.7rem;
    fill: black;
  }
  .allCartIndex .container1 .left {
    width: 100%;
  }
  .allCartIndex .container1 .left .allCategoryIndex {
    display: none;
  }
}

.allCartIndex2 {
  margin: auto;
  margin-top: 1rem;
}
.allCartIndex2 .container1 {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-gap: 1rem;
}
.allCartIndex2 .container1 .right .title2 {
  display: flex;
  justify-content: right;
  align-items: center;
  gap: 1rem;
  margin-bottom: 0.5rem;
  padding: 0.5rem;
  border-radius: 10px;
  background: #f7f7f7;
}
.allCartIndex2 .container1 .right .title2 .option {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 1rem;
  font-weight: 500;
  color: #000;
  padding: 0.5rem 1rem;
  background: white;
  border-radius: 5px;
}
.allCartIndex2 .container1 .right .title2 .option i {
  display: grid;
  align-items: center;
}
.allCartIndex2 .container1 .right .title2 .option i svg {
  width: 1rem;
  height: 1rem;
  fill: #000;
}
.allCartIndex2 .container1 .right .title2 .active {
  background: var(--green-color);
  color: white;
}
.allCartIndex2 .container1 .right .title2 .active i svg {
  fill: white;
}
.allCartIndex2 .container1 .right .carts {
  display: grid;
  grid-template-columns: 1fr;
  grid-gap: 0.5rem;
}
.allCartIndex2 .container1 .right .carts .item {
  background: white;
  border-radius: 10px;
  padding: 1rem;
  border: 1px solid #eee;
}
.allCartIndex2 .container1 .right .carts .item .topItem {
  display: grid;
  grid-template-columns: 10rem 1fr;
  grid-gap: 1rem;
}
.allCartIndex2 .container1 .right .carts .item .topItem .pic {
  display: grid;
  align-items: center;
}
.allCartIndex2 .container1 .right .carts .item .topItem .description .title3 {
  font-size: 1rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
  color: #000;
  white-space: pre-line;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  box-orient: vertical;
  -webkit-box-orient: vertical;
  line-clamp: 2;
  -webkit-line-clamp: 2;
  overflow: hidden;
  text-overflow: ellipsis;
}
.allCartIndex2 .container1 .right .carts .item .topItem .description .price {
  display: flex;
  justify-content: right;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.9rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
  color: #000;
  background: linear-gradient(to left, #f7f7f7, white);
  padding: 0.5rem;
  border-radius: 5px;
}
.allCartIndex2 .container1 .right .carts .item .topItem .description .price .name {
  font-size: 0.9rem;
  font-weight: 300;
  color: #444;
}
.allCartIndex2 .container1 .right .carts .item .topItem .description .options {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-gap: 1rem;
  align-items: center;
  margin-top: 1rem;
}
.allCartIndex2 .container1 .right .carts .item .topItem .description .options .change {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1rem;
}
.allCartIndex2 .container1 .right .carts .item .topItem .description .options .change .count {
  font-size: 1rem;
}
.allCartIndex2 .container1 .right .carts .item .topItem .description .options .change .button1 {
  border-radius: 10px;
  width: 2.3rem;
  height: 2.3rem;
  display: grid;
  align-items: center;
  justify-content: center;
  background: var(--green-color);
  opacity: 0.5;
  cursor: pointer;
}
.allCartIndex2 .container1 .right .carts .item .topItem .description .options .change .button1 i {
  display: grid;
  align-items: center;
}
.allCartIndex2 .container1 .right .carts .item .topItem .description .options .change .button1 svg {
  width: 0.8rem;
  height: 0.8rem;
  fill: white;
}
.allCartIndex2 .container1 .right .carts .item .topItem .description .options ul {
  display: flex;
  align-items: center;
  justify-content: left;
  gap: 1rem;
}
.allCartIndex2 .container1 .right .carts .item .topItem .description .options ul li {
  padding: 0.5rem 1rem;
  font-size: 0.9rem;
  font-weight: 500;
  color: white;
  cursor: pointer;
  border-radius: 10px;
  background: red;
}
.allCartIndex2 .container1 .right .carts .item .topItem .description .options ul li:first-child {
  background: white;
  border: 1px solid red;
  color: red;
}
.allCartIndex2 .container1 .left {
  width: 25rem;
}
.allCartIndex2 .container1 .left .box {
  background: white;
  box-shadow: 0px 4px 24px 0px rgba(0, 0, 0, 0.1);
  border-radius: 15px;
  padding: 1rem;
  margin-bottom: 1rem;
}
.allCartIndex2 .container1 .left .box .title2 {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  align-items: center;
  padding-bottom: 1rem;
  font-size: 1.2rem;
  font-weight: 900;
  color: #000;
  text-align: center;
}
.allCartIndex2 .container1 .left .box .title2 i {
  display: grid;
  align-items: center;
}
.allCartIndex2 .container1 .left .box .title2 i svg {
  width: 1.4rem;
  height: 1.4rem;
  fill: #000;
}
.allCartIndex2 .container1 .left .box .item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem;
  padding: 0.8rem 0;
  border-top: 1px solid #eee;
}
.allCartIndex2 .container1 .left .box .item .name {
  font-weight: 500;
  color: #000;
  font-size: 0.9rem;
}
.allCartIndex2 .container1 .left .box .item .body {
  display: flex;
  gap: 5px;
  align-items: center;
  font-weight: 700;
  color: #000;
  font-size: 1rem;
}
.allCartIndex2 .container1 .left .box .item .body:after {
  content: "\f06c︎";
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  font-weight: 400;
  letter-spacing: normal;
  font-family: digikala;
  font-size: 1.1rem;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-style: normal;
  font-variant: normal;
  text-decoration: none;
  text-transform: none;
  line-height: 1;
  box-sizing: inherit;
}
.allCartIndex2 .container1 .left .box .item .body1 {
  font-weight: 700;
  color: #000;
  font-size: 0.9rem;
}
.allCartIndex2 .container1 .left .box .final .name {
  font-size: 1rem;
  color: var(--green-color);
}
.allCartIndex2 .container1 .left .box .final .body {
  font-size: 1.2rem;
  color: var(--green-color);
}
.allCartIndex2 .container1 .left .box .next1 {
  border: 1px solid var(--green-color);
  padding: 0.5rem;
  text-align: center;
  color: var(--green-color);
  font-size: 1rem;
  font-weight: 700;
  display: grid;
  width: 100%;
  border-radius: 10px;
  cursor: pointer;
}
.allCartIndex2 .container1 .left .box .next1:hover {
  background: var(--green-color);
  color: white;
}
.allCartIndex2 .allCartIndexEmpty {
  margin-top: 1rem;
  display: grid;
  text-align: center;
  justify-content: center;
  align-items: center;
}
.allCartIndex2 .allCartIndexEmpty i svg {
  fill: var(--green-color);
  width: 7rem;
  height: 7rem;
}
.allCartIndex2 .allCartIndexEmpty p {
  color: #444;
  margin-top: 1rem;
  font-size: 1.2rem;
}
@media screen and (max-width: 700px) {
  .allCartIndex2 .container1 {
    grid-template-columns: 1fr;
    grid-gap: 1rem;
  }
  .allCartIndex2 .container1 .right .carts {
    grid-template-columns: 1fr;
    grid-gap: 0.5rem;
  }
  .allCartIndex2 .container1 .right .carts .item {
    padding: 0.5rem;
  }
  .allCartIndex2 .container1 .right .carts .item .topItem {
    display: flex;
    flex-direction: column;
    grid-gap: 0.5rem;
  }
  .allCartIndex2 .container1 .right .carts .item .topItem .description .title3 {
    font-size: 0.9rem;
  }
  .allCartIndex2 .container1 .right .carts .item .topItem .description .price {
    font-size: 0.8rem;
  }
  .allCartIndex2 .container1 .right .carts .item .topItem .description .price .name {
    font-size: 0.8rem;
  }
  .allCartIndex2 .container1 .right .carts .item .topItem .description .options {
    grid-gap: 0.5rem;
  }
  .allCartIndex2 .container1 .right .carts .item .topItem .description .options .change {
    gap: 0.5rem;
  }
  .allCartIndex2 .container1 .right .carts .item .topItem .description .options .change .count {
    font-size: 0.85rem;
  }
  .allCartIndex2 .container1 .right .carts .item .topItem .description .options .change .button1 {
    width: 1.8rem;
    height: 1.8rem;
  }
  .allCartIndex2 .container1 .right .carts .item .topItem .description .options .change .button1 svg {
    width: 0.7rem;
    height: 0.7rem;
  }
  .allCartIndex2 .container1 .right .carts .item .topItem .description .options ul {
    gap: 0.5rem;
  }
  .allCartIndex2 .container1 .right .carts .item .topItem .description .options ul li {
    padding: 0.5rem;
    font-size: 0.8rem;
  }
  .allCartIndex2 .container1 .right .carts .item .topItem .pic {
    justify-content: center;
  }
  .allCartIndex2 .container1 .right .carts .item .topItem .pic img {
    height: 10rem;
  }
  .allCartIndex2 .container1 .left {
    width: 100%;
  }
}

.allCheckoutIndex {
  margin: auto;
  margin-top: 1rem;
}
.allCheckoutIndex .alert, .allCheckoutIndex .success {
  background: rgba(255, 0, 0, 0.15);
  color: red;
  padding: 1rem;
  border-radius: 10px;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.3px;
  margin-bottom: 1rem;
}
.allCheckoutIndex .success {
  background: rgba(0, 255, 0, 0.1);
  color: green;
}
.allCheckoutIndex .tops {
  background: white;
  padding: 1rem;
  border: 1px solid #eee;
  border-radius: 20px;
}
.allCheckoutIndex .tops .pic {
  display: grid;
  justify-content: center;
}
.allCheckoutIndex .tops .pic img {
  height: 6rem;
  max-width: 20rem;
  object-fit: contain;
}
.allCheckoutIndex .tops ul {
  display: flex;
  width: 70%;
  justify-content: space-between;
  grid-gap: 5rem;
  margin: auto;
  margin-top: 2rem;
  position: relative;
}
.allCheckoutIndex .tops ul li {
  display: flex;
  gap: 0.5rem;
  justify-content: center;
  align-items: center;
  font-size: 1rem;
  font-weight: 700;
  color: #444;
  position: relative;
  z-index: 2;
  width: 10rem;
  background: white;
}
.allCheckoutIndex .tops ul li i {
  display: grid;
  align-items: center;
}
.allCheckoutIndex .tops ul li i svg {
  width: 1.5rem;
  height: 1.5rem;
  fill: #444;
}
.allCheckoutIndex .tops ul:before {
  content: "";
  position: absolute;
  z-index: 1;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  margin: auto;
  height: 2px;
  background: #eee;
}
.allCheckoutIndex .tops ul .active {
  color: var(--green-color);
}
.allCheckoutIndex .tops ul .active i svg {
  fill: var(--green-color);
}
.allCheckoutIndex .container1 {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-gap: 1rem;
  margin-top: 1rem;
}
.allCheckoutIndex .container1 .right .CreateAddress {
  background: white;
  padding: 1rem;
  margin: auto;
  border-radius: 20px;
}
.allCheckoutIndex .container1 .right .CreateAddress .titleAddress span {
  font-size: 1.2rem;
  font-weight: 900;
  color: black;
}
.allCheckoutIndex .container1 .right .CreateAddress .form .alert {
  color: red;
  font-size: 0.8rem;
  font-weight: 300;
}
.allCheckoutIndex .container1 .right .CreateAddress .form .items {
  display: grid;
  grid-gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(5rem, 1fr));
}
.allCheckoutIndex .container1 .right .CreateAddress .form .item {
  margin-top: 1rem;
  border-radius: 10px;
}
.allCheckoutIndex .container1 .right .CreateAddress .form .item label {
  color: #444;
  font-weight: 700;
  font-size: 0.9rem;
  margin-bottom: 0.5rem;
  display: grid;
}
.allCheckoutIndex .container1 .right .CreateAddress .form .item .alert {
  color: red;
  font-weight: 300;
  font-size: 0.8rem;
  margin-top: 0.5rem;
}
.allCheckoutIndex .container1 .right .CreateAddress .form .item input, .allCheckoutIndex .container1 .right .CreateAddress .form .item select {
  padding: 0.8rem;
  background: transparent;
  border: 1px solid rgb(238, 238, 241);
  color: #000;
  border-radius: 10px;
  font-size: 1rem;
  width: 100%;
  font-weight: 300;
  transition: all 0.3s ease-in-out;
}
.allCheckoutIndex .container1 .right .CreateAddress .form .item input:focus, .allCheckoutIndex .container1 .right .CreateAddress .form .item select:focus {
  border: 1px solid var(--green-color);
}
.allCheckoutIndex .container1 .right .CreateAddress .form .item select[name=city] {
  display: none;
}
.allCheckoutIndex .container1 .right .CreateAddress .bottomAddress {
  margin-top: 1rem;
  display: flex;
  justify-content: center;
  align-items: center;
}
.allCheckoutIndex .container1 .right .CreateAddress .bottomAddress button {
  padding: 0.5rem 1rem;
  background: green;
  color: white;
  font-size: 0.9rem;
  font-weight: 700;
  border-radius: 5px;
}
.allCheckoutIndex .container1 .right ul li button {
  margin-top: 1rem;
  padding: 1rem;
  background: white;
  width: 100%;
  border-radius: 10px;
  cursor: pointer;
  display: flex;
  align-items: center;
  grid-gap: 1rem;
  font-size: 1rem;
  font-weight: 700;
  color: #000;
}
.allCheckoutIndex .container1 .right ul li button i {
  display: grid;
  align-items: center;
  justify-content: center;
}
.allCheckoutIndex .container1 .right ul li button i svg {
  width: 1.5rem;
  height: 1.5rem;
  fill: #000;
}
.allCheckoutIndex .container1 .right ul li button:before {
  content: "";
  border: 2px solid #000;
  background: white;
  border-radius: 100%;
  width: 0.9rem;
  height: 0.9rem;
}
.allCheckoutIndex .container1 .right ul li .active {
  color: var(--green-color);
}
.allCheckoutIndex .container1 .right ul li .active i svg {
  fill: var(--green-color);
}
.allCheckoutIndex .container1 .right ul li .active:before {
  border: 2px solid var(--green-color);
  background: var(--green-color);
}
.allCheckoutIndex .container1 .left {
  width: 25rem;
}
.allCheckoutIndex .container1 .left .boxB {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-top: 1rem;
  padding: 1rem;
  border-radius: 10px;
  color: #000;
  background: white;
  cursor: pointer;
}
.allCheckoutIndex .container1 .left .boxB .right {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 1rem;
  font-weight: 700;
  color: #000;
}
.allCheckoutIndex .container1 .left .boxB .right i {
  opacity: 1;
}
.allCheckoutIndex .container1 .left .boxB .right i svg {
  width: 1.5rem;
  height: 1.5rem;
}
.allCheckoutIndex .container1 .left .boxB i {
  display: grid;
  align-items: center;
  opacity: 0.5;
}
.allCheckoutIndex .container1 .left .boxB i svg {
  width: 1rem;
  height: 1rem;
  fill: #000;
}
.allCheckoutIndex .container1 .left .boxB:first-child {
  margin-top: 0;
  margin-bottom: 1rem;
}
.allCheckoutIndex .container1 .left .box {
  background: white;
  border-radius: 20px;
  padding: 1rem;
}
.allCheckoutIndex .container1 .left .box .price {
  margin-bottom: 1rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.allCheckoutIndex .container1 .left .box .price .title3 {
  font-size: 1rem;
  font-weight: 700;
  color: #444;
}
.allCheckoutIndex .container1 .left .box .price .body {
  display: flex;
  justify-content: left;
  align-items: center;
  gap: 5px;
  font-size: 0.9rem;
  font-weight: 700;
  color: #000;
}
.allCheckoutIndex .container1 .left .box .price .body:after {
  content: "\f06c︎";
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  font-weight: 400;
  letter-spacing: normal;
  font-family: digikala;
  font-size: 1.1rem;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-style: normal;
  font-variant: normal;
  text-decoration: none;
  text-transform: none;
  line-height: 1;
  box-sizing: inherit;
}
.allCheckoutIndex .container1 .left .box .price .body1 {
  display: flex;
  justify-content: left;
  align-items: center;
  gap: 5px;
  font-size: 0.9rem;
  font-weight: 500;
  color: red;
}
.allCheckoutIndex .container1 .left .box .price .body2 {
  display: flex;
  justify-content: left;
  align-items: center;
  gap: 5px;
  font-size: 0.9rem;
  font-weight: 700;
  color: #000;
}
.allCheckoutIndex .container1 .left .box .priceF {
  padding-top: 1rem;
  border-top: 1px solid #eee;
  margin-top: 1rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.allCheckoutIndex .container1 .left .box .priceF .title3 {
  font-size: 1.1rem;
  font-weight: 900;
  color: black;
}
.allCheckoutIndex .container1 .left .box .priceF .body {
  display: flex;
  justify-content: left;
  align-items: center;
  gap: 5px;
  font-size: 1.2rem;
  font-weight: 900;
  color: black;
}
.allCheckoutIndex .container1 .left .box .priceF .body:after {
  content: "\f06c︎";
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  font-weight: 400;
  letter-spacing: normal;
  font-family: digikala;
  font-size: 1.1rem;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-style: normal;
  font-variant: normal;
  text-decoration: none;
  text-transform: none;
  line-height: 1;
  box-sizing: inherit;
}
.allCheckoutIndex .container1 .left .box .gatePay {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(4rem, 1fr));
  margin: 1rem 0;
  grid-gap: 0.5rem;
}
.allCheckoutIndex .container1 .left .box .gatePay .gateItem {
  display: grid;
  justify-content: center;
  padding: 0.5rem;
  border-radius: 10px;
  cursor: pointer;
  font-size: 0.75rem;
  font-weight: 700;
  color: #444;
  border: 2px solid #eee;
  filter: grayscale(1);
  transition: all 0.3s ease-in-out;
}
.allCheckoutIndex .container1 .left .box .gatePay .gateItem img {
  height: 3rem;
  object-fit: contain;
}
.allCheckoutIndex .container1 .left .box .gatePay .gateItem:hover {
  filter: grayscale(0);
}
.allCheckoutIndex .container1 .left .box .gatePay .active {
  border: 2px solid var(--green-color);
  filter: grayscale(0);
}
.allCheckoutIndex .container1 .left .box .move {
  background: var(--green-color);
  padding: 0.5rem;
  text-align: center;
  color: white;
  font-size: 1rem;
  cursor: pointer;
  font-weight: 700;
  display: grid;
  width: 100%;
  border-radius: 10px;
  margin-top: 1rem;
}
.allCheckoutIndex .allDis {
  background: rgba(0, 0, 0, 0.8);
  z-index: 4000;
  position: fixed;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-columns: 1fr;
  justify-content: center;
  overflow-y: scroll;
}
.allCheckoutIndex .allDis .showB {
  width: 40%;
  margin: auto;
  background: white;
  display: grid;
  grid-template-columns: 1fr;
  border-radius: 15px;
  overflow: hidden;
}
.allCheckoutIndex .allDis .showB .title2 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  text-align: center;
  font-size: 1.2rem;
  font-weight: 700;
  color: black;
  padding: 1rem;
  border-bottom: 2px solid rgb(238, 238, 241);
}
.allCheckoutIndex .allDis .showB .title2 i {
  display: grid;
  align-items: center;
  cursor: pointer;
}
.allCheckoutIndex .allDis .showB .title2 i svg {
  width: 1.5rem;
  height: 1.5rem;
  fill: #000;
}
.allCheckoutIndex .allDis .showB .boxes {
  padding: 1rem;
}
.allCheckoutIndex .allDis .showB .boxes .name1 {
  font-size: 1rem;
  font-weight: 500;
  color: #000;
  margin-bottom: 0.5rem;
}
.allCheckoutIndex .allDis .showB .boxes label {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-gap: 0.5rem;
}
.allCheckoutIndex .allDis .showB .boxes input {
  padding: 0.5rem;
  border: 1px solid #eee;
  width: 100%;
  background: transparent;
  border-radius: 10px;
  font-weight: 500;
  font-size: 1rem;
}
.allCheckoutIndex .allDis .showB button {
  padding: 0.3rem 0.8rem;
  font-weight: 500;
  color: white;
  background: var(--green-color);
  border-radius: 10px;
}
.allCheckoutIndex .allDis .showB .body {
  padding: 1rem;
  padding-bottom: 0;
}
.allCheckoutIndex .allDis .showB .body p {
  font-size: 1rem;
  font-weight: 400;
  color: #000;
  margin-bottom: 1rem;
}
.allCheckoutIndex .allDis .showB .body .image {
  display: grid;
  justify-content: center;
  margin: 1rem 0;
}
.allCheckoutIndex .allDis .showB .body ul {
  margin: 2rem;
}
.allCheckoutIndex .allDis .showB .body ul li {
  list-style: decimal;
  margin-bottom: 1rem;
}
.allCheckoutIndex .allDis .showB .body ul ul {
  margin: 0;
  margin-top: 1rem;
  margin-right: 1rem;
}
.allCheckoutIndex .allDis .showB .body figure {
  display: grid;
}
.allCheckoutIndex .allDis .showB .body table {
  background: white;
  border-radius: 0.3rem;
  box-shadow: 0 0 10px #eee;
  width: 100%;
  margin-bottom: 1rem;
}
.allCheckoutIndex .allDis .showB .body table tr {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(1px, 1fr));
  align-items: center;
  grid-gap: 1rem;
  padding: 1rem;
}
.allCheckoutIndex .allDis .showB .body table tr th {
  font-weight: 700;
  color: #000;
  font-size: 0.75rem;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  display: grid;
  align-items: center;
  justify-content: center;
}
.allCheckoutIndex .allDis .showB .body table tr td {
  font-weight: 300;
  font-size: 0.75rem;
  text-align: center;
  color: #000;
}
.allCheckoutIndex .allDis .showB .body table tr td svg {
  fill: #000;
  width: 1rem;
  height: 1rem;
  cursor: pointer;
}
.allCheckoutIndex .allDis .showB .body table tr td img {
  width: 2.5rem;
  height: 2.5rem;
  object-fit: cover;
  border-radius: 5rem;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
.allCheckoutIndex .allDis .showB .body table tr td a {
  display: grid;
  align-items: center;
}
.allCheckoutIndex .allDis .showB .body table tr td a svg {
  margin-left: 0.5rem;
}
.allCheckoutIndex .allDis .showB .body table tr .buttons a {
  font-size: 0.8rem;
  padding: 0.3rem;
  border-radius: 5px;
  color: white;
  background: green;
}
.allCheckoutIndex .allDis .showB .body table tr .buttons button {
  font-size: 0.8rem;
  padding: 0.3rem;
  border-radius: 5px;
  color: white;
  background: orange;
}
.allCheckoutIndex .allDis .showB .body table tr:nth-child(even) {
  background: #f5f5f5;
}
.allCheckoutIndex .allDis .showB .file1 {
  position: relative;
  margin: 1rem;
  background: #f5f5f5;
  border-radius: 10px;
  padding: 1rem;
  text-align: center;
  border: 2px dashed #eee;
}
.allCheckoutIndex .allDis .showB .file1 .name {
  font-size: 1rem;
  font-weight: 500;
  color: var(--green-color);
  position: relative;
}
.allCheckoutIndex .allDis .showB .file1 input {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  opacity: 0;
}
.allCheckoutIndex .allDis .showB .button {
  display: grid;
  justify-items: center;
  padding: 1rem;
  padding-top: 0;
}
@media screen and (max-width: 700px) {
  .allCheckoutIndex .container1 {
    grid-template-columns: 1fr;
    grid-gap: 1rem;
  }
  .allCheckoutIndex .container1 .right ul li button {
    grid-gap: 0.5rem;
    font-size: 0.8rem;
  }
  .allCheckoutIndex .container1 .right ul li button i svg {
    width: 1.2rem;
    height: 1.2rem;
  }
  .allCheckoutIndex .container1 .right ul li button:before {
    width: 0.7rem;
    height: 0.7rem;
  }
  .allCheckoutIndex .container1 .right ul li .active {
    color: var(--green-color);
  }
  .allCheckoutIndex .container1 .right ul li .active i svg {
    fill: var(--green-color);
  }
  .allCheckoutIndex .container1 .right ul li .active:before {
    border: 2px solid var(--green-color);
    background: var(--green-color);
  }
  .allCheckoutIndex .container1 .left {
    width: 100%;
  }
  .allCheckoutIndex .allDis .showB {
    width: 98%;
  }
}

.allCheckoutIndex2 {
  margin: auto;
  margin-top: 1rem;
}
.allCheckoutIndex2 .alert, .allCheckoutIndex2 .success {
  background: rgba(255, 0, 0, 0.15);
  color: red;
  padding: 1rem;
  border-radius: 10px;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.3px;
  margin-bottom: 1rem;
}
.allCheckoutIndex2 .success {
  background: rgba(0, 255, 0, 0.1);
  color: green;
}
.allCheckoutIndex2 .container1 {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-gap: 1rem;
  margin-top: 1rem;
}
.allCheckoutIndex2 .container1 .right .CreateAddress {
  background: white;
  border: 1px solid #eee;
  padding: 1rem;
  border-radius: 15px;
}
.allCheckoutIndex2 .container1 .right .CreateAddress .title {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  font-size: 1.2rem;
  font-weight: 900;
  color: #000;
  position: relative;
}
.allCheckoutIndex2 .container1 .right .CreateAddress .title:before {
  width: 5px;
  height: 25px;
  display: grid;
  background: var(--green-color);
  border-radius: 5px;
  content: "";
  box-shadow: 5px 0 10px var(--green-color);
}
.allCheckoutIndex2 .container1 .right .CreateAddress .form .alert {
  color: red;
  font-size: 0.8rem;
  font-weight: 300;
}
.allCheckoutIndex2 .container1 .right .CreateAddress .form .items {
  display: grid;
  grid-gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(5rem, 1fr));
}
.allCheckoutIndex2 .container1 .right .CreateAddress .form .item {
  margin-top: 1rem;
  border-radius: 10px;
}
.allCheckoutIndex2 .container1 .right .CreateAddress .form .item label {
  color: #000;
  font-weight: 500;
  font-size: 1rem;
  margin-bottom: 0.5rem;
  display: grid;
}
.allCheckoutIndex2 .container1 .right .CreateAddress .form .item .alert {
  color: red;
  font-weight: 300;
  font-size: 0.8rem;
  margin-top: 0.5rem;
}
.allCheckoutIndex2 .container1 .right .CreateAddress .form .item input, .allCheckoutIndex2 .container1 .right .CreateAddress .form .item select {
  padding: 0.8rem;
  background: #f7f7f7;
  color: #000;
  border-radius: 10px;
  font-size: 1rem;
  width: 100%;
  font-weight: 300;
  transition: all 0.3s ease-in-out;
  border: 1px solid #f7f7f7;
}
.allCheckoutIndex2 .container1 .right .CreateAddress .form .item input:focus, .allCheckoutIndex2 .container1 .right .CreateAddress .form .item select:focus {
  border: 1px solid var(--green-color);
}
.allCheckoutIndex2 .container1 .right .CreateAddress .form .item select[name=city] {
  display: none;
}
.allCheckoutIndex2 .container1 .right .CreateAddress .bottomAddress {
  margin-top: 1rem;
  display: flex;
  justify-content: center;
  align-items: center;
}
.allCheckoutIndex2 .container1 .right .CreateAddress .bottomAddress button {
  padding: 0.5rem 2rem;
  background: green;
  color: white;
  font-size: 1rem;
  font-weight: 700;
  border-radius: 10px;
}
.allCheckoutIndex2 .container1 .right .payMethods {
  background: white;
  border: 1px solid #eee;
  padding: 1rem;
  border-radius: 15px;
  margin-top: 1rem;
}
.allCheckoutIndex2 .container1 .right .payMethods .title {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  font-size: 1.2rem;
  font-weight: 900;
  color: #000;
  position: relative;
}
.allCheckoutIndex2 .container1 .right .payMethods .title:before {
  width: 5px;
  height: 25px;
  display: grid;
  background: var(--green-color);
  border-radius: 5px;
  content: "";
  box-shadow: 5px 0 10px var(--green-color);
}
.allCheckoutIndex2 .container1 .right .payMethods ul li {
  margin-top: 1rem;
}
.allCheckoutIndex2 .container1 .right .payMethods ul li button {
  width: 100%;
  cursor: pointer;
  display: flex;
  background: linear-gradient(to left, #f7f7f7, white);
  align-items: center;
  padding: 1rem;
  border-radius: 10px;
  grid-gap: 0.5rem;
  font-size: 1rem;
  font-weight: 500;
  color: #444;
}
.allCheckoutIndex2 .container1 .right .payMethods ul li button i {
  display: grid;
  align-items: center;
  justify-content: center;
}
.allCheckoutIndex2 .container1 .right .payMethods ul li button i svg {
  width: 1.3rem;
  height: 1.3rem;
  fill: #444;
}
.allCheckoutIndex2 .container1 .right .payMethods ul li button:before {
  content: "";
  border: 2px solid #000;
  background: white;
  border-radius: 100%;
  width: 0.9rem;
  height: 0.9rem;
}
.allCheckoutIndex2 .container1 .right .payMethods ul li .active {
  color: var(--green-color);
}
.allCheckoutIndex2 .container1 .right .payMethods ul li .active i svg {
  fill: var(--green-color);
}
.allCheckoutIndex2 .container1 .right .payMethods ul li .active:before {
  border: 2px solid var(--green-color);
  background: var(--green-color);
}
.allCheckoutIndex2 .container1 .left {
  width: 25rem;
}
.allCheckoutIndex2 .container1 .left .boxB {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  background: white;
  box-shadow: 0px 4px 24px 0px rgba(0, 0, 0, 0.1);
  border-radius: 15px;
  padding: 1rem;
  margin-bottom: 1rem;
  cursor: pointer;
}
.allCheckoutIndex2 .container1 .left .boxB .right {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 1rem;
  font-weight: 700;
  color: #000;
}
.allCheckoutIndex2 .container1 .left .boxB .right i {
  opacity: 1;
}
.allCheckoutIndex2 .container1 .left .boxB .right i svg {
  width: 1.5rem;
  height: 1.5rem;
}
.allCheckoutIndex2 .container1 .left .boxB i {
  display: grid;
  align-items: center;
  opacity: 0.5;
}
.allCheckoutIndex2 .container1 .left .boxB i svg {
  width: 1rem;
  height: 1rem;
  fill: #000;
}
.allCheckoutIndex2 .container1 .left .boxB:first-child {
  margin-top: 0;
  margin-bottom: 1rem;
}
.allCheckoutIndex2 .container1 .left .box {
  background: white;
  box-shadow: 0px 4px 24px 0px rgba(0, 0, 0, 0.1);
  border-radius: 15px;
  padding: 1rem;
}
.allCheckoutIndex2 .container1 .left .box .price {
  margin-bottom: 1rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.allCheckoutIndex2 .container1 .left .box .price .title3 {
  font-weight: 500;
  color: #000;
  font-size: 0.9rem;
}
.allCheckoutIndex2 .container1 .left .box .price .body {
  display: flex;
  gap: 5px;
  align-items: center;
  font-weight: 700;
  color: #000;
  font-size: 1rem;
}
.allCheckoutIndex2 .container1 .left .box .price .body:after {
  content: "\f06c︎";
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  font-weight: 400;
  letter-spacing: normal;
  font-family: digikala;
  font-size: 1.1rem;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-style: normal;
  font-variant: normal;
  text-decoration: none;
  text-transform: none;
  line-height: 1;
  box-sizing: inherit;
}
.allCheckoutIndex2 .container1 .left .box .price .body1 {
  font-weight: 700;
  color: #000;
  font-size: 0.9rem;
}
.allCheckoutIndex2 .container1 .left .box .price .body2 {
  display: flex;
  justify-content: left;
  align-items: center;
  gap: 5px;
  font-size: 0.9rem;
  font-weight: 700;
  color: #000;
}
.allCheckoutIndex2 .container1 .left .box .priceF {
  padding-top: 1rem;
  border-top: 1px solid #eee;
  margin-top: 1rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.allCheckoutIndex2 .container1 .left .box .priceF .title3 {
  font-size: 1.1rem;
  font-weight: 900;
  color: var(--green-color);
}
.allCheckoutIndex2 .container1 .left .box .priceF .body {
  display: flex;
  justify-content: left;
  align-items: center;
  gap: 5px;
  font-size: 1.2rem;
  font-weight: 900;
  color: var(--green-color);
}
.allCheckoutIndex2 .container1 .left .box .priceF .body:after {
  content: "\f06c︎";
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  font-weight: 400;
  letter-spacing: normal;
  font-family: digikala;
  font-size: 1.1rem;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-style: normal;
  font-variant: normal;
  text-decoration: none;
  text-transform: none;
  line-height: 1;
  box-sizing: inherit;
}
.allCheckoutIndex2 .container1 .left .box .gatePay {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(4rem, 1fr));
  margin-top: 1rem;
  grid-gap: 0.5rem;
}
.allCheckoutIndex2 .container1 .left .box .gatePay .gateItem {
  display: grid;
  justify-content: center;
  padding: 0.5rem;
  border-radius: 10px;
  cursor: pointer;
  font-size: 0.75rem;
  font-weight: 700;
  color: #444;
  border: 2px solid #eee;
  filter: grayscale(1);
  transition: all 0.3s ease-in-out;
}
.allCheckoutIndex2 .container1 .left .box .gatePay .gateItem img {
  height: 3rem;
  object-fit: contain;
}
.allCheckoutIndex2 .container1 .left .box .gatePay .gateItem:hover {
  filter: grayscale(0);
}
.allCheckoutIndex2 .container1 .left .box .gatePay .active {
  border: 2px solid var(--green-color);
  filter: grayscale(0);
}
.allCheckoutIndex2 .container1 .left .box .move {
  border: 1px solid var(--green-color);
  padding: 0.5rem;
  text-align: center;
  color: var(--green-color);
  font-size: 1rem;
  font-weight: 700;
  display: grid;
  width: 100%;
  margin-top: 1rem;
  border-radius: 10px;
  background: transparent;
  cursor: pointer;
}
.allCheckoutIndex2 .container1 .left .box .move:hover {
  background: var(--green-color);
  color: white;
}
.allCheckoutIndex2 .allDis {
  background: rgba(0, 0, 0, 0.8);
  z-index: 4000;
  position: fixed;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-columns: 1fr;
  justify-content: center;
  overflow-y: scroll;
}
.allCheckoutIndex2 .allDis .showB {
  width: 40%;
  margin: auto;
  background: white;
  display: grid;
  grid-template-columns: 1fr;
  border-radius: 15px;
  overflow: hidden;
}
.allCheckoutIndex2 .allDis .showB .title2 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  text-align: center;
  font-size: 1.2rem;
  font-weight: 700;
  color: black;
  padding: 1rem;
  border-bottom: 2px solid rgb(238, 238, 241);
}
.allCheckoutIndex2 .allDis .showB .title2 i {
  display: grid;
  align-items: center;
  cursor: pointer;
}
.allCheckoutIndex2 .allDis .showB .title2 i svg {
  width: 1.5rem;
  height: 1.5rem;
  fill: #000;
}
.allCheckoutIndex2 .allDis .showB .boxes {
  padding: 1rem;
}
.allCheckoutIndex2 .allDis .showB .boxes .name1 {
  font-size: 1rem;
  font-weight: 500;
  color: #000;
  margin-bottom: 0.5rem;
}
.allCheckoutIndex2 .allDis .showB .boxes label {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-gap: 0.5rem;
}
.allCheckoutIndex2 .allDis .showB .boxes input {
  padding: 0.5rem;
  border: 1px solid #eee;
  width: 100%;
  background: transparent;
  border-radius: 10px;
  font-weight: 500;
  font-size: 1rem;
}
.allCheckoutIndex2 .allDis .showB button {
  padding: 0.3rem 0.8rem;
  font-weight: 500;
  color: white;
  background: var(--green-color);
  border-radius: 10px;
}
.allCheckoutIndex2 .allDis .showB .body {
  padding: 1rem;
  padding-bottom: 0;
}
.allCheckoutIndex2 .allDis .showB .body p {
  font-size: 1rem;
  font-weight: 400;
  color: #000;
  margin-bottom: 1rem;
}
.allCheckoutIndex2 .allDis .showB .body .image {
  display: grid;
  justify-content: center;
  margin: 1rem 0;
}
.allCheckoutIndex2 .allDis .showB .body ul {
  margin: 2rem;
}
.allCheckoutIndex2 .allDis .showB .body ul li {
  list-style: decimal;
  margin-bottom: 1rem;
}
.allCheckoutIndex2 .allDis .showB .body ul ul {
  margin: 0;
  margin-top: 1rem;
  margin-right: 1rem;
}
.allCheckoutIndex2 .allDis .showB .body figure {
  display: grid;
}
.allCheckoutIndex2 .allDis .showB .body table {
  background: white;
  border-radius: 0.3rem;
  box-shadow: 0 0 10px #eee;
  width: 100%;
  margin-bottom: 1rem;
}
.allCheckoutIndex2 .allDis .showB .body table tr {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(1px, 1fr));
  align-items: center;
  grid-gap: 1rem;
  padding: 1rem;
}
.allCheckoutIndex2 .allDis .showB .body table tr th {
  font-weight: 700;
  color: #000;
  font-size: 0.75rem;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  display: grid;
  align-items: center;
  justify-content: center;
}
.allCheckoutIndex2 .allDis .showB .body table tr td {
  font-weight: 300;
  font-size: 0.75rem;
  text-align: center;
  color: #000;
}
.allCheckoutIndex2 .allDis .showB .body table tr td svg {
  fill: #000;
  width: 1rem;
  height: 1rem;
  cursor: pointer;
}
.allCheckoutIndex2 .allDis .showB .body table tr td img {
  width: 2.5rem;
  height: 2.5rem;
  object-fit: cover;
  border-radius: 5rem;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
.allCheckoutIndex2 .allDis .showB .body table tr td a {
  display: grid;
  align-items: center;
}
.allCheckoutIndex2 .allDis .showB .body table tr td a svg {
  margin-left: 0.5rem;
}
.allCheckoutIndex2 .allDis .showB .body table tr .buttons a {
  font-size: 0.8rem;
  padding: 0.3rem;
  border-radius: 5px;
  color: white;
  background: green;
}
.allCheckoutIndex2 .allDis .showB .body table tr .buttons button {
  font-size: 0.8rem;
  padding: 0.3rem;
  border-radius: 5px;
  color: white;
  background: orange;
}
.allCheckoutIndex2 .allDis .showB .body table tr:nth-child(even) {
  background: #f5f5f5;
}
.allCheckoutIndex2 .allDis .showB .file1 {
  position: relative;
  margin: 1rem;
  background: #f5f5f5;
  border-radius: 10px;
  padding: 1rem;
  text-align: center;
  border: 2px dashed #eee;
}
.allCheckoutIndex2 .allDis .showB .file1 .name {
  font-size: 1rem;
  font-weight: 500;
  color: var(--green-color);
  position: relative;
}
.allCheckoutIndex2 .allDis .showB .file1 input {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  opacity: 0;
}
.allCheckoutIndex2 .allDis .showB .button {
  display: grid;
  justify-items: center;
  padding: 1rem;
  padding-top: 0;
}
@media screen and (max-width: 700px) {
  .allCheckoutIndex2 .container1 {
    display: block;
    margin-top: 0.5rem;
  }
  .allCheckoutIndex2 .container1 .right .CreateAddress {
    padding: 0.5rem;
  }
  .allCheckoutIndex2 .container1 .right .CreateAddress .title {
    font-size: 1rem;
  }
  .allCheckoutIndex2 .container1 .right .CreateAddress .title:before {
    height: 20px;
  }
  .allCheckoutIndex2 .container1 .right .CreateAddress .form .alert {
    font-size: 0.7rem;
  }
  .allCheckoutIndex2 .container1 .right .CreateAddress .form .items {
    grid-template-columns: 1fr;
    grid-gap: 0;
  }
  .allCheckoutIndex2 .container1 .right .CreateAddress .form .item {
    margin-top: 1rem;
  }
  .allCheckoutIndex2 .container1 .right .CreateAddress .form .item label {
    font-size: 0.8rem;
  }
  .allCheckoutIndex2 .container1 .right .CreateAddress .form .item .alert {
    font-size: 0.7rem;
  }
  .allCheckoutIndex2 .container1 .right .CreateAddress .form .item input, .allCheckoutIndex2 .container1 .right .CreateAddress .form .item select {
    padding: 0.5rem;
    font-size: 0.8rem;
  }
  .allCheckoutIndex2 .container1 .right .CreateAddress .bottomAddress {
    margin-top: 1rem;
  }
  .allCheckoutIndex2 .container1 .right .CreateAddress .bottomAddress button {
    font-size: 0.8rem;
    padding: 0.5rem 1rem;
  }
  .allCheckoutIndex2 .container1 .right .payMethods {
    padding: 0.5rem;
    margin-top: 1rem;
  }
  .allCheckoutIndex2 .container1 .right .payMethods .title {
    font-size: 1rem;
  }
  .allCheckoutIndex2 .container1 .right .payMethods .title:before {
    height: 20px;
  }
  .allCheckoutIndex2 .container1 .right .payMethods ul li button {
    padding: 0.5rem;
    font-size: 0.8rem;
  }
  .allCheckoutIndex2 .container1 .right .payMethods ul li button i svg {
    width: 1rem;
    height: 1rem;
  }
  .allCheckoutIndex2 .container1 .right .payMethods ul li button:before {
    width: 0.7rem;
    height: 0.7rem;
  }
  .allCheckoutIndex2 .container1 .left {
    margin-top: 1rem;
    width: auto;
  }
  .allCheckoutIndex2 .container1 .left .boxB {
    margin-bottom: 0.5rem;
    box-shadow: 0px 4px 24px 0px rgba(0, 0, 0, 0);
    border: 1px solid #eee;
  }
  .allCheckoutIndex2 .container1 .left .boxB .right {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1rem;
    font-weight: 700;
    color: #000;
  }
  .allCheckoutIndex2 .container1 .left .boxB .right i {
    opacity: 1;
  }
  .allCheckoutIndex2 .container1 .left .boxB .right i svg {
    width: 1.5rem;
    height: 1.5rem;
  }
  .allCheckoutIndex2 .container1 .left .boxB i {
    display: grid;
    align-items: center;
    opacity: 0.5;
  }
  .allCheckoutIndex2 .container1 .left .boxB i svg {
    width: 1rem;
    height: 1rem;
    fill: #000;
  }
  .allCheckoutIndex2 .container1 .left .boxB:first-child {
    margin-top: 0;
    margin-bottom: 1rem;
  }
  .allCheckoutIndex2 .container1 .left .box {
    box-shadow: 0px 4px 24px 0px rgba(0, 0, 0, 0);
    border: 1px solid #eee;
  }
  .allCheckoutIndex2 .allDis .showB {
    width: 98%;
  }
}

.buyIndex {
  margin-top: 1rem;
  display: grid;
  justify-content: center;
  align-items: center;
}
.buyIndex .allBuyItems {
  width: 30rem;
  background: white;
  box-shadow: 0 5px 5px rgba(0, 0, 0, 0.1);
  border-radius: 10px;
  overflow: hidden;
}
.buyIndex .allBuyItems .allBuySuccessItemTitle {
  padding: 1rem;
  background: green;
  color: white;
  text-align: center;
}
.buyIndex .allBuyItems .allBuyFailItemTitle {
  padding: 1rem;
  background: red;
  color: white;
  text-align: center;
}
.buyIndex .allBuyItems .allBuyItem {
  padding: 0.8rem 2rem;
  display: flex;
  justify-content: space-between;
  border-top: 1px solid #eee;
}
.buyIndex .allBuyItems .allBuyItem label {
  font-size: 0.8rem;
  font-weight: 500;
  color: #444;
}
.buyIndex .allBuyItems .allBuyItem h4 {
  font-size: 0.9rem;
  color: #000;
  font-weight: 700;
}
.buyIndex .allBuyItems .buttons {
  padding: 1rem;
  text-align: center;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
  grid-gap: 1rem;
}
.buyIndex .allBuyItems .buttons a {
  font-size: 0.9rem;
  color: white;
  padding: 0.5rem 1.5rem;
  background: green;
  border-radius: 5px;
}
.buyIndex .allBuyItems .buttons a:nth-child(2) {
  background: black;
}

@media screen and (max-width: 920px) {
  .buyIndex .allBuyItems {
    width: 20rem;
  }
}
.cartShow {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 600;
  box-shadow: 10px 0 10px rgba(0, 0, 0, 0.15);
}
.cartShow .cartBox {
  width: 30rem;
  background: white;
  height: 100dvh;
  margin-right: -30rem;
  transition: all 0.3s ease-in-out;
}
.cartShow .cartBox .titleC {
  height: 3rem;
  background: var(--green-color);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0 1rem;
  font-size: 1rem;
  font-weight: 700;
  color: white;
}
.cartShow .cartBox .titleC i {
  display: grid;
  align-items: center;
  cursor: pointer;
}
.cartShow .cartBox .titleC i svg {
  width: 1.5rem;
  height: 1.5rem;
  fill: white;
}
.cartShow .cartBox .cartItems {
  height: calc(100vh - 18.5rem);
  overflow-y: scroll;
}
.cartShow .cartBox .cartItems .item {
  display: grid;
  grid-template-columns: auto auto 1fr;
  grid-gap: 0.5rem;
  padding: 1rem;
  border-bottom: 1px solid #eee;
  align-items: center;
}
.cartShow .cartBox .cartItems .item .deleteC {
  display: grid;
  align-items: center;
  cursor: pointer;
}
.cartShow .cartBox .cartItems .item .deleteC svg {
  width: 1.2rem;
  height: 1.2rem;
  fill: #000;
  opacity: 0.7;
}
.cartShow .cartBox .cartItems .item .deleteC:hover svg {
  fill: red;
}
.cartShow .cartBox .cartItems .item .pic {
  display: grid;
  align-items: center;
}
.cartShow .cartBox .cartItems .item .pic img {
  width: 5rem;
  height: 5rem;
  object-fit: contain;
}
.cartShow .cartBox .cartItems .item .des .name {
  font-size: 0.9rem;
  font-weight: 700;
  color: #000;
}
.cartShow .cartBox .cartItems .item .des .bot {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-gap: 0.5rem;
  align-items: center;
  margin-top: 0.5rem;
}
.cartShow .cartBox .cartItems .item .des .bot .price {
  font-size: 0.9rem;
  font-weight: 500;
  color: #000;
}
.cartShow .cartBox .cartItems .item .des .bot .counts {
  display: flex;
  align-items: center;
  border: 1px solid #eee;
  border-radius: 5px;
  height: 100%;
}
.cartShow .cartBox .cartItems .item .des .bot .counts input {
  width: 3rem;
  padding: 0.2rem 0;
  background: transparent;
  text-align: center;
  font-size: 0.8rem;
  font-weight: 700;
  color: #000;
}
.cartShow .cartBox .cartItems .item .des .bot .counts i {
  display: grid;
  align-items: center;
  padding: 0.2rem 0.5rem;
  cursor: pointer;
}
.cartShow .cartBox .cartItems .item .des .bot .counts i svg {
  width: 0.7rem;
  height: 0.7rem;
  fill: #000;
}
.cartShow .cartBox .total {
  height: 11rem;
}
.cartShow .cartBox .total .item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 1rem;
  border-top: 1px solid #eee;
}
.cartShow .cartBox .total .item .name {
  font-size: 1rem;
  font-weight: 700;
  color: #444;
}
.cartShow .cartBox .total .item .val {
  font-size: 1rem;
  font-weight: 900;
  color: #000;
}
.cartShow .cartBox .buttons {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 1rem;
  padding: 1rem;
}
.cartShow .cartBox .buttons .btn {
  height: 2.5rem;
  text-align: center;
  display: grid;
  align-items: center;
  color: white;
  border: 2px solid var(--green-color);
  background: var(--green-color);
  border-radius: 5px;
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
}
.cartShow .cartBox .buttons .btn:first-child {
  background: transparent;
  border: 2px solid var(--green-color);
  color: var(--green-color);
}
@media screen and (max-width: 1000px) {
  .cartShow {
    z-index: 100;
  }
  .cartShow .cartBox {
    width: 100%;
  }
  .cartShow .cartBox .titleC {
    padding: 0 0.5rem;
    font-size: 0.9rem;
  }
  .cartShow .cartBox .titleC i svg {
    width: 1.3rem;
    height: 1.3rem;
  }
  .cartShow .cartBox .cartItems {
    height: calc(100vh - 13rem);
  }
  .cartShow .cartBox .cartItems .item {
    padding: 0.5rem;
  }
  .cartShow .cartBox .cartItems .item .deleteC svg {
    width: 1rem;
    height: 1rem;
  }
  .cartShow .cartBox .cartItems .item .pic img {
    width: 3.5rem;
    height: 3.5rem;
  }
  .cartShow .cartBox .cartItems .item .des .name {
    font-size: 0.8rem;
    opacity: 0.7;
  }
  .cartShow .cartBox .cartItems .item .des .bot .price {
    font-size: 0.9rem;
  }
  .cartShow .cartBox .total {
    height: 7rem;
  }
  .cartShow .cartBox .total .item {
    padding: 0.5rem;
  }
  .cartShow .cartBox .total .item .name {
    font-size: 0.8rem;
  }
  .cartShow .cartBox .total .item .val {
    font-size: 0.8rem;
  }
  .cartShow .cartBox .buttons {
    grid-gap: 0.5rem;
    padding: 0.5rem;
  }
  .cartShow .cartBox .buttons a {
    height: 2rem;
    font-size: 0.8rem;
  }
}

.alertShowFloat {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 1000;
  box-shadow: 10px 0 10px rgba(0, 0, 0, 0.15);
  direction: ltr;
}
.alertShowFloat .alertBox {
  direction: rtl;
  width: 30rem;
  background: white;
}
.alertShowFloat .alertBox .block {
  position: relative;
}
.alertShowFloat .alertBox .block .load {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: grid;
  justify-content: center;
  align-items: center;
  font-size: 2rem;
  font-weight: 700;
  color: white;
}
.alertShowFloat .alertBox .titleAll {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 3rem;
  gap: 0.5rem;
  padding: 1rem;
  border-bottom: 1px solid #eee;
}
.alertShowFloat .alertBox .titleAll .name {
  font-size: 1rem;
  font-weight: 500;
  color: #000;
}
.alertShowFloat .alertBox .titleAll i {
  display: grid;
  align-items: center;
  justify-content: center;
}
.alertShowFloat .alertBox .titleAll i svg {
  width: 1.3rem;
  height: 1.3rem;
  fill: #000;
}
.alertShowFloat .alertBox .items {
  height: calc(100vh - 3rem);
  overflow-y: scroll;
}
.alertShowFloat .alertBox .items .item {
  padding: 1rem;
  border-bottom: 1px solid #eee;
}
.alertShowFloat .alertBox .items .item .detail .title2 {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.3rem;
}
.alertShowFloat .alertBox .items .item .detail .title2 .name {
  line-height: 1.7rem;
  font-size: 0.9rem;
  font-weight: 900;
  color: #000;
}
.alertShowFloat .alertBox .items .item .detail .title2 .time {
  font-size: 0.6rem;
  font-weight: 300;
  color: #000;
}
.alertShowFloat .alertBox .items .item .detail .body {
  font-size: 0.8rem;
  font-weight: 300;
  color: #000;
  opacity: 0.7;
}
.alertShowFloat .alertBox .items .active1 {
  border-right: 5px solid red;
}

@media (max-width: 800px) {
  .alertShowFloat .alertBox {
    width: 100%;
  }
}
.allFilterCity {
  position: fixed;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  background: hsla(0, 0%, 52.9%, 0.5);
  z-index: 999;
  display: none;
}
.allFilterCity .filterCity {
  background: var(--back1-color);
  padding: 1rem;
  width: 35%;
  margin: auto;
  border-radius: 10px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
.allFilterCity .filterCity .titleAddress {
  display: grid;
  grid-template-columns: auto auto;
  justify-content: space-between;
  align-items: center;
}
.allFilterCity .filterCity .titleAddress span {
  font-size: 1.1rem;
  font-weight: 500;
  color: #000;
}
.allFilterCity .filterCity .titleAddress i {
  cursor: pointer;
}
.allFilterCity .filterCity .titleAddress i svg {
  width: 2rem;
  height: 2rem;
  fill: #000;
}
.allFilterCity .filterCity .form .item {
  margin-top: 2rem;
}
.allFilterCity .filterCity .form .item label {
  color: #000;
  font-weight: 300;
  font-size: 0.9rem;
  margin-bottom: 0.5rem;
}
.allFilterCity .filterCity .form .item select {
  border: 1px solid #eee;
  padding: 0 0.5rem;
  background: var(--back1-color);
  color: #000;
  border-radius: 5px;
  font-size: 0.85rem;
  width: 100%;
  height: 2.5rem;
  font-weight: 300;
  transition: all 0.3s ease-in-out;
}
.allFilterCity .filterCity .form .item select:focus {
  box-shadow: 0 3px 8px 0 rgba(0, 0, 0, 0.1);
  border: 1px solid #19bfd3;
}
.allFilterCity .filterCity .form .item select[name=city] {
  display: none;
}
.allFilterCity .filterCity .form #cityContainer {
  display: none;
}
@media screen and (max-width: 1600px) {
  .allFilterCity .filterCity .form .item {
    margin-top: 0.5rem;
  }
}
.allFilterCity .filterCity .bottomAddress {
  margin-top: 1rem;
  display: grid;
  grid-template-columns: auto auto;
  justify-content: right;
  align-items: center;
  grid-gap: 1rem;
}
.allFilterCity .filterCity .bottomAddress button {
  padding: 0.3rem 1rem;
  background: var(--green-color);
  color: white;
  font-size: 0.9rem;
  font-weight: 300;
  border-radius: 5px;
}
@media screen and (max-width: 700px) {
  .allFilterCity .filterCity {
    width: 98%;
  }
}

.allContactFlow {
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  z-index: 500;
}
.allContactFlow .box {
  position: relative;
}
.allContactFlow .box .btn {
  padding: 1rem;
  border-radius: 50%;
  background: var(--green-color);
  position: relative;
  cursor: pointer;
}
.allContactFlow .box .btn i {
  display: grid;
  align-items: center;
  animation: ringAnim 1.99s ease-in-out infinite;
}
.allContactFlow .box .btn i svg {
  width: 1.5rem;
  height: 1.5rem;
  fill: white;
}
.allContactFlow .box .btn .txt {
  position: absolute;
  top: 1rem;
  margin: auto;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
  background: white;
  padding: 0.3rem 1rem;
  border-radius: 5px;
  white-space: nowrap;
  opacity: 0;
  right: 100%;
  transition: all 0.2s ease-in;
}
.allContactFlow .box .btn:after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  box-shadow: 0 0 0 0 rgba(14, 165, 164, 0.35);
  animation: fabPulse 2s infinite;
  z-index: -1;
}
@keyframes fabPulse {
  0% {
    box-shadow: 0 0 0 0 rgba(14, 165, 164, 0.36);
  }
  70% {
    box-shadow: 0 0 0 18px rgba(14, 165, 164, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(14, 165, 164, 0);
  }
}
@keyframes ringAnim {
  0% {
    transform: rotate(0deg);
  }
  2% {
    transform: rotate(18deg);
  }
  4% {
    transform: rotate(-16deg);
  }
  6% {
    transform: rotate(14deg);
  }
  8% {
    transform: rotate(-12deg);
  }
  10% {
    transform: rotate(10deg);
  }
  12% {
    transform: rotate(-8deg);
  }
  14% {
    transform: rotate(6deg);
  }
  16% {
    transform: rotate(-4deg);
  }
  18% {
    transform: rotate(2deg);
  }
  20% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(0deg);
  }
}
.allContactFlow .box .btn:hover .txt {
  right: calc(100% + 0.5rem);
  opacity: 1;
}
.allContactFlow .box .lists {
  position: absolute;
  bottom: calc(100% + 1rem);
  background: white;
  box-shadow: 0 10px 10px rgba(0, 0, 0, 0.1);
  padding: 0.5rem;
  border-radius: 15px;
  height: 25rem;
  width: 20rem;
  overflow-y: scroll;
  display: none;
}
.allContactFlow .box .lists .title2 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.5rem;
  border-bottom: 2px solid #eee;
}
.allContactFlow .box .lists .title2 .name {
  font-size: 1rem;
  font-weight: 700;
  color: #000;
}
.allContactFlow .box .lists .title2 i {
  display: grid;
  align-items: center;
}
.allContactFlow .box .lists .title2 i svg {
  width: 1.2rem;
  height: 1.2rem;
  fill: #000;
}
.allContactFlow .box .lists .item {
  border-radius: 10px;
  padding: 0.5rem;
  display: grid;
  grid-template-columns: auto 1fr;
  align-content: center;
  gap: 0.5rem;
  align-items: center;
  margin-top: 0.5rem;
}
.allContactFlow .box .lists .item .pic {
  background: white;
  border-radius: 5px;
  box-shadow: 0 5px 5px rgba(0, 0, 0, 0.1);
  padding: 5px;
}
.allContactFlow .box .lists .item .pic img {
  height: 2.5rem;
  width: 2.5rem;
  object-fit: contain;
}
.allContactFlow .box .lists .item .des {
  white-space: nowrap;
  overflow: hidden;
}
.allContactFlow .box .lists .item .des .name {
  font-size: 1rem;
  font-weight: 900;
  color: white;
}
.allContactFlow .box .lists .item .des .body {
  direction: ltr;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 0.75rem;
  font-weight: 300;
  color: white;
  opacity: 0.7;
}
@media screen and (max-width: 1000px) {
  .allContactFlow {
    bottom: 4rem;
    right: 0.5rem;
  }
  .allContactFlow .box .btn i svg {
    width: 1.2rem;
    height: 1.2rem;
  }
  .allContactFlow .box .btn .txt {
    display: none;
  }
  .allContactFlow .box .lists {
    position: fixed;
    bottom: 0;
    top: 0;
    left: 0;
    right: 0;
    border-radius: 0;
    height: 100dvh;
    width: 100dvw;
    display: none;
  }
}

.popUpIndex {
  position: fixed;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.45);
  z-index: 999;
}
.popUpIndex .popUpData {
  padding: 1rem;
  width: 35%;
  margin: auto;
  border-radius: 20px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background: var(--back1-color);
}
.popUpIndex .popUpData .pic {
  display: grid;
  justify-content: center;
  margin-bottom: 1rem;
}
.popUpIndex .popUpData .pic img {
  width: 100%;
  height: 5rem;
  object-fit: contain;
}
.popUpIndex .popUpData .title {
  text-align: center;
  font-size: 1.3rem;
  font-weight: 700;
  color: #000;
  margin: 1rem 0;
}
.popUpIndex .popUpData p {
  text-align: center;
  font-size: 1rem;
  font-weight: 500;
  color: #444;
  opacity: 0.8;
}
.popUpIndex .popUpData .buttons {
  display: grid;
  justify-content: center;
  margin-top: 1rem;
}
.popUpIndex .popUpData .buttons a {
  text-align: center;
  font-size: 1rem;
  font-weight: 500;
  background: var(--green-color);
  color: white;
  padding: 0.5rem 1rem;
  border-radius: 10px;
}
@media screen and (max-width: 920px) {
  .popUpIndex .popUpData {
    width: 90%;
  }
}

.allBecomeSeller {
  margin: auto;
  margin-top: 1rem;
}
.allBecomeSeller .tabs {
  display: flex;
  justify-content: right;
  align-items: center;
  gap: 1rem;
}
.allBecomeSeller .tabs .tab {
  padding: 0.5rem 3rem;
  font-size: 1rem;
  font-weight: 700;
  color: #000;
  border-top-right-radius: 10px;
  border-top-left-radius: 10px;
  cursor: pointer;
}
.allBecomeSeller .tabs .active {
  margin-bottom: -2px;
  border: 1px solid #eee;
  border-bottom: 0;
  background: white;
}
.allBecomeSeller .allBecomeUserInfo {
  border-radius: 10px;
  border-top-right-radius: 0;
  background: white;
  border: 1px solid #eee;
  padding: 1rem;
  padding-top: 0;
}
.allBecomeSeller .allBecomeUserInfo .personInfoItems {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
  grid-gap: 1rem;
  margin-top: 1rem;
}
.allBecomeSeller .allBecomeUserInfo .personInfoItems .personInfoItem label {
  font-size: 1rem;
  font-weight: 300;
  color: #000;
  display: flex;
  margin-bottom: 0.5rem;
}
.allBecomeSeller .allBecomeUserInfo .personInfoItems .personInfoItem label .note {
  color: red;
}
.allBecomeSeller .allBecomeUserInfo .personInfoItems .personInfoItem input, .allBecomeSeller .allBecomeUserInfo .personInfoItems .personInfoItem select {
  background: white;
  padding: 0.8rem 1rem;
  border: 1.4px solid #eee;
  border-radius: 10px;
  width: 100%;
  transition: all 0.3s ease-in-out;
  font-size: 1rem;
  font-weight: 300;
}
.allBecomeSeller .allBecomeUserInfo .personInfoItems .personInfoItem input:focus, .allBecomeSeller .allBecomeUserInfo .personInfoItems .personInfoItem select:focus {
  border: 1.4px solid var(--green-color);
}
.allBecomeSeller .allBecomeUserInfo #city {
  display: none;
}
.allBecomeSeller .allBecomeUserInfo .title1 {
  font-size: 1.3rem;
  font-weight: 900;
  color: black;
  padding-top: 1rem;
}
.allBecomeSeller .roles {
  display: grid;
  margin-top: 1rem;
}
.allBecomeSeller .roles ul li {
  margin-top: 1rem;
}
.allBecomeSeller .roles ul li label {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 0.5rem;
  font-size: 1rem;
  font-weight: 700;
  color: #444;
  cursor: pointer;
}
.allBecomeSeller .roles ul li label input {
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 5rem;
}
.allBecomeSeller .buttons {
  margin-top: 2rem;
}
.allBecomeSeller .buttons button {
  font-size: 1rem;
  font-weight: 300;
  color: white;
  background: var(--green-color);
  padding: 0.5rem 3rem;
  border-radius: 5px;
  display: grid;
  align-items: center;
  justify-content: center;
}
.allBecomeSeller .buttons button[disabled] {
  opacity: 0.6;
}
.allBecomeSeller .success {
  background: rgba(0, 255, 0, 0.1);
  color: green;
  padding: 1rem;
  border-radius: 0.3rem;
  font-size: 0.9rem;
  font-weight: 300;
  letter-spacing: 0.3px;
  margin: 1rem 0;
}
.allBecomeSeller .checkUploaded {
  margin-top: 1rem;
}
.allBecomeSeller .checkUploaded h3 {
  font-size: 1.3rem;
  font-weight: 700;
  color: #000;
}
.allBecomeSeller table {
  background: white;
  border-radius: 20px;
  width: 100%;
  margin-top: 1rem;
  border-collapse: collapse;
}
.allBecomeSeller table tr {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  align-items: center;
  grid-gap: 1rem;
  padding: 1rem;
  border-bottom: 1px solid #eee;
}
.allBecomeSeller table tr th {
  font-weight: 900;
  color: #000;
  font-size: 0.9rem;
  text-align: right;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
.allBecomeSeller table tr td {
  font-weight: 500;
  font-size: 0.9rem;
  text-align: right;
  color: #000;
}
.allBecomeSeller table tr td .pic {
  display: flex;
  gap: 0.5rem;
  justify-content: right;
  align-items: center;
}
.allBecomeSeller table tr td .pic img {
  height: 2rem;
  object-fit: cover;
}
.allBecomeSeller table tr td .status100 {
  display: flex;
  align-items: center;
  gap: 5px;
  color: #00e100;
}
.allBecomeSeller table tr td .status100:before {
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #00e100;
}
.allBecomeSeller table tr td .status0 {
  display: flex;
  align-items: center;
  gap: 5px;
  color: red;
}
.allBecomeSeller table tr td .status0:before {
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: red;
}
.allBecomeSeller table tr:first-child {
  background: #F6F8FB;
  position: sticky;
  top: 5rem;
  z-index: 2;
}
@media screen and (max-width: 800px) {
  .allBecomeSeller .allBecomeUserInfo {
    padding: 0.5rem;
  }
  .allBecomeSeller .allBecomeUserInfo .personInfoItems {
    grid-template-columns: 1fr;
    grid-gap: 0.5rem;
    margin-top: 1rem;
  }
  .allBecomeSeller .allBecomeUserInfo .personInfoItems .personInfoItem label {
    font-size: 0.8rem;
  }
  .allBecomeSeller .allBecomeUserInfo .personInfoItems .personInfoItem input, .allBecomeSeller .allBecomeUserInfo .personInfoItems .personInfoItem select {
    padding: 0.5rem;
    font-size: 0.8rem;
  }
  .allBecomeSeller .allBecomeUserInfo .title1 {
    font-size: 1rem;
  }
  .allBecomeSeller .roles ul li label {
    font-size: 0.8rem;
  }
  .allBecomeSeller .roles ul li label input {
    width: 1rem;
    height: 1rem;
  }
}

.allHeaderIndex1 {
  background: white;
  height: 5rem;
  position: sticky;
  top: 0;
  z-index: 100;
}
.allHeaderIndex1 .width {
  margin: auto;
  display: grid;
  grid-template-columns: 1fr auto;
  height: 5rem;
  align-items: center;
  grid-gap: 1rem;
  position: relative;
  z-index: 4;
  background: white;
}
.allHeaderIndex1 .width .right {
  display: grid;
  grid-template-columns: auto auto 1fr;
  justify-content: right;
  align-items: center;
  gap: 1rem;
  z-index: 4;
  height: 5rem;
  background: white;
}
.allHeaderIndex1 .width .right .pic {
  display: flex;
  align-items: center;
  justify-content: right;
  gap: 0.5rem;
}
.allHeaderIndex1 .width .right .pic .align {
  display: none;
  cursor: pointer;
}
.allHeaderIndex1 .width .right .pic .align i {
  display: grid;
  align-items: center;
}
.allHeaderIndex1 .width .right .pic .align i svg {
  width: 1.5rem;
  height: 1.5rem;
  fill: #444;
}
.allHeaderIndex1 .width .right .pic img {
  height: 4rem;
  width: 13rem;
  object-fit: contain;
}
.allHeaderIndex1 .width .right .cats {
  display: grid;
  height: 100%;
}
.allHeaderIndex1 .width .right .cats .name {
  font-size: 1rem;
  font-weight: 700;
  color: #000;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
}
.allHeaderIndex1 .width .right .cats .name i {
  display: grid;
  align-items: center;
}
.allHeaderIndex1 .width .right .cats .name i svg {
  width: 1rem;
  height: 1rem;
  fill: #000;
}
.allHeaderIndex1 .width .right .cats .flow {
  position: absolute;
  top: 100%;
  right: 0;
  left: 0;
  visibility: hidden;
  opacity: 0;
  z-index: 5;
}
.allHeaderIndex1 .width .right .cats .flow .flowItems {
  background: white;
  box-shadow: 0 10px 10px 0 rgba(0, 0, 0, 0.15);
  border-radius: 20px;
  margin-top: 0.5rem;
  height: 0;
  transition: all 0.3s ease-in-out;
  overflow: hidden;
  position: relative;
}
.allHeaderIndex1 .width .right .cats .flow .flowItems .flowItem {
  display: grid;
  grid-template-columns: auto 1fr;
  padding: 0.5rem;
  padding-bottom: 0;
}
.allHeaderIndex1 .width .right .cats .flow .flowItems .flowItem .flowItemTitle {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  padding: 0.6rem 0.8rem;
  gap: 0.5rem;
  width: 15rem;
  color: #000;
  font-weight: 700;
  border-radius: 10px;
  font-size: 0.9rem;
  position: relative;
  border: 2px solid #eee;
}
.allHeaderIndex1 .width .right .cats .flow .flowItems .flowItem .flowItemTitle:before {
  content: "";
  margin: auto;
  width: 1rem;
  height: 6px;
  background: var(--green-color);
  border-radius: 5rem;
}
.allHeaderIndex1 .width .right .cats .flow .flowItems .flowItem .flowItemTitle i {
  visibility: hidden;
  opacity: 0;
  display: grid;
  transition: all 0.3s ease-in-out;
  align-items: center;
}
.allHeaderIndex1 .width .right .cats .flow .flowItems .flowItem .flowItemTitle i svg {
  width: 0.8rem;
  height: 0.8rem;
  fill: white;
}
.allHeaderIndex1 .width .right .cats .flow .flowItems .flowItem .flowItemLists {
  position: absolute;
  right: 16rem;
  visibility: hidden;
  top: 0;
  width: calc(100% - 16rem);
  padding: 0.5rem;
  background: #f5f5f5;
  transition: all 0.3s ease-in-out;
  height: 35rem;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  align-content: flex-start;
  align-items: baseline;
}
.allHeaderIndex1 .width .right .cats .flow .flowItems .flowItem .flowItemLists .flowItemList {
  margin-bottom: 1rem;
  width: 11rem;
  margin-left: 3rem;
  text-align: right;
}
.allHeaderIndex1 .width .right .cats .flow .flowItems .flowItem .flowItemLists .flowItemList a {
  color: #000;
  font-weight: 300;
  font-size: 0.8rem;
  margin-top: 0.5rem;
  display: grid;
  text-align: right;
  padding: 0;
}
.allHeaderIndex1 .width .right .cats .flow .flowItems .flowItem .flowItemLists .flowItemList a i svg {
  width: 0.7rem;
  height: 0.7rem;
  fill: #000;
}
.allHeaderIndex1 .width .right .cats .flow .flowItems .flowItem .flowItemLists .flowItemList .active {
  display: flex;
  justify-content: right;
  gap: 0.5rem;
  align-items: center;
  transition: all 0.3s ease-in-out;
  color: #000;
  font-weight: 500;
  font-size: 0.9rem;
}
.allHeaderIndex1 .width .right .cats .flow .flowItems .flowItem .flowItemLists .flowItemList .active:before {
  width: 2px;
  height: 20px;
  background: var(--green-color);
  content: "";
}
.allHeaderIndex1 .width .right .cats .flow .flowItems .flowItem:hover .flowItemLists {
  visibility: visible;
}
.allHeaderIndex1 .width .right .cats .flow .flowItems .flowItem:hover .flowItemTitle {
  background: var(--green-color);
  color: white;
}
.allHeaderIndex1 .width .right .cats .flow .flowItems .flowItem:hover .flowItemTitle:before {
  background: white;
}
.allHeaderIndex1 .width .right .cats .flow .flowItems .flowItem:hover .flowItemTitle i {
  opacity: 1;
  visibility: visible;
}
.allHeaderIndex1 .width .right .cats:hover .flow {
  visibility: visible;
  opacity: 1;
}
.allHeaderIndex1 .width .right .cats:hover .flow .flowItems {
  height: 35rem;
}
.allHeaderIndex1 .width .right form label {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  grid-gap: 0.5rem;
  background: #ECF0F6;
  padding: 0.7rem;
  height: 100%;
  border-radius: 9px;
}
.allHeaderIndex1 .width .right form label i {
  display: grid;
  align-items: center;
}
.allHeaderIndex1 .width .right form label i svg {
  width: 1.3rem;
  height: 1.3rem;
  fill: #000;
}
.allHeaderIndex1 .width .right form label input {
  background: transparent;
}
.allHeaderIndex1 .width .right form label .cityChoice {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  grid-gap: 0.5rem;
  cursor: pointer;
  border-right: 1px solid #eee;
  padding-right: 1rem;
}
.allHeaderIndex1 .width .right form label .cityChoice i {
  display: grid;
  align-items: center;
  justify-content: center;
}
.allHeaderIndex1 .width .right form label .cityChoice i svg {
  width: 1rem;
  height: 1rem;
  fill: #000;
}
.allHeaderIndex1 .width .right form label .cityChoice .leftCity .title2 {
  font-size: 0.8rem;
  font-weight: 500;
  color: #000;
}
.allHeaderIndex1 .width .left {
  display: flex;
  justify-content: left;
  align-items: center;
  gap: 0.5rem;
  position: relative;
  height: 5rem;
  z-index: 4;
  background: white;
}
.allHeaderIndex1 .width .left .option {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem;
  border-radius: 8px;
  font-size: 1rem;
  color: #444;
  cursor: pointer;
  font-weight: 500;
  border: 1px solid #eee;
  position: relative;
}
.allHeaderIndex1 .width .left .option i {
  display: grid;
}
.allHeaderIndex1 .width .left .option i svg {
  width: 1.3rem;
  height: 1.3rem;
  fill: #000;
}
.allHeaderIndex1 .width .left .option span {
  background: white;
  color: #000;
  font-size: 0.8rem;
  font-weight: 300;
  width: 20px;
  display: grid;
  justify-content: center;
  align-items: center;
  height: 20px;
  border-radius: 5px;
  position: absolute;
  top: -2px;
  left: -2px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
.allHeaderIndex1 .width .left .option #showAlertCount {
  background: black;
  color: white;
  width: 17px;
  height: 17px;
  line-height: 17px;
  font-size: 0.65rem;
}
.allHeaderIndex1 .width .left .addP {
  background: var(--green-color);
  border: 1px solid var(--green-color);
  color: white;
}
.allHeaderIndex1 .width .left .addP i svg {
  fill: white;
}
.allHeaderIndex1 .width .headI {
  position: absolute;
  top: calc(100% - 1.2rem);
  right: 0;
  left: 0;
  margin: auto;
  pointer-events: none;
  display: grid;
  justify-content: center;
  align-items: center;
  z-index: 3;
}
.allHeaderIndex1 .width .headI path {
  fill: white;
  stroke: #ddd;
}
.allHeaderIndex1 .width .headI svg {
  width: 10rem;
}
@media screen and (max-width: 1000px) {
  .allHeaderIndex1 {
    height: auto;
    display: block;
    padding: 0.5rem 0;
  }
  .allHeaderIndex1 .width {
    height: auto;
    grid-template-columns: 1fr;
    grid-gap: 0.5rem;
  }
  .allHeaderIndex1 .width .right {
    grid-template-columns: 1fr;
    gap: 0.5rem;
    height: auto;
  }
  .allHeaderIndex1 .width .right .pic {
    justify-content: space-between;
  }
  .allHeaderIndex1 .width .right .pic .align {
    display: block;
  }
  .allHeaderIndex1 .width .right .pic img {
    height: 3rem;
    width: 100%;
    object-fit: contain;
  }
  .allHeaderIndex1 .width .right .cats {
    display: none;
  }
  .allHeaderIndex1 .width .right form label {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    grid-gap: 0.5rem;
    background: #ECF0F6;
    padding: 0.7rem;
    height: 100%;
    border-radius: 9px;
  }
  .allHeaderIndex1 .width .right form label i {
    display: grid;
    align-items: center;
  }
  .allHeaderIndex1 .width .right form label i svg {
    width: 1.3rem;
    height: 1.3rem;
    fill: #000;
  }
  .allHeaderIndex1 .width .right form label input {
    background: transparent;
  }
  .allHeaderIndex1 .width .right form label .cityChoice {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    grid-gap: 0.5rem;
    cursor: pointer;
    border-right: 1px solid #eee;
    padding-right: 1rem;
  }
  .allHeaderIndex1 .width .right form label .cityChoice i {
    display: grid;
    align-items: center;
    justify-content: center;
  }
  .allHeaderIndex1 .width .right form label .cityChoice i svg {
    width: 1rem;
    height: 1rem;
    fill: #000;
  }
  .allHeaderIndex1 .width .right form label .cityChoice .leftCity .title2 {
    font-size: 0.8rem;
    font-weight: 500;
    color: #000;
  }
  .allHeaderIndex1 .width .left, .allHeaderIndex1 .width .headI {
    display: none;
  }
  .allHeaderIndex1 .categoryHeaderResponsive {
    width: 100%;
  }
}

.allHeaderIndex2 {
  background: white;
  position: sticky;
  top: 0;
  z-index: 90;
}
.allHeaderIndex2 .block {
  margin: auto;
  z-index: 4;
  background: white;
}
.allHeaderIndex2 .block .top .width {
  display: grid;
  grid-template-columns: 1fr auto;
  padding: 0.5rem 0;
  margin: auto;
}
.allHeaderIndex2 .block .top .width .right {
  display: flex;
  align-items: center;
  gap: 1rem;
}
.allHeaderIndex2 .block .top .width .right .pic img {
  height: 3rem;
  max-width: 19rem;
  object-fit: contain;
}
.allHeaderIndex2 .block .top .width .right .align {
  display: none;
  cursor: pointer;
}
.allHeaderIndex2 .block .top .width .right .align i {
  display: grid;
  align-items: center;
}
.allHeaderIndex2 .block .top .width .right .align i svg {
  width: 1.5rem;
  height: 1.5rem;
  fill: #444;
}
.allHeaderIndex2 .block .top .width .right form label {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  grid-gap: 0.5rem;
  background: #f5f5f5;
  padding: 0 0.8rem;
  height: 3rem;
  border-radius: 9px;
}
.allHeaderIndex2 .block .top .width .right form label i {
  display: grid;
  align-items: center;
}
.allHeaderIndex2 .block .top .width .right form label i svg {
  width: 1.1rem;
  height: 1.1rem;
  fill: #000;
}
.allHeaderIndex2 .block .top .width .right form label input {
  background: transparent;
  width: 30rem;
}
.allHeaderIndex2 .block .top .width .right form label .cityChoice {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  grid-gap: 0.5rem;
  cursor: pointer;
  border-right: 1px solid #eee;
  padding-right: 1rem;
}
.allHeaderIndex2 .block .top .width .right form label .cityChoice i {
  display: grid;
  align-items: center;
  justify-content: center;
}
.allHeaderIndex2 .block .top .width .right form label .cityChoice i svg {
  width: 1rem;
  height: 1rem;
  fill: #000;
}
.allHeaderIndex2 .block .top .width .right form label .cityChoice .leftCity .title2 {
  font-size: 0.8rem;
  font-weight: 500;
  color: #000;
}
.allHeaderIndex2 .block .top .width .left {
  display: flex;
  justify-content: left;
  align-items: center;
  gap: 1.5rem;
  position: relative;
  z-index: 4;
  background: white;
}
.allHeaderIndex2 .block .top .width .left .option {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
  font-weight: 500;
  position: relative;
}
.allHeaderIndex2 .block .top .width .left .option i {
  display: grid;
  opacity: 0.6;
}
.allHeaderIndex2 .block .top .width .left .option i svg {
  width: 1.5rem;
  height: 1.5rem;
  fill: #000;
}
.allHeaderIndex2 .block .top .width .left .option span {
  background: white;
  color: white;
  font-size: 0.7rem;
  font-weight: 300;
  width: 16px;
  display: grid;
  justify-content: center;
  align-items: center;
  height: 16px;
  border-radius: 5px;
  position: absolute;
  background: var(--green-color);
  bottom: -10px;
  right: -10px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
.allHeaderIndex2 .block .bot {
  background: #f7f7f7;
  padding-top: 0.5rem;
}
.allHeaderIndex2 .block .bot .width {
  display: flex;
  align-items: end;
  justify-content: space-between;
  margin: auto;
  position: relative;
}
.allHeaderIndex2 .block .bot .width .right .lists {
  display: flex;
  justify-content: right;
  align-items: center;
  gap: 1.5rem;
}
.allHeaderIndex2 .block .bot .width .right .lists li {
  padding-bottom: 1rem;
}
.allHeaderIndex2 .block .bot .width .right .lists li .name {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 1rem;
  font-weight: 700;
  color: #444;
  opacity: 6;
}
.allHeaderIndex2 .block .bot .width .right .lists li .name i {
  display: grid;
  align-items: center;
}
.allHeaderIndex2 .block .bot .width .right .lists li .name i svg {
  width: 1rem;
  height: 1rem;
  fill: #444;
}
.allHeaderIndex2 .block .bot .width .right .lists li .flow {
  position: absolute;
  top: 100%;
  right: 0;
  left: 0;
  visibility: hidden;
  opacity: 0;
  z-index: 5;
}
.allHeaderIndex2 .block .bot .width .right .lists li .flow .flowItems {
  background: white;
  box-shadow: 0 10px 10px 0 rgba(0, 0, 0, 0.15);
  border-radius: 20px;
  margin-top: 0.5rem;
  height: 0;
  transition: all 0.3s ease-in-out;
  overflow: hidden;
  position: relative;
}
.allHeaderIndex2 .block .bot .width .right .lists li .flow .flowItems .flowItem {
  display: grid;
  grid-template-columns: auto 1fr;
  padding: 0.5rem;
  padding-bottom: 0;
}
.allHeaderIndex2 .block .bot .width .right .lists li .flow .flowItems .flowItem .flowItemTitle {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  padding: 0.6rem 0.8rem;
  gap: 0.5rem;
  width: 15rem;
  color: #000;
  font-weight: 700;
  border-radius: 10px;
  font-size: 0.9rem;
  position: relative;
  border: 2px solid #eee;
}
.allHeaderIndex2 .block .bot .width .right .lists li .flow .flowItems .flowItem .flowItemTitle:before {
  content: "";
  margin: auto;
  width: 1rem;
  height: 6px;
  background: var(--green-color);
  border-radius: 5rem;
}
.allHeaderIndex2 .block .bot .width .right .lists li .flow .flowItems .flowItem .flowItemTitle i {
  visibility: hidden;
  opacity: 0;
  display: grid;
  transition: all 0.3s ease-in-out;
  align-items: center;
}
.allHeaderIndex2 .block .bot .width .right .lists li .flow .flowItems .flowItem .flowItemTitle i svg {
  width: 0.8rem;
  height: 0.8rem;
  fill: white;
}
.allHeaderIndex2 .block .bot .width .right .lists li .flow .flowItems .flowItem .flowItemLists {
  position: absolute;
  right: 16rem;
  visibility: hidden;
  top: 0;
  width: calc(100% - 16rem);
  padding: 0.5rem;
  background: #f5f5f5;
  transition: all 0.3s ease-in-out;
  height: 35rem;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  align-content: flex-start;
  align-items: baseline;
}
.allHeaderIndex2 .block .bot .width .right .lists li .flow .flowItems .flowItem .flowItemLists .flowItemList {
  margin-bottom: 1rem;
  width: 11rem;
  margin-left: 3rem;
  text-align: right;
}
.allHeaderIndex2 .block .bot .width .right .lists li .flow .flowItems .flowItem .flowItemLists .flowItemList a {
  color: #000;
  font-weight: 300;
  font-size: 0.8rem;
  margin-top: 0.5rem;
  display: grid;
  text-align: right;
  padding: 0;
}
.allHeaderIndex2 .block .bot .width .right .lists li .flow .flowItems .flowItem .flowItemLists .flowItemList a i svg {
  width: 0.7rem;
  height: 0.7rem;
  fill: #000;
}
.allHeaderIndex2 .block .bot .width .right .lists li .flow .flowItems .flowItem .flowItemLists .flowItemList .active {
  display: flex;
  justify-content: right;
  gap: 0.5rem;
  align-items: center;
  transition: all 0.3s ease-in-out;
  color: #000;
  font-weight: 500;
  font-size: 0.9rem;
}
.allHeaderIndex2 .block .bot .width .right .lists li .flow .flowItems .flowItem .flowItemLists .flowItemList .active:before {
  width: 2px;
  height: 20px;
  background: var(--green-color);
  content: "";
}
.allHeaderIndex2 .block .bot .width .right .lists li .flow .flowItems .flowItem:hover .flowItemLists {
  visibility: visible;
}
.allHeaderIndex2 .block .bot .width .right .lists li .flow .flowItems .flowItem:hover .flowItemTitle {
  background: var(--green-color);
  color: white;
}
.allHeaderIndex2 .block .bot .width .right .lists li .flow .flowItems .flowItem:hover .flowItemTitle:before {
  background: white;
}
.allHeaderIndex2 .block .bot .width .right .lists li .flow .flowItems .flowItem:hover .flowItemTitle i {
  opacity: 1;
  visibility: visible;
}
.allHeaderIndex2 .block .bot .width .right .lists li:hover .flow {
  visibility: visible;
  opacity: 1;
}
.allHeaderIndex2 .block .bot .width .right .lists li:hover .flow .flowItems {
  height: 35rem;
}
.allHeaderIndex2 .block .bot .width .left {
  display: flex;
  justify-content: left;
  align-items: center;
  gap: 1.5rem;
  position: relative;
  z-index: 4;
  margin-bottom: 0.5rem;
  background: #f1f1f1;
  border-radius: 8px;
  padding: 0.5rem;
}
.allHeaderIndex2 .block .bot .width .left .option {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
  font-size: 1rem;
  color: #444;
  cursor: pointer;
  font-weight: 500;
  position: relative;
}
.allHeaderIndex2 .block .bot .width .left .option i {
  display: grid;
  opacity: 0.6;
}
.allHeaderIndex2 .block .bot .width .left .option i svg {
  width: 1.5rem;
  height: 1.5rem;
  fill: #000;
}
.allHeaderIndex2 .block .bot .width .left .option span {
  background: white;
  color: white;
  font-size: 0.7rem;
  font-weight: 300;
  width: 16px;
  display: grid;
  justify-content: center;
  align-items: center;
  height: 16px;
  border-radius: 5px;
  position: absolute;
  background: var(--green-color);
  bottom: -10px;
  right: -10px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
@media screen and (max-width: 1000px) {
  .allHeaderIndex2 .block .top .width {
    grid-template-columns: 1fr;
  }
  .allHeaderIndex2 .block .top .width .right {
    display: block;
  }
  .allHeaderIndex2 .block .top .width .right .pic {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
  }
  .allHeaderIndex2 .block .top .width .right .pic img {
    height: 3rem;
    max-width: 100%;
  }
  .allHeaderIndex2 .block .top .width .right .align {
    display: block;
  }
  .allHeaderIndex2 .block .top .width .right form label {
    height: 3rem;
  }
  .allHeaderIndex2 .block .top .width .right form label input {
    width: 100%;
  }
  .allHeaderIndex2 .block .top .width .right form label .cityChoice {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    grid-gap: 0.5rem;
    cursor: pointer;
    border-right: 1px solid #eee;
    padding-right: 1rem;
  }
  .allHeaderIndex2 .block .top .width .right form label .cityChoice i {
    display: grid;
    align-items: center;
    justify-content: center;
  }
  .allHeaderIndex2 .block .top .width .right form label .cityChoice i svg {
    width: 1rem;
    height: 1rem;
    fill: #000;
  }
  .allHeaderIndex2 .block .top .width .right form label .cityChoice .leftCity .title2 {
    font-size: 0.8rem;
    font-weight: 500;
    color: #000;
  }
  .allHeaderIndex2 .block .top .width .left {
    display: none;
  }
  .allHeaderIndex2 .block .bot {
    display: none;
  }
}

.allHeaderIndex3 {
  background: white;
  position: relative;
  z-index: 90;
}
.allHeaderIndex3 .block {
  background: white;
  position: relative;
  z-index: 4;
}
.allHeaderIndex3 .block .top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: auto;
}
.allHeaderIndex3 .block .top .right {
  display: flex;
  align-items: center;
  gap: 1rem;
}
.allHeaderIndex3 .block .top .right .item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 1rem;
  font-weight: 500;
  color: #444;
  height: 3.5rem;
}
.allHeaderIndex3 .block .top .right .item i {
  display: grid;
  align-items: center;
}
.allHeaderIndex3 .block .top .right .item i svg {
  width: 1.2rem;
  height: 1.2rem;
  color: #444;
}
.allHeaderIndex3 .block .top .center2 .bg {
  width: 189px;
  height: 48px;
  background: url("/img/navbar-bg.svg") no-repeat;
  background-size: auto;
  background-size: 100% 100%;
  position: absolute;
  top: 0.5rem;
  left: calc(50% - 94px);
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
.allHeaderIndex3 .block .top .center2:before {
  content: "";
  display: block;
  width: calc(50vw - 89px);
  height: 1px;
  background-color: #d7d7d7;
  position: absolute;
  top: 3.5rem;
  right: 0;
}
.allHeaderIndex3 .block .top .center2:after {
  content: "";
  display: block;
  width: calc(50vw - 89px);
  height: 1px;
  background-color: #d7d7d7;
  position: absolute;
  top: 3.5rem;
  left: 0;
}
.allHeaderIndex3 .block .top .left {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  justify-content: left;
}
.allHeaderIndex3 .block .top .left .item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 1rem;
  font-weight: 500;
  color: #444;
  height: 3.5rem;
  position: relative;
  cursor: pointer;
}
.allHeaderIndex3 .block .top .left .item .showCartCount, .allHeaderIndex3 .block .top .left .item #showAlertCount {
  position: absolute;
  top: 10px;
  right: -6px;
  background: black;
  width: 17px;
  height: 17px;
  font-size: 0.65rem;
  line-height: 0;
  border-radius: 50%;
  color: white;
  display: grid;
  align-items: center;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
  justify-content: center;
}
.allHeaderIndex3 .block .top .left .item i {
  position: relative;
  display: grid;
  align-items: center;
}
.allHeaderIndex3 .block .top .left .item i svg {
  width: 1.5rem;
  height: 1.5rem;
  color: #444;
}
.allHeaderIndex3 .block .top .left .addP {
  border-bottom: 3px solid #444;
  border-top: 3px solid #444;
  padding: 0 1rem;
}
.allHeaderIndex3 .block .top .left .addP i .showCartCount {
  right: -8px;
}
.allHeaderIndex3 .block .center {
  display: grid;
  justify-content: center;
  margin: auto;
  padding: 2rem 0;
  border-bottom: 2px solid #eee;
}
.allHeaderIndex3 .block .center img {
  height: 3rem;
  object-fit: contain;
}
.allHeaderIndex3 .block .bot .lists {
  display: flex;
  justify-content: center;
  align-items: center;
}
.allHeaderIndex3 .block .bot .lists li .name {
  border-left: 2px solid #eee;
  padding: 0.7rem 1rem;
  font-size: 1rem;
  font-weight: 500;
  color: #444;
  display: grid;
}
.allHeaderIndex3 .block .bot .lists li .flow {
  display: none;
}
.allHeaderIndex3 .block .res {
  display: none;
}
@media screen and (max-width: 1000px) {
  .allHeaderIndex3 .block .bot, .allHeaderIndex3 .block .top {
    display: none;
  }
  .allHeaderIndex3 .block .center {
    padding: 1rem 0;
    border-bottom: 0;
  }
  .allHeaderIndex3 .block .center img {
    height: 2rem;
  }
  .allHeaderIndex3 .block .res {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-gap: 0.5rem;
    padding: 0.5rem;
  }
  .allHeaderIndex3 .block .res .align {
    cursor: pointer;
  }
  .allHeaderIndex3 .block .res .align i {
    display: grid;
    align-items: center;
  }
  .allHeaderIndex3 .block .res .align i svg {
    width: 1.5rem;
    height: 1.5rem;
    fill: #444;
  }
  .allHeaderIndex3 .block .res form label {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    grid-gap: 0.5rem;
    background: #f5f5f5;
    padding: 0 0.8rem;
    height: 3rem;
    border-radius: 9px;
  }
  .allHeaderIndex3 .block .res form label i {
    display: grid;
    align-items: center;
  }
  .allHeaderIndex3 .block .res form label i svg {
    width: 1.1rem;
    height: 1.1rem;
    fill: #000;
  }
  .allHeaderIndex3 .block .res form label input {
    background: transparent;
    width: 100%;
  }
  .allHeaderIndex3 .block .res form label .cityChoice {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    grid-gap: 0.5rem;
    cursor: pointer;
    border-right: 1px solid #eee;
    padding-right: 1rem;
  }
  .allHeaderIndex3 .block .res form label .cityChoice i {
    display: grid;
    align-items: center;
    justify-content: center;
  }
  .allHeaderIndex3 .block .res form label .cityChoice i svg {
    width: 1rem;
    height: 1rem;
    fill: #000;
  }
  .allHeaderIndex3 .block .res form label .cityChoice .leftCity .title2 {
    font-size: 0.8rem;
    font-weight: 500;
    color: #000;
  }
}

.allHeaderIndex4 {
  background: white;
  position: sticky;
  top: 0;
  z-index: 90;
}
.allHeaderIndex4 .top {
  margin: auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
}
.allHeaderIndex4 .top .right {
  display: flex;
  justify-content: right;
  align-items: center;
  gap: 1.5rem;
}
.allHeaderIndex4 .top .right .pic {
  padding: 0.5rem 0;
}
.allHeaderIndex4 .top .right .pic img {
  height: 4rem;
  width: 270px;
  object-fit: contain;
}
.allHeaderIndex4 .top .right nav ul {
  display: flex;
  align-items: center;
  gap: 2rem;
}
.allHeaderIndex4 .top .right nav ul li a {
  font-size: 1rem;
  font-weight: 700;
  color: #000;
}
.allHeaderIndex4 .top .right nav ul li:first-child a {
  color: var(--green-color);
}
.allHeaderIndex4 .top .left {
  display: flex;
  align-items: center;
  justify-content: left;
  gap: 1rem;
}
.allHeaderIndex4 .top .left .number {
  display: flex;
  align-items: center;
  gap: 5px;
  border-left: 2px solid #eee;
  padding-left: 1rem;
}
.allHeaderIndex4 .top .left .number .name {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 0.9rem;
  font-weight: 700;
  color: #000;
}
.allHeaderIndex4 .top .left .number .name i {
  display: grid;
  align-items: center;
}
.allHeaderIndex4 .top .left .number .name i svg {
  width: 1rem;
  height: 1rem;
  fill: #000;
}
.allHeaderIndex4 .top .left .number .body {
  font-size: 0.9rem;
  font-weight: 700;
  color: #000;
}
.allHeaderIndex4 .top .left .number:last-child {
  border-left: 0;
  padding-left: 0;
}
.allHeaderIndex4 .bot {
  background: var(--green-color);
}
.allHeaderIndex4 .bot .width {
  margin: auto;
  display: grid;
  grid-template-columns: auto 1fr auto;
  grid-gap: 1rem;
  align-items: center;
}
.allHeaderIndex4 .bot .width .align {
  display: none;
}
.allHeaderIndex4 .bot .width .right {
  margin-top: 0.5rem;
}
.allHeaderIndex4 .bot .width .right .cats {
  position: relative;
}
.allHeaderIndex4 .bot .width .right .cats .name {
  background: white;
  font-size: 0.9rem;
  color: #000;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 1rem;
  width: 270px;
  cursor: pointer;
  border-top-right-radius: 15px;
  border-top-left-radius: 15px;
  border-bottom: 1px solid #eee;
}
.allHeaderIndex4 .bot .width .right .cats .name i {
  display: grid;
  align-items: center;
}
.allHeaderIndex4 .bot .width .right .cats .name i svg {
  width: 1.2rem;
  height: 1.2rem;
  fill: #000;
}
.allHeaderIndex4 .bot .width .right .cats .boxes {
  position: absolute;
  top: 100%;
  width: 270px;
  border-bottom-left-radius: 15px;
  border-bottom-right-radius: 15px;
  background: white;
  box-shadow: -3px 3px 6px 0 rgba(0, 0, 0, 0.08);
  border: 1px solid #eee;
  border-top: 0;
  display: none;
}
.allHeaderIndex4 .bot .width .right .cats .boxes .flows {
  position: relative;
  padding-bottom: 0.5rem;
}
.allHeaderIndex4 .bot .width .right .cats .boxes .flows .flowItem .item1 {
  padding: 0.5rem;
  padding-bottom: 0;
  position: relative;
}
.allHeaderIndex4 .bot .width .right .cats .boxes .flows .flowItem .item1 .flowItemTitle {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  grid-gap: 0.5rem;
  font-size: 0.9rem;
  color: #000;
  font-weight: 500;
  padding: 0.5rem;
  border-radius: 5rem;
}
.allHeaderIndex4 .bot .width .right .cats .boxes .flows .flowItem .item1 .flowItemTitle:before {
  content: "";
  width: 1.2rem;
  height: 5px;
  border-radius: 5px;
  display: grid;
  background: #444;
  opacity: 0.8;
}
.allHeaderIndex4 .bot .width .right .cats .boxes .flows .flowItem .item1 .flowItemTitle i {
  display: grid;
  align-items: center;
}
.allHeaderIndex4 .bot .width .right .cats .boxes .flows .flowItem .item1 .flowItemTitle i svg {
  width: 1rem;
  height: 1rem;
  fill: #444;
}
.allHeaderIndex4 .bot .width .right .cats .boxes .flows .flowItem .item1 .flowItemLists {
  position: absolute;
  right: 100%;
  top: 0;
  padding: 0.5rem;
  display: none;
}
.allHeaderIndex4 .bot .width .right .cats .boxes .flows .flowItem .item1 .flowItemLists .blockL1 {
  background: white;
  padding: 1rem;
  border-radius: 15px;
  width: 270px;
}
.allHeaderIndex4 .bot .width .right .cats .boxes .flows .flowItem .item1 .flowItemLists .blockL1 .name1 {
  font-size: 0.9rem;
  color: #444;
  font-weight: 700;
  padding: 0.5rem;
  opacity: 0.7;
}
.allHeaderIndex4 .bot .width .right .cats .boxes .flows .flowItem .item1 .flowItemLists .blockL1 .item {
  position: relative;
}
.allHeaderIndex4 .bot .width .right .cats .boxes .flows .flowItem .item1 .flowItemLists .blockL1 .item .title2 {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  grid-gap: 0.5rem;
  font-size: 0.9rem;
  color: #000;
  font-weight: 300;
  padding: 0.5rem;
  border-radius: 5rem;
}
.allHeaderIndex4 .bot .width .right .cats .boxes .flows .flowItem .item1 .flowItemLists .blockL1 .item .title2 i {
  display: grid;
  align-items: center;
}
.allHeaderIndex4 .bot .width .right .cats .boxes .flows .flowItem .item1 .flowItemLists .blockL1 .item .title2 i svg {
  width: 1rem;
  height: 1rem;
  fill: #444;
  opacity: 0.7;
}
.allHeaderIndex4 .bot .width .right .cats .boxes .flows .flowItem .item1 .flowItemLists .blockL1 .item .flowItemLists2 {
  position: absolute;
  right: 100%;
  top: -1rem;
  padding: 0.5rem;
  display: none;
}
.allHeaderIndex4 .bot .width .right .cats .boxes .flows .flowItem .item1 .flowItemLists .blockL1 .item .flowItemLists2 .blockL1 {
  background: white;
  padding: 1rem;
  border-radius: 15px;
  width: 270px;
}
.allHeaderIndex4 .bot .width .right .cats .boxes .flows .flowItem .item1 .flowItemLists .blockL1 .item .flowItemLists2 .blockL1 .name1 {
  font-size: 0.9rem;
  color: #444;
  font-weight: 700;
  padding: 0.5rem;
  opacity: 0.7;
}
.allHeaderIndex4 .bot .width .right .cats .boxes .flows .flowItem .item1 .flowItemLists .blockL1 .item:hover .flowItemLists2 {
  display: block;
}
.allHeaderIndex4 .bot .width .right .cats .boxes .flows .flowItem .item1:hover .flowItemTitle {
  background: #f5f5f5;
  color: var(--green-color);
}
.allHeaderIndex4 .bot .width .right .cats .boxes .flows .flowItem .item1:hover .flowItemTitle:before {
  background: var(--green-color);
}
.allHeaderIndex4 .bot .width .right .cats .boxes .flows .flowItem .item1:hover .flowItemTitle i svg {
  fill: var(--green-color);
}
.allHeaderIndex4 .bot .width .right .cats .boxes .flows .flowItem .item1:hover .flowItemLists {
  display: block;
}
.allHeaderIndex4 .bot .width .center form label {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  grid-gap: 0.5rem;
  background: #f5f5f5;
  padding: 0 0.8rem;
  height: 3rem;
  border-radius: 10px;
}
.allHeaderIndex4 .bot .width .center form label i {
  display: grid;
  align-items: center;
}
.allHeaderIndex4 .bot .width .center form label i svg {
  width: 1.1rem;
  height: 1.1rem;
  fill: #000;
}
.allHeaderIndex4 .bot .width .center form label input {
  background: transparent;
  width: 30rem;
}
.allHeaderIndex4 .bot .width .center form label .cityChoice {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  grid-gap: 0.5rem;
  cursor: pointer;
  border-right: 1px solid #eee;
  padding-right: 1rem;
}
.allHeaderIndex4 .bot .width .center form label .cityChoice i {
  display: grid;
  align-items: center;
  justify-content: center;
}
.allHeaderIndex4 .bot .width .center form label .cityChoice i svg {
  width: 1rem;
  height: 1rem;
  fill: #000;
}
.allHeaderIndex4 .bot .width .center form label .cityChoice .leftCity .title2 {
  font-size: 0.8rem;
  font-weight: 500;
  color: #000;
}
.allHeaderIndex4 .bot .width .left {
  display: flex;
  justify-content: left;
  align-items: center;
  gap: 2rem;
  height: 100%;
}
.allHeaderIndex4 .bot .width .left .login {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
}
.allHeaderIndex4 .bot .width .left .login i {
  display: grid;
  align-items: center;
}
.allHeaderIndex4 .bot .width .left .login i svg {
  width: 2.5rem;
  height: 2.5rem;
  fill: white;
}
.allHeaderIndex4 .bot .width .left .login .des .name {
  font-size: 0.8rem;
  font-weight: 700;
  color: white;
}
.allHeaderIndex4 .bot .width .left .login .des .body {
  font-size: 0.7rem;
  font-weight: 300;
  color: white;
}
.allHeaderIndex4 .bot .width .left .option {
  cursor: pointer;
  position: relative;
}
.allHeaderIndex4 .bot .width .left .option i {
  position: relative;
  display: grid;
  align-items: center;
}
.allHeaderIndex4 .bot .width .left .option i svg {
  width: 1.7rem;
  height: 1.7rem;
  fill: white;
}
.allHeaderIndex4 .bot .width .left .option span {
  position: absolute;
  top: -6px;
  right: -6px;
  background: white;
  width: 17px;
  height: 17px;
  display: grid;
  align-items: center;
  justify-content: center;
  color: #000;
  font-size: 0.7rem;
  font-weight: 700;
  border-radius: 50%;
}
.allHeaderIndex4 .bot .width .left .addP {
  height: 100%;
  padding: 0 1rem;
  background: rgba(255, 255, 255, 0.2);
  align-content: center;
  display: grid;
}
@media screen and (max-width: 1000px) {
  .allHeaderIndex4 .top {
    display: block;
  }
  .allHeaderIndex4 .top .right {
    display: block;
    justify-content: center;
  }
  .allHeaderIndex4 .top .right .pic {
    display: grid;
    justify-content: center;
  }
  .allHeaderIndex4 .top .right .pic img {
    width: 100%;
    height: 2rem;
  }
  .allHeaderIndex4 .top .right nav {
    display: none;
  }
  .allHeaderIndex4 .top .left {
    display: none;
  }
  .allHeaderIndex4 .bot {
    padding: 0.5rem 0;
  }
  .allHeaderIndex4 .bot .width {
    grid-template-columns: auto 1fr;
  }
  .allHeaderIndex4 .bot .width .align {
    display: block;
  }
  .allHeaderIndex4 .bot .width .align i {
    display: grid;
    align-items: center;
  }
  .allHeaderIndex4 .bot .width .align i svg {
    width: 1.5rem;
    height: 1.5rem;
    fill: white;
  }
  .allHeaderIndex4 .bot .width .right {
    display: none;
  }
  .allHeaderIndex4 .bot .width .center form label {
    height: 2.5rem;
  }
  .allHeaderIndex4 .bot .width .center form label input {
    width: 100%;
  }
  .allHeaderIndex4 .bot .width .left {
    display: none;
  }
}

.allHeaderIndex5 {
  background: white;
  position: sticky;
  top: 0;
  z-index: 90;
}
.allHeaderIndex5 .top {
  margin: auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding-top: 0.5rem;
}
.allHeaderIndex5 .top .right {
  display: grid;
  grid-template-columns: auto 1fr;
  justify-content: right;
  align-items: center;
  gap: 1rem;
}
.allHeaderIndex5 .top .right .align {
  display: none;
}
.allHeaderIndex5 .top .right .pic img {
  height: 3rem;
  width: 12rem;
  object-fit: contain;
}
.allHeaderIndex5 .top .right form label {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  grid-gap: 0.5rem;
  background: #f7f7f7;
  padding-right: 0.5rem;
  padding-left: 0.2rem;
  border: 1px solid #eee;
  height: 3rem;
  border-radius: 10px;
}
.allHeaderIndex5 .top .right form label button {
  background: white;
  padding: 0.7rem;
  border-radius: 10px;
  border: 1px solid #eee;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.08);
}
.allHeaderIndex5 .top .right form label button i {
  display: grid;
  align-items: center;
}
.allHeaderIndex5 .top .right form label button i svg {
  width: 1.1rem;
  height: 1.1rem;
  fill: #000;
}
.allHeaderIndex5 .top .right form label input {
  background: transparent;
  width: 30rem;
  font-size: 1rem;
  font-weight: 300;
}
.allHeaderIndex5 .top .left {
  display: flex;
  align-items: center;
  justify-content: left;
  gap: 1.2rem;
  background: #f7f7f7;
  border: 1px solid #eee;
  padding: 0.5rem;
  border-radius: 10px;
}
.allHeaderIndex5 .top .left .option {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.9rem;
  color: #444;
  cursor: pointer;
  font-weight: 500;
  position: relative;
}
.allHeaderIndex5 .top .left .option i {
  display: grid;
}
.allHeaderIndex5 .top .left .option i svg {
  width: 1.3rem;
  height: 1.3rem;
  fill: #444;
}
.allHeaderIndex5 .top .left .option span {
  background: white;
  color: #000;
  font-size: 0.8rem;
  font-weight: 700;
  width: 20px;
  display: grid;
  justify-content: center;
  align-items: center;
  height: 20px;
  border-radius: 5px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
.allHeaderIndex5 .top .left .option #showAlertCount {
  position: absolute;
  top: -5px;
  right: -5px;
  background: red;
  color: white;
  width: 15px;
  height: 15px;
  line-height: 17px;
  font-size: 0.7rem;
}
.allHeaderIndex5 .top .left .option .box {
  display: none;
  position: absolute;
  top: 100%;
  left: -4.5rem;
  z-index: 5;
  padding-top: 1rem;
}
.allHeaderIndex5 .top .left .option .box ul {
  background: white;
  width: 12rem;
  border-radius: 15px;
  z-index: 200;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
}
.allHeaderIndex5 .top .left .option .box ul li {
  border-top: 1px solid #eee;
}
.allHeaderIndex5 .top .left .option .box ul li a {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem;
  font-size: 0.9rem;
  font-weight: 300;
  color: #000;
}
.allHeaderIndex5 .top .left .option .box ul li a:before {
  width: 10px;
  content: "";
  height: 3px;
  background: var(--green-color);
  border-radius: 5px;
}
.allHeaderIndex5 .top .left .option .box ul li:first-child {
  border-top: 0;
}
.allHeaderIndex5 .top .left .option:hover .box {
  display: block;
}
.allHeaderIndex5 .top .left .addP {
  background: var(--green-color);
  padding: 0.3rem 0.5rem;
  border-radius: 8px;
  color: white;
}
.allHeaderIndex5 .top .left .addP i svg {
  fill: white;
}
.allHeaderIndex5 .bot {
  border-bottom: 1px solid #eee;
}
.allHeaderIndex5 .bot .width {
  position: relative;
  margin: auto;
  display: grid;
  grid-template-columns: 1fr auto;
  grid-gap: 1rem;
  align-items: center;
  margin-top: 1rem;
}
.allHeaderIndex5 .bot .width .right .lists {
  display: flex;
  justify-content: right;
  align-items: center;
  gap: 1.5rem;
}
.allHeaderIndex5 .bot .width .right .lists li {
  padding-bottom: 1rem;
  position: relative;
}
.allHeaderIndex5 .bot .width .right .lists li .name {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 1rem;
  font-weight: 500;
  color: #444;
}
.allHeaderIndex5 .bot .width .right .lists li .name i {
  display: grid;
  align-items: center;
  opacity: 0.7;
}
.allHeaderIndex5 .bot .width .right .lists li .name i svg {
  width: 1rem;
  height: 1rem;
  fill: #444;
}
.allHeaderIndex5 .bot .width .right .lists li .flowItemLists {
  position: absolute;
  right: 0;
  top: 100%;
  padding: 0.5rem;
  display: none;
}
.allHeaderIndex5 .bot .width .right .lists li .flowItemLists .blockL1 {
  background: white;
  box-shadow: 0 4px 16px 0 rgba(36, 43, 61, 0.1);
  padding: 0.5rem;
  border-radius: 15px;
  width: 230px;
}
.allHeaderIndex5 .bot .width .right .lists li .flowItemLists .blockL1 .name1 {
  font-size: 0.9rem;
  color: #444;
  font-weight: 700;
  padding: 0.5rem;
  opacity: 0.7;
}
.allHeaderIndex5 .bot .width .right .lists li .flowItemLists .blockL1 .item {
  position: relative;
}
.allHeaderIndex5 .bot .width .right .lists li .flowItemLists .blockL1 .item .title2 {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  grid-gap: 0.5rem;
  font-size: 0.9rem;
  color: #000;
  font-weight: 300;
  padding: 0.5rem;
  border-radius: 5rem;
}
.allHeaderIndex5 .bot .width .right .lists li .flowItemLists .blockL1 .item .title2 i {
  display: grid;
  align-items: center;
}
.allHeaderIndex5 .bot .width .right .lists li .flowItemLists .blockL1 .item .title2 i svg {
  width: 1rem;
  height: 1rem;
  fill: #444;
  opacity: 0.7;
}
.allHeaderIndex5 .bot .width .right .lists li .flowItemLists .blockL1 .item .flowItemLists2 {
  position: absolute;
  right: 100%;
  top: -1rem;
  display: none;
  padding-right: 1rem;
}
.allHeaderIndex5 .bot .width .right .lists li .flowItemLists .blockL1 .item .flowItemLists2 .blockL1 {
  background: white;
  padding: 0.5rem;
  border-radius: 15px;
  width: 230px;
}
.allHeaderIndex5 .bot .width .right .lists li .flowItemLists .blockL1 .item .flowItemLists2 .blockL1 .name1 {
  font-size: 0.9rem;
  color: #444;
  font-weight: 700;
  padding: 0.5rem;
  opacity: 0.7;
}
.allHeaderIndex5 .bot .width .right .lists li .flowItemLists .blockL1 .item:hover .flowItemLists2 {
  display: block;
}
.allHeaderIndex5 .bot .width .right .lists li:hover .flowItemLists {
  display: block;
}
.allHeaderIndex5 .bot .width .left a {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  border-bottom: 2px solid var(--green-color);
  font-size: 1rem;
  font-weight: 700;
  color: #444;
  margin-bottom: -10px;
  padding: 0.5rem 1rem;
  padding-top: 0;
}
@media screen and (max-width: 1000px) {
  .allHeaderIndex5 .top {
    display: block;
    padding-bottom: 0.5rem;
  }
  .allHeaderIndex5 .top .right {
    grid-template-columns: 1fr;
    justify-content: right;
    align-items: center;
    gap: 0.5rem;
  }
  .allHeaderIndex5 .top .right .pic img {
    height: 3rem;
    width: 100%;
  }
  .allHeaderIndex5 .top .right form {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-gap: 0.5rem;
  }
  .allHeaderIndex5 .top .right form .align {
    display: block;
  }
  .allHeaderIndex5 .top .right form .align i {
    display: grid;
    align-items: center;
  }
  .allHeaderIndex5 .top .right form .align i svg {
    width: 1.5rem;
    height: 1.5rem;
    fill: #000;
  }
  .allHeaderIndex5 .top .right form label {
    height: 2.5rem;
  }
  .allHeaderIndex5 .top .right form label button {
    background: white;
    padding: 0.5rem;
  }
  .allHeaderIndex5 .top .right form label button i svg {
    width: 1rem;
    height: 1rem;
  }
  .allHeaderIndex5 .top .right form label input {
    width: 100%;
    font-size: 0.9rem;
  }
  .allHeaderIndex5 .top .left {
    display: none;
  }
  .allHeaderIndex5 .bot {
    display: none;
  }
}

.allHeaderIndex6 {
  background: var(--back4-color);
  position: sticky;
  top: 0;
  z-index: 90;
}
.allHeaderIndex6 .block {
  margin: auto;
}
.allHeaderIndex6 .block .top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding: 0.5rem 0;
}
.allHeaderIndex6 .block .top .right {
  display: grid;
  grid-template-columns: auto 1fr;
  justify-content: right;
  align-items: center;
  gap: 1rem;
}
.allHeaderIndex6 .block .top .right .align {
  display: none;
}
.allHeaderIndex6 .block .top .right .pic img {
  height: 3rem;
  width: 12rem;
  object-fit: contain;
}
.allHeaderIndex6 .block .top .right form label {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  grid-gap: 0.5rem;
  padding-right: 0.5rem;
  padding-left: 0.2rem;
  background: white;
  border: 1px solid #eee;
  height: 3rem;
  border-radius: 10px;
}
.allHeaderIndex6 .block .top .right form label button {
  background: white;
  padding: 0.7rem;
  border-radius: 10px;
}
.allHeaderIndex6 .block .top .right form label button i {
  display: grid;
  align-items: center;
}
.allHeaderIndex6 .block .top .right form label button i svg {
  width: 1.1rem;
  height: 1.1rem;
  fill: #000;
}
.allHeaderIndex6 .block .top .right form label input {
  background: transparent;
  width: 30rem;
  font-size: 1rem;
  font-weight: 300;
}
.allHeaderIndex6 .block .top .left {
  display: flex;
  align-items: center;
  justify-content: left;
  gap: 2rem;
  padding: 0.5rem;
  border-radius: 10px;
}
.allHeaderIndex6 .block .top .left .option {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.9rem;
  color: #000;
  cursor: pointer;
  font-weight: 500;
  position: relative;
}
.allHeaderIndex6 .block .top .left .option i {
  display: grid;
}
.allHeaderIndex6 .block .top .left .option i svg {
  width: 1.2rem;
  height: 1.2rem;
  fill: #444;
}
.allHeaderIndex6 .block .top .left .option .box {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 5;
  padding-top: 1rem;
}
.allHeaderIndex6 .block .top .left .option .box ul {
  background: white;
  width: 12rem;
  border-radius: 15px;
  z-index: 200;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
}
.allHeaderIndex6 .block .top .left .option .box ul li {
  border-top: 1px solid #eee;
}
.allHeaderIndex6 .block .top .left .option .box ul li a {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem;
  font-size: 0.9rem;
  font-weight: 300;
  color: #000;
}
.allHeaderIndex6 .block .top .left .option .box ul li a:before {
  width: 10px;
  content: "";
  height: 3px;
  background: var(--green-color);
  border-radius: 5px;
}
.allHeaderIndex6 .block .top .left .option .box ul li:first-child {
  border-top: 0;
}
.allHeaderIndex6 .block .top .left .option:hover .box {
  display: block;
}
.allHeaderIndex6 .block .top .left .login i svg {
  width: 2rem;
  height: 2rem;
}
.allHeaderIndex6 .block .top .left .btnLogin {
  background: var(--green-color);
  border-radius: 5rem;
  font-size: 1rem;
  font-weight: 500;
  color: white;
  padding: 0.3rem 1rem;
  height: 2.2rem;
}
.allHeaderIndex6 .block .top .left .off1 {
  border-left: 3px solid #eee;
  padding-left: 2rem;
}
.allHeaderIndex6 .block .top .left .off1 i svg {
  fill: red;
}
.allHeaderIndex6 .block .top .left .call1 i {
  display: grid;
  justify-content: center;
  align-items: center;
  background: var(--green-color);
  border-radius: 50%;
  padding: 0.5rem;
  height: 2.2rem;
  width: 2.2rem;
}
.allHeaderIndex6 .block .top .left .call1 i svg {
  fill: white;
  width: 1rem;
  height: 1rem;
}
.allHeaderIndex6 .block .bot {
  background: var(--red-color);
  border-radius: 5rem;
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto;
  grid-gap: 1rem;
  align-items: center;
  padding: 0 1rem;
}
.allHeaderIndex6 .block .bot .right .lists {
  display: flex;
  justify-content: right;
  align-items: center;
  gap: 1.5rem;
}
.allHeaderIndex6 .block .bot .right .lists li {
  padding: 1rem 0;
  position: relative;
}
.allHeaderIndex6 .block .bot .right .lists li .name {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 1rem;
  font-weight: 500;
  color: #000;
}
.allHeaderIndex6 .block .bot .right .lists li .name i {
  display: grid;
  align-items: center;
  opacity: 0.7;
}
.allHeaderIndex6 .block .bot .right .lists li .name i svg {
  width: 1rem;
  height: 1rem;
  fill: #000;
}
.allHeaderIndex6 .block .bot .right .lists li .flowItemLists {
  position: absolute;
  right: 0;
  top: 100%;
  padding: 0.5rem;
  display: none;
}
.allHeaderIndex6 .block .bot .right .lists li .flowItemLists .blockL1 {
  background: white;
  box-shadow: 0 4px 16px 0 rgba(36, 43, 61, 0.1);
  padding: 0.5rem;
  border-radius: 15px;
  width: 230px;
}
.allHeaderIndex6 .block .bot .right .lists li .flowItemLists .blockL1 .name1 {
  font-size: 0.9rem;
  color: #444;
  font-weight: 700;
  padding: 0.5rem;
  opacity: 0.7;
}
.allHeaderIndex6 .block .bot .right .lists li .flowItemLists .blockL1 .item {
  position: relative;
}
.allHeaderIndex6 .block .bot .right .lists li .flowItemLists .blockL1 .item .title2 {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  grid-gap: 0.5rem;
  font-size: 0.9rem;
  color: #000;
  font-weight: 300;
  padding: 0.5rem;
  border-radius: 5rem;
}
.allHeaderIndex6 .block .bot .right .lists li .flowItemLists .blockL1 .item .title2 i {
  display: grid;
  align-items: center;
}
.allHeaderIndex6 .block .bot .right .lists li .flowItemLists .blockL1 .item .title2 i svg {
  width: 1rem;
  height: 1rem;
  fill: #444;
  opacity: 0.7;
}
.allHeaderIndex6 .block .bot .right .lists li .flowItemLists .blockL1 .item .flowItemLists2 {
  position: absolute;
  right: 100%;
  top: -1rem;
  display: none;
  padding-right: 1rem;
}
.allHeaderIndex6 .block .bot .right .lists li .flowItemLists .blockL1 .item .flowItemLists2 .blockL1 {
  background: white;
  padding: 0.5rem;
  border-radius: 15px;
  width: 230px;
}
.allHeaderIndex6 .block .bot .right .lists li .flowItemLists .blockL1 .item .flowItemLists2 .blockL1 .name1 {
  font-size: 0.9rem;
  color: #444;
  font-weight: 700;
  padding: 0.5rem;
  opacity: 0.7;
}
.allHeaderIndex6 .block .bot .right .lists li .flowItemLists .blockL1 .item:hover .flowItemLists2 {
  display: block;
}
.allHeaderIndex6 .block .bot .right .lists li:hover .flowItemLists {
  display: block;
}
.allHeaderIndex6 .block .bot .left {
  display: flex;
  justify-content: left;
  align-items: center;
  gap: 1.5rem;
}
.allHeaderIndex6 .block .bot .left .option {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.9rem;
  color: #000;
  cursor: pointer;
  font-weight: 500;
  position: relative;
}
.allHeaderIndex6 .block .bot .left .option i {
  display: grid;
}
.allHeaderIndex6 .block .bot .left .option i svg {
  width: 1.2rem;
  height: 1.2rem;
  fill: #444;
}
.allHeaderIndex6 .block .bot .left .option span {
  display: grid;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: -5px;
  right: -5px;
  background: var(--green-color);
  color: white;
  width: 15px;
  height: 15px;
  border-radius: 5px;
  line-height: 17px;
  font-size: 0.7rem;
}
@media screen and (max-width: 1000px) {
  .allHeaderIndex6 .block .top {
    display: block;
    padding-bottom: 0.5rem;
  }
  .allHeaderIndex6 .block .top .right {
    grid-template-columns: 1fr;
    justify-content: right;
    align-items: center;
    gap: 0.5rem;
  }
  .allHeaderIndex6 .block .top .right .pic img {
    height: 3rem;
    width: 100%;
  }
  .allHeaderIndex6 .block .top .right form {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-gap: 0.5rem;
  }
  .allHeaderIndex6 .block .top .right form .align {
    display: block;
  }
  .allHeaderIndex6 .block .top .right form .align i {
    display: grid;
    align-items: center;
  }
  .allHeaderIndex6 .block .top .right form .align i svg {
    width: 1.5rem;
    height: 1.5rem;
    fill: #000;
  }
  .allHeaderIndex6 .block .top .right form label {
    height: 2.5rem;
  }
  .allHeaderIndex6 .block .top .right form label button {
    background: white;
    padding: 0.5rem;
  }
  .allHeaderIndex6 .block .top .right form label button i svg {
    width: 1rem;
    height: 1rem;
  }
  .allHeaderIndex6 .block .top .right form label input {
    width: 100%;
    font-size: 0.9rem;
  }
  .allHeaderIndex6 .block .top .left {
    display: none;
  }
  .allHeaderIndex6 .block .bot {
    display: none;
  }
}

.allHeaderIndex7 .block {
  margin: auto;
}
.allHeaderIndex7 .block .top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding: 1rem 0;
}
.allHeaderIndex7 .block .top .right {
  display: grid;
  grid-template-columns: auto 1fr auto;
  justify-content: right;
  align-items: center;
  gap: 0.5rem;
}
.allHeaderIndex7 .block .top .right .align {
  display: none;
}
.allHeaderIndex7 .block .top .right .pic img {
  height: 3rem;
  width: 12rem;
  object-fit: contain;
}
.allHeaderIndex7 .block .top .right form label {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  grid-gap: 0.5rem;
  padding-right: 0.5rem;
  padding-left: 0.2rem;
  border: 1px solid #eee;
  height: 3rem;
  border-radius: 10px;
}
.allHeaderIndex7 .block .top .right form label button {
  background: var(--green-color);
  padding: 0.7rem;
  border-radius: 10px;
}
.allHeaderIndex7 .block .top .right form label button i {
  display: grid;
  align-items: center;
}
.allHeaderIndex7 .block .top .right form label button i svg {
  width: 1.1rem;
  height: 1.1rem;
  fill: white;
}
.allHeaderIndex7 .block .top .right form label input {
  background: transparent;
  width: 30rem;
  font-size: 1rem;
  font-weight: 300;
}
.allHeaderIndex7 .block .top .right .suggest {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 1rem;
  font-weight: 700;
  color: #000;
  border: 1px solid #eee;
  border-radius: 10px;
  height: 3rem;
  padding: 0 1rem;
}
.allHeaderIndex7 .block .top .right .suggest i {
  display: grid;
  align-items: center;
}
.allHeaderIndex7 .block .top .right .suggest i svg {
  width: 1.2rem;
  height: 1.2rem;
  fill: #000;
}
.allHeaderIndex7 .block .top .right .suggest i:last-child {
  margin-right: 0.5rem;
  opacity: 0.6;
}
.allHeaderIndex7 .block .top .right .suggest i:last-child svg {
  width: 1rem;
  height: 1rem;
}
.allHeaderIndex7 .block .top .left {
  display: flex;
  align-items: center;
  justify-content: left;
  gap: 0.5rem;
  border-radius: 10px;
}
.allHeaderIndex7 .block .top .left .option {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.9rem;
  color: #000;
  cursor: pointer;
  font-weight: 500;
  position: relative;
  background: #f1f1f1;
  height: 3rem;
  width: 3rem;
  border-radius: 5px;
}
.allHeaderIndex7 .block .top .left .option i {
  display: grid;
  align-items: center;
}
.allHeaderIndex7 .block .top .left .option i svg {
  width: 1.2rem;
  height: 1.2rem;
  fill: #000;
  opacity: 0.7;
}
.allHeaderIndex7 .block .top .left .option span {
  display: grid;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 0;
  right: 0;
  background: var(--green-color);
  color: white;
  width: 18px;
  height: 18px;
  border-radius: 5px;
  line-height: 17px;
  font-size: 0.7rem;
}
.allHeaderIndex7 .block .top .left .login {
  position: relative;
}
.allHeaderIndex7 .block .top .left .login i svg {
  width: 2rem;
  height: 2rem;
}
.allHeaderIndex7 .block .top .left .login .box {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 5;
  padding-top: 1rem;
}
.allHeaderIndex7 .block .top .left .login .box ul {
  background: white;
  width: 12rem;
  border-radius: 15px;
  z-index: 200;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
}
.allHeaderIndex7 .block .top .left .login .box ul li {
  border-top: 1px solid #eee;
}
.allHeaderIndex7 .block .top .left .login .box ul li a {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem;
  font-size: 0.9rem;
  font-weight: 300;
  color: #000;
}
.allHeaderIndex7 .block .top .left .login .box ul li a:before {
  width: 10px;
  content: "";
  height: 3px;
  background: var(--green-color);
  border-radius: 5px;
}
.allHeaderIndex7 .block .top .left .login .box ul li:first-child {
  border-top: 0;
}
.allHeaderIndex7 .block .top .left .login:hover .box {
  display: block;
}
.allHeaderIndex7 .block .top .left .btnLogin {
  display: grid;
  align-items: center;
  background: #f1f1f1;
  border-radius: 7px;
  font-size: 1rem;
  font-weight: 500;
  cursor: pointer;
  color: #000;
  height: 3rem;
  padding: 0.3rem 1.5rem;
}
.allHeaderIndex7 .block .bot {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto;
  grid-gap: 1rem;
  align-items: center;
  border-top: 1px solid #eee;
}
.allHeaderIndex7 .block .bot .right .lists {
  display: flex;
  justify-content: right;
  align-items: center;
  gap: 2rem;
}
.allHeaderIndex7 .block .bot .right .lists li .name {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.9rem;
  font-weight: 500;
  color: #000;
  margin: 1rem 0;
}
.allHeaderIndex7 .block .bot .right .lists li .name i {
  display: grid;
  align-items: center;
  opacity: 0.7;
}
.allHeaderIndex7 .block .bot .right .lists li .name i svg {
  width: 1rem;
  height: 1rem;
  fill: #000;
}
.allHeaderIndex7 .block .bot .right .lists li .cats {
  display: grid;
  height: 100%;
  padding: 1rem 0;
}
.allHeaderIndex7 .block .bot .right .lists li .cats .name2 {
  font-size: 0.9rem;
  font-weight: 700;
  color: white;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--green-color);
  padding: 0.5rem 1rem;
  cursor: pointer;
  border-radius: 10px;
}
.allHeaderIndex7 .block .bot .right .lists li .cats .name2 i {
  display: grid;
  align-items: center;
}
.allHeaderIndex7 .block .bot .right .lists li .cats .name2 i svg {
  width: 1rem;
  height: 1rem;
  fill: white;
}
.allHeaderIndex7 .block .bot .right .lists li .cats .flow {
  position: absolute;
  top: 100%;
  right: 0;
  left: 0;
  visibility: hidden;
  opacity: 0;
  z-index: 5;
}
.allHeaderIndex7 .block .bot .right .lists li .cats .flow .flowItems {
  background: white;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.05);
  border-radius: 20px;
  margin-top: 0.5rem;
  height: 0;
  transition: all 0.3s ease-in-out;
  overflow: hidden;
  position: relative;
}
.allHeaderIndex7 .block .bot .right .lists li .cats .flow .flowItems .flowItem {
  display: grid;
  grid-template-columns: auto 1fr;
  padding: 0.5rem;
  padding-bottom: 0;
}
.allHeaderIndex7 .block .bot .right .lists li .cats .flow .flowItems .flowItem .flowItemTitle {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  padding: 0.6rem 0.8rem;
  gap: 0.5rem;
  width: 15rem;
  color: #000;
  font-weight: 700;
  border-radius: 10px;
  font-size: 0.9rem;
  position: relative;
  border: 2px solid #eee;
}
.allHeaderIndex7 .block .bot .right .lists li .cats .flow .flowItems .flowItem .flowItemTitle:before {
  content: "";
  margin: auto;
  width: 1rem;
  height: 6px;
  background: var(--green-color);
  border-radius: 5rem;
}
.allHeaderIndex7 .block .bot .right .lists li .cats .flow .flowItems .flowItem .flowItemTitle i {
  visibility: hidden;
  opacity: 0;
  display: grid;
  transition: all 0.3s ease-in-out;
  align-items: center;
}
.allHeaderIndex7 .block .bot .right .lists li .cats .flow .flowItems .flowItem .flowItemTitle i svg {
  width: 0.8rem;
  height: 0.8rem;
  fill: white;
}
.allHeaderIndex7 .block .bot .right .lists li .cats .flow .flowItems .flowItem .flowItemLists {
  position: absolute;
  right: 16rem;
  visibility: hidden;
  top: 0;
  width: calc(100% - 16rem);
  padding: 0.5rem;
  background: #f5f5f5;
  transition: all 0.3s ease-in-out;
  height: 35rem;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  align-content: flex-start;
  align-items: baseline;
}
.allHeaderIndex7 .block .bot .right .lists li .cats .flow .flowItems .flowItem .flowItemLists .flowItemList {
  margin-bottom: 1rem;
  width: 11rem;
  margin-left: 3rem;
  text-align: right;
}
.allHeaderIndex7 .block .bot .right .lists li .cats .flow .flowItems .flowItem .flowItemLists .flowItemList a {
  color: #000;
  font-weight: 300;
  font-size: 0.8rem;
  margin-top: 0.5rem;
  display: grid;
  text-align: right;
  padding: 0;
}
.allHeaderIndex7 .block .bot .right .lists li .cats .flow .flowItems .flowItem .flowItemLists .flowItemList a i svg {
  width: 0.7rem;
  height: 0.7rem;
  fill: #000;
}
.allHeaderIndex7 .block .bot .right .lists li .cats .flow .flowItems .flowItem .flowItemLists .flowItemList .active {
  display: flex;
  justify-content: right;
  gap: 0.5rem;
  align-items: center;
  transition: all 0.3s ease-in-out;
  color: #000;
  font-weight: 700;
  font-size: 0.9rem;
}
.allHeaderIndex7 .block .bot .right .lists li .cats .flow .flowItems .flowItem .flowItemLists .flowItemList .active:before {
  width: 4px;
  height: 20px;
  background: var(--green-color);
  content: "";
  border-radius: 5px;
}
.allHeaderIndex7 .block .bot .right .lists li .cats .flow .flowItems .flowItem:hover .flowItemLists {
  visibility: visible;
}
.allHeaderIndex7 .block .bot .right .lists li .cats .flow .flowItems .flowItem:hover .flowItemTitle {
  background: var(--green-color);
  color: white;
}
.allHeaderIndex7 .block .bot .right .lists li .cats .flow .flowItems .flowItem:hover .flowItemTitle:before {
  background: white;
}
.allHeaderIndex7 .block .bot .right .lists li .cats .flow .flowItems .flowItem:hover .flowItemTitle i {
  opacity: 1;
  visibility: visible;
}
.allHeaderIndex7 .block .bot .right .lists li .cats:hover .flow {
  visibility: visible;
  opacity: 1;
}
.allHeaderIndex7 .block .bot .right .lists li .cats:hover .flow .flowItems {
  height: 35rem;
}
.allHeaderIndex7 .block .bot .left .option {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.8rem;
  color: white;
  cursor: pointer;
  font-weight: 500;
  background: var(--green-color);
  padding: 0.5rem 1rem;
  border-radius: 10px;
}
.allHeaderIndex7 .block .bot .left .option span {
  font-weight: 900;
  font-size: 0.85rem;
}
.allHeaderIndex7 .block .bot .left .option i {
  display: grid;
}
.allHeaderIndex7 .block .bot .left .option i svg {
  width: 1rem;
  height: 1rem;
  fill: white;
}
@media screen and (max-width: 1000px) {
  .allHeaderIndex7 .block .top {
    display: block;
    padding-bottom: 0.5rem;
  }
  .allHeaderIndex7 .block .top .right {
    grid-template-columns: 1fr;
    justify-content: right;
    align-items: center;
    gap: 0.5rem;
  }
  .allHeaderIndex7 .block .top .right .pic img {
    height: 3rem;
    width: 100%;
  }
  .allHeaderIndex7 .block .top .right form {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-gap: 0.5rem;
  }
  .allHeaderIndex7 .block .top .right form .align {
    display: block;
  }
  .allHeaderIndex7 .block .top .right form .align i {
    display: grid;
    align-items: center;
  }
  .allHeaderIndex7 .block .top .right form .align i svg {
    width: 1.5rem;
    height: 1.5rem;
    fill: #000;
  }
  .allHeaderIndex7 .block .top .right form label {
    height: 2.5rem;
  }
  .allHeaderIndex7 .block .top .right form label button {
    padding: 0.5rem;
  }
  .allHeaderIndex7 .block .top .right form label button i svg {
    width: 1rem;
    height: 1rem;
  }
  .allHeaderIndex7 .block .top .right form label input {
    width: 100%;
    font-size: 0.9rem;
  }
  .allHeaderIndex7 .block .top .right .suggest {
    display: none;
  }
  .allHeaderIndex7 .block .top .left {
    display: none;
  }
  .allHeaderIndex7 .block .bot {
    display: none;
  }
}

.allHeaderIndex8 {
  margin: auto;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 2rem 0;
}
.allHeaderIndex8 .pic {
  display: grid;
  align-items: center;
}
.allHeaderIndex8 .pic img {
  max-width: 8rem;
  height: 3rem;
  object-fit: contain;
}
.allHeaderIndex8 .lists {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1.5rem;
}
.allHeaderIndex8 .lists li {
  padding: 1rem 0;
  position: relative;
}
.allHeaderIndex8 .lists li .name {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 1rem;
  font-weight: 700;
  color: #000;
  opacity: 0.7;
}
.allHeaderIndex8 .lists li .name i {
  display: grid;
  align-items: center;
  opacity: 0.7;
}
.allHeaderIndex8 .lists li .name i svg {
  width: 1rem;
  height: 1rem;
  fill: #000;
}
.allHeaderIndex8 .lists li .flowItemLists {
  position: absolute;
  right: 0;
  top: 100%;
  padding: 0.5rem;
  display: none;
}
.allHeaderIndex8 .lists li .flowItemLists .blockL1 {
  background: white;
  box-shadow: 0 4px 16px 0 rgba(36, 43, 61, 0.1);
  padding: 0.5rem;
  border-radius: 15px;
  width: 230px;
}
.allHeaderIndex8 .lists li .flowItemLists .blockL1 .name1 {
  font-size: 0.9rem;
  color: #444;
  font-weight: 700;
  padding: 0.5rem;
  opacity: 0.7;
}
.allHeaderIndex8 .lists li .flowItemLists .blockL1 .item {
  position: relative;
}
.allHeaderIndex8 .lists li .flowItemLists .blockL1 .item .title2 {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  grid-gap: 0.5rem;
  font-size: 0.9rem;
  color: #000;
  font-weight: 300;
  padding: 0.5rem;
  border-radius: 5rem;
}
.allHeaderIndex8 .lists li .flowItemLists .blockL1 .item .title2 i {
  display: grid;
  align-items: center;
}
.allHeaderIndex8 .lists li .flowItemLists .blockL1 .item .title2 i svg {
  width: 1rem;
  height: 1rem;
  fill: #444;
  opacity: 0.7;
}
.allHeaderIndex8 .lists li .flowItemLists .blockL1 .item .flowItemLists2 {
  position: absolute;
  right: 100%;
  top: -1rem;
  display: none;
  padding-right: 1rem;
}
.allHeaderIndex8 .lists li .flowItemLists .blockL1 .item .flowItemLists2 .blockL1 {
  background: white;
  padding: 0.5rem;
  border-radius: 15px;
  width: 230px;
}
.allHeaderIndex8 .lists li .flowItemLists .blockL1 .item .flowItemLists2 .blockL1 .name1 {
  font-size: 0.9rem;
  color: #444;
  font-weight: 700;
  padding: 0.5rem;
  opacity: 0.7;
}
.allHeaderIndex8 .lists li .flowItemLists .blockL1 .item:hover .flowItemLists2 {
  display: block;
}
.allHeaderIndex8 .lists li:hover .flowItemLists {
  display: block;
}
.allHeaderIndex8 .left {
  display: flex;
  justify-content: left;
}
.allHeaderIndex8 .left .login {
  position: relative;
}
.allHeaderIndex8 .left .login i svg {
  width: 2rem;
  height: 2rem;
}
.allHeaderIndex8 .left .login .box {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 5;
  padding-top: 1rem;
}
.allHeaderIndex8 .left .login .box ul {
  background: white;
  width: 12rem;
  border-radius: 15px;
  z-index: 200;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
}
.allHeaderIndex8 .left .login .box ul li {
  border-top: 1px solid #eee;
}
.allHeaderIndex8 .left .login .box ul li a {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem;
  font-size: 0.9rem;
  font-weight: 300;
  color: #000;
}
.allHeaderIndex8 .left .login .box ul li a:before {
  width: 10px;
  content: "";
  height: 3px;
  background: var(--green-color);
  border-radius: 5px;
}
.allHeaderIndex8 .left .login .box ul li:first-child {
  border-top: 0;
}
.allHeaderIndex8 .left .login:hover .box {
  display: block;
}
.allHeaderIndex8 .left .name {
  display: grid;
  align-items: center;
  background: var(--green-color);
  border-radius: 10px;
  font-size: 0.9rem;
  font-weight: 500;
  cursor: pointer;
  color: white;
  padding: 0.5rem 2rem;
}
@media screen and (max-width: 1000px) {
  .allHeaderIndex8 {
    padding: 0.5rem 0;
    display: block;
  }
  .allHeaderIndex8 .pic img {
    max-width: 100%;
    width: 100%;
    height: 4rem;
  }
  .allHeaderIndex8 .lists, .allHeaderIndex8 .left {
    display: none;
  }
}

.allHeaderIndex9 {
  background: white;
  border-bottom: 2px solid #eee;
  position: sticky;
  top: 0;
  z-index: 100;
}
.allHeaderIndex9 .block {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  grid-gap: 3rem;
  margin: auto;
  position: relative;
}
.allHeaderIndex9 .block .logo img {
  height: 3rem;
  width: 100%;
  object-fit: contain;
}
.allHeaderIndex9 .block .cat1 {
  padding: 1rem 0;
}
.allHeaderIndex9 .block .cat1 .link {
  font-size: 1rem;
  font-weight: 700;
  color: black;
  display: flex;
  justify-items: center;
  grid-gap: 0.5rem;
  align-items: center;
  padding: 0.8rem 0;
  cursor: pointer;
  position: relative;
  transition: all 0.3s ease-in-out;
}
.allHeaderIndex9 .block .cat1 .link i {
  display: grid;
  align-items: center;
  justify-content: center;
}
.allHeaderIndex9 .block .cat1 .link i svg {
  transition: all 0.3s ease-in-out;
  width: 1.1rem;
  height: 1.1rem;
  fill: #444;
}
.allHeaderIndex9 .block .cat1 .link:hover {
  color: var(--green-color);
}
.allHeaderIndex9 .block .cat1 .link:hover i svg {
  fill: var(--green-color);
}
.allHeaderIndex9 .block .cat1 .linkCats {
  position: absolute;
  top: 100%;
  right: 0;
  left: 0;
  background: var(--back1-color);
  box-shadow: 0 10px 10px 0 rgba(0, 0, 0, 0.15);
  border-bottom-right-radius: 10px;
  border-bottom-left-radius: 10px;
  display: none;
  height: 40rem;
  transition: all 0.3s ease-in-out;
  margin: auto;
  z-index: 100;
  overflow: hidden;
}
.allHeaderIndex9 .block .cat1 .linkCats .linkCat {
  display: grid;
  grid-template-columns: 1fr 3fr;
}
.allHeaderIndex9 .block .cat1 .linkCats .linkCat:hover .linkCatLists {
  display: block;
}
.allHeaderIndex9 .block .cat1 .linkCats .linkCat:hover .linkCatTitle {
  background: var(--back2-color);
}
.allHeaderIndex9 .block .cat1 .linkCats .linkCat:hover .linkCatTitle i {
  fill: var(--green-color);
}
.allHeaderIndex9 .block .cat1 .linkCats .linkCat:first-child .linkCatLists {
  display: block;
}
.allHeaderIndex9 .block .cat1 .linkCats .linkCat .linkCatTitle {
  display: grid;
  grid-template-columns: auto 1fr auto;
  padding: 1rem;
  color: #000;
  font-weight: 900;
  letter-spacing: 0.5px;
  font-size: 0.9rem;
  position: relative;
  border-bottom: 1px solid #eee;
}
.allHeaderIndex9 .block .cat1 .linkCats .linkCat .linkCatTitle:before {
  content: "";
  margin: auto;
  width: 1.2rem;
  height: 6px;
  background: var(--green-color);
  margin-left: 1rem;
  border-radius: 5rem;
}
.allHeaderIndex9 .block .cat1 .linkCats .linkCat .linkCatTitle i {
  display: grid;
  transition: all 0.3s ease-in-out;
  align-items: center;
}
.allHeaderIndex9 .block .cat1 .linkCats .linkCat .linkCatTitle i svg {
  width: 0.8rem;
  height: 0.8rem;
  fill: #000;
}
.allHeaderIndex9 .block .cat1 .linkCats .linkCat .linkCatLists {
  position: absolute;
  right: 25%;
  width: 75%;
  top: 0;
  display: none;
  transition: all 0.3s ease-in-out;
  height: 40rem;
  overflow: hidden;
  background: white;
  border-right: 1px solid #eee;
}
.allHeaderIndex9 .block .cat1 .linkCats .linkCat .linkCatLists .linkCatLists2 {
  display: grid;
  grid-template-columns: 1fr 2fr;
}
.allHeaderIndex9 .block .cat1 .linkCats .linkCat .linkCatLists .linkCatLists2 .active {
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #000;
  font-weight: 700;
  font-size: 1rem;
  padding: 1rem;
  text-align: right;
  border-bottom: 1px solid #eee;
}
.allHeaderIndex9 .block .cat1 .linkCats .linkCat .linkCatLists .linkCatLists2 .active i svg {
  width: 0.7rem;
  height: 0.7rem;
  fill: #000;
}
.allHeaderIndex9 .block .cat1 .linkCats .linkCat .linkCatLists .linkCatLists2 .linkCatLists3 {
  position: absolute;
  right: 33.5%;
  width: 67%;
  top: 0;
  background: white;
  display: none;
  border-right: 1px solid #eee;
  height: 40rem;
  padding: 1rem;
}
.allHeaderIndex9 .block .cat1 .linkCats .linkCat .linkCatLists .linkCatLists2 .linkCatLists3 .items {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}
.allHeaderIndex9 .block .cat1 .linkCats .linkCat .linkCatLists .linkCatLists2 .linkCatLists3 .items .item .name {
  font-size: 0.9rem;
  font-weight: 500;
  color: #000;
  text-align: center;
  padding: 0.3rem 1rem;
  border-radius: 5px;
  border: 2px solid #eee;
}
.allHeaderIndex9 .block .cat1 .linkCats .linkCat .linkCatLists .linkCatLists2:first-child .linkCatLists3 {
  display: block;
}
.allHeaderIndex9 .block .cat1 .linkCats .linkCat .linkCatLists .linkCatLists2:hover .linkCatLists3 {
  display: block;
}
.allHeaderIndex9 .block .cat1:hover .linkCats {
  display: block;
}
.allHeaderIndex9 .block .right {
  display: grid;
  grid-template-columns: auto auto 1fr;
  align-items: center;
  grid-gap: 1rem;
}
.allHeaderIndex9 .block .right .search {
  position: relative;
}
.allHeaderIndex9 .block .right .search .searchData {
  display: grid;
  grid-template-columns: 1fr auto;
  background: #f3f3f4;
  width: 100%;
  border-radius: 10px;
}
.allHeaderIndex9 .block .right .search .searchData label {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  padding-right: 1rem;
}
.allHeaderIndex9 .block .right .search .searchData button {
  background: transparent;
  display: grid;
  align-items: center;
}
.allHeaderIndex9 .block .right .search .searchData svg {
  width: 1.2rem;
  height: 1.2rem;
  fill: #000;
  margin-left: 1rem;
}
.allHeaderIndex9 .block .right .search .searchData input {
  width: 100%;
  padding: 0.7rem 0;
  font-size: 1rem;
  font-weight: 300;
  color: #000;
  background: transparent;
}
.allHeaderIndex9 .block .right .search ul {
  background: white;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
  z-index: 100;
  border-radius: 10px;
  max-height: 30rem;
  overflow-y: scroll;
  width: 100%;
  position: absolute;
  top: 100%;
  right: 0;
  left: 0;
}
.allHeaderIndex9 .block .right .search ul li a {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  grid-gap: 0.5rem;
  padding: 0.5rem;
}
.allHeaderIndex9 .block .right .search ul li a .pic {
  display: grid;
  justify-content: center;
}
.allHeaderIndex9 .block .right .search ul li a .pic img {
  width: 3rem;
  height: 3rem;
}
.allHeaderIndex9 .block .right .search ul li a .subject h3 {
  font-size: 0.9rem;
  font-weight: 500;
  color: #000;
}
.allHeaderIndex9 .block .right .search ul li a .subject h5 {
  opacity: 0.7;
  font-size: 0.8rem;
  font-weight: 300;
  color: #000;
}
.allHeaderIndex9 .block .right .search ul li a .price {
  font-size: 1rem;
  font-weight: 700;
  color: var(--green-color);
}
.allHeaderIndex9 .block .right .search ul li a .price span {
  font-size: 0.7rem;
}
.allHeaderIndex9 .block .right .search ul li:nth-child(even) {
  background: #fafafb;
}
.allHeaderIndex9 .block .left {
  display: flex;
  align-items: center;
  grid-gap: 2rem;
}
.allHeaderIndex9 .block .left .link {
  font-size: 0.9rem;
  font-weight: 700;
  color: black;
  align-items: center;
  cursor: pointer;
  position: relative;
}
.allHeaderIndex9 .block .left .link i {
  display: grid;
  align-items: center;
  margin-bottom: 0.2rem;
  justify-content: center;
}
.allHeaderIndex9 .block .left .link i svg {
  width: 1.4rem;
  height: 1.4rem;
  fill: #444;
}
.allHeaderIndex9 .block .left .link span {
  position: absolute;
  right: 10px;
  top: -5px;
  padding: 0 5px;
  font-size: 0.6rem;
  font-weight: 300;
  color: white;
  background: var(--green-color);
  border-radius: 5px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
.allHeaderIndex9 .block .left .active1 {
  color: red;
}
.allHeaderIndex9 .block .left .active1 i svg {
  fill: red;
}
.allHeaderIndex9 .block .left .link2 {
  border: 2px solid var(--green-color);
  padding: 0.5rem 1rem;
  border-radius: 10px;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 1rem;
  font-weight: 700;
  color: var(--green-color);
}
.allHeaderIndex9 .block .left .link2 i {
  display: grid;
  align-items: center;
}
.allHeaderIndex9 .block .left .link2 i svg {
  fill: var(--green-color);
  width: 1.5rem;
  height: 1.5rem;
}
@media (max-width: 800px) {
  .allHeaderIndex9 .block {
    display: block;
    padding: 0.5rem 0;
  }
  .allHeaderIndex9 .block .right {
    display: block;
  }
  .allHeaderIndex9 .block .right .search .searchData {
    width: 100%;
    border-radius: 5px;
  }
  .allHeaderIndex9 .block .right .search .searchData button {
    opacity: 0.5;
  }
  .allHeaderIndex9 .block .right .search .searchData button svg {
    width: 1rem;
    height: 1rem;
  }
  .allHeaderIndex9 .block .right .search .searchData input {
    font-size: 0.85rem;
    font-weight: 500;
  }
  .allHeaderIndex9 .bot, .allHeaderIndex9 .logo, .allHeaderIndex9 .left, .allHeaderIndex9 .cat1 {
    display: none !important;
  }
}

.allHeaderIndex10 {
  background: white;
  margin-top: 1rem;
}
.allHeaderIndex10 .top {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
  align-items: center;
  grid-gap: 3rem;
  margin: auto;
  position: relative;
  padding: 1rem 0;
}
.allHeaderIndex10 .top .logo {
  display: grid;
  justify-content: right;
}
.allHeaderIndex10 .top .logo img {
  height: 3rem;
  width: 100%;
  object-fit: contain;
}
.allHeaderIndex10 .top .search {
  position: relative;
}
.allHeaderIndex10 .top .search .searchData {
  display: grid;
  grid-template-columns: 1fr auto;
  background: #f3f3f4;
  width: 100%;
  border-radius: 10px;
}
.allHeaderIndex10 .top .search .searchData label {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  padding-right: 1rem;
}
.allHeaderIndex10 .top .search .searchData button {
  background: transparent;
  display: grid;
  align-items: center;
}
.allHeaderIndex10 .top .search .searchData svg {
  width: 1.2rem;
  height: 1.2rem;
  fill: #000;
  margin-left: 1rem;
}
.allHeaderIndex10 .top .search .searchData input {
  width: 100%;
  padding: 0.7rem 0;
  font-size: 1rem;
  font-weight: 300;
  color: #000;
  background: transparent;
}
.allHeaderIndex10 .top .search ul {
  background: white;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
  z-index: 100;
  border-radius: 10px;
  max-height: 30rem;
  overflow-y: scroll;
  width: 100%;
  position: absolute;
  top: 100%;
  right: 0;
  left: 0;
}
.allHeaderIndex10 .top .search ul li a {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  grid-gap: 0.5rem;
  padding: 0.5rem;
}
.allHeaderIndex10 .top .search ul li a .pic {
  display: grid;
  justify-content: center;
}
.allHeaderIndex10 .top .search ul li a .pic img {
  width: 3rem;
  height: 3rem;
}
.allHeaderIndex10 .top .search ul li a .subject h3 {
  font-size: 0.9rem;
  font-weight: 500;
  color: #000;
}
.allHeaderIndex10 .top .search ul li a .subject h5 {
  opacity: 0.7;
  font-size: 0.8rem;
  font-weight: 300;
  color: #000;
}
.allHeaderIndex10 .top .search ul li a .price {
  font-size: 1rem;
  font-weight: 700;
  color: var(--green-color);
}
.allHeaderIndex10 .top .search ul li a .price span {
  font-size: 0.7rem;
}
.allHeaderIndex10 .top .search ul li:nth-child(even) {
  background: #fafafb;
}
.allHeaderIndex10 .top .left {
  display: flex;
  align-items: center;
  grid-gap: 1rem;
  justify-content: left;
}
.allHeaderIndex10 .top .left .link {
  font-size: 0.9rem;
  font-weight: 700;
  color: #000;
  cursor: pointer;
  align-items: center;
  position: relative;
}
.allHeaderIndex10 .top .left .link i {
  display: grid;
  align-items: center;
  justify-content: center;
}
.allHeaderIndex10 .top .left .link i svg {
  width: 1.5rem;
  height: 1.5rem;
  fill: #444;
}
.allHeaderIndex10 .top .left .link span {
  position: absolute;
  left: -5px;
  top: -5px;
  padding: 0 5px;
  font-size: 0.6rem;
  font-weight: 300;
  color: white;
  background: var(--green-color);
  border-radius: 5px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
.allHeaderIndex10 .top .left .login1 {
  padding: 0.4rem 1rem;
  font-size: 1rem;
  font-weight: 500;
  color: white;
  cursor: pointer;
  background: var(--green-color);
  border-radius: 5rem;
}
.allHeaderIndex10 .bot {
  margin: auto;
  display: flex;
  gap: 2rem;
  justify-content: right;
  align-items: center;
  position: relative;
}
.allHeaderIndex10 .bot .cat1 {
  padding: 1rem 0;
}
.allHeaderIndex10 .bot .cat1 .link i svg {
  width: 1.3rem;
  height: 1.3rem;
  fill: #000;
}
.allHeaderIndex10 .bot .cat1 .linkCats {
  position: absolute;
  top: 100%;
  right: 0;
  left: 0;
  background: var(--back1-color);
  box-shadow: 0 10px 10px 0 rgba(0, 0, 0, 0.15);
  border-bottom-right-radius: 10px;
  border-bottom-left-radius: 10px;
  display: none;
  height: 40rem;
  transition: all 0.3s ease-in-out;
  margin: auto;
  z-index: 100;
  overflow: hidden;
}
.allHeaderIndex10 .bot .cat1 .linkCats .linkCat {
  display: grid;
  grid-template-columns: 1fr 3fr;
}
.allHeaderIndex10 .bot .cat1 .linkCats .linkCat:hover .linkCatLists {
  display: block;
}
.allHeaderIndex10 .bot .cat1 .linkCats .linkCat:hover .linkCatTitle {
  background: var(--back2-color);
}
.allHeaderIndex10 .bot .cat1 .linkCats .linkCat:hover .linkCatTitle i {
  fill: var(--green-color);
}
.allHeaderIndex10 .bot .cat1 .linkCats .linkCat:first-child .linkCatLists {
  display: block;
}
.allHeaderIndex10 .bot .cat1 .linkCats .linkCat .linkCatTitle {
  display: grid;
  grid-template-columns: auto 1fr auto;
  padding: 1rem;
  color: #000;
  font-weight: 900;
  letter-spacing: 0.5px;
  font-size: 0.9rem;
  position: relative;
  border-bottom: 1px solid #eee;
}
.allHeaderIndex10 .bot .cat1 .linkCats .linkCat .linkCatTitle:before {
  content: "";
  margin: auto;
  width: 1.2rem;
  height: 6px;
  background: var(--green-color);
  margin-left: 1rem;
  border-radius: 5rem;
}
.allHeaderIndex10 .bot .cat1 .linkCats .linkCat .linkCatTitle i {
  display: grid;
  transition: all 0.3s ease-in-out;
  align-items: center;
}
.allHeaderIndex10 .bot .cat1 .linkCats .linkCat .linkCatTitle i svg {
  width: 0.8rem;
  height: 0.8rem;
  fill: #000;
}
.allHeaderIndex10 .bot .cat1 .linkCats .linkCat .linkCatLists {
  position: absolute;
  right: 25%;
  width: 75%;
  top: 0;
  display: none;
  transition: all 0.3s ease-in-out;
  height: 40rem;
  overflow: hidden;
  background: white;
  border-right: 1px solid #eee;
}
.allHeaderIndex10 .bot .cat1 .linkCats .linkCat .linkCatLists .linkCatLists2 {
  display: grid;
  grid-template-columns: 1fr 2fr;
}
.allHeaderIndex10 .bot .cat1 .linkCats .linkCat .linkCatLists .linkCatLists2 .active {
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #000;
  font-weight: 700;
  font-size: 1rem;
  padding: 1rem;
  text-align: right;
  border-bottom: 1px solid #eee;
}
.allHeaderIndex10 .bot .cat1 .linkCats .linkCat .linkCatLists .linkCatLists2 .active i svg {
  width: 0.7rem;
  height: 0.7rem;
  fill: #000;
}
.allHeaderIndex10 .bot .cat1 .linkCats .linkCat .linkCatLists .linkCatLists2 .linkCatLists3 {
  position: absolute;
  right: 33.5%;
  width: 67%;
  top: 0;
  background: white;
  display: none;
  border-right: 1px solid #eee;
  height: 40rem;
  padding: 1rem;
}
.allHeaderIndex10 .bot .cat1 .linkCats .linkCat .linkCatLists .linkCatLists2 .linkCatLists3 .items {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}
.allHeaderIndex10 .bot .cat1 .linkCats .linkCat .linkCatLists .linkCatLists2 .linkCatLists3 .items .item .name {
  font-size: 0.9rem;
  font-weight: 500;
  color: #000;
  text-align: center;
  padding: 0.3rem 1rem;
  border-radius: 5px;
  border: 2px solid #eee;
}
.allHeaderIndex10 .bot .cat1 .linkCats .linkCat .linkCatLists .linkCatLists2:first-child .linkCatLists3 {
  display: block;
}
.allHeaderIndex10 .bot .cat1 .linkCats .linkCat .linkCatLists .linkCatLists2:hover .linkCatLists3 {
  display: block;
}
.allHeaderIndex10 .bot .cat1:hover .linkCats {
  display: block;
}
.allHeaderIndex10 .bot .link {
  font-size: 0.9rem;
  font-weight: 500;
  color: #000;
  display: flex;
  justify-items: center;
  grid-gap: 0.5rem;
  align-items: center;
  padding: 0.8rem 0;
  cursor: pointer;
  position: relative;
  transition: all 0.3s ease-in-out;
}
.allHeaderIndex10 .bot .link i {
  display: grid;
  align-items: center;
  justify-content: center;
}
.allHeaderIndex10 .bot .link i svg {
  transition: all 0.3s ease-in-out;
  width: 1.1rem;
  height: 1.1rem;
  fill: #444;
}
.allHeaderIndex10 .bot .link:hover {
  color: var(--green-color);
}
.allHeaderIndex10 .bot .link:hover i svg {
  fill: var(--green-color);
}
@media screen and (max-width: 800px) {
  .allHeaderIndex10 {
    margin-top: 0;
  }
  .allHeaderIndex10 .top {
    grid-template-columns: 1fr;
    grid-gap: 0;
    padding: 0;
  }
  .allHeaderIndex10 .top .logo {
    display: grid;
    justify-content: center;
    margin: 0.5rem 0;
  }
  .allHeaderIndex10 .top .logo img {
    height: 3rem;
  }
  .allHeaderIndex10 .top .left {
    display: none;
  }
  .allHeaderIndex10 .bot {
    display: none;
  }
}

.allHeaderIndex11 {
  background: white;
  position: relative;
}
.allHeaderIndex11 .top {
  display: grid;
  grid-template-columns: auto auto 1fr;
  align-items: center;
  grid-gap: 1rem;
  margin: auto;
  position: relative;
  padding-top: 1rem;
}
.allHeaderIndex11 .top .logo {
  display: grid;
  justify-content: right;
}
.allHeaderIndex11 .top .logo img {
  height: 3rem;
  width: 100%;
  object-fit: contain;
}
.allHeaderIndex11 .top .search {
  position: relative;
}
.allHeaderIndex11 .top .search .searchData {
  display: grid;
  grid-template-columns: 1fr auto;
  background: #F0F0F0;
  width: 100%;
  border-radius: 5px;
}
.allHeaderIndex11 .top .search .searchData label {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  padding-right: 1rem;
}
.allHeaderIndex11 .top .search .searchData button {
  background: transparent;
  display: grid;
  align-items: center;
}
.allHeaderIndex11 .top .search .searchData svg {
  width: 1.2rem;
  height: 1.2rem;
  fill: #444;
  opacity: 0.5;
  margin-left: 1rem;
}
.allHeaderIndex11 .top .search .searchData input {
  width: 30rem;
  padding: 0.9rem 0;
  font-size: 0.9rem;
  font-weight: 700;
  color: #444;
  background: transparent;
}
.allHeaderIndex11 .top .search ul {
  background: white;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
  z-index: 100;
  border-radius: 10px;
  max-height: 30rem;
  overflow-y: scroll;
  width: 100%;
  position: absolute;
  top: 100%;
  right: 0;
  left: 0;
}
.allHeaderIndex11 .top .search ul li a {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  grid-gap: 0.5rem;
  padding: 0.5rem;
}
.allHeaderIndex11 .top .search ul li a .pic {
  display: grid;
  justify-content: center;
}
.allHeaderIndex11 .top .search ul li a .pic img {
  width: 3rem;
  height: 3rem;
}
.allHeaderIndex11 .top .search ul li a .subject h3 {
  font-size: 0.9rem;
  font-weight: 500;
  color: #000;
}
.allHeaderIndex11 .top .search ul li a .subject h5 {
  opacity: 0.7;
  font-size: 0.8rem;
  font-weight: 300;
  color: #000;
}
.allHeaderIndex11 .top .search ul li a .price {
  font-size: 1rem;
  font-weight: 700;
  color: var(--green-color);
}
.allHeaderIndex11 .top .search ul li a .price span {
  font-size: 0.7rem;
}
.allHeaderIndex11 .top .search ul li:nth-child(even) {
  background: #fafafb;
}
.allHeaderIndex11 .top .left {
  display: flex;
  align-items: center;
  grid-gap: 1rem;
  justify-content: left;
}
.allHeaderIndex11 .top .left .link {
  font-size: 0.9rem;
  font-weight: 700;
  color: #000;
  cursor: pointer;
  align-items: center;
  position: relative;
  border: 1px solid #eee;
  padding: 0 10px;
  height: 40px;
  border-radius: 5px;
}
.allHeaderIndex11 .top .left .link i {
  display: grid;
  align-items: center;
  justify-content: center;
}
.allHeaderIndex11 .top .left .link i svg {
  width: 1.2rem;
  height: 1.2rem;
  fill: #444;
}
.allHeaderIndex11 .top .left .link span {
  position: absolute;
  left: -5px;
  top: -5px;
  padding: 0 5px;
  font-size: 0.6rem;
  font-weight: 300;
  color: white;
  background: var(--green-color);
  border-radius: 5px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
.allHeaderIndex11 .top .left .login1 {
  border: 1px solid #000;
  font-size: 0.9rem;
  font-weight: 500;
  color: #000;
  cursor: pointer;
  border-radius: 10px;
  display: flex;
  padding-left: 24px;
  padding-right: 21px;
  height: 40px;
  align-items: center;
}
.allHeaderIndex11 .top .left .login1 span {
  text-align: center;
  padding-right: 22px;
}
.allHeaderIndex11 .top .left .login1 span:first-child {
  padding-right: 0;
  padding-left: 18px;
  border-left: 1px solid #000;
}
.allHeaderIndex11 .bot {
  margin: auto;
  display: flex;
  gap: 2rem;
  justify-content: right;
  align-items: center;
}
.allHeaderIndex11 .bot .cat1 {
  padding: 1rem 0;
}
.allHeaderIndex11 .bot .cat1 .link i svg {
  width: 1.1rem;
  height: 1.1rem;
  fill: #444;
}
.allHeaderIndex11 .bot .cat1 .linkCats {
  position: absolute;
  top: 100%;
  right: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.7);
  display: none;
  height: 40rem;
  transition: all 0.3s ease-in-out;
  margin: auto;
  z-index: 100;
  overflow: hidden;
  border-top: 1px solid #eee;
}
.allHeaderIndex11 .bot .cat1 .linkCats .linkCat {
  display: grid;
  grid-template-columns: 20rem 1fr;
}
.allHeaderIndex11 .bot .cat1 .linkCats .linkCat:hover .linkCatLists {
  display: block;
}
.allHeaderIndex11 .bot .cat1 .linkCats .linkCat:hover .linkCatTitle {
  background: var(--back2-color);
}
.allHeaderIndex11 .bot .cat1 .linkCats .linkCat:hover .linkCatTitle i {
  fill: var(--green-color);
}
.allHeaderIndex11 .bot .cat1 .linkCats .linkCat:first-child .linkCatLists {
  display: block;
}
.allHeaderIndex11 .bot .cat1 .linkCats .linkCat .linkCatTitle {
  display: grid;
  grid-template-columns: auto 1fr auto;
  padding: 1rem;
  color: #000;
  font-weight: 900;
  letter-spacing: 0.5px;
  font-size: 0.9rem;
  position: relative;
  background: white;
  border-bottom: 1px solid #eee;
}
.allHeaderIndex11 .bot .cat1 .linkCats .linkCat .linkCatTitle:before {
  content: "";
  margin: auto;
  width: 1.2rem;
  height: 6px;
  background: var(--green-color);
  margin-left: 1rem;
  border-radius: 5rem;
}
.allHeaderIndex11 .bot .cat1 .linkCats .linkCat .linkCatTitle i {
  display: grid;
  transition: all 0.3s ease-in-out;
  align-items: center;
}
.allHeaderIndex11 .bot .cat1 .linkCats .linkCat .linkCatTitle i svg {
  width: 0.8rem;
  height: 0.8rem;
  fill: #000;
}
.allHeaderIndex11 .bot .cat1 .linkCats .linkCat .linkCatLists {
  position: absolute;
  right: 20rem;
  width: calc(100vw - 50rem);
  top: 0;
  display: none;
  transition: all 0.3s ease-in-out;
  height: 40rem;
  overflow: hidden;
  background: white;
  border-right: 1px solid #eee;
}
.allHeaderIndex11 .bot .cat1 .linkCats .linkCat .linkCatLists .linkCatLists2 {
  display: flex;
}
.allHeaderIndex11 .bot .cat1 .linkCats .linkCat .linkCatLists .linkCatLists2 .active {
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #000;
  font-weight: 700;
  font-size: 1rem;
  padding: 1rem;
  width: 20rem;
  text-align: right;
  border-bottom: 1px solid #eee;
}
.allHeaderIndex11 .bot .cat1 .linkCats .linkCat .linkCatLists .linkCatLists2 .active i svg {
  width: 0.7rem;
  height: 0.7rem;
  fill: #000;
}
.allHeaderIndex11 .bot .cat1 .linkCats .linkCat .linkCatLists .linkCatLists2 .linkCatLists3 {
  position: absolute;
  right: 20rem;
  width: 100%;
  top: 0;
  background: white;
  display: none;
  border-right: 1px solid #eee;
  height: 40rem;
  padding: 1rem;
}
.allHeaderIndex11 .bot .cat1 .linkCats .linkCat .linkCatLists .linkCatLists2 .linkCatLists3 .items {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}
.allHeaderIndex11 .bot .cat1 .linkCats .linkCat .linkCatLists .linkCatLists2 .linkCatLists3 .items .item .name {
  font-size: 0.9rem;
  font-weight: 500;
  color: #000;
  text-align: center;
  padding: 0.3rem 1rem;
  border-radius: 5px;
  border: 2px solid #eee;
}
.allHeaderIndex11 .bot .cat1 .linkCats .linkCat .linkCatLists .linkCatLists2:first-child .linkCatLists3 {
  display: block;
}
.allHeaderIndex11 .bot .cat1 .linkCats .linkCat .linkCatLists .linkCatLists2:hover .linkCatLists3 {
  display: block;
}
.allHeaderIndex11 .bot .cat1 .linkCats .linkCat .empty {
  position: absolute;
  right: 0;
  height: 40rem;
  background: white;
  width: 20rem;
  z-index: -1;
}
.allHeaderIndex11 .bot .cat1:hover .linkCats {
  display: block;
}
.allHeaderIndex11 .bot .link {
  font-size: 0.85rem;
  font-weight: 500;
  color: #444;
  display: flex;
  justify-items: center;
  grid-gap: 0.5rem;
  align-items: center;
  padding: 0.8rem 0;
  cursor: pointer;
  position: relative;
  transition: all 0.3s ease-in-out;
}
.allHeaderIndex11 .bot .link i {
  display: grid;
  align-items: center;
  justify-content: center;
}
.allHeaderIndex11 .bot .link i svg {
  transition: all 0.3s ease-in-out;
  width: 1.1rem;
  height: 1.1rem;
  fill: #444;
}
.allHeaderIndex11 .bot .link:hover {
  color: var(--green-color);
}
.allHeaderIndex11 .bot .link:hover i svg {
  fill: var(--green-color);
}
@media screen and (max-width: 800px) {
  .allHeaderIndex11 {
    margin-top: 0;
  }
  .allHeaderIndex11 .top {
    grid-template-columns: 1fr;
    grid-gap: 0;
    padding: 0;
    padding-bottom: 1rem;
  }
  .allHeaderIndex11 .top .logo {
    display: grid;
    justify-content: center;
    margin: 0.5rem 0;
  }
  .allHeaderIndex11 .top .logo img {
    height: 3rem;
  }
  .allHeaderIndex11 .top .search .searchData label {
    padding-right: 0.5rem;
  }
  .allHeaderIndex11 .top .search .searchData svg {
    width: 1rem;
    height: 1rem;
    margin-left: 0.5rem;
  }
  .allHeaderIndex11 .top .search .searchData input {
    width: 100%;
    padding: 0.8rem 0;
    font-size: 0.8rem;
  }
  .allHeaderIndex11 .top .left {
    display: none;
  }
  .allHeaderIndex11 .bot {
    display: none;
  }
}

.allBannerH img {
  width: 100%;
  object-fit: cover;
}
@media screen and (max-width: 1000px) {
  .allBannerH img {
    height: 2rem;
  }
}

.categoryHeaderResponsive {
  position: fixed;
  top: 0;
  bottom: 0;
  right: 0;
  transition: all 0.3s ease-in-out;
  background: white;
  width: 100%;
  z-index: 900;
  overflow: scroll;
  display: none;
}
.categoryHeaderResponsive .title {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  height: 3rem;
  padding: 0 1rem;
  border-bottom: 1px solid rgb(238, 238, 241);
}
.categoryHeaderResponsive .title span {
  color: #444;
  font-weight: 700;
  font-size: 0.9rem;
}
.categoryHeaderResponsive .title i {
  display: grid;
  align-items: center;
}
.categoryHeaderResponsive .title i svg {
  width: 1.5rem;
  height: 1.5rem;
}
.categoryHeaderResponsive .allCats li .allCatsTitle {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  border-bottom: 1px solid rgb(238, 238, 241);
  height: 3rem;
}
.categoryHeaderResponsive .allCats li .allCatsTitle a {
  color: #444;
  font-weight: 700;
  font-size: 0.9rem;
  padding: 0 1rem;
}
.categoryHeaderResponsive .allCats li .allCatsTitle i {
  display: grid;
  border-right: 1px solid rgb(238, 238, 241);
  align-items: center;
  padding: 0 1rem;
  justify-content: center;
}
.categoryHeaderResponsive .allCats li .allCatsTitle i svg {
  width: 0.7rem;
  height: 0.7rem;
  fill: #444;
}
.categoryHeaderResponsive .allCats li .allCatsList {
  background: #f9f9f9;
  display: none;
  margin-right: 1rem;
}
.categoryHeaderResponsive .allCats li .allCatsList li ul {
  background: white;
}

@media screen and (max-width: 1000px) {
  .categoryHeaderResponsive {
    width: 100%;
  }
}
.allFooterIndex {
  background: var(--back4-color);
  margin-top: 1rem;
  border-top: 1px solid #eee;
}
.allFooterIndex .width {
  margin: auto;
}
.allFooterIndex .width .top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding-top: 1rem;
}
.allFooterIndex .width .top .logo img {
  height: 5rem;
  object-fit: contain;
}
.allFooterIndex .width .top .goTop {
  border: 1px solid #000;
  display: flex;
  align-items: center;
  gap: 1rem;
  font-size: 0.9rem;
  font-weight: 500;
  color: #000;
  opacity: 0.4;
  cursor: pointer;
  padding: 0.5rem 1rem;
  border-radius: 10px;
}
.allFooterIndex .width .top .goTop i {
  display: grid;
  align-items: center;
  transform: rotate(90deg);
}
.allFooterIndex .width .top .goTop i svg {
  width: 1rem;
  height: 1rem;
  fill: #444;
}
.allFooterIndex .width .calls {
  margin-top: 1rem;
  display: flex;
  align-items: center;
  gap: 1rem;
}
.allFooterIndex .width .calls .item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 1rem;
  font-weight: 500;
  color: #444;
  border-left: 2px solid #eee;
  padding-left: 1rem;
}
.allFooterIndex .width .calls .item:last-child {
  border-left: 0;
}
.allFooterIndex .width .containers1 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 1rem;
  padding: 2rem 0;
  border-top: 1px solid rgb(238, 238, 241);
  border-bottom: 1px solid rgb(238, 238, 241);
  margin: 1rem 0;
}
.allFooterIndex .width .containers1 .container .name {
  font-size: 1rem;
  font-weight: 700;
  color: #000;
  display: flex;
  gap: 0.5rem;
  align-items: center;
}
.allFooterIndex .width .containers1 .container .name:before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #000;
}
.allFooterIndex .width .containers1 .container ul li {
  margin-top: 0.5rem;
  font-size: 0.9rem;
  font-weight: 300;
}
.allFooterIndex .width .containers1 .container ul li a {
  color: #000;
  display: flex;
  gap: 0.5rem;
  align-items: center;
}
.allFooterIndex .width .containers1 .container ul li a:before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #444;
  opacity: 0.7;
}
.allFooterIndex .width .containers1 .socials .name {
  font-size: 1rem;
  font-weight: 700;
  color: #000;
  display: flex;
  gap: 0.5rem;
  align-items: center;
  margin-bottom: 0.5rem;
}
.allFooterIndex .width .containers1 .socials .name:before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #000;
}
.allFooterIndex .width .containers1 .socials .items {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  align-items: center;
  margin-bottom: 1rem;
}
.allFooterIndex .width .containers1 .socials .items a {
  border: 1px solid #eee;
  color: #000;
  font-size: 0.8rem;
  font-weight: 300;
  padding: 0.2rem 0.8rem;
  border-radius: 5px;
}
.allFooterIndex .width .containers1 .socials .subscribe {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-gap: 1rem;
}
.allFooterIndex .width .containers1 .socials .subscribe input {
  border-radius: 5rem;
  padding: 0.5rem 1rem;
  color: #000;
  font-size: 1rem;
  border: 1px solid #eee;
  font-weight: 500;
}
.allFooterIndex .width .containers1 .socials .subscribe button {
  background: var(--green-color);
  padding: 0.2rem 2rem;
  border-radius: 5rem;
  color: white;
  font-size: 0.9rem;
  font-weight: 300;
}
.allFooterIndex .width .bot {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-gap: 1rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid rgb(238, 238, 241);
}
.allFooterIndex .width .bot .right .name1 {
  font-size: 1rem;
  font-weight: 900;
  color: #000;
  margin-bottom: 0.5rem;
}
.allFooterIndex .width .bot .right p {
  font-size: 0.85rem;
  font-weight: 500;
  color: #444;
  opacity: 0.8;
}
.allFooterIndex .width .bot .left {
  display: flex;
  justify-content: left;
  flex-wrap: wrap;
  grid-gap: 1rem;
}
.allFooterIndex .width .bot .left .t1 {
  padding: 0.5rem;
  border: 1px solid rgb(238, 238, 241);
  border-radius: 10px;
}
.allFooterIndex .width .bot .left .t1 img {
  height: 5rem;
  object-fit: contain;
}
.allFooterIndex .width .copy {
  padding: 0.5rem 0;
  font-size: 0.9rem;
  font-weight: 500;
  color: #444;
  opacity: 0.8;
}
@media screen and (max-width: 700px) {
  .allFooterIndex {
    padding-top: 1rem;
    padding-bottom: 4rem;
  }
  .allFooterIndex .width {
    margin-top: 0;
  }
  .allFooterIndex .width .top {
    gap: 0.5rem;
  }
  .allFooterIndex .width .top .logo img {
    height: 3rem;
    object-fit: contain;
  }
  .allFooterIndex .width .top .goTop {
    gap: 0.5rem;
    font-size: 0.8rem;
    padding: 0.2rem 0.5rem;
  }
  .allFooterIndex .width .top .goTop i svg {
    width: 0.8rem;
    height: 0.8rem;
  }
  .allFooterIndex .width .calls {
    flex-wrap: wrap;
  }
  .allFooterIndex .width .calls .item {
    font-size: 0.7rem;
    padding-left: 0.5rem;
    border-left: 0;
  }
  .allFooterIndex .width .containers1 {
    grid-template-columns: 1fr;
    grid-gap: 1rem;
    padding: 1rem 0;
    margin: 0.5rem 0;
  }
  .allFooterIndex .width .containers1 .socials .subscribe {
    grid-gap: 0.5rem;
  }
  .allFooterIndex .width .containers1 .socials .subscribe input {
    padding: 0.5rem 0.5rem;
    font-size: 0.9rem;
  }
  .allFooterIndex .width .containers1 .socials .subscribe button {
    padding: 0.2rem 1rem;
    font-size: 0.8rem;
  }
  .allFooterIndex .width .bot {
    display: block;
    text-align: center;
  }
  .allFooterIndex .width .bot .left {
    justify-content: center;
    margin-top: 1rem;
  }
  .allFooterIndex .width .bot .left .t1 img {
    height: 3rem;
  }
  .allFooterIndex .width .copy {
    font-size: 0.75rem;
    text-align: center;
  }
}

.allFooterIndex2 {
  background: white;
  margin-top: 2rem;
  border-top-right-radius: 20px;
  border-top-left-radius: 20px;
  box-shadow: 0 -10px 10px rgba(0, 0, 0, 0.03);
}
.allFooterIndex2 .top {
  margin: auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr) 10rem;
}
.allFooterIndex2 .top .about {
  padding-left: 1rem;
  border-left: 2px solid #eee;
}
.allFooterIndex2 .top .about .logo {
  padding: 0.5rem 0;
}
.allFooterIndex2 .top .about .logo img {
  width: 100%;
  height: 5rem;
  object-fit: contain;
}
.allFooterIndex2 .top .about .body {
  padding: 0.5rem;
  background: #f9f9f9;
  font-size: 0.9rem;
  font-weight: 500;
  color: #444;
  border-radius: 10px;
  display: -webkit-box;
  -webkit-line-clamp: 5;
  -webkit-box-orient: vertical;
  text-overflow: ellipsis;
  overflow: hidden;
  margin-bottom: 0.5rem;
}
.allFooterIndex2 .top .about .item {
  margin-top: 0.5rem;
  font-size: 0.9rem;
  font-weight: 500;
  color: #444;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.allFooterIndex2 .top .about .item:before {
  content: "";
  display: grid;
  width: 13px;
  height: 5px;
  border-radius: 10px;
  background: #444;
}
.allFooterIndex2 .top .page {
  padding: 1rem;
  border-left: 2px solid #eee;
}
.allFooterIndex2 .top .page .title {
  font-size: 1rem;
  font-weight: 900;
  color: var(--green-color);
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.allFooterIndex2 .top .page .title:before {
  content: "";
  display: grid;
  width: 16px;
  height: 5px;
  border-radius: 10px;
  background: var(--green-color);
}
.allFooterIndex2 .top .page .items {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 0.5rem;
  margin-top: 1rem;
}
.allFooterIndex2 .top .page .items .item {
  padding: 0.8rem;
  border-radius: 10px;
  background: #f9f9f9;
  border: 1px solid #eee;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem;
  color: #444;
  font-size: 0.8rem;
  font-weight: 500;
}
.allFooterIndex2 .top .page .items .item i {
  display: grid;
  align-items: center;
  gap: 0.5rem;
}
.allFooterIndex2 .top .page .items .item i svg {
  width: 1rem;
  height: 1rem;
  fill: #444;
}
.allFooterIndex2 .top .trust {
  padding: 1rem;
}
.allFooterIndex2 .top .trust .title {
  font-size: 1rem;
  font-weight: 900;
  color: var(--green-color);
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.allFooterIndex2 .top .trust .title:before {
  content: "";
  display: grid;
  width: 16px;
  height: 5px;
  border-radius: 10px;
  background: var(--green-color);
}
.allFooterIndex2 .top .trust .t1 {
  margin-top: 1rem;
}
.allFooterIndex2 .top .trust .t1 a {
  background: #f9f9f9;
  border-radius: 10px;
  border: 1px solid #eee;
  padding: 0.5rem;
  display: grid;
  justify-content: center;
}
.allFooterIndex2 .top .trust .t1 img {
  height: 5rem;
}
.allFooterIndex2 .bot {
  background: var(--green-color);
  padding: 1rem 0;
  border-top-right-radius: 20px;
  border-top-left-radius: 20px;
}
.allFooterIndex2 .bot .width {
  margin: auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
}
.allFooterIndex2 .bot .width .right {
  font-size: 0.7rem;
  font-weight: 500;
  color: white;
}
.allFooterIndex2 .bot .width .left a {
  background: rgba(247, 247, 247, 0.21);
  padding: 0.3rem 1rem;
  border-radius: 5px;
  color: white;
  font-size: 0.9rem;
  font-weight: 500;
}
@media screen and (max-width: 700px) {
  .allFooterIndex2 .top {
    grid-template-columns: 1fr;
  }
  .allFooterIndex2 .top .about {
    padding-left: 0;
    padding-bottom: 2rem;
    border-left: 0;
    border-bottom: 2px solid #eee;
  }
  .allFooterIndex2 .top .page {
    padding: 1rem 0;
    border-left: 0;
    border-bottom: 2px solid #eee;
  }
  .allFooterIndex2 .top .page .items {
    grid-template-columns: 1fr;
  }
  .allFooterIndex2 .top .trust {
    padding: 1rem 0;
  }
  .allFooterIndex2 .top .trust .left {
    display: flex;
    gap: 0.5rem;
    justify-content: center;
  }
  .allFooterIndex2 .top .trust .t1 {
    margin-top: 1rem;
  }
  .allFooterIndex2 .top .trust .t1 a {
    background: #f9f9f9;
    border-radius: 10px;
    border: 1px solid #eee;
    padding: 0.5rem;
    display: grid;
    justify-content: center;
  }
  .allFooterIndex2 .top .trust .t1 img {
    height: 5rem;
  }
  .allFooterIndex2 .bot {
    padding-bottom: 5rem;
  }
  .allFooterIndex2 .bot .width {
    display: flex;
    flex-direction: column-reverse;
  }
}

.allFooterIndex3 {
  margin-top: 2rem;
  background: var(--back4-color);
}
.allFooterIndex3 .sub {
  padding: 2rem;
  background: white;
}
.allFooterIndex3 .sub .width {
  margin: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
}
.allFooterIndex3 .sub .width .subscribe {
  border: 1px solid #eee;
  border-radius: 15px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.5rem;
  padding: 5px;
}
.allFooterIndex3 .sub .width .subscribe input {
  background: transparent;
  font-size: 0.9rem;
  font-weight: 700;
  padding: 10px;
  width: 20rem;
  color: #000;
}
.allFooterIndex3 .sub .width .subscribe button {
  background: var(--green-color);
  padding: 0.5rem 1rem;
  font-size: 0.9rem;
  font-weight: 500;
  border-radius: 10px;
  color: white;
}
.allFooterIndex3 .sub .width .des .name {
  font-size: 1rem;
  font-weight: 900;
  color: #000;
}
.allFooterIndex3 .sub .width .des p {
  font-size: 0.85rem;
  font-weight: 500;
  color: #444;
  opacity: 0.7;
}
.allFooterIndex3 .mid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 2rem;
  margin: auto;
  padding: 4rem 0;
}
.allFooterIndex3 .mid .right .logo {
  display: grid;
  justify-content: right;
}
.allFooterIndex3 .mid .right .logo img {
  width: 100%;
  height: 3rem;
  object-fit: contain;
}
.allFooterIndex3 .mid .right p {
  font-size: 0.9rem;
  font-weight: 500;
  color: #444;
  margin: 1rem 0;
  text-align: justify;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 5;
  -webkit-box-orient: vertical;
  text-overflow: ellipsis;
}
.allFooterIndex3 .mid .right .options {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 1rem;
}
.allFooterIndex3 .mid .right .options .option {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  background: white;
  border-radius: 10px;
}
.allFooterIndex3 .mid .right .options .option i {
  display: grid;
  align-items: center;
}
.allFooterIndex3 .mid .right .options .option i svg {
  width: 2rem;
  height: 2rem;
  fill: var(--green-color);
}
.allFooterIndex3 .mid .right .options .option .des .name {
  font-size: 0.8rem;
  font-weight: 700;
  color: #444;
  opacity: 0.7;
}
.allFooterIndex3 .mid .right .options .option .des .val {
  font-size: 0.85rem;
  font-weight: 700;
  color: #444;
}
.allFooterIndex3 .mid .left {
  display: grid;
  grid-template-columns: 2fr 1fr;
  grid-gap: 1rem;
  align-items: start;
}
.allFooterIndex3 .mid .left .lists {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 5rem;
}
.allFooterIndex3 .mid .left .lists .list .name {
  font-size: 1rem;
  font-weight: 700;
  color: #000;
}
.allFooterIndex3 .mid .left .lists .list ul li a {
  display: grid;
  font-size: 0.85rem;
  font-weight: 300;
  color: #444;
  margin-top: 1rem;
}
.allFooterIndex3 .mid .left .lists .list:first-child {
  border-left: 1px solid #eee;
  padding-left: 1rem;
}
.allFooterIndex3 .mid .left .trusts .name {
  font-size: 1rem;
  font-weight: 700;
  color: #000;
}
.allFooterIndex3 .mid .left .trusts .items {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  margin-top: 0.5rem;
}
.allFooterIndex3 .mid .left .trusts .items a {
  display: grid;
  padding: 0.2rem 0.5rem;
  border-radius: 5px;
  background: var(--green-color);
  color: white;
  font-size: 0.85rem;
  font-weight: 500;
}
.allFooterIndex3 .mid .left .trusts .ts {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.allFooterIndex3 .mid .left .trusts .ts .t1 {
  margin-top: 1rem;
}
.allFooterIndex3 .mid .left .trusts .ts .t1 a {
  background: #f9f9f9;
  border-radius: 10px;
  border: 1px solid #eee;
  padding: 0.5rem;
  display: grid;
  justify-content: center;
}
.allFooterIndex3 .mid .left .trusts .ts .t1 img {
  height: 5rem;
}
.allFooterIndex3 .bot {
  padding: 1rem;
  font-size: 0.8rem;
  font-weight: 300;
  background: #000;
  text-align: center;
  color: white;
}
@media screen and (max-width: 700px) {
  .allFooterIndex3 {
    padding-bottom: 3rem;
  }
  .allFooterIndex3 .sub {
    padding: 1rem;
  }
  .allFooterIndex3 .sub .width {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.5rem;
  }
  .allFooterIndex3 .sub .width .subscribe {
    border-radius: 10px;
  }
  .allFooterIndex3 .sub .width .subscribe input {
    background: transparent;
    font-size: 0.8rem;
    padding: 5px;
    width: 100%;
  }
  .allFooterIndex3 .sub .width .subscribe button {
    padding: 0.5rem;
    font-size: 0.8rem;
    border-radius: 5px;
  }
  .allFooterIndex3 .sub .width .des .name {
    font-size: 0.85rem;
  }
  .allFooterIndex3 .sub .width .des p {
    font-size: 0.75rem;
  }
  .allFooterIndex3 .mid {
    grid-template-columns: 1fr;
    grid-gap: 1rem;
    padding: 2rem 0;
  }
  .allFooterIndex3 .mid .right .options {
    gap: 0.5rem;
  }
  .allFooterIndex3 .mid .right .options .option {
    padding: 0.5rem;
    border-radius: 5px;
  }
  .allFooterIndex3 .mid .right .options .option i svg {
    width: 1.3rem;
    height: 1.3rem;
  }
  .allFooterIndex3 .mid .right .options .option .des .name {
    font-size: 0.7rem;
  }
  .allFooterIndex3 .mid .right .options .option .des .val {
    font-size: 0.75rem;
  }
  .allFooterIndex3 .mid .left {
    grid-template-columns: 1fr;
    grid-gap: 0.5rem;
  }
  .allFooterIndex3 .mid .left .lists {
    grid-gap: 1rem;
  }
  .allFooterIndex3 .mid .left .lists .list .name {
    font-size: 0.9rem;
  }
  .allFooterIndex3 .mid .left .lists .list ul li a {
    font-size: 0.75rem;
  }
  .allFooterIndex3 .mid .left .lists .list:first-child {
    border-left: 0;
    padding-left: 0;
  }
  .allFooterIndex3 .mid .left .trusts {
    margin-top: 1rem;
  }
  .allFooterIndex3 .mid .left .trusts .name {
    font-size: 0.9rem;
  }
  .allFooterIndex3 .mid .left .trusts .items {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    margin-top: 0.5rem;
  }
  .allFooterIndex3 .mid .left .trusts .items a {
    display: grid;
    padding: 0.2rem 0.5rem;
    border-radius: 5px;
    background: var(--green-color);
    color: white;
    font-size: 0.85rem;
    font-weight: 500;
  }
}

.allFooter4 {
  background: white;
  margin-top: 2rem;
  padding-top: 2rem;
}
.allFooter4 .width {
  margin: auto;
}
.allFooter4 .width .top1 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  justify-content: center;
  align-items: center;
  background: #fafafb;
  padding: 1rem;
  border-radius: 10px;
}
.allFooter4 .width .top1 .option {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  font-size: 0.9rem;
  font-weight: 500;
  color: #000;
}
.allFooter4 .width .top1 .option .pic {
  display: grid;
  align-items: center;
}
.allFooter4 .width .top1 .option .pic img {
  width: 2.5rem;
  height: 2.5rem;
}
.allFooter4 .width .center1 {
  display: grid;
  grid-template-columns: 1fr 3fr;
  grid-gap: 3rem;
  margin-top: 2rem;
}
.allFooter4 .width .center1 .right .pic {
  display: grid;
  justify-content: center;
}
.allFooter4 .width .center1 .right .pic img {
  width: auto;
  height: 5rem;
  object-fit: contain;
}
.allFooter4 .width .center1 .left {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 1rem;
}
.allFooter4 .width .center1 .left .item .title2 {
  font-size: 1.1rem;
  font-weight: 700;
  color: black;
  position: relative;
  margin-bottom: 1rem;
}
.allFooter4 .width .center1 .left .item ul li {
  margin-top: 1rem;
}
.allFooter4 .width .center1 .left .item ul li a {
  font-size: 1rem;
  font-weight: 500;
  color: #444;
}
.allFooter4 .width .center1 .left .item ul li:first-child {
  margin-top: 0;
}
.allFooter4 .width .center1 .left p {
  font-size: 0.8rem;
  font-weight: 300;
  color: #444;
  margin-bottom: 1rem;
}
.allFooter4 .width .center1 .left label {
  display: flex;
  justify-content: left;
  gap: 0.5rem;
  align-items: center;
  overflow: hidden;
}
.allFooter4 .width .center1 .left label input {
  padding: 0.5rem;
  color: #444;
  border: 2px solid #ddd;
  width: 15rem;
  font-size: 1rem;
  font-weight: 300;
  border-radius: 5px;
}
.allFooter4 .width .center1 .left label button {
  background: var(--green-color);
  font-weight: 300;
  font-size: 1rem;
  height: 100%;
  padding: 0.5rem 1rem;
  color: white;
  border-radius: 5px;
}
.allFooter4 .width .abouts {
  display: grid;
  grid-template-columns: 3fr 1fr;
  align-items: start;
  grid-gap: 1rem;
  margin: 3rem 0;
}
.allFooter4 .width .abouts .about {
  position: relative;
}
.allFooter4 .width .abouts .about .title2 {
  font-size: 1.1rem;
  font-weight: 700;
  color: black;
  margin-bottom: 1rem;
}
.allFooter4 .width .abouts .about p {
  font-size: 1rem;
  font-weight: 500;
  color: #000;
  opacity: 0.7;
  display: -webkit-box;
  -webkit-line-clamp: 5;
  -webkit-box-orient: vertical;
  text-overflow: ellipsis;
  overflow: hidden;
}
.allFooter4 .width .abouts .about:after {
  content: "";
  position: absolute;
  bottom: 0;
  right: 0;
  left: 0;
  background: linear-gradient(rgba(255, 255, 255, 0), rgb(255, 255, 255));
  height: 2rem;
  pointer-events: none;
}
.allFooter4 .width .abouts .subs .title2 {
  font-size: 1rem;
  font-weight: 500;
  color: #000;
  position: relative;
  margin-bottom: 0.5rem;
}
.allFooter4 .width .abouts .subs label {
  display: flex;
  justify-content: left;
  gap: 0.5rem;
  align-items: center;
  overflow: hidden;
}
.allFooter4 .width .abouts .subs label input {
  padding: 0.5rem;
  color: #444;
  border: 2px solid #eee;
  width: 100%;
  font-size: 1rem;
  font-weight: 300;
  border-radius: 5px;
}
.allFooter4 .width .abouts .subs label button {
  background: var(--green-color);
  border: 2px solid var(--green-color);
  font-weight: 300;
  font-size: 1rem;
  height: 100%;
  padding: 0.5rem 1rem;
  color: white;
  border-radius: 5px;
}
.allFooter4 .width .abouts .subs .trusts {
  display: flex;
  justify-content: right;
  align-items: center;
  gap: 0.5rem;
  margin-top: 1rem;
}
.allFooter4 .width .abouts .subs .trusts .t1 {
  border-radius: 10px;
  border: 2px solid #eee;
  padding: 0.5rem;
}
.allFooter4 .width .abouts .subs .trusts .t1 img {
  width: 5rem;
  height: 5rem;
  object-fit: contain;
}
.allFooter4 .bot1 {
  padding: 0.2rem 0;
  background: #eee;
}
.allFooter4 .bot1 .copy {
  text-align: center;
  font-size: 0.8rem;
  font-weight: 500;
  color: #000;
}
@media screen and (max-width: 800px) {
  .allFooter4 .width .top1 {
    grid-template-columns: 1fr 1fr;
  }
  .allFooter4 .width .top1 .option {
    gap: 0.5rem;
    font-size: 0.7rem;
  }
  .allFooter4 .width .top1 .option .pic img {
    width: 2rem;
    height: 2rem;
  }
  .allFooter4 .width .center1 {
    display: block;
    padding: 1rem 0;
  }
  .allFooter4 .width .center1 .right {
    margin-bottom: 2rem;
  }
  .allFooter4 .width .center1 .right .pic {
    display: grid;
    justify-content: center;
  }
  .allFooter4 .width .center1 .right p {
    font-size: 0.7rem;
  }
  .allFooter4 .width .center1 .left {
    grid-template-columns: 1fr 1fr;
  }
  .allFooter4 .width .center1 .left .item ul li a {
    font-size: 0.7rem;
  }
  .allFooter4 .width .center1 .left .item ul li a i svg {
    width: 0.7rem;
    height: 0.7rem;
  }
  .allFooter4 .width .abouts {
    display: flex;
    flex-direction: column-reverse;
    margin: 1rem 0;
  }
  .allFooter4 .width .abouts .about .title2 {
    font-size: 0.9rem;
  }
  .allFooter4 .width .abouts .about p {
    font-size: 0.8rem;
  }
}

@media screen and (max-width: 700px) {
  .allFooter3 {
    padding-bottom: 4rem;
  }
}
.AllPopUpIndex {
  position: fixed;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.6);
  z-index: 999;
}
.AllPopUpIndex .AllPopUpData {
  padding: 1rem;
  width: 35%;
  margin: auto;
  border-radius: 0.3rem;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background: white;
}
.AllPopUpIndex .AllPopUpData .pic {
  display: grid;
  justify-content: center;
  margin-bottom: 1rem;
}
.AllPopUpIndex .AllPopUpData .pic img {
  width: 100%;
  height: 5rem;
  object-fit: contain;
}
.AllPopUpIndex .AllPopUpData h3 {
  text-align: center;
  font-size: 1.1rem;
  font-weight: 700;
  color: #000;
  margin-bottom: 0.5rem;
}
.AllPopUpIndex .AllPopUpData p {
  text-align: center;
  font-size: 0.9rem;
  font-weight: 500;
  color: #000;
  opacity: 0.7;
}
.AllPopUpIndex .AllPopUpData .buttons {
  display: grid;
  justify-content: center;
  margin-top: 1rem;
}
.AllPopUpIndex .AllPopUpData .buttons a {
  text-align: center;
  font-size: 0.9rem;
  font-weight: 500;
  background: var(--green-color);
  color: white;
  padding: 0.2rem 1rem;
  border-radius: 5px;
}
@media screen and (max-width: 920px) {
  .AllPopUpIndex .AllPopUpData {
    width: 90%;
  }
}

.allStoryIndex {
  margin-top: 1rem;
}
.allStoryIndex .stories-row {
  overflow: hidden;
  align-items: center;
}
.allStoryIndex .stories {
  margin: auto;
}
.allStoryIndex .story-item {
  width: 90px;
  text-align: center;
  cursor: pointer;
  padding: 3px;
}
.allStoryIndex .story-item .story-thumb {
  width: 84px;
  height: 84px;
  border-radius: 50%;
  overflow: hidden;
  background: white;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--green-color);
  padding: 3px;
}
.allStoryIndex .story-item .story-thumb .story-pic {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: white;
  padding: 3px;
  overflow: hidden;
}
.allStoryIndex .story-item .story-thumb img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
}
.allStoryIndex .story-item .story-name {
  margin-top: 8px;
  text-align: center;
  font-size: 0.9rem;
  font-weight: 700;
  color: #000;
}
.allStoryIndex .nav-btn {
  background: #111;
  color: white;
  border: none;
  padding: 8px 10px;
  border-radius: 8px;
  cursor: pointer;
  margin: 0 6px;
}
.allStoryIndex .story-viewer {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.85);
  display: none;
  z-index: 9999;
}
.allStoryIndex .viewer-inner {
  width: 420px;
  max-width: 98%;
  height: 720px;
  max-height: 92%;
  background: #000;
  border-radius: 12px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
.allStoryIndex .viewer-header {
  padding: 10px;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 8px;
  align-items: center;
}
.allStoryIndex .progresses {
  flex: 1;
  display: flex;
  gap: 6px;
}
.allStoryIndex .progress {
  height: 4px;
  background: rgba(255, 255, 255, 0.25);
  flex: 1;
  border-radius: 2px;
  overflow: hidden;
}
.allStoryIndex .progress > i {
  display: block;
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, #fff, #ddd);
}
.allStoryIndex .viewer-meta {
  display: flex;
  gap: 10px;
  align-items: center;
}
.allStoryIndex .viewer-meta img {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
}
.allStoryIndex .viewer-meta .name {
  font-size: 1rem;
  font-weight: 700;
  color: white;
}
.allStoryIndex .viewer-body {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.allStoryIndex .viewer-body img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}
.allStoryIndex .viewer-body video {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}
.allStoryIndex .viewer-controls {
  padding: 10px;
  display: flex;
  justify-content: center;
  gap: 8px;
  position: absolute;
  bottom: 1rem;
  right: 0;
  left: 0;
  z-index: 10;
}
.allStoryIndex .viewer-controls button {
  background: white;
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #000;
  padding: 6px 10px;
  border-radius: 8px;
  cursor: pointer;
}
@media screen and (max-width: 700px) {
  .allStoryIndex .story-item {
    width: 70px;
  }
  .allStoryIndex .story-item .story-thumb {
    width: 70px;
    height: 70px;
  }
  .allStoryIndex .story-item .story-name {
    margin-top: 5px;
    font-size: 0.65rem;
  }
}

.AllAdIndex2 {
  margin: auto;
  display: grid;
  grid-template-columns: 270px 1fr;
  grid-gap: 1rem;
  margin-top: 1rem;
}
.AllAdIndex2 .slider-ad2 {
  border-radius: 15px;
  overflow: hidden;
  display: grid;
  min-width: 0;
}
.AllAdIndex2 .slider-ad2 .item {
  overflow: hidden;
  display: grid;
}
.AllAdIndex2 .slider-ad2 img {
  width: 100%;
  object-fit: cover;
}
.AllAdIndex2 .slider-ad2 .owl-dots {
  position: absolute;
  bottom: 1rem;
  right: 0;
  left: 0;
  display: flex;
  justify-content: center;
  gap: 0.5rem;
}
.AllAdIndex2 .slider-ad2 .owl-dots .owl-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: white;
}
.AllAdIndex2 .slider-ad2 .owl-dots .owl-dot.active {
  background: var(--green-color);
}
@media screen and (max-width: 1000px) {
  .AllAdIndex2 {
    display: block;
    margin-top: 0.5rem;
  }
}

.propertyIndex1 {
  margin: auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  grid-gap: 1rem;
}
.propertyIndex1 .item {
  display: grid;
  grid-template-columns: auto 1fr;
  justify-content: center;
  align-items: center;
  grid-gap: 0.5rem;
}
.propertyIndex1 .item .pic img {
  object-fit: contain;
  width: 3.8rem;
  height: 3.8rem;
}
.propertyIndex1 .item .des {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
.propertyIndex1 .item .des .name {
  font-size: 1rem;
  font-weight: 900;
  color: #000;
  margin-bottom: 5px;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
.propertyIndex1 .item .des .body {
  font-size: 0.8rem;
  font-weight: 900;
  color: #444;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  opacity: 0.7;
}
@media screen and (max-width: 700px) {
  .propertyIndex1 {
    grid-template-columns: 1fr 1fr;
    grid-gap: 0.5rem;
  }
  .propertyIndex1 .item .pic img {
    object-fit: contain;
    width: 2rem;
    height: 2rem;
  }
  .propertyIndex1 .item .des .name {
    font-size: 0.8rem;
  }
  .propertyIndex1 .item .des .body {
    font-size: 0.6rem;
  }
}

.propertyIndex2 {
  margin: auto;
  margin-top: 7rem;
  margin-bottom: 4rem;
}
.propertyIndex2 .titles .name {
  text-align: center;
  font-size: 2.5rem;
  font-weight: 900;
  position: relative;
}
.propertyIndex2 .titles .name:before {
  content: "";
  position: absolute;
  top: 100%;
  width: 5rem;
  right: 0;
  left: 0;
  margin: auto;
  background: var(--red-color);
  height: 7px;
  border-radius: 10px;
  box-shadow: 0 5px 5px rgba(0, 0, 0, 0.1);
}
.propertyIndex2 .titles p {
  font-size: 1.1rem;
  opacity: 0.7;
  font-weight: 500;
  color: #000;
  width: 40%;
  margin: auto;
  margin-top: 2rem;
  text-align: center;
}
.propertyIndex2 .items {
  display: flex;
  justify-content: center;
  gap: 2rem;
  margin-top: 2rem;
}
.propertyIndex2 .items .item {
  flex: 1 auto;
  position: relative;
  z-index: 1;
}
.propertyIndex2 .items .item .des {
  padding: 2rem 1rem;
  border-radius: 20px;
  position: relative;
  z-index: 2;
  background: white;
}
.propertyIndex2 .items .item .des .pic {
  display: grid;
  justify-content: center;
}
.propertyIndex2 .items .item .des .name {
  text-align: center;
  font-size: 1rem;
  font-weight: 900;
  color: #000;
  margin-top: 0.5rem;
}
.propertyIndex2 .items .item:before {
  border-radius: 20px;
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  box-shadow: 0 0 30px var(--red-color);
  opacity: 0.1;
}
.propertyIndex2 .items .item:nth-child(2n) {
  transform: translateY(20px);
}
.propertyIndex2 .items .item:nth-child(3n) {
  transform: translateY(40px);
}
@media screen and (max-width: 700px) {
  .propertyIndex2 {
    margin-top: 5rem;
    margin-bottom: 0;
  }
  .propertyIndex2 .titles .name {
    font-size: 1.8rem;
  }
  .propertyIndex2 .titles .name:before {
    width: 2rem;
    height: 4px;
  }
  .propertyIndex2 .titles p {
    font-size: 0.9rem;
    width: 100%;
    margin-top: 1rem;
  }
  .propertyIndex2 .items {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
    margin-top: 1rem;
  }
  .propertyIndex2 .items .item .pic img {
    height: 3rem;
  }
  .propertyIndex2 .items .item .des {
    padding: 1rem 0.5rem;
    border-radius: 10px;
  }
  .propertyIndex2 .items .item .des .name {
    font-size: 0.8rem;
  }
  .propertyIndex2 .items .item:before {
    box-shadow: 0 0 20px var(--red-color);
  }
  .propertyIndex2 .items .item:nth-child(2n) {
    transform: translateY(0px);
  }
  .propertyIndex2 .items .item:nth-child(3n) {
    transform: translateY(0px);
  }
}

.propertyIndex3 {
  margin: auto;
  margin-top: 10rem;
}
.propertyIndex3 .titles .name {
  text-align: center;
  font-size: 2.5rem;
  font-weight: 900;
  position: relative;
}
.propertyIndex3 .titles .name:before {
  content: "";
  position: absolute;
  top: 100%;
  width: 5rem;
  right: 0;
  left: 0;
  margin: auto;
  background: var(--red-color);
  height: 7px;
  border-radius: 10px;
  box-shadow: 0 5px 5px rgba(0, 0, 0, 0.1);
}
.propertyIndex3 .titles p {
  font-size: 1.1rem;
  opacity: 0.7;
  font-weight: 500;
  color: #000;
  width: 40%;
  margin: auto;
  margin-top: 2rem;
  text-align: center;
}
.propertyIndex3 .items {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 2rem;
  margin-top: 3rem;
}
.propertyIndex3 .items .item {
  background: #f1f1f1;
  border-radius: 15px;
  width: 10rem;
  padding: 1rem;
}
.propertyIndex3 .items .item .name {
  text-align: center;
  font-size: 1rem;
  font-weight: 900;
  color: #000;
}
@media screen and (max-width: 700px) {
  .propertyIndex3 {
    margin-top: 5rem;
    margin-bottom: 0;
  }
  .propertyIndex3 .titles .name {
    font-size: 1.8rem;
  }
  .propertyIndex3 .titles .name:before {
    width: 2rem;
    height: 4px;
  }
  .propertyIndex3 .titles p {
    font-size: 0.9rem;
    width: 100%;
    margin-top: 1rem;
  }
  .propertyIndex3 .items {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
    margin-top: 2rem;
  }
  .propertyIndex3 .items .item {
    width: 100%;
    border-radius: 10px;
    padding: 0.5rem;
  }
  .propertyIndex3 .items .item .name {
    font-size: 0.9rem;
  }
}

.AllSampleIndex1 {
  margin: auto;
  margin-top: 10rem;
}
.AllSampleIndex1 .titles {
  display: grid;
  justify-content: center;
}
.AllSampleIndex1 .titles .name {
  text-align: center;
  font-size: 2.5rem;
  font-weight: 900;
  color: #000;
  position: relative;
}
.AllSampleIndex1 .titles .name:before {
  content: "";
  position: absolute;
  top: 100%;
  width: 5rem;
  right: 0;
  left: 0;
  margin: auto;
  background: var(--red-color);
  height: 7px;
  border-radius: 10px;
  box-shadow: 0 5px 5px rgba(0, 0, 0, 0.1);
}
.AllSampleIndex1 .titles p {
  font-size: 1.1rem;
  opacity: 0.7;
  font-weight: 500;
  color: #000;
  width: 40%;
  margin: auto;
  margin-top: 2rem;
  text-align: center;
}
.AllSampleIndex1 .slider-sample1 .item {
  position: relative;
  z-index: 1;
  padding: 1rem;
}
.AllSampleIndex1 .slider-sample1 .item .des {
  position: relative;
  z-index: 2;
  background: white;
  border-radius: 15px;
}
.AllSampleIndex1 .slider-sample1 .item .des .pic {
  border-radius: 15px;
  overflow: hidden;
}
.AllSampleIndex1 .slider-sample1 .item .des .dd {
  padding: 1rem;
}
.AllSampleIndex1 .slider-sample1 .item .des .dd .title, .AllSampleIndex1 .slider-sample1 .item .des .dd p {
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  text-overflow: ellipsis;
  font-size: 1rem;
  font-weight: 700;
  color: #000;
  margin-bottom: 0.5rem;
}
.AllSampleIndex1 .slider-sample1 .item .des .dd p {
  -webkit-line-clamp: 2;
  font-weight: 500;
  font-size: 0.9rem;
  opacity: 0.7;
  margin-bottom: 0;
  height: auto;
}
.AllSampleIndex1 .slider-sample1 .item:before {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 1rem;
  box-shadow: 0 0 20px var(--red-color);
  opacity: 0.2;
  border-radius: 15px;
}
@media screen and (max-width: 1000px) {
  .AllSampleIndex1 {
    margin-top: 5rem;
  }
  .AllSampleIndex1 .titles .name {
    font-size: 1.8rem;
  }
  .AllSampleIndex1 .titles .name:before {
    width: 2rem;
    height: 4px;
  }
  .AllSampleIndex1 .titles p {
    font-size: 0.9rem;
    width: 100%;
    margin-top: 1rem;
  }
  .AllSampleIndex1 .slider-sample1 .item {
    padding: 0.2rem;
  }
  .AllSampleIndex1 .slider-sample1 .item .des {
    border-radius: 10px;
  }
  .AllSampleIndex1 .slider-sample1 .item .des .pic {
    border-radius: 10px;
  }
  .AllSampleIndex1 .slider-sample1 .item .des .dd {
    padding: 0.5rem;
  }
  .AllSampleIndex1 .slider-sample1 .item .des .dd .title, .AllSampleIndex1 .slider-sample1 .item .des .dd p {
    font-size: 0.85rem;
  }
  .AllSampleIndex1 .slider-sample1 .item .des .dd p {
    font-size: 0.8rem;
  }
  .AllSampleIndex1 .slider-sample1 .item:before {
    inset: 0.2rem;
    box-shadow: 0 0 10px var(--red-color);
    opacity: 0.1;
  }
}

.projectIndex1 {
  margin: auto;
  margin-top: 10rem;
}
.projectIndex1 .titles {
  margin-bottom: 2rem;
  display: grid;
  justify-content: center;
}
.projectIndex1 .titles .name {
  text-align: center;
  font-size: 2.5rem;
  font-weight: 900;
  position: relative;
  color: #000;
}
.projectIndex1 .titles .name:before {
  content: "";
  position: absolute;
  top: 100%;
  width: 5rem;
  right: 0;
  left: 0;
  margin: auto;
  background: var(--red-color);
  height: 7px;
  border-radius: 10px;
  box-shadow: 0 5px 5px rgba(0, 0, 0, 0.1);
}
.projectIndex1 .titles p {
  font-size: 1.1rem;
  opacity: 0.7;
  font-weight: 500;
  color: #000;
  width: 80%;
  margin: auto;
  margin-top: 2rem;
  text-align: center;
}
.projectIndex1 .slider-project1 .item {
  position: relative;
  z-index: 1;
  padding: 1rem;
}
.projectIndex1 .slider-project1 .item a {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  position: relative;
  z-index: 2;
  background: white;
  border-radius: 15px;
  padding: 1rem;
}
.projectIndex1 .slider-project1 .item a .pic img {
  border-radius: 15px;
  width: 7rem;
  height: 7rem;
  object-fit: cover;
}
.projectIndex1 .slider-project1 .item a .des {
  padding: 1rem;
}
.projectIndex1 .slider-project1 .item a .des .title, .projectIndex1 .slider-project1 .item a .des .body {
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  text-overflow: ellipsis;
  font-size: 1rem;
  font-weight: 700;
  color: #000;
  margin-bottom: 0.5rem;
}
.projectIndex1 .slider-project1 .item a .des .body {
  -webkit-line-clamp: 2;
  font-weight: 500;
  font-size: 0.9rem;
  opacity: 0.5;
  margin-bottom: 0;
}
.projectIndex1 .slider-project1 .item a i {
  display: grid;
  align-items: center;
  background: #f5f5f5;
  border-radius: 15px;
  padding: 1rem;
}
.projectIndex1 .slider-project1 .item a i svg {
  width: 2rem;
  height: 2rem;
  color: var(--green-color);
}
.projectIndex1 .slider-project1 .item:before {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 1rem;
  box-shadow: 0 0 20px var(--red-color);
  opacity: 0.1;
  border-radius: 15px;
}
@media screen and (max-width: 1000px) {
  .projectIndex1 {
    margin-top: 5rem;
  }
  .projectIndex1 .titles .name {
    font-size: 1.8rem;
  }
  .projectIndex1 .titles .name:before {
    width: 2rem;
    height: 4px;
  }
  .projectIndex1 .titles p {
    font-size: 0.9rem;
    width: 100%;
    margin-top: 1rem;
  }
  .projectIndex1 .slider-project1 .item {
    padding: 0.5rem;
  }
  .projectIndex1 .slider-project1 .item a {
    border-radius: 10px;
    padding: 0.5rem;
  }
  .projectIndex1 .slider-project1 .item a .pic img {
    border-radius: 10px;
    width: 5rem;
    height: 5rem;
  }
  .projectIndex1 .slider-project1 .item a .des {
    padding: 0.5rem;
  }
  .projectIndex1 .slider-project1 .item a .des .title, .projectIndex1 .slider-project1 .item a .des .body {
    font-size: 0.8rem;
  }
  .projectIndex1 .slider-project1 .item a .des .body {
    font-size: 0.7rem;
  }
  .projectIndex1 .slider-project1 .item a i {
    padding: 0.5rem;
  }
  .projectIndex1 .slider-project1 .item a i svg {
    width: 1.5rem;
    height: 1.5rem;
  }
}

.allRepairIndex {
  display: grid;
  justify-items: center;
  align-items: center;
  align-content: center;
  height: 100dvh;
}
.allRepairIndex .box {
  background: var(--green-color);
  padding: 1rem;
  border-radius: 15px;
  width: 50%;
  margin: auto;
  text-align: center;
}
.allRepairIndex .box .pic {
  display: grid;
  justify-items: center;
  align-items: center;
  margin-bottom: 1rem;
}
.allRepairIndex .box .pic img {
  width: 100%;
  height: 8rem;
  object-fit: contain;
}
.allRepairIndex .box .title {
  text-align: center;
  font-size: 2rem;
  font-weight: 900;
  margin-bottom: 1rem;
  color: white;
}
.allRepairIndex .box p {
  text-align: center;
  font-size: 1rem;
  font-weight: 500;
  display: grid;
  color: white;
  margin-bottom: 3rem;
}
.allRepairIndex .box .countdown {
  text-align: center;
  direction: ltr;
}
.allRepairIndex .box .countdown .countdown-section {
  display: inline-block;
  width: 65px;
}
.allRepairIndex .box .countdown .countdown-section .countdown-time {
  background-color: white;
  border-radius: 10px;
  color: #000;
  display: block;
  height: 55px;
  line-height: 55px;
  margin: auto;
  font-weight: 900;
  width: 55px;
  font-size: 1.5rem;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
@media screen and (max-width: 1000px) {
  .allRepairIndex .box {
    padding: 0.5rem;
    border-radius: 10px;
    width: 98%;
  }
  .allRepairIndex .box .pic img {
    height: 6rem;
  }
  .allRepairIndex .box .title {
    font-size: 1.5rem;
  }
  .allRepairIndex .box p {
    font-size: 0.8rem;
    margin-bottom: 2rem;
  }
  .allRepairIndex .box .countdown .countdown-section {
    width: 45px;
  }
  .allRepairIndex .box .countdown .countdown-section .countdown-time {
    border-radius: 5px;
    height: 35px;
    line-height: 35px;
    width: 35px;
    font-size: 1rem;
  }
}

.allBottomNavs {
  position: fixed;
  bottom: 0;
  right: 0;
  left: 0;
  background: white;
  box-shadow: 0 -10px 10px rgba(0, 0, 0, 0.1);
  z-index: 99;
  display: none;
  grid-template-columns: repeat(auto-fit, minmax(1px, 1fr));
}
.allBottomNavs .button {
  display: grid;
  padding: 0.2rem 0.2rem;
  text-align: center;
  font-size: 0.7rem;
  color: #444;
  opacity: 0.8;
  position: relative;
}
.allBottomNavs .button i {
  display: grid;
  align-items: center;
  justify-content: center;
  margin-bottom: 10px;
}
.allBottomNavs .button i svg {
  width: 1.2rem;
  height: 1.2rem;
  fill: #444;
}
.allBottomNavs .button #cartCount {
  position: absolute;
  top: 0;
  left: 1rem;
  font-size: 0.6rem;
  background: red;
  font-weight: 300;
  height: 15px;
  width: 15px;
  color: white;
  display: grid;
  align-items: center;
  justify-content: center;
  border-radius: 5px;
}
.allBottomNavs .button:last-child {
  border-left: 0;
}
.allBottomNavs .home1 {
  opacity: 1;
  color: var(--green-color);
}
.allBottomNavs .home1 i svg {
  fill: var(--green-color);
}

@media screen and (max-width: 900px) {
  .allBottomNavs {
    display: grid;
  }
}
.allSuggestFlow {
  position: fixed;
  bottom: 1rem;
  left: 1rem;
  z-index: 10;
}
.allSuggestFlow .product {
  display: grid;
  background: white;
  box-shadow: 0px 4px 24px 0px rgba(0, 0, 0, 0.1);
  border: 1px solid #eee;
  border-radius: 15px;
  width: 12rem;
  padding: 0.5rem;
  position: relative;
}
.allSuggestFlow .product .close {
  position: absolute;
  top: -0.5rem;
  right: 0;
  background: red;
  display: grid;
  align-items: center;
  border-radius: 50%;
}
.allSuggestFlow .product .close svg {
  width: 1.2rem;
  height: 1.2rem;
  fill: white;
}
.allSuggestFlow .product .tag {
  margin-top: -1.2rem;
}
.allSuggestFlow .product .tag span {
  display: grid;
  background: rgb(255, 218, 218);
  text-align: center;
  font-size: 0.8rem;
  font-weight: 700;
  color: red;
  padding: 0.2rem;
  border-radius: 8px;
}
.allSuggestFlow .product .pic img {
  height: 10rem;
  width: 100%;
  object-fit: contain;
}
.allSuggestFlow .product .content {
  display: grid;
  align-items: end;
  font-size: 0.85rem;
  text-align: center;
  font-weight: 900;
  color: #000;
  margin-top: 0.5rem;
}
.allSuggestFlow .product .content span {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
.allSuggestFlow .product .prices {
  display: flex;
  margin-top: 0.5rem;
  justify-content: space-between;
}
.allSuggestFlow .product .prices .off {
  background: var(--green-color);
  color: white;
  padding: 3px 5px;
  font-size: 0.8rem;
  border-radius: 10px;
}
.allSuggestFlow .product .prices .price {
  font-size: 1rem;
  font-weight: 900;
  color: #000;
}
.allSuggestFlow .product .prices .price span {
  font-size: 0.7rem;
  font-weight: 500;
}
@media screen and (max-width: 1000px) {
  .allSuggestFlow {
    bottom: 4rem;
    left: 0.5rem;
  }
  .allSuggestFlow .product {
    width: 8rem;
  }
  .allSuggestFlow .product .close svg {
    width: 1.1rem;
    height: 1.1rem;
  }
  .allSuggestFlow .product .tag {
    margin-top: -1.2rem;
  }
  .allSuggestFlow .product .tag span {
    font-size: 0.7rem;
    padding: 0.2rem;
  }
  .allSuggestFlow .product .pic img {
    height: 6rem;
  }
  .allSuggestFlow .product .content {
    font-size: 0.65rem;
  }
  .allSuggestFlow .product .prices .off {
    font-size: 0.7rem;
    padding: 2px 5px;
    border-radius: 5px;
  }
  .allSuggestFlow .product .prices .price {
    font-size: 0.8rem;
  }
  .allSuggestFlow .product .prices .price span {
    font-size: 0.6rem;
  }
}

.allChatFloat {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 1000;
  box-shadow: 10px 0 10px rgba(0, 0, 0, 0.15);
  direction: ltr;
}
.allChatFloat .chatBox {
  direction: rtl;
  width: 30rem;
  background: white;
  margin-left: -30rem;
  transition: all 0.3s ease-in-out;
}
.allChatFloat .chatBox .block {
  position: relative;
}
.allChatFloat .chatBox .block .load {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: grid;
  justify-content: center;
  align-items: center;
  font-size: 2rem;
  font-weight: 700;
  color: white;
}
.allChatFloat .chatBox .titleAll {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem;
  padding: 1rem;
  border-bottom: 1px solid #eee;
}
.allChatFloat .chatBox .titleAll .name {
  font-size: 1rem;
  font-weight: 500;
  color: #000;
}
.allChatFloat .chatBox .titleAll i {
  display: grid;
  align-items: center;
  justify-content: center;
}
.allChatFloat .chatBox .titleAll i svg {
  width: 1.3rem;
  height: 1.3rem;
  fill: #000;
}
.allChatFloat .chatBox .items {
  height: calc(100vh - 3rem);
  overflow-y: scroll;
}
.allChatFloat .chatBox .items .item {
  padding: 1rem;
  display: grid;
  grid-template-columns: auto 1fr;
  grid-gap: 1rem;
  border-bottom: 1px solid #ddd;
  cursor: pointer;
}
.allChatFloat .chatBox .items .item .pic {
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  overflow: hidden;
}
.allChatFloat .chatBox .items .item .detail .title2 {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}
.allChatFloat .chatBox .items .item .detail .title2 .name {
  line-height: 1.7rem;
  font-size: 0.8rem;
  font-weight: 900;
  color: #444;
}
.allChatFloat .chatBox .items .item .detail .title2 .name a {
  color: red;
  border-bottom: 1px solid red;
  padding: 0 3px;
}
.allChatFloat .chatBox .items .item .detail .title2 .time {
  font-size: 0.8rem;
  font-weight: 300;
  color: #000;
}
.allChatFloat .chatBox .items .item .detail .body {
  font-size: 0.8rem;
  font-weight: 300;
  color: #000;
}
.allChatFloat .chatBox .emptyChat {
  padding: 15px;
  background: #eee;
  height: calc(100vh - 3.7rem);
  text-align: center;
  font-size: 1rem;
  font-weight: 500;
  color: red;
}
.allChatFloat .chatBox .emptyChat br {
  margin: 0.5rem 0;
}
.allChatFloat .chatBox .container .chat {
  display: grid;
  color: #434651;
}
.allChatFloat .chatBox .container .chat .chat-header {
  padding: 10px;
  border-bottom: 1px solid #eee;
  display: flex;
  align-items: center;
  justify-content: space-between;
  grid-gap: 1rem;
}
.allChatFloat .chatBox .container .chat .chat-header .chat-with {
  font-weight: bold;
  font-size: 16px;
}
.allChatFloat .chatBox .container .chat .chat-header .chatBack {
  display: grid;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.allChatFloat .chatBox .container .chat .chat-header .chatBack svg {
  width: 1rem;
  height: 1rem;
  fill: #000;
}
.allChatFloat .chatBox .container .chat .chat-history {
  padding: 15px;
  overflow-y: scroll;
  background: #eee;
  height: calc(100vh - 5.7rem);
}
.allChatFloat .chatBox .container .chat .chat-history .message-data {
  display: flex;
  align-items: center;
  margin-bottom: 15px;
}
.allChatFloat .chatBox .container .chat .chat-history .message-data-time {
  color: #000;
  font-size: 0.6rem;
  padding-right: 6px;
}
.allChatFloat .chatBox .container .chat .chat-history .message-data-name {
  color: black;
  font-size: 0.9rem;
}
.allChatFloat .chatBox .container .chat .chat-history ul {
  display: grid;
}
.allChatFloat .chatBox .container .chat .chat-history .message {
  color: white;
  padding: 10px 20px;
  line-height: 26px;
  font-size: 13px;
  border-radius: 5px;
  margin-bottom: 30px;
  max-width: 90%;
  position: relative;
}
.allChatFloat .chatBox .container .chat .chat-history .message i {
  display: grid;
  align-items: center;
  justify-content: left;
  margin-top: 0.3rem;
}
.allChatFloat .chatBox .container .chat .chat-history .message i svg {
  width: 1rem;
  height: 1rem;
  fill: white;
}
.allChatFloat .chatBox .container .chat .chat-history .message:after {
  bottom: 100%;
  right: 7%;
  border: solid transparent;
  content: " ";
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
  border-bottom-color: limegreen;
  border-width: 10px;
  margin-left: -10px;
}
.allChatFloat .chatBox .container .chat .chat-history .my-message {
  float: right;
  background: limegreen;
}
.allChatFloat .chatBox .container .chat .chat-history .other-message {
  background: red;
}
.allChatFloat .chatBox .container .chat .chat-history .other-message:after {
  border-bottom-color: red;
  right: auto;
  left: 1rem;
}
.allChatFloat .chatBox .container .chat .chat-message {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  grid-gap: 1rem;
  padding: 0 0.5rem;
}
.allChatFloat .chatBox .container .chat .chat-message input {
  width: 100%;
  font-size: 1rem;
  padding: 10px;
}
.allChatFloat .chatBox .container .chat .chat-message .sendFile {
  color: #000;
  cursor: pointer;
  position: relative;
}
.allChatFloat .chatBox .container .chat .chat-message .sendFile input {
  opacity: 0;
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
}
.allChatFloat .chatBox .container .chat .chat-message .sendFile i {
  display: flex;
  justify-content: center;
  align-items: center;
}
.allChatFloat .chatBox .container .chat .chat-message .sendFile i svg {
  width: 1.2rem;
  height: 1.2rem;
  fill: #000;
  opacity: 0.7;
}
.allChatFloat .chatBox .container .chat .chat-message .sendTicket {
  color: #000;
  cursor: pointer;
  position: relative;
  background: transparent;
  transform: rotate(-135deg);
}
.allChatFloat .chatBox .container .chat .chat-message .sendTicket i {
  display: flex;
  justify-content: center;
  align-items: center;
}
.allChatFloat .chatBox .container .chat .chat-message .sendTicket i svg {
  width: 1.2rem;
  height: 1.2rem;
  fill: #000;
  opacity: 0.7;
}
.allChatFloat .chatBox .container .align-left {
  justify-content: left;
  text-align: left;
}
.allChatFloat .chatBox .container .float-left {
  float: left;
  text-align: left;
}
@media screen and (max-width: 1000px) {
  .allChatFloat .chatBox {
    width: 100%;
  }
}

.allSplash {
  position: fixed;
  background: var(--green-color);
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1000000;
  display: grid;
  justify-content: center;
  align-items: center;
}
.allSplash .box {
  display: grid;
  justify-content: center;
  align-items: center;
}
.allSplash .box .logo {
  display: grid;
  justify-content: center;
}
.allSplash .box .logo img {
  width: 20rem;
  height: 100%;
  object-fit: contain;
}
.allSplash .box .title {
  opacity: 0.8;
  font-size: 1.5rem;
  font-weight: 500;
  color: white;
  margin-top: 2rem;
  text-align: center;
}
.allSplash .box i {
  display: grid;
  justify-content: center;
  margin-top: 3rem;
}
.allSplash .box i svg {
  width: 5rem;
  height: 5rem;
  color: white;
}

.allPaginateHome {
  display: grid;
  justify-content: center;
  margin-top: 2rem;
  margin-bottom: 1rem;
}
.allPaginateHome .pages {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  grid-gap: 1rem;
}
.allPaginateHome .pages div {
  width: 2.3rem;
  height: 2.3rem;
  border-radius: 5px;
  background: white;
  color: #000;
  display: grid;
  justify-content: center;
  align-items: center;
  font-size: 1rem;
  font-weight: 300;
  box-shadow: 0 0px 10px rgba(0, 0, 0, 0.2);
  cursor: pointer;
}
.allPaginateHome .pages div svg {
  width: 0.8rem;
  height: 0.8rem;
  fill: #000;
}
.allPaginateHome .pages .true {
  background: var(--green-color);
  color: white;
}

/*# sourceMappingURL=home.css.map */