.header {
  padding: 2.5641vw;
  border-bottom: 0.2564vw solid #dfdfdf;
  background: white;
  .top {
    display: flex;
    justify-content: space-between;
    ion-segment {
      justify-content: start;
      padding: 0 3.2vw;
      position: sticky;
      top: 0;
      // background: #fd6f6a;
    }
    // ion-segment-button {
    //   color: #fd6f6a;
    //   --indicator-color: #fd6f6a;
    // }
    .more {
      width: 12.8205vw;
      margin: 0 2.5641vw;
      display: flex;
      align-items: center;
      justify-content: space-around;
      img {
        width: 5.1282vw;
        height: 5.1282vw;
      }
      ion-button {
        --background: white;
        --background-hover: white;
        --background-activated: white;
        --background-focused: white;
        --color: #000;
      }
    }
  }
}
.content {
  --padding-bottom: 25.641vw;
  --background: #f8f8f8;
  .tab-content {
    .card {
      background-color: white;
      margin-bottom: 2.5641vw;
      padding: 2.5641vw;
      .user-data {
        display: flex;
        align-items: center;
        padding-bottom: 1.0256vw;
        border-bottom: 0.2564vw solid #dfdfdf;
        .pendant {
          width: 10.2564vw;
          height: 10.2564vw;
          display: flex;
          justify-content: center;
          align-items: center;
          background-size: 100% 100%;
          .avatar {
            width: 7.6923vw;
            height: 7.6923vw;
            border-radius: 50%;
          }
        }
        .user-dateil {
          display: flex;
          justify-content: space-between;
          align-items: center;
          flex: 1;
          .dateil {
            display: flex;
            align-items: center;
            .user-name {
              margin-left: 2.5641vw;
            }
            .tag {
              border: 0.2564vw solid;
              padding: 0 1.0256vw;
              margin-left: 2.5641vw;
              border-radius: 1.0256vw;
              font-size: 3.0769vw;
              color: #a3a3a3;
            }
            img {
              width: 7.6923vw;
              margin-left: 1.5385vw;
            }
          }
          .time {
            font-size: 3.0769vw;
            color: #c5c5c5;
            display: flex;
            flex-direction: column;
            align-items: flex-end;
            span{
              color: #ffa922;
            }
          }
        }
      }
      .post-dateil {
        margin: 2.5641vw 0 2.5641vw 12.8205vw;
        .text-content {
          font-size: 3.5897vw;
        }
        .imgs {
          display: grid;
          grid-template-columns: repeat(4, 17.9487vw);
          justify-content: space-between;
          flex-wrap: wrap;
          img {
            height: 17.9487vw;
            width: 17.9487vw;
            object-fit: cover;
            margin-top: 2.5641vw;
          }
        }
      }
      .tool {
        margin-left: 12.8205vw;
        margin-top: 5.1282vw;
        display: flex;
        justify-content: space-between;
        .tool-item {
          display: flex;
          align-items: center;
          color: #a3a3a3;
          // margin-right: 7.6923vw;
          ion-icon {
            font-size: 7.6923vw;
          }
        }
        .action-icon {
          color: #f36f6f;
        }
      }
    }
  }
  .post {
    display: flex;
    align-items: center;
    justify-content: center;
  }
}
ion-popover {
  --width: 33.3333vw;
}
