/* Root */
:root {
  --theme-primary-color: #F97D05;
  --theme-secondary-color: #FBBB21;
  --theme-bg-page: #F6F6F6;
  --theme-bg-form: #F6F6F6;
  --theme-text-color: #424242;
  --theme-buyer-color: #388E3C;
  --theme-seller-color: #1976D2;
}

/* Theme */
.theme-bg-primary {
  background-color: var(--theme-primary-color);
}

.theme-bg-secondary {
  background-color: var(--theme-secondary-color);
}

.theme-text-primary {
  color: var(--theme-primary-color);
}

.theme-text-secondary {
  color: var(--theme-secondary-color);
}

.theme-bg-page {
  background-color: var(--theme-bg-page);
}

.theme-page-wrapper {
  padding: 3.75rem 0;
}

.theme-banner-page {
  position: relative;

  .container {
    position: absolute;
    inset: 0;

    .banner-content {
      position: absolute;
      bottom: 5%;
      right: calc(var(--bs-gutter-x) * .5);
      transform: translateY(-50%);
      background-color: #1C1C1C;
      padding: 0 1.25rem;

      .banner-title {
        font-size: 2.625rem;
        font-weight: 700;
        color: white;
      }

      .banner-title.big {
        font-size: 3.125rem;
      }
    }

    .banner-content.center {
      top: 50%;
      bottom: unset;
    }
  }
}

.btn-navregister {
  padding: 8px 15px;
  text-decoration: none;
  border: none;
  font-weight: bold;

  &.btn-navregister {
    background-color: var(--theme-secondary-color);
    color: #fff;

    &:hover {
      background-color: #e67e00;
    }
  }
}

.navbar {
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Header */
header {
  nav {
    .navbar-brand {
      img {
        height: 36px;

        @media (min-width: 1400px) {
          height: 46px;
        }
      }
    }

    .navbar-member {
      .btn-profile {
        border: 1px solid #EEEEEE;

        .member-avatar {
          width: 35px;
          height: 35px;
          border-radius: 50%;
          object-fit: contain;
          display: block;
          padding: 3px;
        }

        .member-avatar.buyer {
          background-color: var(--theme-buyer-color);
        }

        .member-avatar.seller {
          background-color: var(--theme-seller-color);
        }
      }

      .dropdown-menu {
        .dropdown-item:active {
          background-color: var(--theme-primary-color);
        }
      }
    }
  }
}

/* Footer */
footer {
  .sitemap {
    color: white;
    background-color: #1C1C1C;
    padding: 3.75rem 0;

    .sitemap-logo {
      margin-bottom: 1rem;

      img {
        width: auto;
        max-width: 100%;
        height: 56px;
        object-fit: contain;
        display: block;
      }
    }

    .row {
      align-items: flex-end;

      .sitemap-info {
        .sitemap-title {
          margin-bottom: 0.125rem;
        }
      }

      .sitemap-contact {
        .contact-item {
          margin: 0;
        }
      }

      .sitemap-nav {
        display: flex;
        flex-direction: column;
        row-gap: 0.625rem;
      }

      .sitemap-line-oa {
        width: 175px;
        height: 175px;
        max-width: 100%;
        object-fit: contain;
        display: block;
        margin-left: auto;
      }
    }
  }

  .copyright {
    padding: 0.625rem 0;

    .container {
      display: flex;
      justify-content: space-between;

      .policy {
        display: flex;
        flex-direction: row;

        a {
          font-size: 0.875rem;
          position: relative;
        }

        /* a::after {
          border-right: 1px solid black;
          width: 1px;
          height: 100%;
          position: absolute;
          top: 0;
          right: 0;
          bottom: 0;
        } */
      }
    }
  }
}

/* Button */
.theme-btn {
  border: none;
  background-color: none;
  background: var(--theme-primary-color);
  background: -moz-linear-gradient(320deg, var(--theme-secondary-color) 0%, var(--theme-primary-color) 100%);
  background: -webkit-linear-gradient(320deg, var(--theme-secondary-color) 0%, var(--theme-primary-color) 100%);
  background: linear-gradient(320deg, var(--theme-secondary-color) 0%, var(--theme-primary-color) 100%);
  transition: 500ms ease;
}

.theme-btn:hover {
  transform: scale(1.04);
}

/* Form */
.theme-input-field {

  .form-control:focus,
  select:focus {
    border-color: var(--theme-primary-color);
    box-shadow: 0 0 0 .25rem rgba(249, 125, 5, .25);
  }

  input,
  textarea,
  select {
    /* border: 0; */
    /* border-radius: 0; */
    /* background-color: var(--theme-bg-form); */
    font-weight: 300;
  }
}

/* Line */
.theme-line-header {
  position: relative;
  width: fit-content;
}

.theme-line-header::before {
  content: "";
  position: absolute;
  left: 0;
  bottom: -0.3125rem;
  width: 3.75rem;
  height: 4px;
  background-color: var(--theme-secondary-color);
  border-radius: 0;
}

/* Pages */
.home-page {
  .section-wrapper {
    padding: 1.875rem 0;

    @media (min-width: 768px) {
      padding: 2.5rem 0;
    }

    @media (min-width: 992px) {
      padding: 3.125rem 0;
    }

    @media (min-width: 1200px) {
      padding: 4.375rem 0;
    }

    @media (min-width: 1400px) {
      padding: 5rem 0;
    }

    /*  */
  }

  .section-recommend {
    .section-video {
      margin-top: 1.875rem;
    }
  }

  .section-seller-highlight {
    --padding-seller-list: 0.5rem;
    overflow: hidden;

    @media (min-width: 1400px) {
      --padding-seller-list: 1.5625rem;
    }

    .section-title {
      font-size: 1.25rem;

      @media (min-width: 768px) {
        font-size: 1.5rem;
      }

      @media (min-width: 992px) {
        font-size: 1.625rem;
      }

      @media (min-width: 1200px) {
        font-size: 1.625rem;
      }

      @media (min-width: 1400px) {
        font-size: 1.875rem;
      }

      /*  */
    }

    .row {
      margin-left: calc(var(--padding-seller-list) * -1);
      margin-right: calc(var(--padding-seller-list) * -1);
    }

    .row>* {
      padding-left: var(--padding-seller-list);
      padding-right: var(--padding-seller-list);
    }

    .section-seller-lists {
      margin: 0 -0.625rem;
      margin-top: 1.25rem;

      @media (min-width: 768px) {
        margin-top: 1.375rem;
      }

      @media (min-width: 992px) {
        margin-top: 1.5rem;
      }

      @media (min-width: 1200px) {
        margin-top: 1.625rem;
      }

      @media (min-width: 1400px) {
        margin-top: 1.875rem;
      }

      /*  */

      .card-seller {
        display: flex;
        flex-direction: column;
        padding: 0.5rem;
        /* border: 1px solid black; */
        /* column-gap: 1.5625rem; */
        row-gap: 0.75rem;
        align-items: center;
        margin: 1rem 0;
        transition: 500ms ease;

        @media (min-width: 1400px) {
          flex-direction: row;
          padding: 0.625rem;
          column-gap: 1.5625rem;
          row-gap: 0;
        }

        .card-image {
          width: 160px;
          height: 160px;
          max-width: 100%;
          overflow: hidden;
          border-radius: 10px;

          img {
            width: 100%;
            height: 100%;
            object-fit: contain;
            /* object-fit: cover; */
            display: block;
          }
        }

        .card-body {
          flex: 1;

          .card-title {
            font-size: 1.125rem;
            height: 2.75rem;
            -webkit-line-clamp: 2;

            @media (min-width: 1400px) {
              font-size: 1.25rem;
              height: auto;
            }
          }

          .card-category {
            color: white;
            width: fit-content;
            background-color: var(--theme-primary-color);
            padding: 0.125rem 0.625rem;
            margin-top: 0.375rem;

            span {
              font-size: 0.75rem;

              @media (min-width: 1400px) {
                font-size: 0.9375rem;
              }
            }
          }

          .card-brief {
            font-size: 0.9375rem;
            line-height: 1.33;
            color: #555555;
            margin: 0;
            margin-top: 1rem;
            -webkit-line-clamp: 4;
          }
        }
      }

      .card-seller:hover {
        transform: scale(1.04);
        box-shadow: rgba(249, 125, 5, .2) 0px 8px 24px;
      }
    }
  }
}

/* directory-page */
.directory-page {
  .page-content {
    padding-top: 2.875rem;

    .notify-alert {
      margin-bottom: 1.875rem;
    }

    .section-directory {
      --padding-section-directory: 1.875rem;
      display: flex;
      flex-direction: row;
      gap: var(--padding-section-directory);

      .section-filter {
        width: 320px;
        height: fit-content;
        padding: 1.875rem;
        background-color: white;

        .section-title {
          margin: 0;
        }

        .directory-category {
          margin: 0 -0.875rem;
          padding: 0;
          margin-top: 1.25rem;
          list-style: none;

          li {
            margin: 0.125rem 0;
            padding: 0.25rem 0.875rem;

            a {
              display: block;
              width: 100%;
            }
          }

          li.active {
            color: white;
            font-weight: 500;
            background-color: none;
            background: var(--theme-primary-color);
            background: -moz-linear-gradient(320deg, var(--theme-secondary-color) 0%, var(--theme-primary-color) 100%);
            background: -webkit-linear-gradient(320deg, var(--theme-secondary-color) 0%, var(--theme-primary-color) 100%);
            background: linear-gradient(320deg, var(--theme-secondary-color) 0%, var(--theme-primary-color) 100%);
          }
        }
      }

      .section-directory-lists {
        flex: 1;

        .section-search {
          padding: 0.375rem 1rem;
          background-color: white;
        }

        .directory-lists {
          --padding-seller-item: 0.5625rem;
          margin-top: var(--padding-section-directory);

          .row {
            margin: calc(var(--padding-seller-item) * -1);
          }

          .row>* {
            padding: var(--padding-seller-item);
          }

          .card-seller {
            display: block;
            height: 100%;
            padding: 1.375rem;
            background-color: white;
            transition: 500ms ease;

            .card-image {
              width: 300px;
              height: 300px;
              overflow: hidden;
              border-radius: 10px;
              margin: 0 auto;

              img {
                width: 100%;
                height: 100%;
                /* object-fit: cover; */
                object-fit: contain;
                display: block;
              }
            }

            .card-body {
              margin-top: 1.25rem;

              .card-category {
                color: white;
                width: fit-content;
                background-color: var(--theme-primary-color);
                padding: 0.125rem 0.625rem;
                margin-top: 0.375rem;

                span {
                  font-size: 0.9375rem;
                }
              }

              .card-brief {
                font-size: 0.9375rem;
                line-height: 1.33;
                height: 5rem;
                color: #555555;
                margin: 0;
                margin-top: 1rem;
                -webkit-line-clamp: 4;
              }
            }
          }

          .card-seller:hover {
            transform: scale(1.03);
            box-shadow: rgba(249, 125, 5, .2) 0px 8px 24px;
          }
        }
      }
    }
  }
}

/* buyer-register-page & seller-register-page */
.buyer-register-page,
.seller-register-page {
  background-color: var(--theme-bg-page);

  .page-content {
    .container {
      min-height: calc(100dvh - 64px);
      display: flex;
      flex-direction: column;
      justify-content: center;
      padding-top: 5rem;
      padding-bottom: 5rem;

      .card {
        border: 0;
        border-radius: 0;

        .card-body {
          padding: 2.5rem;
          display: flex;
          flex-direction: row;
          column-gap: 3.75rem;
          color: var(--theme-text-color);

          .card-image {
            flex: 1;

            img {
              width: 100%;
              height: 100%;
              /* height: 535px; */
              object-fit: cover;
              display: block;
              border-radius: 16px;
              background-color: #F5F5F5;
            }
          }

          .card-form {
            flex: 1;

            .card-logo {
              width: auto;
              height: 70px;
              max-width: 100%;
              object-fit: contain;
              display: block;
              margin-bottom: 1.875rem;
            }

            .card-title {
              font-size: 1.75rem;
              /* color: var(--theme-primary-color); */
              /* margin: 0; */
            }

            .card-title.buyer {
              color: var(--theme-buyer-color);
            }

            .card-title.seller {
              color: var(--theme-seller-color);
            }

            .card-brief {
              margin: 0;
            }

            .form-field {
              margin-top: 1.875rem;

              .btn-submit {
                margin-top: 1.25rem;
              }
            }
          }
        }
      }
    }
  }
}

.buyer-register-page {
  background-color: var(--theme-primary-color);

  .container {
    .card {
      margin-top: 1.875rem;

      .card-body {
        .card-form {
          .form-field {

            .theme-input-field:has(input[required]) label:after,
            .theme-input-field:has(textarea[required]) label:after,
            .theme-input-field:has(select[required]) label:after {
              content: '*';
              color: red;
              font-size: 1rem;
              margin-left: 2px;
              opacity: 1;
              position: relative;
              display: inline;
            }

            .input-image-preview {
              img {
                width: 200px;
                height: 200px;
                object-fit: contain;
                display: block;
              }
            }
          }

          .btn-submit {
            margin-top: 0.5rem;
          }
        }
      }
    }

    .card:first-child {
      margin-top: 0;
    }
  }
}

/* buyer-login-page & seller-login-page */
.buyer-login-page,
.buyer-forgot-password-page,
.buyer-reset-password-page,
.seller-login-page {
  /* background-color: var(--theme-bg-page); */

  .container {
    min-height: calc(100dvh - 64px);
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-top: 5rem;
    padding-bottom: 5rem;

    .card {
      border: 0;
      border-radius: 0;

      .card-body {
        padding: 2.5rem;
        display: flex;
        flex-direction: row;
        column-gap: 3.75rem;
        color: var(--theme-text-color);

        .card-image {
          flex: 1;

          img {
            width: 100%;
            height: 100%;
            /* height: 535px; */
            object-fit: cover;
            display: block;
            border-radius: 16px;
            background-color: #F5F5F5;
          }
        }

        .card-form {
          flex: 1;

          .card-logo {
            width: auto;
            height: 70px;
            max-width: 100%;
            object-fit: contain;
            display: block;
            margin-bottom: 1.875rem;
          }

          .card-title {
            font-size: 1.75rem;
            /* color: var(--theme-primary-color); */
            /* margin: 0; */
          }

          .card-title.buyer {
            color: var(--theme-buyer-color);
          }

          .card-title.seller {
            color: var(--theme-seller-color);
          }

          .card-brief {
            margin: 0;
          }

          .form-field {
            margin-top: 1.875rem;

            .btn-submit {
              margin-top: 1.25rem;
            }
          }
        }
      }
    }
  }
}

/* buyer-member-profile & seller-member-profile-page */
.buyer-member-profile-page,
.seller-member-profile-page {
  .page-content {
    .section-profile {
      --padding-section-profile: 1.875rem;
      display: flex;
      flex-direction: row;
      gap: var(--padding-section-profile);

      .section-nav {
        width: 320px;
        height: fit-content;
        padding: var(--padding-section-profile);
        background-color: white;

        .section-profile-avata {
          width: 120px;
          height: 120px;
          border-radius: 50%;
          overflow: hidden;
          margin: 0 auto;

          img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
          }
        }

        .section-profile-avata.buyer {
          background-color: var(--theme-buyer-color);
        }

        .section-profile-avata.seller {
          background-color: var(--theme-seller-color);
        }

        .section-name {
          font-size: 1.125rem;
          text-align: center;
          margin: 0;
          margin-top: 0.875rem;
        }

        .section-username {
          font-size: 1rem;
          text-align: center;
          margin: 0;
          margin-top: 0.25rem;
          color: #424242;
        }

        .section-menu {
          margin: 0 calc(var(--padding-section-profile) * -1);
          padding: 0;
          margin-top: 1.75rem;
          list-style: none;

          li {
            padding: 0.5rem 1rem;

            a {
              display: flex;
              flex-direction: row;
              flex-wrap: nowrap;
              align-items: center;
              gap: 0.875rem;

              i {
                font-size: 1.25rem;
                width: 1.25rem;
              }
            }
          }

          li.active {
            border-left: 3px solid var(--theme-primary-color);

            a {
              color: var(--theme-primary-color);
              font-weight: 500;
            }
          }
        }
      }

      .section-body {
        flex: 1;
        width: 100%;
        height: fit-content;

        .section-header {
          /* padding: 1.25rem var(--padding-section-profile); */
          /* background-color: white; */

          .section-title {
            font-size: 1.75rem;
            margin: 0;
          }
        }

        .section-content {
          padding: var(--padding-section-profile);
          margin-top: var(--padding-section-profile);
          background-color: white;
        }
      }

      .section-body#matching {
        .section-content {
          .matching-lists {
            /* margin: 0 -0.625rem;
            margin-top: 1.875rem; */

            .card-booking {
              display: flex;
              flex-direction: row;
              padding: 0.625rem;
              /* border: 1px solid black; */
              column-gap: 1.5625rem;
              align-items: center;
              margin: 0.5rem 0;
              border: 1px solid #EEEEEE;
              transition: 500ms ease;

              .card-schedule {
                width: 200px;
                height: 100%;
                overflow: hidden;
                position: relative;

                .card-schedule-date {
                  /* font-size: 1.125rem; */
                }
              }

              .card-schedule::after {
                content: '';
                width: 1px;
                height: 100%;
                border-right: 1px solid #ECECEC;
                position: absolute;
                top: 0;
                right: 0;
              }

              .card-image {
                width: 160px;
                height: 160px;
                overflow: hidden;
                border-radius: 10px;

                img {
                  width: 100%;
                  height: 100%;
                  object-fit: contain;
                  /* object-fit: cover; */
                  display: block;
                }
              }

              .card-body {
                flex: 1;

                .card-category {
                  color: white;
                  width: fit-content;
                  background-color: var(--theme-primary-color);
                  padding: 0.125rem 0.625rem;
                  margin-top: 0.375rem;

                  span {
                    font-size: 0.875rem;
                  }
                }

                .card-online {
                  margin-top: 1rem;

                  h6 {
                    font-size: 1rem;
                    color: #2a5caa;
                    margin: 0;
                  }
                }

                .card-btn {
                  margin-top: 1rem;
                }

                .card-create {
                  margin-top: 0.5rem;
                }
              }
            }

            .card-booking:hover {
              transform: scale(1.015);
              box-shadow: rgba(249, 125, 5, .2) 0px 8px 24px;
            }

            .card-booking:last-child {
              /* border-bottom: none; */
            }
          }
        }
      }

      .section-body#edit_profile,
      .section-body#change_password,
      .section-body#product_service {
        .section-content {
          .section-title {
            color: var(--theme-text-color);
          }

          .form-field {
            margin-top: 1.5rem;
          }

          .product-service-lists {
            margin-top: 1.5rem;
            --padding-seller-product-lists: 0.5rem;

            .row {
              margin: calc(var(--padding-seller-product-lists) * -1);
            }

            .row>* {
              padding: var(--padding-seller-product-lists);
            }

            .card-product-service {
              border: 1px solid #EEEEEE;

              .card-image {
                width: 100%;
                height: 180px;

                img {
                  width: 100%;
                  height: 100%;
                  object-fit: cover;
                  display: block;
                }
              }

              .card-body {
                padding: 0.75rem;

                .card-title {
                  font-size: 1rem;
                  line-height: 1.25;
                  height: 2.5rem;
                  -webkit-line-clamp: 2;
                }

                .card-brief {
                  font-size: 0.875rem;
                  line-height: 1.428;
                  height: 6.25rem;
                  margin: 0;
                  margin-top: 0.375rem;
                  -webkit-line-clamp: 5;
                }

                .card-btn {
                  margin-top: 1rem;

                  .btn {
                    width: 34px;
                    height: 34px;
                    color: white;
                    border-radius: 50%;
                  }
                }
              }
            }
          }
        }

        .theme-input-field:has(input[required]) label:after,
        .theme-input-field:has(textarea[required]) label:after,
        .theme-input-field:has(select[required]) label:after {
          content: '*';
          color: red;
          font-size: 1rem;
          margin-left: 2px;
          opacity: 1;
          position: relative;
          display: inline;
        }

        .input-image-preview {
          img {
            width: 200px;
            height: 200px;
            object-fit: contain;
            display: block;
          }
        }
      }
    }
  }

  .modal-booking-detail {
    .modal-dialog {
      .modal-content {
        .modal-body {
          .input-image-preview {
            img {
              width: 200px;
              height: 200px;
              object-fit: contain;
              display: block;
            }
          }
        }
      }
    }
  }
}

.buyer-member-profile-page {
  .page-content {
    padding-top: 2.875rem;

    .notify-alert {
      margin-bottom: 1.875rem;
    }
  }
}

/* seller-profile */
.seller-profile-page {
  .page-content {
    .section-seller-profile {
      .section-seller-header {
        display: flex;
        flex-direction: row;
        align-items: center;

        .seller-profile {
          flex: 1;
          display: flex;
          flex-direction: row;
          gap: 2.5rem;

          .seller-logo {
            width: 300px;
            height: 300px;
            overflow: hidden;
            border-radius: 10px;

            img {
              width: 100%;
              height: 100%;
              object-fit: contain;
              /* object-fit: cover; */
              display: block;
            }
          }

          .seller-name {
            flex: 1;
            margin-top: 1rem;

            .card-title {
              font-size: 2.25rem;
            }

            .card-category {
              color: white;
              width: fit-content;
              background-color: var(--theme-primary-color);
              padding: 0.125rem 0.625rem;
              margin-top: 0.75rem;

              span {
                font-size: 0.9375rem;
              }
            }
          }
        }

        .seller-booking {
          .btn-booking {
            color: white;
            border-radius: 0;
            background: linear-gradient(#FF0000, #BF0000);
            box-shadow: 9px 9px #f3bbbd;
            transition: 500ms ease;
            -webkit-box-shadow: 9px 9px #f3bbbd;

            .btn-title {
              font-size: 2rem;
            }
          }

          .btn-booking:hover {
            transform: scale(1.04);
            -webkit-box-shadow: 10px 10px #f3bbbd;
          }
        }
      }

      .section-seller-content {
        --padding-section-seller-content: 1.875rem;
        display: flex;
        flex-direction: row;
        gap: var(--padding-section-seller-content);
        margin-top: 2.5rem;

        .seller-detail {
          flex: 1;
          height: fit-content;

          .seller-image {
            margin-bottom: var(--padding-section-seller-content);

            img {
              width: 100%;
              height: auto;
              max-height: 370px;
              object-fit: cover;
              display: block;
            }
          }

          .seller-info,
          .seller-contact {
            width: 100%;
            height: auto;
            background-color: white;
            /* margin-top: var(--padding-section-seller-content); */
            margin-bottom: var(--padding-section-seller-content);
            padding: var(--padding-section-seller-content);

            .header {
              display: flex;
              flex-direction: row;
              flex-wrap: nowrap;
              align-items: flex-start;
              gap: 0.875rem;
              font-size: 1.375rem;
              color: var(--theme-primary-color);

              .title {
                font-size: 1.375rem;
                margin: 0;
              }
            }

            .content {
              font-size: 1rem;
              line-height: 1.5;
              color: #555555;
              margin: 0;
              margin-top: 0.875rem;
            }
          }

          .seller-contact {
            margin-bottom: 0;
          }
        }

        .seller-product {
          flex: 1;
          width: 100%;
          height: fit-content;
          background-color: white;
          padding: var(--padding-section-seller-content);

          .header {
            display: flex;
            flex-direction: row;
            flex-wrap: nowrap;
            align-items: flex-start;
            gap: 0.875rem;
            font-size: 1.375rem;
            color: var(--theme-primary-color);

            .title {
              font-size: 1.375rem;
              margin: 0;
            }
          }

          .content {
            font-size: 1rem;
            line-height: 1.5;
            color: #555555;
            margin: 0;
            margin-top: 0.875rem;
          }

          .seller-product-service {
            --padding-seller-product-service: 0.5rem;
            margin-top: 3.125rem;

            .row {
              margin: calc(var(--padding-seller-product-service) * -1);
            }

            .row>* {
              padding: var(--padding-seller-product-service);
            }

            .card-product-service {
              border: 1px solid #EEEEEE;

              .card-image {
                width: 100%;
                height: 180px;

                img {
                  width: 100%;
                  height: 100%;
                  object-fit: cover;
                  display: block;
                }
              }

              .card-body {
                padding: 0.75rem;

                .card-title {
                  font-size: 1rem;
                  line-height: 1.25;
                  height: 2.5rem;
                  -webkit-line-clamp: 2;
                }

                .card-brief {
                  font-size: 0.875rem;
                  line-height: 1.428;
                  height: 6.25rem;
                  margin: 0;
                  margin-top: 0.375rem;
                  -webkit-line-clamp: 5;
                }
              }
            }
          }
        }
      }
    }
  }
}

/* seller-booking-page */
.seller-booking-page {
  .page-content {
    .section-seller-profile {
      .section-seller-header {
        .seller-profile {
          display: flex;
          flex-direction: row;
          gap: 2.5rem;

          .seller-logo {
            width: 300px;
            height: 300px;
            overflow: hidden;
            border-radius: 10px;

            img {
              width: 100%;
              height: 100%;
              object-fit: contain;
              /* object-fit: cover; */
              display: block;
            }
          }

          .seller-name {
            flex: 1;
            margin-top: 1rem;

            .card-title {
              font-size: 2.25rem;
            }

            .card-category {
              color: white;
              width: fit-content;
              background-color: var(--theme-primary-color);
              padding: 0.125rem 0.625rem;
              margin-top: 0.75rem;

              span {
                font-size: 0.9375rem;
              }
            }
          }
        }
      }

      .section-seller-booking {
        --padding-section-seller-booking: 1.875rem;
        margin-top: var(--padding-section-seller-booking);
        padding: var(--padding-section-seller-booking);
        background-color: white;
        border: 1px solid #EEEEEE;

        .section-header {
          --font-size-section-header: 1.75rem;
          display: flex;
          flex-direction: row;
          flex-wrap: nowrap;
          gap: 1.25rem;
          font-size: var(--font-size-section-header);
          /* color: var(--theme-primary-color); */

          .title {
            font-size: var(--font-size-section-header);
            margin: 0;
          }
        }

        .section-program-slot {
          margin-top: 1rem;
          display: flex;
          flex-direction: row;
          flex-wrap: wrap;
          gap: 1.25rem;

          .card-slot {
            width: 135px;
            height: 175px;
            border: 1px solid #ECECEC;
            border-radius: 8px;
            overflow: hidden;
            cursor: default;

            .card-time {
              background-color: var(--theme-primary-color);
              color: white;
              font-size: 1.125rem;
              font-weight: 600;
              text-align: center;
              text-wrap: nowrap;
              padding: 0.375rem;
            }

            .card-status {
              padding: 1rem;
              margin: auto;

              img {
                width: 100%;
                height: 100%;
                object-fit: contain;
                display: block;
                border-radius: 50%;
              }
            }
          }

          .card-slot.available {
            cursor: pointer;
            transition: 500ms;

            img {
              opacity: 0.5;
            }
          }

          .card-slot.available:hover {
            transform: scale(1.03);
            box-shadow: rgba(120, 167, 65, .3) 0px 8px 24px;

            img {
              opacity: 1;
            }
          }

          /* .table {
            margin-bottom: 0;

            thead {
              tr {
                th {
                  color: white;
                  background-color: var(--theme-primary-color);
                  text-align: center;
                }
              }
            }

            tbody {
              tr {
                td {
                  padding: 1.25rem;

                  .booking-slot {
                    width: 90px;
                    height: 90px;
                    margin: auto;

                    img {
                      width: 100%;
                      height: 100%;
                      object-fit: contain;
                      display: block;
                      border-radius: 50%;
                    }
                  }

                  .booking-slot.available {
                    img {
                      cursor: pointer;
                      opacity: 0.5;
                      transition: 500ms;
                    }
                  }

                  .booking-slot.available:hover {
                    img {
                      opacity: 1;
                      transform: scale(1.05);
                      box-shadow: rgba(120, 167, 65, .3) 0px 8px 24px;
                    }
                  }
                }
              }
            }
          } */
        }
      }

      .section-seller-content {
        --padding-section-seller-content: 1.875rem;
        display: flex;
        flex-direction: row;
        gap: var(--padding-section-seller-content);
        margin-top: 2.5rem;

        .seller-detail {
          flex: 1;
          height: fit-content;

          .seller-image {
            margin-bottom: var(--padding-section-seller-content);

            img {
              width: 100%;
              height: auto;
              max-height: 370px;
              object-fit: cover;
              display: block;
            }
          }

          .seller-info,
          .seller-contact {
            width: 100%;
            height: auto;
            background-color: white;
            margin-bottom: var(--padding-section-seller-content);
            /* margin-top: var(--padding-section-seller-content); */
            padding: var(--padding-section-seller-content);

            .header {
              display: flex;
              flex-direction: row;
              flex-wrap: nowrap;
              align-items: flex-start;
              gap: 0.875rem;
              font-size: 1.375rem;
              color: var(--theme-primary-color);

              .title {
                font-size: 1.375rem;
                margin: 0;
              }
            }

            .content {
              font-size: 1rem;
              line-height: 1.5;
              color: #555555;
              margin: 0;
              margin-top: 0.875rem;
            }
          }

          .seller-contact {
            margin-bottom: 0;
          }
        }

        .seller-product {
          flex: 1;
          width: 100%;
          height: fit-content;
          background-color: white;
          padding: var(--padding-section-seller-content);

          .header {
            display: flex;
            flex-direction: row;
            flex-wrap: nowrap;
            align-items: flex-start;
            gap: 0.875rem;
            font-size: 1.375rem;
            color: var(--theme-primary-color);

            .title {
              font-size: 1.375rem;
              margin: 0;
            }
          }

          .content {
            font-size: 1rem;
            line-height: 1.5;
            color: #555555;
            margin: 0;
            margin-top: 0.875rem;
          }

          .seller-product-service {
            --padding-seller-product-service: 0.5rem;
            margin-top: 3.125rem;

            .row {
              margin: calc(var(--padding-seller-product-service) * -1);
            }

            .row>* {
              padding: var(--padding-seller-product-service);
            }

            .card-product-service {
              border: 1px solid #EEEEEE;

              .card-image {
                width: 100%;
                height: 180px;

                img {
                  width: 100%;
                  height: 100%;
                  object-fit: cover;
                  display: block;
                }
              }

              .card-body {
                padding: 0.75rem;

                .card-title {
                  font-size: 1rem;
                  line-height: 1.25;
                  height: 2.5rem;
                  -webkit-line-clamp: 2;
                }

                .card-brief {
                  font-size: 0.875rem;
                  line-height: 1.428;
                  height: 6.25rem;
                  margin: 0;
                  margin-top: 0.375rem;
                  -webkit-line-clamp: 5;
                }
              }
            }
          }
        }
      }
    }
  }
}

/* confirm-booking-page */
.confirm-booking-page {
  .page-content {
    min-height: 50dvh;
  }
}