@import '_content/AuralizeBlazor/AuralizeBlazor.tf5u2o3oxg.bundle.scp.css';
@import '_content/Blazored.Toast/Blazored.Toast.bundle.scp.css';
@import '_content/Nextended.Blazor/Nextended.Blazor.tkxqvq0zjw.bundle.scp.css';

/* _content/hafamex-ui/Components/AboutHero/AboutHero.razor.rz.scp.css */
.section--large[b-4xgvhqk3p6] {
  width: 100vw;
  height: 100vh;  
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  position: relative;

  .overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    z-index: 1;
  }

  .container[b-4xgvhqk3p6] {
    position: relative;
    z-index: 10;
  }
}

.about-section[b-4xgvhqk3p6] {
  width: 100vw;
  height: 100vh;
  flex-shrink: 0;
}

.hero[b-4xgvhqk3p6] {
  .container {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;

    .hero-content {
      padding: 0px 250px;
      text-align: center;

      .hero-title {
        font-size: 68px;
        font-weight: 900;
        font-family: "Poppins", sans-serif;
        letter-spacing: 1px;
        color: #fff;
        outline: none;
        .highlight {
          color: #b80a25;
        }
      }

      .hero-subtitle[b-4xgvhqk3p6] {
        margin: 20px 0px;
        font-family: "Poppins", sans-serif;
        font-size: 20px;
        font-weight: 400;
        color: #fff;
      }
    }

    .hero-buttons[b-4xgvhqk3p6] {
      display: flex;
      justify-content: center;
      align-items: center;

      .btn-view-products,
      .btn-learn-more {
        padding: 16px 0px;
        border-radius: 45px;
        box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.1);
        transition: all 0.6s ease;
        font-family: "Poppins", sans-serif;
        font-size: 16px;
        font-weight: 500;
        cursor: pointer;
        margin: 0.5rem;

        a {
          padding: 0px 40px;
          text-decoration: none;
          display: inline-block;
        }
      }

      .btn-view-products[b-4xgvhqk3p6] {
        background-color: #b80a25;
        border: none;

        a {
          color: #fff;
        }

        &:hover[b-4xgvhqk3p6] {
          background-color: #9d051c;
          transform: translateY(-7px);
        }

        &:active[b-4xgvhqk3p6] {
          transform: translateY(-1px);
        }
      }

      .btn-learn-more[b-4xgvhqk3p6] {
        background-color: transparent;
        border: 2px solid #fff;
        margin-left: 20px;

        a {
          color: #fff;
        }

        &:hover[b-4xgvhqk3p6] {
          background-color: #fff;
          transform: translateY(-7px);

          a {
            color: #000;
          }
        }

        &:active[b-4xgvhqk3p6] {
          transform: translateY(-1px);
        }
      }
    }
  }

  @media (max-width: 1280px) {
    .hero-content[b-4xgvhqk3p6] {
      padding: 0px 150px;

      .hero-title {
        font-size: 58px;
      }

      .hero-subtitle[b-4xgvhqk3p6] {
        font-size: 18px;
      }
    }
  }

  @media (max-width: 1024px) {
    .hero-content[b-4xgvhqk3p6] {
      padding: 0px 100px;

      .hero-title {
        font-size: 48px;
      }

      .hero-subtitle[b-4xgvhqk3p6] {
        font-size: 16px;
      }
    }
  }

  @media (max-width: 768px) {
    .hero-content[b-4xgvhqk3p6] {
      padding: 0px 40px;

      .hero-title {
        font-size: 36px;
      }

      .hero-subtitle[b-4xgvhqk3p6] {
        font-size: 15px;
      }
    }

    .hero-buttons[b-4xgvhqk3p6] {
      flex-direction: column;

      .btn-learn-more {
        margin-left: 0 !important; 
      }

      .btn-view-products[b-4xgvhqk3p6],
      .btn-learn-more[b-4xgvhqk3p6] {
        width: 100%;
        max-width: 280px;

        a {
          padding: 0 20px;
        }
      }
    }
  }

  @media (max-width: 576px) {
    .hero-content[b-4xgvhqk3p6] {
      padding: 0px 20px;

      .hero-title {
        font-size: 28px;
      }

      .hero-subtitle[b-4xgvhqk3p6] {
        font-size: 14px;
      }
    }
  }

  @media (max-width: 360px) {
    .hero-content[b-4xgvhqk3p6] {
      padding: 0px 10px;

      .hero-title {
        font-size: 24px;
      }

      .hero-subtitle[b-4xgvhqk3p6] {
        font-size: 13px;
      }
    }

    .btn-view-products[b-4xgvhqk3p6],
    .btn-learn-more[b-4xgvhqk3p6] {
      font-size: 14px;
    }
  }
}
/* _content/hafamex-ui/Components/AboutStory/AboutStory.razor.rz.scp.css */
.story[b-7ki50g9upb] {
  .container {
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding: 50px 100px;
    gap: 40px;

    .story-content {
      width: 40%;
      .story-title {
        font-size: 2.5rem;
        font-weight: 700;
        font-family: "Poppins", sans-serif;
        margin-bottom: 1rem;
      }

      .story-phrase-first[b-7ki50g9upb] {
        font-size: 1rem;
        font-family: "Poppins", sans-serif;
        margin-bottom: 1rem;
        color: #333;
        line-height: 1.6;
      }
    }

    .story-image[b-7ki50g9upb] {
      width: 60%;
      padding: 40px;

      img {
        width: 100%;
        max-width: 700px;
        height: auto;
        border-radius: 16px;
        box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1),
          0 10px 10px -5px rgba(0, 0, 0, 0.04);
      }
    }
  }

  @media (max-width: 1280px) {
    .container[b-7ki50g9upb] {
      padding: 40px 80px;
      gap: 30px;

      .story-content {
        .story-title {
          font-size: 2.25rem;
        }

        .story-phrase-first[b-7ki50g9upb] {
          font-size: 0.95rem;
        }
      }

      .story-image[b-7ki50g9upb] {
        padding: 30px;
      }
    }
  }

  @media (max-width: 1024px) {
    .container[b-7ki50g9upb] {
      flex-direction: column;
      padding: 40px 60px;

      .story-content,
      .story-image {
        width: 100%;
        text-align: center;
        padding: 0;
      }

      .story-content[b-7ki50g9upb] {
        .story-title {
          font-size: 2rem;
        }

        .story-phrase-first[b-7ki50g9upb] {
          font-size: 0.9rem;
        }
      }

      .story-image[b-7ki50g9upb] {
        margin-top: 20px;

        img {
          max-width: 500px;
        }
      }
    }
  }

  @media (max-width: 768px) {
    .container[b-7ki50g9upb] {
      padding: 30px 40px;

      .story-content {
        .story-title {
          font-size: 1.75rem;
        }

        .story-phrase-first[b-7ki50g9upb] {
          font-size: 0.85rem;
        }
      }

      .story-image img[b-7ki50g9upb] {
        max-width: 100%;
      }
    }
  }

  @media (max-width: 576px) {
    .container[b-7ki50g9upb] {
      padding: 20px;

      .story-content {
        .story-title {
          font-size: 1.5rem;
        }

        .story-phrase-first[b-7ki50g9upb] {
          font-size: 0.8rem;
        }
      }

      .story-image img[b-7ki50g9upb] {
        border-radius: 12px;
        box-shadow: 0 10px 20px rgba(0, 0, 0, 0.08);
      }
    }
  }

  @media (max-width: 360px) {
    .story-content[b-7ki50g9upb] {
      .story-title {
        font-size: 1.25rem;
      }

      .story-phrase-first[b-7ki50g9upb] {
        font-size: 0.75rem;
      }
    }
  }
}

.section--dark[b-7ki50g9upb] {
  width: 100vw;
  background-color: #fff;
}
/* _content/hafamex-ui/Components/AboutValue/AboutValue.razor.rz.scp.css */
.section--small[b-gqo8fiuq6v] {
  width: 100vw;
  background: #ffd4de;
  background: linear-gradient(
    100deg,
    rgba(255, 212, 222, 1) 0%,
    rgba(255, 213, 199, 1) 51%,
    rgba(255, 224, 161, 1) 100%
  );
  height: 100%;
}

.value[b-gqo8fiuq6v] {
  .container {
    display: flex;
    align-items: center;
    justify-content: center;
    max-width: 1200px;
    gap: 100px;
    flex-wrap: wrap;
    padding: 60px 40px;

    .value-card {
      display: flex;
      flex-direction: column;
      align-items: center;
      background: #fff;
      border-radius: 12px;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
      transition: transform 0.3s, box-shadow 0.3s;
      padding: 50px 40px;
      width: 300px;
      min-height: 420px;
      text-align: center;

      &:hover {
        transform: translateY(-5px);
        box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
      }

      .value-card__icon[b-gqo8fiuq6v] {
        width: 80px;
        height: 80px;
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 50%;

        i {
          color: #fff;
        }
      }

      .icon-target[b-gqo8fiuq6v] {
        background-color: #b80a25;

        i {
          font-size: 30px;
        }
      }

      .icon-eye[b-gqo8fiuq6v] {
        background-color: #17a34a;

        i {
          font-size: 30px;
        }
      }

      .icon-users[b-gqo8fiuq6v] {
        background-color: #eab403;

        i {
          font-size: 28px;
        }
      }

      .value-card__title[b-gqo8fiuq6v] {
        margin: 20px 0;
        font-size: 26px;
        font-family: "Roboto", sans-serif;
        font-weight: 700;
      }

      .value-card__text[b-gqo8fiuq6v] {
        font-size: 16px;
        font-family: "Poppins", sans-serif;
        line-height: 1.6;
        color: #333;
      }
    }
  }

  @media (max-width: 1024px) {
    .container[b-gqo8fiuq6v] {
      gap: 60px;
      padding: 40px 30px;

      .value-card {
        width: 260px;
        padding: 40px 30px;

        .value-card__title {
          font-size: 24px;
        }

        .value-card__text[b-gqo8fiuq6v] {
          font-size: 15px;
        }
      }
    }
  }

  @media (max-width: 768px) {
    .value[b-gqo8fiuq6v] {
      height: auto !important;
    }

    .section--small[b-gqo8fiuq6v] {
      height: auto !important;
    }
    .container[b-gqo8fiuq6v] {
      flex-direction: column;
      align-items: center;
      gap: 40px;

      .value-card {
        width: 100%;
        max-width: 400px;
        padding: 30px 20px;

        .value-card__icon {
          width: 70px;
          height: 70px;
        }

        .value-card__title[b-gqo8fiuq6v] {
          font-size: 22px;
        }

        .value-card__text[b-gqo8fiuq6v] {
          font-size: 14px;
        }
      }
    }
  }

  @media (max-width: 576px) {
    .container[b-gqo8fiuq6v] {
      padding: 30px 15px;
      gap: 30px;

      .value-card {
        .value-card__title {
          font-size: 20px;
        }

        .value-card__text[b-gqo8fiuq6v] {
          font-size: 13.5px;
        }

        .value-card__icon[b-gqo8fiuq6v] {
          width: 60px;
          height: 60px;

          i {
            font-size: 24px;
          }
        }
      }
    }
  }

  @media (max-width: 360px) {
    .container[b-gqo8fiuq6v] {
      gap: 20px;

      .value-card {
        padding: 20px 15px;

        .value-card__title {
          font-size: 18px;
        }

        .value-card__text[b-gqo8fiuq6v] {
          font-size: 12.5px;
        }
      }
    }
  }
}
/* _content/hafamex-ui/Components/AlbumHome/AlbumHome.razor.rz.scp.css */
.albumhome[b-0ixg64bjr9] {
  padding: 20px;
  .wrapper {
    .bltitle {
      margin-bottom: 10px;
      .grbum {
        display: flex;
        justify-content: space-around;
        .coll {
          .ttalbum {
            .ttcap {
              font-size: 38px;
              font-family: "poppins", sans-serif;
              font-weight: 700;
              font-style: italic;
              color: #B80A25;
            }
            .tttitle[b-0ixg64bjr9] {
              font-size: 16px;
              font-weight: 300;
              font-style: italic;
              color: #B80A25;
            }
          }
        }
        .colr[b-0ixg64bjr9] {}
      }
    }

    .gallery[b-0ixg64bjr9] {
      overflow: hidden;
      display: flex;
      height: 500px;
      position: relative;
      flex-wrap: nowrap;

      .imgWrap {
        cursor: pointer;
        flex: 1;
        height: 100%;
        background-repeat: no-repeat;
        background-position: center center;
        background-size: cover;
        transition: all 0.75s ease;
        position: relative;

        .caption {
          position: absolute;
          left: 0;
          bottom: -100%;
          background-color: #fff;
          opacity: 0.9;
          border-top: 3px solid #f1ba88;
          padding: 20px 10%;
          font-family: "poppins", sans-serif;
          color: #B80A25;
          width: 100%;
          transition: bottom 0.75s ease;
          z-index: 2;

          h3 {
            font-size: clamp(1rem, 1.2vw, 1.25rem);
            text-transform: uppercase;
            margin-bottom: 0;
          }

          span[b-0ixg64bjr9] {
            font-size: 0.85rem;
          }
        }

        &:hover[b-0ixg64bjr9] {
          flex-grow: 2.25;
          .caption {
            bottom: 0;
          }
        }

        &:not(:hover)[b-0ixg64bjr9] {
          flex-grow: 0.8;
        }

        .img-label[b-0ixg64bjr9] {
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          z-index: 1;
        }
      }

      .full-toggle:checked + .imgWrap[b-0ixg64bjr9] {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100vh;
        z-index: 5;
        animation: zoomIn-b-0ixg64bjr9 0.75s ease forwards;

        .caption {
          bottom: 0;
        }
      }

      .full-toggle:checked ~ .imgWrap:not(:checked + .imgWrap)[b-0ixg64bjr9] {
        width: 0;
        opacity: 0;
      }

      .full-toggle:checked[b-0ixg64bjr9]::before {
        content: "";
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.8);
        z-index: 999;
        animation: fadeIn-b-0ixg64bjr9 0.75s ease forwards;
      }

      .close[b-0ixg64bjr9] {
        display: none;
        position: fixed;
        right: 1rem;
        top: 50%;
        width: 50px;
        height: 50px;
        background-color: #18514a;
        color: #fff;
        z-index: 10;
        transform: translateY(-50%);
        border-radius: 50%;
        text-align: center;
        line-height: 50px;
        transition: all 0.3s ease;

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

      @for $i from 1 through 6 {
        .full-toggle[id="img#{$i}-full"]:checked ~ .close[for="img#{$i}-full"][b-0ixg64bjr9] {
          display: block;
          opacity: 1;
        }
      }
    }
  }
}

/* === RESPONSIVE === */

@media (min-width: 1441px) {
  .gallery[b-0ixg64bjr9] {
    height: 550px;

    .imgWrap .caption {
      padding: 25px 12%;

      h3 {
        font-size: clamp(1.1rem, 1.5vw, 1.4rem);
      }
    }
  }
}

@media (max-width: 1440px) and (min-width: 1281px) {
  .gallery[b-0ixg64bjr9] {
    height: 500px;

    .imgWrap .caption {
      padding: 20px 10%;
      h3 {
        font-size: clamp(1rem, 1.4vw, 1.3rem);
      }
    }
  }
}

@media (max-width: 1280px) and (min-width: 1025px) {
  .gallery[b-0ixg64bjr9] {
    height: 400px;

    .imgWrap .caption {
      padding: 15px 8%;
      h3 {
        font-size: clamp(1rem, 1.2vw, 1.2rem);
      }
    }
  }
}

@media (max-width: 1024px) and (min-width: 769px) {
  .gallery[b-0ixg64bjr9] {
    height: 350px;

    .imgWrap .caption {
      padding: 15px 6%;
      h3 {
        font-size: clamp(0.95rem, 2vw, 1.1rem);
      }
    }
  }
}

@media (max-width: 768px) and (min-width: 577px) {
  .gallery[b-0ixg64bjr9] {
    flex-direction: column;
    height: auto;

    .imgWrap {
      height: 300px;
      flex-grow: 1 !important;

      .caption {
        padding: 12px 6%;
        h3 {
          font-size: 1rem;
        }
      }

      &:hover[b-0ixg64bjr9], &:not(:hover)[b-0ixg64bjr9] {
        flex-grow: 1 !important;
      }
    }

    .full-toggle:checked + .imgWrap[b-0ixg64bjr9] {
      height: 100vh !important;
    }
  }

  .close[b-0ixg64bjr9] {
    width: 40px;
    height: 40px;
    font-size: 0.85rem;
  }
}

@media (max-width: 576px) and (min-width: 361px) {
  .gallery[b-0ixg64bjr9] {
    .imgWrap {
      height: 250px;

      .caption {
        padding: 10px 5%;
        h3 {
          font-size: 0.95rem;
        }
      }
    }
  }
}

@media (max-width: 360px) {
  .gallery[b-0ixg64bjr9] {
    .imgWrap {
      height: 200px;

      .caption {
        padding: 8px 4%;
        h3 {
          font-size: 0.9rem;
        }
      }
    }
  }
}

/* === Animations === */
@keyframes zoomIn-b-0ixg64bjr9 {
  from {
    transform: scale(0.9);
    opacity: 0;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}

@keyframes fadeIn-b-0ixg64bjr9 {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes zoomOut-b-0ixg64bjr9 {
  from {
    transform: scale(1);
    opacity: 1;
  }
  to {
    transform: scale(0.9);
    opacity: 0;
  }
}
/* _content/hafamex-ui/Components/CarouselPlayer/CarouselPlayer.razor.rz.scp.css */
.youtube-wrapper[b-t8tpseaoip] {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%; /* 16:9 ratio */
  cursor: pointer;

  .youtube-thumbnail {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background-size: cover;
    background-position: center;
  }

  .youtube-play-button[b-t8tpseaoip] {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 68px;
    height: 48px;
    background: url('https://img.icons8.com/ios-filled/100/000000/play-button-circled.png') no-repeat center center;
    background-size: contain;
  }
}

.youtube-wrapper[b-t8tpseaoip] {
    position: relative;
    width: 100%;
    padding-top: 56.25%; /* 16:9 ratio */
    overflow: hidden;
}

.youtube-wrapper iframe[b-t8tpseaoip] {
    position: absolute;
    top: 0;
    left: 0;
    border: none;
}

.youtube-thumbnail[b-t8tpseaoip] {
    position: absolute;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    cursor: pointer;
}

.youtube-play-button[b-t8tpseaoip] {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 80px;
    height: 80px;
    margin-left: -40px;
    margin-top: -40px;
    background: url('https://img.icons8.com/ios-filled/100/ffffff/play--v1.png') no-repeat center center;
    background-size: 100%;
    opacity: 0.8;
}
@media (max-width: 768px) {
  .carousel-container[b-t8tpseaoip] {
    display: none;
  }
}
/* _content/hafamex-ui/Components/Carousel/Carousel.razor.rz.scp.css */
/* Carousel */
.carousel-home[b-hgqy3k3e01]{
    animation: appear-b-hgqy3k3e01 1s ease-out forwards;
    .carousel{
        position: relative;
        .carousel-indicators{
            position: absolute;
            bottom: 110px;
        }
        .carousel-inner[b-hgqy3k3e01]{
            .carousel-item{
                position: relative;
                img{
                    /* width: 100%; */
                    /* height: 100vh; */
                    /* object-fit: cover; */
                }
                .carousel-caption[b-hgqy3k3e01]{
                    position: absolute;
                    bottom: 120px;
                    font-family: "Poppins", sans-serif;
                    h5{
                        font-weight: 600;
                        font-size: 36px;
                        color: white;
                    }
                    p[b-hgqy3k3e01]{
                        font-size: 18px;
                        color: white;
                    }
                }
            }
        }
    }
    .carousel-control-prev[b-hgqy3k3e01]{
        .icon-chervon-left{
            color: #73ad17;
            background-color: white;
            width: 50px;
            height: 50px;
            padding: 10px;
            cursor: pointer;
            border: 3px solid #73ad17;
            border-radius: 50%;
            font-size: 20px;
            font-weight: 800;
        }
    }
    .carousel-control-next[b-hgqy3k3e01]{
        .icon-chervon-right{
            color: #73ad17;
            background-color: white;
            width: 50px;
            height: 50px;
            padding: 10px;
            cursor: pointer;
            border: 3px solid #73ad17;
            border-radius: 50%;
            font-size: 20px;
            font-weight: 800;
        }
    }
}

@keyframes appear-b-hgqy3k3e01 {
    0% {
        transform: scale(0); /* Bắt đầu từ kích thước 0 */
        opacity: 0.5;
    }
    100% {
        transform: scale(1); /* Phóng to đến kích thước đầy đủ */
        opacity: 1;
    }
}
/* _content/hafamex-ui/Components/Certificate/Certificate.razor.rz.scp.css */
/* Certificate */
.certificate[b-xiwvjkss5l] {
    margin-top: 50px;
    background-color: #fff;
    text-align: center;
    .container {
      max-width: 1220px;
      margin: 0 auto;
  
    h1.my-4 {
        text-align: center;
        font-family: "Poppins", sans-serif;
        font-weight: 600;
        font-size: 56px;
        text-shadow: 2px 2px 5px rgba(179, 179, 179, 0.6);
        color: #B80A25
;
        position: relative;

        &::after {
          content: '';
          width: 100px;
          height: 4px;
          background-color: #FFA09B;
          position: absolute;
          bottom: -10px;
          left: 50%;
          transform: translateX(-50%);
        }
    }

    p[b-xiwvjkss5l]{
        font-family: "Poppins", sans-serif;
        font-weight: 400;
        font-size: 18px;
        text-align: center;
        line-height: 2;
    }
  
    .slider[b-xiwvjkss5l] {
        margin-top: 50px;
        width: 100%;
        overflow: hidden;
        position: relative;
  
        .slide-track {
          display: flex;
          width: calc(196px * 9); 
          animation: slide-b-xiwvjkss5l 20s linear infinite; 
        }
  
        .slide[b-xiwvjkss5l] {
          flex: 0 0 196px;
          height: 139px;
          display: flex;
          align-items: center;
          justify-content: center;
          margin-right: 20px; 
  
          img {
            width: 196px;
            height: 139px;
            object-fit: contain;
            border-radius: 10px;
            transition: transform 0.3s ease;
  
            &:hover {
              transform: scale(1.1);
            }
          }
        }
      }
    }
  }

  /* // Animation cho slider chạy liên tục */
  @keyframes slide-b-xiwvjkss5l {
    0% {
      transform: translateX(0);
    }
    100% {
        /* // Dịch chuyển hết 5 slides (vì có 5 slides gốc) */
      transform: translateX(calc(-196px * 5)); 
    }
}

/* Certificate Responsive */

/* Dưới 1280px */
@media (max-width: 1280px) {
  .certificate[b-xiwvjkss5l] {
    .container {
      h1.my-4 {
        font-size: 48px;
      }

      p[b-xiwvjkss5l] {
        font-size: 17px;
      }

      .slider[b-xiwvjkss5l] {
        .slide-track {
          width: calc(160px * 9);
        }

        .slide[b-xiwvjkss5l] {
          flex: 0 0 160px;
          height: 120px;

          img {
            width: 160px;
            height: 120px;
          }
        }
      }
    }
  }
}

/* Dưới 1024px */
@media (max-width: 1024px) {
  .certificate[b-xiwvjkss5l] {
    .container {
      h1.my-4 {
        font-size: 42px;
      }

      p[b-xiwvjkss5l] {
        font-size: 16px;
      }

      .slider[b-xiwvjkss5l] {
        .slide-track {
          width: calc(140px * 9);
        }

        .slide[b-xiwvjkss5l] {
          flex: 0 0 140px;
          height: 100px;

          img {
            width: 140px;
            height: 100px;
          }
        }
      }
    }
  }
}

/* Dưới 768px */
@media (max-width: 768px) {
  .certificate[b-xiwvjkss5l] {
    .container {
      h1.my-4 {
        font-size: 36px;
      }

      p[b-xiwvjkss5l] {
        font-size: 15px;
        line-height: 1.8;
      }

      .slider[b-xiwvjkss5l] {
        .slide-track {
          width: calc(120px * 9);
        }

        .slide[b-xiwvjkss5l] {
          flex: 0 0 120px;
          height: 90px;

          img {
            width: 120px;
            height: 90px;
          }
        }
      }
    }
  }
}

/* Dưới 576px */
@media (max-width: 576px) {
  .certificate[b-xiwvjkss5l] {
    .container {
      h1.my-4 {
        font-size: 30px;
      }

      p[b-xiwvjkss5l] {
        font-size: 12px;
      }

      .slider[b-xiwvjkss5l] {
        .slide-track {
          width: calc(100px * 9);
        }

        .slide[b-xiwvjkss5l] {
          flex: 0 0 100px;
          height: 80px;

          img {
            width: 100px;
            height: 80px;
          }
        }
      }
    }
  }
}

/* Dưới 360px */
@media (max-width: 360px) {
  .certificate[b-xiwvjkss5l] {
    .container {
      h1.my-4 {
        font-size: 24px;
      }

      p[b-xiwvjkss5l] {
        font-size: 10px;
      }

      .slider[b-xiwvjkss5l] {
        .slide-track {
          width: calc(90px * 9);
        }

        .slide[b-xiwvjkss5l] {
          flex: 0 0 90px;
          height: 70px;

          img {
            width: 90px;
            height: 70px;
          }
        }
      }
    }
  }
}

/* Trên 1440px thì giữ nguyên */
@media (min-width: 1441px) {
  .certificate[b-xiwvjkss5l] {
    .container {
      h1.my-4 {
        font-size: 56px;
      }

      p[b-xiwvjkss5l] {
        font-size: 18px;
      }

      .slider[b-xiwvjkss5l] {
        .slide-track {
          width: calc(196px * 9);
        }

        .slide[b-xiwvjkss5l] {
          flex: 0 0 196px;
          height: 139px;

          img {
            width: 196px;
            height: 139px;
          }
        }
      }
    }
  }
}
/* _content/hafamex-ui/Components/FactoryAndFarm/FactoryAndFarm.razor.rz.scp.css */
.faf-home[b-y86xwv97c6] {
  margin-top: 50px;
  .faf-bg {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    align-content: center;
    padding: 50px 0;
    min-height: 800px;
    background-attachment: fixed;
    position: relative;
    z-index: 1;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    .overlay {
      position: absolute;
      inset: 0;
      background: rgba(0, 0, 0, 0.4);
      z-index: 1;
    }
    .container[b-y86xwv97c6] {
      position: relative;
      margin: 0 auto;
      border: none;
      padding: 60px 80px;
      z-index: 10;
      .wrapper {
        margin: 0 auto;
        text-align: center;
        line-height: 36px;
        font-family: "Poppins", sans-serif;
        color: #fff;
        .faf-content {
          width: 100%;
          h1 {
            font-size: 42px;
            font-weight: 500;
            text-align: center;
            text-shadow: 5px 5px 10px rgba(0, 0, 0, 0.6);
          }
          p[b-y86xwv97c6] {
            font-size: 18px;
          }
        }
      }
      .row[b-y86xwv97c6] {
        margin-top: 50px;
      }
      .btn-get-more[b-y86xwv97c6] {
        padding: 18px 0px;
        background-color: #fff;
        border: 1px solid #b80a25;
        border-radius: 45px;
        box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.1);
        transition: all 0.3s ease 0s;
        cursor: pointer;
        outline: none;
        a {
          padding: 0px 32px;
          font-size: 14px;
          font-family: "Poppins", sans-serif;
          text-transform: uppercase;
          font-weight: 500;
          letter-spacing: 2.5px;
          color: #b80a25;
          text-decoration: none;
        }
        &:hover[b-y86xwv97c6] {
          background-color: #b80a25;
          box-shadow: 0px 15px 20px #e58a8a;
          transform: translateY(-7px);
          a {
            color: #fff;
          }
        }
        &:active[b-y86xwv97c6] {
          transform: translateY(-1px);
        }
      }
    }
    &[b-y86xwv97c6]:before {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      opacity: 0.25;
      pointer-events: none;
    }
  }
}

/* ====================== Responsive ====================== */

@media (max-width: 360px) {
  .faf-home .faf-bg[b-y86xwv97c6] {
    padding: 30px 0;
    min-height: 500px;
    .container {
      padding: 15px;
      .wrapper {
        line-height: 28px;
        .faf-content {
          h1 {
            font-size: 18px;
          }
          p[b-y86xwv97c6] {
            font-size: 10px;
          }
        }
      }
    }

    .btn-get-more[b-y86xwv97c6] {
      padding: 10px 20px;
      font-size: 12px;
    }
  }
}

@media (max-width: 576px) {
  .faf-home .faf-bg[b-y86xwv97c6] {
    padding: 40px 0;
    min-height: 550px;

    .container {
      padding: 30px;

      .wrapper {
        line-height: 30px;

        .faf-content {
          h1 {
            font-size: 20px;
          }

          p[b-y86xwv97c6] {
            font-size: 12px;
          }
        }
      }
    }

    .btn-get-more[b-y86xwv97c6] {
      padding: 12px 24px;
      font-size: 13px;
    }
  }
}

@media (max-width: 768px) {
  .faf-home .faf-bg[b-y86xwv97c6] {
    padding: 50px 0;
    min-height: 600px;

    .container {
      padding: 40px 20px !important;
      .wrapper {
        line-height: 32px;
        width: 100%;
        .faf-content {
          h1 {
            font-size: 26px;
          }

          p[b-y86xwv97c6] {
            margin-top: 20px;
            font-size: 14px;
          }
        }
      }
    }

    .btn-get-more[b-y86xwv97c6] {
      padding: 14px 28px;
      font-size: 13.5px;
    }
  }
}

@media (max-width: 1024px) {
  .faf-home .faf-bg[b-y86xwv97c6] {
    min-height: 700px;

    .container {
      padding: 50px;

      .wrapper {
        line-height: 34px;

        .faf-content {
          h1 {
            font-size: 36px;
          }

          p[b-y86xwv97c6] {
            font-size: 17px;
          }
        }
      }
    }

    .btn-get-more[b-y86xwv97c6] {
      padding: 15px 30px;
      font-size: 14px;
    }
  }
}

@media (max-width: 1280px) {
  .faf-home .faf-bg[b-y86xwv97c6] {
    .container {
      padding: 60px;

      .wrapper {
        .faf-content {
          h1 {
            font-size: 38px;
          }
        }
      }
    }
  }
}

@media (min-width: 1441px) {
  .faf-home .faf-bg[b-y86xwv97c6] {
    .container {
      padding: 80px;

      .wrapper {
        .faf-content {
          h1 {
            font-size: 48px;
          }

          p[b-y86xwv97c6] {
            font-size: 20px;
          }
        }
      }
    }
  }
}
/* _content/hafamex-ui/Components/FreshFruit/FreshFruit.razor.rz.scp.css */
h4[b-kx8lwsa2jo] {
  font-size: 24px;
  font-weight: 600;
  color: #b80a25;
  margin-top: 20px;
}

@media (max-width: 768px) {
  h4[b-kx8lwsa2jo] {
    font-size: 20px;
  }
}

@media (max-width: 576px) {
  h4[b-kx8lwsa2jo] {
    font-size: 18px;
  }
}

@media (max-width: 360px) {
  h4[b-kx8lwsa2jo] {
    font-size: 16px;
  }
}

.products-grid[b-kx8lwsa2jo] {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
  padding: 0 20px;
}

.product-card[b-kx8lwsa2jo] {
  background: white;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  transition: transform 0.3s, box-shadow 0.3s;
  position: relative;
  padding: 20px 10px;
  width: 320px;
  height: auto;
}

.product-card:hover[b-kx8lwsa2jo] {
  transform: translateY(-5px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

.product-card:hover .product-image img[b-kx8lwsa2jo] {
  transform: scale(1.05);
}

.product-card:hover .quick-view-btn[b-kx8lwsa2jo] {
  opacity: 1;
}

.product-image[b-kx8lwsa2jo] {
  position: relative;
  overflow: hidden;
}

.product-image img[b-kx8lwsa2jo] {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s;
}

.quick-view-btn[b-kx8lwsa2jo] {
  position: absolute;
  top: 10px;
  right: 10px;
  background: rgba(255, 255, 255, 0.9);
  border: none;
  border-radius: 50%;
  width: 35px;
  height: 35px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.3s;
}

.quick-view-btn img[b-kx8lwsa2jo] {
  border-radius: 50%;
  width: 40px;
  height: 40px;
}

.product-info[b-kx8lwsa2jo] {
  padding: 20px 10px;
}

@media (max-width: 768px) {
  .product-info[b-kx8lwsa2jo] {
    padding: 16px 8px;
  }
}

@media (max-width: 576px) {
  .product-info[b-kx8lwsa2jo] {
    padding: 12px 6px;
  }
}

.product-name[b-kx8lwsa2jo] {
  font-size: 22px;
  font-weight: 600;
  color: #b80a25;
  margin-bottom: 15px;
  text-decoration: none;
  transition: color 0.3s;
}

@media (max-width: 768px) {
  .product-name[b-kx8lwsa2jo] {
    font-size: 18px;
  }
}

@media (max-width: 576px) {
  .product-name[b-kx8lwsa2jo] {
    font-size: 16px;
  }
}

.product-discription[b-kx8lwsa2jo] {
  line-height: 2;
  font-size: 14px;
  color: #666;
  margin-bottom: 14px;
}

@media (max-width: 768px) {
  .product-discription[b-kx8lwsa2jo] {
    font-size: 13px;
  }
}

@media (max-width: 576px) {
  .product-discription[b-kx8lwsa2jo] {
    font-size: 12px;
  }
}

.contact-btn[b-kx8lwsa2jo] {
  background: #c4ae50;
  color: white;
  border: none;
  border-radius: 6px;
  padding: 10px 20px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 0.3s;
}

.contact-btn:hover[b-kx8lwsa2jo] {
  background: #b59d40;
}

@media (max-width: 576px) {
  .contact-btn[b-kx8lwsa2jo] {
    font-size: 12px;
    padding: 8px 16px;
  }
}

@media (max-width: 1280px) {
  .products-grid[b-kx8lwsa2jo] {
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    padding: 0 15px;
  }
}

@media (max-width: 1024px) {
  .products-grid[b-kx8lwsa2jo] {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    padding: 0 10px;
  }
}

@media (max-width: 768px) {
  .products-grid[b-kx8lwsa2jo] {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    padding: 0 10px;
  }
}

@media (max-width: 576px) {
  .products-grid[b-kx8lwsa2jo] {
    grid-template-columns: 1fr;
    gap: 16px;
    padding: 0 10px;
  }
}

@media (max-width: 360px) {
  .products-grid[b-kx8lwsa2jo] {
    grid-template-columns: 1fr;
    gap: 12px;
    padding: 0 6px;
  }
}
/* _content/hafamex-ui/Components/FreshVegetable/FreshVegetable.razor.rz.scp.css */
h4[b-a72aslqirw] {
  font-size: 24px;
  font-weight: 600;
  color: #b80a25;
  margin-top: 20px;
}

@media (max-width: 768px) {
  h4[b-a72aslqirw] {
    font-size: 20px;
  }
}

@media (max-width: 576px) {
  h4[b-a72aslqirw] {
    font-size: 18px;
  }
}

@media (max-width: 360px) {
  h4[b-a72aslqirw] {
    font-size: 16px;
  }
}

.products-grid[b-a72aslqirw] {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
  padding: 0 20px;
}

.product-card[b-a72aslqirw] {
  background: white;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  transition: transform 0.3s, box-shadow 0.3s;
  position: relative;
  padding: 20px 10px;
  width: 320px;
  height: auto;
}

.product-card:hover[b-a72aslqirw] {
  transform: translateY(-5px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

.product-card:hover .product-image img[b-a72aslqirw] {
  transform: scale(1.05);
}

.product-card:hover .quick-view-btn[b-a72aslqirw] {
  opacity: 1;
}

.product-image[b-a72aslqirw] {
  position: relative;
  overflow: hidden;
}

.product-image img[b-a72aslqirw] {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s;
}

.quick-view-btn[b-a72aslqirw] {
  position: absolute;
  top: 10px;
  right: 10px;
  background: rgba(255, 255, 255, 0.9);
  border: none;
  border-radius: 50%;
  width: 35px;
  height: 35px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.3s;
}

.quick-view-btn img[b-a72aslqirw] {
  border-radius: 50%;
  width: 40px;
  height: 40px;
}

.product-info[b-a72aslqirw] {
  padding: 20px 10px;
}

@media (max-width: 768px) {
  .product-info[b-a72aslqirw] {
    padding: 16px 8px;
  }
}

@media (max-width: 576px) {
  .product-info[b-a72aslqirw] {
    padding: 12px 6px;
  }
}

.product-name[b-a72aslqirw] {
  font-size: 22px;
  font-weight: 600;
  color: #b80a25;
  margin-bottom: 15px;
  text-decoration: none;
  transition: color 0.3s;
}

@media (max-width: 768px) {
  .product-name[b-a72aslqirw] {
    font-size: 18px;
  }
}

@media (max-width: 576px) {
  .product-name[b-a72aslqirw] {
    font-size: 16px;
  }
}

.product-discription[b-a72aslqirw] {
  line-height: 2;
  font-size: 14px;
  color: #666;
  margin-bottom: 14px;
}

@media (max-width: 768px) {
  .product-discription[b-a72aslqirw] {
    font-size: 13px;
  }
}

@media (max-width: 576px) {
  .product-discription[b-a72aslqirw] {
    font-size: 12px;
  }
}

.contact-btn[b-a72aslqirw] {
  background: #c4ae50;
  color: white;
  border: none;
  border-radius: 6px;
  padding: 10px 20px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 0.3s;
}

.contact-btn:hover[b-a72aslqirw] {
  background: #b59d40;
}

@media (max-width: 576px) {
  .contact-btn[b-a72aslqirw] {
    font-size: 12px;
    padding: 8px 16px;
  }
}

@media (max-width: 1280px) {
  .products-grid[b-a72aslqirw] {
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    padding: 0 15px;
  }
}

@media (max-width: 1024px) {
  .products-grid[b-a72aslqirw] {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    padding: 0 10px;
  }
}

@media (max-width: 768px) {
  .products-grid[b-a72aslqirw] {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    padding: 0 10px;
  }
}

@media (max-width: 576px) {
  .products-grid[b-a72aslqirw] {
    grid-template-columns: 1fr;
    gap: 16px;
    padding: 0 10px;
  }
}

@media (max-width: 360px) {
  .products-grid[b-a72aslqirw] {
    grid-template-columns: 1fr;
    gap: 12px;
    padding: 0 6px;
  }
}
/* _content/hafamex-ui/Components/GetContact/GetContact.razor.rz.scp.css */



.get-contact[b-xfx1w4svu2] {
    background-image: linear-gradient(to right, #ffecd2 0%, #fcb69f 100%);
    padding: 40px 20px 60px 20px;
    text-align: center;
    height: 100vh;
    .container{
        .main-title{
            h1{
                box-sizing: border-box;
                border: none;
                outline: none;
                font-size:48px;
                font-weight: 600;
                color: #B80A25 ;
            }
        }
        .loader[b-xfx1w4svu2] {
    
          display: flex;
          justify-content: center;
          margin: 50px 0px;
          .absolute {
            position: absolute;
          }
      
          .inline-block[b-xfx1w4svu2] {
            display: inline-block;
          }
      
          .w-2[b-xfx1w4svu2] {
            width: 0.5em;
          }
      
          .dash[b-xfx1w4svu2] {
            animation: dashArray-b-xfx1w4svu2 2s ease-in-out infinite,
              dashOffset-b-xfx1w4svu2 2s linear infinite;
          }
      
          .spin[b-xfx1w4svu2] {
            animation: spinDashArray-b-xfx1w4svu2 2s ease-in-out infinite,
              spin-b-xfx1w4svu2 8s ease-in-out infinite,
              dashOffset-b-xfx1w4svu2 2s linear infinite;
            transform-origin: center;
          }
        }
      
        .contact-form-card[b-xfx1w4svu2] {
            background: transparent;
            margin-top: 20px;
            margin-left: auto;
            margin-right: auto;
            display: flex;
            justify-content: space-around;
            align-items: center;
            .info-us{
                background-color: white;
                min-height: 500px;
                width: 40%;
                padding: 40px 30px;
                text-align: left;
                border-radius: 16px;
                box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
                font-family: 'Poppins', sans-serif;
                .company-name{
                    color: #B80A25;
                    font-weight: 600;
                }
                .info[b-xfx1w4svu2]{
                    padding: 20px 10px 10px 30px;
                    .address, .phone-number, .email-address{
                        gap: 10px;
                        display: flex;
                        h5{
                            font-weight: 600;
                            font-size: 16px;
                        }   
                        i[b-xfx1w4svu2]{
                            color: #B80A25;
                        }
                    }
                    p[b-xfx1w4svu2]{
                        font-size: 12px;
                    }
                }
            }
            form[b-xfx1w4svu2] {
                background-color: white;
                margin-left: 50px;
                min-height: 500px;
                width: 60%;
                padding: 20px 30px;
                display: flex;
                flex-direction: column;
                gap: 10px;
                border-radius: 16px;
                box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
                .form-title {
                    text-align: center;
                    font-size: 2rem;
                    font-weight: 600;
                    margin-bottom: 10px;
                    color: #B80A25;
                }
                .form-row[b-xfx1w4svu2] {
                display: flex;
                gap: 20px;
                flex-wrap: wrap;
                    .form-group {
                        flex: 1;
                        display: flex;
                        flex-direction: column;
                        font-family: 'Poppins', sans-serif;
                        label {
                            font-weight: 600;
                            font-size: 14px;
                            text-align: left;
                            margin-bottom: 8px;
                        }
                        input[b-xfx1w4svu2], textarea[b-xfx1w4svu2] {
                            padding: 12px 16px;
                            border: 1px solid #ccc;
                            border-radius: 15px;
                            font-size: 14px;
                            transition: all 0.3s ease;
                            &:focus {
                                border-color: #8e44ad;
                                box-shadow: 0 0 0 3px rgba(142, 68, 173, 0.2);
                                outline: none;
                            }
                        }
            
                        textarea[b-xfx1w4svu2] {
                            resize: vertical;
                        }
                    }
                }
                .ft-form[b-xfx1w4svu2]{
                    margin-top: 10px;
                    width: 100%;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    .submit-btn {
                        width: 200px;
                        height: 50px;
                        border: none;
                        border-radius: 45px;
                        padding: 10px 20px;
                        font-size: 14px;
                        cursor: pointer;
                        position: relative;
                        overflow: hidden;
                        transition: all 0.5s ease-in-out;
                        border: 1px solid #B80A25;

                        &:hover {
                            box-shadow: .5px .5px 150px #252525;
                        }
                    }
                    .type1[b-xfx1w4svu2]::after {
                        content: "Thanks";
                        background-color: #B80A25;
                        color: #fff;
                        width: 200px;
                        height: 50px;
                        position: absolute;
                        top: 0%;
                        left: 0%;
                        transform: translateY(50px);
                        font-size: 14px;
                        font-weight: 600;
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        transition: all 0.5s ease-in-out;
                      }
                      
                      .type1[b-xfx1w4svu2]::before {
                        content: "Send Request";
                        background-color: #fff;
                        color: #B80A25;
                        width: 200px;
                        height: 50px;
                        position: absolute;
                        top: 0%;
                        left: 0%;
                        transform: translateY(0px) scale(1.2);
                        font-weight: 600;
                        font-size: 14px;
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        transition: all 0.5s ease-in-out;
                      }
                      
                      .type1:hover[b-xfx1w4svu2]::after {
                        transform: translateY(0) scale(1.2);
                      }
                      
                      .type1:hover[b-xfx1w4svu2]::before {
                        transform: translateY(-50px) scale(0) rotate(120deg);
                      }
                }
        
            }
        }
    }
  }
    @keyframes gradientMove-b-xfx1w4svu2 {
        0% { background-position: 0% 50%; }
        50% { background-position: 100% 50%; }
        100% { background-position: 0% 50%; }
    }
  
    @keyframes dashArray-b-xfx1w4svu2 {
        0% {
        stroke-dasharray: 0 1 359 0;
        }
        50% {
        stroke-dasharray: 0 359 1 0;
        }
        100% {
        stroke-dasharray: 359 1 0 0;
        }
    }
  
    @keyframes spinDashArray-b-xfx1w4svu2 {
        0% {
        stroke-dasharray: 270 90;
        }
        50% {
        stroke-dasharray: 0 360;
        }
        100% {
        stroke-dasharray: 270 90;
        }
    }
  
    @keyframes dashOffset-b-xfx1w4svu2 {
        0% {
        stroke-dashoffset: 365;
        }
        100% {
        stroke-dashoffset: 5;
        }
    }
    
    @keyframes spin-b-xfx1w4svu2 {
        0% {
        rotate: 0deg;
        }
        12.5%, 25% {
        rotate: 270deg;
        }
        37.5%, 50% {
        rotate: 540deg;
        }
        62.5%, 75% {
        rotate: 810deg;
        }
        87.5%, 100% {
        rotate: 1080deg;
        }
    }
  




/* _content/hafamex-ui/Components/Journey/Journey.razor.rz.scp.css */
.journey-container[b-rf427y1lx3] {
  max-width: 64rem;
  margin: 0 auto;
  padding: 40px;
  text-align: center;
  .journey-title {
    font-family: "Poppins", sans-serif;
    font-weight: 700;
    color: #1f2937;
    margin-bottom: 30px;
  }

  .journey-list[b-rf427y1lx3] {
    display: flex;
    flex-direction: column;
    gap: 2rem;

    .journey-item {
      display: flex;
      align-items: center;
      gap: 2rem;
      text-align: left;

      .journey-year {
        flex-shrink: 0;
        width: 6rem;
        height: 6rem;
        background-color: #b80a25;
        border-radius: 9999px;
        display: flex;
        align-items: center;
        justify-content: center;

        span {
          color: #fff;
          font-weight: 700;
          font-size: 1.125rem;
        }
      }

      .journey-content[b-rf427y1lx3] {
        flex: 1;

        .journey-heading {
          font-size: 1.5rem;
          font-weight: 700;
          color: #1f2937;
          margin-bottom: 0.5rem;
        }

        .journey-description[b-rf427y1lx3] {
          color: #4b5563;
        }
      }
    }
  }
}
/* _content/hafamex-ui/Components/Map/Map.razor.rz.scp.css */
/* Market-location */
.market-location[b-cd5cz2zndv] {
  margin-top: 50px;

  .container {
    h1 {
      text-align: center;
      font-family: "Poppins", sans-serif;
      font-weight: 600;
      font-size: 56px;
      text-shadow: 2px 2px 5px rgba(179, 179, 179, 0.6);
      color: #b80a25;
      position: relative;

      &::after {
        content: '';
        width: 100px;
        height: 4px;
        background-color: #ffa09b;
        position: absolute;
        bottom: -10px;
        left: 50%;
        transform: translateX(-50%);
      }
    }

    p[b-cd5cz2zndv] {
      padding: 20px 50px;
      font-family: "Poppins", sans-serif;
      font-weight: 400;
      font-size: 18px;
      text-align: center;
      line-height: 2;
      color: #333;
    }

    .market-map[b-cd5cz2zndv] {
      position: relative;
      min-height: 650px;
      img {
        position: absolute;
        top: 0;
        left: -120px;
        max-width: 100%;
        height: auto;
      }
    }

    .location-info[b-cd5cz2zndv] {
      width: 250px;
      height: 100px;
      background-color: #b80a25;

      .content {
        padding: 10px 10px 0 10px;

        .tag-title {
          font-size: 16px;
          font-family: "Poppins", sans-serif;
          font-weight: 600;
          color: white;
        }

        .info[b-cd5cz2zndv] {
          ul {
            list-style: none;
            padding: 0;
            margin: 0;

            li {
              p {
                text-align: left;
                padding: 0;
                line-height: 1.2;
                font-size: 8px;
              }
            }
          }
        }
      }
    }
  }
}

/* Responsive Adjustments */
@media (max-width: 1280px) {
  .market-location .container[b-cd5cz2zndv] {
    h1 {
      font-size: 48px;
    }
    p[b-cd5cz2zndv] {
      font-size: 17px;
      padding: 20px 30px;
    }
    .market-map[b-cd5cz2zndv] {
      min-height: 550px;
      img {
        left: -100px;
      }
    }
  }
}

@media (max-width: 1024px) {
  .market-location .container[b-cd5cz2zndv] {
    h1 {
      font-size: 42px;
    }
    p[b-cd5cz2zndv] {
      font-size: 16px;
    }
    .market-map[b-cd5cz2zndv] {
      min-height: 500px;
      img {
        left: -80px;
      }
    }
  }
}

@media (max-width: 768px) {
  .market-location .container[b-cd5cz2zndv] {
    h1 {
      font-size: 36px;
    }
    p[b-cd5cz2zndv] {
      font-size: 15px;
      padding: 20px;
    }
    .market-map[b-cd5cz2zndv] {
      min-height: 450px;
      img {
        left: -50px;
      }
    }
  }
}

@media (max-width: 576px) {
  .market-location .container[b-cd5cz2zndv] {
    h1 {
      font-size: 30px;
    }
    p[b-cd5cz2zndv] {
      font-size: 14px;
      padding: 15px;
    }
    .market-map[b-cd5cz2zndv] {
      min-height: 400px;
      img {
        left: -20px;
      }
    }
  }
}

@media (max-width: 360px) {
  .market-location .container[b-cd5cz2zndv] {
    h1 {
      font-size: 26px;
    }
    p[b-cd5cz2zndv] {
      font-size: 13px;
      padding: 10px;
    }
    .market-map[b-cd5cz2zndv] {
      min-height: 350px;
      img {
        left: 0;
      }
    }
  }
}

@media (min-width: 1441px) {
  .market-location .container[b-cd5cz2zndv] {
    h1 {
      font-size: 64px;
    }
    p[b-cd5cz2zndv] {
      font-size: 20px;
    }
    .market-map[b-cd5cz2zndv] {
      min-height: 700px;
      img {
        left: -150px;
      }
    }
  }
}
/* _content/hafamex-ui/Components/PremiumFreshFruit/PremiumFreshFruit.razor.rz.scp.css */
/* _content/hafamex-ui/Components/Process/Process.razor.rz.scp.css */
.process[b-tjkpalk6f1] {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 50px 0;

  .process-container {
    padding: 0 100px;
    text-align: center;

    .process-title {
      font-family: "Poppins", sans-serif;
      font-weight: 700;
      color: #1f2937;
    }

    .subtitle-process[b-tjkpalk6f1] {
      font-size: 18px;
      font-weight: 400;
      color: grey;
    }

    .process-list[b-tjkpalk6f1] {
      margin-top: 30px;
      display: grid;
      grid-template-columns: repeat(5, 1fr);
      gap: 10px;

      .process-item {
        border-radius: 15px;
        overflow: hidden;

        .process-img {
          overflow: hidden;
          border-radius: 15px;

          img {
            border-radius: 15px;
            height: auto;
            width: 100%;
            max-width: 250px;
            transition: transform 0.3s ease-in-out;
          }

          &:hover img[b-tjkpalk6f1] {
            transform: scale(1.08);
          }
        }

        .process-item-title[b-tjkpalk6f1] {
          font-family: "Poppins", sans-serif;
          font-weight: 600;
          font-size: 18px;
          margin: 20px 0 10px 0;
        }

        .process-item-subtitle[b-tjkpalk6f1] {
          font-size: 14px;
          font-weight: 400;
          color: grey;
        }
      }
    }
  }

  @media (max-width: 1280px) {
    .process-container[b-tjkpalk6f1] {
      padding: 0 80px;

      .process-list {
        grid-template-columns: repeat(4, 1fr);
      }
    }
  }

  @media (max-width: 1024px) {
    .process-container[b-tjkpalk6f1] {
      padding: 0 60px;

      .process-list {
        grid-template-columns: repeat(3, 1fr);
      }
    }
  }

  @media (max-width: 768px) {
    .process-container[b-tjkpalk6f1] {
      padding: 0 40px;

      .process-list {
        grid-template-columns: repeat(2, 1fr);
      }
    }
  }

  @media (max-width: 576px) {
    .process-container[b-tjkpalk6f1] {
      padding: 0 20px;

      .process-list {
        grid-template-columns: 1fr;
        justify-items: center;
      }

      .process-item[b-tjkpalk6f1] {
        .process-img img {
          max-width: 90%;
        }
      }
    }
  }

  @media (max-width: 360px) {
    .process-container[b-tjkpalk6f1] {
      padding: 0 10px;

      .process-title {
        font-size: 20px;
      }

      .subtitle-process[b-tjkpalk6f1] {
        font-size: 14px;
      }

      .process-list[b-tjkpalk6f1] {
        gap: 8px;
      }

      .process-item[b-tjkpalk6f1] {
        .process-img img {
          max-width: 100%;
        }

        .process-item-title[b-tjkpalk6f1] {
          font-size: 16px;
        }

        .process-item-subtitle[b-tjkpalk6f1] {
          font-size: 12px;
        }
      }
    }
  }
}
/* _content/hafamex-ui/Components/ProductBanner/ProductBanner.razor.rz.scp.css */
.bg-product[b-ptfxn6wchd] {
  position: relative;
  height: 90vh;
  background-color: #fff5f9;
  background-image: linear-gradient(
    45deg,
    #f9f9e0 0%,
    #fce7f3 50%,
    #c7e9b0 100%
  );
  border-bottom-left-radius: 200px;
  border-bottom-right-radius: 200px;
  animation: moveUptoDown-b-ptfxn6wchd 1.5s ease-in-out forwards; /* Hiệu ứng di chuyển từ trên xuống dưới */
  .container {
    position: relative;
    z-index: 100;
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 100%;
    padding: 0 50px;
    .lf {
      padding: 20px 20px 100px 50px;
      h1 {
        box-sizing: border-box;
        border: none;
        outline: none;
        font-size: 58px;
        font-family: "Poppins", sans-serif;
        font-weight: bold;
        color: #b80a25;
        text-shadow: 2px 2px 4px rgba(255, 255, 255, 0.5);
      }
      h4[b-ptfxn6wchd] {
        font-size: 24px;
        font-weight: 500;
        color: #b80a25;
        text-shadow: 2px 2px 4px rgba(251, 251, 251, 0.5);
      }
      p[b-ptfxn6wchd] {
        font-size: 16px;
        font-weight: 400;
        color: #b80a25;
        text-shadow: 2px 2px 4px rgba(251, 251, 251, 0.5);
      }

      .btn-get-contact[b-ptfxn6wchd] {
        padding: 10px 20px;
        font-size: 12px;
        text-transform: uppercase;
        letter-spacing: 1px;
        font-weight: 500;
        background-color: #fff;
        font-family: "Poppins", sans-serif;
        color: #b80a25;
        border: 1px solid #b80a25;
        box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.1);
        border-radius: 45px;
        transition: all 0.3s ease 0s;
        cursor: pointer;
        outline: none;
        &:hover {
          background-color: #b80a25;
          box-shadow: 0px 15px 20px #de7786;
          color: #fff;
          transform: translateY(-7px);
        }
        &:active[b-ptfxn6wchd] {
          transform: translateY(-1px);
        }
      }
    }

    .rg[b-ptfxn6wchd] {
      position: relative;
      display: flex;
      justify-content: center;
      align-items: center;
      .fruit-container {
        padding: 0 0 100px 20px;
        display: inline-block;
        .fruit {
          display: block;
          position: relative;
        }
      }
    }
  }
  .pseudo-bg[b-ptfxn6wchd] {
    position: relative;
    animation: appear-b-ptfxn6wchd 1.5s ease-out forwards;
    img {
      position: absolute;
      z-index: -10;
      top: -280px;
      left: -55px;
      /* width: 100%; */
      /* height: 100%; */
    }
  }
}

/* ================= Responsive for .bg-product ================= */

@media (max-width: 1280px) {
  .bg-product[b-ptfxn6wchd] {
    border-bottom-left-radius: 100px;
    border-bottom-right-radius: 100px;
    .container {
      padding: 0 30px;

      .lf {
        padding: 20px 20px 80px 30px;

        h1 {
          font-size: 46px;
        }
        h4[b-ptfxn6wchd] {
          font-size: 20px;
        }
        p[b-ptfxn6wchd] {
          font-size: 14px;
        }
      }

      .rg .fruit-container[b-ptfxn6wchd] {
        padding: 0 0 80px 10px;
        .fruit {
          width: 400px !important;
        }
      }
    }

    .pseudo-bg img[b-ptfxn6wchd] {
      top: -250px;
      left: -30px;
      width: 300px;
    }
  }
}

@media (max-width: 1024px) {
  .bg-product[b-ptfxn6wchd] {
    height: auto;

    .container {
      flex-direction: column;
      align-items: center;
      padding: 0 20px;

      .lf {
        padding: 50px 10px 20px;
        text-align: center;
        width: 100%;

        h1 {
          font-size: 40px;
        }
        h4[b-ptfxn6wchd] {
          font-size: 18px;
        }
        p[b-ptfxn6wchd] {
          font-size: 14px;
        }

        .btn-get-contact[b-ptfxn6wchd] {
          margin: 10px;
        }
      }

      .rg .fruit-container[b-ptfxn6wchd] {
        padding: 20px 0 50px;
        .fruit {
          width: 340px !important;
        }
      }
    }

    .pseudo-bg img[b-ptfxn6wchd] {
      top: -220px;
      left: 10px;
      width: 280px;
    }
  }
}

@media (max-width: 768px) {
  .bg-product[b-ptfxn6wchd] {
    .container {
      .lf {
        h1 {
          font-size: 32px;
        }
        h4[b-ptfxn6wchd] {
          font-size: 16px;
        }
        p[b-ptfxn6wchd] {
          font-size: 13px;
        }
      }

      .rg .fruit-container .fruit[b-ptfxn6wchd] {
        width: 300px !important;
      }
    }

    .pseudo-bg img[b-ptfxn6wchd] {
      display: none;
    }
  }
}

@media (max-width: 576px) {
  .bg-product[b-ptfxn6wchd] {
    border-bottom-left-radius: 50px;
    border-bottom-right-radius: 50px;
    .container {
      .lf {
        h1 {
          font-size: 28px;
        }
        h4[b-ptfxn6wchd] {
          font-size: 14px;
        }
        p[b-ptfxn6wchd] {
          font-size: 12px;
        }

        .btn-get-contact[b-ptfxn6wchd] {
          padding: 8px 16px;
          font-size: 10px;
        }
      }

      .rg .fruit-container .fruit[b-ptfxn6wchd] {
        width: 260px !important;
      }
    }

    .pseudo-bg img[b-ptfxn6wchd] {
      display: none;
    }
  }
}

@media (max-width: 360px) {
  .bg-product[b-ptfxn6wchd] {
    .container {
      .lf {
        h1 {
          font-size: 24px;
        }
        h4[b-ptfxn6wchd] {
          font-size: 13px;
        }
        p[b-ptfxn6wchd] {
          font-size: 11px;
        }

        .btn-get-contact[b-ptfxn6wchd] {
          padding: 6px 14px;
          font-size: 9px;
        }
      }

      .rg .fruit-container .fruit[b-ptfxn6wchd] {
        width: 220px !important;
      }
    }

    .pseudo-bg img[b-ptfxn6wchd] {
      display: none;
    }
  }
}

@media (min-width: 1441px) {
  .bg-product[b-ptfxn6wchd] {
    .container {
      .lf {
        h1 {
          font-size: 64px;
        }
        h4[b-ptfxn6wchd] {
          font-size: 28px;
        }
        p[b-ptfxn6wchd] {
          font-size: 18px;
        }
      }

      .rg .fruit-container .fruit[b-ptfxn6wchd] {
        width: 550px !important;
      }
    }

    .pseudo-bg img[b-ptfxn6wchd] {
      top: -300px;
      left: -50px;
      width: 420px;
    }
  }
}

@keyframes appear-b-ptfxn6wchd {
  0% {
    transform: scale(0); /* Bắt đầu từ kích thước 0 */
    opacity: 0;
  }
  100% {
    transform: scale(1); /* Phóng to đến kích thước đầy đủ */
    opacity: 1;
  }
}
@keyframes moveUptoDown-b-ptfxn6wchd {
  0% {
    transform: translateY(-50vh); /* Bắt đầu từ vị trí trên */
  }
  100% {
    transform: translateY(0); /* Kết thúc ở vị trí ban đầu */
  }
}
/* _content/hafamex-ui/Components/ProductCard/ProductCard.razor.rz.scp.css */
.product-card[b-vs8a2yp6lp] {
  background: white;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  transition: transform 0.3s, box-shadow 0.3s;
  position: relative;
  padding: 20px 10px;
  width: 320px;
  height: auto;
  &:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);

    .product-image img {
      transform: scale(1.05);
    }

    .quick-view-btn[b-vs8a2yp6lp] {
      opacity: 1;
    }
  }

  .product-image[b-vs8a2yp6lp] {
    position: relative;
    overflow: hidden;
    img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: transform 0.3s;
    }
  }

  .quick-view-btn[b-vs8a2yp6lp] {
    position: absolute;
    top: 10px;
    right: 10px;
    background: rgba(255, 255, 255, 0.9);
    border: none;
    border-radius: 50%;
    width: 35px;
    height: 35px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.3s;

    img {
      border-radius: 50%;
      width: 40px;
      height: 40px;
    }
  }

  .product-info[b-vs8a2yp6lp] {
    padding: 20px 10px;
    /* text-align: center; */
    .product-name {
      font-size: 18px;
      font-weight: 500;
      color: #b80a25;
      margin-bottom: 15px;
      text-decoration: none;
      transition: color 0.3s;
    }
    .product-discription[b-vs8a2yp6lp] {
      line-height: 2;
      font-size: 14px;
      color: #666;
      margin-bottom: 14px;
    }

    .contact-btn[b-vs8a2yp6lp] {
      background: #d5c167;
      border: none;
      border-radius: 6px;
      padding: 10px 20px;
      cursor: pointer;
      transition: background-color 0.3s;
      a {
        color: white;
        font-size: 14px;
        font-weight: 500;
        text-decoration: none;
      }
      &:hover[b-vs8a2yp6lp] {
        background: #c8b051;
      }
    }
    .details-btn[b-vs8a2yp6lp] {
      background: #b0db9c;
      color: white;
      border: none;
      border-radius: 6px;
      padding: 10px 20px;
      font-size: 14px;
      font-weight: 500;
      cursor: pointer;
      transition: background-color 0.3s;
      a {
        color: white;
        text-decoration: none;
      }
      &:hover[b-vs8a2yp6lp] {
        background: #9fd088;
      }
    }
  }
}
.modal-body[b-vs8a2yp6lp] {
  display: flex;
  justify-content: space-around;
  align-items: center;
  gap: 10px;
  padding: 20px;

  .modal-image{
    width: 40%;
  }
  .modal-image img[b-vs8a2yp6lp] {
    width: 200px;
    border-radius: 8px;
  }

  .modal-content[b-vs8a2yp6lp] {
    flex: 1;
    padding: 10px;
    width: 60%;
    .content-tile {
      font-size: 22px;
    }

    .content-rating i[b-vs8a2yp6lp] {
      margin-right: 4px;
    }

    .content-subtitle[b-vs8a2yp6lp] {
      font-size: 16px;
    }

    .content-fulldescription[b-vs8a2yp6lp] {
      font-size: 14px;
      color: #555;
    }

    span[b-vs8a2yp6lp] {
      display: inline-block;
      font-size: 14px;
    }
  }
}
@media (max-width: 1280px) {
  .modal-body[b-vs8a2yp6lp] {
    gap: 16px;

    .modal-image img {
      width: 180px;
    }

    .modal-content[b-vs8a2yp6lp] {
      .content-tile {
        font-size: 20px;
      }

      .content-subtitle[b-vs8a2yp6lp] {
        font-size: 15px;
      }

      .content-fulldescription[b-vs8a2yp6lp] {
        font-size: 13px;
      }
    }
  }
}

@media (max-width: 1024px) {
  .modal-body[b-vs8a2yp6lp] {
    flex-direction: column;
    align-items: flex-start;

    .modal-image{
      width: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .modal-image img[b-vs8a2yp6lp] {
      width: 220px;
    }

    .modal-content[b-vs8a2yp6lp] {
      width: 100%;
      padding: 10px 0;
      .content-tile {
        font-size: 20px;
      }
    }
  }
}

@media (max-width: 768px) {
  .modal-body[b-vs8a2yp6lp] {
    flex-direction: column;
    align-items: center;
    padding: 15px;
    .modal-image{
      width: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .modal-image img[b-vs8a2yp6lp] {
      width: 180px;
    }

    .modal-content[b-vs8a2yp6lp] {
      padding: 0;
      width: 100%;

      .content-tile {
        font-size: 18px;
      }

      .content-subtitle[b-vs8a2yp6lp] {
        font-size: 14px;
      }

      .content-fulldescription[b-vs8a2yp6lp] {
        font-size: 13px;
      }

      span[b-vs8a2yp6lp] {
        font-size: 13px;
        width: auto;
      }
    }
  }
}

@media (max-width: 576px) {
  .modal-dialog[b-vs8a2yp6lp] {
    max-width: 95%;
    margin: 1.5rem auto;
  }

  .modal-body[b-vs8a2yp6lp] {
    .modal-image img {
      width: 160px;
    }

    .modal-content[b-vs8a2yp6lp] {
      .content-tile {
        font-size: 16px;
      }

      .content-fulldescription[b-vs8a2yp6lp] {
        font-size: 12px;
      }

      span[b-vs8a2yp6lp] {
        font-size: 12px;
      }
    }
  }
}

@media (max-width: 360px) {
  .modal-body[b-vs8a2yp6lp] {
    .modal-image img {
      width: 140px;
    }

    .modal-content[b-vs8a2yp6lp] {
      .content-tile {
        font-size: 15px;
      }

      .content-subtitle[b-vs8a2yp6lp],
      .content-fulldescription[b-vs8a2yp6lp],
      span[b-vs8a2yp6lp] {
        font-size: 11px;
      }
    }
  }
}

@media (min-width: 1441px) {
  .modal-body[b-vs8a2yp6lp] {
    gap: 24px;

    .modal-image img {
      width: 240px;
    }

    .modal-content[b-vs8a2yp6lp] {
      .content-tile {
        font-size: 24px;
      }

      .content-subtitle[b-vs8a2yp6lp] {
        font-size: 18px;
      }

      .content-fulldescription[b-vs8a2yp6lp] {
        font-size: 15px;
      }

      span[b-vs8a2yp6lp] {
        font-size: 15px;
      }
    }
  }
}
/* _content/hafamex-ui/Components/ProductHeader/ProductHeader.razor.rz.scp.css */
.header[b-jt78hu5awh] {
  position: fixed;
  top: 0;
  z-index: 1000;
  width: 100%;
  background-color: transparent;
  transition: box-shadow 0.5s ease-in-out;

  .header-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: transparent;
    opacity: 0;
    transition: opacity 1s ease-in-out;
    z-index: -1;
  }

  .hd-container[b-jt78hu5awh] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 3.125rem 0 9.375rem;
    position: relative;
    z-index: 1;

    .hd-left {
      .logo {
        display: flex;
        align-items: center;
        gap: 0.5rem;

        img {
          width: 5rem;
          height: 5rem;
        }

        h2[b-jt78hu5awh] {
          font-size: 1.875rem;
          font-weight: 600;
          font-family: "Poppins", sans-serif;
          color: #b80a25;
          margin: 0;
          padding: 0;
        }
      }
      .menu-toggle[b-jt78hu5awh] {
        display: none;
        font-size: 1.75rem;
        background: none;
        border: none;
        color: #b80a25;
        cursor: pointer;
        margin-left: auto;
        padding: 0.5rem;
      }
    }

    .hd-right[b-jt78hu5awh] {
      display: flex;
      align-items: center;

      .menu {
        .nav {
          display: flex;
          align-items: center;
          list-style: none;
          padding: 0;
          margin: 0;
          &.open {
            display: flex;
          }
          li[b-jt78hu5awh] {
            margin-right: 1.875rem;
            position: relative;

            a {
              color: #b80a25;
              font-family: "Poppins", sans-serif;
              font-size: 1rem;
              font-weight: 500;
              text-decoration: none;
            }

            &.nav-item[b-jt78hu5awh] {
              transition: all 0.2s ease-in-out;

              &:hover a {
                font-weight: 600;
              }

              &[b-jt78hu5awh]::after {
                content: "";
                position: absolute;
                left: 0;
                bottom: -0.125rem;
                width: 100%;
                height: 0.125rem;
                background-color: #b80a25;
                transform: scaleX(0);
                transition: transform 0.3s ease-in-out;
              }

              &:hover[b-jt78hu5awh]::after {
                transform: scaleX(1);
              }

              &.active[b-jt78hu5awh] {
                a {
                  font-weight: 600;
                }

                &[b-jt78hu5awh]::after {
                  transform: scaleX(1);
                }
              }
            }

            &.has-dropdown[b-jt78hu5awh] {
              position: relative;

              .fa-chevron-down {
                font-size: 0.875rem;
                color: #b80a25;
              }

              .sub-menu[b-jt78hu5awh] {
                display: none;
                position: absolute;
                background-color: #f9f9f9;
                min-width: 16.25rem;
                box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.2);
                z-index: 1;
                padding: 0;

                .sub-menu-item {
                  list-style: none;

                  a {
                    display: block;
                    padding: 0.9375rem 1.25rem;
                    font-size: 1rem;
                    color: #ffa09b;
                    font-weight: 500;

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

              &:hover .sub-menu[b-jt78hu5awh] {
                display: block;
              }
            }
          }
        }
      }
    }
  }

  &.scrolled[b-jt78hu5awh] {
    box-shadow: 0.1875rem 0.1875rem 0.625rem rgba(177, 177, 177, 0.75);
    background-color: white;

    .header-bg {
      opacity: 1;
    }
  }

  /* // Responsive */
  @media (max-width: 360px) {
    .hd-container[b-jt78hu5awh] {
      padding: 0.5rem 1rem;
      flex-direction: column;
      text-align: center;
      .hd-left,
      .hd-right {
        width: 100%;
        flex-direction: column;
        text-align: center;
        justify-content: center;
      }
    }
    .logo h2[b-jt78hu5awh] {
      font-size: 1.125rem;
    }
  }

  @media (max-width: 576px) {
    .hd-container[b-jt78hu5awh] {
      padding: 0.5rem 1rem;
      flex-direction: column;
      align-items: center;
      text-align: center;
    }
  }

  @media (max-width: 768px) {
    .hd-container[b-jt78hu5awh] {
      padding: 0.625rem 1rem;
      flex-direction: column;
      align-items: center;
      text-align: center;

      .hd-right {
        .menu {
          display: flex;
          justify-content: center;
          align-items: center;
          ul {
            width: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
            text-align: center;
            line-height: 2;
            li {
              font-size: 10px;
              margin: 0.5rem 0;
              text-align: center;
            }
          }
        }
      }
    }
  }

  @media (max-width: 1024px) {
    position: relative;
    .hd-container[b-jt78hu5awh] {
      padding: 0.75rem 1.5rem;
      flex-direction: column;
      align-items: center;
      text-align: center;
      .hd-left,
      .hd-right {
        width: 100%;
        justify-content: center;
        flex-direction: column;
      }
    }
  }

  @media (max-width: 1280px) {
    .hd-container[b-jt78hu5awh] {
      padding: 0.75rem 2rem;
    }
  }

  @media (min-width: 1441px) {
    .hd-container[b-jt78hu5awh] {
      max-width: 1440px;
      margin: 0 auto;
    }
  }
}

/* Custom button */
.custom-button[b-jt78hu5awh] {
  padding: 0.375rem 0.625rem;
  font-size: 0.875rem;
  font-family: "Poppins", sans-serif;
  color: #b80a25;
  background-color: transparent;
  border: 0.125rem solid #b80a25;
  border-radius: 9999px;
  position: relative;
  overflow: hidden;
  cursor: pointer;
  transition: all 0.5s;
  box-shadow: 0 0.625rem 1.25rem rgba(0, 0, 0, 0.15);

  &::before {
    content: "";
    position: absolute;
    height: 100%;
    left: 0;
    width: 0;
    top: 0;
    border-radius: 9999px;
    background-color: #b80a25;
    z-index: -1;
    transition: all 0.5s;
  }

  &:hover[b-jt78hu5awh]::before {
    width: 100%;
  }

  &:hover[b-jt78hu5awh] {
    color: white;
    background-color: #b80a25;
  }

  .custom-icon[b-jt78hu5awh] {
    width: 1.375rem;
    height: 1.375rem;
    padding: 0.25rem;
    border: 0.0625rem solid #b80a25;
    border-radius: 50%;
    transform: rotate(45deg);
    transition: all 0.5s ease-in-out;

    .icon-path {
      fill: #b80a25;
      transition: fill 0.5s ease-in-out;
    }
  }

  &:hover .custom-icon[b-jt78hu5awh] {
    background-color: #f9fafb;
    transform: rotate(90deg);
    border: none;
  }
}
/* _content/hafamex-ui/Components/ProductList/ProductList.razor.rz.scp.css */
.product-list[b-wpkv041gtr] {
  font-family: "Poppins", sans-serif;
  margin-top: 50px;
}

.product-list .container h1[b-wpkv041gtr] {
  text-align: center;
  font-weight: 600;
  font-size: 56px;
  text-shadow: 2px 2px 5px rgba(179, 179, 179, 0.6);
  color: #b80a25;
  position: relative;
  outline: none;
}

.product-list .container h1[b-wpkv041gtr]::after {
  content: "";
  width: 100px;
  height: 4px;
  background-color: #b80a25;
  position: absolute;
  bottom: -10px;
  left: 50%;
  transform: translateX(-50%);
}

.product-list .container p[b-wpkv041gtr] {
  padding: 20px 0px;
  font-size: 18px;
  text-align: center;
  line-height: 2;
}
  @media screen and (max-width: 1024px) {
    .product-list .container p[b-wpkv041gtr] {
    padding: 0 50px !important;
    }
  }

.list-product-item[b-wpkv041gtr] {
  margin-top: 20px;
}

.grid-product[b-wpkv041gtr] {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 30px;
  padding: 0 50px;
}

.product-item[b-wpkv041gtr] {
  border-radius: 10px;
  position: relative;
  overflow: hidden;
  height: 335px;
  box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.1);
}

.product-item img[b-wpkv041gtr] {
  width: 100%;
  height: 100%;
  border-radius: 10px;
  object-fit: cover;
  transition: all 0.5s ease-in-out;
}

.overlay[b-wpkv041gtr] {
  position: absolute;
  top: 0;
  left: 0;
  border-radius: 5px;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  opacity: 0;
}

.float-content[b-wpkv041gtr] {
  border-radius: 10px;
  padding: 120px 0;
  width: 100%;
  height: 100%;
  background-color: #b80a25;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
}

.product-rating[b-wpkv041gtr] {
  color: #ffe893;
  font-size: 14px;
}

.logo-title[b-wpkv041gtr] {
  font-size: 24px;
  font-weight: 600;
  color: white;
  text-align: center;
  padding: 0 10px;
}

.logo-desc[b-wpkv041gtr] {
  font-size: 12px;
  color: white;
  text-align: center;
  opacity: 0.3;
  padding: 0 20px;
}

.product-item:hover .overlay[b-wpkv041gtr] {
  transition: opacity 0.8s;
  opacity: 1;
}

.product-item:hover .logo-title[b-wpkv041gtr],
.product-item:hover .logo-desc[b-wpkv041gtr],
.product-item:hover .product-rating[b-wpkv041gtr] {
  animation: moveUp-b-wpkv041gtr 0.8s;
  animation-fill-mode: both;
}

@keyframes moveUp-b-wpkv041gtr {
  0% {
    transform: translateY(200px);
    opacity: 0;
  }
  100% {
    transform: translateY(0px);
    opacity: 1;
  }
}

.btn-get-more[b-wpkv041gtr] {
  z-index: 1000;
  padding: 16px 0px;
  background-color: #fff;
  border: 1px solid #b80a25;
  border-radius: 45px;
  box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease 0s;
  cursor: pointer;
  outline: none;
  a{
  padding: 0px 32px;
  font-size: 14px;
  text-transform: uppercase;
  font-weight: 500;
  letter-spacing: 2.5px;
  color: #b80a25;
  text-decoration: none;
  }
}

.btn-get-more:hover[b-wpkv041gtr] {
  background-color: #b80a25;
  box-shadow: 0px 15px 20px #e58a8a;
  transform: translateY(-7px);
  a{
  color: #fff;
  }
}

.btn-get-more:active[b-wpkv041gtr] {
  transform: translateY(-1px);
}

/* Responsive grid */
@media (max-width: 1400px) {
  .grid-product[b-wpkv041gtr] {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 1024px) {
  .grid-product[b-wpkv041gtr] {
    grid-template-columns: repeat(2, 1fr);
  }

  .product-list .container p[b-wpkv041gtr] {
    padding: 0 0px;
  }
}

@media (max-width: 768px) {
  .grid-product[b-wpkv041gtr] {
    grid-template-columns: 1fr;
  }

  .product-list .container h1[b-wpkv041gtr] {
    font-size: 36px;
  }

  .product-list .container p[b-wpkv041gtr] {
    font-size: 16px;
    padding: 0 0px;
  }
  .product-list .list-product-item[b-wpkv041gtr]{
    .grid-product{
      .product-item{
        img{
          object-fit: contain;
        }
      }
    }
  }
}

@media (max-width: 576px) {
  .product-list .container h1[b-wpkv041gtr] {
    font-size: 32px;
  }

  .product-list .container p[b-wpkv041gtr] {
    font-size: 14px;
    padding: 0 10px;
  }
}
/* _content/hafamex-ui/Components/ProductOffer/ProductOffer.razor.rz.scp.css */
.about-company[b-pn45tu1gv7] {
  height: 100vh;
  margin-top: 100px;
  padding-left: 20px;
  padding-right: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  .section-title {
    box-sizing: border-box;
    border: none;
    outline: none;
    font-size: 58px;
    font-family: "Poppins", sans-serif;
    text-align: center;
    font-weight: 600;
    color: #b80a25;
    text-shadow: 2px 2px 4px rgba(255, 255, 255, 0.5);
  }

  .section-subtitle[b-pn45tu1gv7] {
    font-size: 18px;
    color: #6b7280;
    margin-bottom: 60px;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
    font-family: "Poppins", sans-serif;
    text-align: center;
  }

  .product-categories[b-pn45tu1gv7] {
    display: flex;
    gap: 50px;
    flex-wrap: wrap;
    justify-content: center;

    a{
      text-decoration: none;
    }
    .category-card[b-pn45tu1gv7] {
      background: #ffffff;
      border-radius: 20px;
      box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.1);
      padding: 10px 10px;
      width: 300px;
      height: 400px;
      text-align: center;
      transition: transform 1s ease-in-out; 
      &:hover {
        transform: translateY(-10px);
      }

      img[b-pn45tu1gv7] {
        border-radius: 16px;
        width: 280px;
        height: 200px;
        object-fit: contain;
        /* margin-bottom: 20px; */
      }

      h3[b-pn45tu1gv7] {
        font-size: 22px;
        margin-bottom: 10px;
        color: #b80a25;
        font-family: "Poppins", sans-serif;
      }

      p[b-pn45tu1gv7] {
        font-size: 16px;
        color: #6b7280;
        font-family: "Poppins", sans-serif;
      }
    }
  }
}
@media (max-width: 1280px) {
  .about-company[b-pn45tu1gv7] {
    .section-title {
      font-size: 48px;
    }

    .section-subtitle[b-pn45tu1gv7] {
      font-size: 16px;
    }

    .product-categories[b-pn45tu1gv7] {
      gap: 40px;

      .category-card {
        width: 280px;
        height: 380px;

        img {
          width: 260px;
          height: 180px;
        }
      }
    }
  }
}

@media (max-width: 1024px) {
  .about-company[b-pn45tu1gv7] {
    margin-top: 80px;
    height: auto;
    padding: 40px 20px;

    .section-title {
      font-size: 42px;
    }

    .section-subtitle[b-pn45tu1gv7] {
      font-size: 15px;
      max-width: 90%;
    }

    .product-categories[b-pn45tu1gv7] {
      gap: 30px;

      .category-card {
        width: 260px;
        height: 360px;

        img {
          width: 240px;
          height: 160px;
        }
      }
    }
  }
}

@media (max-width: 768px) {
  .about-company[b-pn45tu1gv7] {
    .section-title {
      font-size: 36px;
    }

    .section-subtitle[b-pn45tu1gv7] {
      font-size: 14px;
    }

    .product-categories[b-pn45tu1gv7] {
      gap: 25px;

      .category-card {
        width: 240px;
        height: 340px;

        img {
          width: 220px;
          height: 150px;
        }

        h3[b-pn45tu1gv7] {
          font-size: 20px;
        }

        p[b-pn45tu1gv7] {
          font-size: 14px;
        }
      }
    }
  }
}

@media (max-width: 576px) {
  .about-company[b-pn45tu1gv7] {
    .section-title {
      font-size: 30px;
    }

    .section-subtitle[b-pn45tu1gv7] {
      font-size: 13px;
    }

    .product-categories[b-pn45tu1gv7] {
      gap: 20px;

      .category-card {
        width: 90%;
        height: auto;
        padding: 20px 10px;

        img {
          width: 100%;
          height: auto;
        }

        h3[b-pn45tu1gv7] {
          font-size: 18px;
        }

        p[b-pn45tu1gv7] {
          font-size: 13px;
        }
      }
    }
  }
}

@media (max-width: 360px) {
  .about-company[b-pn45tu1gv7] {
    .section-title {
      font-size: 26px;
    }

    .section-subtitle[b-pn45tu1gv7] {
      font-size: 12px;
    }

    .product-categories[b-pn45tu1gv7] {
      gap: 16px;

      .category-card {
        width: 100%;
        padding: 15px;

        img {
          width: 100%;
          height: auto;
        }

        h3[b-pn45tu1gv7] {
          font-size: 16px;
        }

        p[b-pn45tu1gv7] {
          font-size: 12px;
        }
      }
    }
  }
}

@media (min-width: 1441px) {
  .about-company[b-pn45tu1gv7] {
    .section-title {
      font-size: 64px;
    }

    .section-subtitle[b-pn45tu1gv7] {
      font-size: 20px;
      max-width: 800px;
    }

    .product-categories[b-pn45tu1gv7] {
      gap: 60px;

      .category-card {
        width: 320px;
        height: 440px;

        img {
          width: 300px;
          height: 210px;
        }

        h3[b-pn45tu1gv7] {
          font-size: 24px;
        }

        p[b-pn45tu1gv7] {
          font-size: 17px;
        }
      }
    }
  }
}
/* _content/hafamex-ui/Components/ProductTopSeller/ProductTopSeller.razor.rz.scp.css */
.top-product[b-43njqdt6wq] {
  background-image: linear-gradient(
    45deg,
    #ffd6e8 0%,
    #fff5f9 50%,
    #fff3b0 100%
  );
  /* margin-top: 50px; */
  padding-top: 100px;
  display: flex;
  height: 100%;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: relative;
  text-align: center;
  .main-title {
    box-sizing: border-box;
    border: none;
    outline: none;
    font-size: 58px;
    font-family: "Poppins", sans-serif;
    font-weight: 600;
    color: #b80a25;
    text-shadow: 2px 2px 4px rgba(255, 255, 255, 0.5);
  }
  .subtitle[b-43njqdt6wq] {
    font-size: 16px;
    padding: 0px 300px;
    font-weight: 400;
    /* color: #B80A25 ; */
    color: #6b7280;
    text-shadow: 2px 2px 4px rgba(251, 251, 251, 0.5);
  }
  .wrapper[b-43njqdt6wq] {
    width: 100%;
    height: 100vh;
    position: relative;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    .inner {
      --w: 160px;
      --h: 220px;
      --translateZ: calc((var(--w) + var(--h)) + 0px);
      --rotateX: -15deg;
      --perspective: 1000px;
      position: absolute;
      width: var(--w);
      height: var(--h);
      top: 15%;
      left: calc(50% - (var(--w) / 2) - 2.5px);
      z-index: 2;
      transform-style: preserve-3d;
      transform: perspective(var(--perspective));
      animation: rotating-b-43njqdt6wq 20s linear infinite; /* */
      .card {
        position: absolute;
        border: 2px solid rgba(255, 255, 255, 0.3);
        border-radius: 12px;
        overflow: hidden;
        inset: 0; 
        transform: rotateY(calc((360deg / var(--quantity)) * var(--index)))
          translateZ(var(--translateZ));
        background-size: cover;
        background-position: center;
        height: 300px;
        width: 250px;
        .overlay {
          width: 100%;
          height: 100%;
          .float-content {
            text-align: center;
            color: white;
            padding: 20px;
            .logo-title {
              /* color: #598a25; */
              color: #b80a25;
              font-size: 18px;
              font-weight: bold;
              margin-bottom: 10px;
            }
            .logo-desc[b-43njqdt6wq] {
              font-size: 16px;
              line-height: 1.4;
            }
          }
        }
        &:hover[b-43njqdt6wq] {
          opacity: 1;
        }
      }
    }
  }
}

@media (max-width: 1280px) {
  .top-product[b-43njqdt6wq] {
    .main-title {
      font-size: 46px;
    }
    .subtitle[b-43njqdt6wq] {
      font-size: 15px;
      padding: 0 200px;
    }
    .wrapper .inner[b-43njqdt6wq] {
      --w: 140px;
      --h: 200px;
    }
  }
}

@media (max-width: 1024px) {
  .top-product[b-43njqdt6wq] {
    height: auto;
    padding: 80px 0;
    .main-title {
      font-size: 40px;
    }

    .subtitle[b-43njqdt6wq] {
      padding: 0 100px;
      font-size: 14px;
    }

    .wrapper[b-43njqdt6wq] {
      height: 500px;

      .inner {
        --w: 130px;
        --h: 180px;
        top: 20%;
        .card{
          height: 250px;
          width: 180px;
        }
      }
    }
  }
}

@media (max-width: 768px) {
  .top-product[b-43njqdt6wq] {
    height: auto;
    padding: 80px 0;
    .main-title {
      font-size: 34px;
    }

    .subtitle[b-43njqdt6wq] {
      font-size: 13px;
      padding: 0 50px;
    }

    .wrapper[b-43njqdt6wq] {
      height: 420px;

      .inner {
        --w: 120px;
        --h: 160px;
        top: 22%;
          .card{
          height: 200px;
          width: 140px;
          .overlay{
            .float-content{
              padding: 20px 5px 15px 5px;
              .logo-title{
                font-size: 14px;
                margin-bottom: 20px;
              }
            }
          }
        }
      }
    }
  }
}

@media (max-width: 576px) {
  
  .top-product[b-43njqdt6wq] {
      display: none; 

    .main-title {
      font-size: 28px;
    }

    .subtitle[b-43njqdt6wq] {
      font-size: 12px;
      padding: 0 20px;
    }

    .wrapper[b-43njqdt6wq] {
      display: none; 
    }
  }
}

@media (max-width: 360px) {
  .top-product[b-43njqdt6wq] {
      display: none; 

    .main-title {
      font-size: 24px;
    }

    .subtitle[b-43njqdt6wq] {
      font-size: 11px;
      padding: 0 10px;
    }
  }
}




@keyframes rotating-b-43njqdt6wq {
  from {
    transform: perspective(var(--perspective)) rotateX(var(--rotateX))
      rotateY(0);
  }
  to {
    transform: perspective(var(--perspective)) rotateX(var(--rotateX))
      rotateY(1turn);
  }
}
/* _content/hafamex-ui/Components/Slogan/Slogan.razor.rz.scp.css */
/* Base */
.slogan-home[b-o6g66pileh] {
  margin-top: 50px;
  .overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    z-index: 1;
  }
}

.slogan-bg[b-o6g66pileh] {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 60px 0;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
  z-index: 10;
  color: #fff;
}

.slogan-bg[b-o6g66pileh]::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0.25;
  pointer-events: none;
}

.container[b-o6g66pileh] {
  position: relative;
  z-index: 10;
  max-width: 1200px;
  margin: 0 auto;
  padding: 60px 40px;
  background-color: #fff;
  opacity: 0.85;
  border-radius: 20px;
  box-sizing: border-box;
}

.wrapper[b-o6g66pileh] {
  max-width: 880px;
  margin: 0 auto;
  text-align: center;
  font-size: 24px;
  line-height: 36px;
  color: #b80a25;
}

.slogan-content strong[b-o6g66pileh] {
  display: block;
  margin-top: 20px;
  font-family: "DM Serif Text", serif;
  font-size: 58px;
  font-weight: 400;
}

/* Impressive Number */
.impressive-number[b-o6g66pileh] {
  position: relative;
  z-index: 10;
  margin-top: 50px;
  width: 100%;
  padding: 50px 15px;
  box-sizing: border-box;
  color: #fff;
  text-align: center;
}

.title-imp-number[b-o6g66pileh] {
  font-family: "Poppins", sans-serif;
  font-weight: 600;
  font-size: 48px;
  margin-bottom: 20px;
  color: #fff;
}

.impressive-number p[b-o6g66pileh] {
  font-family: "Poppins", sans-serif;
  font-size: 18px;
  line-height: 1.8;
  max-width: 900px;
  margin: 0 auto 30px auto;
}

.number-grid[b-o6g66pileh] {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 20px;
  max-width: 900px;
  margin: 0 auto;
}

.number-card[b-o6g66pileh] {
  background-color: #fff;
  border-radius: 20px;
  padding: 20px;
  text-align: center;
  transition: all 0.3s ease-in-out;

  .count {
    font-size: 46px;
    font-weight: 900;
    color: #b80a25;
    margin: 0;
  }

  .count-title[b-o6g66pileh] {
    font-size: 20px;
    font-weight: 500;
    color: #b80a25;
    margin-top: 10px;
  }

  &:hover[b-o6g66pileh] {
    background-color: #ffa09b;
    box-shadow: 0px 10px 20px #ffc3c0;

    .count,
    .count-title {
      color: #fff;
    }
  }
}
/* ≤ 1280px */
@media (max-width: 1280px) {
  .slogan-content strong[b-o6g66pileh] {
    font-size: 52px;
  }

  .container[b-o6g66pileh] {
    padding: 50px 30px;
  }

  .wrapper[b-o6g66pileh] {
    font-size: 22px;
    line-height: 34px;
  }
}

/* ≤ 1024px */
@media (max-width: 1024px) {
  .container[b-o6g66pileh]{
  max-width: 880px;
  margin: 0 auto;
  padding: 60px 40px;
  background-color: #fff;
  opacity: 0.85;
  border-radius: 40px;
  padding: 30px 40px 50px 40px;
  box-sizing: border-box;
  }
  .slogan-content strong[b-o6g66pileh] {
    font-size: 46px;
  }

  .title-imp-number[b-o6g66pileh] {
    font-size: 40px;
  }

  .wrapper[b-o6g66pileh] {
    font-size: 20px;
    line-height: 32px;
  }

  .number-card .count[b-o6g66pileh] {
    font-size: 38px;
  }

  .number-card .count-title[b-o6g66pileh] {
    font-size: 18px;
  }
}

/* ≤ 768px */
@media (max-width: 768px) {
  .container[b-o6g66pileh]{
  max-width: 520px;
  margin: 0 auto;
  padding: 60px 40px;
  background-color: #fff;
  opacity: 0.85;
  border-radius: 40px;
  padding: 10px 40px 60px 40px;
  box-sizing: border-box;
  }
  .slogan-content strong[b-o6g66pileh] {
    margin-top: 0px;
    font-size: 30px;
  }

  .title-imp-number[b-o6g66pileh] {
    font-size: 34px;
  }

  .impressive-number p[b-o6g66pileh] {
    font-size: 16px;
  }

  .container[b-o6g66pileh] {
    padding: 40px 20px;
  }
}

/* ≤ 576px */
@media (max-width: 576px) {
  .container[b-o6g66pileh]{
    max-width: 320px;
    padding: 60px 40px;
    opacity: 0.85;
    border-radius: 20px;
    padding: 30px 20px 30px 20px;
    }
  .slogan-content strong[b-o6g66pileh] {
    font-size: 24px;
  }

  .wrapper[b-o6g66pileh] {
    font-size: 18px;
    line-height: 28px;
  }

  .number-card .count[b-o6g66pileh] {
    font-size: 32px;
  }

  .number-card .count-title[b-o6g66pileh] {
    font-size: 16px;
  }

  .impressive-number[b-o6g66pileh] {
    padding: 40px 10px;
  }
}

/* ≤ 360px */
@media (max-width: 360px) {
  .slogan-content strong[b-o6g66pileh] {
    font-size: 20px;
  }

  .wrapper[b-o6g66pileh] {
    font-size: 16px;
    line-height: 26px;
  }

  .number-card .count[b-o6g66pileh] {
    font-size: 28px;
  }

  .number-card .count-title[b-o6g66pileh] {
    font-size: 14px;
  }
}
/* _content/hafamex-ui/Pages/About/About.razor.rz.scp.css */
/* _content/hafamex-ui/Pages/Admin/Dashboard.razor.rz.scp.css */
.fa-solid[b-yesta0u5gf],
.fa-regular[b-yesta0u5gf] {
  font-weight: 800;
  font-size: 24px;
  color: #fff;
}
.StatsCard-item[b-yesta0u5gf] {
  transition: all 0.3s ease-in-out;
  border: 1px solid #e0e0e0;
  &:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 15px rgba(0, 0, 0, 0.3);
  }
  .StatsCard[b-yesta0u5gf] {
    padding: 10px 0px;
    .StatsCard-content {
      .StatsCard-title {
        font-size: 18px;
        font-weight: bold;
        color: #757575;
      }
      .StatsCard-number[b-yesta0u5gf] {
        font-size: 24px;
        font-weight: bold;
        color: #212121;
      }
    }
  }
}
[b-yesta0u5gf] .table-item {
  box-shadow: 0 10px 15px rgba(0, 0, 0, 0.3);
}
/* _content/hafamex-ui/Pages/Auth/Register/Register.razor.rz.scp.css */
.register-background[b-5my8u9n3zr] {
  max-width: 468px;
}
.label-field[b-5my8u9n3zr] {
  font-family: "Roboto", sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: #b80a25;

  display: block;
}
.title[b-5my8u9n3zr] {
  color: #b80a25;
}
.input-group .btn[b-5my8u9n3zr] {
  border-left: none; /* bỏ viền trái nếu muốn gọn */
}
.input-group .form-control[b-5my8u9n3zr] {
  border-right: none; /* bỏ viền phải nếu muốn gọn */
}

/* button css */
/* From Uiverse.io by alexmaracinaru */
.btn-submit[b-5my8u9n3zr] {
  cursor: pointer;
  font-weight: 700;
  transition: all 0.2s;
  padding: 10px 20px;
  border: 1px solid #000;
  border-radius: 100px;
  display: flex;
  align-items: center;
  font-size: 15px;
}
.btn-submit:hover[b-5my8u9n3zr] {
  background: #b80a25;
  color: #fff;
  border: 1px solid #fff;
}

.btn-submit > svg[b-5my8u9n3zr] {
  width: 34px;
  margin-left: 10px;
  transition: transform 0.3s ease-in-out;
}

.btn-submit:hover svg[b-5my8u9n3zr] {
  transform: translateX(5px);
  color: #fff;
}

.btn-submit:active[b-5my8u9n3zr] {
  transform: scale(0.95);
}
/* _content/hafamex-ui/Pages/Contact/Contact.razor.rz.scp.css */

.toast-backdrop[b-19od1g39o2] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.3);
    z-index: 1050;
    backdrop-filter: blur(3px);
}
.contact-section[b-19od1g39o2] {
  padding: 120px 0;
  background-color: #f9fafb;
  font-family: Arial, sans-serif;
}

.contact-container[b-19od1g39o2] {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 40px;
}

.contact-header[b-19od1g39o2] {
  text-align: center;
  margin-bottom: 64px;
}

.contact-title[b-19od1g39o2] {
  font-size: 40px;
  color: #b80a25;
  margin-bottom: 24px;
  font-weight: bold;
}

.contact-subtitle[b-19od1g39o2] {
  font-size: 18px;
  color: #555;
  max-width: 700px;
  margin: 0 auto;
}

.contact-grid[b-19od1g39o2] {
  display: flex;
  flex-wrap: wrap;
  gap: 40px;
  justify-content: space-between;
}

.contact-form[b-19od1g39o2],
.contact-info[b-19od1g39o2] {
  background-color: #fff;
  padding: 32px;
  border-radius: 16px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  flex: 1 1 48%;
}

.contact-form h3[b-19od1g39o2],
.contact-info h3[b-19od1g39o2] {
  font-size: 24px;
  margin-bottom: 24px;
  color: #b80a25;
  font-weight: bold;
}

form[b-19od1g39o2] {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.form-row[b-19od1g39o2] {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

.form-group[b-19od1g39o2] {
  flex: 1 1 100%;
  display: flex;
  flex-direction: column;
}

label[b-19od1g39o2] {
  font-size: 14px;
  margin-bottom: 8px;
  color: #333;
}

input[b-19od1g39o2],
textarea[b-19od1g39o2] {
  padding: 12px;
  border-radius: 8px;
  border: 1px solid #ccc;
  font-size: 14px;
  outline: none;
}

input:focus[b-19od1g39o2],
textarea:focus[b-19od1g39o2] {
  border-color: #b80a25;
  box-shadow: 0 0 0 2px rgba(184, 10, 37, 0.2);
}

button[b-19od1g39o2] {
  padding: 14px;
  background-color: #b80a25;
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.3s;
}

button:hover[b-19od1g39o2] {
  background-color: #a00920;
}

.info-item[b-19od1g39o2] {
  display: flex;
  gap: 16px;
  align-items: flex-start;
}

.info-icon[b-19od1g39o2] {
  width: 48px;
  height: 48px;
  background-color: #b80a25;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  border-radius: 8px;
  flex-shrink: 0;
}

.info-item h4[b-19od1g39o2] {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  color: #111;
}

.info-item p[b-19od1g39o2] {
  margin: 4px 0 0;
  color: #555;
  font-size: 14px;
}

.contact-map[b-19od1g39o2] {
  margin-top: 24px;
  overflow: hidden;
  border-radius: 12px;
  height: 300px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.contact-map iframe[b-19od1g39o2] {
  width: 100%;
  height: 100%;
  border: 0;
}

/* Responsive Breakpoints */
@media (max-width: 1024px) {
  .contact-grid[b-19od1g39o2] {
    flex-direction: column;
  }

  .contact-form[b-19od1g39o2],
  .contact-info[b-19od1g39o2] {
    flex: 1 1 100%;
  }
}

@media (max-width: 768px) {
  .contact-title[b-19od1g39o2] {
    font-size: 32px;
  }

  .form-row[b-19od1g39o2] {
    flex-direction: column;
  }

  .form-group[b-19od1g39o2] {
    flex: 1 1 100%;
  }

  .contact-map[b-19od1g39o2] {
    height: 250px;
  }
}

@media (max-width: 480px) {
  .contact-container[b-19od1g39o2] {
    padding: 0 20px;
  }

  .contact-title[b-19od1g39o2] {
    font-size: 28px;
  }

  .contact-subtitle[b-19od1g39o2] {
    font-size: 16px;
  }

  .contact-form[b-19od1g39o2],
  .contact-info[b-19od1g39o2] {
    padding: 20px;
  }

  button[b-19od1g39o2] {
    font-size: 14px;
    padding: 12px;
  }
}
/* _content/hafamex-ui/Pages/Home/Home.razor.rz.scp.css */
*[b-jeth6xtk7u]{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}


  
/* _content/hafamex-ui/Pages/News/News.razor.rz.scp.css */
/* Basic Reset */
*[b-nttuq7w64n] {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }
  
  body[b-nttuq7w64n] {
    font-family: 'Poppins', sans-serif;
    background: #F9F9F9;
    color: #333;
  }
  
  /* Hero Section */
  .news-hero[b-nttuq7w64n] {
    background: linear-gradient(45deg, #F9F9E0 0%, #FCE7F3 50%, #C7E9B0 100%);
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 0 20px;
  }
  
  .hero-content[b-nttuq7w64n] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 30px;
  }
  
  .hero-image[b-nttuq7w64n] {
    width: 200px;
    /* height: auto; */
    border-radius: 20px;
    object-fit: cover;
  }
  
  .hero-text[b-nttuq7w64n] {
    max-width: 1200px;
  }
  
  .hero-title[b-nttuq7w64n] {
    font-size: 36px;
    font-weight: bold;
    margin-bottom: 20px;
    outline: none;
    color: #b80a25;
  }
  
  .hero-subtitle[b-nttuq7w64n] {
    font-size: 20px;
    color: #555;
  }
  
  /* News List */
  .news-list[b-nttuq7w64n] {
    padding: 100px 20px;
    background: #ffffff;
  }
  
  .news-cards[b-nttuq7w64n] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
  }
  
  .news-card[b-nttuq7w64n] {
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease;
  }
  
  .news-card:hover[b-nttuq7w64n] {
    transform: translateY(-10px);
  }
  
  .news-card img[b-nttuq7w64n] {
    width: 100%;
    height: 200px;
    object-fit: cover;
  }
  
  .news-card h3[b-nttuq7w64n] {
    font-size: 22px;
    margin: 20px;
  }
  
  .news-card p[b-nttuq7w64n] {
    font-size: 16px;
    margin: 0 20px 20px;
    color: #666;
  }
  
  .news-card a[b-nttuq7w64n] {
    display: inline-block;
    margin: 0 20px 20px;
    color: #4CAF50;
    text-decoration: none;
    font-weight: bold;
  }

  /* // Responsive */
@media (max-width: 360px) {
}

@media (max-width: 576px) {
    .news-list[b-nttuq7w64n] {
    padding: 50px 20px;
    background: #ffffff;
  }
    .hero-title[b-nttuq7w64n] {
    font-size: 24px;
    font-weight: bold;
    margin-bottom: 20px;
    outline: none;
    color: #b80a25;
  }
}

@media (max-width: 768px) {
}

@media (max-width: 1024px) {
}

@media (max-width: 1280px) {
}

@media (min-width: 1441px) {
}
/* _content/hafamex-ui/Pages/ProductDetail/ProductDetail.razor.rz.scp.css */
.product-detail[b-nh8r9madz1] {
  margin-top: 80px;
  .container {
    max-width: 1200px;
    display: flex;
    justify-content: center;
    align-items: center;
    .product-flex{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    padding: 50px 0px;
    align-items: center;
    border-radius: 12px;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
    .product-image {
      width: 40%;
      display: flex;
      justify-content: center;
      img {
        border-radius: 12px;
        width: 100%;
        max-width: 420px;
        height: auto;
        object-fit: cover;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
      }
    }

    .product-info[b-nh8r9madz1] {
      width: 60%;
      display: flex;
      flex-direction: column;
      padding: 0px 20px;
      .product-title{
        display: flex;
        justify-content: flex-start;
        align-items: center;
        h1 {
        margin-bottom: 0px;
        margin-right: 10px;
        font-size: 28px;
        font-weight: 700;
        text-align: center;
        color: #b80a25;
        }
        span[b-nh8r9madz1]{
        font-weight: 700;
        font-size: 28px;
        color: #b80a25;
        }
      }
      .product-sub-title[b-nh8r9madz1]{
        color: #c5c5c5;
      }
      h5[b-nh8r9madz1] {
        font-size: 18px;
        font-weight: 600;
        color: #000;
      }
      p[b-nh8r9madz1] {
        font-size: 16px;
        color: #000;
        line-height: 1.6;
      }

      .product-rating[b-nh8r9madz1]{
        display: flex;
        justify-content: flex-start;
        margin: 8px 0px;
        i{
          margin-right: 5px;
          color: #FFDE63;
        }

      }
      .highlights[b-nh8r9madz1] {
        font-family: sans-serif;
        background-color: #fbfcf8;
        margin-bottom: 10px;
        .highlight-grid {
          display: grid;
          grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
          gap: 16px;

          .highlight-box {
            display: flex;
            align-items: center;
            background-color: white;
            padding: 16px;
            border-radius: 12px;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
            .icon {
              font-size: 22px;
              width: 30px;
              margin: 0px 30px;
              color: #02c850;
            }

            h3[b-nh8r9madz1] {
              margin: 0;
              font-size: 16px;
              font-weight: bold;
              color: #0f172a;
            }

            p[b-nh8r9madz1] {
              margin: 4px 0 0;
              color: #64748b;
              font-size: 14px;
            }
          }
        }
      }
      .contact-info[b-nh8r9madz1]{
        display: flex;
        justify-content: space-around;
        .info-row{
            display: flex;
            justify-content: flex-start;
            align-items: center;
            i{
              color: #02c850;
              font-size: 16px;
              margin-right: 10px;
            }
            span[b-nh8r9madz1]{
              font-size: 14px;
            }
        }
      }
      .btn-get-order[b-nh8r9madz1] {
        margin-top: 20px;
        display: flex; 
        align-items: center;
        justify-content: center;
        position: relative;
        width: 100%;
        border-radius: 36px;
        font-weight: 700;
        height: 54px;
        font-size: 16px;
        padding-inline: 20px;
        background-color: transparent;
        color: #fff;
        text-transform: uppercase;
        overflow: hidden;
        text-align: center;
        transition: all .25s ease-in-out;
        z-index: 1;
        border: none;
        a {
          color: #b80a25;
          white-space: nowrap;
          line-height: 1.2;
          padding-inline-end: 44px;
          z-index: 2;
        }
        &:hover[b-nh8r9madz1]{
          .text{
          color: #fff;
          }
        }
        &:is(:hover, :focus)[b-nh8r9madz1]::before {
          transform: translateX(0%);
        }
        &[b-nh8r9madz1]::after {
          content: '';
          position: absolute;
          height: calc(100% - 1px);
          width: calc(100% - 1px);
          border: 1px solid #b80a25;
          border-radius: 36px;
          z-index: 2;
        }
        &[b-nh8r9madz1]::before{
          content: "";
          position: absolute;
          height: 100%;
          width: 100%;
          background-color: #b80a25;
          z-index: 1;
          transform: translateX(90%);
          transition: all .3s ease-out;
        }
        .icon[b-nh8r9madz1] {
          display: inherit;
          position: absolute;
          top: 50%;
          transform: translateY(-50%);
          right: 0;
          width: 54px;
          height: 54px;
          justify-content: center;
          align-items: center;
          border-radius: 100%;
          background-color: #b80a25;
          z-index: 2;
        }
      }
    }
    }
  }
}

.related-products[b-nh8r9madz1] {
  margin-top: 40px;

  hr {
    margin: 30px 0;
    border-color: #ccc;
  }

  .container[b-nh8r9madz1] {
    h2 {
      color: #d9534f;
      font-size: 24px;
      font-weight: 600;
      margin-bottom: 25px;
      text-align: center;
    }

    .products-grid[b-nh8r9madz1] {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
      gap: 20px;

      .product-card {
        background-color: #fff;
        border-radius: 10px;
        overflow: hidden;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
        transition: transform 0.2s;

        &:hover {
          transform: translateY(-4px);
        }

        .product-image img[b-nh8r9madz1] {
          width: 100%;
          height: 180px;
          object-fit: cover;
          transition: transform 0.3s;

          &:hover {
            transform: scale(1.05);
          }
        }

        .product-info[b-nh8r9madz1] {
          padding: 15px;

          .product-name {
            font-size: 20px;
            font-weight: 600;
            color: #b80a25;
            margin-bottom: 10px;
            text-decoration: none;
            display: block;
          }

          .product-discription[b-nh8r9madz1] {
            font-size: 14px;
            color: #666;
            margin-bottom: 10px;
            line-height: 1.5;
          }

          .contact-btn[b-nh8r9madz1] {
            background: #c4ae50;
            color: white;
            border: none;
            border-radius: 6px;
            padding: 8px 16px;
            font-size: 14px;
            font-weight: 500;
            cursor: pointer;
            transition: background-color 0.3s;

            &:hover {
              background: #b59d40;
            }
          }
        }
      }
    }
  }
}
/* Mobile small */
@media (max-width: 360px) {
  .product-detail .product-info h1[b-nh8r9madz1] {
    font-size: 20px;
  }

  .related-products .container h2[b-nh8r9madz1] {
    font-size: 18px;
  }
}

/* Mobile */
@media (max-width: 576px) {
  .product-detail .container[b-nh8r9madz1] {
    padding: 20px;
  }
  .product-detail .product-info .product-title[b-nh8r9madz1] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    h1{
    font-size: 18px;
    }
    span[b-nh8r9madz1]{
      display: none;
    }
  }
  .product-detail .product-info p[b-nh8r9madz1] {
    font-size: 14px;
  }

  .product-detail .btn-get-order[b-nh8r9madz1] {
    width: 100%;
    text-align: center;
  }
}

/* Tablet portrait */
@media (max-width: 768px) {
  .product-detail .container[b-nh8r9madz1] {
    flex-direction: column;
    align-items: center;
  }

  .product-detail .product-image[b-nh8r9madz1],
  .product-detail .product-info[b-nh8r9madz1] {
    width: 100%;
    .contact-info{
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      justify-content: center;
      gap: 20px;
      padding: 5px 20px;
    }
  }

  .related-products .products-grid[b-nh8r9madz1] {
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  }
}

/* Tablet landscape */
@media (max-width: 1024px) {
  .product-detail .product-info h1[b-nh8r9madz1] {
    font-size: 26px;
  }
  .product-detail[b-nh8r9madz1]{
    .container{
      .product-flex{
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 50px 0px;
        .product-image{
          width: 100%;
          height: auto;
          img {
            border-radius: 12px;
            width: 100%;
            height: auto;
            object-fit: cover;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
          }
        }
        .product-info[b-nh8r9madz1]{
          width: 100%;
          margin-top: 20px;
        }
      }
    }
  }
}

/* Laptop */
@media (max-width: 1280px) {
  .product-detail .container[b-nh8r9madz1] {
    max-width: 1200px;
  }

  .product-detail .product-info p[b-nh8r9madz1] {
    padding-left: 0;
  }
}

/* Large screen */
@media (min-width: 1441px) {
  .product-detail .container[b-nh8r9madz1] {
    max-width: 1400px;
  }

  .related-products .products-grid .product-card[b-nh8r9madz1] {
    width: 100%;
  }
}
/* _content/hafamex-ui/Pages/Product/ProductBrowse.razor.rz.scp.css */
.main-content[b-zscx68qzda] {
  margin-top: 50px;
  padding: 30px 0;
  font-family: "Poppins", sans-serif;
  .container {
    margin: 0 auto;
    padding: 0 15px;
    .breadcrumb {
      margin-bottom: 30px;
      font-size: 16px;
      color: #666;
      a {
        color: #666;
        text-decoration: none;
        transition: 0.3s all ease-in-out;
        &:hover {
          color: #b80a25;
          text-decoration: underline;
        }
      }
      span[b-zscx68qzda] {
        margin: 0 8px;
      }
    }
    .content-wrapper[b-zscx68qzda] {
      display: flex;
      gap: 30px;
      /* Sidebar */
      .sidebar {
        flex: 0 0 300px;
        width: 100%;
        .sidebar-section {
          background: white;
          border-radius: 8px;
          box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
          margin-bottom: 20px;
          overflow: hidden;
          .sidebar-header {
            background: #b80a25;
            color: white;
            font-size: 36px;
            padding: 15px 20px;
            h5 {
              font-size: 20px;
              font-weight: 600;
            }
          }
          .sidebar-content[b-zscx68qzda] {
            padding: 20px;
            .category-group {
              margin-bottom: 15px;
              .category-toggle {
                width: 100%;
                background: none;
                border: none;
                padding: 8px 0;
                display: flex;
                justify-content: space-between;
                align-items: center;
                font-size: 16px;
                font-weight: 500;
                color: #333;
                cursor: pointer;
                transition: color 0.3s;
                &:hover {
                  color: #b80a25;
                }
                i[b-zscx68qzda] {
                  font-size: 12px;
                  transition: transform 0.3s;
                }
                &.active i[b-zscx68qzda] {
                  transform: rotate(180deg);
                }
              }
              .category-list[b-zscx68qzda] {
                display: none;
                margin-top: 8px;
                margin-left: 15px;

                li {
                  list-style: none;
                  margin-bottom: 8px;
                  a {
                    color: #666;
                    text-decoration: none;
                    font-size: 14px;
                    transition: color 0.3s;
                    &:hover {
                      color: #b80a25;
                    }
                    &.active[b-zscx68qzda] {
                      color: #b80a25;
                      font-weight: 600;
                    }
                  }
                }
              }
            }
          }
        }
      }
      .content-main[b-zscx68qzda] {
        width: 80%;
        .content-header {
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin-bottom: 30px;
          gap: 20px;
          h1 {
            font-size: 28px;
            font-weight: 500;
            color: #b80a25;
          }
          .search-bar[b-zscx68qzda] {
            display: flex;
            line-height: 28px;
            align-items: ce nter;
            position: relative;
            svg {
              fill: #b80a25;
              position: absolute;
              top: 10px;
              left: 10px;
              width: 25px;
              height: 25px;
            }
            input[b-zscx68qzda] {
              width: 100%;
              padding: 8px 20px 8px 50px;
              border: 1px solid #ddd;
              border-radius: 10px 0px 0px 10px;
              font-size: 14px;
              color: #333;
              outline: none;
              transition: border-color 0.3s;
              &:focus {
                border-color: #b80a25;
              }
              &[b-zscx68qzda]::placeholder {
                padding: 8px 20px 8px 0px;
              }
            }
            button[b-zscx68qzda] {
              width: 150px;
              background: #b80a25;
              color: white;
              border: none;
              border-radius: 0px 10px 10px 0px;
              cursor: pointer;
              position: relative;
              z-index: 1;
              overflow: hidden;
              &:hover {
                color: #b80a25;
              }
              &:hover[b-zscx68qzda]:after {
                transform: skewX(-45deg) scale(1, 1);
              }
              &[b-zscx68qzda]:after {
                content: "";
                background: white;
                position: absolute;
                z-index: -1;
                left: -20%;
                right: -20%;
                top: 0;
                bottom: 0;
                transform: skewX(-45deg) scale(0, 1);
                transition: all 0.5s;
              }
            }
          }
        }
        h1[b-zscx68qzda] {
          font-size: 28px;
          font-weight: 500;
          color: #b80a25;
        }
      }
    }
  }
}
@media (max-width: 1280px) {
  .main-content[b-zscx68qzda] {
    font-size: 16px;
    padding: 25px 0;

    .container {
      .content-wrapper {
        flex-direction: row;

        .sidebar {
          flex: 0 0 30%;
        }

        .content-main[b-zscx68qzda] {
          width: 70%;
        }
      }
    }
  }
}

@media (max-width: 1024px) {
  .main-content[b-zscx68qzda] {
    font-size: 15px;
    padding: 20px 0;

    .container {
      .content-wrapper {
        flex-direction: row;

        .sidebar {
          flex: 0 0 35%;
        }

        .content-main[b-zscx68qzda] {
          width: 65%;
        }
      }
    }
  }
}

@media (max-width: 768px) {
  .main-content[b-zscx68qzda] {
    font-size: 14px;
    padding: 15px 0;

    .container {
      .content-wrapper {
        flex-direction: column;

        .sidebar {
          width: 100%;
        }

        .content-main[b-zscx68qzda] {
          width: 100%;
          margin-top: 20px;
        }
      }

      .content-header[b-zscx68qzda] {
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;
        gap: 10px;
        .search-group{
          width: 100%;
          display: flex;
          justify-content: center;
          align-items: center;
        }
        .sort-dropdown[b-zscx68qzda]{
          width: 100%;
        }
      }
    }
  }
}

@media (max-width: 576px) {
  .main-content[b-zscx68qzda] {
    font-size: 13px;
    padding: 12px 0;

    .container {
      .breadcrumb {
        font-size: 14px;
      }

      .content-header[b-zscx68qzda] {
        flex-direction: column;
        align-items: stretch;
        .search-input {
          width: 100% !important;
        }
      }
    }
  }
}

@media (max-width: 360px) {
  .main-content[b-zscx68qzda] {
    font-size: 12px;
    padding: 10px 0;

    .container {
      .breadcrumb {
        font-size: 13px;
        flex-wrap: wrap;
      }

      .content-header[b-zscx68qzda] {
        flex-direction: column;
        gap: 10px;
        .search-input {
          width: 100% !important;
        }
      }
    }
  }
}

@media (min-width: 1441px) {
  .main-content[b-zscx68qzda] {
    font-size: 17px;
    padding: 30px 0;

    .container {
      .content-wrapper {
        flex-direction: row;

        .sidebar {
          flex: 0 0 25%;
        }

        .content-main[b-zscx68qzda] {
          width: 75%;
        }
      }
    }
  }
}
/* _content/hafamex-ui/Pages/Product/ProductPage.razor.rz.scp.css */
/* _content/hafamex-ui/Shared/Components/Footer/Footer.razor.rz.scp.css */
.footer[b-ck5h4gz99b] {
  background-color: #b80a25;

  .footer-container {
    padding: 3rem;

    .footer-flex {
      display: flex;
      justify-content: space-around;
      align-items: flex-start;
      flex-wrap: wrap;
      gap: 2rem;

      .left-col {
        width: 30%;
        padding: 10px;

        .logo {
          display: flex;
          flex-direction: column;
          align-items: center;

          img {
            width: 120px;
            height: 110px;
          }

          h2[b-ck5h4gz99b] {
            margin-top: 10px;
            font-size: 1.625rem;
            color: #fff;
          }
        }

        .nav-social-icon[b-ck5h4gz99b] {
          display: flex;
          gap: 10px;
          padding: 0;
          margin-top: 10px;
          justify-content: center;
          align-items: center;

          li {
            list-style: none;

            a {
              width: 3rem;
              height: 3rem;
              border: 1px solid #fff;
              border-radius: 50%;
              display: flex;
              justify-content: center;
              align-items: center;
              font-size: 1.5rem;
              color: #fff;
              text-decoration: none;

              &:hover {
                background-color: #fff;
                color: #b80a25;
              }
            }
          }
        }
      }

      .right-col[b-ck5h4gz99b] {
        width: 50%;

        h3 {
          font-family: "Poppins", sans-serif;
          font-size: 1.275rem;
          color: #fff;
          margin: 1rem 0 0.5rem;
        }

        .nav-links[b-ck5h4gz99b] {
          display: flex;
          flex-wrap: wrap;
          list-style: none;
          gap: 10px;
          padding: 0;

          li {
            padding: 0.625rem 0;
            color: #fff;

            a {
              color: #fff;
              text-decoration: none;
              font-size: 1rem;

              &:hover {
                text-decoration: underline;
              }
          }

          }

          .comma[b-ck5h4gz99b] {
            display: flex;
            justify-content: center;
            align-items: center;
            color: #fff;
          }
        }

        .info-row[b-ck5h4gz99b] {
          display: flex;
          gap: 10px;
          margin: 10px 0;
          align-items: center;
          color: #fff;
          padding: 0px 40px;

          i {
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 50%;
            background-color: #fff;
            color: #b80a25;
            width: 45px;
            height: 45px;
            font-size: 20px;
          }

          span[b-ck5h4gz99b] {
            font-size: 1rem;
          }
        }

        .get-info[b-ck5h4gz99b] {
          display: flex;
          height: 3rem;
          margin-top: 1rem;

          input {
            flex: 1;
            padding: 0.625rem 1rem;
            border: 1px solid #fff;
            border-top-left-radius: 0.9375rem;
            border-bottom-left-radius: 0.9375rem;
          }

          button[b-ck5h4gz99b] {
            width: 6rem;
            background-color: #000;
            border: 1px solid #fff;
            color: #fff;
            border-top-right-radius: 0.9375rem;
            border-bottom-right-radius: 0.9375rem;

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

  @media (max-width: 1024px) {
    .footer-container[b-ck5h4gz99b] {
      padding: 3rem 1rem;

      .footer-flex {
        flex-direction: column;
        align-items: center;
        text-align: center;
      }

      .left-col[b-ck5h4gz99b],
      .right-col[b-ck5h4gz99b] {
        width: 100%;
      }

      .right-col[b-ck5h4gz99b] {
        .nav-links {
          flex-direction: column;
          align-items: center;

          li{
            padding: 0px;
          }
          .comma[b-ck5h4gz99b] {
            display: none !important;
          }
        }

        .info-row[b-ck5h4gz99b] {
          justify-content: center;
          padding: 0;
        }
      }
    }
  }

  @media (max-width: 768px) {
    .footer-container[b-ck5h4gz99b] {
      .logo img {
        width: 90px;
      }

      .company-name[b-ck5h4gz99b] {
        font-size: 1.2rem;
      }

      .right-col[b-ck5h4gz99b] {
        h3 {
          font-size: 1rem;
        }

        .nav-links li a[b-ck5h4gz99b] {
          font-size: 0.95rem;
        }

        .info-row span[b-ck5h4gz99b] {
          font-size: 0.9rem;
        }
      }
    }
  }

  @media (max-width: 576px) {
    .footer-container[b-ck5h4gz99b] {
      padding: 2rem 1rem;

      .nav-social-icon li a {
        width: 2.25rem;
        height: 2.25rem;
        font-size: 1.1rem;
      }

      .info-row[b-ck5h4gz99b] {
        flex-direction: column;
        align-items: center;
        text-align: center;
      }
    }
  }

  @media (max-width: 360px) {
    .footer-container[b-ck5h4gz99b] {
      .company-name {
        font-size: 1rem;
      }

      .right-col .nav-links li a[b-ck5h4gz99b] {
        font-size: 0.875rem;
      }

      .info-row span[b-ck5h4gz99b] {
        font-size: 0.85rem;
      }
    }
  }
}
.footer-bottom[b-ck5h4gz99b] {
  background: #ffd4de;
  background: linear-gradient(
    100deg,
    rgba(255, 212, 222, 1) 0%,
    rgba(255, 213, 199, 1) 51%,
    rgba(255, 224, 161, 1) 100%
  );
  .footer-bottom-container {
    text-align: center;
    color: #999;
    padding: 1.25rem 0;
    font-size: 0.875rem;
    p{
      margin: 0px;
    }
  }
}
/* _content/hafamex-ui/Shared/Components/Header/Header.razor.rz.scp.css */
.header[b-jxgwrc6xd9] {
  position: fixed;
  z-index: 1000;
  background-color: white;
  box-shadow: 0.1875rem 0.1875rem 0.625rem rgba(177, 177, 177, 0.75);
  width: 100%;

  .hd-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 3.125rem 0 9.375rem;

    .hd-left {
      display: flex;
      align-items: center;

      .logo {
        display: flex;
        align-items: center;
        gap: 0.5rem;

        img {
          width: 5rem;
          height: 5rem;
        }

        h2[b-jxgwrc6xd9] {
          font-size: 1.875rem;
          font-weight: 600;
          font-family: "Poppins", sans-serif;
          color: #B80A25;
          margin: 0;
          padding: 0;
        }
      }

      .menu-toggle[b-jxgwrc6xd9] {
        display: none;
        font-size: 1.75rem;
        background: none;
        border: none;
        color: #B80A25;
        cursor: pointer;
        margin-left: auto;
        padding: 0.5rem;
      }
    }

    .hd-right[b-jxgwrc6xd9] {
      display: flex;
      align-items: center;

      .menu {
        .nav {
          display: flex;
          list-style: none;
          align-items: center;

          &.open {
            display: flex;
          }

          li[b-jxgwrc6xd9] {
            margin-right: 1.875rem;
            position: relative;

            a {
              color: #B80A25;
              font-family: "Poppins", sans-serif;
              font-weight: 500;
              font-size: 1rem;
              text-decoration: none;
            }

            &.nav-item[b-jxgwrc6xd9] {
              transition: all 0.2s ease-in-out;

              &::after {
                content: "";
                position: absolute;
                left: 0;
                bottom: -0.125rem;
                width: 100%;
                height: 0.125rem;
                background-color: #B80A25;
                transform: scaleX(0);
                transition: transform 0.3s ease-in-out;
              }

              &:hover a[b-jxgwrc6xd9] {
                font-weight: 600;
              }

              &:hover[b-jxgwrc6xd9]::after {
                transform: scaleX(1);
              }

              &.active[b-jxgwrc6xd9] {
                a {
                  font-weight: 600;
                }

                &[b-jxgwrc6xd9]::after {
                  transform: scaleX(1);
                }
              }
            }

            &.has-dropdown[b-jxgwrc6xd9] {
              position: relative;

              .fa-chevron-down {
                font-size: 0.875rem;
                color: #B80A25;
              }

              .sub-menu[b-jxgwrc6xd9] {
                display: none;
                position: absolute;
                background-color: #f9f9f9;
                min-width: 16.25rem;
                box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.2);
                z-index: 1;
                padding: 0;

                .sub-menu-item {
                  list-style: none;
                  text-align: start;

                  a {
                    font-weight: 500;
                    font-size: 1rem;
                    padding: 0.9375rem 1.25rem;
                    display: block;
                    color: #ffa09b;
                    text-align: start;
                    &:hover {
                      background-color: #f1f1f1;
                    }
                  }
                }
              }

              &:hover .sub-menu[b-jxgwrc6xd9] {
                display: block;
              }
            }
          }
        }
      }
    }
  }

  .custom-button[b-jxgwrc6xd9] {
    padding: 0.375rem 0.625rem;
    font-size: 0.875rem;
    font-weight: 500;
    font-family: "Poppins", sans-serif;
    color: #B80A25;
    background-color: white;
    border: 0.125rem solid #B80A25;
    border-radius: 9999px;
    cursor: pointer;
    transition: all 0.5s;
    box-shadow: 0 0.625rem 1.25rem rgba(0, 0, 0, 0.15);
    position: relative;
    overflow: hidden;

    &::before {
      content: "";
      position: absolute;
      height: 100%;
      left: 0;
      width: 0;
      top: 0;
      border-radius: 9999px;
      background-color: #B80A25;
      z-index: -1;
      transition: all 0.5s;
    }

    &:hover[b-jxgwrc6xd9]::before {
      width: 100%;
    }

    &:hover[b-jxgwrc6xd9] {
      color: white;
      background-color: #B80A25;
    }

    .custom-icon[b-jxgwrc6xd9] {
      width: 1.375rem;
      height: 1.375rem;
      padding: 0.25rem;
      border: 1px solid #B80A25;
      border-radius: 50%;
      transform: rotate(45deg);
      transition: all 0.5s ease-in-out;
      margin-left: 5px;

      .icon-path {
        fill: #B80A25;
        transition: fill 0.5s ease-in-out;
      }
    }

    &:hover .custom-icon[b-jxgwrc6xd9] {
      background-color: #f9fafb;
      transform: rotate(90deg);
      border: none;
    }
  }

  /* // Responsive */
  @media (max-width: 360px) {
    .hd-container[b-jxgwrc6xd9] {
      padding: 0.5rem 1rem;
      flex-direction: column;
      text-align: center;
      .hd-left,
      .hd-right {
        width: 100%;
        flex-direction: column;
        text-align: center;
        justify-content: center;
      }
    }
    .logo h2[b-jxgwrc6xd9] {
      font-size: 1.125rem;
    }
  }

  @media (max-width: 576px) {
    .hd-container[b-jxgwrc6xd9] {
      padding: 0.5rem 1rem;
      flex-direction: column;
      align-items: center;
      text-align: center;
    }
  }

  @media (max-width: 768px) {
    .hd-container[b-jxgwrc6xd9] {
      padding: 0.625rem 1rem;
      flex-direction: column;
      align-items: center;
      text-align: center;

      .hd-right {
        .menu {
          display: flex;
          justify-content: center;
          align-items: center;
          ul {
            width: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
            text-align: center;
            line-height: 2;
            li {
              font-size: 10px;
              margin: 0.5rem 0;
              text-align: center;
            }
          }
        }
      }
    }
  }

  @media (max-width: 1024px) {
    position: relative;
    .hd-container[b-jxgwrc6xd9] {
      padding: 0.75rem 1.5rem;
      flex-direction: column;
      align-items: center;
      text-align: center;
      .hd-left,
      .hd-right {
        width: 100%;
        justify-content: center;
        flex-direction: column;
      }
    }
  }

  @media (max-width: 1280px) {
    .hd-container[b-jxgwrc6xd9] {
      padding: 0.75rem 2rem;
    }
  }

  @media (min-width: 1441px) {
    .hd-container[b-jxgwrc6xd9] {
      max-width: 1440px;
      margin: 0 auto;
    }
  }
}

/* // Responsive */
@media (max-width: 360px) {
}

@media (max-width: 576px) {
}

@media (max-width: 768px) {
}

@media (max-width: 1024px) {
}

@media (max-width: 1280px) {
}

@media (min-width: 1441px) {
}
/* _content/hafamex-ui/Shared/Components/MenuFixed/MenuFixed.razor.rz.scp.css */
#hf-menu-fixed[b-ftydchnudf] {
  position: fixed;
  right: 10px;
  bottom: 10px;
  z-index: 1000;

  ul {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 0;

    .hf-phone {
      a {
        background-color: #b80a25;
        animation: rotate-b-ftydchnudf 0.2s ease-in-out infinite;
      }
      .sub-text-phone[b-ftydchnudf] {
        position: absolute;
        right: 60px;
        left: -220px;
        top: 50%;
        transform: translateY(-50%);
        background-color: #000;
        color: #fff;
        padding: 5px 10px;
        border-radius: 5px;
        white-space: nowrap;
        opacity: 0;
        text-decoration: none;

        transition: opacity 0.2s ease;
        pointer-events: none;
      }
      &:hover[b-ftydchnudf] {
        .sub-text-phone {
          opacity: 1;
        }
      }
    }
    .hf-phone[b-ftydchnudf],
    .hf-zalo[b-ftydchnudf],
    .hf-whatsapp[b-ftydchnudf],
    .hf-wechat[b-ftydchnudf],
    .back-to-top[b-ftydchnudf] {
      margin-bottom: 0px;
      position: relative;
      .hf-circle {
        background-color: #b80a25;
        border: none;
        border-radius: 50%;
        height: 50px;
        width: 50px;
        text-decoration: none;
        color: white;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: transform 0.3s ease;

        &:hover {
          transform: scale(1.1);
        }

        img[b-ftydchnudf] {
          width: 16px;
          height: 16px;
          object-fit: contain;
        }

        i[b-ftydchnudf] {
          font-size: 16px;
        }
      }
      .sub-text[b-ftydchnudf] {
        position: absolute;
        right: 60px;
        top: 50%;
        transform: translateY(-50%);
        background-color: #000;
        padding: 5px 10px;
        border-radius: 5px;
        white-space: nowrap;
        opacity: 0;
        transition: opacity 0.2s ease;
        pointer-events: none;
        a {
          text-decoration: none;
          color: #fff;
        }
        span[b-ftydchnudf]{
          font-size: 14px;
          color: #fff;
          line-height: 1.5;
        }
      }

      &:hover span.sub-text[b-ftydchnudf] {
        opacity: 1;
      }
    }
  }
  &.footer-mode[b-ftydchnudf] {
    ul {
      .hf-phone,
      .hf-zalo,
      .hf-whatsapp,
      .hf-wechat,
      .back-to-top {
        .hf-circle {
          background-color: #E78F81;
          color: #fff;
          &:hover {
            transform: scale(1.1);
          }
        }
      }
    }
  }
}
/* Định nghĩa animation rotate */
@keyframes rotate-b-ftydchnudf {
  0% {
    transform: rotate(0deg);
  }
  50% {
    transform: rotate(-10deg);
  }
  100% {
    transform: rotate(0deg);
  }
}
/* _content/hafamex-ui/Shared/Components/NavMenuAdmin/NavMenuAdmin.razor.rz.scp.css */


.sidebar[b-z0efgm3n5u] {
  background-image: linear-gradient(180deg, rgb(5, 39, 103) 0%, #3a0647 70%);
  width: 250px;
  height: 100vh;
  position: fixed;
  left: 0;
  top: 0;
  z-index: 1000;
  transition: all 0.3s ease;
  color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  .sidebar-brand {
    text-align: center;
    font-size: 1.5rem;
    font-weight: bold;
    padding: 1.5rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  }
  .sidebar-nav[b-z0efgm3n5u] {
    padding: 1rem;
    .nav {
      list-style: none;
      padding: 0;
      margin: 0;

      .nav-item {
        margin-bottom: 0.5rem;

        a {
          color: #fff;
          text-decoration: none;
          display: flex;
          align-items: center;
          padding: 0.5rem 1rem;
          border-radius: 4px;
          transition: all 0.2s ease;
          &.active,
          &:hover {
            background-color: rgba(255, 255, 255, 0.2);
            transform: translateX(4px);
          }
          i[b-z0efgm3n5u] {
            margin-right: 0.5rem;
          }
        }
      }
    }
  }
  .sidebar-footer[b-z0efgm3n5u] {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 1rem;

    button {
      margin-bottom: 0.5rem;
      color: #fff;
      text-decoration: none;
      display: flex;
      justify-content: flex-start;
      padding: 0.5rem 1rem;
      border-radius: 4px;
      transition: all 0.2s ease;

      &:hover {
        background-color: rgba(255, 255, 255, 0.2);
        transform: translateX(4px);
      }
      i[b-z0efgm3n5u] {
        margin-right: 0.5rem;
      }
    }
  }
}
/* _content/hafamex-ui/Shared/Components/ProductHeader/ProductHeader.razor.rz.scp.css */
.header[b-fxue2hdft2] {
  position: fixed;
  top: 0;
  z-index: 1000;
  width: 100%;
  background-color: transparent;
  transition: box-shadow 0.5s ease-in-out;

  .header-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: transparent;
    opacity: 0;
    transition: opacity 1s ease-in-out;
    z-index: -1;
  }

  .hd-container[b-fxue2hdft2] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 3.125rem 0 9.375rem;
    position: relative;
    z-index: 1;

    .hd-left {
      .logo {
        display: flex;
        align-items: center;
        gap: 0.5rem;

        img {
          width: 5rem;
          height: 5rem;
        }

        h2[b-fxue2hdft2] {
          font-size: 1.875rem;
          font-weight: 600;
          font-family: "Poppins", sans-serif;
          color: #b80a25;
          margin: 0;
          padding: 0;
        }
      }
      .menu-toggle[b-fxue2hdft2] {
        display: none;
        font-size: 1.75rem;
        background: none;
        border: none;
        color: #b80a25;
        cursor: pointer;
        margin-left: auto;
        padding: 0.5rem;
      }
    }

    .hd-right[b-fxue2hdft2] {
      display: flex;
      align-items: center;

      .menu {
        .nav {
          display: flex;
          align-items: center;
          list-style: none;
          padding: 0;
          margin: 0;
          &.open {
            display: flex;
          }
          li[b-fxue2hdft2] {
            margin-right: 1.875rem;
            position: relative;

            a {
              color: #b80a25;
              font-family: "Poppins", sans-serif;
              font-size: 1rem;
              font-weight: 500;
              text-decoration: none;
            }

            &.nav-item[b-fxue2hdft2] {
              transition: all 0.2s ease-in-out;

              &:hover a {
                font-weight: 600;
              }

              &[b-fxue2hdft2]::after {
                content: "";
                position: absolute;
                left: 0;
                bottom: -0.125rem;
                width: 100%;
                height: 0.125rem;
                background-color: #b80a25;
                transform: scaleX(0);
                transition: transform 0.3s ease-in-out;
              }

              &:hover[b-fxue2hdft2]::after {
                transform: scaleX(1);
              }

              &.active[b-fxue2hdft2] {
                a {
                  font-weight: 600;
                }

                &[b-fxue2hdft2]::after {
                  transform: scaleX(1);
                }
              }
            }

            &.has-dropdown[b-fxue2hdft2] {
              position: relative;

              .fa-chevron-down {
                font-size: 0.875rem;
                color: #b80a25;
              }

              .sub-menu[b-fxue2hdft2] {
                display: none;
                position: absolute;
                background-color: #f9f9f9;
                min-width: 16.25rem;
                box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.2);
                z-index: 1;
                padding: 0;

                .sub-menu-item {
                  list-style: none;

                  a {
                    display: block;
                    padding: 0.9375rem 1.25rem;
                    font-size: 1rem;
                    color: #ffa09b;
                    font-weight: 500;

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

              &:hover .sub-menu[b-fxue2hdft2] {
                display: block;
              }
            }
          }
        }
      }
    }
  }

  &.scrolled[b-fxue2hdft2] {
    box-shadow: 0.1875rem 0.1875rem 0.625rem rgba(177, 177, 177, 0.75);
    background-color: white;

    .header-bg {
      opacity: 1;
    }
  }
.custom-button[b-fxue2hdft2] {
    padding: 0.375rem 0.625rem;
    font-size: 0.875rem;
    font-weight: 500;
    font-family: "Poppins", sans-serif;
    color: #B80A25;
    background-color: transparent;
    border: 0.125rem solid #B80A25;
    border-radius: 9999px;
    cursor: pointer;
    transition: all 0.5s;
    box-shadow: 0 0.625rem 1.25rem rgba(0, 0, 0, 0.15);
    position: relative;
    overflow: hidden;

    &::before {
      content: "";
      position: absolute;
      height: 100%;
      left: 0;
      width: 0;
      top: 0;
      border-radius: 9999px;
      background-color: #B80A25;
      z-index: -1;
      transition: all 0.5s;
    }

    &:hover[b-fxue2hdft2]::before {
      width: 100%;
    }

    &:hover[b-fxue2hdft2] {
      color: white;
      background-color: #B80A25;
    }

    .custom-icon[b-fxue2hdft2] {
      width: 1.375rem;
      height: 1.375rem;
      padding: 0.25rem;
      border: 0.0625rem solid #B80A25;
      border-radius: 50%;
      transform: rotate(45deg);
      transition: all 0.5s ease-in-out;
      margin-left: 5px;
      .icon-path {
        fill: #B80A25;
        transition: fill 0.5s ease-in-out;
      }
    }

    &:hover .custom-icon[b-fxue2hdft2] {
      background-color: #f9fafb;
      transform: rotate(90deg);
      border: none;
    }
  }
  /* // Responsive */
  @media (max-width: 360px) {
    .hd-container[b-fxue2hdft2] {
      padding: 0.5rem 1rem;
      flex-direction: column;
      text-align: center;
      .hd-left,
      .hd-right {
        width: 100%;
        flex-direction: column;
        text-align: center;
        justify-content: center;
      }
    }
    .logo h2[b-fxue2hdft2] {
      font-size: 1.125rem;
    }
  }

  @media (max-width: 576px) {
    .hd-container[b-fxue2hdft2] {
      padding: 0.5rem 1rem;
      flex-direction: column;
      align-items: center;
      text-align: center;
    }
  }

  @media (max-width: 768px) {
    .hd-container[b-fxue2hdft2] {
      padding: 0.625rem 1rem;
      flex-direction: column;
      align-items: center;
      text-align: center;

      .hd-right {
        .menu {
          display: flex;
          justify-content: center;
          align-items: center;
          ul {
            width: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
            text-align: center;
            line-height: 2;
            li {
              font-size: 10px;
              margin: 0.5rem 0;
              text-align: center;
            }
          }
        }
      }
    }
  }

  @media (max-width: 1024px) {
    position: relative;
    .hd-container[b-fxue2hdft2] {
      padding: 0.75rem 1.5rem;
      flex-direction: column;
      align-items: center;
      text-align: center;
      .hd-left,
      .hd-right {
        width: 100%;
        justify-content: center;
        flex-direction: column;
      }
    }
  }

  @media (max-width: 1280px) {
    .hd-container[b-fxue2hdft2] {
      padding: 0.75rem 2rem;
    }
  }

  @media (min-width: 1441px) {
    .hd-container[b-fxue2hdft2] {
      max-width: 1440px;
      margin: 0 auto;
    }
  }
}
/* _content/hafamex-ui/Shared/Layouts/AdminLayout.razor.rz.scp.css */
.admin-layout[b-6g782eo8uz] {
  position: relative;
  display: flex;
  flex-direction: column;
}
.content[b-6g782eo8uz]{
  height: 100%;
  background-color: #f2f2f2;
}

main[b-6g782eo8uz] {
  flex: 1;
}
[b-6g782eo8uz] .tool-bar {
  position: sticky;
  top: 0;
  z-index: 1000;
  background-color: #fff;
}
.user-info[b-6g782eo8uz] {
  padding: 1rem;
}

@media (min-width: 641px) {
  .admin-layout[b-6g782eo8uz] {
    flex-direction: row;
  }

  .sidebar[b-6g782eo8uz] {
    width: 250px;
    height: 100vh;
    position: sticky;
    top: 0;
  }

  article[b-6g782eo8uz] {
    padding-left: 2rem !important;
    padding-right: 1.5rem !important;
  }
}
/* _content/hafamex-ui/Shared/Layouts/MainLayout.razor.rz.scp.css */
*[b-g1mqrpy24l]{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    outline: none;
    background-color: #fafaface;
}