.htts-page {
    --htts-container-width: 1350px;
    overflow: hidden;
    max-width: 100vw;
    background: #fff4f8;
}

.htts-body {
    position: relative;
    margin-top: -1px;
    padding-bottom: clamp(138px, 13vw, 210px);
    background-color: #fff4f8;
    background-image: url("https://cdn.diemnhangroup.com/dieuuoccuame/2026/05/c4434306-5011-4dff-8cec-b3494e96cd5f.jpg");
    background-repeat: no-repeat;
    background-position: center top;
    background-size: 100% 100%;
}

.htts-body::before {
    position: absolute;
    inset: 0 0 auto;
    z-index: 1;
    height: clamp(80px, 7vw, 132px);
    background: linear-gradient(
        180deg,
        rgba(255, 255, 255, 0.82) 0%,
        rgba(255, 255, 255, 0.48) 42%,
        rgba(255, 244, 248, 0) 100%
    );
    content: "";
    pointer-events: none;
}

.htts-body > * {
    position: relative;
    z-index: 2;
}

.htts-body > .htts-gallery__ending {
    z-index: 1;
}

.htts-page *,
.htts-page *::before,
.htts-page *::after {
    box-sizing: border-box;
}

.htts-page h1,
.htts-page h2,
.htts-page h3,
.htts-page p,
.htts-page span,
.htts-page strong,
.htts-page a {
    white-space: normal;
    overflow-wrap: anywhere;
}

.htts-hero {
    position: relative;
    z-index: 3;
    width: 100%;
    overflow: visible;
    background: #fff4f8;
}

.htts-hero::after {
    position: absolute;
    inset: auto 0 clamp(-74px, -4.8vw, -48px);
    z-index: 2;
    height: clamp(88px, 7vw, 138px);
    background: linear-gradient(
        180deg,
        rgba(255, 244, 248, 0) 0%,
        rgba(255, 255, 255, 0.88) 50%,
        rgba(255, 244, 248, 0) 100%
    );
    content: "";
    pointer-events: none;
}

.htts-hero__image {
    display: block;
    width: 100%;
    height: auto;
}

@media (max-width: 767px) {
    .htts-body {
        background-size: auto 100%;
    }

    .htts-intro__inner,
    .htts-route__inner,
    .htts-stories__inner,
    .htts-artists__inner,
    .htts-sponsor__inner,
    .htts-gallery__inner {
        width: calc(100vw - 32px) !important;
        max-width: calc(100vw - 32px) !important;
    }
}

@media (max-width: 575px) {
    .htts-intro__inner,
    .htts-route__inner,
    .htts-stories__inner,
    .htts-artists__inner,
    .htts-sponsor__inner,
    .htts-gallery__inner {
        max-width: 358px !important;
        margin-right: 16px !important;
        margin-left: 16px !important;
    }
}