/* Discover Mega Menu Custom Styles */
 
.unbranded-footer-copy {
    font-size: 14px;
}

.brand-name {
    color: #00682f;
    font-weight: 800;
    text-transform: uppercase;
}

.brand-b {
    font-weight: 700;
    font-size: 19px;
}

.brand-s {
    font-weight: 800;
    font-size: 13px;
}
.brain-active section.breadcrumbs-section .breadcrumb {
    padding: 4px 0px !important;
}
.brain-challenge section.breadcrumbs-section .breadcrumb {
    padding: 4px 0px !important;
}
.active-club-breadcrumbs {
    padding-top: 80px;

}

    .active-club-breadcrumbs .breadcrumb .breadcrumb-item a,
    .active-club-breadcrumbs .breadcrumb .breadcrumb-item.active,
    .active-club-breadcrumbs .breadcrumb-item + .breadcrumb-item:before {
        color: #fff !important;
    }

.terms-of-use-section {
    margin-top: 80px !important;
}
.privacy-policy-section {
    margin-top: 80px !important;
}

    .un-tab1-food-card .img-badge ul li {
    list-style-type: none;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #fbfaf0;
    padding: 2px 8px;
    border-radius: 16px;
    width: fit-content;
}

    .un-tab1-food-card .img-badge ul li .circle {
        width: 10px;
        height: 10px;
        border-radius: 50%;
        display: block;
        margin-right: 8px;
    }


.un-tab1-food-card .img-badge ul {
    padding-left: 0px;
}

    .un-tab1-food-card .img-badge ul li .badge-text {
        font-family: Noto Sans Thai;
        font-size: .75em;
        font-style: normal;
        font-weight: 700;
        line-height: 150%;
        margin-bottom: 0;
    }
        .discover-mega-menu-wrapper {
    display: flex !important;
    padding: 0 !important;
    background: #ffffff;
    min-height: 500px;
}

.discover-menu-left {
    flex: 0 0 35%;
    background-color: #f8f7f5;
    padding: 64px 32px 64px 128px;
    display: flex;
    flex-direction: column;
}

.discover-menu-title {
    color: #333;
    font-family: "Noto Sans Thai";
    font-size: 32px;
    font-weight: 700;
    line-height: 1.3;
    margin-bottom: 24px;
}

.discover-menu-subtitle {
    color: #666;
    font-family: "Noto Sans Thai";
    font-size: 18px;
    line-height: 1.6;
}

.discover-menu-right {
    flex: 0 0 65%;
    padding: 64px 128px 64px 64px;
    background-color: #ffffff;
}

.discover-menu-heading {
    color: #333;
    font-family: "Noto Sans Thai";
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 32px;
}

.discover-assessment-list {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.discover-assessment-card {
    display: flex;
    align-items: center;
    padding: 16px;
    background: #fdfdfb;
    border: 1px solid #f0efeb;
    border-radius: 16px;
    text-decoration: none !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    width: 100%;
    max-width: 475px;
    min-height: 112px;
}

    .discover-assessment-card:hover {
        background: #ffffff;
        box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
        transform: translateY(-2px);
        border-color: #e5f4ec;
    }

.assessment-card-icon {
    background-color: #e5f4ec;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 16px;
    flex-shrink: 0;
}

    .assessment-card-icon img,
    .assessment-card-icon svg {
        width: 80px;
        height: 80px;
    }

.assessment-card-text {
    flex-grow: 1;
}

.assessment-card-title {
    color: #333;
    font-family: "Noto Sans Thai";
    font-size: 19px;
    font-weight: 700;
    margin-bottom: 6px;
}

.assessment-card-desc {
    color: #777;
    font-family: "Noto Sans Thai";
    font-size: 15px;
    margin-bottom: 0;
    line-height: 1.4;
}

.assessment-card-arrow {
    color: #ccc;
    font-size: 20px;
    margin-left: 16px;
    transition: all 0.3s ease;
}

.discover-assessment-card:hover .assessment-card-arrow {
    color: #00682f;
    transform: translateX(4px);
}

@media (max-width: 1400px) {
    .discover-menu-left {
        padding-left: 64px;
    }

    .discover-menu-right {
        padding-right: 64px;
    }
}

@media (max-width: 991.98px) {
    .discover-mega-menu-wrapper {
        flex-direction: column !important;
        min-height: auto;
    }

    .discover-menu-left,
    .discover-menu-right {
        flex: 0 0 100%;
        padding: 32px 16px !important;
    }

    .discover-menu-title {
        font-size: 26px;
        margin-bottom: 16px;
    }

    .discover-menu-subtitle {
        font-size: 16px;
    }

    .discover-menu-heading {
        font-size: 20px;
        margin-bottom: 20px;
    }

    .assessment-card-icon {
        width: 48px;
        height: 48px;
        margin-right: 16px;
    }

    .assessment-card-title {
        font-size: 17px;
    }

    .discover-assessment-card {
        padding: 16px;
    }
}
/*25feb* navbar dropdown/ 

/*23feb*/
.small-card .small-card-image-link {
    display: block;
    flex-shrink: 0;
    align-self: center;
}

.small-card .health-insight-image {
    object-fit: cover;
    width: 240px;
    height: 160px;
    aspect-ratio: 3 / 2;
    border-radius: 16px;
}

header.unbranded-header .navbar {
    height: 80px !important;
}

/* .breadcrumb {
  padding: 48px 0 60px !important;
} */

.nutrient-explore-btn {
    color: #fff !important;
    font-family: "Noto Sans Thai";
    font-size: 13px;
    font-style: normal;
    font-weight: 700;
    line-height: 120%;
    letter-spacing: 0.13px;
    text-transform: uppercase;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 24px;
    transition: opacity 0.3s ease;
}

img.banner-slide-image,
video.banner-slide-video {
    width: 100%;
    height: auto;
    min-height: 100% !important;
    max-height: 664px;
    object-fit: cover;
    position: absolute;
    object-position: center;
}

@media (max-width: 660px) {
    section.brain-challenge-section {
        padding: 142px 6px 67px 6px !important;
    }
}
/*0203*/
@media (max-width: 320px) {
    .nutrient-icons {
        gap: 0px !important; /* Removes any spacing between the icons */
    }

    a.discover-card {
        flex-direction: column !important; /* Changes the layout direction to column */
    }

    .nutrient-explore-btn {
        margin-bottom: 34px;
    }
}

.brain-assessment-result-actions {
    display: flex;
    justify-content: center;
    gap: 16px;
    width: 100%;
}

.btn-share-result {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    padding: 12px 32px;
    border-radius: 24px;
    border: 1px solid #00682f;
    background: transparent;
    color: #00682f;
    font-family: inherit;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.3s ease;
}

.btn-solid-green {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    padding: 12px 32px;
    border-radius: 24px;
    border: 1px solid #00682f;
    background: #00682f;
    color: #ffffff !important;
    font-family: inherit;
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.3s ease;
}

    .btn-solid-green:hover {
        background: #004d22 !important;
    }

.brain-assessment-retry-text {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: inherit;
    font-size: 14px;
    color: #424242;
    font-weight: 400;
    justify-content: center;
}

.btn-retry-link {
    color: #00682f !important;
    font-family: inherit;
    font-weight: 700;
    text-decoration: none;
    transition: color 0.3s ease;
}

    .btn-retry-link:hover {
        color: #004d22 !important;
        text-decoration: underline;
    }

.un-carousal-card-footer {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 8px;
}


.un-carousal-card-footer-item {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    width: 100%;
}



span.un-carousal-card-benefit {
    max-width: 145px;
}
/*0203*/
/*1702226*/
/* Unbranded Header Styles */

/* Unbranded Header Styles */

/* Discover Mega Menu Custom Styles */
.discover-mega-menu-wrapper {
    display: flex !important;
    padding: 0 !important;
    background: #ffffff;
    min-height: 500px;
}

.hero-banner-section {
    background-color: #004d22;
}

.discover-menu-left {
    flex: 0 0 35%;
    background-color: #f8f7f5;
    padding: 64px 32px 64px 128px;
    display: flex;
    flex-direction: column;
}

.discover-menu-title {
    color: #333;
    font-family: "Noto Sans Thai";
    font-size: 32px;
    font-weight: 700;
    line-height: 1.3;
    margin-bottom: 24px;
}

.discover-menu-subtitle {
    color: #666;
    font-family: "Noto Sans Thai";
    font-size: 18px;
    line-height: 1.6;
}

.discover-menu-right {
    flex: 0 0 65%;
    padding: 64px 128px 64px 64px;
    background-color: #ffffff;
}

.discover-menu-heading {
    color: #333;
    font-family: "Noto Sans Thai";
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 32px;
}

.discover-assessment-list {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.discover-assessment-card {
    display: flex;
    align-items: center;
    padding: 16px;
    background: #fdfdfb;
    border: 1px solid #f0efeb;
    border-radius: 16px;
    text-decoration: none !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    width: 100%;
    max-width: 475px;
    min-height: 112px;
}

    .discover-assessment-card:hover {
        background: #ffffff;
        box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
        transform: translateY(-2px);
        border-color: #e5f4ec;
    }

.assessment-card-icon {
    background-color: #e5f4ec;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 16px;
    flex-shrink: 0;
}

    .assessment-card-icon img,
    .assessment-card-icon svg {
        width: 80px;
        height: 80px;
    }

.assessment-card-text {
    flex-grow: 1;
}

.assessment-card-title {
    color: #333;
    font-family: "Noto Sans Thai";
    font-size: 19px;
    font-weight: 700;
    margin-bottom: 6px;
}

.assessment-card-desc {
    color: #777;
    font-family: "Noto Sans Thai";
    font-size: 15px;
    margin-bottom: 0;
    line-height: 1.4;
}

.assessment-card-arrow {
    color: #ccc;
    font-size: 20px;
    margin-left: 16px;
    transition: all 0.3s ease;
}

.discover-assessment-card:hover .assessment-card-arrow {
    color: #00682f;
    transform: translateX(4px);
}


@media (max-width: 1400px) {
    .discover-menu-left {
        padding-left: 64px;
    }

    .discover-menu-right {
        padding-right: 64px;
    }
}

@media (max-width: 991.98px) {
    .discover-mega-menu-wrapper {
        flex-direction: column !important;
        min-height: auto;
    }

    .discover-menu-left,
    .discover-menu-right {
        flex: 0 0 100%;
        padding: 32px 16px !important;
    }

    .discover-menu-title {
        font-size: 26px;
        margin-bottom: 16px;
    }

    .discover-menu-subtitle {
        font-size: 16px;
    }

    .discover-menu-heading {
        font-size: 20px;
        margin-bottom: 20px;
    }

    .assessment-card-icon {
        width: 48px;
        height: 48px;
        margin-right: 16px;
    }

    .assessment-card-title {
        font-size: 17px;
    }

    .discover-assessment-card {
        padding: 16px;
    }
}
/*25feb* navbar dropdown/ 

/*23feb*/
.small-card .small-card-image-link {
    display: block;
    flex-shrink: 0;
    align-self: center;
}

.small-card .health-insight-image {
    object-fit: cover;
    width: 240px;
    height: 160px;
    aspect-ratio: 3 / 2;
    border-radius: 16px;
}

header.unbranded-header .navbar {
    height: 80px !important;
}

/* .breadcrumb {
  padding: 48px 0 60px !important;
} */

.nutrient-explore-btn {
    color: #fff !important;
    font-family: "Noto Sans Thai";
    font-size: 13px;
    font-style: normal;
    font-weight: 700;
    line-height: 120%;
    letter-spacing: 0.13px;
    text-transform: uppercase;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 24px;
    transition: opacity 0.3s ease;
}

img.banner-slide-image,
video.banner-slide-video {
    width: 100%;
    height: auto;
    min-height: 100% !important;
    max-height: 664px;
    object-fit: cover;
    position: absolute;
    object-position: center;
}

@media (max-width: 660px) {
    section.brain-challenge-section {
        padding: 42px 6px 67px 6px !important;
    }
}
/*0203*/
@media (max-width: 320px) {
    .nutrient-icons {
        gap: 0px !important; /* Removes any spacing between the icons */
    }

    a.discover-card {
        flex-direction: column !important; /* Changes the layout direction to column */
    }

    .nutrient-explore-btn {
        margin-bottom: 34px;
    }
}

.brain-assessment-result-actions {
    display: flex;
    justify-content: center;
    gap: 16px;
    width: 100%;
}

.btn-share-result {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    padding: 12px 32px;
    border-radius: 24px;
    border: 1px solid #00682f;
    background: transparent;
    color: #00682f;
    font-family: inherit;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.3s ease;
}

.btn-solid-green {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    padding: 12px 32px;
    border-radius: 24px;
    border: 1px solid #00682f;
    background: #00682f;
    color: #ffffff !important;
    font-family: inherit;
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.3s ease;
}

    .btn-solid-green:hover {
        background: #004d22 !important;
    }

.brain-assessment-retry-text {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: inherit;
    font-size: 14px;
    color: #424242;
    font-weight: 400;
    justify-content: center;
}

.btn-retry-link {
    color: #00682f !important;
    font-family: inherit;
    font-weight: 700;
    text-decoration: none;
    transition: color 0.3s ease;
}

    .btn-retry-link:hover {
        color: #004d22 !important;
        text-decoration: underline;
    }
/*0203*/
/*1702226*/
/* Unbranded Header Styles */

/* Unbranded Header Styles */
.unbranded-header {
    background-color: #d9c659; /* Golden yellow */
    padding: 0;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1003;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    transform: translateY(0);
    transition: transform 0.3s ease-in-out;
}

    .unbranded-header.header-hidden {
        transform: translateY(-100%);
    }

.unbranded-hero .swiper-brand {
    min-height: 100%;
}

.unbranded-header .navbar {
    padding: 1rem 0;
}

    .unbranded-header .container-fluid,
    .unbranded-header .navbar .container {
        overflow: visible;
    }

.unbranded-header .navbar-brand {
    display: flex;
    align-items: center;
}

.unbranded-logo {
    height: 40px;
    width: auto;
    object-fit: contain;
}

.unbranded-header .navbar-nav {
    display: inline-flex;
    height: 80px;
    padding: 40px 0;
    align-items: flex-start;
}

.unbranded-header .nav-link {
    color: #ffffff !important;
    transition: opacity 0.3s ease;
    font-family: "Noto Sans Thai";
    font-size: 14px;
    font-style: normal;
    font-weight: 700;
    line-height: 150%;
}

    .unbranded-header .nav-link:hover,
    .unbranded-header .nav-link:focus {
        color: #ffffff !important;
        opacity: 0.8;
    }

    .unbranded-header .nav-link.dropdown-toggle::after {
        border-top-color: #ffffff;
        margin-left: 0.5rem;
    }

.unbranded-header .search-link {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

    .unbranded-header .search-link i {
        font-size: 1.2rem;
    }

/* Dropdown Menu Styles */
.unbranded-header .dropdown-menu {
    background-color: #ffffff;
    border: none;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    border-radius: 4px;
    margin-top: 0.5rem;
    padding: 0.5rem 0;
}

.unbranded-header .dropdown-item {
    color: #333333;
    padding: 0.5rem 1.5rem;
    transition: background-color 0.3s ease;
}

    .unbranded-header .dropdown-item:hover {
        background-color: #f8f9fa;
        color: #333333;
    }

/* Full-width mega-menu (Explore By & Discover Yourself) */
.unbranded-header .dropdown-mega .dropdown-menu {
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    top: 80px !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0;
    border-radius: 0;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.15);
    border-top: 1px solid rgba(0, 0, 0, 0.06);
    /* dropdown effect: fade + slide down */
    opacity: 0;
    transform: translateY(-16px);
    visibility: hidden;
    transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s ease, box-shadow 0.25s ease;
    pointer-events: none;
}

    .unbranded-header .dropdown-mega .dropdown-menu.show {
        opacity: 1;
        transform: translateY(0);
        visibility: visible;
        pointer-events: auto;
    }

.bg-white-grey {
    background: linear-gradient(270deg, #f8f7f5 50%, #ffffff 50%) !important;
}

.mega-menu-explore,
.mega-menu-discover {
    padding: 0 !important;
}

.mega-menu-inner.container {
    padding: 64px 24px;
}

.mega-menu-inner {
    /* display: flex; */
    flex-direction: row;
    padding: 24px 32px 28px;
    gap: 40px;
}

h3.mega-menu-column-title {
    color: #333;
    font-family: "Noto Sans Thai";
    font-size: 23px;
    font-style: normal;
    font-weight: 700;
    line-height: 150%;
    margin-bottom: 24px;
}

ul.unbranded-mega-menu-list {
    display: flex;
    min-width: 256px;
    max-width: 256px;
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
}

    ul.unbranded-mega-menu-list li a {
        display: flex;
        min-width: 256px;
        max-width: 248px;
        padding: 8px;
        align-items: center;
        gap: 16px;
        color: #333;
        font-family: "Noto Sans Thai";
        font-size: 16px;
        font-style: normal;
        font-weight: 400;
        line-height: 150%;
    }

span.unbranded-mega-menu-icon {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.bg-effect {
    transition: background 0.3s ease;
}

.un-menu-hvr-bg-green:hover {
    background: #e5f4ec;
}

.un-menu-hvr-bg-gold:hover {
    background: #fff6c6;
}

.un-menu-hvr-bg-red:hover {
    background: #ffe8ef;
}

.un-menu-hvr-bg-purple:hover {
    background: #fef3ff;
}

.un-menu-hvr-bg-orange:hover {
    background: #ffe0b7;
}

.un-menu-hvr-bg-blue:hover {
    background: #e8f7ff;
}

.un-menu-hvr-bg-light-orange:hover {
    background: #fff4e5;
}

.un-menu-hvr-bg-light-green:hover {
    background: #e5f4ec;
}

.un-menu-hvr-bg-pomo:hover {
    background: #fff1f2;
}

.un-menu-hvr-bg-light-gold:hover {
    background: #fff6c6;
}

.mar-left-10 {
    margin-left: 10px !important;
}

li.un-menu-item {
    display: flex;
    padding: 8px 16px 8px 0;
    align-items: center;
    min-height: 64px;
    gap: 8px;
    flex-shrink: 0;
    align-self: stretch;
    border-bottom: 0.5px solid #d3cec5;
}

li.un-menu-item-expandable {
    flex-direction: column;
    align-items: stretch;
    min-height: 0;
    padding: 0 16px 0 0;
}

.un-menu-item-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    min-height: 64px;
    padding: 8px 0;
    gap: 8px;
    background: none;
    border: none;
    cursor: pointer;
    font-family: "Noto Sans Thai", sans-serif;
    font-size: 16px;
    font-weight: 500;
    color: #424242;
    text-align: left;
    transition: color 0.2s ease;
}

    .un-menu-item-toggle:hover {
        color: #00682f;
    }

    .un-menu-item-toggle .un-menu-item-label {
        flex: 1;
    }

.un-menu-chevron-down {
    font-size: 14px;
    color: #757575;
    transition: transform 0.25s ease;
}

li.un-menu-item-expandable.is-open .un-menu-chevron-down {
    transform: rotate(180deg);
}

.un-menu-sub {
    list-style: none;
    padding: 0;
    margin: 0 0 8px 0;
    border-radius: 8px;
    overflow: hidden;
    max-height: 0;
    opacity: 0;
    transition: max-height 0.3s ease, opacity 0.2s ease;
    background: rgba(232, 228, 220, 0.2);
}

li.un-menu-item-expandable.is-open .un-menu-sub {
    max-height: 240px;
    opacity: 1;
}

.un-menu-sub-item {
    border-bottom: 0.5px solid rgba(0, 0, 0, 0.06);
}

    .un-menu-sub-item:last-child {
        border-bottom: none;
    }

    .un-menu-sub-item a {
        display: block;
        padding: 10px 14px 10px 20px;
        font-family: "Noto Sans Thai", sans-serif;
        font-size: 14px;
        font-weight: 500;
        color: #424242;
        text-decoration: none;
        transition: color 0.2s ease, background 0.2s ease;
    }

        .un-menu-sub-item a:hover {
            color: #00682f;
        }

ul.un-sec-menu-items {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

li.un-menu-item:hover > a {
    color: #00682f !important;
    font-family: "Noto Sans Thai";
    font-size: 16px;
    font-style: normal;
    font-weight: 700;
    line-height: 150%;
}

.br-8 {
    border-radius: 8px;
}

.br-16 {
    border-radius: 16px;
}

.br-24 {
    border-radius: 24px;
}

.br-32 {
    border-radius: 32px;
}

/* Mobile Toggle Button */
.unbranded-header .navbar-toggler {
    border: 2px solid #ffffff;
    padding: 0.25rem 0.5rem;
}

.unbranded-header .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 1%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

.unbranded-header .navbar-toggler:focus {
    box-shadow: 0 0 0 0.25rem rgba(255, 255, 255, 0.25);
}

/* Body padding to account for fixed header */

/* Page Stick Menu Styles */
.page-stick-menu {
    position: relative;
    z-index: 999;
    transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
}

.page-stick-menu-top {
    display: flex;
    padding: 0 128px;
    align-items: center;
    width: 100%;
    background: #f8f7f5;
    box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.04);
    transition: opacity 0.3s ease-in-out, max-height 0.3s ease-in-out, margin 0.3s ease-in-out;
    overflow: hidden;
}

.page-stick-menu-bottom {
    background-color: #f5f5f0; /* Off-white/light beige */
    padding: 0;
    width: 100%;
    transition: transform 0.3s ease-in-out;
}

.page-stick-menu.sticky {
    position: fixed;
    left: 0;
    right: 0;
    z-index: 1001;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    transition: top 0.3s ease-in-out, transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
    animation: slideDown 0.3s ease-in-out;
}

    .page-stick-menu.sticky .page-stick-menu-top {
        opacity: 0;
        max-height: 0;
        margin: 0;
        padding: 0;
        overflow: hidden;
    }

/* Smooth transition when removing sticky */
.page-stick-menu:not(.sticky) {
    transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
}

    .page-stick-menu:not(.sticky) .page-stick-menu-top {
        opacity: 1;
        max-height: 100px;
        transition: opacity 0.3s ease-in-out, max-height 0.3s ease-in-out, margin 0.3s ease-in-out, padding 0.3s ease-in-out;
    }

@keyframes slideDown {
    from {
        transform: translateY(-100%);
        opacity: 0;
    }

    to {
        transform: translateY(0);
        opacity: 1;
    }
}

.page-stick-nav {
    display: flex;
    align-items: center;
    gap: 1.5rem;
}

.explore-label {
    display: flex;
    padding: 8px 32px 8px 0;
    justify-content: center;
    align-items: center;
    gap: 8px;
    color: #000;
    font-family: "Noto Sans Thai";
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: 150%;
    letter-spacing: 0.4px;
}

.page-stick-nav-links {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
    gap: 2rem;
    flex-wrap: wrap;
    align-items: center;
}

.page-stick-nav-link {
    position: relative;
    transition: color 0.3s ease;
    display: flex;
    padding: 8px 24px;
    justify-content: center;
    align-items: center;
    gap: 8px;
    height: 60px;
    color: #333 !important;
    font-family: "Noto Sans Thai";
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: 150%;
    letter-spacing: 0.4px;
}

    .page-stick-nav-link:hover {
        color: #2d5016;
    }

    .page-stick-nav-link.active {
        color: #00682f !important;
        font-family: "Noto Sans Thai";
        font-size: 18px;
        font-style: normal;
        font-weight: 400;
        line-height: 150%;
        letter-spacing: 0.4px;
    }

        .page-stick-nav-link.active::after {
            content: "";
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            height: 2px;
            background-color: #2d5016;
        }

.needs-section {
    display: flex;
    padding: 80px 0 40px 0;
    align-items: center;
    gap: 40px;
    background: #fff;
}

.needs-section-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}

    .needs-section-content h2 {
        color: #333;
        text-align: center;
        font-family: "Noto Sans Thai";
        font-size: 32px;
        font-style: normal;
        font-weight: 600;
        line-height: 150%;
        letter-spacing: 0.32px;
        margin-bottom: 0px;
    }

    .needs-section-content p {
        color: #333;
        text-align: center;
        font-family: "Noto Sans Thai";
        font-size: 18px;
        font-style: normal;
        font-weight: 400;
        line-height: 150%;
        letter-spacing: 0.4px;
        margin-bottom: 0px;
    }

.needs-section-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 40px;
}

/* Wellness Icons Grid */
.needs-items-grid {
    justify-content: center;
    flex-wrap: wrap;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 64px;
}

.needs-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    text-align: center;
    flex: 0 0 auto;
}

.needs-item-icon {
    display: flex;
    justify-content: center;
    align-items: center;
}

    .needs-item-icon .icon-circle {
        width: 136px;
        transition: transform 0.3s ease, box-shadow 0.3s ease;
        display: flex;
        height: 136px;
        padding: 24px;
        justify-content: center;
        align-items: center;
        gap: 10px;
        align-self: stretch;
        border-radius: 200px;
        border: #f8f7f5;
        background: #f8f7f5;
    }

        .needs-item-icon .icon-circle svg {
            width: 80px;
            height: 80px;
            object-fit: contain;
        }

.wellness-icon {
    width: 60px;
    height: 60px;
    object-fit: contain;
}

.needs-item-label {
    color: #333333;
    font-family: "Noto Sans Thai", sans-serif;
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin: 0;
    margin-top: 16px; /*0203*/
    line-height: 1.4;
}

.clubs-section {
    display: flex;
    padding: 40px 128px 80px 128px;
    flex-direction: column;
    align-items: center;
    gap: 40px;
}

.clubs-section-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}

    .clubs-section-content h4 {
        color: #9f8f36;
        text-align: center;
        font-family: "Noto Sans Thai";
        font-size: 16px;
        font-style: normal;
        font-weight: 700;
        line-height: 120%;
        letter-spacing: 0.8px;
        text-transform: uppercase;
        margin-bottom: 0px;
    }

    .clubs-section-content h1 {
        color: #333;
        text-align: center;
        font-family: "Noto Sans Thai";
        font-size: 32px; /*as per figma*/
        font-style: normal;
        font-weight: 600; /*as per figma*/
        line-height: 150%;
        letter-spacing: 0.32px;
        margin-bottom: 0px;
    }

.clubs-section-container {
    display: flex;
    flex-direction: column;
    gap: 40px;
}

.clubs-section-item {
    position: relative;
    overflow: hidden;
    border-radius: 16px;
}

    .clubs-section-item video {
        width: 100%;
        border-radius: 16px;
        min-height: 400px;
        max-height: 400px;
        object-fit: cover;
        display: block;
    }

    .clubs-section-item img {
        width: 100%;
        border-radius: 16px;
        min-height: 400px;
        max-height: 400px;
        object-fit: cover;
    }

/* Green overlay for video section */
.green-bg-video-section {
    position: relative;
}

    .green-bg-video-section .red-overlay {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 1;
        transition: opacity 0.3s ease;
        border-radius: 16px;
        border-radius: 16px;
        background: linear-gradient( 61deg, var(--BBN-50, rgba(255, 67, 75, 0.95)) 28.87%, var(--BBN-100, rgba(89, 0, 4, 0.95)) 122.5% ), linear-gradient( 0deg, rgba(191, 25, 32, 0.4) 0%, rgba(191, 25, 32, 0.4) 100% ), url(<path-to-image>) lightgray 50% / cover no-repeat;
        background-blend-mode: multiply, normal, normal;
        opacity: 0.8;
    }

    .green-bg-video-section .green-overlay {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 1;
        transition: opacity 0.3s ease;
        border-radius: 16px;
        /* background:
    linear-gradient(
      61deg,
      var(--BEC-50, #99d3b3) 28.87%,
      var(--BEC-100, #00682f) 122.5%
    ),
    linear-gradient(0deg, rgba(0, 104, 47, 0.8) 0%, rgba(0, 104, 47, 0.8) 100%); */
        background: linear-gradient( 0deg, rgba(2, 95, 29, 0.8) 0%, rgba(2, 95, 29, 0.8) 100% );
        background-blend-mode: multiply, normal;
        /* opacity: 0.8; */
    }

.unbranded-swiper .revamp-sub-persona-header {
    margin-bottom: 48px;
    padding: 60px 15px 0px;
    background: linear-gradient(277deg, var(--Gold-Logo-Color-10, rgba(255, 253, 241, 0.20)) 24.04%, var(--Gold-Logo-Color-60, rgba(188, 170, 70, 0.20)) 84.9%) !important;
    background-blend-mode: multiply;
    mix-blend-mode: multiply;
}

/* Mobile: persona cards show peek of next card */
@media (max-width: 639.98px) {
    .unbranded-swiper .personaSwiper {
        padding: 0 16px 40px;
        overflow: visible;
    }

        .unbranded-swiper .personaSwiper .swiper-wrapper {
            padding-left: 0;
        }
}

.unbranded-swiper .timeline-line {
    position: absolute;
    bottom: 0px;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(45deg, #d3cec5, transparent);
    z-index: 0;
}

.unbranded-swiper .timeline-dot {
    top: 25px;
}

.green-bg-video-section:hover .green-overlay {
    opacity: 0.6;
}

/* Logo centered in video section */
.green-bg-video-section .video-logo {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 4;
    transition: opacity 0.3s ease, visibility 0.3s ease, top 0.3s ease;
    pointer-events: none;
}

.green-bg-video-section:hover .video-logo svg {
    width: 167.835px;
    height: 120px;
    flex-shrink: 0;
    aspect-ratio: 167.84 / 120;
    transition: all 0.3s ease;
}

.green-bg-video-section .video-logo svg {
    width: 223.78px;
    height: 159.999px;
    flex-shrink: 0;
    aspect-ratio: 223.78/160;
    transition: all 0.3s ease;
}

.green-bg-video-section .video-logo img {
    width: auto;
    height: 60px;
    min-height: auto;
    max-height: none;
    object-fit: contain;
}

/* Content that shows on hover */
.green-bg-video-section .clubs-section-item-content {
    position: absolute;
    top: 60%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    padding: 2rem;
    z-index: 3;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    text-align: center;
    color: #fff;
    width: 100%;
}

.green-bg-video-section:hover .clubs-section-item-content {
    opacity: 1;
    visibility: visible;
    transition: all 0.3s ease;
}

.green-bg-video-section:hover .video-logo {
    opacity: 1;
    visibility: visible;
    top: 25%;
    transition: all 0.3s ease;
}

.green-bg-video-section .clubs-section-item-content h3 {
    color: #fff;
    font-family: "Noto Sans Thai";
    font-size: 24px;
    font-weight: 600;
    margin-bottom: 1rem;
}

.green-bg-video-section .clubs-section-item-content p {
    margin-bottom: 1.5rem;
    color: #fff;
    text-align: center;
    font-family: "Noto Sans Thai";
    font-size: 18px;
    font-style: normal;
    font-weight: 600;
    line-height: 150%;
    letter-spacing: 0.52px;
}

.green-bg-video-section .clubs-section-item-content .cta-link {
    display: flex;
    width: 40px;
    height: 40px;
    padding: 8px;
    justify-content: center;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
    border-radius: 24px;
    background: #fff;
    color: #00682f !important;
}

    .green-bg-video-section .clubs-section-item-content .cta-link:hover {
        opacity: 0.8;
    }

img.brain-active-club-image {
    width: 100%;
    max-width: 223.78px;
    height: 160px;
    aspect-ratio: 200 / 143;
}

button.un-menu-item-toggle {
    margin-bottom: -16px;
}

.inner-unbranded-banner
.swiper-pagination.swiper-pagination-clickable.swiper-pagination-bullets.swiper-pagination-horizontal {
    text-align: center;
    justify-content: center;
    display: flex;
}

section.needs-section.inner-need .needs-section-header {
    max-width: 735px;
}

.inner-need .needs-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    text-align: center;
    flex: 0 0 auto;
    max-width: 180px;
}

.inner-need .needs-item-label {
    color: #333333;
    font-family: "Noto Sans Thai", sans-serif;
    font-size: 15px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin: 0;
    line-height: 1.4;
}

.un-multi-tab {
    background: linear-gradient(0deg, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.2) 100%), var(--BEC-30, #cce9d9);
    background-blend-mode: color-dodge, normal;
    padding: 40px 0;
}

.un-multi-tab-card {
    background: none;
    border-radius: 0;
    margin: 0;
}

.un-multi-tab-nav {
    display: flex;
    gap: 8px;
    padding: 0 24px;
    padding-top: 48px;
    position: sticky;
    top: 0;
    z-index: 10;
    background: #cde9d9;
    border-radius: 0;
    box-shadow: none;
}

.un-multi-tab-nav-btn {
    border: none;
    color: #2e7d32;
    font-size: 1rem;
    font-weight: 500;
    transition: background 0.2s, color 0.2s;
    display: flex;
    height: 64px;
    padding: 24px;
    justify-content: center;
    align-items: center;
    gap: 10px;
    border-radius: 16px 16px 0 0;
    border-top: 1px solid var(--Black-and-White-White, #fff);
    border-right: 1px solid var(--Black-and-White-White, #fff);
    border-left: 1px solid var(--Black-and-White-White, #fff);
    background: linear-gradient( 180deg, var(--BEC-20, #e5f4ec) 95.18%, var(--BEC-30, #cce9d9) 95.19% );
}

    .un-multi-tab-nav-btn:hover {
        background: rgba(180, 230, 180, 0.6);
        color: #1b5e20;
    }

    .un-multi-tab-nav-btn.is-active {
        color: #2e7d32;
        font-weight: 600;
        box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.04);
        display: flex;
        height: 64px;
        padding: 24px;
        justify-content: center;
        align-items: center;
        gap: 10px;
        border-radius: 16px 16px 0 0;
        border-top: 1px solid var(--Black-and-White-White, #fff);
        border-right: 1px solid var(--Black-and-White-White, #fff);
        border-left: 1px solid var(--Black-and-White-White, #fff);
        background: var(--BlackandWhite-SmokeGray-White, #fff);
    }

.un-multi-tab-panel {
    scroll-margin-top: 80px;
    display: flex;
    /* padding: 80px 48px 40px 48px; */
    justify-content: center;
    align-items: flex-start;
    gap: 32px;
    align-self: stretch;
    border-radius: 24px 24px 0 0;
    background: white;
}

    .un-multi-tab-panel + .un-multi-tab-panel {
        margin-top: 0px;
        padding-top: 48px;
        margin-top: 8px;
        border-radius: 0px;
    }

        .un-multi-tab-panel + .un-multi-tab-panel + .un-multi-tab-panel {
            margin-top: 0px;
            padding-top: 48px;
            margin-top: 8px;
            border-radius: 0px 0px 24px 24px;
        }

.un-multi-tab-body {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 32px;
    align-items: center;
    padding: 80px 48px 40px 48px;
}

.un-multi-tab-number {
    margin: 0 0 12px 0;
    color: #333;
    font-family: "Noto Sans Thai";
    font-size: 180px;
    font-style: normal;
    font-weight: 600;
    line-height: 150%;
}

.un-tab1-right {
    background: #e5f4ec !important;
    padding: 80px 48px 40px 40px;
    height: 100%;
}

.un-multi-tab-title {
    margin-bottom: 8px;
    color: #333;
    font-family: "Noto Sans Thai";
    font-size: 32px;
    font-style: normal;
    font-weight: 600;
    line-height: 150%;
    letter-spacing: 0.32px;
}

.un-multi-tab-desc {
    margin: 0;
    color: #333;
    font-family: "Noto Sans Thai";
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: 150%;
    letter-spacing: 0.4px;
    max-width: 400px;
}

.un-multi-tab-media {
    position: relative;
    border-radius: 16px;
    overflow: hidden;
    aspect-ratio: 4/3;
}

    .un-multi-tab-media img {
        width: 100%;
        height: 100%;
        object-fit: contain;
        display: block;
    }

.un-multi-tab-media-caption {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 24px;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.6), transparent);
    color: #fff;
    font-size: 1.5rem;
    font-weight: 600;
    line-height: 1.3;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
}

/* Tab 3: two stacked cards (เช็คสุขภาพสมอง) */
.un-multi-tab-media.un-tab-3-seg {
    aspect-ratio: auto;
    overflow: visible;
}

.un-tab3-cards {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 32px;
    align-self: stretch;
}

.un-tab3-card {
    background: #33a768;
    border-radius: 16px;
    overflow: hidden;
    display: flex;
    padding: 8px 8px 16px 8px;
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
    align-self: stretch;
    min-width: 336px;
    max-width: 336px;
}

    .un-tab3-card:hover {
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
        transform: translateY(-2px);
    }

.un-tab3-card-img {
    border-radius: 12px;
}

    .un-tab3-card-img img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }

.un-tab3-card-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.un-tab3-card-title {
    color: #fff;
    font-family: "Noto Sans Thai";
    font-size: 22px;
    font-style: normal;
    font-weight: 500;
    line-height: 150%;
    letter-spacing: 0.46px;
}

.un-tab3-card-arrow {
    font-size: 18px;
    color: #fff;
    flex-shrink: 0;
}

/* Tab 1: header + two-column; right column sticky on scroll */
.un-tab1-panel {
    flex-direction: column;
    gap: 0;
}

.un-tab1-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: start;
    width: 100%;
    min-height: 0;
    margin-top: 48px;
    background: #fbfbfb;
}

.un-tab1-left {
    min-width: 0;
    position: sticky;
    top: 10%;
    padding: 80px 32px 40px 48px;
    background: #fbfbfb;
}

.un-tab1-title {
    color: #333;
    font-family: "Noto Sans Thai", sans-serif;
    font-size: 24px;
    font-weight: 600;
    line-height: 1.4;
    margin: 0 0 24px 0;
}

.un-tab1-food-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-bottom: 24px;
}

.un-tab1-food-card {
    background: none;
    border-radius: 16px;
    padding: 12px;
    text-align: center;
}

.un-tab1-food-img img {
    background: #e5f4ec;
    border-radius: 16px;
}

.un-tab1-food-img {
    border-radius: 12px;
    overflow: hidden;
    aspect-ratio: 1;
    margin-bottom: 8px;
    background: none;
}

    .un-tab1-food-img img {
        width: 100%;
        height: 100%;
        object-fit: contain;
        display: block;
    }

.un-tab1-food-name {
    font-family: "Noto Sans Thai", sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: #333;
    margin: 0 0 4px 0;
}

.un-tab1-food-ingredient {
    font-family: "Noto Sans Thai", sans-serif;
    font-size: 13px;
    color: #2e7d32;
    margin: 0;
}

.un-tab1-source p {
    color: #827c71;
    font-family: "Noto Sans Thai";
    font-size: 11px;
    font-style: normal;
    font-weight: 400;
    line-height: 150%;
}
/* .un-tab1-right {
    position: sticky;
    top: 80px;
    max-height: calc(100vh - 100px);
    overflow-y: auto;
    overflow-x: hidden;
    min-height: 0;
    padding-right: 8px;
} */

.un-tab1-right::-webkit-scrollbar {
    width: 6px;
}

.un-tab1-right::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.06);
    border-radius: 3px;
}

.un-tab1-right::-webkit-scrollbar-thumb {
    background: rgba(46, 125, 50, 0.4);
    border-radius: 3px;
}

.un-tab1-ingredient-cards {
    display: grid;
    gap: 20px;
    grid-template-columns: 1fr 1fr;
}

.un-tab1-ingredient-card {
    overflow: visible;
    min-height: 0;
    border-radius: 16px;
    border: 4px solid #eefaff;
    background: linear-gradient(0deg, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.2) 100%), var(--BEC-60, #66bd8e);
    display: flex;
    padding: 16px;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    flex: 1 0 0;
    background-blend-mode: darken;
}

.un-tab1-ingredient-card--blue {
    background: #1b5e20;
}

.un-tab1-ingredient-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 0px;
    width: 100%;
}

.un-tab1-ingredient-head--bar .un-tab1-ingredient-title {
    color: #fff;
    font-family: "Noto Sans Thai";
    font-size: 20px;
    font-style: normal;
    font-weight: 700;
    line-height: 150%;
    border-radius: 12px;
    border: 1px solid #fff;
    padding: 4px 12px;
}

.un-tab1-head-arrow {
    color: #fff;
    font-size: 16px;
    display: flex;
    padding: 10px;
    justify-content: center;
    align-items: center;
    gap: 10px;
    aspect-ratio: 1 / 1;
    width: 24px;
    height: 24px;
    flex-shrink: 0;
}

.un-tab1-ingredient-head--light-bar {
    background: rgba(0, 0, 0, 0.2);
    position: relative;
    padding-left: 28px;
}

    .un-tab1-ingredient-head--light-bar .un-tab1-ingredient-title {
        color: #c8e6c9;
    }

.un-tab1-ingredient-badge {
    position: absolute;
    left: -4px;
    top: 50%;
    transform: translateY(-50%);
    width: 24px;
    height: 24px;
    background: #1976d2;
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: "Noto Sans Thai", sans-serif;
}

.un-tab1-ingredient-head--orange .un-tab1-ingredient-title {
    color: #ffcc80;
}

.un-tab1-ingredient-head--blue-bar {
    background: #1976d2;
    border-radius: 12px;
    padding: 10px 14px;
    margin: 0 0 12px 0;
}

    .un-tab1-ingredient-head--blue-bar .un-tab1-ingredient-title {
        color: #fff;
        font-family: "Noto Sans Thai", sans-serif;
        font-size: 14px;
        font-weight: 600;
    }

.un-tab1-ingredient-desc {
    margin: 0 0 auto 0;
    padding: 0 0 12px 0;
    flex: 1;
    color: #fff;
    font-family: "Noto Sans Thai";
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 150%;
}

.un-tab1-ingredient-card--blue .un-tab1-ingredient-desc {
    color: rgba(255, 255, 255, 0.95);
}

.un-tab1-ingredient-icons {
    padding: 0;
    margin-top: auto;
    display: flex;
    padding-top: 16px;
    align-items: center;
    gap: 16px;
    align-self: stretch;
    border-top: 1px solid white;
}

.un-tab1-icon {
    width: 40px;
    height: 40px;
    aspect-ratio: 1 / 1;
}

.un-tab1-icon-brain {
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 5a3 3 0 1 0 0 6 3 3 0 0 0 0-6z'/%3E%3Cpath d='M9 14c-1.5 1-2.5 2.5-2.5 4.5 0 2.2 2 4 5 4s5-1.8 5-4c0-2-1-3.5-2.5-4.5'/%3E%3Cpath d='M12 2v2M4.93 4.93l1.41 1.41M2 12h2M4.93 19.07l1.41-1.41M12 22v-2M19.07 19.07l-1.41-1.41M22 12h-2M19.07 4.93l-1.41 1.41'/%3E%3C/svg%3E") center/contain no-repeat;
}

.un-tab1-icon-battery {
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='7' width='16' height='10' rx='2' ry='2'/%3E%3Cline x1='6' y1='11' x2='6' y2='13'/%3E%3Cline x1='10' y1='11' x2='10' y2='13'/%3E%3Cline x1='14' y1='11' x2='14' y2='13'/%3E%3Cpath d='M20 10v4'/%3E%3C/svg%3E") center/contain no-repeat;
}

.un-tab1-icon-lightbulb {
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 18h6'/%3E%3Cpath d='M10 22h4'/%3E%3Cpath d='M15 8a3 3 0 0 0-6 0c0 2 1 3 1.5 4.5L9 15h6l-1.5-2.5C14 11 15 10 15 8z'/%3E%3Cpath d='M12 2v1'/%3E%3C/svg%3E") center/contain no-repeat;
}

.un-tab1-icon-plant {
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 20h10'/%3E%3Cpath d='M10 20c5.5 0 8-3 8-8s-2.5-8-8-8-8 3-8 8 2.5 8 8 8z'/%3E%3Cpath d='M12 20v-8'/%3E%3Cpath d='M6 12c-3 0-4 2-4 4'/%3E%3Cpath d='M18 12c3 0 4 2 4 4'/%3E%3C/svg%3E") center/contain no-repeat;
}

.un-tab1-icon-person {
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 20c0-4 4-6 8-6s8 2 8 6'/%3E%3Cpath d='M12 12v2M11 16h2'/%3E%3C/svg%3E") center/contain no-repeat;
}

/* Nutrients Section Styles */
.unbranded-nutrient-section {
    padding: 80px 0;
    background: #fff;
}

.nutrient-section-header {
    text-align: center;
    margin-bottom: 60px;
}

.nutrient-section-title {
    color: #333;
    font-family: "Noto Sans Thai";
    font-size: 32px;
    font-style: normal;
    font-weight: 600;
    line-height: 150%;
    letter-spacing: 0.32px;
    margin-bottom: 16px;
}

.nutrient-section-subtitle {
    color: #666;
    font-family: "Noto Sans Thai";
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: 150%;
    letter-spacing: 0.4px;
    max-width: 800px;
    margin: 0 auto;
}

.nutrient-price-badge {
    display: inline-block;
    color: #fff;
    font-family: "Noto Sans Thai", sans-serif;
    font-size: 48px;
    font-weight: 700;
    font-style: normal;
    line-height: 1.2;
    padding: 20px 40px;
    margin: 20px 0;
    background: transparent;
    -webkit-text-stroke: 5px #00682f;
    -webkit-text-fill-color: #fff;
    position: relative;
    overflow: visible;
    letter-spacing: 2px;
}

.nutrient-cards-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    max-width: 1400px;
    margin: 0 auto;
}

.nutrient-card {
    position: relative;
    border-radius: 16px;
    overflow: hidden;
    min-height: 400px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    display: flex;
    padding: 24px;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}

.nutrient-card-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
    border-radius: 16px;
    opacity: 0.65;
}

.nutrient-card-content {
    height: 100%;
    position: relative;
    z-index: 2;
    display: flex;
    padding: 0;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
}

.nutrient-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}

.nutrient-card-title {
    color: #fff;
    font-family: "Noto Sans Thai";
    font-size: 24px;
    font-style: normal;
    font-weight: 600;
    line-height: 150%;
    margin-bottom: 108px;
}

.nutrient-icons {
    display: flex;
    gap: 12px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}

.nutrient-icon {
    font-size: 24px;
    opacity: 0.9;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
}

    .nutrient-icon img,
    .nutrient-icon svg {
        width: 100%;
        height: 100%;
        object-fit: contain;
        filter: brightness(0) invert(1);
    }

.nutrient-description {
    color: #fff;
    font-family: "Noto Sans Thai";
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 150%;
    margin-bottom: auto;
    opacity: 0.95;
}

a.nutrient-explore-btn {
    color: #fff !important;
    font-family: "Noto Sans Thai";
    font-size: 13px;
    font-style: normal;
    font-weight: 700;
    line-height: 120%;
    letter-spacing: 0.13px;
    text-transform: uppercase;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 24px;
    transition: opacity 0.3s ease;
}

    a.nutrient-explore-btn:hover {
        opacity: 0.8;
    }

    a.nutrient-explore-btn i {
        font-size: 14px;
        transition: transform 0.3s ease;
    }

    a.nutrient-explore-btn:hover i {
        transform: translateX(4px);
    }

.nutrient-explore-btn:hover {
    opacity: 0.8;
    color: #fff;
}

.nutrient-explore-btn i {
    font-size: 14px;
    transition: transform 0.3s ease;
}

.nutrient-explore-btn:hover i {
    transform: translateX(4px);
}

.needs-item.color-need-green:hover .icon-circle {
    border-radius: 200px;
    border: 4px solid #efeeee;
    background: #cce9d9;
    transition: all 0.3s ease;
}

.needs-item.color-need-yellow:hover .icon-circle {
    border-radius: 200px;
    border: 4px solid #efeeee;
    background: #fff6c6;
    transition: all 0.3s ease;
}

.needs-item.color-need-red:hover .icon-circle {
    border-radius: 200px;
    border: 4px solid #efeeee;
    background: #ffbed1;
    transition: all 0.3s ease;
}

.needs-item.color-need-pink:hover .icon-circle {
    border-radius: 200px;
    border: 4px solid #efeeee;
    background: #fbd9ff;
    transition: all 0.3s ease;
}

.needs-item.color-need-orange:hover .icon-circle {
    border-radius: 200px;
    border: 4px solid #efeeee;
    background: #ffe0b7;
    transition: all 0.3s ease;
}

.color-need-green:hover h3.needs-item-label {
    color: #034820 !important;
}

.color-need-yellow:hover h3.needs-item-label {
    color: #9f8f36 !important;
}

.color-need-red:hover h3.needs-item-label {
    color: #a10031 !important;
}

.color-need-pink:hover h3.needs-item-label {
    color: #7a2682 !important;
}

.color-need-orange:hover h3.needs-item-label {
    color: #c77000 !important;
}

.needs-item:hover > .icon-circle {
    transform: scale(1.05);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
}

/* Responsive Styles for Nutrients Section */
@media (max-width: 1200px) {
    .nutrient-cards-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 20px;
    }
}

@media (max-width: 991.98px) {
    .unbranded-nutrient-section {
        padding: 60px 0;
    }

    .nutrient-section-title {
        font-size: 28px;
    }

    .nutrient-section-subtitle {
        font-size: 16px;
    }

    .nutrient-cards-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }

    .nutrient-card {
        min-height: 380px;
    }

    .nutrient-card-content {
        padding: 28px 20px;
    }

    .brain-assessment-disclaimer {
        min-width: 100% !important;
    }
}

@media (max-width: 575.98px) {
    .unbranded-nutrient-section {
        padding: 40px 0;
    }

    .nutrient-section-header {
        margin-bottom: 40px;
    }

    .nutrient-section-title {
        font-size: 24px;
    }

    .nutrient-section-subtitle {
        font-size: 14px;
    }

    .nutrient-cards-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }

    .nutrient-card {
        max-height: 155px !important;
        max-width: 100% !important;
        min-height: 155px !important;
        min-width: 155px !important;
        background-position: center;
        background-size: cover;
    }

    .nutrient-icons svg {
        width: 32px;
        height: 32px;
        aspect-ratio: 1 / 1;
    }

    .nutrient-icons {
        display: grid;
        margin-bottom: 16px;
        grid-template-columns: repeat(3, 1fr);
        margin-top: 18px;
    }

    .nutrient-description,
    a.nutrient-explore-btn {
        display: none !important;
    }

    .nutrient-card-content {
        padding: 0px;
    }

    .nutrient-card-title {
        font-size: 20px;
        margin-bottom: 0px;
        margin-top: 55px;
    }

    .timeline-label {
        display: none;
    }

    .timeline-item {
        gap: 4px;
        min-width: 0px;
        opacity: 1 !important;
    }

    .timeline-icon {
        background-color: #efeeee;
    }

    .revamp-timeline {
        overflow-y: hidden;
        padding-bottom: 0px;
        position: relative;
        top: 30px;
        scrollbar-width: none;
    }

    /* .timeline-line {
    display: none;
  } */

    .featured-card,
    /* .timeline-line, */
    .health-insights-see-all,
    .health-insight-link {
        display: none !important;
    }

    .discover-card {
        width: auto !important;
        flex-direction: row !important;
    }

    .health-insight-card.small-card {
        flex-direction: column;
        min-width: 252px;
        justify-content: start !important;
    }

    .small-card .health-insight-content {
        padding: 20px 20px 20px 0px !important;
    }

    .health-insights-stacked {
        flex-direction: row !important;
        overflow-x: auto;
    }

    .nutrient-description {
        font-size: 14px;
    }

    .nutrient-explore-btn {
        font-size: 14px;
    }

    .unbranded-hero .swiper-slide .heading-hero.h2,
    .unbranded-hero .swiper-slide h2.heading-hero {
        font-size: 30px;
        padding: 0 24px;
        text-align: center;
    }

    .unbranded-hero .swiper-slide .para-hero.p,
    .unbranded-hero .swiper-slide p.para-hero {
        margin-bottom: 0px;
        position: relative;
        /* top: 30px; */
    }

    .timeline-line {
        transform: translateY(-50%);
        top: 40%;
    }

    .nutrient-description {
        font-size: 14px;
    }

    .nutrient-explore-btn {
        font-size: 14px;
    }

    .unbranded-hero .swiper-slide .heading-hero.h2,
    .unbranded-hero .swiper-slide h2.heading-hero {
        font-size: 30px;
        padding: 0 24px;
        text-align: center;
    }

    .unbranded-hero .swiper-slide .para-hero.p,
    .unbranded-hero .swiper-slide p.para-hero {
        font-size: 16px;
        padding: 0 24px;
        text-align: center;
        width: 100%;
    }

    .unbranded-hero .swiper-slide a.cta-hero {
        text-align: center !important;
        margin: 0px auto;
    }

    .unbranded-hero.hero-banner-section
    .swiper-pagination-bullets.swiper-pagination-horizontal {
        left: 0px;
        right: 0px;
        margin: 0px auto !important;
        width: 100% !important;
        text-align: center !important;
    }

    nav.page-stick-nav span.explore-label {
        display: none;
    }

    ul.page-stick-nav-links {
        display: flex;
        padding: 0 8px;
        align-items: center;
        width: 100%;
        flex-direction: row;
        flex-wrap: nowrap;
        gap: 0px !important;
        overflow-x: scroll;
        scrollbar-width: none;
    }

        ul.page-stick-nav-links li a {
            display: flex;
            height: 64px;
            padding: 8px 12px;
            justify-content: center;
            align-items: center;
            gap: 8px;
            font-size: 14px !important;
            font-style: normal;
            font-weight: 700 !important;
            line-height: 150%;
            min-width: 120px;
        }

    .clubs-section-item-content i {
        display: none;
    }

    .clubs-section-item img {
        width: 100%;
        border-radius: 16px;
        min-height: 227px;
        max-height: 100%;
        object-fit: cover;
        object-position: center;
    }

    .nutrient-explore-btn {
        display: none;
    }
}

/* Discovery Section */
.unbranded-discover-section {
    background: linear-gradient(260deg, #99d3b3 5.59%, #00682f 112.68%);
    padding: 80px 0;
}

.discover-text-column {
    display: flex;
    align-items: center;
    padding: 60px 40px;
}

.discover-text-content {
    color: #fff;
}

.discover-main-title {
    margin-bottom: 0px;
    color: #fff;
    font-family: "Noto Sans Thai";
    font-size: 48px;
    font-style: normal;
    font-weight: 600;
    line-height: 150%;
}

.discover-subtitle {
    margin-bottom: 4px;
    color: #fff;
    font-family: "Noto Sans Thai";
    font-size: 23px;
    font-style: normal;
    font-weight: 700;
    line-height: 150%;
}

.discover-description {
    color: #fff;
    max-width: 400px;
    font-family: "Noto Sans Thai";
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 150%;
    margin-top: 20px;
}

.discover-cards-column {
    display: flex;
    align-items: center;
    padding: 60px 40px;
}

.discover-cards-container {
    display: flex;
    gap: 24px;
    width: 100%;
    justify-content: space-between;
}

.discover-card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    display: flex;
    width: 272px;
    padding: 24px;
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
    align-self: stretch;
    border-radius: 16px;
    background: #f8f7f5;
    box-shadow: 0 3px 3px 0 rgba(0, 0, 0, 0.05);
}

    .discover-card:hover {
        transform: translateY(-4px);
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
    }

.discover-card-icon {
    display: flex;
    width: 120px;
    height: 120px;
    padding: 24px;
    justify-content: center;
    align-items: center;
    gap: 10px;
    border-radius: 200px;
    border: 4px solid #f8f7f5;
    background: #e5f4ec;
}

    .discover-card-icon svg {
        width: 80px;
        height: 80px;
        flex-shrink: 0;
        aspect-ratio: 1/1;
    }

.discover-card-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: #333;
    font-family: "Noto Sans Thai";
    font-size: 20px;
    font-style: normal;
    font-weight: 700;
    line-height: 150%;
    margin-bottom: 0px;
}

    .discover-card-title i {
        color: #000;
        font-size: 16px;
        margin-left: 8px;
        display: flex;
        width: 32px;
        height: 32px;
        padding: 10px;
        justify-content: center;
        align-items: center;
        gap: 10px;
        aspect-ratio: 1 / 1;
        border-radius: 40px;
        background: #fff;
    }

.discover-card-content {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.discover-card-description {
    margin: 0;
    margin-bottom: 24px;
    color: #333;
    font-family: "Noto Sans Thai";
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 150%;
}

/* Responsive Styles */
@media (max-width: 991.98px) {
    .unbranded-discover-section {
        padding: 60px 0;
    }

    .discover-text-column,
    .discover-cards-column {
        padding: 40px 20px;
    }

    .discover-cards-container,
    .revamp-sub-persona-header {
        display: flex;
        flex-direction: row;
        gap: 20px;
    }
}

@media (max-width: 767.98px) {
    .discover-cards-container,
    .revamp-sub-persona-header {
        flex-direction: column;
        gap: 20px;
    }

    .discover-main-title {
        font-size: 36px;
    }

    .discover-subtitle {
        font-size: 28px;
    }

    .discover-description {
        font-size: 16px;
    }
}

/* Health Insights Section */
.unbranded-health-insights-section {
    padding: 80px 0;
    background: linear-gradient(180deg, #fff 0%, var(--BEC-10, #f2f9f6) 116.98%);
}

.health-insights-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 48px;
    gap: 24px;
}

.health-insights-header-content {
    flex: 1;
}

.health-insights-main-title {
    margin-bottom: 12px;
    color: #333;
    font-family: "Noto Sans Thai";
    font-size: 32px;
    font-style: normal;
    font-weight: 600;
    line-height: 150%;
    letter-spacing: 0.32px;
}

.health-insights-subtitle {
    margin: 0;
    color: #333;
    font-family: "Noto Sans Thai";
    font-size: 20px;
    font-style: normal;
    font-weight: 400;
    line-height: 150%;
    letter-spacing: 0.4px;
}

.health-insights-see-all {
    font-family: "Noto Sans Thai", sans-serif;
    font-size: 16px;
    font-weight: 600;
    color: #333;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
    transition: color 0.3s ease;
}

    .health-insights-see-all:hover {
        color: #00682f;
    }

    .health-insights-see-all i {
        font-size: 14px;
    }

.health-insight-card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    padding-right: 12px;
}

.featured-card {
    height: 100%;
}

.health-insight-image-wrapper {
    position: relative;
    width: 100%;
    height: 300px;
    overflow: hidden;
}

.featured-card .health-insight-image-wrapper {
    height: 400px;
}

.health-insight-image {
    width: 100%;
    object-fit: cover;
    height: 430px;
    align-self: stretch;
    aspect-ratio: 3 / 2;
    border-radius: 16px;
}

.science-badge {
    position: absolute;
    top: 16px;
    right: 16px;
    padding: 2px 12px;
    color: #3bafd9;
    font-family: "Noto Sans Thai";
    font-size: 14px;
    font-style: normal;
    font-weight: 700;
    line-height: 150%;
    border-radius: 16px;
    background: #fffdf1;
}

.health-insight-content {
    padding: 24px;
}

.featured-card .health-insight-content {
    padding: 32px;
}

.health-category-tag {
    display: inline-block;
    padding: 2px 12px;
    border-radius: 16px;
    font-family: "Noto Sans Thai", sans-serif;
    font-size: 12px;
    font-weight: 700;
    color: #fff;
    margin-bottom: 16px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.brain-tag {
    padding: 2px 12px;
    border-radius: 16px;
    background: #009142;
}

.skin-tag {
    background: #f08700;
}

.joint-tag {
    background: #bcaa46;
}

.health-insight-title {
    color: #333;
    font-family: "Noto Sans Thai";
    font-size: 23px;
    font-style: normal;
    font-weight: 700;
    line-height: 150%;
    letter-spacing: 0.46px;
}

.small-card .health-insight-title {
    margin-bottom: 16px;
    color: #333;
    font-family: "Noto Sans Thai";
    font-size: 16px;
    font-style: normal;
    font-weight: 700;
    line-height: 150%;
}

.health-insight-description {
    color: #333;
    text-overflow: ellipsis;
    font-family: "Noto Sans Thai";
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 150%;
}

.health-insight-link {
    font-family: "Noto Sans Thai", sans-serif;
    font-size: 14px;
    font-weight: 700;
    color: #333;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: color 0.3s ease;
}

.br-1 {
    border-right: 1px solid #d3cec5;
}

.health-insight-card.small-card {
    display: flex;
    align-items: center;
    justify-content: center;
    border-bottom: 1px solid #d3cec5;
}

    .health-insight-card.small-card:last-child {
        border-bottom: none;
    }

.health-insight-link:hover {
    color: #00682f;
}

.health-insight-link i {
    font-size: 14px;
}

.health-insights-stacked {
    display: flex;
    flex-direction: column;
    gap: 24px;
    height: 100%;
    padding-left: 12px;
}

.small-card {
    flex: 1;
}

    .small-card .health-insight-image {
        object-fit: cover;
        width: 240px;
        height: 160px;
        aspect-ratio: 3 / 2;
        border-radius: 16px;
    }

    .small-card .health-insight-content {
        padding: 20px;
    }

section.breadcrumbs-section {
    margin-top: 100px;
}

.brain-challenge-section .container {
    max-width: 982px;
    padding-left: 16px;
    padding-right: 16px;
}

.brain-challenge-card {
    display: flex;
    max-width: 100%;
    padding: 33px 16px;
    justify-content: center;
    align-items: center;
    border-radius: 16px;
    background: #002d74;
    margin: 0 auto;
    flex-direction: column;
}

.brain-challenge-card-image img {
    max-width: 100%;
    height: auto;
}

.brain-challenge-button a.btn.btn-primary {
    display: flex;
    height: 48px;
    min-height: 32px;
    max-height: 64px;
    padding: 8px 24px;
    justify-content: center;
    align-items: center;
    gap: 12px;
    border-radius: 24px;
    background: #00682f;
    color: white !important;
    border-color: #00682f;
    font-family: "Noto Sans Thai";
    font-size: 16px;
    font-style: normal;
    font-weight: 700;
    line-height: 120%; /* 19.2px */
    letter-spacing: 0.8px;
    text-transform: uppercase;
}

.brain-challenge-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 52px;
}

/* Brain Challenge Content Styles */
.brain-challenge-content {
    margin: 0 auto;
    padding: 40px;
    background: #e8f5e9; /* Light green background */
    border-radius: 16px;
    overflow-x: hidden;
    box-sizing: border-box;
}

h2.nutrient-section-title {
    color: #333;
    text-align: center;
    font-family: "Noto Sans Thai";
    font-size: 23px;
    font-style: normal;
    font-weight: 700;
    line-height: 150%;
    letter-spacing: 0.46px;
}

section.nutrient-section-challenge {
    display: flex;
    padding: 64px 24px;
    flex-direction: column;
    align-items: center;
    gap: 48px;
    align-self: stretch;
    border-radius: 0 0 16px 16px;
    background: #f0fdf4;
}

/* Nutrient section challenge – two info cards */
.nutrient-section-challenge .nutrient-section-header {
    margin-bottom: 40px;
}

.nutrient-section-challenge .nutrient-section-title {
    font-size: 24px;
    line-height: 1.4;
    max-width: 720px;
    margin: 0 auto;
}

.nutrient-cards-grid-challenge {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
    width: 100%;
    max-width: 900px;
    margin: 0 auto;
}

.nutrient-card.nutrient-card-challenge.nutrient-card-carnosine {
    border-radius: 16px;
    border: 4px solid var(--BEC-30, #cce9d9);
    background: linear-gradient( 180deg, var(--BEC-20, #e5f4ec) 0%, var(--BlackandWhite-SmokeGray-White, #fff) 100% );
}

.nutrient-section-challenge .nutrient-card-challenge {
    min-height: 0;
    background-size: auto;
    text-align: left;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    display: flex;
    padding: 24px;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    flex: 1 0 0;
}

h3.nutrient-card-challenge-title {
    color: var(--BEC-Main-90, #009142);
    font-family: "Noto Sans Thai";
    font-size: 23px;
    font-style: normal;
    font-weight: 700;
    line-height: 150%;
    letter-spacing: 0.46px;
}

h3.nutrient-card-challenge-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    flex-direction: row;
    flex-wrap: nowrap;
    margin-bottom: 0;
}

.nutrient-card-challenge-arrow {
    display: flex;
    width: 32px;
    height: 32px;
    padding: 10px;
    justify-content: center;
    align-items: center;
    gap: 10px;
    aspect-ratio: 1 / 1;
    border-radius: 40px;
    background: var(--BlackandWhite-SmokeGray-White, #fff);
    border: none;
}

p.nutrient-card-challenge-desc {
    color: var(--Black-and-White-Smoke-Gray-80, #6d685d);
    font-family: "Noto Sans Thai";
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 150%;
    margin-bottom: 0;
}

.nutrient-card-challenge-label {
    margin: 0;
    color: #333;
    text-align: center;
    font-family: "Noto Sans Thai";
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 150%;
}

.nutrient-card.nutrient-card-challenge.nutrient-card-b12 {
    border-radius: 16px;
    border: 4px solid var(--Color-Badge-Coral-Conqueror-10, #fff0ee);
    background: linear-gradient( 180deg, var(--Pomegranate-10, #fff1f2) 0%, var(--BlackandWhite-SmokeGray-White, #fff) 100% );
}

    .nutrient-card.nutrient-card-challenge.nutrient-card-b12
    .nutrient-card-challenge-title {
        color: var(--Color-Badge-Coral-Conqueror-60, #621a0c);
        font-family: "Noto Sans Thai";
        font-size: 23px;
        font-style: normal;
        font-weight: 700;
        line-height: 150%;
        letter-spacing: 0.46px;
    }

.nutrient-card-carnosine {
    background: #e8f5e9;
}

.nutrient-card-b12 {
    background: #fce4ec;
}

.nutrient-card-challenge-title {
    font-family: "Noto Sans Thai";
    font-size: 20px;
    font-weight: 700;
    color: #424242;
    margin: 0 0 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.nutrient-card-arrow {
    color: #757575;
    font-size: 18px;
}

.nutrient-card-challenge-desc {
    font-family: "Noto Sans Thai";
    font-size: 14px;
    font-weight: 400;
    color: #616161;
    line-height: 1.5;
    margin: 0 0 16px;
}

.nutrient-card-challenge-image-wrap {
    margin-bottom: 8px;
}

.nutrient-card-challenge-img {
    max-height: 80px;
    width: auto;
    object-fit: contain;
}

.nutrient-card-challenge-label {
    font-family: "Noto Sans Thai";
    font-size: 13px;
    font-weight: 500;
    color: #424242;
    margin: 0;
}

.nutrient-card-challenge-foods {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
}

.nutrient-food-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}

.nutrient-food-img {
    width: 56px;
    height: 56px;
    object-fit: cover;
    border-radius: 12px;
}

.nutrient-food-label {
    font-family: "Noto Sans Thai";
    font-size: 12px;
    font-weight: 500;
    color: #424242;
}

/* Interesting articles block */
.nutrient-articles-block {
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
}

.nutrient-articles-title {
    font-family: "Noto Sans Thai";
    font-size: 20px;
    font-weight: 700;
    color: #212121;
    margin: 0 0 20px;
}

.nutrient-articles-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

.nutrient-article-card {
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    text-decoration: none;
    color: inherit;
    transition: box-shadow 0.2s ease;
}

    .nutrient-article-card:hover {
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
    }

.nutrient-article-image-wrap {
    aspect-ratio: 4/3;
    overflow: hidden;
    background: #f5f5f5;
}

.nutrient-article-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.nutrient-article-card-title {
    font-family: "Noto Sans Thai", sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: #333;
    margin: 0;
    padding: 12px;
    line-height: 1.4;
}

/* Action buttons and restart */
.nutrient-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    justify-content: center;
    align-items: center;
}

.nutrient-section-challenge .btn-outline-green {
    border: 2px solid #009142;
    background: #fff;
    color: #009142;
    padding: 12px 24px;
    border-radius: 8px;
    font-family: "Noto Sans Thai";
    font-weight: 600;
    font-size: 15px;
    cursor: pointer;
}

    .nutrient-section-challenge .btn-outline-green:hover {
        background: #f5f5f5;
    }

.nutrient-section-challenge .nutrient-btn-learn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    border-radius: 8px;
    font-family: "Noto Sans Thai";
    font-weight: 600;
    font-size: 15px;
    text-decoration: none;
    background: #009142;
    color: #fff;
}

    .nutrient-section-challenge .nutrient-btn-learn:hover {
        background: #007a35;
        color: #fff;
    }

.nutrient-section-challenge .btn-arrow {
    font-size: 14px;
}

.nutrient-restart-text {
    font-family: "Noto Sans Thai";
    font-size: 14px;
    font-weight: 400;
    color: #616161;
    margin: 0;
}

.nutrient-restart-link {
    color: #009142;
    text-decoration: underline;
}

    .nutrient-restart-link:hover {
        color: #007a35;
    }

section.brain-assessment-section {
    /* background: radial-gradient(
    41.97% 68.32% at 72.08% 31.5%,
    #39a048 0%,
    #117b3e 48.92%,
    #112415 100%
  ); */
    width: 100%;
    padding: 180px 24px 100px;
    position: relative;
    display: flex;
    justify-content: center;
    align-content: center;
    align-items: center;
    position: relative;
}

.brain-assessment-section:after {
    content: "";
    background: radial-gradient( 41.97% 68.32% at 72.08% 31.5%, #39a048 0%, #117b3e 48.92%, #112415 100% );
    position: absolute;
    height: 100%;
    width: 100%;
}

.brain-assessment-card {
    max-width: 982px;
    margin: 0 auto;
    background: #fff;
    border-radius: 24px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
    padding: 48px 40px 56px;
    position: relative;
    z-index: 1;
    /* gap: 24px; */
    display: flex;
    flex-direction: column;
    align-items: center;
}

ul.brain-assessment-info-list {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    max-width: 600px;
    padding-bottom: 36px;
    margin-bottom: 0;
}

.brain-assessment-info-item {
    display: flex;
    padding: 4px;
    align-items: center;
    gap: 16px;
}

.brain-assessment-title {
    color: #00682f;
    text-align: center;
    font-family: "Noto Sans Thai";
    font-size: 32px;
    font-style: normal;
    font-weight: 600;
    line-height: 150%;
    letter-spacing: 0.32px;
    margin-bottom: 0;
    padding-bottom: 24px;
}

.brain-assessment-info-list {
    list-style: none;
    padding: 0;
    margin: 0 0 28px;
}

.brain-assessment-info-item {
    display: flex;
    align-items: center;
    gap: 16px;
    align-content: center;
}

    .brain-assessment-info-item:last-of-type {
        margin-bottom: 0;
    }

.brain-assessment-icon {
    flex-shrink: 0;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: #a0d468;
    color: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
}

.brain-assessment-icon-text {
    font-size: 14px;
    font-weight: 700;
}

.brain-assessment-icon-label {
    font-size: 9px;
    letter-spacing: 0.02em;
}

.brain-assessment-icon-duration {
    position: relative;
}

.brain-assessment-icon-clock {
    position: absolute;
    width: 14px;
    height: 14px;
    bottom: 6px;
    right: 8px;
    color: #fff;
    opacity: 0.9;
}

.brain-assessment-icon-bulb {
    background: #a0d468;
    color: #fff;
}

    .brain-assessment-icon-bulb svg {
        display: block;
    }

.brain-assessment-info-text {
    font-family: "Noto Sans Thai", sans-serif;
    font-size: 16px;
    font-weight: 400;
    color: #424242;
    line-height: 1.5;
}

.brain-assessment-disclaimer {
    background: #e8f5e9;
    border-radius: 12px;
    margin-bottom: 40px;
    display: flex;
    /* max-width: 640px; */
    min-width: 640px;
    padding: 16px;
    justify-content: center;
    align-items: center;
    gap: 10px;
}

.brain-assessment-disclaimer-text {
    font-family: "Noto Sans Thai", sans-serif;
    font-size: 13px;
    font-weight: 400;
    color: #424242;
    line-height: 1.6;
    margin: 0;
    text-align: center;
}

.brain-assessment-actions {
    text-align: center;
}

.brain-assessment-start-btn {
    display: inline-block;
    font-family: "Noto Sans Thai", sans-serif;
    font-size: 18px;
    font-weight: 700;
    color: #fff !important;
    background: #0d3b1e;
    border: none;
    border-radius: 12px;
    padding: 16px 48px;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.2s ease;
}

    .brain-assessment-start-btn:hover {
        background: #0a2d16;
        color: #fff !important;
    }

@media (max-width: 768px) {
    .unbranded-mobile-menu-search,
    .unbranded-mobile-menu-close {
        background: none;
        border: none;
    }

    .navbar-expand-lg .navbar-nav .nav-item:first-child .nav-link {
        padding-left: 20px !important;
    }

    section.brain-assessment-section {
        padding: 48px 16px 64px;
        min-height: 0;
    }

    .brain-assessment-card {
        padding: 32px 24px 40px;
    }

    .brain-assessment-title {
        font-size: 22px;
        margin-bottom: 24px;
    }

    .brain-assessment-info-text {
        font-size: 15px;
    }

    .brain-assessment-start-btn {
        font-size: 16px;
        padding: 14px 36px;
    }
}

/* Brain assessment quiz (after "เริ่มเลย!") */
.brain-assessment-quiz-wrap {
    width: 100%;
    max-width: 982px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
    padding: 64px 150px;
    justify-content: center;
    align-items: center;
    border-radius: 16px;
    background: #fff;
}

.brain-assessment-quiz-title {
    color: #6d685d;
    text-align: center;
    font-family: "Noto Sans Thai";
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 150%;
}

.brain-assessment-progress-bar {
    width: 100%;
    max-width: 450px;
    height: 12px;
    border-radius: 16px;
    background: #efeeee;
    margin: 40px auto;
    overflow: hidden;
}

.brain-assessment-progress-fill {
    height: 100%;
    border-radius: 16px;
    background: #039142;
    width: 0%;
    transition: width 0.35s ease;
}

.brain-assessment-question-card {
    display: flex;
    padding: 40px 24px;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    align-self: stretch;
    border-radius: 16px;
    background: radial-gradient( 106.24% 102.01% at 100% -16.37%, #39a048 11.54%, #117b3e 46.15%, #112415 90.92% ), linear-gradient( 180deg, var(--BEC-Main-90, #009142) 0.48%, var(--BEC-40, #b2dec6) 251.08% );
}

.brain-assessment-question-icon img {
    display: flex;
    width: 100px;
    height: 100px;
    justify-content: center;
    align-items: center;
    gap: 10px;
    aspect-ratio: 1/1;
    background: #e5f4ed;
    border-radius: 200px;
    padding: 12px;
}

.brain-assessment-question-text {
    margin: 0;
    color: #fff;
    text-align: center;
    font-family: "Noto Sans Thai";
    font-size: 20px;
    font-style: normal;
    font-weight: 400;
    line-height: 150%;
}

.brain-assessment-answers {
    display: flex;
    flex-direction: column;
    margin-bottom: 32px;
}

.brain-assessment-answer-group {
    background: #fff;
    border-radius: 12px;
    padding: 24px;
}

.brain-assessment-answers {
    display: flex;
    flex-direction: column;
    margin-bottom: 32px;
    border-bottom: 1px solid #d3cec5;
}

.brain-assessment-answer-prompt {
    margin: 0 0 12px;
    color: #000;
    font-family: "Noto Sans Thai";
    font-size: 16px;
    font-style: normal;
    font-weight: 700;
    line-height: 150%;
}

.brain-assessment-option-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.brain-assessment-option-chip {
    transition: border-color 0.2s ease, background 0.2s ease;
    color: #333;
    text-align: center;
    font-family: "Noto Sans Thai";
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 150%;
    border-radius: 24px;
    border: 1px solid var(--Black-and-White-Smoke-Gray-30, #d3cec5);
    background: var(--Black-and-White-Smoke-Gray-10, #f8f7f5);
    display: flex;
    min-width: 136px;
    padding: 4px 16px;
    align-items: center;
    gap: 10px;
}

    .brain-assessment-option-chip:hover {
        border-color: #a0d468;
    }

    .brain-assessment-option-chip.selected {
        border-color: #009142;
        background: #e8f5e9;
        color: #0d3b1e;
    }

.brain-assessment-quiz-nav {
    display: flex;
    justify-content: center;
    gap: 16px;
}

.btn.brain-assessment-btn-back {
    display: flex;
    width: 120px;
    height: 40px;
    min-height: 28px;
    max-height: 48px;
    padding: 8px 16px;
    justify-content: center;
    align-items: center;
    gap: 8px;
    border-radius: 24px;
    border: 1px solid #00682f;
    color: #00682f;
    font-family: "Noto Sans Thai";
    font-size: 14px;
    font-style: normal;
    font-weight: 700;
    line-height: 120%;
    letter-spacing: 0.7px;
    text-transform: uppercase;
}

    .btn.brain-assessment-btn-back:hover {
        background: #f5f5f5;
    }

.brain-assessment-btn-back:hover {
    background: #f5f5f5;
}

.brain-assessment-btn-next {
    background: #00682f !important;
    border-radius: 24px !important;
    width: 120px;
    height: 40px;
    min-height: 28px;
    max-height: 48px;
    justify-content: center;
    align-items: center;
    gap: 8px;
    color: #fff !important;
    font-family: "Noto Sans Thai";
    font-style: normal;
    letter-spacing: 0.7px;
    text-transform: uppercase;
}

    .brain-assessment-btn-next:hover {
        background: #0a2d16;
        color: #fff;
    }

@media (max-width: 768px) {
    .brain-assessment-quiz-wrap {
        padding: 0 8px;
    }

    .brain-assessment-question-card {
        padding: 20px;
    }

    .brain-assessment-question-text {
        font-size: 15px;
    }

    .brain-assessment-option-chips {
        flex-direction: column;
    }

    .brain-assessment-option-chip {
        width: 100%;
        text-align: center;
    }
}

section.breadcrumbs-section.trans-bread {
    margin-top: 100px;
    background: transparent;
    position: absolute;
    left: 0;
    right: 0;
    color: white;
    z-index: 10;
}

.trans-bread li.breadcrumb-item a {
    color: white !important;
}

.trans-bread li.breadcrumb-item.active a {
    color: white !important;
}

.trans-bread li.breadcrumb-item a:hover {
    color: white !important;
}

.trans-bread li.breadcrumb-item.active a:hover {
    color: white !important;
}

.trans-bread .breadcrumb-item + .breadcrumb-item:before,
.trans-bread .breadcrumb-item.active,
.trans-bread .breadcrumb-item a {
    color: #ffffff !important;
}

.brain-assessment-section-overlay {
    width: 100%;
    height: 55%;
    position: absolute;
    right: 0;
    top: 56px;
    z-index: 1;
    background-position: right top;
    mix-blend-mode: color-dodge;
}

@media (max-width: 992px) {
    .nutrient-articles-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    section.nutrient-section-challenge {
        padding: 40px 16px;
        gap: 32px;
    }

    .nutrient-cards-grid-challenge {
        grid-template-columns: 1fr;
    }

    .nutrient-articles-grid {
        grid-template-columns: 1fr;
    }

    .nutrient-actions {
        flex-direction: column;
    }

    .nutrient-section-challenge .nutrient-section-title {
        font-size: 20px;
    }
}

.challenge-header {
    text-align: center;
    margin-bottom: 24px;
}

.challenge-title {
    margin-bottom: 16px;
    color: #333;
    font-family: "Noto Sans Thai";
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: 150%;
}

.progress-bar-container {
    width: 100%;
    max-width: 400px;
    margin: 0 auto;
}

.progress-bar {
    display: flex;
    gap: 8px;
    justify-content: center;
}

.progress-bar {
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow: hidden;
    color: #fff;
    text-align: center;
    white-space: nowrap;
    background-color: #efeeee !important;
    transition: width 0.6s ease;
    border-radius: 16px;
    height: 16px;
}

.progress-segment {
    flex: 1;
    height: 8px;
    background: #e0e0e0;
    border-radius: 4px;
    transition: background 0.3s ease;
}

    .progress-segment.filled {
        background: #009142 !important;
        width: 100px;
        z-index: 100;
        position: absolute;
        height: 16px;
        border-radius: 16px;
    }

.brain-challenge-button button {
    display: flex;
    height: 48px;
    min-height: 32px;
    max-height: 64px;
    padding: 8px 24px;
    justify-content: center;
    align-items: center;
    gap: 12px;
    border-radius: 24px;
    background: #00682f;
    border: 1px solid #00682f;
    color: #fff;
    font-family: "Noto Sans Thai";
    font-size: 16px;
    font-style: normal;
    font-weight: 700;
    line-height: 120%;
    letter-spacing: 0.8px;
    text-transform: uppercase;
}

.jigsaw-header h3 {
    display: flex;
    justify-content: center;
    flex-direction: row;
    flex-wrap: nowrap;
    align-content: center;
    gap: 10px;
}

.brain-challenge-button button:hover {
    background: #005a26 !important;
    color: #ffffff !important;
}

.progress-bar.two-filled .progress-segment.filled {
    width: 200px;
}

.progress-bar.three-filled .progress-segment.filled {
    width: 300px;
}

.progress-bar.four-filled .progress-segment.filled {
    width: 400px;
}

.challenge-intro {
    max-width: 65%;
    margin: 0px auto;
    margin-bottom: 24px;
    display: flex;
    padding: 8px 24px;
    justify-content: center;
    align-items: center;
    gap: 16px;
    border-radius: 50px;
    background: linear-gradient(180deg, var(--Mushroom-30, rgba(250, 216, 194, 0.30)) 0.48%, var(--Pomegranate-10, rgba(255, 241, 242, 0.30)) 251.08%);
    /* background: linear-gradient(
    180deg,
    var(--Mushroom-30, rgba(250, 216, 194, 0.3)) 0.48%,
    var(--Pomegranate-10, rgba(255, 241, 242, 0.3)) 251.08%
  ); */
}

.brain-icon {
    flex-shrink: 0;
}

.challenge-intro-text {
    margin: 0;
    color: #333;
    font-family: "Noto Sans Thai";
    font-size: 20px;
    font-style: normal;
    font-weight: 400;
    line-height: 150%;
}

.challenge-main-content {
    margin-bottom: 32px;
}

.challenge-content-header {
    margin-bottom: 24px;
}

.challenge-number-title {
    color: #333;
    font-family: "Noto Sans Thai";
    font-size: 26px;
    font-style: normal;
    font-weight: 700;
    line-height: 150%;
    letter-spacing: 0.52px;
    margin-bottom: 0;
}

.challenge-instruction {
    margin: 0;
    color: var(--Black-and-White-Smoke-Gray-100, #333);
    font-family: "Noto Sans Thai";
    font-size: 16px;
    font-style: normal;
    font-weight: 700;
    line-height: 150%;
    padding-bottom: 32px;
    /* text-align: center; */
}

.challenge-body {
    display: flex;
    gap: 32px;
    align-items: flex-start;
}

.burglar-reference {
    flex: 0 0 200px;
}

.burglar-image {
    width: 100%;
    height: auto;
    border-radius: 8px;
}

.shadow-options {
    flex: 1;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}

.shadow-option {
    position: relative;
    aspect-ratio: 1;
    cursor: pointer;
    transition: all 0.3s ease;
    justify-content: center;
    display: flex;
    padding: 8px 16px;
    align-items: flex-start;
    gap: 8px;
    border-radius: 16px;
    border: 1px solid #d3cec5;
    background: #f8f7f5;
    height: 120px;
    width: 100%;
}

    .shadow-option:hover {
        border: 2px solid #2196f3;
        box-shadow: 0 4px 12px #2196f342;
        background: #f5f9fd;
    }

    .shadow-option.selected {
        border: 2px solid #2196f3;
        box-shadow: 0 4px 12px #2196f342;
        background: #f5f9fd;
    }

span.sub-challenge-number {
    color: #333;
    text-align: center;
    font-family: "Noto Sans Thai";
    font-size: 16px;
    font-style: normal;
    font-weight: 700;
    line-height: 150%;
}

.option-number {
    position: absolute;
    top: 8px;
    left: 10px;
    z-index: 1;
    color: #1d376c;
    font-family: "Noto Sans Thai";
    font-size: 23px;
    font-style: normal;
    font-weight: 700;
    line-height: 150%;
}

.shadow-silhouette img {
    object-fit: cover;
    width: 100%;
    height: 100%;
    border-radius: 8px;
}

.challenge-navigation {
    display: flex;
    justify-content: center;
    gap: 16px;
    margin-top: 32px;
}

    .challenge-navigation .btn {
        display: flex;
        width: 120px;
        height: 40px;
        min-height: 28px;
        max-height: 48px;
        padding: 8px 16px;
        justify-content: center;
        align-items: center;
        gap: 8px;
        border-radius: 24px;
    }

    .challenge-navigation .btn-next {
        border-radius: 24px;
        background: #00682f;
        color: white;
    }

    .challenge-navigation .btn-next {
        border-radius: 24px;
        background: #00682f;
        color: white;
        font-family: "Noto Sans Thai";
        font-size: 14px;
        font-style: normal;
        font-weight: 700;
        line-height: 120%;
        letter-spacing: 0.7px;
        text-transform: uppercase;
    }

    .challenge-navigation .btn-back {
        border-radius: 24px;
        border: 1px solid #00682f;
        color: #006a2f;
        font-family: "Noto Sans Thai";
        font-size: 14px;
        font-style: normal;
        font-weight: 700;
        line-height: 120%;
        letter-spacing: 0.7px;
        text-transform: uppercase;
    }

.btn-back {
    background: #ffffff;
    color: #00682f;
}

    .btn-back:hover {
        background: #f5f5f5;
    }

    .btn-back:disabled,
    .challenge-navigation .btn-back:disabled {
        opacity: 0.5;
        cursor: not-allowed;
        pointer-events: none;
    }

.btn-next {
    background: #00682f;
    color: #ffffff;
}

    .btn-next:hover {
        background: #005a26;
        color: #ffffff !important;
    }

/* Result / Final Screen */
.brain-challenge-result .challenge-header {
    margin-bottom: 32px;
}

.brain-challenge-result .challenge-title {
    font-size: 28px;
}

.result-content-box {
    text-align: center;
    padding: 48px 24px;
    background: #ffffff;
    border-radius: 16px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    margin-bottom: 32px;
}

.result-label {
    font-family: "Noto Sans Thai";
    font-size: 18px;
    font-weight: 400;
    color: #666;
    margin-bottom: 16px;
}

.result-score {
    font-family: "Noto Sans Thai";
    font-size: 48px;
    font-weight: 700;
    color: #00682f;
    margin: 0;
    display: inline;
}

.result-out-of {
    font-family: "Noto Sans Thai";
    font-size: 24px;
    font-weight: 400;
    color: #999;
    display: inline;
    margin-left: 4px;
}

/* Result scorecard – circular progress, card layout */
.result-scorecard-wrap {
    display: flex;
    align-items: flex-start;
    gap: 24px;
    margin-bottom: 32px;
    max-width: 982px;
    margin-left: auto;
    margin-right: auto;
}

.result-score-label {
    font-family: "Noto Sans Thai";
    font-size: 16px;
    font-weight: 400;
    color: #9e9e9e;
    flex-shrink: 0;
    padding-top: 12px;
}

.result-scorecard-card {
    flex: 1;
    padding: 32px 24px;
    text-align: center;
}


.result-circle-dot {
    stroke: white;
    stroke-width: 2;
    transition: opacity 0.2s ease;
}

.result-scorecard-title {
    font-family: "Noto Sans Thai";
    font-size: 22px;
    font-weight: 700;
    color: #424242;
    /* margin: 0 0 24px; */
    line-height: 1.3;
}

.result-scorecard-circle-wrap {
    position: relative;
    width: 200px;
    height: 200px;
    margin: 0 auto 0;
    align-content: center;
}

.result-scorecard-svg {
    width: 160px;
    height: 160px;
    display: block;
    margin: 0 auto;
}

.result-circle-bg {
    fill: none;
    stroke: #e0e0e0;
    stroke-width: 10;
}

.result-circle-arc {
    fill: none;
    stroke-width: 10;
    stroke-linecap: round;
    transition: stroke-dasharray 0.4s ease, stroke 0.3s ease;
}


.result-scorecard-circle-inner {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    pointer-events: none;
    display: flex;
    flex-direction: column;
}

.result-scorecard-circle-inner--mini {
    transform: translate(-50%, -50%);
}

    .result-scorecard-circle-inner--mini .brain-assessment-score-legend-range-main {
        font-size: 16px;
    }

    .result-scorecard-circle-inner--mini .brain-assessment-score-legend-range-unit {
        font-size: 11px;
    }

.result-scorecard-you-scored {
    color: #393540;
    font-family: "Noto Sans Thai";
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 150%; /* 24px */
    /* font-family: "Noto Sans Thai";
  font-size: 14px;
  font-weight: 400;
  color: #757575;
  display: block;
  margin-bottom: 4px; */
}

.result-scorecard-value {
    font-family: "Noto Sans Thai";
    font-size: 28px;
    font-weight: 700;
    color: #424242;
}

.result-scorecard-subtitle {
    color: var(--Black-and-White-Smoke-Gray-100, #333);
    text-align: center;
    /* Header 04 */
    font-family: "Noto Sans Thai";
    font-size: 23px;
    font-style: normal;
    font-weight: 700;
    line-height: 150%; /* 34.5px */
    margin: 0;
}

@media (max-width: 640px) {
    .result-scorecard-wrap {
        flex-direction: column;
        align-items: center;
        gap: 12px;
    }

    .result-scorecard-title {
        font-size: 18px;
    }

    .result-scorecard-circle-wrap,
    .result-scorecard-svg {
        width: 160px;
        height: 160px;
    }

    .result-scorecard-value {
        font-size: 24px;
    }

    .result-scorecard-subtitle {
        font-size: 14px;
    }

    .clubs-section-item {
        height: 227px;
        margin-bottom: 32px;
    }
}

/* Brain assessment result (score 0-90, band-based) */
.brain-assessment-result-wrap {
    flex-direction: column;
    align-items: center;
    /* max-width: 560px; */
    background: white;
    border-radius: 24px;
    z-index: 10;
    position: relative;
}

.brain-assessment-result-card {
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.brain-assessment-result-recommendation {
    font-family: "Noto Sans Thai", sans-serif;
    font-size: 15px;
    font-weight: 500;
    color: #fff;
    line-height: 1.6;
    padding: 20px 24px;
    border-radius: 12px;
    margin-top: 8px;
    text-align: left;
    max-width: 640px;
    margin: 0px auto;
}

.brain-assessment-result-recommendation-text {
    text-align: center;
    margin: 0;
    color: inherit;
}

/* Static scoring legend under brain assessment result */
.brain-assessment-score-legend {
    width: 100%;
    margin: 40px auto 0;
    text-align: center;
    display: flex;
    padding: 24px 0;
    flex-direction: column;
    align-items: center;
    gap: 24px;
    align-self: stretch;
    border-top: 1px solid #d3cec5;
    background: #fff;
}

.brain-assessment-score-legend-title {
    margin-bottom: 4px;
    color: #333;
    text-align: center;
    font-family: "Noto Sans Thai";
    font-size: 23px;
    font-style: normal;
    font-weight: 700;
    line-height: 150%;
    letter-spacing: 0.46px;
}

.brain-assessment-score-legend-subtitle {
    margin: 0 0 24px;
    color: #333;
    text-align: center;
    font-family: "Noto Sans Thai";
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 150%;
}

.brain-assessment-score-legend-subtitle {
    font-family: "Noto Sans Thai", sans-serif;
    font-size: 14px;
    font-weight: 400;
    color: #827c71;
    margin: 0 0 24px;
}

.brain-assessment-score-legend-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px;
}

.brain-assessment-score-legend-item {
    font-family: "Noto Sans Thai", sans-serif;
    display: flex;
    padding: 0 16px;
    flex-direction: column;
    align-items: center;
    gap: 24px;
    align-self: stretch;
    border-right: 1px solid #efeeee;
}

    .brain-assessment-score-legend-item:last-child {
        border-right: none;
    }

.brain-assessment-score-legend-label h3 {
    color: #333;
    text-align: center;
    font-family: "Noto Sans Thai";
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 150%;
    margin-bottom: 4px;
}

.brain-assessment-score-legend-label p {
    color: #333;
    text-align: center;
    font-family: "Noto Sans Thai";
    font-size: 14px;
    font-style: normal;
    font-weight: 700;
    line-height: 150%;
    margin-bottom: 0px;
}

.brain-assessment-score-legend-gauge {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 0px;
}

.result-scorecard-circle-wrap--mini {
    width: 120px;
    height: 120px;
    margin: 0;
}

    .result-scorecard-circle-wrap--mini .result-scorecard-svg {
        width: 120px;
        height: 120px;
    }

.result-circle-arc--legend-0-15 {
    stroke: #009142;
}

.result-circle-arc--legend-16-30 {
    stroke: #1a9c55;
}

.result-circle-arc--legend-31-45 {
    stroke: #ffce55;
}

.result-circle-arc--legend-46-90 {
    stroke: #bf1920;
}

.brain-assessment-score-legend-range {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
}

.brain-assessment-score-legend-range-main {
    font-size: 18px;
    font-weight: 700;
    color: #333333;
}

.brain-assessment-score-legend-range-unit {
    font-size: 12px;
    font-weight: 400;
    color: #827c71;
}

.brain-assessment-score-legend-label {
    font-size: 14px;
    font-weight: 600;
    color: #333333;
    margin-bottom: 6px;
}

.brain-assessment-score-legend-text {
    font-size: 12px;
    font-weight: 400;
    color: #555555;
    margin: 0;
    line-height: 1.5;
}

.nutrient-section-challenge .un-article-active {
    margin-top: 0;
    width: 100%;
    padding: 0;
}

.brain-assessment-result-footer.p-3 {
    background: #f1fdf4;
    text-align: center;
    width: 100%;
    border-radius: 0px 0px 20px 20px;
}

.brain-assessment-result-footer a.btn.btn-solid-green.btn-learn-more {
    margin-left: 20px;
}

@media (max-width: 991.98px) {
    .brain-assessment-score-legend-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 575.98px) {
    .brain-assessment-score-legend {
        margin-top: 32px;
    }

    .brain-assessment-score-legend-grid {
        grid-template-columns: 1fr;
    }

    .brain-assessment-score-legend-item {
        padding: 16px 14px;
    }
}

.brain-assessment-result-nav {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    width: 100%;
    margin-top: 24px;
}

    .brain-assessment-result-nav .brain-assessment-start-btn {
        margin-left: auto;
    }

.brain-challenge-content {
    border-radius: 16px;
    background: linear-gradient( 178deg, #dde5f3 2.49%, var(--BlackandWhite-SmokeGray-White, #fff) 136.92% );
}
    /* Jigsaw Puzzle Styles (Challenge 2) – Figma look and feel */
    .brain-challenge-content.challenge-2 {
        border-radius: 16px;
        background: linear-gradient( 178deg, var(--BEC-20, #e5f4ec) 2.49%, var(--BlackandWhite-SmokeGray-White, #fff) 136.92% );
    }

    .brain-challenge-content.challenge-3 {
        border-radius: 16px;
        background: #fff;
    }
    /* Quiz 3: Find 4 bottles – cartoon look and feel, green circle for correct */
    .brain-challenge-content.challenge-4 {
        background: #fff;
    }

.find-bottles-task,
.find-bottles-instruction {
    margin: 0;
    color: #1a1a1a;
    font-size: 16px;
    line-height: 1.6;
    font-weight: 500;
}

.find-bottles-scenario {
    color: #333 !important;
    font-family: "Noto Sans Thai";
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 150%;
    letter-spacing: 0.36px;
    margin-bottom: 0;
}

p.find-bottles-task {
    color: #244f86;
    font-family: "Noto Sans Thai";
    font-size: 20px;
    font-style: normal;
    font-weight: 700;
    line-height: 150%;
}

.find-bottles-task {
    font-weight: 600;
    color: #2e7d32;
}

.find-bottles-instruction {
    color: #333;
    font-family: "Noto Sans Thai";
    font-size: 16px;
    font-style: normal;
    font-weight: 700;
    line-height: 150%;
}

.find-bottles-image-wrap {
    position: relative;
    display: inline-block;
    max-width: 100%;
    cursor: pointer;
    margin-top: 16px;
    border-radius: 12px;
    overflow: hidden;
}

    .find-bottles-image-wrap .find-bottles-img {
        display: block;
        max-width: 100%;
        height: auto;
        border-radius: 12px;
    }

.find-bottles-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.find-bottles-correct-circles {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.find-bottles-green-circle {
    position: absolute;
    box-sizing: border-box;
    animation: find-bottles-green-circle-appear 0.35s ease-out;
}

    .find-bottles-green-circle .find-bottles-circle-img {
        width: 100%;
        height: 100%;
        display: block;
        object-fit: contain;
    }

.challenge-content-row {
    border-radius: 16px;
    background: linear-gradient(178deg, #dde5f3 2.49%, #fff 136.92%);
    padding: 0 12px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.challenge-content-box.find-bottles-box {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 32px;
    flex: 1 0 0;
}

@keyframes find-bottles-green-circle-appear {
    from {
        opacity: 0;
        transform: scale(0.7);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

.find-bottles-x-marks {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.find-bottles-x-mark {
    position: absolute;
    width: 32px;
    height: 32px;
    display: block;
    object-fit: contain;
    animation: find-bottles-x-appear 0.2s ease-out;
}

@keyframes find-bottles-x-appear {
    from {
        opacity: 0;
        transform: scale(0.5);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

.find-bottles-found-count {
    margin-top: 12px;
    font-size: 18px;
    font-weight: 600;
    color: #00c853;
}

/* Quiz 4: Match the pair (4. ความเหมือนที่แตกต่าง) */
.challenge-4 .challenge-main-content {
    background: linear-gradient( 178deg, var(--BEC-20, #e5f4ec) 2.49%, var(--BlackandWhite-SmokeGray-White, #fff) 136.92% );
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    width: 100%;
}

.brain-challenge-breadcrumbs-section.breadcrumbs-section {
    background: #f2f9f6;
    margin-top: 0;
    padding-top: 100px;
}

.challenge-card {
    border-radius: 16px;
    padding: 48px 40px;
    background: #fff;
}


section.brain-challenge-section {
    background: #f2f9f6;
    display: flex;
    padding: 40px 200px 80px;
    justify-content: center;
    align-items: center;
}

.brain-challenge-result {
    background: white;
}

.match-pair-box {
    padding: 28px 24px;
}

.match-pair-instruction,
.match-pair-question {
    margin: 0 0 16px 0;
    color: #333;
    font-size: 16px;
    line-height: 1.5;
}

.match-pair-question {
    font-weight: 600;
    color: #2e7d32;
}

.match-pair-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    max-width: 520px;
    margin-top: 24px;
}

.match-pair-option {
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    border: 3px solid transparent;
    cursor: pointer;
    transition: border-color 0.2s, box-shadow 0.2s;
    background: #fff;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
}

    .match-pair-option:hover {
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12);
    }

    .match-pair-option .match-pair-number {
        position: absolute;
        top: 8px;
        left: 8px;
        background: rgba(0, 0, 0, 0.6);
        color: #fff;
        width: 28px;
        height: 28px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: 700;
        font-size: 14px;
        z-index: 2;
    }

    .match-pair-option img {
        display: block;
        width: 100%;
        height: auto;
    }

    .match-pair-option.selected {
        border-color: #00682f;
        box-shadow: 0 0 0 2px rgba(0, 104, 47, 0.3);
    }

    .match-pair-option.correct {
        border-color: #00c853;
        box-shadow: 0 0 0 2px rgba(0, 200, 83, 0.3);
    }

    .match-pair-option.incorrect {
        border-color: #e53935;
        box-shadow: 0 0 0 2px rgba(229, 57, 53, 0.3);
    }

.jigsaw-box {
    padding: 28px 24px;
}

.jigsaw-header {
    margin-bottom: 28px;
}

    .jigsaw-header .challenge-number-title {
        color: #333;
        font-size: 24px;
        font-weight: 700;
        line-height: 1.3;
        margin: 0 0 8px 0;
    }

    .jigsaw-header .sub-challenge-number {
        display: block;
        color: #666;
        font-size: 16px;
        font-weight: 400;
        margin-top: 4px;
    }

.jigsaw-puzzle-container {
    display: flex;
    gap: 28px;
    align-items: flex-start;
    justify-content: center;
    flex-wrap: wrap;
}

.puzzle-pieces-left,
.puzzle-pieces-right {
    display: flex;
    flex-direction: column;
    gap: 20px;
    flex: 0 0 auto;
    touch-action: none;
    transition: background 0.2s ease, box-shadow 0.2s ease;
}

    .puzzle-pieces-left.drag-over-bank,
    .puzzle-pieces-right.drag-over-bank {
        background: rgba(0, 104, 47, 0.08);
        border-radius: 12px;
        box-shadow: inset 0 0 0 2px rgba(0, 104, 47, 0.3);
    }

.puzzle-main-image-container {
    flex: 1;
    min-width: 320px;
    max-width: 520px;
    align-self: flex-start;
    touch-action: none;
}

.puzzle-main-image {
    position: relative;
    display: block;
    width: 100%;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

    .puzzle-main-image img {
        width: 100%;
        height: auto;
        display: block;
        border-radius: 12px;
    }

/* Overlay sits exactly on top of image so gap % align with image */
.puzzle-gaps-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    border-radius: 12px;
}

    .puzzle-gaps-overlay .puzzle-gap {
        pointer-events: auto;
        touch-action: none;
    }

.puzzle-placeholder {
    width: 100%;
    aspect-ratio: 4/3;
    background: #f5f5f5;
    border: 2px dashed #ccc;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #999;
    font-family: "Noto Sans Thai";
}

.puzzle-piece {
    position: relative;
    width: 110px;
    height: 110px;
    border-radius: 8px;
    cursor: grab;
    touch-action: none;
    -webkit-user-select: none;
    user-select: none;
    transition: box-shadow 0.2s ease, transform 0.2s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 6px;
}

    .puzzle-piece:active {
        cursor: grabbing;
    }

    .puzzle-piece:hover {
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    }

    .puzzle-piece.dragging {
        opacity: 0.7;
        transform: scale(0.98);
    }

.piece-number {
    position: absolute;
    top: 6px;
    left: 6px;
    min-width: 22px;
    height: 22px;
    padding: 0 6px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
    color: #333;
    font-family: "Noto Sans Thai";
    font-size: 14px;
    font-weight: 700;
    line-height: 1;
}

.piece-image {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-radius: 4px;
}

    .piece-image img {
        max-width: 100%;
        max-height: 100%;
        object-fit: contain;
    }

.piece-placeholder {
    width: 100%;
    height: 100%;
    background: #f5f5f5;
    border: 1px dashed #ccc;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #999;
    font-size: 12px;
    font-family: "Noto Sans Thai";
}

.brain-challenge-card-image img {
    max-height: 640px;
}

/* Answer areas (gaps) – red outline like Figma; overlay matches image exactly */
.puzzle-gap {
    position: absolute;
    top: 0;
    left: 0;
    /* border: 2px dashed #E53935; */
    /* background: rgba(229, 57, 53, 0.08); */
    border-radius: 6px;
    cursor: pointer;
    transition: border-color 0.2s ease, background 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 80px;
    min-height: 80px;
    overflow: hidden;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

    .puzzle-gap.drag-over {
        /* border-color: #00682F; */
        border-style: solid;
        /* background: rgba(0, 104, 47, 0.12); */
        z-index: 10;
    }

    .puzzle-gap.filled {
        border: none;
        background: transparent;
        padding: 0;
    }

        /* Dropped piece image fills the gap exactly so it fits the answer area */
        .puzzle-gap.filled .gap-piece-img {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            cursor: grab;
            touch-action: none;
            width: 100%;
            height: 100%;
            object-fit: cover;
            object-position: center center;
            display: block;
            margin: 0;
            padding: 0;
        }

            .puzzle-gap.filled .gap-piece-img:active {
                cursor: grabbing;
            }

        .puzzle-gap.filled .gap-label {
            background: #00682f;
        }

    .puzzle-gap.correct {
        border-color: #00682f;
        background: transparent;
    }

        .puzzle-gap.correct .gap-label {
            background: #00682f;
        }

    .puzzle-gap.incorrect {
        border: 2px dashed #e53935;
        background: rgba(229, 57, 53, 0.1);
        animation: shake 0.5s;
    }

        .puzzle-gap.incorrect .gap-label {
            background: #e53935;
        }

@keyframes shake {
    0%, 100% {
        transform: translateX(0);
    }

    25% {
        transform: translateX(-8px);
    }

    75% {
        transform: translateX(8px);
    }
}

.gap-label {
    display: none !important;
    position: absolute;
    top: -10px;
    left: -10px;
    background: #e53935;
    color: #ffffff;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: "Noto Sans Thai";
    font-size: 13px;
    font-weight: 700;
    z-index: 3;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
}

/* Gap positions – aligned with puzzle holes (all use top/left/width/height for precise fit) */
#gapA {
    top: 18%;
    left: 38%;
    width: 24%;
    height: 24%;
}

#gapB {
    top: 38%;
    left: 2%;
    width: 24%;
    height: 20%;
}

#gapC {
    top: 52%;
    left: 50%;
    width: 36%;
    height: 20%;
}

#gapD {
    top: 68%;
    left: 18%;
    width: 28%;
    height: 24%;
}

/* Responsive Styles */
@media (max-width: 1199.98px) {
    .brain-challenge-section .container {
        padding-left: 20px;
        padding-right: 20px;
    }

    .brain-challenge-content {
        max-width: 100%;
        padding: 32px 24px;
    }
}

@media (max-width: 991.98px) {
    .health-insights-header {
        flex-direction: column;
        align-items: flex-start;
    }

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

    .health-insights-stacked {
        margin-top: 24px;
    }

    .featured-card .health-insight-image-wrapper {
        height: 300px;
    }

    /* Brain Challenge – Tablet */
    .brain-challenge-section .container {
        padding-left: 16px;
        padding-right: 16px;
    }

    .brain-challenge-card {
        padding: 24px 16px;
        border-radius: 12px;
    }

    .brain-challenge-content {
        padding: 24px 20px;
        border-radius: 12px;
    }

    .challenge-header {
        margin-bottom: 20px;
    }

    .challenge-title {
        font-size: 18px;
    }

    .progress-bar-container {
        max-width: 100%;
    }

    .challenge-intro {
        padding: 12px 16px;
        margin-bottom: 20px;
    }

    .challenge-intro-text {
        font-size: 14px;
    }

    .challenge-body {
        flex-direction: column;
        gap: 24px;
    }

    .burglar-reference {
        flex: 0 0 auto;
        width: 100%;
        max-width: 300px;
        margin: 0 auto;
    }

    .shadow-options {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }

    .challenge-navigation {
        flex-direction: column;
        gap: 12px;
        margin-top: 24px;
    }

    .btn-back,
    .btn-next {
        width: 100%;
        padding: 12px 20px;
        font-size: 14px;
    }

    /* Jigsaw – Tablet */
    .jigsaw-puzzle-container {
        flex-direction: column;
        align-items: center;
        gap: 20px;
    }

    .jigsaw-header .challenge-number-title {
        font-size: 20px;
    }

    .jigsaw-header .sub-challenge-number {
        font-size: 14px;
    }

    .puzzle-pieces-left,
    .puzzle-pieces-right {
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        gap: 12px;
        width: 100%;
    }

    .puzzle-main-image-container {
        width: 100%;
        min-width: 0;
        max-width: 100%;
        order: 2;
    }

    .puzzle-pieces-left {
        order: 1;
    }

    .puzzle-pieces-right {
        order: 3;
    }

    .puzzle-piece {
        width: 100px;
        height: 100px;
    }

    /* Result screen – Tablet */
    .brain-challenge-result .challenge-title {
        font-size: 24px;
    }

    .result-content-box {
        padding: 36px 20px;
    }

    .result-score {
        font-size: 40px;
    }

    .result-out-of {
        font-size: 20px;
    }
}

@media (max-width: 767.98px) {
    .brain-challenge-section .container {
        padding-left: 12px;
        padding-right: 12px;
    }

    .brain-challenge-card {
        padding: 20px 12px;
    }

    .brain-challenge-content {
        padding: 20px 16px;
    }

    .jigsaw-box {
        padding: 20px 16px;
    }

    .jigsaw-header .challenge-number-title {
        font-size: 18px;
    }

    .jigsaw-header .sub-challenge-number {
        font-size: 13px;
    }

    .puzzle-piece {
        width: 88px;
        height: 88px;
    }

    .piece-number {
        font-size: 12px;
        min-width: 20px;
        height: 20px;
    }
}

@media (max-width: 575.98px) {

    .challenge-card {
        padding: 0;
        background: none;
    }


    section.breadcrumbs-section {
        margin-top: 80px;
    }

    .brain-challenge-section .container {
        padding-left: 12px;
        padding-right: 12px;
    }

    .brain-challenge-card {
        padding: 16px 12px;
        border-radius: 12px;
    }

    .brain-challenge-content {
        padding: 16px 12px;
        border-radius: 12px;
    }

    .challenge-header {
        margin-bottom: 16px;
    }

    .challenge-title {
        font-size: 16px;
    }

    .challenge-number-title {
        font-size: 18px;
    }

    .challenge-instruction {
        font-size: 13px;
    }

    .challenge-intro {
        flex-direction: column;
        text-align: center;
        padding: 12px;
    }

    .challenge-intro-text {
        font-size: 13px;
    }

    .shadow-options {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
        width: 100%;
    }

    .option-number {
        font-size: 18px;
    }

    /* Jigsaw – Mobile */
    .jigsaw-box {
        padding: 16px 12px;
    }

    .jigsaw-header {
        margin-bottom: 20px;
    }

        .jigsaw-header .challenge-number-title {
            font-size: 16px;
        }

        .jigsaw-header .sub-challenge-number {
            font-size: 12px;
        }

    .jigsaw-puzzle-container {
        gap: 16px;
    }

    .puzzle-pieces-left,
    .puzzle-pieces-right {
        gap: 10px;
    }

    .puzzle-piece {
        width: 72px;
        height: 72px;
        padding: 4px;
    }

    .piece-number {
        font-size: 11px;
        min-width: 18px;
        height: 18px;
        padding: 0 4px;
    }

    .puzzle-gap {
        min-width: 50px;
        min-height: 50px;
    }

    .gap-label {
        width: 22px;
        height: 22px;
        font-size: 11px;
        top: -8px;
        left: -8px;
    }

    /* Result – Mobile */
    .brain-challenge-result .challenge-title {
        font-size: 20px;
    }

    .result-content-box {
        padding: 28px 16px;
        margin-bottom: 24px;
    }

    .result-label {
        font-size: 16px;
        margin-bottom: 12px;
    }

    .result-score {
        font-size: 36px;
    }

    .result-out-of {
        font-size: 18px;
    }

    .brain-challenge-logo {
        margin-top: 32px;
    }

        .brain-challenge-logo img {
            max-width: 120px;
        }
}

/* Unbranded footer */
.unbranded-footer .container {
    max-width: 1100px;
}

.unbranded-footer-top {
    flex-wrap: wrap;
    padding-bottom: 24px;
    display: flex;
    align-items: flex-start;
    gap: 180px;
}

.unbranded-footer-logo {
    flex-shrink: 0;
}

    .unbranded-footer-logo img {
        max-height: 48px;
        width: auto;
    }

.unbranded-footer-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 24px 48px;
    flex: 1;
    min-width: 0;
}

.unbranded-footer-col {
    min-width: 0;
}

.unbranded-footer-heading {
    font-family: "Noto Sans Thai", sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: #333;
    margin: 0 0 12px 0;
    text-transform: none;
    letter-spacing: 0;
}

.unbranded-footer-col .list-unstyled {
    margin: 0;
    padding: 0;
    list-style: none;
}

    .unbranded-footer-col .list-unstyled li {
        margin-bottom: 8px;
    }

    .unbranded-footer-col .list-unstyled a {
        font-family: "Noto Sans Thai", sans-serif;
        font-size: 14px;
        color: #333;
        text-decoration: none;
    }

        .unbranded-footer-col .list-unstyled a:hover {
            color: #1b5e20;
        }

.unbranded-footer-divider {
    height: 1px;
    background: #e0e0e0;
    margin: 0 0 16px 0;
}

.unbranded-footer-bottom {
    padding-bottom: 8px;
}

.unbranded-footer-copy {
    font-family: "Noto Sans Thai", sans-serif;
    font-size: 14px;
    color: #333;
    margin: 0;
}

@media (max-width: 767.98px) {
    .unbranded-footer-top {
        flex-direction: column;
        gap: 24px;
    }

    .unbranded-footer-nav {
        width: 100%;
    }

    .unbranded-footer-col {
        width: 100%;
    }
}

/* Popular Articles (un-article-active) */
.un-article-active {
    margin-top: 48px;
    width: 100%;
    padding: 48px 48px 40px 48px;
}

.un-article-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 24px;
}

.un-article-title {
    margin: 0;
    color: #333;
    font-family: "Noto Sans Thai";
    font-size: 32px;
    font-style: normal;
    font-weight: 600;
    line-height: 150%;
    letter-spacing: 0.32px;
}

.un-article-view-all {
    font-family: "Noto Sans Thai", sans-serif;
    font-size: 14px;
    font-weight: 500;
    color: #333;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

    .un-article-view-all:hover {
        color: #1b5e20;
    }

    .un-article-view-all i {
        font-size: 12px;
    }

.un-article-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
}

.un-article-card {
    display: block;
    text-decoration: none;
    color: inherit;
}

    .un-article-card:hover .un-article-card-title {
        color: #1b5e20;
    }

.un-article-card-img {
    border-radius: 12px;
    overflow: hidden;
    aspect-ratio: 4/3;
    margin-bottom: 12px;
    background: #f0f0f0;
}

    .un-article-card-img img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }

.un-article-card-title {
    margin: 0;
    transition: color 0.2s;
    color: #333;
    font-family: "Noto Sans Thai";
    font-size: 15px;
    font-style: normal;
    font-weight: 700;
    line-height: 150%;
}

@media (max-width: 991.98px) {
    .un-article-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 575.98px) {
    .un-article-grid {
        grid-template-columns: 1fr;
    }

    .un-article-title {
        font-size: 20px;
    }
}

/* Carousel split section - เริ่มจากสิ่งที่คุณกำลังเผชิญ */
.un-carousal-split {
    width: 100%;
    padding: 40px 32px 40px 48px;
    background: #e5f4ec;
    display: flex;
    position: relative;
    gap: 40px;
    flex-direction: column;
}

.un-carousal-heading {
    color: #00682f;
    font-family: "Noto Sans Thai";
    font-size: 24px;
    font-style: normal;
    font-weight: 600;
    line-height: 150%;
    letter-spacing: 0.32px;
    margin-bottom: 0;
}

.un-carousal-grid {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    gap: 32px !important;
    padding: 0 0 24px 0 !important;
    scroll-behavior: smooth !important;
    -webkit-overflow-scrolling: touch !important;
}

.un-carousal-card {
    position: relative;
    display: flex;
    flex-direction: row;
    border-radius: 16px;
    overflow: hidden;
    min-height: 380px;
    transition: transform 0.2s;
    padding: 9px;
    background: #b2dec6;
    min-width: 266px;
}

    .un-carousal-card:hover {
        transform: translateY(-4px);
    }

/* .un-carousal-card-bg {
    position: absolute;
    inset: 0;
} */
.un-carousal-card-bg {
    position: relative;
}

.un-carousal-card-overlay {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    background: #0000008a;
    left: 0;
    right: 0;
    top: 0;
    border-radius: 12px;
}

.un-carousal-card-bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    min-height: 240px;
    border-radius: 12px;
}

.un-carousal-card-body {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    padding: 20px 16px 12px;
    pointer-events: none;
}

.un-four-card-title {
    color: #333;
    font-family: "Noto Sans Thai";
    font-size: 32px;
    font-style: normal;
    font-weight: 600;
    line-height: 150%;
    letter-spacing: 0.32px;
    text-align: center;
    margin: 0px auto;
}

.un-carousal-card-desc {
    margin: 0;
    color: #fff;
    font-family: "Noto Sans Thai";
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 150%;
}

.un-carousal-card-footer {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 16px;
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}

.un-carousal-card-icon {
    width: 36px;
    height: 36px;
    min-width: 36px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.95);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.un-carousal-card-icon--study::after,
.un-carousal-card-icon--work::after,
.un-carousal-card-icon--mom::after {
    content: "";
    width: 20px;
    height: 20px;
    background: #8d6e63;
    border-radius: 50%;
}

.un-carousal-card-benefit {
    font-family: "Noto Sans Thai", sans-serif;
    font-size: 13px;
    font-weight: 500;
    color: #fff;
    flex: 1;
    line-height: 1.4;
}

.un-carousal-card-arrow {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.9);
    flex-shrink: 0;
}

@media (max-width: 991.98px) {
    .un-carousal-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .un-carousal-card {
        min-height: 300px;
    }
}

@media (max-width: 575.98px) {
    .un-carousal-split {
        padding: 24px 16px 32px;
    }

    .un-carousal-heading {
        font-size: 20px;
        padding: 0 0 16px 0;
    }

    .un-carousal-grid {
        grid-template-columns: 1fr;
        padding: 0 16px;
        gap: 16px;
    }

    .un-carousal-card {
        min-height: 280px;
    }

    .un-carousal-card-bg img,
    .un-carousal-card-bg {
        min-height: 160px;
    }
}

/* Four card section - เสริมศักยภาพสมองด้วยพฤติกรรมง่าย ๆ */
.un-four-card-sec {
    width: 100%;
    padding: 80px 48px 0px;
    align-items: flex-start;
    display: flex;
    gap: 24px;
    flex-direction: column;
}

.un-four-card-title {
    color: #333;
    text-align: center;
    font-family: "Noto Sans Thai";
    font-size: 32px;
    font-style: normal;
    font-weight: 600;
    line-height: 150%;
    letter-spacing: 0.32px;
}

.un-four-card-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
}

.un-four-card {
    background: #cce9d9;
    border-radius: 100px;
    display: flex;
    max-width: 506px;
    padding: 16px;
    align-items: center;
    gap: 24px;
    flex-shrink: 0;
}

.un-four-card-icon-wrap {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: #1b5e20;
    border: 2px solid #81c784;
    display: flex;
    align-items: center;
    justify-content: center;
}

.un-four-card-icon {
    width: 28px;
    height: 28px;
    display: block;
}

.un-four-card-icon--breakfast {
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 8h1a4 4 0 0 1 0 8h-1'/%3E%3Cpath d='M2 8h16v9a4 4 0 0 1-4 4H6a4 4 0 0 1-4-4V8z'/%3E%3Cline x1='6' y1='1' x2='6' y2='4'/%3E%3Cline x1='10' y1='1' x2='10' y2='4'/%3E%3Cline x1='14' y1='1' x2='14' y2='4'/%3E%3C/svg%3E") center/contain no-repeat;
}

.un-four-card-icon--learn {
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 20h20v-4H2v4z'/%3E%3Cpath d='M4 8l8-4 8 4'/%3E%3Cpath d='M4 8v8h16V8'/%3E%3Cpath d='M12 12v4'/%3E%3Cpath d='M4 16l4 4'/%3E%3Cpath d='M20 16l-4 4'/%3E%3Cpath d='M4 12l4 4'/%3E%3Cpath d='M20 12l-4 4'/%3E%3C/svg%3E") center/contain no-repeat;
}

.un-four-card-icon--social {
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='9' cy='7' r='4'/%3E%3Cpath d='M23 21v-2a4 4 0 0 0-3-3.87'/%3E%3Cpath d='M16 3.13a4 4 0 0 1 0 7.75'/%3E%3Ccircle cx='18' cy='8' r='2'/%3E%3Ccircle cx='12' cy='12' r='2'/%3E%3C/svg%3E") center/contain no-repeat;
}

.un-four-card-icon--read {
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 18h6'/%3E%3Cpath d='M10 22h4'/%3E%3Cpath d='M15 8a3 3 0 0 0-6 0c0 2 1 3 1.5 4.5L9 15h6l-1.5-2.5C14 11 15 10 15 8z'/%3E%3Cpath d='M12 2v1'/%3E%3C/svg%3E") center/contain no-repeat;
}

.un-four-card-text {
    margin: 0;
    color: #333;
    font-family: "Noto Sans Thai";
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 150%;
}

.un-four-card-icon {
    display: flex;
    width: 64px;
    height: 64px;
    padding: 8px;
    justify-content: center;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
    aspect-ratio: 1 / 1;
    border-radius: 200px;
    border: 4px solid #f8f7f5;
    background: #1a9c55;
}

.un-four-card-view-wrap {
    text-align: center;
    margin-bottom: 24px;
}

.un-four-card-view-all {
    font-family: "Noto Sans Thai", sans-serif;
    font-size: 16px;
    font-weight: 500;
    color: #1b5e20;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

    .un-four-card-view-all:hover {
        color: #2e7d32;
    }

    .un-four-card-view-all i,
    .un-four-card-view-all .un-four-card-view-all-icon {
        font-size: 14px;
    }

/* Initially hide cards beyond the first 4 */
/* Wrapper for smooth expand/collapse of extra cards */
.un-four-card-more-wrap {
    display: grid;
    grid-template-rows: 0fr;
    grid-column: 1 / -1;
    transition: grid-template-rows 0.4s ease;
}

.un-four-card-sec.is-expanded .un-four-card-more-wrap {
    grid-template-rows: 1fr;
}

.un-four-card-more-inner {
    min-height: 0;
    overflow: hidden;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
    transition: opacity 0.35s ease;
}

.un-four-card-sec:not(.is-expanded) .un-four-card-more-inner {
    opacity: 0;
}

.un-four-card-sec.is-expanded .un-four-card-more-inner {
    opacity: 1;
}

/* Button styled like link for See more / See less */
button.un-four-card-view-all {
    border: none;
    background: none;
    cursor: pointer;
    padding: 0;
}

.un-four-card-view-all-icon {
    transition: transform 0.2s ease;
}

.un-four-card-sec.is-expanded .un-four-card-view-all-icon {
    transform: rotate(180deg);
}

.un-four-card-source {
    margin: 0;
    color: #827c71;
    font-family: "Noto Sans Thai";
    font-size: 11px;
    font-style: normal;
    font-weight: 400;
    line-height: 150%;
}

.unbranded-container {
    display: flex !important;
    gap: 16px;
    justify-content: center !important;
    align-items: center !important;
}

.unbranded-header .navbar-collapse {
    display: flex;
    align-items: center;
    justify-content: center;
}

.unbranded-header .navbar-nav .nav-link {
    padding: 1rem 1rem 0 !important;
}

.search-seg .nav-link {
    padding: 1rem 1rem 0;
}

.search-seg {
    padding: 20px 0;
}

.unbranded-header .navbar-nav {
    padding: 20px 0;
}

.unbranded-header li.nav-item.dropdown.dropdown-mega a {
    gap: 8px;
}

.unbranded-header li.nav-item.dropdown i {
    font-size: 14px;
}

.mob-just-end {
    justify-content: center !important;
}

.un-tab3-card-bar .un-tab3-card-arrow {
    display: flex;
    width: 32px;
    height: 32px;
    padding: 10px;
    justify-content: center;
    align-items: center;
    gap: 10px;
    aspect-ratio: 1 / 1;
    border-radius: 40px;
    background: #fff;
    color: #333;
}

.un-tab3-card-bar {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    flex-direction: row;
    width: 100%;
}

.un-carousal-card-title {
    margin: 0 0 8px 0;
    color: #fff;
    font-family: "Noto Sans Thai";
    font-size: 22px;
    font-style: normal;
    font-weight: 600;
    line-height: 150%;
    letter-spacing: 0.46px;
}

section.first-section-detail {
    padding-top: 80px !important;
}

.substanceDetails-section {
    margin-top: 80px !important;
}

.articleDetails-section {
    margin-top: 80px !important;
}

.substanceDetails-section .breadcrumb {
    padding-bottom: 0px;
    padding-top: 80px !important;
    margin-bottom: 0px;
}

@media (max-width: 991.98px) {
    .d-xs-none {
        display: none;
    }

    .unbranded-header .navbar-toggler {
        border: none;
        padding: 0.25rem 0.5rem;
    }

    .container.unbranded-container {
        padding: 0;
        justify-content: space-between !important;
    }

    .unbranded-logo {
        width: 100%;
        height: 32px;
        object-fit: contain;
    }

    .search-seg .nav-link {
        padding: 0;
    }

    .unbranded-header .navbar-collapse {
        display: flex;
        align-items: center;
        justify-content: flex-start;
    }

    .mob-fit {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 16px;
    }
}

@media (max-width: 767.98px) {
    .un-four-card-grid {
        grid-template-columns: 1fr;
    }

    .un-four-card-more-inner {
        grid-template-columns: 1fr;
    }

    .un-four-card-title {
        font-size: 20px;
    }

    .unbranded-hero.hero-banner-section .swiper-slide {
        height: 710px;
        min-height: 710px;
    }

    .mob-just-end {
        justify-content: flex-end !important;
    }

    .discover-menu-left {
        display: none;
    }

    .brain-assessment-score-legend-grid {
        display: flex;
        align-items: center;
        justify-content: flex-start !important;
        width: 100%;
        display: flex !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        gap: 16px !important;
        scroll-behavior: smooth !important;
        -webkit-overflow-scrolling: touch !important;
    }

    .brain-assessment-score-legend-item {
        min-width: 288px;
    }
}

/*Responsiveness*/
@media (max-width: 597px) {
    .green-bg-video-section .clubs-section-item-content {
        opacity: 1;
        visibility: visible;
        transition: all 0.3s ease;
    }

    .clubs-section-item-content a.cta-link {
        display: none !important;
    }

    .green-bg-video-section .video-logo {
        opacity: 1;
        visibility: visible;
        top: 25%;
        transition: all 0.3s ease;
    }

        .green-bg-video-section .video-logo svg {
            width: 90px !important;
            flex-shrink: 0;
            aspect-ratio: 167.84 / 120;
            transition: all 0.3s ease;
        }

    .health-insight-card.small-card {
        border-bottom: none;
    }
}

/* Mobile Footer Styles as per image */
@media (max-width: 767.98px) {
    .unbranded-footer {
        padding-top: 40px !important;
        padding-bottom: 40px !important;
    }

    .unbranded-footer-top {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 48px !important;
        margin-bottom: 32px !important;
    }

    .unbranded-footer-logo {
        margin-bottom: 0 !important;
    }

        .unbranded-footer-logo img {
            max-height: none !important;
            width: 140px !important;
            height: auto !important;
        }

    .unbranded-footer-nav {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 40px 20px !important;
        width: 100% !important;
    }

    .unbranded-footer-col {
        width: auto !important;
        margin-bottom: 0 !important;
    }

    .unbranded-footer-heading {
        font-family: "Inter", "Noto Sans Thai", sans-serif !important;
        font-size: 15px !important;
        font-weight: 400 !important;
        color: #333 !important;
        margin-bottom: 20px !important;
        line-height: 1.4 !important;
        text-align: left;
    }

    .unbranded-footer-col .list-unstyled li {
        margin-bottom: 20px !important;
    }

        .unbranded-footer-col .list-unstyled li:last-child {
            margin-bottom: 0 !important;
        }

    .unbranded-footer-col .list-unstyled a {
        font-family: "Inter", "Noto Sans Thai", sans-serif !important;
        font-size: 15px !important;
        font-weight: 400 !important;
        color: #333 !important;
        line-height: 1.4 !important;
        display: block !important;
    }

    /* Create the large gap before Privacy/Terms cols if they are the 3rd and 4th columns */
    .unbranded-footer-col:nth-child(3),
    .unbranded-footer-col:nth-child(4) {
        margin-top: 20px !important;
    }

    .unbranded-footer-divider {
        height: 1px !important;
        background-color: #eee !important;
        margin: 24px 0 !important;
        width: 100% !important;
    }

    .unbranded-footer-bottom {
        padding-top: 0 !important;
    }

    .unbranded-footer-copy {
        font-size: 13px !important;
        color: #888 !important;
        font-weight: 400 !important;
        opacity: 0.8 !important;
    }
}

/* Mobile Mega Menu Side-by-Side Containers as per request */
/* --- CONSOLIDATED MOBILE MENU & MEGA MENU OVERRIDES (SESSION FIXES) --- */
@media (max-width: 991.98px) {
    /* Navbar List Design: 24px Indentation & Airy Spacing */
    .unbranded-header .navbar .navbar-nav {
        flex-direction: column !important;
        width: 100% !important;
        height: auto !important;
        gap: 0 !important;
        padding: 0 !important;
        margin: 0 !important;
        align-items: stretch !important;
        background: #fff !important;
        overflow-x: hidden !important;
    }

    .unbranded-header .navbar-nav .nav-item {
        width: 100% !important;
        border: none !important;
        position: relative !important;
        margin: 0 !important;
    }

        /* Indented horizontal dividers as per design */
        .unbranded-header .navbar-nav .nav-item:not(:last-child)::after {
            content: "" !important;
            position: absolute !important;
            bottom: 0 !important;
            left: 24px !important; /* Match the 24px text indentation */
            right: 0 !important;
            height: 1px !important;
            background-color: #e8e8e8 !important;
            z-index: 5 !important;
        }

    .unbranded-header .navbar-nav .nav-link {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        padding: 1.25rem 24px !important; /* Force 24px side padding */
        margin: 0 !important;
        font-size: 16px !important;
        color: #333 !important;
        font-weight: 500 !important;
        font-family: inherit !important;
        border: none !important;
        width: 100% !important;
        background: transparent !important;
    }

    .unbranded-header .navbar-nav .dropdown-toggle::after {
        display: none !important;
    }

    .unbranded-nav-chevron {
        font-size: 1rem !important;
        color: #888 !important;
        opacity: 1 !important;
    }

    /* Search list item specific: group icon and text on the left */
    .unbranded-header .navbar-nav .search-link {
        justify-content: flex-start !important;
        gap: 16px !important;
    }

        .unbranded-header .navbar-nav .search-link i:first-child {
            font-size: 1.2rem !important;
            color: #444 !important;
        }

        .unbranded-header .navbar-nav .search-link i:last-child {
            margin-left: auto !important;
        }

    /* Mega Menu (Inside Mobile Navbar) Positioning Reset */
    .unbranded-header .dropdown-mega .dropdown-menu {
        position: static !important;
        top: 0 !important;
        max-height: none !important;
        overflow-y: visible !important;
        width: 100% !important;
        opacity: 0 !important;
        visibility: hidden !important;
        transform: none !important;
        box-shadow: none !important;
        border: none !important;
        padding: 0 !important;
        transition: none !important;
    }

        .unbranded-header .dropdown-mega .dropdown-menu.show {
            opacity: 1 !important;
            visibility: visible !important;
            display: block !important;
        }

        .unbranded-header .dropdown-mega .dropdown-menu .mega-menu-inner.container {
            max-width: 100% !important;
            padding-left: 24px !important;
            padding-right: 24px !important;
            padding-bottom: 24px !important;
            background-color: #ffffff !important;
        }

    .mega-menu-inner {
        flex-direction: column !important;
        gap: 20px !important;
        padding: 16px 0 !important;
    }

    /* Solid background for mega menu columns on mobile */
    .bg-white-grey {
        background: #ffffff !important;
    }

    /* Side-by-Side Mega Menu Items (50/50 Layout) */
    .un-branded-mega-menu-item {
        margin-bottom: 0 !important;
    }

    .mega-menu-inner .row .col-12.col-md-6 .row:not(.mar-left-10) {
        display: flex !important;
        flex-wrap: wrap !important;
        margin-left: -8px !important;
        margin-right: -8px !important;
    }

        .mega-menu-inner .row .col-12.col-md-6 .row:not(.mar-left-10) > .col-12 {
            flex: 0 0 50% !important;
            max-width: 50% !important;
            padding-left: 8px !important;
            padding-right: 8px !important;
            margin-bottom: 0 !important;
        }

    ul.unbranded-mega-menu-list {
        display: block !important;
        min-width: unset !important;
        max-width: unset !important;
        width: 100% !important;
        padding: 0 !important;
    }

        ul.unbranded-mega-menu-list li {
            width: 100% !important;
            margin-bottom: 8px !important;
        }

            ul.unbranded-mega-menu-list li a {
                min-width: unset !important;
                max-width: unset !important;
                width: 100% !important;
                padding: 4px 0 !important;
                gap: 8px !important;
                font-size: 14px !important;
                font-weight: 400 !important;
                color: #333 !important;
                display: flex !important;
                align-items: center !important;
            }

                ul.unbranded-mega-menu-list li a .unbranded-mega-menu-icon {
                    width: 32px !important;
                    height: 32px !important;
                    flex-shrink: 0;
                }

                    ul.unbranded-mega-menu-list li a .unbranded-mega-menu-icon svg {
                        max-width: 24px !important;
                        height: auto !important;
                    }

    /* --- Brain Active Club Tab area fixes --- */
    .un-multi-tab {
        padding: 0 !important;
        background: #cde9d9 !important;
        overflow: visible !important;
        width: 100% !important;
        position: relative !important;
        display: block !important;
    }

    .un-multi-tab-panel {
        scroll-margin-top: 132px !important;
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: hidden !important; /* Lock each panel horizontally */
    }

    .un-multi-tab > .container {
        max-width: none !important;
        padding: 0 !important;
        width: 100% !important;
        margin: 0 !important;
    }

    .un-multi-tab-body {
        grid-template-columns: 1fr !important;
        padding: 40px 24px !important;
        text-align: left !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    .un-multi-tab-panel {
        display: block !important;
        width: 100% !important;
        border-radius: 20px 20px 0 0 !important;
        margin-top: 0 !important;
        padding-top: 20px !important;
        box-sizing: border-box !important;
    }

        .un-multi-tab-panel + .un-multi-tab-panel {
            margin-top: 0 !important;
            border-radius: 0 !important;
        }

    .un-multi-tab-media {
        order: 1 !important;
        aspect-ratio: auto !important;
        width: 100% !important;
        max-width: 100% !important;
        display: block !important;
        overflow: visible !important;
        box-sizing: border-box !important;
    }

    .un-multi-tab-nav {
        flex-wrap: nowrap !important;
        gap: 4px !important;
        padding: 24px 15px 0 !important;
        background: #cde9d9 !important;
        position: sticky !important;
        z-index: 1003 !important;
        border-bottom: none !important;
        box-sizing: border-box !important;
        will-change: transform !important;
        -webkit-backface-visibility: hidden !important;
        backface-visibility: hidden !important;
    }

    .un-multi-tab-nav-btn {
        flex: 1 1 0 !important;
        padding: 12px 5px !important;
        font-size: 13px !important;
        height: auto !important;
        min-height: 54px !important;
        border-radius: 16px 16px 0 0 !important;
        background: rgba(255, 255, 255, 0.4) !important;
        border: 1px solid #fff !important;
        border-bottom: none !important;
        color: #00682f !important;
        line-height: 1.2 !important;
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        text-align: center !important;
        box-sizing: border-box !important;
    }

        .un-multi-tab-nav-btn.is-active {
            background: #fff !important;
            font-weight: 700 !important;
            opacity: 1 !important;
        }

    .un-multi-tab-number {
        font-size: 100px !important;
        line-height: 1 !important;
        margin-bottom: 20px !important;
        color: #333 !important;
    }

    .un-multi-tab-title {
        font-size: 32px !important;
        font-weight: 700 !important;
        color: #333 !important;
        margin-bottom: 15px !important;
    }

    /* Tab 3 Mobile Cards: Vertical Stack & Circular Buttons */
    .un-tab3-cards {
        flex-direction: column !important;
        gap: 20px !important;
        width: 100% !important;
        max-width: 100% !important;
        align-items: stretch !important;
        box-sizing: border-box !important;
        margin: 0 !important;
    }

    .un-tab3-card {
        min-width: 0 !important;
        max-width: 100% !important;
        width: 100% !important;
        padding: 12px 12px 20px 12px !important;
        box-sizing: border-box !important;
    }

    .un-tab3-card-img {
        width: 100% !important;
        border-radius: 12px !important;
        overflow: hidden !important;
    }

        .un-tab3-card-img img {
            width: 100% !important;
            height: auto !important;
            display: block !important;
            object-fit: contain !important;
        }

    .un-tab3-card-bar {
        width: 100% !important;
        padding: 15px 5px 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        box-sizing: border-box !important;
    }

    .un-tab3-card-title {
        font-size: 19px !important;
        font-weight: 600 !important;
        color: #fff !important;
        line-height: 1.3 !important;
        flex: 1 !important;
        margin-right: 15px !important;
        text-align: left !important;
    }

    .un-carousal-split {
        padding: 40px 0 !important;
        background: #e7f5ed !important;
    }

    .un-carousal-heading {
        padding: 0 24px !important;
        font-size: 24px !important;
        font-weight: 700 !important;
        color: #00682f !important;
        margin-bottom: 24px !important;
        text-align: left !important;
    }

    .un-carousal-grid {
        display: flex !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        gap: 16px !important;
        padding: 0 24px 20px 24px !important;
        scroll-behavior: smooth !important;
        -webkit-overflow-scrolling: touch !important;
    }

        .un-carousal-grid::-webkit-scrollbar {
            display: none !important;
        }

    .un-carousal-card {
        max-width: 256px !important;
        border-radius: 16px !important;
        border: 8px solid #b6e1cc !important;
        overflow: hidden !important;
        position: relative !important;
        display: flex !important;
        flex-direction: column !important;
        padding: 16px 0px !important;
    }

    .un-carousal-card-bg {
        position: absolute !important;
        top: -1px !important;
        left: -1px !important;
        width: calc(100% + 2px) !important;
        height: calc(100% + 2px) !important;
        z-index: 1 !important;
    }

        .un-carousal-card-bg img {
            width: 100% !important;
            height: 100% !important;
            object-fit: cover !important;
        }

    .un-carousal-card-body {
        position: relative !important;
        z-index: 3 !important;
        flex: 1 !important;
    }

    .un-carousal-card-title {
        font-size: 32px !important;
        font-weight: 700 !important;
        color: #fff !important;
        margin-bottom: 16px !important;
        line-height: 1.2 !important;
    }

    .un-carousal-card-desc {
        font-size: 16px !important;
        color: rgba(255, 255, 255, 0.9) !important;
        line-height: 1.4 !important;
        margin: 0 !important;
    }

    .un-carousal-card-footer {
        position: relative !important;
        z-index: 3 !important;
        display: flex !important;
        align-items: center !important;
        gap: 8px !important;
        margin-top: auto !important;
        padding-top: 10px !important;
    }

    .un-carousal-card-icon {
        width: 36px !important;
        height: 36px !important;
        border-radius: 50% !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        flex-shrink: 0 !important;
    }

        .un-carousal-card-icon svg {
            max-width: 24px !important;
            height: auto !important;
        }

    .un-carousal-card-benefit {
        font-size: 14px !important;
        font-weight: 600 !important;
        color: #fff !important;
        flex: 1 !important;
        line-height: 1.2 !important;
        display: -webkit-box !important;
        -webkit-line-clamp: 2 !important;
        line-clamp: 2 !important;
        -webkit-box-orient: vertical !important;
        overflow: hidden !important;
    }

    .un-carousal-card-arrow {
        color: #fff !important;
        font-size: 16px !important;
        flex-shrink: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    .un-tab3-card-arrow {
        color: #33a768 !important;
        border-radius: 50% !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        flex-shrink: 0 !important;
    }

    .un-carousal-card-footer .un-tab3-card-arrow {
        color: #fff !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        font-size: 14px !important;
        flex-shrink: 0 !important;
    }

    /* --- Wellness Icons & Page Nav fixes --- */
    .needs-items-grid {
        gap: 1.5rem !important;
    }

    .icon-circle {
        width: 100px !important;
        height: 100px !important;
    }

    .wellness-icon {
        width: 50px !important;
        height: 50px !important;
    }

    .needs-item-label {
        font-size: 12px !important;
    }

    .page-stick-nav {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 1rem !important;
    }

    .page-stick-nav-links {
        flex-direction: row !important; /*0203*/
        gap: 1rem !important;
        width: 100% !important;
    }

    .page-stick-nav-link {
        width: 100% !important;
        padding: 0.75rem 0 !important;
    }

    /* --- Mobile Menu Overlay Styles --- */
    .unbranded-header .navbar-collapse {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        z-index: 1040 !important;
        margin: 0 !important;
        padding: 0 !important;
        border-radius: 0 !important;
        background-color: #fff !important;
        overflow-y: auto !important;
        max-height: 100vh !important;
        display: flex !important;
        flex-direction: column !important;
    }

        .unbranded-header .navbar-collapse:not(.show) {
            display: none !important;
        }

    .unbranded-mobile-menu-header {
        flex-shrink: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        padding: 1rem 1.25rem !important;
        background-color: #d9c659 !important;
        border-bottom: none !important;
        width: 100% !important;
    }

        .unbranded-mobile-menu-header .unbranded-logo {
            height: 32px !important;
            filter: brightness(0) invert(1) !important;
        }

    .unbranded-mobile-menu-actions {
        display: flex !important;
        align-items: center !important;
        gap: 1rem !important;
    }

    .unbranded-mobile-menu-search,
    .unbranded-mobile-menu-close {
        color: #fff !important;
        font-size: 1.25rem !important;
        text-decoration: none !important;
    }

    .clubs-section {
        display: flex !important;
        padding: 40px 10px !important;
        flex-direction: column !important;
        align-items: center !important;
        gap: 40px !important;
    }

    .un-mobile-menu-title {
        padding: 0.75rem 1.25rem !important;
        font-weight: 600 !important;
        color: #00682f !important;
        font-size: 1rem !important;
        border-bottom: 1px solid #e5e5e5 !important;
        background: #fff !important;
    }

    .un-tab1-right {
        padding: 40px 24px 40px 24px;
    }

    .un-tab1-left {
        top: 0%;
        padding: 0px 24px 40px 24px;
    }

    .un-article-active {
        padding: 48px 0 40px 0;
    }

    .un-tab1-ingredient-head--bar .un-tab1-ingredient-title {
        font-size: 14px;
    }

    .un-tab1-food-card {
        padding: 0px;
    }

    .un-four-card-sec {
        padding: 60px 24px 0 !important;
        align-items: flex-start !important;
    }

    .un-four-card-title {
        font-size: 26px !important;
        font-weight: 700 !important;
        text-align: left !important;
        line-height: 1.3 !important;
        margin-bottom: 30px !important;
        color: #333 !important;
    }

    .un-four-card-grid {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
        width: 100% !important;
    }

    .un-four-card-more-inner {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }

    .un-four-card {
        background: #cde9d9 !important;
        border-radius: 100px !important;
        padding: 10px 10px 10px 10px !important;
        max-width: none !important;
        width: 100% !important;
        display: flex !important;
        align-items: center !important;
        gap: 16px !important;
        box-sizing: border-box !important;
    }

    .un-four-card-icon-wrap {
        display: flex !important;
        width: 64px !important;
        height: 64px !important;
        min-width: 64px !important;
        background: #1a9c55 !important;
        border: 3px solid #fff !important;
        border-radius: 50% !important;
        align-items: center !important;
        justify-content: center !important;
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1) !important;
        flex-shrink: 0 !important;
        overflow: hidden !important;
    }

    .un-four-card-icon {
        display: flex !important;
        width: 32px !important;
        height: 32px !important;
        justify-content: center !important;
        align-items: center !important;
        border: none !important;
        background: transparent !important;
        padding: 0 !important;
    }

        .un-four-card-icon svg {
            width: 100% !important;
            height: 100% !important;
            fill: #119b59 !important;
        }

    .un-four-card-text {
        font-size: 15px !important;
        font-weight: 500 !important;
        line-height: 1.3 !important;
        color: #333 !important;
        text-align: left !important;
        padding-right: 15px !important;
    }

    .un-four-card-view-all {
        color: #4a4538 !important;
        font-size: 20px !important;
        font-weight: 700 !important;
        text-decoration: none !important;
        display: inline-flex !important;
        align-items: center !important;
        gap: 12px !important;
        margin-top: 20px !important;
    }

        .un-four-card-view-all i {
            font-size: 24px !important;
            color: #4a4538 !important;
        }

    .un-four-card-source {
        color: #8c8c8c !important;
        font-size: 13px !important;
        line-height: 1.5 !important;
        margin-top: 30px !important;
        text-align: left !important;
        padding: 0 5px !important;
    }

        .un-four-card-source strong {
            display: block !important;
            margin-bottom: 5px !important;
        }

    .un-article-header {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        margin-bottom: 24px !important;
        padding: 0 24px !important;
    }

    .un-article-title {
        font-size: 24px !important;
        font-weight: 700 !important;
        color: #333 !important;
        margin: 0 !important;
    }

    .un-article-view-all {
        font-size: 16px !important;
        color: #333 !important;
        text-decoration: none !important;
        display: flex !important;
        align-items: center !important;
        gap: 8px !important;
    }

    .un-article-grid {
        display: flex !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        gap: 16px !important;
        padding: 0 24px 20px 24px !important;
        scroll-behavior: smooth !important;
        -webkit-overflow-scrolling: touch !important;
    }

        .un-article-grid::-webkit-scrollbar {
            height: 4px;
            background-color: transparent;
        }

        .un-article-grid::-webkit-scrollbar-thumb {
            background-color: #00682f;
            border-radius: 10px;
        }

    .un-article-card {
        flex: 0 0 260px !important;
        max-width: 260px !important;
        display: flex !important;
        flex-direction: column !important;
        text-align: left !important;
        text-decoration: none !important;
    }

    .un-article-card-img {
        width: 100% !important;
        aspect-ratio: 16/10 !important;
        border-radius: 16px !important;
        overflow: hidden !important;
        margin-bottom: 12px !important;
    }

        .un-article-card-img img {
            width: 100% !important;
            height: 100% !important;
            object-fit: cover !important;
        }

    .un-article-card-title {
        font-size: 16px !important;
        font-weight: 700 !important;
        line-height: 1.4 !important;
        color: #333 !important;
        display: -webkit-box !important;
        -webkit-line-clamp: 2 !important;
        line-clamp: 2 !important;
        -webkit-box-orient: vertical !important;
        overflow: hidden !important;
        margin: 0 !important;
    }

    .un-tab1-split {
        grid-template-columns: 1fr !important;
    }

    /* .un-tab1-right override is already handled above line 5875 */

    .un-tab1-food-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    .un-tab1-ingredient-cards {
        grid-template-columns: 1fr !important;
    }
}

@media (max-width: 575.98px) {
    .needs-items-grid {
        gap: 1rem !important;
    }

    .wellness-icon {
        width: 40px !important;
        height: 40px !important;
    }

    .needs-item-label {
        font-size: 11px !important;
    }
}

/*02-03-2026*/

@media (max-width: 600px) {
    .needs-section-content h2 {
        font-size: 26px;
        font-weight: 700;
        letter-spacing: 2%;
    }

    .needs-items-grid {
        justify-content: start !important;
    }

    .needs-item {
        flex: 0 0 calc(50% - 1.5rem) !important;
        max-width: calc(50% - 1.5rem) !important;
    }

    .icon-circle,
    .inner-icon-circle {
        width: 125px !important;
        height: 125px !important;
    }

    ul.page-stick-nav-links li a {
        width: max-content !important;
    }

    .needs-items-grid {
        gap: 3rem !important;
    }

    .needs-item-label {
        font-size: 13px !important;
        font-weight: 700 !important;
        width: 100%;
    }

    .clubs-section-content h1 {
        font-size: 24px !important;
        font-weight: 600 !important;
    }

    .green-bg-video-section .clubs-section-item-content p {
        position: relative;
        top: 43px;
        font-size: 14px;
        font-weight: 700;
    }

    .green-bg-video-section .clubs-section-item-content {
        top: 54%;
    }

    .revamp-sub-persona-title {
        font-size: 23px;
        font-weight: 700;
    }

    .persona-card {
        height: 400px;
        overflow: hidden;
    }

    .persona-content {
        min-height: 400px;
    }

    .persona-content {
        justify-content: flex-start;
    }

    .persona-btn {
        margin-top: auto;
        /* padding: 140px 0px 0px 0px; */
    }

    .discover-card {
        flex-direction: row !important;
        padding: 10px;
        gap: 10px;
    }

    .discover-card-icon {
        width: 60px !important;
        height: 60px !important;
    }

        .discover-card-icon svg {
            width: 30px !important;
            height: 30px !important;
        }

    .discover-card-title {
        font-size: 16px;
        font-weight: 700;
    }

    .discover-card-content {
        gap: 0;
    }

    .discover-card-description {
        margin-bottom: 0;
    }

    .unbranded-discover-section {
        background: #025f1d !important;
    }

    .discover-cards-column {
        padding: 0px 20px;
    }

    .health-insights-main-title {
        font-size: 26px;
        text-align: center;
    }

    .health-insights-subtitle {
        font-size: 18px;
        font-weight: 400;
        text-align: center;
    }

    .health-insights-stacked {
        margin: 0 !important;
        scrollbar-width: none !important;
    }

    .challenge-navigation {
        flex-direction: row;
        gap: 12px;
        margin-top: 24px;
    }

    .jigsaw-header h3 {
        display: flex;
        justify-content: center;
        flex-direction: column;
        flex-wrap: nowrap;
        gap: 10px;
        align-items: flex-start;
    }

    .challenge-intro {
        flex-direction: row !important;
        max-width: 100% !important;
    }

    .nutrient-card.nutrient-card-challenge {
        max-height: 100% !important;
        height: 100% !important;
        min-width: 100% !important;
        width: 100% !important;
    }

    section.brain-assessment-section {
        margin-top: 50px !important;
    }

    .brain-assessment-option-chips {
        flex-direction: column;
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
    }

    .brain-assessment-quiz-wrap {
        padding: 24px 24px;
    }

    .brain-assessment-result-nav {
        display: flex;
        justify-content: center !important;
    }

    a.nav-link.dropdown-toggle.show {
        color: #00682f !important;
    }

    a.nav-link.dropdown-toggle.show {
        color: #00682f !important;
    }
}

@media (max-width: 320px) {
    .nutrient-card {
        max-width: none !important;
        min-height: auto !important;
        min-width: 131px !important;
        max-height: 131px !important;
    }
}

@media (max-width: 380px) {
    .brain-assessment-option-chip {
        min-width: 100px !important;
        padding: 4px 16px;
        align-items: center;
        gap: 10px;
    }
}

@media (max-width: 600px) {
    .brain-assessment-result-footer.p-3 {
        background: #f1fdf4;
        text-align: center;
        width: 100%;
        border-radius: 0px 0px 20px 20px;
        gap: 20px;
        display: flex;
        flex-direction: column;
    }

    .brain-assessment-result-footer a.btn.btn-solid-green.btn-learn-more {
        margin-left: 0px;
    }

    section.breadcrumbs-section.trans-bread {
        background: transparent;
        position: absolute;
        left: 0;
        right: 0;
        color: white;
        z-index: 10;
        top: 0px;
        margin-top: 80px;
    }

    .brain-assessment-card {
        padding: 32px 24px 40px;
        margin-top: 60px;
    }

    .brain-assessment-option-chip {
        min-width: 100%;
    }
}

.nutrient-card.nutrient-card-challenge.nutrient-card-vitamin-b12 {
    border: 4px solid var(--Color-Badge-Coral-Conqueror-10, #fff0ee);
    background: linear-gradient( 180deg, var(--Pomegranate-10, #fff1f2) 0%, var(--BlackandWhite-SmokeGray-White, #fff) 100% );
}

.substanceDetails-section {
    margin-top: 25px;
}

.un-mobile-menu-title.d-lg-none {
    display: none;
}

.discover-card-description p {
    margin-bottom: 0px;
}

.un-carousal-card-footer .un-tab3-card-arrow {
    width: 30px !important;
    height: 30px !important;
    font-size: 16px !important;
    background: none !important;
    color: white !important;
}

.brain-assessment-score-legend-item--0-15 p.brain-assessment-score-legend-text {
    border-radius: 16px;
    background: linear-gradient( 176deg, var(--BEC-100, rgba(0, 104, 47, 0.1)) 4.32%, var(--BEC-Main-90, rgba(0, 145, 66, 0.1)) 92.67% );
}

.brain-assessment-score-legend-item--16-30
p.brain-assessment-score-legend-text {
    border-radius: 16px;
    background: linear-gradient( 180deg, var(--BEC-Main-90, rgba(0, 145, 66, 0.1)) 0.26%, var(--Color-Badge-Emerald-40, rgba(160, 212, 104, 0.1)) 153% );
}

.brain-assessment-score-legend-item--31-45
p.brain-assessment-score-legend-text {
    border-radius: 16px;
    background: linear-gradient( 179deg, var(--Semantic-Color-Warning-60, rgba(243, 156, 18, 0.1)) 50.22%, var(--Gold-Logo-Color-40, rgba(246, 226, 110, 0.1)) 216.14% );
}

.brain-assessment-score-legend-item--46-90
p.brain-assessment-score-legend-text {
    border-radius: 16px;
    background: linear-gradient( 176deg, var(--BBN-Main70, rgba(191, 25, 32, 0.1)) 4.1%, var(--Quince-Apple-Main60, rgba(240, 135, 0, 0.1)) 146.69% );
}

p.brain-assessment-score-legend-text {
    display: flex;
    padding: 8px;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    align-self: stretch;
    color: #333;
    font-family: "Noto Sans Thai";
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 150%;
}

.copy-right-text {
    color: #827c71;
    font-family: Noto Sans Thai;
    font-size: 0.875em;
    font-style: normal;
    font-weight: 400;
    line-height: 150%;
}

/* --- NEW AND MODIFIED CONSOLIDATED --- */
/* --- NEW AND MODIFIED CONSOLIDATED --- */

.brand-name {
    color: #00682f;
    font-weight: 800;
    text-transform: uppercase;
}

.brand-b {
    font-weight: 700;
    font-size: 19px;
}

.brand-s {
    font-weight: 800;
    font-size: 13px;
}

.brain-active section.breadcrumbs-section .breadcrumb {
    padding: 4px 0px !important;
}

.brain-challenge section.breadcrumbs-section .breadcrumb {
    padding: 4px 0px !important;
}

.active-club-breadcrumbs {
    padding-top: 80px;
}

    .active-club-breadcrumbs .breadcrumb .breadcrumb-item a,
    .active-club-breadcrumbs .breadcrumb .breadcrumb-item.active,
    .active-club-breadcrumbs .breadcrumb-item + .breadcrumb-item:before {
        color: #fff !important;
    }

.terms-of-use-section {
    margin-top: 80px !important;
}

.privacy-policy-section {
    margin-top: 80px !important;
}

.un-tab1-food-card .img-badge ul li {
    list-style-type: none;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #fbfaf0;
    padding: 2px 8px;
    border-radius: 16px;
    width: fit-content;
}

    .un-tab1-food-card .img-badge ul li .circle {
        width: 10px;
        height: 10px;
        border-radius: 50%;
        display: block;
        margin-right: 8px;
    }

.un-tab1-food-card .img-badge ul {
    padding-left: 0px;
}

    .un-tab1-food-card .img-badge ul li .badge-text {
        font-family: Noto Sans Thai;
        font-size: 0.75em;
        font-style: normal;
        font-weight: 700;
        line-height: 150%;
        margin-bottom: 0;
    }

.un-carousal-card-footer-item {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    width: 100%;
}

span.un-carousal-card-benefit {
    max-width: 145px;
}

.unbranded-footer-copy {
    font-size: 14px;
}

.un-carousal-card-footer {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 8px;
}

.green-bg-video-section .green-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
    transition: opacity 0.3s ease;
    border-radius: 16px;
    background: linear-gradient( 61deg, var(--BEC-50, #99d3b3) 28.87%, var(--BEC-100, #00682f) 122.5% ), linear-gradient(0deg, rgba(0, 104, 47, 0.8) 0%, rgba(0, 104, 47, 0.8) 100%);
    background-blend-mode: multiply, normal;
    opacity: 0.8;
}

section.brain-assessment-section {
    /* background: radial-gradient( 68.97% 50.32% at 72.08% 31.5%, #39a048 0%, #117b3e 48.92%, #112415 100% ); */
    width: 100%;
    padding: 180px 24px 100px;
    position: relative;
    display: flex;
    justify-content: center;
    align-content: center;
    align-items: center;
}

.brain-assessment-card {
    max-width: 982px;
    margin: 0 auto;
    background: #fff;
    border-radius: 24px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
    padding: 48px 40px 56px;
    position: relative;
    z-index: 1;
    gap: 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

ul.brain-assessment-info-list {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    max-width: 600px;
}

.brain-assessment-title {
    color: #00682f;
    text-align: center;
    font-family: "Noto Sans Thai";
    font-size: 32px;
    font-style: normal;
    font-weight: 600;
    line-height: 150%;
    letter-spacing: 0.32px;
}

.brain-assessment-disclaimer {
    background: #e8f5e9;
    border-radius: 12px;
    margin-bottom: 32px;
    display: flex;
    padding: 16px;
    justify-content: center;
    align-items: center;
    gap: 10px;
}

.brain-assessment-disclaimer-text {
    font-family: "Noto Sans Thai", sans-serif;
    font-size: 13px;
    font-weight: 400;
    color: #424242;
    line-height: 1.6;
    margin: 0;
    text-align: justify;
}


/* .result-scorecard-svg {
  width: 200px;
  height: 200px;
  display: block;
} */

.result-scorecard-you-scored {
    font-family: "Noto Sans Thai";
    font-size: 14px;
    font-weight: 400;
    color: #757575;
    display: block;
    margin-bottom: 4px;
}


.brain-assessment-score-legend {
    width: 100%;
    margin: 40px auto 0;
    text-align: center;
    display: flex;
    padding: 24px 0;
    flex-direction: column;
    align-items: center;
    gap: 24px;
    align-self: stretch;
    border-top: 1px solid #d3cec5;
    background: #fff;
}

.brain-assessment-score-legend-item {
    font-family: "Noto Sans Thai", sans-serif;
    display: flex;
    padding: 0 16px;
    flex-direction: column;
    align-items: center;
    gap: 24px;
    align-self: stretch;
    border-right: 1px solid #efeeee;
}

    .brain-assessment-score-legend-item:last-child {
        border-right: none;
    }

.result-circle-arc--legend-16-30 {
    stroke: #1a9c55;
}

.result-circle-arc--legend-31-45 {
    stroke: #ffce55;
}

.result-circle-arc--legend-46-90 {
    stroke: #bf1920;
}

@media (max-width: 600px) {
    .needs-section-content h2 {
        font-size: 26px;
        font-weight: 700;
        letter-spacing: 2%;
    }

    .needs-items-grid {
        justify-content: start !important;
    }

    .needs-item {
        flex: 0 0 calc(50% - 1.5rem) !important;
        max-width: calc(50% - 1.5rem) !important;
    }

    .icon-circle,
    .inner-icon-circle {
        width: 125px !important;
        height: 125px !important;
    }

    ul.page-stick-nav-links li a {
        width: max-content !important;
    }

    .needs-items-grid {
        gap: 3rem !important;
    }

    .needs-item-label {
        font-size: 13px !important;
        font-weight: 700 !important;
        width: 100%;
    }

    .clubs-section-content h1 {
        font-size: 24px !important;
        font-weight: 600 !important;
    }

    .green-bg-video-section .clubs-section-item-content p {
        position: relative;
        top: 43px;
        font-size: 14px;
        font-weight: 700;
    }

    .green-bg-video-section .clubs-section-item-content {
        top: 54%;
    }

    .revamp-sub-persona-title {
        font-size: 23px;
        font-weight: 700;
    }

    .persona-card {
        height: 400px;
        overflow: hidden;
    }

    .persona-content {
        justify-content: flex-start;
    }

    .persona-btn {
        /* padding: 140px 0px 0px 0px; */
    }

    .discover-card {
        flex-direction: row !important;
        padding: 10px;
        gap: 10px;
    }

    .discover-card-icon {
        width: 60px !important;
        height: 60px !important;
    }

        .discover-card-icon svg {
            width: 30px !important;
            height: 30px !important;
        }

    .discover-card-title {
        font-size: 16px;
        font-weight: 700;
    }

    .discover-card-content {
        gap: 0;
    }

    .discover-card-description {
        margin-bottom: 0;
    }

    .unbranded-discover-section {
        background: #025f1d !important;
    }

    .discover-cards-column {
        padding: 0px 20px;
    }

    .health-insights-main-title {
        font-size: 26px;
        text-align: center;
    }

    .health-insights-subtitle {
        font-size: 18px;
        font-weight: 400;
        text-align: center;
    }

    .health-insights-stacked {
        margin: 0 !important;
        scrollbar-width: none !important;
    }

    .challenge-navigation {
        flex-direction: row;
        gap: 12px;
        margin-top: 24px;
    }

    .jigsaw-header h3 {
        display: flex;
        justify-content: center;
        flex-direction: column;
        flex-wrap: nowrap;
        gap: 10px;
        align-items: flex-start;
    }

    .challenge-intro {
        flex-direction: row !important;
        max-width: 100% !important;
    }

    .nutrient-card.nutrient-card-challenge {
        max-height: 100% !important;
        height: 100% !important;
        min-width: 100% !important;
        width: 100% !important;
    }

    section.brain-assessment-section {
        margin-top: 50px !important;
    }

    .brain-assessment-option-chips {
        flex-direction: column;
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
    }

    .brain-assessment-quiz-wrap {
        padding: 24px 24px;
    }

    .brain-assessment-result-nav {
        display: flex;
        justify-content: center !important;
    }

    a.nav-link.dropdown-toggle.show {
        color: #00682f !important;
    }

    a.nav-link.dropdown-toggle.show {
        color: #00682f !important;
    }
}

.brain-assessment-score-legend-item--0-15 p.brain-assessment-score-legend-text {
    border-radius: 16px;
    background: linear-gradient( 176deg, var(--BEC-100, rgba(0, 104, 47, 0.1)) 4.32%, var(--BEC-Main-90, rgba(0, 145, 66, 0.1)) 92.67% );
}

.brain-assessment-score-legend-item--16-30
p.brain-assessment-score-legend-text {
    border-radius: 16px;
    background: linear-gradient( 180deg, var(--BEC-Main-90, rgba(0, 145, 66, 0.1)) 0.26%, var(--Color-Badge-Emerald-40, rgba(160, 212, 104, 0.1)) 153% );
}

.brain-assessment-score-legend-item--31-45
p.brain-assessment-score-legend-text {
    border-radius: 16px;
    background: linear-gradient( 179deg, var(--Semantic-Color-Warning-60, rgba(243, 156, 18, 0.1)) 50.22%, var(--Gold-Logo-Color-40, rgba(246, 226, 110, 0.1)) 216.14% );
}

.brain-assessment-score-legend-item--46-90
p.brain-assessment-score-legend-text {
    border-radius: 16px;
    background: linear-gradient( 176deg, var(--BBN-Main70, rgba(191, 25, 32, 0.1)) 4.1%, var(--Quince-Apple-Main60, rgba(240, 135, 0, 0.1)) 146.69% );
}

p.brain-assessment-score-legend-text {
    display: flex;
    padding: 8px;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    align-self: stretch;
    color: #333;
    font-family: "Noto Sans Thai";
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 150%;
}

/* Progress bar style start */
/* Step progress bar (same as brain-challenge, 15 steps) */
.step-progress-container {
    width: 100%;
    text-align: center;
}

.step-progress {
    margin: 1rem 0;
    position: relative;
    box-sizing: border-box;
    width: auto;
    display: inline-flex;
}

    .step-progress .step-progress__track {
        padding: 6px 0;
        background: #E0E0E0;
        border-radius: 16px;
        overflow: hidden;
    }

    .step-progress .step-progress__fill {
        position: absolute;
        left: 0;
        top: 0;
        height: 100%;
        width: 0;
        background: #009142;
        border-radius: 16px;
    }

    .step-progress .step-progress__dots {
        display: flex;
        gap: 24px;
        align-items: center;
        padding: 0 12px;
        pointer-events: none;
        box-sizing: border-box;
    }

    .step-progress .step-progress__dot {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: #009142;
        flex-shrink: 0;
        z-index: 1;
    }

    .step-progress .step-progress__dot--completed {
        background: #FFFFFF;
    }

.brain-assessment-quiz-wrap .step-progress .step-progress__track {
    position: relative;
}

.brain-assessment-quiz-wrap .step-progress .step-progress__fill {
    position: absolute;
    inset: 0;
    height: 100%;
}

.brain-assessment-quiz-wrap .step-progress .step-progress__dots {
    display: flex;
    align-items: center;
    padding: 0 12px;
}

.brain-challenge-section .step-progress .step-progress__dots {
    display: flex;
    gap: 140px;
    align-items: center;
    padding: 0 12px;
    pointer-events: none;
    box-sizing: border-box;
}

@media (max-width: 550px) {

    .unbranded-swiper .timeline-line {
        width: 90%;
        margin: 0 auto;
    }

    .brain-assessment-section-overlay {
        background: none !important;
    }

    .step-progress .step-progress__dots {
        gap: 0;
    }

    .step-progress {
        width: 100%;
        display: block;
    }

    .brain-assessment-quiz-wrap .step-progress .step-progress__dots {
        justify-content: space-between;
    }
}

@media (max-width: 800px) {
    .step-progress .step-progress__dots {
        gap: 0;
    }

    .step-progress {
        width: 100%;
        display: block;
    }

        .brain-assessment-quiz-wrap .step-progress .step-progress__dots,
        .step-progress .step-progress__dots {
            justify-content: space-between;
        }

    .brain-challenge-section .step-progress .step-progress__dots {
        gap: 0;
    }
}

@media (max-width: 330px) {
    .brain-assessment-option-chips {
        grid-template-columns: repeat(1, 1fr) !important;
    }
}
/* Progress bar style end */