body:has(.detail) > div > .blog-detail-gradient > .form {
  position: relative;
  z-index: 1;
  padding: 150px 0 50px;
}

.blog-detail-gradient {
  background: linear-gradient(0deg, #f4f4f4 0%, #1d1c214d 27.1%, #151517 95.49%);
}

body:has(.detail) > div > .blog-detail-gradient > .form > .inner {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  color: inherit;
  text-decoration: none;
}

body:has(.detail) > div > .blog-detail-gradient > .form > .inner > svg {
  flex: 0 0 36px;
  width: 36px;
  height: 22px;
}

body:has(.detail) > div > .blog-detail-gradient > .form > .inner > p {
  margin: 0;
  color: #ffffff;
  font-family: "Urbanist", "OPPOSans", sans-serif;
  font-size: 1.25rem;
  font-weight: 400;
  line-height: 30px;
  text-transform: capitalize;
}

body:has(.detail) > div > .blog-detail-gradient > .detail {
  width: 88%;
  margin: 0 auto;
  padding: 48px 30px 62px;
  border: 1px solid #3a3f43;
  border-radius: 6px;
  box-sizing: border-box;
  background: #141517;
}

.detail > .inner {
  width: auto;
  margin: 0;
}

.detail > .inner > .section1 {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr);
  align-items: start;gap:3rem;}

.detail > .inner > .section1 > .section1-left {
  min-width: 0;
  overflow: hidden;
  border-radius: 2px;
  aspect-ratio: 16 / 9;
}

.detail > .inner > .section1 > .section1-left > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.detail > .inner > .section1 > .section1-right {
  min-width: 0;margin-top:4rem;}

.detail > .inner > .section1 > .section1-right > .section1-right-top {
  display: flex;
  align-items: center;
  justify-content: flex-start;gap:1.0625rem;}

.detail > .inner > .section1 > .section1-right > .section1-right-top > .category > p {
  margin: 0;
  color: #96d100;
  font-family: "OPPOSans", sans-serif;
  font-size: 0.875rem;
  font-weight: 400;
  line-height: 18px;
  text-transform: capitalize;
}

.detail > .inner > .section1 > .section1-right > .section1-right-top > .date > p {
  margin: 0;
  color: #666666;
  font-family: "OPPOSans", sans-serif;
  font-size: 0.75rem;
  font-weight: 400;
  line-height: 16px;
  text-transform: uppercase;
}

.detail > .inner > .section1 > .section1-right > .section1-right-bottom {margin-top:1.625rem;}

.detail > .inner > .section1 > .section1-right > .section1-right-bottom > .title > p {
  margin: 0;
  color: #ffffff;
  font-family: "Urbanist", "OPPOSans", sans-serif;
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 29px;
  text-transform: capitalize;
}

.detail > .inner > .section2 {
  display: flex;
  flex-direction: column;gap:1.125rem;margin-top:3.375rem;}

.detail > .inner > .section2 > p {
  margin: 0;
  color: #ffffff;
  font-family: "Urbanist", "OPPOSans", sans-serif;
  font-size: 1.125rem;
  font-weight: 400;
  line-height: 22px;
  text-transform: capitalize;
}

.relatedArticles {
  padding: 72px 0 0;
}

.relatedProducts {
  padding: 72px 0 0;
}

.relatedArticles > .inner,
.relatedProducts > .inner {
  width: 88%;
}

.relatedArticles > .inner > .section1 > .title > p,
.relatedProducts > .inner > .section1 > .title > p {
  color: rgba(255, 255, 255, 1);
}

.faq {margin-top:4.75rem;  background: transparent;
}

/* Responsive layout for blog-detail.html. */
/* Fluid page rules use rem values converted from the 16px design scale. */
        #app {
            max-width: 100%;
            overflow-x: clip;
        }

        #app .blog-detail-gradient {
            min-width: 0;
        }

        #app .blog-detail-gradient > .form {
            padding: clamp(5.25rem, calc(2.5rem + 7.6vw), 9.375rem) 0 clamp(1.375rem, 2.85vw, 3.125rem);
        }

        #app .blog-detail-gradient > .form > .inner {
            width: min(88%, 82.5rem);
        }

        #app .blog-detail-gradient > .form > .inner > p {
            font-size: clamp(1rem, calc(.62rem + .62vw), 1.25rem);
            line-height: 1.4;
        }

        #app .blog-detail-gradient > .form > .inner > svg {
            flex-basis: clamp(1.75rem, 2.45vw, 2.25rem);
            width: clamp(1.75rem, 2.45vw, 2.25rem);
            height: auto;
        }

        #app .blog-detail-gradient > .detail {
            width: min(88%, 82.5rem);
            padding: clamp(2rem, 3.27vw, 3rem) clamp(1.375rem, 2.04vw, 1.875rem) clamp(2.5rem, 4.22vw, 3.875rem);
        }

        #app .blog-detail-gradient > .detail > .inner > .section1 {gap:clamp(1.5rem, 3.27vw, 3rem);
        }

        #app .blog-detail-gradient > .detail > .inner > .section1 > .section1-right {margin-top:clamp(1rem, 4.35vw, 4rem);
        }

        #app .blog-detail-gradient > .detail > .inner > .section1 > .section1-right > .section1-right-bottom {margin-top:clamp(1rem, 1.77vw, 1.625rem);
        }

        #app .blog-detail-gradient > .detail > .inner > .section1 > .section1-right > .section1-right-bottom > .title > p {
            font-size: clamp(1.125rem, calc(.875rem + .7vw), 1.5rem);
            line-height: 1.3;
        }

        #app .blog-detail-gradient > .detail > .inner > .section2 {gap:clamp(.875rem, 1.22vw, 1.125rem);margin-top:clamp(1.75rem, 3.67vw, 3.375rem);
        }

        #app .blog-detail-gradient > .detail > .inner > .section2 > p {
            font-size: clamp(1rem, calc(.82rem + .35vw), 1.125rem);
            line-height: 1.5;
        }

        @media (max-width: 1280px) {
            #app .blog-detail-gradient > .detail > .inner > .section1 > .section1-right {
            }

            #app .blog-detail-gradient > .detail > .inner > .section1 > .section1-right > .section1-right-bottom {
            }

            #app .blog-detail-gradient > .detail > .inner > .section2 {
            }
        }

        @media (max-width: 1024px) {
            #app .blog-detail-gradient > .detail {
                width: 90%;
                padding-right: 1.375rem;
                padding-left: 1.375rem;
            }

            #app .blog-detail-gradient > .detail > .inner > .section1 {
                grid-template-columns: minmax(0, 1fr) minmax(0, .92fr);
            }

            #app .blog-detail-gradient > .detail > .inner > .section1 > .section1-right {
            }
        }

        @media (max-width: 820px) {
            #app .blog-detail-gradient > .detail {
            }

            #app .blog-detail-gradient > .detail > .inner > .section1 {
            }

            #app .blog-detail-gradient > .detail > .inner > .section1 > .section1-right {
            }

            #app .blog-detail-gradient > .detail > .inner > .section1 > .section1-right > .section1-right-bottom {
            }

            #app .blog-detail-gradient > .detail > .inner > .section2 {
            }
        }

        @media (max-width: 768px) {
            #app .blog-detail-gradient > .detail {
                width: 92%;
                padding: 1.5rem 1.125rem 1.875rem;
            }

            #app .blog-detail-gradient > .detail > .inner > .section1 {
            }

            #app .blog-detail-gradient > .detail > .inner > .section2 {
            }
        }

        @media (max-width: 640px) {
            #app .blog-detail-gradient > .form > .inner {
                width: 92%;
            }

            #app .blog-detail-gradient > .form > .inner > svg {
                flex-basis: 1.75rem;
                width: 1.75rem;
            }

            #app .blog-detail-gradient > .detail {
                padding: 1.25rem .875rem 1.5rem;
            }

            #app .blog-detail-gradient > .detail > .inner > .section1 {
                grid-template-columns: minmax(0, 1fr);
            }

            #app .blog-detail-gradient > .detail > .inner > .section1 > .section1-left {
                width: 100%;
                max-width: 42rem;
                margin: 0 auto;
            }

            #app .blog-detail-gradient > .detail > .inner > .section1 > .section1-right > .section1-right-top {
                flex-wrap: wrap;
            }

            #app .blog-detail-gradient > .detail > .inner > .section2 {
            }
        }

        @media (max-width: 480px) {
            #app .blog-detail-gradient > .detail {
                width: 92%;
                padding: 1.125rem .75rem 1.25rem;
            }
        }

@media (max-width: 480px) {
  #app .blog-detail-gradient {
    padding: 3rem 0;
  }
}