.view-detail-category {
  .content-left {
    .blog-image-1 {
      margin-bottom: 6%;
      .image-1 {
        width: 100%;
        height: 450px;
        overflow: hidden;
        margin-bottom: 3%;
        div {
          width: 100%;
          height: 100%;
          padding-bottom: calc(100% * 450 / 892);
          position: relative;
          img {
            width: 100%;
            height: 100%;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            object-fit: cover;
            object-position: center;
          }
        }
      }
      .evaluate {
        display: flex;
        font-size: 18px;
        margin-bottom: 3%;

        @media (max-width: 575.98px) {
          font-size: 14px;
          justify-content: flex-start;
          align-items: center;
          flex-flow: row wrap;
        }
        @media (min-width: 576px) and (max-width: 767.98px) {
          font-size: 14px;
          justify-content: flex-start;
          align-items: center;
          flex-flow: row wrap;
        }
        .icon-1 {
          margin-right: 3%;
          @media (max-width: 575.98px) {
            width: 50%;
            margin-bottom: 10px;
            margin-right: 0;
          }
          i {
            color: #277aeb;
          }
          span {
            color: #959697;
          }
        }
      }
      .content-blog-image {
        margin-bottom: 3%;
        .title {
          margin-bottom: 2%;
          h3 {
            color: #161617;
            font-weight: bold;
          }
        }
        .content {
          color: #7a7b7d;
          margin-bottom: 4%;
          @media (max-width: 575.98px) {
            font-size: 18px;
          }
          @media (min-width: 576px) and (max-width: 767.98px) {
            font-size: 18px;
          }
        }
        .quote {
          background-color: #1d73ea !important;
          color: #dce6fb;
          border-radius: 6px;
          margin-bottom: 4%;
          .content-quote {
            position: relative;
            z-index: 20;
            padding: 6%;
            text-align: center;
            h3 {
              color: #dce6fb;
              margin-bottom: 2%;
            }
          }

          i {
            color: #488fee;
            font-size: 90px;
            position: absolute;
            z-index: 1;
            padding: 3% 45%;
            @media (max-width: 575.98px) {
              padding: 3% 40%;
            }
            @media (min-width: 576px) and (max-width: 767.98px) {
              padding: 3% 40%;
            }
            @media (min-width: 768px) and (max-width: 991.98px) {
              padding: 3% 42%;
            }
            @media (min-width: 992px) and (max-width: 1199.98px) {
              padding: 3% 42%;
            }
            @media (min-width: 1200px) {
              padding: 3% 44%;
            }

            }
        }
        .note {
          display: flex;
          border-top: 1px solid #eaf0fa;
          border-bottom: 1px solid #eaf0fa;
          padding: 3% 0;
          .note-text{
            width: 50%;
            span{
              font-size: 18px;
              font-weight: 600;
              margin-right: 2%;
              color: #414344;
              i {
                color: #277cbc;
                font-size: 15px;
              }
            }
          }
          .btn-note {
            width: 50%;
            display: flex;
            justify-content: flex-end;
            align-items: center;

            a{
              box-shadow: 0 0 1px rgba(0, 0, 0, 0.125), 0 1px 3px rgba(0, 0, 0, 0.2);
              display: flex;
              justify-content: center;
              align-items: center;
              border-radius: 4px;
              border: none;
              background: #fff;
              color: #141414;
              padding: 10px 13px;
              margin-left: 10px;
              i{
                font-size: 16px;
              }
            }
            #twitter{
              background: #1c72e9;
              color: #fff;
            }
          }
        }
        .admin{
          margin-bottom: 5%;
          display: flex;
          justify-content: flex-start;
          align-items: center;
          padding: 30px 30px;
          box-shadow: 0 0 1px rgba(0, 0, 0, 0.125), 0 1px 3px rgba(0, 0, 0, 0.2);
          border-radius: 4px;
          border: none;
          background: #fff;
          .image{
            width: 125px;
            height: 125px;
            overflow: hidden;
            margin-right: 30px;
            div {
              width: 100%;
              height: 100%;
              position: relative;
              padding-bottom: calc(100% * 1 / 1);
              img {
                width: 100%;
                height: 100%;
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
                object-fit: cover;
                object-position: center;
                border-radius: 5px;
              }
            }
          }
          .info-admin{
            width: 70%;
            h3{
              font-weight: bold;
              margin-bottom: 2%;
              a{
                color: #2a7aeb;
              }
            }
            span{
              color: #8b8b8b
            }
          }
        }
        .box-hotel{
          margin-bottom: 5%;
          .hotel-look{
            border-radius: 4px;
            background-clip: border-box;
            border: 0 solid rgba(0, 0, 0, 0.125);
            box-shadow: 0 0 1px rgba(0, 0, 0, 0.125), 0 1px 3px rgba(0, 0, 0, 0.2);
            height: 135px;
            display: flex;
            justify-content: flex-start;
            align-items: center;
            overflow: hidden;
            @media (max-width: 575.98px) {
              margin-bottom: 5%;
            }
            @media (min-width: 576px) and (max-width: 767.98px) {
              margin-bottom: 5%;
            }
            @media (min-width: 768px) and (max-width: 991.98px) {
              margin-bottom: 5%;
            }
              .image-hotel-look{
              width: 138px;
              height: 100%;
              margin-right: 10%;
              div{
                width: 100%;
                height: 100%;
                position: relative;
                padding-bottom: calc(100% * 95/ 138);
                img{
                  width: 100%;
                  height: 100%;
                  position: absolute;
                  top: 50%;
                  left: 50%;
                  transform: translate(-50%, -50%);
                  object-fit: cover;
                  object-position: center;
                }
              }
            }
            .content-box{
              h4{
                font-weight: bold;
                font-size: 22px;
              }
              .date-box{
                font-size: 20px;
                margin-bottom: 8%;

                i{
                  color: #277aeb;
                }
                span{
                  color: #9596b2;
                }
              }
            }
          }
          .unusual-places{
            border-radius: 4px;
            background-clip: border-box;
            border: 0 solid rgba(0, 0, 0, 0.125);
            box-shadow: 0 0 1px rgba(0, 0, 0, 0.125), 0 1px 3px rgba(0, 0, 0, 0.2);
            height: 135px;
            display: flex;
            justify-content: flex-end;
            align-items: center;
            overflow: hidden;
            background-color: #1d73ea !important;;
            .image-unusual-places{
              width: 138px;
              height: 100%;
              margin-left: 25%;
              @media (max-width: 575.98px) {
                margin-left: 6%;
              }
              @media (min-width: 992px) and (max-width: 1199.98px) {
                margin-left: 5%;
              }
              div{
                width: 100%;
                height: 100%;
                position: relative;
                padding-bottom: calc(100% * 95/ 138);
                img{
                  width: 100%;
                  height: 100%;
                  position: absolute;
                  top: 50%;
                  left: 50%;
                  transform: translate(-50%, -50%);
                  object-fit: cover;
                  object-position: center;
                }
              }
            }
            .content-box{
              h4{
                font-weight: bold;
                font-size: 22px;
                color: #ffffff;
              }
              .date-box{
                font-size: 20px;
                margin-bottom: 8%;

                i{
                  color: #ffffff;

                }
                span{
                  color: #ffffff;
                }
              }
            }
          }
        }
        .leave-comment{
          margin-bottom: 4%;
          h3{
            font-weight: bold;
            margin-bottom: 5%;
          }
          .input-comment{
            input{

              height: 47px;
              box-shadow: 0 0 1px rgba(0, 0, 0, 0.125), 0 1px 3px rgba(0, 0, 0, 0.2);
              justify-content: center;
              align-items: center;
              border-radius: 5px;
              border: none;
              background: #fff;
              margin-bottom: 3%;
              font-size: 17px;
            }
            .name-email{
              display: flex;
              input{
                width: 48%;
              }
              #review-name{
                margin-right: 3%;
              }
              #review-email{

              }
            }
            #review-comments{
              height: 94px;
            }
          }
          .btn-submit {
            button {
              width: 15%;
              height: 47px;
              background: #1d73ea;
              font-weight: bold;
              border: none;
              @media (max-width: 575.98px) {
                width: unset;
              }
            }
            button:hover {
              background: #005cbf;
            }
          }
        }
        .comment {
          h3{
            font-weight: bold;
            margin-bottom: 5%;
          }
          .comment-1:first-child{
            border-top: none;
          }
          .comment-1 {
            margin-bottom: 3%;
            padding-top: 3%;
            border-top: 1px solid #e8effa;
            display: flex;
            justify-content: center;
            align-items: center;
            @media (max-width: 575.98px) {
              flex-direction: column;
            }
            @media (min-width: 576px) and (max-width: 767.98px) {
              flex-direction: column;
            }

            .image-reviewer {
              width: 150px;
              height: 110px;
              position: relative;
              @media (max-width: 575.98px) {
                width: 110px;
                height: 110px;
                margin-bottom: 2%;
              }
              @media (min-width: 576px) and (max-width: 767.98px) {
                width: 150px;
                height: 150px;
                margin-bottom: 2%;
              }
              @media (min-width: 768px) and (max-width: 991.98px) {
                width: 25%;
                height: 25%;
              }
              @media (min-width: 992px) and (max-width: 1199.98px) {
                width: 25%;
                height: 25%;
              }
              @media (min-width: 1200px) {
                width: 20%;
                height: 20%;
              }

              div {
                width: 100%;
                height: 100%;
                position: relative;
                padding-bottom: calc(100% * 1 / 1);
                @media (min-width: 768px) and (max-width: 991.98px) {
                  //padding-bottom: calc(100% * 110 / 205);
                }
                img {
                  width: 100%;
                  height: 100%;
                  position: absolute;
                  top: 50%;
                  left: 50%;
                  transform: translate(-50%, -50%);
                  object-fit: cover;
                  object-position: center;
                  border-radius: 75px;
                }
              }
            }
            .info-review {
              margin-left: 4%;
              .info-top {
                display: flex;
                @media (max-width: 575.98px) {
                  flex-flow: column;
                  text-align: center;
                  margin-bottom: 2%;
                }
                @media (min-width: 576px) and (max-width: 767.98px) {
                  flex-flow: column;
                  text-align: center;
                  margin-bottom: 2%;
                }
                .reviewer-name {
                  width: 16%;
                  font-weight: bold;
                  @media (max-width: 575.98px) {
                    width: 100%;
                  }
                  @media (min-width: 576px) and (max-width: 767.98px) {
                    width: 100%;
                  }
                  @media (min-width: 768px) and (max-width: 991.98px) {
                    width: 22%;
                  }
                  @media (min-width: 992px) and (max-width: 1199.98px) {
                    width: 24%;
                  }
                  @media (min-width: 1200px) {
                    width: 19%;
                  }
                }

                .datetime-review {
                  width: 28%;
                  margin-left: 2%;
                  @media (max-width: 575.98px) {
                    width: 100%;
                    margin-left: unset;
                  }
                  @media (min-width: 576px) and (max-width: 767.98px) {
                    width: 100%;
                    margin-left: unset;
                  }
                  @media (min-width: 768px) and (max-width: 991.98px) {
                    width: 36%;
                  }
                  @media (min-width: 992px) and (max-width: 1199.98px) {
                    width: 39%;
                  }
                  @media (min-width: 1200px) {
                    width: 30%;
                  }
                  span {
                    font-size: 16px;
                    font-style: italic;
                    color: #9e9fa0;
                    font-weight: bold;
                  }
                  .time-review {
                    margin-right: 5px;
                  }
                  .date-review {
                    margin-right: 10px;
                    margin-left: 5px;
                  }
                }
                .icon-star {
                  padding-top: 3px;
                  @media (max-width: 575.98px) {
                    width: 100%;
                    margin-left: unset;
                  }
                  i {
                    font-size: 16px;
                    color: #989b9f;
                  }
                }
              }
              .content-review {
                width: 100%;

                span {
                  font-style: italic;
                  color: #909295;
                  font-size: 20px;
                }
              }
            }
          }
        }
      }
      .btn-read-more {
        button {
          width: 15%;
          height: 45px;
          background: #1d73ea;
          font-weight: bold;
          border: none;
          color: #fff;
          font-weight: bold;

        }
        button:hover {
          background: #005cbf;
        }
      }
    }
  }
  .content-right {
    padding-left: 5%;
    h3 {
      font-size: 22px;
      font-weight: bold;
    }
    .btn-search {
      h3 {
        margin-bottom: 8%;
      }
      .search-text {
        position: relative;
        margin-bottom: 20%;
        @media (min-width: 992px) and (max-width: 1199.98px) {
          margin-bottom: 30%;
        }
        input {
          width: 100%;
          height: 48px;
          box-shadow: 0 0 1px rgba(0, 0, 0, 0.125), 0 1px 3px rgba(0, 0, 0, 0.2);
          text-align: left;
          border-radius: 5px;
          border: none;
          background: #fff;
          font-size: 17px;
        }
        i {
          position: absolute;
          right: 8%;
          top: 50%;
          transform: translateY(-50%);
          font-size: 17px;
        }
      }

    }
    .categories {
      margin-bottom: 15%;
      @media (min-width: 992px) and (max-width: 1199.98px) {
        margin-bottom: 30%;
      }
      h3 {
        margin-bottom: 5%;
      }
      .cat-hotel {
        border-bottom: 1px solid #dae5f3;
        padding: 4% 0;
        i {
          font-size: 12px;
          color: #b0b0b0;
        }
        span {
          font-size: 20px;
        }
      }
      .hotel-tour {
        display: flex;
        position: relative;
        i {
          position: absolute;
          top: 50%;
          right: 0;
          transform: translateY(-50%);
        }
      }
      .real-eststes {
        display: flex;
        position: relative;
        i {
          position: absolute;
          top: 50%;
          right: 0;
          transform: translateY(-50%);
        }
      }
      .properties {
        display: flex;
        flex-direction: column;
        span {
          padding: 5% 0;
        }
      }
      .restaurant {
        display: flex;
        position: relative;
        i {
          position: absolute;
          top: 50%;
          right: 0;
          transform: translateY(-50%);
        }
      }
      .tool-tips {
        display: flex;
        position: relative;
        i {
          position: absolute;
          top: 50%;
          right: 0;
          transform: translateY(-50%);
        }
      }
      .others {
        display: flex;
        position: relative;
        border-bottom: none;
        i {
          position: absolute;
          top: 50%;
          right: 0;
          transform: translateY(-50%);
        }
        span {

        }
      }
    }
    .latest-post {
      margin-bottom: 15%;
      h3 {
        margin-bottom: 5%;
        @media (min-width: 992px) and (max-width: 1199.98px) {
          margin-bottom: 15%;
        }
      }
      .btn-latest-post {

        border: none;
        margin-bottom: 7%;
        @media (min-width: 992px) and (max-width: 1199.98px) {
          margin-bottom: 30%;
        }
        ul {
          margin-bottom: 9%;
          text-align: center;
          box-shadow: 0 0 1px rgba(0, 0, 0, 0.125), 0 1px 3px rgba(0, 0, 0, 0.2);
          border-radius: 5px;
          @media (min-width: 992px) and (max-width: 1199.98px) {
            margin-bottom: 20%;
          }
          //@media (min-width: 1200px) {
          //  margin-bottom: 14%;
          //}
          li {
            width: 50%;
            margin: 0;
            a {
              border: none;
              border-radius: 0;
              color: black;
              span {
                font-size: 14px;
                font-weight: bold;
              }
            }
            #latest-tab {
              border-top-left-radius: 5px;
              border-bottom-left-radius: 5px;
            }
            #popular-tab {
              border-top-right-radius: 5px;
              border-bottom-right-radius: 5px;
            }
            a:focus, a:hover {
              color: black;
            }
          }
        }
        .nav-tabs > li > a {
          margin-right: 0;
        }
        .nav-tabs > li.active > a, .nav-tabs > li.active > a:focus, .nav-tabs > li.active > a:hover {
          color: #fff;
          background-color: #1d73ea;
        }

      }
      .image-blog-post {
        display: flex;
        margin-bottom: 4%;
        justify-content: flex-start;
        align-items: center;
        .image-hotel {
          width: 30%;
          height: 77px;
          overflow: hidden;
          margin-bottom: 3%;
          @media (max-width: 575.98px) {
            height: 100%;
          }
          @media (min-width: 576px) and (max-width: 767.98px) {
            height: 100%;
          }
          @media (min-width: 768px) and (max-width: 991.98px) {
            height: 100%;
          }
          @media (min-width: 992px) and (max-width: 1199.98px) {
            height: 100%;
          }
          div {
            width: 100%;
            height: 100%;
            padding-bottom: calc(100% * 77 / 85);
            position: relative;
            @media (max-width: 575.98px) {
              padding-bottom: calc(100% * 1 / 1);
            }
            @media (min-width: 576px) and (max-width: 767.98px) {
              padding-bottom: calc(100% * 1 / 1);
            }
            @media (min-width: 768px) and (max-width: 991.98px) {
              padding-bottom: calc(100% * 1 / 1);
            }
            @media (min-width: 992px) and (max-width: 1199.98px) {
              padding-bottom: calc(100% * 1 / 1);
            }
            img {
              width: 100%;
              height: 100%;
              position: absolute;
              top: 50%;
              left: 50%;
              transform: translate(-50%, -50%);
              object-fit: cover;
              object-position: center;
              border-radius: 7px;
            }
          }
        }
        .content-hotel {
          margin: 5% 8%;
          width: 50%;
          @media (min-width: 992px) and (max-width: 1199.98px) {
            width: 55%;
          }
          h4 {
            font-weight: bold;
            margin-bottom: 2%;
            @media (min-width: 992px) and (max-width: 1199.98px) {
              font-size: 15px;
            }
          }
          .date-blog {
            font-size: 18px;
            @media (min-width: 992px) and (max-width: 1199.98px) {
              font-size: 14px;
            }
            i {
              color: #277aeb;
            }
            span {
              color: #959697;
            }
          }
        }
      }
    }
    .archives {
      margin-bottom: 10%;
      h3 {
        margin-bottom: 5%;
      }
      .month {
        border-bottom: 1px solid #e4edf8;
        padding: 5%;
        i {
          font-size: 18px;
          color: #b0b0b0;
          margin-right: 5%;
        }
        span {
          font-size: 20px;
        }

      }
      .april {
        border: none;
      }
    }
    .instagram {

      h3 {
        margin-bottom: 5%;
      }
      .img-insta {
        width: 100%;
        height: 100%;
        margin-bottom: 15%;
        position: relative;

        div {
          width: 100%;
          height: 100%;
          position: relative;
          padding-bottom: calc(100% * 1 / 1);
          img {
            width: 100%;
            height: 100%;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            object-fit: cover;
            object-position: center;
            border-radius: 5px;
          }
        }
        .icon-insta {

          transition: .5s ease;
          opacity: 0;
          position: absolute;
          left: 50%;
          transform: translate(-50%, -50%);
          -ms-transform: translate(-50%, -50%);
          text-align: center;
          top: 85%;
          @media (max-width: 575.98px) {
            i {
              font-size: 40px;
            }
          }
          @media (min-width: 576px) and (max-width: 767.98px) {
            i {
              font-size: 55px;
            }
          }
          @media (min-width: 768px) and (max-width: 991.98px) {
            i {
              font-size: 70px;
            }
          }
          @media (min-width: 992px) and (max-width: 1199.98px) {
            top: 70%;
            i {
              font-size: 15px;
            }
          }
        }
      }
      .insta-1 {
        position: relative;
        &:hover div {
          opacity: 0.3;
          cursor: pointer;
        }
        &:hover .icon-insta {
          opacity: 1;
          cursor: pointer;
        }
        div {
          opacity: 1;
          display: block;
          transition: .5s ease;
          backface-visibility: hidden;
        }

      }
      .insta-2 {
        position: relative;
        &:hover div {
          opacity: 0.3;
          cursor: pointer;
        }
        &:hover .icon-insta {
          opacity: 1;
          cursor: pointer;
        }
        div {
          opacity: 1;
          display: block;
          transition: .5s ease;
          backface-visibility: hidden;
        }

      }
      .insta-3 {
        position: relative;
        &:hover div {
          opacity: 0.3;
          cursor: pointer;
        }
        &:hover .icon-insta {
          opacity: 1;
          cursor: pointer;
        }
        div {
          opacity: 1;
          display: block;
          transition: .5s ease;
          backface-visibility: hidden;
        }

      }
      .insta-4 {
        position: relative;
        &:hover div {
          opacity: 0.3;
          cursor: pointer;
        }
        &:hover .icon-insta {
          opacity: 1;
          cursor: pointer;
        }
        div {
          opacity: 1;
          display: block;
          transition: .5s ease;
          backface-visibility: hidden;
        }

      }
      .insta-5 {
        position: relative;
        &:hover div {
          opacity: 0.3;
          cursor: pointer;
        }
        &:hover .icon-insta {
          opacity: 1;
          cursor: pointer;
        }
        div {
          opacity: 1;
          display: block;
          transition: .5s ease;
          backface-visibility: hidden;
        }

      }
      .insta-6 {
        position: relative;
        &:hover div {
          opacity: 0.3;
          cursor: pointer;
        }
        &:hover .icon-insta {
          opacity: 1;
          cursor: pointer;
        }
        div {
          opacity: 1;
          display: block;
          transition: .5s ease;
          backface-visibility: hidden;
        }

      }
    }
  }
}