/* Unified vertical gradient: hero + content (one continuous band on html/body) */



:root {

    --page-hero-bg-gradient: linear-gradient(180deg, #eff6ff 0%, #fff1f2 38%, #fff7ed 70%, #fff7ed 100%);

    --page-hero-bg-color: #fff7ed;

    --page-hero-bg-gradient-green: linear-gradient(180deg, #f0fdf4 0%, #ecfdf5 38%, #d1fae5 70%, #d1fae5 100%);

    --page-hero-bg-color-green: #d1fae5;

}



html:has(body.page-hero-page:not(.page-hero-page--green)),

html:has(.page-hero-band:not(.page-hero-band--green)),

body.page-hero-page:not(.page-hero-page--green),

body:has(.page-hero-band:not(.page-hero-band--green)) {

    background-color: var(--page-hero-bg-color) !important;

    background-image: var(--page-hero-bg-gradient) !important;

    background-attachment: scroll !important;

}



html:has(body.page-hero-page--green),

html:has(.page-hero-band--green),

body.page-hero-page--green,

body:has(.page-hero-band--green) {

    background-color: var(--page-hero-bg-color-green) !important;

    background-image: var(--page-hero-bg-gradient-green) !important;

    background-attachment: scroll !important;

}



body.page-hero-page,

body:has(.page-hero-band) {

    min-height: 100%;

}



/* Hero / main / content — transparent so body gradient shows through */

.page-hero-band,

#top.page-hero-band,

#top.relative.overflow-hidden.page-hero-band,

.page-hero-band.bg-gradient-to-br,

#top.bg-gradient-to-br,

section.dream-hero.page-hero-band,

section.relative.overflow-hidden.border-b.page-hero-band,

section.relative.overflow-hidden.border-b:has([class*="-hero-card"]),

main#main-content:has(.page-hero-band),

#main-content:has(.page-hero-band),

.page-hero-follow,

main:has(.page-hero-band),

main.page-hero-follow {

    background-color: transparent !important;

    background-image: none !important;

}



.page-hero-band,

#top.page-hero-band,

section.relative.overflow-hidden.border-b:has([class*="-hero-card"]),

section.dream-hero.page-hero-band {

    border-bottom: none !important;

}



/* Compact hero — symmetric gap: breadcrumb/nav ↔ hero card ↔ content below */



.page-hero-band,

section.relative.overflow-hidden.border-b:has([class*="-hero-card"]),

section.relative.overflow-hidden.border-b:has(.tarot-hero-card),

section.relative.overflow-hidden.border-b:has(.dream-hero-card),

section.relative.overflow-hidden.border-b:has(.rounded-\[2rem\]),

section.dream-hero,

#top.relative.overflow-hidden {

    --page-hero-edge-gap: 1rem;

    padding-top: var(--page-hero-edge-gap) !important;

    padding-bottom: 0 !important;

}



@media (min-width: 640px) {



    .page-hero-band,

    section.relative.overflow-hidden.border-b:has([class*="-hero-card"]),

    section.relative.overflow-hidden.border-b:has(.tarot-hero-card),

    section.relative.overflow-hidden.border-b:has(.dream-hero-card),

    section.relative.overflow-hidden.border-b:has(.rounded-\[2rem\]),

    section.dream-hero,

    #top.relative.overflow-hidden {

        --page-hero-edge-gap: 1.25rem;

    }

}



.page-hero-shell,

.relative.mx-auto.page-hero-shell {

    margin-bottom: 0 !important;

}



.page-hero-follow,

#top ~ .page-hero-follow,

main #top ~ .page-hero-follow,

.page-hero-band + main.page-hero-follow,

section.page-hero-band + .page-hero-follow,

section.page-hero-band + main.page-hero-follow,

section.dream-hero + main .page-hero-follow,

section.page-hero-band + #art-main.page-hero-follow,

section.relative.overflow-hidden.border-b + #art-main.page-hero-follow,

main > section.page-hero-band + #art-main.page-hero-follow,

main > section.page-hero-band + .page-hero-follow,

main > section.page-hero-band + section.page-hero-follow {

    padding-top: var(--page-hero-edge-gap, 1rem) !important;

}



.page-hero-band [class*="-hero-card"],

.page-hero-band .tarot-hero-card,

.page-hero-band .dream-hero-card,

section.relative.overflow-hidden.border-b .rounded-\[32px\].border-white\/20,

section.relative.overflow-hidden.border-b .rounded-\[2rem\].border-white\/15,

section.relative.overflow-hidden.border-b .rounded-\[2rem\].border-white\/20,

#top [class*="-hero-card"],

#top .tarot-hero-card {

    padding-top: 0.75rem !important;

    padding-bottom: 0.75rem !important;

}



@media (min-width: 640px) {



    .page-hero-band [class*="-hero-card"],

    .page-hero-band .tarot-hero-card,

    .page-hero-band .dream-hero-card,

    section.relative.overflow-hidden.border-b .rounded-\[32px\].border-white\/20,

    section.relative.overflow-hidden.border-b .rounded-\[2rem\].border-white\/15,

    section.relative.overflow-hidden.border-b .rounded-\[2rem\].border-white\/20,

    #top [class*="-hero-card"],

    #top .tarot-hero-card {

        padding-top: 1rem !important;

        padding-bottom: 1rem !important;

    }

}



.page-hero-band [class*="-hero-card"] > .mx-auto.mb-4,

.page-hero-band [class*="-hero-card"] .mb-4,

.page-hero-band .tarot-hero-card .mx-auto.mb-4,

.page-hero-band .dream-hero-card .dream-hero-accent,

#top [class*="-hero-card"] > .mx-auto.mb-4,

#top [class*="-hero-card"] .mb-4 {

    margin-bottom: 0.5rem !important;

}



.page-hero-band [class*="-hero-card"] p.mb-4,

#top [class*="-hero-card"] p.mb-4 {

    margin-bottom: 0.5rem !important;

}



/* หน้าแรก — ชนะ py-6 ของ Tailwind, ระยะเท่า page-hero-band */
#lotto-result,
#lotto-result.index-hero-band,
main#main-content > #lotto-result {
    --page-hero-edge-gap: 1rem;
    padding-top: var(--page-hero-edge-gap) !important;
    padding-bottom: 1.5rem !important;
    background-color: transparent !important;
    background-image: none !important;
}

@media (min-width: 640px) {
    #lotto-result,
    #lotto-result.index-hero-band,
    main#main-content > #lotto-result {
        --page-hero-edge-gap: 1.25rem;
        padding-bottom: 2rem !important;
    }
}

/* Homepage — symmetric gap: cards ↔ ticker ↔ directory */
#lotto-result:has(+ .lotto-directory-section) .featured-solo-wrap {
    padding-bottom: 0.75rem;
}

#lotto-result:has(+ .lotto-directory-section) .lotto-ticker-wrap {
    margin: 0.75rem auto 0.25rem;
}

main#main-content > #lotto-result:has(+ .lotto-directory-section) {
    padding-bottom: 0 !important;
}

#lotto-result + .lotto-directory-section {
    padding-top: 0.25rem !important;
}

#lotto-result + .lotto-directory-section > .max-w-7xl > .index-banners-stack:first-child {
    margin-top: 0;
}

#lotto-result .index-hero-head {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

@media (max-width: 767px) and (hover: none) {
    #lotto-result,
    #lotto-result.index-hero-band {
        padding-top: 0.25rem !important;
    }
}

/* Zone A → hero: gap = stack margin only (same as breadcrumb → Zone A top) */
.home-banners-stack.banner-stack--desktop + main #lotto-result,
.home-banners-stack.banner-stack--desktop + main #lotto-result.index-hero-band,
.home-banners-stack.banner-stack--desktop + main #top.page-hero-band,
.home-banners-stack.banner-stack--desktop + main > section.page-hero-band:first-child,
.home-banners-stack.banner-stack--desktop + main > div.page-hero-band:first-child,
.home-banners-stack.banner-stack--desktop + main > div#top.page-hero-band:first-child,
.home-banners-stack.banner-stack--desktop + main > section.page-hero-band.relative.overflow-hidden.border-b:first-child,
.home-banners-stack.banner-stack--desktop + main > div.page-hero-band.relative.overflow-hidden.border-b:first-child,
.home-banners-stack.banner-stack--desktop + main > div#top.page-hero-band.relative.overflow-hidden.border-b:first-child,
.home-banners-stack.banner-stack--desktop + main > section.page-hero-band.relative.overflow-hidden.border-b:has(.tarot-hero-card):first-child,
.home-banners-stack.banner-stack--desktop + main > section.page-hero-band.relative.overflow-hidden.border-b:has([class*="-hero-card"]):first-child,
.home-banners-stack.banner-stack--desktop + main > section.dream-hero.page-hero-band:first-child,
.home-banners-stack.banner-stack--desktop + section.page-hero-band.relative.overflow-hidden.border-b,
.home-banners-stack.banner-stack--desktop + section.page-hero-band.relative.overflow-hidden.border-b:has([class*="-hero-card"]),
.home-banners-stack.banner-stack--desktop + section.dream-hero.page-hero-band,
.home-banner-wrap.banner-stack--desktop + main #lotto-result,
.home-banner-wrap.banner-stack--desktop + main #lotto-result.index-hero-band,
.home-banner-wrap.banner-stack--desktop + main #top.page-hero-band,
.home-banner-wrap.banner-stack--desktop + main > section.page-hero-band:first-child,
.home-banner-wrap.banner-stack--desktop + main > div.page-hero-band:first-child,
.home-banner-wrap.banner-stack--desktop + main > div#top.page-hero-band:first-child,
.home-banner-wrap.banner-stack--desktop + main > section.page-hero-band.relative.overflow-hidden.border-b:first-child,
.home-banner-wrap.banner-stack--desktop + main > div.page-hero-band.relative.overflow-hidden.border-b:first-child,
.home-banner-wrap.banner-stack--desktop + main > div#top.page-hero-band.relative.overflow-hidden.border-b:first-child,
.home-banner-wrap.banner-stack--desktop + main > section.page-hero-band.relative.overflow-hidden.border-b:has(.tarot-hero-card):first-child,
.home-banner-wrap.banner-stack--desktop + main > section.page-hero-band.relative.overflow-hidden.border-b:has([class*="-hero-card"]):first-child,
.home-banner-wrap.banner-stack--desktop + main > section.dream-hero.page-hero-band:first-child,
.home-banner-wrap.banner-stack--desktop + section.page-hero-band.relative.overflow-hidden.border-b,
.home-banner-wrap.banner-stack--desktop + section.page-hero-band.relative.overflow-hidden.border-b:has([class*="-hero-card"]),
.home-banner-wrap.banner-stack--desktop + section.dream-hero.page-hero-band {
    padding-top: 0 !important;
}

@media (max-width: 1023px) and (not ((hover: hover) and (pointer: fine))) {
    .home-banners-stack:not(.banner-stack--desktop) + main #lotto-result,
    .home-banners-stack:not(.banner-stack--desktop) + main #lotto-result.index-hero-band,
    .home-banners-stack:not(.banner-stack--desktop) + main #top.page-hero-band,
    .home-banners-stack:not(.banner-stack--desktop) + main > section.page-hero-band:first-child,
    .home-banners-stack:not(.banner-stack--desktop) + main > div.page-hero-band:first-child,
    .home-banners-stack:not(.banner-stack--desktop) + main > div#top.page-hero-band:first-child,
    .home-banners-stack:not(.banner-stack--desktop) + main > section.page-hero-band.relative.overflow-hidden.border-b:first-child,
    .home-banners-stack:not(.banner-stack--desktop) + main > div.page-hero-band.relative.overflow-hidden.border-b:first-child,
    .home-banners-stack:not(.banner-stack--desktop) + main > div#top.page-hero-band.relative.overflow-hidden.border-b:first-child,
    .home-banners-stack:not(.banner-stack--desktop) + main > section.page-hero-band.relative.overflow-hidden.border-b:has(.tarot-hero-card):first-child,
    .home-banners-stack:not(.banner-stack--desktop) + main > section.page-hero-band.relative.overflow-hidden.border-b:has([class*="-hero-card"]):first-child,
    .home-banners-stack:not(.banner-stack--desktop) + main > section.dream-hero.page-hero-band:first-child,
    .home-banners-stack:not(.banner-stack--desktop) + section.page-hero-band.relative.overflow-hidden.border-b,
    .home-banners-stack:not(.banner-stack--desktop) + section.page-hero-band.relative.overflow-hidden.border-b:has([class*="-hero-card"]),
    .home-banners-stack:not(.banner-stack--desktop) + section.dream-hero.page-hero-band,
    .home-banner-wrap:not(.banner-stack--desktop) + main #lotto-result,
    .home-banner-wrap:not(.banner-stack--desktop) + main #lotto-result.index-hero-band,
    .home-banner-wrap:not(.banner-stack--desktop) + main #top.page-hero-band,
    .home-banner-wrap:not(.banner-stack--desktop) + main > section.page-hero-band:first-child,
    .home-banner-wrap:not(.banner-stack--desktop) + main > div.page-hero-band:first-child,
    .home-banner-wrap:not(.banner-stack--desktop) + main > div#top.page-hero-band:first-child,
    .home-banner-wrap:not(.banner-stack--desktop) + main > section.page-hero-band.relative.overflow-hidden.border-b:first-child,
    .home-banner-wrap:not(.banner-stack--desktop) + main > div.page-hero-band.relative.overflow-hidden.border-b:first-child,
    .home-banner-wrap:not(.banner-stack--desktop) + main > div#top.page-hero-band.relative.overflow-hidden.border-b:first-child,
    .home-banner-wrap:not(.banner-stack--desktop) + main > section.page-hero-band.relative.overflow-hidden.border-b:has(.tarot-hero-card):first-child,
    .home-banner-wrap:not(.banner-stack--desktop) + main > section.page-hero-band.relative.overflow-hidden.border-b:has([class*="-hero-card"]):first-child,
    .home-banner-wrap:not(.banner-stack--desktop) + main > section.dream-hero.page-hero-band:first-child,
    .home-banner-wrap:not(.banner-stack--desktop) + section.page-hero-band.relative.overflow-hidden.border-b,
    .home-banner-wrap:not(.banner-stack--desktop) + section.page-hero-band.relative.overflow-hidden.border-b:has([class*="-hero-card"]),
    .home-banner-wrap:not(.banner-stack--desktop) + section.dream-hero.page-hero-band {
        padding-top: 0 !important;
    }
}

main > section.page-hero-band + #art-main.page-hero-follow .program-game {

    margin-top: 0 !important;

}