.product-video {
    width: 100%; 
    height: auto; 
    max-height: none;
}
.video-container {
position: relative;
width: 100%;
height: 100%;
padding-top: 56.25%; 
overflow: hidden;
}

.product-video {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: none; 
}

.video-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #fff;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
z-index: 10;
}

.video-cover {
width: 100%;
height: 100%;
object-fit: cover;
}

.play-button {
background: none;
border: none;
cursor: pointer;
position: absolute;
z-index: 11;
}

.play-button img {
width: 64px;
height: 64px;
}
.news-banner {
    padding: 0 10px;
    background: #ede2d9;
}

.news-banner .news-banner-title {
    color: #f7da64;
    text-align: center;
}

.news-banner-content {
    line-height: 1.5;
}

.news-banner .news-banner-title span {
    display: inline-block;
    width: 100%;
    height: 2px;
    background: #af9a89;
    border-radius: 2px;
}

.news-banner .news-banner-content span {
   color: rgb(184, 49, 47);;
}

.news-banner .news-banner-title>div {
    background: #ede2d9;
    padding: 0px 10px;
    display: inline-block;
    position: relative;
    top: -12px;
    font-weight: bold;
    color: #af9a89;
}
.color-img-scale {
    position: fixed;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, .5);
    display: none;
    left: 0;
    z-index: 1001;
    max-width: 750px;
    left: 50%;
    transform: translate(-50%, 0);
}

.color-img-scale .close-img {
    position: absolute;
    top: -70px;
    right: -16px;
    color: #fff;
    font-size: 53px;
}

.color-img-scale .img {
    width: 90%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.color-img-scale .img-text {
    display: flex;
    justify-content: center;
    padding-top: 10px;
    color: #ffff;
    font-weight: 700;
}
@media screen and (min-width: 576px) {
    .share-modalPop {
        width: 750px;
    }
    .go-share-modalPop{
        margin: 0 auto;
        width: 750px;
    }
}
.share-modalPop {
      margin: 0 auto;
      background-color: #fff;
      border-radius: 10px;
      overflow: hidden;
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
      background: linear-gradient(to bottom, rgba(225, 48, 56, 1), rgba(240, 112, 12, 1));
 }
  .header {
      color: #fff;
      text-align: center;
      padding: 15px;
      font-size: 14px;
      display: flex;
      align-items: center;
  }
  .headertitle{
  width: 316px;
  height: 46px;
  background: inherit;
  background-color: rgba(0, 0, 0, 0.4);
  border: none;
  border-radius: 129px;
  -moz-box-shadow: none;
  -webkit-box-shadow: none;
  box-shadow: none;
  color: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
  }

  .headertitle {
      overflow: hidden;
      position: relative;
  }

  .headertitle span {
      position: absolute;
      width: 100%;
      opacity: 0;
      transform: translateY(100%);
  }

  .headertitle span.show {
      animation: slideUp 2s ease forwards;
  }

  @keyframes slideUp {
      0% { opacity: 0; transform: translateY(100%); }
      10% { opacity: 1; transform: translateY(0); }
      90% { opacity: 1; transform: translateY(0); }
      100% { opacity: 0; transform: translateY(-100%); }
  }

  .main-content {
      color: #fff; 
      text-align: center;
  }
  .SharingPlan{
      display: flex;
      font-weight: 700;
      font-style: normal;
      color: #FFFFFF;
      justify-content: center;
      font-size: 18px;
  }
  .main-content h2 {
      margin: 10px 0;
      font-family: 'Arial Negreta', 'Arial Normal', 'Arial', sans-serif;
      font-weight: 700;
      font-style: normal;
      font-size: 28px;
      color: #FFFFFF;
  }
  .steps {
      display: flex;
      justify-content: space-between;
      margin: 15px 0;
      color: #ffd79f;
      flex-direction: column;
  }
  .steps-icon{
      display: flex;
      justify-content: space-around;
  }
  .steps-num{
      width: 25px;
      height: 25px;
      background-color: rgb(164, 57, 24);
      display: flex;
      justify-content: center;
      align-items: center;
      border-radius: 30px;
  }
  .straightline{
      margin-left: 10px;
      margin-right: 10px;
      display: flex;
      align-items: center;
      width: 70%;
  }
  .steps-text{
      margin-top: 10px;
      color: #fff;
      display: flex
  }
  .share-link {
      margin-top: 5px;
      padding: 10px;
      border: none;
      width: 100%;
      font-size: 14px;
      text-align: center;
      border-radius: 5px;
      color: #333;
  }
  .copy-btn {
      margin-top: 10px;
      padding: 10px;
      width: 100%;
      background-color: #d33c3c;
      color: #fff;
      border: none;
      border-radius: 5px;
      cursor: pointer;
      font-size: 14px;
  }
  #notification{
      position: fixed; 
      top: 50%;
      left: 50%; 
      transform: translateX(-50%); 
      background: black; 
      color: white; 
      padding: 10px; 
      border-radius: 5px;
      align-items: center;
  }
  .footer {
      font-size: 12px;
      color: #fff;
      margin-top: 10px;
  }
  .close-modalPop{
      float: right;
      width: 30px;
      height: 30px;
      display: flex;
      justify-content: center;
      align-items: center;
  }
  .no-scroll {
      overflow: hidden;
  }
  .share-modal img{
    width: 30px;
    height: 30px;
    margin-right: -7px;
    border-radius: 32%;
    z-index: 2;
    border: 2px solid #ffffff;
  }
  .nouser img{
    width: 30px;
    height: 30px;
    margin-right: -7px;
    border-radius: 32%;
    z-index: 2;
    border: 2px solid #ffffff;
  }
  .share-text{
    background: linear-gradient(237.55755621627887deg, rgba(255, 96, 83, 1) 12%, rgba(255, 154, 59, 1) 69%);
    border-radius: 5px;
    color: #fff;
    padding: 3px 5px 3px 10px;
    font-size: 11px;
    box-shadow: 0 0px 4px 0 rgb(0 0 0 / 30%);
  }
  .go-share-modal {
        background-color: #fff;
        border-radius: 10px;
        overflow: hidden;
    }
    .go-main-content{
        max-height: 90%; 
        overflow-y: auto; 
        position: relative; 
        box-sizing: border-box; 
    }
    .popBottom{
        position: absolute; 
        bottom: 0; 
        left: 0; 
        width: 100%; 
        background: white; 
        text-align: center; 
        padding: 10px 0;
        box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.1);
    }

    .arrow-box{
        justify-content: center; 
        display: flex;
        flex-direction: column; 
        align-items: center;
        position: absolute; 
        top: 18px; 
        right:-83px;
        transform: translateX(-50%);
        margin-top: 10px;
    }
    .arrow-up{
        width: 0;
        height: 0;
        border-left: 7px solid transparent;
        border-right: 7px solid transparent;
        border-bottom: 6px solid #000000ba;   
        margin-bottom: 1px;                     
    }
    .small-box{
        width: 180px;
        height: 20px; 
        background-color: #000000ba; 
        margin-top: -1px; 
        color: #fff;
        border-radius: 5px;
        display: flex;
        justify-content: center;
    }
    .vy-picture-preview-mask {
        position: fixed;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        background-color: rgba(0, 0, 0, 0.8);
        z-index: 1000;
        display: none;
    }

    .vy-picture-preview {
        position: fixed;
        z-index: 10999;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }