:root {
    --swiper-theme-color: #007aff
}

.news-view {
    width: 50px;
    /* margin-top: 5px; */
    font: 14px/20px 'lineseed', Arial, sans-serif;
    padding-left: 25px;
    background: url(../images/news-39-1/view.png) top left no-repeat;
}

.news-view123 {
    width: 96px;
    font: 14px/20px 'lineseed', Arial, sans-serif;
    padding-left: 25px;
    background: url(../images/news-39-1/view2.png) top left no-repeat;
    color: #fff;
}

.comp__articlelisting_1hero-3small .hero__content .title--small a {
    color: #fff;
    text-transform: uppercase;
    padding-bottom: 16px;
}

.news-view12 {
    /* width: 96px; */
    /* margin-top: 5px; */
    font: 14px/20px 'lineseed', Arial, sans-serif;
    padding-left: 25px;
    margin-left: 0px;
    background: url(../images/news-39-1/view2.png) top left no-repeat;
    color: #fff;
}

.news-view1 {
    width: 50px;
    /* margin-top: 5px; */
    font: 14px/20px 'lineseed', Arial, sans-serif;
    padding-left: 25px;
    margin-left: 30px;
    background: url(../images/news-39-1/view1.png) top left no-repeat;
    color: #fff;
}

.swiper {
    margin-left: auto;
    margin-right: auto;
    position: relative;
    overflow: hidden;
    list-style: none;
    padding: 0;
    z-index: 1
}

.swiper-vertical>.swiper-wrapper {
    flex-direction: column
}

.swiper-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
    z-index: 1;
    display: flex;
    transition-property: transform;
    box-sizing: content-box
}

.swiper-android .swiper-slide, .swiper-wrapper {
    transform: translate3d(0px, 0, 0)
}

.swiper-pointer-events {
    touch-action: pan-y
}

.swiper-pointer-events.swiper-vertical {
    touch-action: pan-x
}

.swiper-slide {
    flex-shrink: 0;
    width: 100%;
    height: 100%;
    position: relative;
    transition-property: transform
}

.swiper-slide-invisible-blank {
    visibility: hidden
}

.swiper-autoheight, .swiper-autoheight .swiper-slide {
    height: auto
}

.swiper-autoheight .swiper-wrapper {
    align-items: flex-start;
    transition-property: transform, height
}

.swiper-3d, .swiper-3d.swiper-css-mode .swiper-wrapper {
    perspective: 1200px
}

.swiper-3d .swiper-cube-shadow, .swiper-3d .swiper-slide, .swiper-3d .swiper-slide-shadow, .swiper-3d .swiper-slide-shadow-bottom, .swiper-3d .swiper-slide-shadow-left, .swiper-3d .swiper-slide-shadow-right, .swiper-3d .swiper-slide-shadow-top, .swiper-3d .swiper-wrapper {
    transform-style: preserve-3d
}

.swiper-3d .swiper-slide-shadow, .swiper-3d .swiper-slide-shadow-bottom, .swiper-3d .swiper-slide-shadow-left, .swiper-3d .swiper-slide-shadow-right, .swiper-3d .swiper-slide-shadow-top {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 10
}

.swiper-3d .swiper-slide-shadow {
    background: rgba(0, 0, 0, .15)
}

.swiper-3d .swiper-slide-shadow-left {
    background-image: linear-gradient(to left, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0))
}

.swiper-3d .swiper-slide-shadow-right {
    background-image: linear-gradient(to right, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0))
}

.swiper-3d .swiper-slide-shadow-top {
    background-image: linear-gradient(to top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0))
}

.swiper-3d .swiper-slide-shadow-bottom {
    background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0))
}

.swiper-css-mode>.swiper-wrapper {
    overflow: auto;
    scrollbar-width: none;
    -ms-overflow-style: none
}

.swiper-css-mode>.swiper-wrapper::-webkit-scrollbar {
    display: none
}

.swiper-css-mode>.swiper-wrapper>.swiper-slide {
    scroll-snap-align: start start
}

.swiper-horizontal.swiper-css-mode>.swiper-wrapper {
    scroll-snap-type: x mandatory
}

.swiper-vertical.swiper-css-mode>.swiper-wrapper {
    scroll-snap-type: y mandatory
}

.swiper-centered>.swiper-wrapper::before {
    content: "";
    flex-shrink: 0;
    order: 9999
}

.swiper-centered.swiper-horizontal>.swiper-wrapper>.swiper-slide:first-child {
    margin-inline-start: var(--swiper-centered-offset-before)
}



.swiper-centered>.swiper-wrapper>.swiper-slide {
    scroll-snap-align: center center
}

:root {
    --swiper-navigation-size: 44px
}

.swiper-button-next, .swiper-button-prev {
    position: absolute;
    top: 50%;
    width: calc(var(--swiper-navigation-size)/ 44 * 27);
    height: var(--swiper-navigation-size);
    margin-top: calc(0px - (var(--swiper-navigation-size)/ 2));
    z-index: 10;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--swiper-navigation-color, var(--swiper-theme-color))
}

.swiper-button-next.swiper-button-disabled, .swiper-button-prev.swiper-button-disabled {
    opacity: .35;
    cursor: auto;
    pointer-events: none
}

.swiper-button-next:after, .swiper-button-prev:after {
    font-family: swiper-icons;
    font-size: var(--swiper-navigation-size);
    text-transform: none !important;
    letter-spacing: 0;
    text-transform: none;
    font-variant: initial;
    line-height: 1
}

.swiper-button-prev, .swiper-rtl .swiper-button-next {
    left: 10px;
    right: auto
}

.swiper-button-prev:after, .swiper-rtl .swiper-button-next:after {
    content: "prev"
}

.swiper-button-next, .swiper-rtl .swiper-button-prev {
    right: 10px;
    left: auto
}

.swiper-button-next:after, .swiper-rtl .swiper-button-prev:after {
    content: "next"
}

.swiper-button-lock {
    display: none
}

.swiper-pagination {
    position: absolute;
    text-align: center;
    transition: .3s opacity;
    transform: translate3d(0, 0, 0);
    z-index: 10
}

.swiper-pagination.swiper-pagination-hidden {
    opacity: 0
}

.swiper-horizontal>.swiper-pagination-bullets, .swiper-pagination-bullets.swiper-pagination-horizontal, .swiper-pagination-custom, .swiper-pagination-fraction {
    bottom: 10px;
    left: 0;
    width: 100%
}

.swiper-pagination-bullets-dynamic {
    overflow: hidden;
    font-size: 0
}

.swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
    transform: scale(0.33);
    position: relative
}

.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active {
    transform: scale(1)
}

.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-main {
    transform: scale(1)
}

.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev {
    transform: scale(0.66)
}

.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev-prev {
    transform: scale(0.33)
}

.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next {
    transform: scale(0.66)
}

.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next-next {
    transform: scale(0.33)
}

.swiper-pagination-bullet {
    width: var(--swiper-pagination-bullet-width, var(--swiper-pagination-bullet-size, 8px));
    height: var(--swiper-pagination-bullet-height, var(--swiper-pagination-bullet-size, 8px));
    display: inline-block;
    border-radius: 50%;
    background: var(--swiper-pagination-bullet-inactive-color, #000);
    opacity: var(--swiper-pagination-bullet-inactive-opacity, 0.2)
}

button.swiper-pagination-bullet {
    border: none;
    margin: 0;
    padding: 0;
    box-shadow: none;
    -webkit-appearance: none;
    appearance: none
}

.swiper-pagination-clickable .swiper-pagination-bullet {
    cursor: pointer
}

.swiper-pagination-bullet:only-child {
    display: none !important
}

.swiper-pagination-bullet-active {
    opacity: var(--swiper-pagination-bullet-opacity, 1);
    background: var(--swiper-pagination-color, var(--swiper-theme-color))
}

.swiper-pagination-vertical.swiper-pagination-bullets, .swiper-vertical>.swiper-pagination-bullets {
    right: 10px;
    top: 50%;
    transform: translate3d(0px, -50%, 0)
}

.swiper-pagination-vertical.swiper-pagination-bullets .swiper-pagination-bullet, .swiper-vertical>.swiper-pagination-bullets .swiper-pagination-bullet {
    margin: var(--swiper-pagination-bullet-vertical-gap, 6px) 0;
    display: block
}

.swiper-pagination-vertical.swiper-pagination-bullets.swiper-pagination-bullets-dynamic, .swiper-vertical>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic {
    top: 50%;
    transform: translateY(-50%);
    width: 8px
}

.swiper-pagination-vertical.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet, .swiper-vertical>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
    display: inline-block;
    transition: .2s transform, .2s top
}

.swiper-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet, .swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet {
    margin: 0 var(--swiper-pagination-bullet-horizontal-gap, 4px)
}

.swiper-horizontal>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic, .swiper-pagination-horizontal.swiper-pagination-bullets.swiper-pagination-bullets-dynamic {
    left: 50%;
    transform: translateX(-50%);
    white-space: nowrap
}

.swiper-horizontal>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet, .swiper-pagination-horizontal.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
    transition: .2s transform, .2s left
}

.swiper-horizontal.swiper-rtl>.swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
    transition: .2s transform, .2s right
}

.swiper-pagination-progressbar {
    background: rgba(0, 0, 0, .25);
    position: absolute
}

.swiper-pagination-progressbar .swiper-pagination-progressbar-fill {
    background: var(--swiper-pagination-color, var(--swiper-theme-color));
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    transform: scale(0);
    transform-origin: left top
}

.swiper-rtl .swiper-pagination-progressbar .swiper-pagination-progressbar-fill {
    transform-origin: right top
}

.swiper-horizontal>.swiper-pagination-progressbar, .swiper-pagination-progressbar.swiper-pagination-horizontal, .swiper-pagination-progressbar.swiper-pagination-vertical.swiper-pagination-progressbar-opposite, .swiper-vertical>.swiper-pagination-progressbar.swiper-pagination-progressbar-opposite {
    width: 100%;
    height: 4px;
    left: 0;
    top: 0
}

.swiper-horizontal>.swiper-pagination-progressbar.swiper-pagination-progressbar-opposite, .swiper-pagination-progressbar.swiper-pagination-horizontal.swiper-pagination-progressbar-opposite, .swiper-pagination-progressbar.swiper-pagination-vertical, .swiper-vertical>.swiper-pagination-progressbar {
    width: 4px;
    height: 100%;
    left: 0;
    top: 0
}

.swiper-pagination-lock {
    display: none
}


.layout-content {
    position: relative
}

.fb_dialog_content iframe {
    bottom: 30px !important;
    right: 0 !important
}

.text-yellow {
    color: #ffc208
}

.nav--login {
    min-width: 100%
}

.nav--login:after {
    content: "";
    position: absolute;
    top: 65%;
    display: block;
    right: 13px;
    transform: translateY(-50%) rotate(45deg);
    width: 6px;
    height: 6px;
    border-top: 2px solid #088b2c;
    border-right: 2px solid #088b2c
}

.nav--login a {
    color: #088b2c;
    background: #fff;
    border-radius: 5px;
    padding: 10px !important;
    margin-top: 20px;
    width: 100%
}

.swiper .swiper-button-next, .swiper .swiper-button-prev {
    opacity: 0;
    width: 40px;
    height: 40px;
    background-color: #00ae4d;
    border-radius: 50%;
    top: 50%
}

.swiper .swiper-button-next.swiper-button-disabled, .swiper .swiper-button-prev.swiper-button-disabled {
    opacity: 0
}

@media(min-width: 768px) {
    .swiper .swiper-button-next, .swiper .swiper-button-prev {
        opacity: 1;
        top: 180px
    }
}

.swiper .swiper-button-next::after, .swiper .swiper-button-prev::after {
    font-family: "icomoon";
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    font-size: 12px;
    color: #fff;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-40%, -50%) rotate(-90deg)
}

@media(min-width: 1400px) {
    .swiper .swiper-button-prev, .swiper .swiper-rtl .swiper-button-next {
        left: auto;
        right: 100%;
        margin-right: 28px;
        display: flex
    }
}

.swiper .swiper-button-prev::after, .swiper .swiper-rtl .swiper-button-next::after {
    transform: translate(-60%, -50%) rotate(90deg)
}

@media(min-width: 1400px) {
    .swiper .swiper-button-next, .swiper .swiper-rtl .swiper-button-prev {
        right: auto;
        left: 100%;
        margin-left: 28px;
        display: flex
    }
}

@media(min-width: 992px) {
    .text-lg-left {
        text-align: left !important
    }
}

.text-center {
    text-align: center
}

@media(max-width: 991px) {
    .text-sm-left {
        text-align: left !important
    }
}

.align-center img {
    margin-right: auto;
    margin-left: auto
}

.default\:mt-0, .default\:my-0 {
    margin-top: 0rem
}

.default\:mb-0, .default\:my-0 {
    margin-bottom: 0rem
}

.default\:pt-0, .default\:py-0 {
    padding-top: 0rem
}

.default\:pb-0, .default\:py-0 {
    padding-bottom: 0rem
}

.default\:mt-1, .default\:my-1 {
    margin-top: 0.325rem
}

.default\:mb-1, .default\:my-1 {
    margin-bottom: 0.325rem
}

.default\:pt-1, .default\:py-1 {
    padding-top: 0.325rem
}

.default\:pb-1, .default\:py-1 {
    padding-bottom: 0.325rem
}

.default\:mt-2, .default\:my-2 {
    margin-top: 0.65rem
}

.default\:mb-2, .default\:my-2 {
    margin-bottom: 0.65rem
}

.default\:pt-2, .default\:py-2 {
    padding-top: 0.65rem
}

.default\:pb-2, .default\:py-2 {
    padding-bottom: 0.65rem
}

.default\:mt-3, .default\:my-3 {
    margin-top: 0.975rem
}

.default\:mb-3, .default\:my-3 {
    margin-bottom: 0.975rem
}

.default\:pt-3, .default\:py-3 {
    padding-top: 0.975rem
}

.default\:pb-3, .default\:py-3 {
    padding-bottom: 0.975rem
}

.default\:mt-4, .default\:my-4 {
    margin-top: 1.3rem
}

.default\:mb-4, .default\:my-4 {
    margin-bottom: 1.3rem
}

.default\:pt-4, .default\:py-4 {
    padding-top: 1.3rem
}

.default\:pb-4, .default\:py-4 {
    padding-bottom: 1.3rem
}

.default\:mt-5, .default\:my-5 {
    margin-top: 1.625rem
}

.default\:mb-5, .default\:my-5 {
    margin-bottom: 1.625rem
}

.default\:pt-5, .default\:py-5 {
    padding-top: 1.625rem
}

.default\:pb-5, .default\:py-5 {
    padding-bottom: 1.625rem
}

.default\:mt-6, .default\:my-6 {
    margin-top: 1.95rem
}

.default\:mb-6, .default\:my-6 {
    margin-bottom: 1.95rem
}

.default\:pt-6, .default\:py-6 {
    padding-top: 1.95rem
}

.default\:pb-6, .default\:py-6 {
    padding-bottom: 1.95rem
}

.default\:mt-7, .default\:my-7 {
    margin-top: 2.275rem
}

.default\:mb-7, .default\:my-7 {
    margin-bottom: 2.275rem
}

.default\:pt-7, .default\:py-7 {
    padding-top: 2.275rem
}

.default\:pb-7, .default\:py-7 {
    padding-bottom: 2.275rem
}

.default\:mt-8, .default\:my-8 {
    margin-top: 2.6rem
}

.default\:mb-8, .default\:my-8 {
    margin-bottom: 2.6rem
}

.default\:pt-8, .default\:py-8 {
    padding-top: 2.6rem
}

.default\:pb-8, .default\:py-8 {
    padding-bottom: 2.6rem
}

.default\:mt-9, .default\:my-9 {
    margin-top: 2.925rem
}

.default\:mb-9, .default\:my-9 {
    margin-bottom: 2.925rem
}

.default\:pt-9, .default\:py-9 {
    padding-top: 2.925rem
}

.default\:pb-9, .default\:py-9 {
    padding-bottom: 2.925rem
}

.default\:mt-10, .default\:my-10 {
    margin-top: 3.25rem
}

.default\:mb-10, .default\:my-10 {
    margin-bottom: 3.25rem
}

.default\:pt-10, .default\:py-10 {
    padding-top: 3.25rem
}

.default\:pb-10, .default\:py-10 {
    padding-bottom: 3.25rem
}

.default\:mt-11, .default\:my-11 {
    margin-top: 3.575rem
}

.default\:mb-11, .default\:my-11 {
    margin-bottom: 3.575rem
}

.default\:pt-11, .default\:py-11 {
    padding-top: 3.575rem
}

.default\:pb-11, .default\:py-11 {
    padding-bottom: 3.575rem
}

.default\:mt-12, .default\:my-12 {
    margin-top: 3.9rem
}

.default\:mb-12, .default\:my-12 {
    margin-bottom: 3.9rem
}

.default\:pt-12, .default\:py-12 {
    padding-top: 3.9rem
}

.default\:pb-12, .default\:py-12 {
    padding-bottom: 3.9rem
}

.default\:mt-13, .default\:my-13 {
    margin-top: 4.225rem
}

.default\:mb-13, .default\:my-13 {
    margin-bottom: 4.225rem
}

.default\:pt-13, .default\:py-13 {
    padding-top: 4.225rem
}

.default\:pb-13, .default\:py-13 {
    padding-bottom: 4.225rem
}

.default\:mt-14, .default\:my-14 {
    margin-top: 4.55rem
}

.default\:mb-14, .default\:my-14 {
    margin-bottom: 4.55rem
}

.default\:pt-14, .default\:py-14 {
    padding-top: 4.55rem
}

.default\:pb-14, .default\:py-14 {
    padding-bottom: 4.55rem
}

.default\:mt-15, .default\:my-15 {
    margin-top: 4.875rem
}

.default\:mb-15, .default\:my-15 {
    margin-bottom: 4.875rem
}

.default\:pt-15, .default\:py-15 {
    padding-top: 4.875rem
}

.default\:pb-15, .default\:py-15 {
    padding-bottom: 4.875rem
}

.default\:mt-16, .default\:my-16 {
    margin-top: 5.2rem
}

.default\:mb-16, .default\:my-16 {
    margin-bottom: 5.2rem
}

.default\:pt-16, .default\:py-16 {
    padding-top: 5.2rem
}

.default\:pb-16, .default\:py-16 {
    padding-bottom: 5.2rem
}

.default\:mt-17, .default\:my-17 {
    margin-top: 5.525rem
}

.default\:mb-17, .default\:my-17 {
    margin-bottom: 5.525rem
}

.default\:pt-17, .default\:py-17 {
    padding-top: 5.525rem
}

.default\:pb-17, .default\:py-17 {
    padding-bottom: 5.525rem
}

.default\:mt-18, .default\:my-18 {
    margin-top: 5.85rem
}

.default\:mb-18, .default\:my-18 {
    margin-bottom: 5.85rem
}

.default\:pt-18, .default\:py-18 {
    padding-top: 5.85rem
}

.default\:pb-18, .default\:py-18 {
    padding-bottom: 5.85rem
}

.default\:mt-19, .default\:my-19 {
    margin-top: 6.175rem
}

.default\:mb-19, .default\:my-19 {
    margin-bottom: 6.175rem
}

.default\:pt-19, .default\:py-19 {
    padding-top: 6.175rem
}

.default\:pb-19, .default\:py-19 {
    padding-bottom: 6.175rem
}

.default\:mt-20, .default\:my-20 {
    margin-top: 6.5rem
}

.default\:mb-20, .default\:my-20 {
    margin-bottom: 6.5rem
}

.default\:pt-20, .default\:py-20 {
    padding-top: 6.5rem
}

.default\:pb-20, .default\:py-20 {
    padding-bottom: 6.5rem
}

.default\:mt-21, .default\:my-21 {
    margin-top: 6.825rem
}

.default\:mb-21, .default\:my-21 {
    margin-bottom: 6.825rem
}

.default\:pt-21, .default\:py-21 {
    padding-top: 6.825rem
}

.default\:pb-21, .default\:py-21 {
    padding-bottom: 6.825rem
}

.default\:mt-22, .default\:my-22 {
    margin-top: 7.15rem
}

.default\:mb-22, .default\:my-22 {
    margin-bottom: 7.15rem
}

.default\:pt-22, .default\:py-22 {
    padding-top: 7.15rem
}

.default\:pb-22, .default\:py-22 {
    padding-bottom: 7.15rem
}

.default\:mt-23, .default\:my-23 {
    margin-top: 7.475rem
}

.default\:mb-23, .default\:my-23 {
    margin-bottom: 7.475rem
}

.default\:pt-23, .default\:py-23 {
    padding-top: 7.475rem
}

.default\:pb-23, .default\:py-23 {
    padding-bottom: 7.475rem
}

.default\:mt-24, .default\:my-24 {
    margin-top: 7.8rem
}

.default\:mb-24, .default\:my-24 {
    margin-bottom: 7.8rem
}

.default\:pt-24, .default\:py-24 {
    padding-top: 7.8rem
}

.default\:pb-24, .default\:py-24 {
    padding-bottom: 7.8rem
}

.default\:mt-25, .default\:my-25 {
    margin-top: 8.125rem
}

.default\:mb-25, .default\:my-25 {
    margin-bottom: 8.125rem
}

.default\:pt-25, .default\:py-25 {
    padding-top: 8.125rem
}

.default\:pb-25, .default\:py-25 {
    padding-bottom: 8.125rem
}

.default\:mt-26, .default\:my-26 {
    margin-top: 8.45rem
}

.default\:mb-26, .default\:my-26 {
    margin-bottom: 8.45rem
}

.default\:pt-26, .default\:py-26 {
    padding-top: 8.45rem
}

.default\:pb-26, .default\:py-26 {
    padding-bottom: 8.45rem
}

.default\:mt-27, .default\:my-27 {
    margin-top: 8.775rem
}

.default\:mb-27, .default\:my-27 {
    margin-bottom: 8.775rem
}

.default\:pt-27, .default\:py-27 {
    padding-top: 8.775rem
}

.default\:pb-27, .default\:py-27 {
    padding-bottom: 8.775rem
}

.default\:mt-28, .default\:my-28 {
    margin-top: 9.1rem
}

.default\:mb-28, .default\:my-28 {
    margin-bottom: 9.1rem
}

.default\:pt-28, .default\:py-28 {
    padding-top: 9.1rem
}

.default\:pb-28, .default\:py-28 {
    padding-bottom: 9.1rem
}

.default\:mt-29, .default\:my-29 {
    margin-top: 9.425rem
}

.default\:mb-29, .default\:my-29 {
    margin-bottom: 9.425rem
}

.default\:pt-29, .default\:py-29 {
    padding-top: 9.425rem
}

.default\:pb-29, .default\:py-29 {
    padding-bottom: 9.425rem
}

.default\:mt-30, .default\:my-30 {
    margin-top: 9.75rem
}

.default\:mb-30, .default\:my-30 {
    margin-bottom: 9.75rem
}

.default\:pt-30, .default\:py-30 {
    padding-top: 9.75rem
}

.default\:pb-30, .default\:py-30 {
    padding-bottom: 9.75rem
}

.default\:mt-31, .default\:my-31 {
    margin-top: 10.075rem
}

.default\:mb-31, .default\:my-31 {
    margin-bottom: 10.075rem
}

.default\:pt-31, .default\:py-31 {
    padding-top: 10.075rem
}

.default\:pb-31, .default\:py-31 {
    padding-bottom: 10.075rem
}

.default\:mt-32, .default\:my-32 {
    margin-top: 10.4rem
}

.default\:mb-32, .default\:my-32 {
    margin-bottom: 10.4rem
}

.default\:pt-32, .default\:py-32 {
    padding-top: 10.4rem
}

.default\:pb-32, .default\:py-32 {
    padding-bottom: 10.4rem
}

.default\:mt-33, .default\:my-33 {
    margin-top: 10.725rem
}

.default\:mb-33, .default\:my-33 {
    margin-bottom: 10.725rem
}

.default\:pt-33, .default\:py-33 {
    padding-top: 10.725rem
}

.default\:pb-33, .default\:py-33 {
    padding-bottom: 10.725rem
}

.default\:mt-34, .default\:my-34 {
    margin-top: 11.05rem
}

.default\:mb-34, .default\:my-34 {
    margin-bottom: 11.05rem
}

.default\:pt-34, .default\:py-34 {
    padding-top: 11.05rem
}

.default\:pb-34, .default\:py-34 {
    padding-bottom: 11.05rem
}

.default\:mt-35, .default\:my-35 {
    margin-top: 11.375rem
}

.default\:mb-35, .default\:my-35 {
    margin-bottom: 11.375rem
}

.default\:pt-35, .default\:py-35 {
    padding-top: 11.375rem
}

.default\:pb-35, .default\:py-35 {
    padding-bottom: 11.375rem
}

.default\:mt-36, .default\:my-36 {
    margin-top: 11.7rem
}

.default\:mb-36, .default\:my-36 {
    margin-bottom: 11.7rem
}

.default\:pt-36, .default\:py-36 {
    padding-top: 11.7rem
}

.default\:pb-36, .default\:py-36 {
    padding-bottom: 11.7rem
}

.default\:mt-37, .default\:my-37 {
    margin-top: 12.025rem
}

.default\:mb-37, .default\:my-37 {
    margin-bottom: 12.025rem
}

.default\:pt-37, .default\:py-37 {
    padding-top: 12.025rem
}

.default\:pb-37, .default\:py-37 {
    padding-bottom: 12.025rem
}

.default\:mt-38, .default\:my-38 {
    margin-top: 12.35rem
}

.default\:mb-38, .default\:my-38 {
    margin-bottom: 12.35rem
}

.default\:pt-38, .default\:py-38 {
    padding-top: 12.35rem
}

.default\:pb-38, .default\:py-38 {
    padding-bottom: 12.35rem
}

.default\:mt-39, .default\:my-39 {
    margin-top: 12.675rem
}

.default\:mb-39, .default\:my-39 {
    margin-bottom: 12.675rem
}

.default\:pt-39, .default\:py-39 {
    padding-top: 12.675rem
}

.default\:pb-39, .default\:py-39 {
    padding-bottom: 12.675rem
}

.default\:mt-40, .default\:my-40 {
    margin-top: 13rem
}

.default\:mb-40, .default\:my-40 {
    margin-bottom: 13rem
}

.default\:pt-40, .default\:py-40 {
    padding-top: 13rem
}

.default\:pb-40, .default\:py-40 {
    padding-bottom: 13rem
}

.default\:mt-41, .default\:my-41 {
    margin-top: 13.325rem
}

.default\:mb-41, .default\:my-41 {
    margin-bottom: 13.325rem
}

.default\:pt-41, .default\:py-41 {
    padding-top: 13.325rem
}

.default\:pb-41, .default\:py-41 {
    padding-bottom: 13.325rem
}

.default\:mt-42, .default\:my-42 {
    margin-top: 13.65rem
}

.default\:mb-42, .default\:my-42 {
    margin-bottom: 13.65rem
}

.default\:pt-42, .default\:py-42 {
    padding-top: 13.65rem
}

.default\:pb-42, .default\:py-42 {
    padding-bottom: 13.65rem
}

.default\:mt-43, .default\:my-43 {
    margin-top: 13.975rem
}

.default\:mb-43, .default\:my-43 {
    margin-bottom: 13.975rem
}

.default\:pt-43, .default\:py-43 {
    padding-top: 13.975rem
}

.default\:pb-43, .default\:py-43 {
    padding-bottom: 13.975rem
}

.default\:mt-44, .default\:my-44 {
    margin-top: 14.3rem
}

.default\:mb-44, .default\:my-44 {
    margin-bottom: 14.3rem
}

.default\:pt-44, .default\:py-44 {
    padding-top: 14.3rem
}

.default\:pb-44, .default\:py-44 {
    padding-bottom: 14.3rem
}

.default\:mt-45, .default\:my-45 {
    margin-top: 14.625rem
}

.default\:mb-45, .default\:my-45 {
    margin-bottom: 14.625rem
}

.default\:pt-45, .default\:py-45 {
    padding-top: 14.625rem
}

.default\:pb-45, .default\:py-45 {
    padding-bottom: 14.625rem
}

.default\:mt-46, .default\:my-46 {
    margin-top: 14.95rem
}

.default\:mb-46, .default\:my-46 {
    margin-bottom: 14.95rem
}

.default\:pt-46, .default\:py-46 {
    padding-top: 14.95rem
}

.default\:pb-46, .default\:py-46 {
    padding-bottom: 14.95rem
}

.default\:mt-47, .default\:my-47 {
    margin-top: 15.275rem
}

.default\:mb-47, .default\:my-47 {
    margin-bottom: 15.275rem
}

.default\:pt-47, .default\:py-47 {
    padding-top: 15.275rem
}

.default\:pb-47, .default\:py-47 {
    padding-bottom: 15.275rem
}

.default\:mt-48, .default\:my-48 {
    margin-top: 15.6rem
}

.default\:mb-48, .default\:my-48 {
    margin-bottom: 15.6rem
}

.default\:pt-48, .default\:py-48 {
    padding-top: 15.6rem
}

.default\:pb-48, .default\:py-48 {
    padding-bottom: 15.6rem
}

.default\:mt-49, .default\:my-49 {
    margin-top: 15.925rem
}

.default\:mb-49, .default\:my-49 {
    margin-bottom: 15.925rem
}

.default\:pt-49, .default\:py-49 {
    padding-top: 15.925rem
}

.default\:pb-49, .default\:py-49 {
    padding-bottom: 15.925rem
}

.default\:mt-50, .default\:my-50 {
    margin-top: 16.25rem
}

.default\:mb-50, .default\:my-50 {
    margin-bottom: 16.25rem
}

.default\:pt-50, .default\:py-50 {
    padding-top: 16.25rem
}

.default\:pb-50, .default\:py-50 {
    padding-bottom: 16.25rem
}

@media(min-width: 992px) {
    .lg\:mt-0, .lg\:my-0 {
        margin-top: 0rem
    }

    .lg\:mb-0, .lg\:my-0 {
        margin-bottom: 0rem
    }

    .lg\:pt-0, .lg\:py-0 {
        padding-top: 0rem
    }

    .lg\:pb-0, .lg\:py-0 {
        padding-bottom: 0rem
    }
}

@media(min-width: 992px) {
    .lg\:mt-1, .lg\:my-1 {
        margin-top: 0.325rem
    }

    .lg\:mb-1, .lg\:my-1 {
        margin-bottom: 0.325rem
    }

    .lg\:pt-1, .lg\:py-1 {
        padding-top: 0.325rem
    }

    .lg\:pb-1, .lg\:py-1 {
        padding-bottom: 0.325rem
    }
}

@media(min-width: 992px) {
    .lg\:mt-2, .lg\:my-2 {
        margin-top: 0.65rem
    }

    .lg\:mb-2, .lg\:my-2 {
        margin-bottom: 0.65rem
    }

    .lg\:pt-2, .lg\:py-2 {
        padding-top: 0.65rem
    }

    .lg\:pb-2, .lg\:py-2 {
        padding-bottom: 0.65rem
    }
}

@media(min-width: 992px) {
    .lg\:mt-3, .lg\:my-3 {
        margin-top: 0.975rem
    }

    .lg\:mb-3, .lg\:my-3 {
        margin-bottom: 0.975rem
    }

    .lg\:pt-3, .lg\:py-3 {
        padding-top: 0.975rem
    }

    .lg\:pb-3, .lg\:py-3 {
        padding-bottom: 0.975rem
    }
}

@media(min-width: 992px) {
    .lg\:mt-4, .lg\:my-4 {
        margin-top: 1.3rem
    }

    .lg\:mb-4, .lg\:my-4 {
        margin-bottom: 1.3rem
    }

    .lg\:pt-4, .lg\:py-4 {
        padding-top: 1.3rem
    }

    .lg\:pb-4, .lg\:py-4 {
        padding-bottom: 1.3rem
    }
}

@media(min-width: 992px) {
    .lg\:mt-5, .lg\:my-5 {
        margin-top: 1.625rem
    }

    .lg\:mb-5, .lg\:my-5 {
        margin-bottom: 1.625rem
    }

    .lg\:pt-5, .lg\:py-5 {
        padding-top: 1.625rem
    }

    .lg\:pb-5, .lg\:py-5 {
        padding-bottom: 1.625rem
    }
}

@media(min-width: 992px) {
    .lg\:mt-6, .lg\:my-6 {
        margin-top: 1.95rem
    }

    .lg\:mb-6, .lg\:my-6 {
        margin-bottom: 1.95rem
    }

    .lg\:pt-6, .lg\:py-6 {
        padding-top: 1.95rem
    }

    .lg\:pb-6, .lg\:py-6 {
        padding-bottom: 1.95rem
    }
}

@media(min-width: 992px) {
    .lg\:mt-7, .lg\:my-7 {
        margin-top: 2.275rem
    }

    .lg\:mb-7, .lg\:my-7 {
        margin-bottom: 2.275rem
    }

    .lg\:pt-7, .lg\:py-7 {
        padding-top: 2.275rem
    }

    .lg\:pb-7, .lg\:py-7 {
        padding-bottom: 2.275rem
    }
}

@media(min-width: 992px) {
    .lg\:mt-8, .lg\:my-8 {
        margin-top: 2.6rem
    }

    .lg\:mb-8, .lg\:my-8 {
        margin-bottom: 2.6rem
    }

    .lg\:pt-8, .lg\:py-8 {
        padding-top: 2.6rem
    }

    .lg\:pb-8, .lg\:py-8 {
        padding-bottom: 2.6rem
    }
}

@media(min-width: 992px) {
    .lg\:mt-9, .lg\:my-9 {
        margin-top: 2.925rem
    }

    .lg\:mb-9, .lg\:my-9 {
        margin-bottom: 2.925rem
    }

    .lg\:pt-9, .lg\:py-9 {
        padding-top: 2.925rem
    }

    .lg\:pb-9, .lg\:py-9 {
        padding-bottom: 2.925rem
    }
}

@media(min-width: 992px) {
    .lg\:mt-10, .lg\:my-10 {
        margin-top: 3.25rem
    }

    .lg\:mb-10, .lg\:my-10 {
        margin-bottom: 3.25rem
    }

    .lg\:pt-10, .lg\:py-10 {
        padding-top: 3.25rem
    }

    .lg\:pb-10, .lg\:py-10 {
        padding-bottom: 3.25rem
    }
}

@media(min-width: 992px) {
    .lg\:mt-11, .lg\:my-11 {
        margin-top: 3.575rem
    }

    .lg\:mb-11, .lg\:my-11 {
        margin-bottom: 3.575rem
    }

    .lg\:pt-11, .lg\:py-11 {
        padding-top: 3.575rem
    }

    .lg\:pb-11, .lg\:py-11 {
        padding-bottom: 3.575rem
    }
}

@media(min-width: 992px) {
    .lg\:mt-12, .lg\:my-12 {
        margin-top: 3.9rem
    }

    .lg\:mb-12, .lg\:my-12 {
        margin-bottom: 3.9rem
    }

    .lg\:pt-12, .lg\:py-12 {
        padding-top: 3.9rem
    }

    .lg\:pb-12, .lg\:py-12 {
        padding-bottom: 3.9rem
    }
}

@media(min-width: 992px) {
    .lg\:mt-13, .lg\:my-13 {
        margin-top: 4.225rem
    }

    .lg\:mb-13, .lg\:my-13 {
        margin-bottom: 4.225rem
    }

    .lg\:pt-13, .lg\:py-13 {
        padding-top: 4.225rem
    }

    .lg\:pb-13, .lg\:py-13 {
        padding-bottom: 4.225rem
    }
}

@media(min-width: 992px) {
    .lg\:mt-14, .lg\:my-14 {
        margin-top: 4.55rem
    }

    .lg\:mb-14, .lg\:my-14 {
        margin-bottom: 4.55rem
    }

    .lg\:pt-14, .lg\:py-14 {
        padding-top: 4.55rem
    }

    .lg\:pb-14, .lg\:py-14 {
        padding-bottom: 4.55rem
    }
}

@media(min-width: 992px) {
    .lg\:mt-15, .lg\:my-15 {
        margin-top: 4.875rem
    }

    .lg\:mb-15, .lg\:my-15 {
        margin-bottom: 4.875rem
    }

    .lg\:pt-15, .lg\:py-15 {
        padding-top: 4.875rem
    }

    .lg\:pb-15, .lg\:py-15 {
        padding-bottom: 4.875rem
    }
}

@media(min-width: 992px) {
    .lg\:mt-16, .lg\:my-16 {
        margin-top: 5.2rem
    }

    .lg\:mb-16, .lg\:my-16 {
        margin-bottom: 5.2rem
    }

    .lg\:pt-16, .lg\:py-16 {
        padding-top: 5.2rem
    }

    .lg\:pb-16, .lg\:py-16 {
        padding-bottom: 5.2rem
    }
}

@media(min-width: 992px) {
    .lg\:mt-17, .lg\:my-17 {
        margin-top: 5.525rem
    }

    .lg\:mb-17, .lg\:my-17 {
        margin-bottom: 5.525rem
    }

    .lg\:pt-17, .lg\:py-17 {
        padding-top: 5.525rem
    }

    .lg\:pb-17, .lg\:py-17 {
        padding-bottom: 5.525rem
    }
}

@media(min-width: 992px) {
    .lg\:mt-18, .lg\:my-18 {
        margin-top: 5.85rem
    }

    .lg\:mb-18, .lg\:my-18 {
        margin-bottom: 5.85rem
    }

    .lg\:pt-18, .lg\:py-18 {
        padding-top: 5.85rem
    }

    .lg\:pb-18, .lg\:py-18 {
        padding-bottom: 5.85rem
    }
}

@media(min-width: 992px) {
    .lg\:mt-19, .lg\:my-19 {
        margin-top: 6.175rem
    }

    .lg\:mb-19, .lg\:my-19 {
        margin-bottom: 6.175rem
    }

    .lg\:pt-19, .lg\:py-19 {
        padding-top: 6.175rem
    }

    .lg\:pb-19, .lg\:py-19 {
        padding-bottom: 6.175rem
    }
}

@media(min-width: 992px) {
    .lg\:mt-20, .lg\:my-20 {
        margin-top: 6.5rem
    }

    .lg\:mb-20, .lg\:my-20 {
        margin-bottom: 6.5rem
    }

    .lg\:pt-20, .lg\:py-20 {
        padding-top: 6.5rem
    }

    .lg\:pb-20, .lg\:py-20 {
        padding-bottom: 6.5rem
    }
}

@media(min-width: 992px) {
    .lg\:mt-21, .lg\:my-21 {
        margin-top: 6.825rem
    }

    .lg\:mb-21, .lg\:my-21 {
        margin-bottom: 6.825rem
    }

    .lg\:pt-21, .lg\:py-21 {
        padding-top: 6.825rem
    }

    .lg\:pb-21, .lg\:py-21 {
        padding-bottom: 6.825rem
    }
}

@media(min-width: 992px) {
    .lg\:mt-22, .lg\:my-22 {
        margin-top: 7.15rem
    }

    .lg\:mb-22, .lg\:my-22 {
        margin-bottom: 7.15rem
    }

    .lg\:pt-22, .lg\:py-22 {
        padding-top: 7.15rem
    }

    .lg\:pb-22, .lg\:py-22 {
        padding-bottom: 7.15rem
    }
}

@media(min-width: 992px) {
    .lg\:mt-23, .lg\:my-23 {
        margin-top: 7.475rem
    }

    .lg\:mb-23, .lg\:my-23 {
        margin-bottom: 7.475rem
    }

    .lg\:pt-23, .lg\:py-23 {
        padding-top: 7.475rem
    }

    .lg\:pb-23, .lg\:py-23 {
        padding-bottom: 7.475rem
    }
}

@media(min-width: 992px) {
    .lg\:mt-24, .lg\:my-24 {
        margin-top: 7.8rem
    }

    .lg\:mb-24, .lg\:my-24 {
        margin-bottom: 7.8rem
    }

    .lg\:pt-24, .lg\:py-24 {
        padding-top: 7.8rem
    }

    .lg\:pb-24, .lg\:py-24 {
        padding-bottom: 7.8rem
    }
}

@media(min-width: 992px) {
    .lg\:mt-25, .lg\:my-25 {
        margin-top: 8.125rem
    }

    .lg\:mb-25, .lg\:my-25 {
        margin-bottom: 8.125rem
    }

    .lg\:pt-25, .lg\:py-25 {
        padding-top: 8.125rem
    }

    .lg\:pb-25, .lg\:py-25 {
        padding-bottom: 8.125rem
    }
}

@media(min-width: 992px) {
    .lg\:mt-26, .lg\:my-26 {
        margin-top: 8.45rem
    }

    .lg\:mb-26, .lg\:my-26 {
        margin-bottom: 8.45rem
    }

    .lg\:pt-26, .lg\:py-26 {
        padding-top: 8.45rem
    }

    .lg\:pb-26, .lg\:py-26 {
        padding-bottom: 8.45rem
    }
}

@media(min-width: 992px) {
    .lg\:mt-27, .lg\:my-27 {
        margin-top: 8.775rem
    }

    .lg\:mb-27, .lg\:my-27 {
        margin-bottom: 8.775rem
    }

    .lg\:pt-27, .lg\:py-27 {
        padding-top: 8.775rem
    }

    .lg\:pb-27, .lg\:py-27 {
        padding-bottom: 8.775rem
    }
}

@media(min-width: 992px) {
    .lg\:mt-28, .lg\:my-28 {
        margin-top: 9.1rem
    }

    .lg\:mb-28, .lg\:my-28 {
        margin-bottom: 9.1rem
    }

    .lg\:pt-28, .lg\:py-28 {
        padding-top: 9.1rem
    }

    .lg\:pb-28, .lg\:py-28 {
        padding-bottom: 9.1rem
    }
}

@media(min-width: 992px) {
    .lg\:mt-29, .lg\:my-29 {
        margin-top: 9.425rem
    }

    .lg\:mb-29, .lg\:my-29 {
        margin-bottom: 9.425rem
    }

    .lg\:pt-29, .lg\:py-29 {
        padding-top: 9.425rem
    }

    .lg\:pb-29, .lg\:py-29 {
        padding-bottom: 9.425rem
    }
}

@media(min-width: 992px) {
    .lg\:mt-30, .lg\:my-30 {
        margin-top: 9.75rem
    }

    .lg\:mb-30, .lg\:my-30 {
        margin-bottom: 9.75rem
    }

    .lg\:pt-30, .lg\:py-30 {
        padding-top: 9.75rem
    }

    .lg\:pb-30, .lg\:py-30 {
        padding-bottom: 9.75rem
    }
}

@media(min-width: 992px) {
    .lg\:mt-31, .lg\:my-31 {
        margin-top: 10.075rem
    }

    .lg\:mb-31, .lg\:my-31 {
        margin-bottom: 10.075rem
    }

    .lg\:pt-31, .lg\:py-31 {
        padding-top: 10.075rem
    }

    .lg\:pb-31, .lg\:py-31 {
        padding-bottom: 10.075rem
    }
}

@media(min-width: 992px) {
    .lg\:mt-32, .lg\:my-32 {
        margin-top: 10.4rem
    }

    .lg\:mb-32, .lg\:my-32 {
        margin-bottom: 10.4rem
    }

    .lg\:pt-32, .lg\:py-32 {
        padding-top: 10.4rem
    }

    .lg\:pb-32, .lg\:py-32 {
        padding-bottom: 10.4rem
    }
}

@media(min-width: 992px) {
    .lg\:mt-33, .lg\:my-33 {
        margin-top: 10.725rem
    }

    .lg\:mb-33, .lg\:my-33 {
        margin-bottom: 10.725rem
    }

    .lg\:pt-33, .lg\:py-33 {
        padding-top: 10.725rem
    }

    .lg\:pb-33, .lg\:py-33 {
        padding-bottom: 10.725rem
    }
}

@media(min-width: 992px) {
    .lg\:mt-34, .lg\:my-34 {
        margin-top: 11.05rem
    }

    .lg\:mb-34, .lg\:my-34 {
        margin-bottom: 11.05rem
    }

    .lg\:pt-34, .lg\:py-34 {
        padding-top: 11.05rem
    }

    .lg\:pb-34, .lg\:py-34 {
        padding-bottom: 11.05rem
    }
}

@media(min-width: 992px) {
    .lg\:mt-35, .lg\:my-35 {
        margin-top: 11.375rem
    }

    .lg\:mb-35, .lg\:my-35 {
        margin-bottom: 11.375rem
    }

    .lg\:pt-35, .lg\:py-35 {
        padding-top: 11.375rem
    }

    .lg\:pb-35, .lg\:py-35 {
        padding-bottom: 11.375rem
    }
}

@media(min-width: 992px) {
    .lg\:mt-36, .lg\:my-36 {
        margin-top: 11.7rem
    }

    .lg\:mb-36, .lg\:my-36 {
        margin-bottom: 11.7rem
    }

    .lg\:pt-36, .lg\:py-36 {
        padding-top: 11.7rem
    }

    .lg\:pb-36, .lg\:py-36 {
        padding-bottom: 11.7rem
    }
}

@media(min-width: 992px) {
    .lg\:mt-37, .lg\:my-37 {
        margin-top: 12.025rem
    }

    .lg\:mb-37, .lg\:my-37 {
        margin-bottom: 12.025rem
    }

    .lg\:pt-37, .lg\:py-37 {
        padding-top: 12.025rem
    }

    .lg\:pb-37, .lg\:py-37 {
        padding-bottom: 12.025rem
    }
}

@media(min-width: 992px) {
    .lg\:mt-38, .lg\:my-38 {
        margin-top: 12.35rem
    }

    .lg\:mb-38, .lg\:my-38 {
        margin-bottom: 12.35rem
    }

    .lg\:pt-38, .lg\:py-38 {
        padding-top: 12.35rem
    }

    .lg\:pb-38, .lg\:py-38 {
        padding-bottom: 12.35rem
    }
}

@media(min-width: 992px) {
    .lg\:mt-39, .lg\:my-39 {
        margin-top: 12.675rem
    }

    .lg\:mb-39, .lg\:my-39 {
        margin-bottom: 12.675rem
    }

    .lg\:pt-39, .lg\:py-39 {
        padding-top: 12.675rem
    }

    .lg\:pb-39, .lg\:py-39 {
        padding-bottom: 12.675rem
    }
}

@media(min-width: 992px) {
    .lg\:mt-40, .lg\:my-40 {
        margin-top: 13rem
    }

    .lg\:mb-40, .lg\:my-40 {
        margin-bottom: 13rem
    }

    .lg\:pt-40, .lg\:py-40 {
        padding-top: 13rem
    }

    .lg\:pb-40, .lg\:py-40 {
        padding-bottom: 13rem
    }
}

@media(min-width: 992px) {
    .lg\:mt-41, .lg\:my-41 {
        margin-top: 13.325rem
    }

    .lg\:mb-41, .lg\:my-41 {
        margin-bottom: 13.325rem
    }

    .lg\:pt-41, .lg\:py-41 {
        padding-top: 13.325rem
    }

    .lg\:pb-41, .lg\:py-41 {
        padding-bottom: 13.325rem
    }
}

@media(min-width: 992px) {
    .lg\:mt-42, .lg\:my-42 {
        margin-top: 13.65rem
    }

    .lg\:mb-42, .lg\:my-42 {
        margin-bottom: 13.65rem
    }

    .lg\:pt-42, .lg\:py-42 {
        padding-top: 13.65rem
    }

    .lg\:pb-42, .lg\:py-42 {
        padding-bottom: 13.65rem
    }
}

@media(min-width: 992px) {
    .lg\:mt-43, .lg\:my-43 {
        margin-top: 13.975rem
    }

    .lg\:mb-43, .lg\:my-43 {
        margin-bottom: 13.975rem
    }

    .lg\:pt-43, .lg\:py-43 {
        padding-top: 13.975rem
    }

    .lg\:pb-43, .lg\:py-43 {
        padding-bottom: 13.975rem
    }
}

@media(min-width: 992px) {
    .lg\:mt-44, .lg\:my-44 {
        margin-top: 14.3rem
    }

    .lg\:mb-44, .lg\:my-44 {
        margin-bottom: 14.3rem
    }

    .lg\:pt-44, .lg\:py-44 {
        padding-top: 14.3rem
    }

    .lg\:pb-44, .lg\:py-44 {
        padding-bottom: 14.3rem
    }
}

@media(min-width: 992px) {
    .lg\:mt-45, .lg\:my-45 {
        margin-top: 14.625rem
    }

    .lg\:mb-45, .lg\:my-45 {
        margin-bottom: 14.625rem
    }

    .lg\:pt-45, .lg\:py-45 {
        padding-top: 14.625rem
    }

    .lg\:pb-45, .lg\:py-45 {
        padding-bottom: 14.625rem
    }
}

@media(min-width: 992px) {
    .lg\:mt-46, .lg\:my-46 {
        margin-top: 14.95rem
    }

    .lg\:mb-46, .lg\:my-46 {
        margin-bottom: 14.95rem
    }

    .lg\:pt-46, .lg\:py-46 {
        padding-top: 14.95rem
    }

    .lg\:pb-46, .lg\:py-46 {
        padding-bottom: 14.95rem
    }
}

@media(min-width: 992px) {
    .lg\:mt-47, .lg\:my-47 {
        margin-top: 15.275rem
    }

    .lg\:mb-47, .lg\:my-47 {
        margin-bottom: 15.275rem
    }

    .lg\:pt-47, .lg\:py-47 {
        padding-top: 15.275rem
    }

    .lg\:pb-47, .lg\:py-47 {
        padding-bottom: 15.275rem
    }
}

@media(min-width: 992px) {
    .lg\:mt-48, .lg\:my-48 {
        margin-top: 15.6rem
    }

    .lg\:mb-48, .lg\:my-48 {
        margin-bottom: 15.6rem
    }

    .lg\:pt-48, .lg\:py-48 {
        padding-top: 15.6rem
    }

    .lg\:pb-48, .lg\:py-48 {
        padding-bottom: 15.6rem
    }
}

@media(min-width: 992px) {
    .lg\:mt-49, .lg\:my-49 {
        margin-top: 15.925rem
    }

    .lg\:mb-49, .lg\:my-49 {
        margin-bottom: 15.925rem
    }

    .lg\:pt-49, .lg\:py-49 {
        padding-top: 15.925rem
    }

    .lg\:pb-49, .lg\:py-49 {
        padding-bottom: 15.925rem
    }
}

@media(min-width: 992px) {
    .lg\:mt-50, .lg\:my-50 {
        margin-top: 16.25rem
    }

    .lg\:mb-50, .lg\:my-50 {
        margin-bottom: 16.25rem
    }

    .lg\:pt-50, .lg\:py-50 {
        padding-top: 16.25rem
    }

    .lg\:pb-50, .lg\:py-50 {
        padding-bottom: 16.25rem
    }
}

.comp__spacing--top\:mobile--40 {
    margin-top: 40px !important
}

.comp__spacing--top\:mobile--64 {
    margin-top: 64px !important
}

.comp__spacing--top\:mobile--80 {
    margin-top: 80px !important
}

.comp__spacing--top\:mobile--120 {
    margin-top: 120px !important
}

.comp__spacing--top\:mobile--150 {
    margin-top: 150px !important
}

.comp__spacing--top\:mobile--170 {
    margin-top: 170px !important
}

.comp__spacing--top\:mobile--200 {
    margin-top: 200px !important
}

@media(min-width: 992px) {
    .comp__spacing--top\:desktop--40 {
        margin-top: 40px !important
    }

    .comp__spacing--top\:desktop--64 {
        margin-top: 64px !important
    }

    .comp__spacing--top\:desktop--80 {
        margin-top: 80px !important
    }

    .comp__spacing--top\:desktop--120 {
        margin-top: 120px !important
    }

    .comp__spacing--top\:desktop--150 {
        margin-top: 150px !important
    }

    .comp__spacing--top\:desktop--170 {
        margin-top: 170px !important
    }

    .comp__spacing--top\:desktop--200 {
        margin-top: 200px !important
    }
}

.comp__spacing--bottom\:mobile--40 {
    margin-bottom: 40px !important
}

.comp__spacing--bottom\:mobile--64 {
    margin-bottom: 64px !important
}

.comp__spacing--bottom\:mobile--80 {
    margin-bottom: 80px !important
}

.comp__spacing--bottom\:mobile--120 {
    margin-bottom: 120px !important
}

.comp__spacing--bottom\:mobile--150 {
    margin-bottom: 150px !important
}

.comp__spacing--bottom\:mobile--170 {
    margin-bottom: 170px !important
}

.comp__spacing--bottom\:mobile--200 {
    margin-bottom: 200px !important
}

@media(min-width: 992px) {
    .comp__spacing--bottom\:desktop--40 {
        margin-bottom: 40px !important
    }

    .comp__spacing--bottom\:desktop--64 {
        margin-bottom: 64px !important
    }

    .comp__spacing--bottom\:desktop--80 {
        margin-bottom: 80px !important
    }

    .comp__spacing--bottom\:desktop--120 {
        margin-bottom: 120px !important
    }

    .comp__spacing--bottom\:desktop--150 {
        margin-bottom: 150px !important
    }

    .comp__spacing--bottom\:desktop--170 {
        margin-bottom: 170px !important
    }

    .comp__spacing--bottom\:desktop--200 {
        margin-bottom: 200px !important
    }
}

.btn {
    cursor: pointer
}

.btn-primary {
    border-radius: 42px;
    padding: 8px 24px;
    font-size: 16px;
    line-height: 24px;
    font-weight: 800;
    text-shadow: 0px 0px 9px rgba(164, 75, 33, .8);
    text-align: center;
    position: relative;
    top: 0;
    transition: all .5s ease-in-out;
    text-transform: capitalize
}

@media(min-width: 576px) {
    .btn-primary {
        font-size: 16px
    }
}

.btn-primary.yellow {
    background-color: #ffc208;
    color: #fff !important
}

.btn-primary.green {
    background-color: #00ae4d;
    color: #fff !important
}

@media(min-width: 1200px) {
    .btn-primary:hover {
        top: -4px;
        box-shadow: 0px 4px 4px rgba(0, 0, 0, .25)
    }
}

.btn--long {
    width: 337px;
    max-width: 100%
}

.paragraph--type--content-product-header .adimo-site-product-first {
    border-radius: 42px;
    padding: 7px 24px;
    font-size: 16px;
    line-height: 24px;
    font-weight: 800;
    text-transform: uppercase;
    background-color: #ffc208;
    color: #fff;
    width: 100%;
    display: block;
    margin: 0 auto;
    text-align: center;
    position: relative;
    top: 0;
    transition: all .5s ease-in-out
}

@media(min-width: 425px) {
    .paragraph--type--content-product-header .adimo-site-product-first {
        max-width: 320px
    }
}

@media(min-width: 992px) {
    .paragraph--type--content-product-header .adimo-site-product-first {
        width: auto
    }
}

@media(min-width: 1200px) {
    .paragraph--type--content-product-header .adimo-site-product-first:hover {
        top: -4px;
        box-shadow: 0px 4px 4px rgba(0, 0, 0, .25)
    }
}

.paragraph--type--content-product-header .adimo-site-product-first .paragraph--type--ln-c-buy-now-component {
    padding-top: 30px
}

.paragraph--type--content-product-header .adimo-site-product-first button {
    text-shadow: 0px 0px 9px rgba(164, 75, 33, .8);
    background: transparent;
    font-size: 16px;
    line-height: 24px;
    font-weight: 800;
    border: none;
    outline: none;
    color: #fff
}

.button--filter {
    color: #fff;
    font-size: 12px;
    line-height: 16px;
    font-weight: 800;
    text-align: center;
    padding: 8px 16px;
    text-transform: uppercase;
    display: inline-flex;
    position: relative;
    margin: 8px;
    justify-content: center;
    align-items: center;
    transition: all .5s ease-in-out
}

@media(min-width: 1200px) {
    .button--filter:hover {
        color: #00ae4d
    }

    .button--filter:hover.button--filter-small {
        color: #ba6400
    }

    .button--filter:hover::before {
        background: #fff !important
    }
}

html[lang=th] .button--filter {
    font-size: 18px
}

.button--filter:before {
    content: "";
    position: absolute;
    left: 50%;
    top: -2px;
    width: 100%;
    height: 100%;
    border: 2px solid;
    transform: translateX(-50%) skewX(-12deg)
}

.button--filter.button--filter-medium:before {
    background: #00ae4d;
    border-color: #00ae4d;
    transition: all .5s ease-in-out
}

.button--filter.button--filter-small {
    padding-left: 28px;
    padding-right: 28px
}

.button--filter.button--filter-small:before {
    background: #ba6400;
    border-color: #ba6400;
    transition: all .5s ease-in-out
}

.button--filter span {
    position: relative;
    z-index: 1
}

.btn--ask-an-expert {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    padding: 4px 16px;
    height: 28px;
    background: #fff;
    border-radius: 42px;
    color: #00ae4d;
    font-weight: 800;
    font-size: 10px;
    line-height: 12px;
    text-transform: uppercase
}

.btn--ask-an-expert .icon {
    font-size: 20px;
    margin-right: 4px
}

.btn--ask-an-expert .text {
    padding-top: 2px;
    font-weight: 800;
    font-size: 10px;
    line-height: 12px;
    text-transform: uppercase;
    color: #00ae4d
}

html[lang=th] .btn--ask-an-expert .text {
    font-size: 16px
}

.btn-wrapper {
    display: flex;
    justify-content: center
}

.gigya-form-style .gigya-login-provider-row [data-gigya-provider=facebook] button {
    background: url(/themes/custom/milo/assets/images/facebook-login.png) no-repeat center;
    background-size: 100%
}

html[lang=vi] .gigya-form-style .gigya-login-provider-row [data-gigya-provider=facebook] button {
    background: url(/themes/custom/milo/assets/images/facebook-login_vi.png) no-repeat center;
    background-size: 100%
}

html[lang=es] .gigya-form-style .gigya-login-provider-row [data-gigya-provider=facebook] button {
    background: url(/themes/custom/milo/assets/images/facebook-login_co.png) no-repeat center;
    background-size: 100%
}

.gigya-form-style .gigya-login-provider-row [data-gigya-provider=googleplus] button {
    background: url(/themes/custom/milo/assets/images/google-login.png) no-repeat center;
    background-size: 100%
}

html[lang=vi] .gigya-form-style .gigya-login-provider-row [data-gigya-provider=googleplus] button {
    background: url(/themes/custom/milo/assets/images/google-login_vi.png) no-repeat center;
    background-size: 100%
}

html[lang=es] .gigya-form-style .gigya-login-provider-row [data-gigya-provider=googleplus] button {
    background: url(/themes/custom/milo/assets/images/google-login_co.png) no-repeat center;
    background-size: 100%
}

.gigya-form-style.gigya-signup-teaser-screen .gigya-login-provider-row [data-gigya-provider=facebook] button {
    background: url(/themes/custom/milo/assets/images/facebook-signup.png) no-repeat center;
    background-size: 100%
}

html[lang=vi] .gigya-form-style.gigya-signup-teaser-screen .gigya-login-provider-row [data-gigya-provider=facebook] button {
    background: url(/themes/custom/milo/assets/images/facebook-signup_vi.png) no-repeat center;
    background-size: 100%
}

html[lang=es] .gigya-form-style.gigya-signup-teaser-screen .gigya-login-provider-row [data-gigya-provider=facebook] button {
    background: url(/themes/custom/milo/assets/images/facebook-signup_co.png) no-repeat center;
    background-size: 100%
}

.gigya-form-style.gigya-signup-teaser-screen .gigya-login-provider-row [data-gigya-provider=googleplus] button {
    background: url(/themes/custom/milo/assets/images/google-signup.png) no-repeat center;
    background-size: 100%
}

html[lang=vi] .gigya-form-style.gigya-signup-teaser-screen .gigya-login-provider-row [data-gigya-provider=googleplus] button {
    background: url(/themes/custom/milo/assets/images/google-signup_vi.png) no-repeat center;
    background-size: 100%
}

html[lang=es] .gigya-form-style.gigya-signup-teaser-screen .gigya-login-provider-row [data-gigya-provider=googleplus] button {
    background: url(/themes/custom/milo/assets/images/google-signup_co.png) no-repeat center;
    background-size: 100%
}

.select-box {
    position: relative
}

.select-box select {
    opacity: 0;
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%
}

.select-box.active select {
    opacity: 1
}

h1, h2, h3, h4, h5, h6 {
    margin: 0
}

h1, h2 {
    font-weight: 900;
    font-style: italic;
    text-transform: uppercase
}

h1 span, h2 span {
    display: block
}

h1 span.outline, h2 span.outline {
    -webkit-text-stroke: 1px #393939;
    color: transparent
}

@media(min-width: 992px) {
    h1 span.outline, h2 span.outline {
        -webkit-text-stroke: 1.2px #393939
    }
}

.light-text h1, .light-text h2 {
    color: #fff
}

.light-text h1 span.outline, .light-text h2 span.outline {
    -webkit-text-stroke: 1px #fff
}

@media(min-width: 992px) {
    .light-text h1 span.outline, .light-text h2 span.outline {
        -webkit-text-stroke: 1.2px #fff
    }
}

h1 {
    line-height: 1.3
}

h1 span {
    font-size: 2.25rem
}

@media(min-width: 992px) {
    h1 span {
        font-size: 4.5rem
    }
}

html[lang=th] h1 span {
    font-size: 42px;
    line-height: 1
}

html[lang=th] h1 span.field_product_detail_sub_title {
    color: #333
}

@media(min-width: 992px) {
    html[lang=th] h1 span {
        font-size: 78px
    }
}

h1 span.outline {
    font-size: 3.25rem
}

@media(min-width: 992px) {
    h1 span.outline {
        font-size: 6rem
    }
}

html[lang=th] h1 span.outline {
    font-size: 62px;
    line-height: 84%
}

@media(min-width: 992px) {
    html[lang=th] h1 span.outline {
        font-size: 112px;
        line-height: 79%
    }
}

html[lang=vi] h1 span.outline {
    font-size: 50px;
    margin-bottom: 10px
}

@media(min-width: 992px) {
    html[lang=vi] h1 span.outline {
        font-size: 90px;
        margin-bottom: 20px
    }
}

h2 {
    line-height: 1.3
}

h2 span {
    font-size: 1.75rem
}

@media(min-width: 992px) {
    h2 span {
        font-size: 48px
    }
}

html[lang=th] h2 span {
    font-size: 42px;
    line-height: .79
}

@media(min-width: 992px) {
    html[lang=th] h2 span {
        font-size: 78px
    }
}

h2 span.outline {
    font-size: 2.5rem
}

@media(min-width: 992px) {
    h2 span.outline {
        font-size: 4.5rem
    }
}

html[lang=th] h2 span.outline {
    font-size: 62px
}

@media(min-width: 992px) {
    html[lang=th] h2 span.outline {
        font-size: 112px
    }
}

.icon {
    display: block
}

[class^=icon-], [class*=" icon-"] {
    font-family: "icomoon" !important;
    speak: never;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale
}

.icon-inline {
    display: inline-block
}

.icon-instagram:before {}






.link {
    font-size: 10px;
    line-height: 12px;
    letter-spacing: .2px;
    /* font-weight: 800; */
    color: #1432ae;
    transition: all .3s ease-in;
    position: relative;
    top: 0
}

@media(min-width: 768px) {
    .link {
        font-size: 12px;
        line-height: 18px
    }
}

.link:hover {
    top: -5px
}

@media(min-width: 1200px) {
    .link:hover {
        color: #00461f;
        padding-bottom: 5px
    }
}

.link.link--underline {
    font-size: 14px;
    line-height: 17px
}

.link.link--underline::before {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    border-bottom: 2px solid
}

@media(min-width: 768px) {
    .link.link--underline {
        font-size: 22px;
        line-height: 24px
    }
}

.link.link--filter {
    text-transform: uppercase
}

.link.link--arrow {
    display: flex;
    align-items: center;
    gap: 12px
}

@media(min-width: 768px) {
    .link.link--arrow {
        gap: 6px
    }
}

@media(min-width: 768px) {
    .link.link--arrow .icon-chevron-down {
        font-size: 8px
    }
}

html[lang=th] .link {
    font-size: 16px;
    line-height: 1;
    font-weight: 400
}

@media(min-width: 768px) {
    html[lang=th] .link {
        font-size: 18px;
        line-height: 18px
    }
}

html[lang=th] .link.link--underline {
    font-size: 22px;
    line-height: .79
}

@media(min-width: 768px) {
    html[lang=th] .link.link--underline {
        font-size: 26px;
        line-height: .79
    }
}

.loader, .loader:before, .loader:after {
    border-radius: 50%;
    width: 2.5em;
    height: 2.5em;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-animation: load7 1.8s infinite ease-in-out;
    animation: load7 1.8s infinite ease-in-out
}

.loader {
    color: #309c4d;
    font-size: 10px;
    margin: 0 auto;
    margin-top: -25px;
    position: absolute;
    text-indent: -9999em;
    -webkit-transform: translateZ(0);
    -ms-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-animation-delay: -0.16s;
    animation-delay: -0.16s;
    left: 0;
    right: 0;
    top: 51%
}

.loader:before, .loader:after {
    content: "";
    position: absolute;
    top: 0
}

.loader:before {
    left: -3.5em;
    -webkit-animation-delay: -0.32s;
    animation-delay: -0.32s
}

.loader:after {
    left: 3.5em
}

@-webkit-keyframes load7 {
    0%, 80%, 100% {
        box-shadow: 0 2.5em 0 -1.3em
    }

    40% {
        box-shadow: 0 2.5em 0 0
    }
}

@keyframes load7 {
    0%, 80%, 100% {
        box-shadow: 0 2.5em 0 -1.3em
    }

    40% {
        box-shadow: 0 2.5em 0 0
    }
}

.spinner {
    width: 100%;
    height: 100%;
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: 9999;
    background: rgba(0, 0, 0, .9);
    transition: all .3s ease;
    visibility: visible;
    opacity: 1
}

.spinner.hide {
    visibility: hidden;
    opacity: 0
}

.ps {
    overflow: hidden !important;
    overflow-anchor: none;
    -ms-overflow-style: none;
    touch-action: auto;
    -ms-touch-action: auto
}

.ps__rail-x {
    display: none;
    opacity: 0;
    transition: background-color .2s linear, opacity .2s linear;
    -webkit-transition: background-color .2s linear, opacity .2s linear;
    height: 15px;
    bottom: 0px;
    position: absolute
}

.ps__rail-y {
    display: none;
    opacity: 0;
    transition: background-color .2s linear, opacity .2s linear;
    -webkit-transition: background-color .2s linear, opacity .2s linear;
    width: 15px;
    right: 0;
    position: absolute
}

.ps--active-x>.ps__rail-x, .ps--active-y>.ps__rail-y {
    display: block;
    background-color: transparent
}

.ps:hover>.ps__rail-x, .ps:hover>.ps__rail-y, .ps--focus>.ps__rail-x, .ps--focus>.ps__rail-y, .ps--scrolling-x>.ps__rail-x, .ps--scrolling-y>.ps__rail-y {
    opacity: .6
}

.ps .ps__rail-x:hover, .ps .ps__rail-y:hover, .ps .ps__rail-x:focus, .ps .ps__rail-y:focus, .ps .ps__rail-x.ps--clicking, .ps .ps__rail-y.ps--clicking {
    background-color: #eee;
    opacity: .9
}

.ps__thumb-x {
    background-color: #aaa;
    border-radius: 6px;
    transition: background-color .2s linear, height .2s ease-in-out;
    -webkit-transition: background-color .2s linear, height .2s ease-in-out;
    height: 6px;
    bottom: 2px;
    position: absolute
}

.ps__thumb-y {
    background-color: #aaa;
    border-radius: 6px;
    transition: background-color .2s linear, width .2s ease-in-out;
    -webkit-transition: background-color .2s linear, width .2s ease-in-out;
    width: 6px;
    right: 2px;
    position: absolute
}

.ps__rail-x:hover>.ps__thumb-x, .ps__rail-x:focus>.ps__thumb-x, .ps__rail-x.ps--clicking .ps__thumb-x {
    background-color: #999;
    height: 11px
}

.ps__rail-y:hover>.ps__thumb-y, .ps__rail-y:focus>.ps__thumb-y, .ps__rail-y.ps--clicking .ps__thumb-y {
    background-color: #999;
    width: 11px
}

@supports(-ms-overflow-style: none) {
    .ps {
        overflow: auto !important
    }
}

@media screen and (-ms-high-contrast:active), (-ms-high-contrast:none) {
    .ps {
        overflow: auto !important
    }
}

.heading-large--outline {
    font-family: "Montserrat", Helvetica, Arial, sans-serif;
    font-size: 52px;
    font-style: italic;
    font-weight: 900;
    line-height: 52px;
    letter-spacing: .02em;
    color: transparent;
    padding: 24px 0;
    margin: 0;
    -webkit-text-stroke: 1px #393939
}

@media(min-width: 992px) {
    .heading-large--outline {
        font-size: 96px;
        line-height: 90px;
        -webkit-text-stroke: 1.2px #393939
    }
}

.heading-large--filled {
    font-family: "Montserrat", Helvetica, Arial, sans-serif;
    font-size: 36px;
    font-style: italic;
    font-weight: 900;
    line-height: 36px;
    letter-spacing: 0;
    color: #636363;
    padding: 24px 0;
    margin: 0
}

@media(min-width: 992px) {
    .heading-large--filled {
        font-size: 72px;
        line-height: 62px;
        color: #393939
    }
}

.heading--outline {
    font-family: "Montserrat", Helvetica, Arial, sans-serif;
    font-size: 40px;
    font-style: italic;
    font-weight: 900;
    line-height: 40px;
    letter-spacing: .02em;
    color: transparent;
    padding: 24px 0;
    margin: 0;
    -webkit-text-stroke: 1px #393939
}

@media(min-width: 992px) {
    .heading--outline {
        font-size: 72px;
        line-height: 58px;
        -webkit-text-stroke: 1.2px #393939
    }
}

.heading--filled {
    font-family: "Montserrat", Helvetica, Arial, sans-serif;
    font-size: 28px;
    font-style: italic;
    font-weight: 900;
    line-height: 1;
    letter-spacing: 0;
    color: #636363;
    padding: 24px 0;
    margin: 0
}

@media(min-width: 768px) {
    .heading--filled {
        font-size: 38px;
        color: #393939
    }
}

@media(min-width: 1400px) {
    .heading--filled {
        font-size: 48px;
        color: #393939
    }
}

.title--large {
    font-family: "Montserrat", Helvetica, Arial, sans-serif;
    font-size: 24px;
    font-style: normal;
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: 0;
    color: #393939;
    padding: 24px 0;
    margin: 0
}

@media(min-width: 768px) {
    .title--large {
        font-size: 32px
    }
}

.newsnew-123 .title {
    font-family: "Montserrat", Helvetica, Arial, sans-serif;
    font-size: 18px;
    font-style: normal;
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: 0;
    color: #393939;
    padding: 24px 0;
    margin: 0
}

@media(min-width: 768px) {
    .title {
        font-size: 24px
    }
}

.title--small {
    font-family: "LINE Seed Sans TH", Arial, sans-serif;
    font-size: 16px;
    font-style: normal;
    /* font-weight: 800; */
    line-height: 1.2;
    letter-spacing: 0;
    color: #393939;
    padding: 24px 0;
    margin: 0
}

@media(min-width: 768px) {
    .title--small {
        font-size: 18px;
    }
}

html[lang=th] .body-text {
    font-weight: 300;
    font-size: 20px;
    line-height: 1;
    letter-spacing: -0.2px;
    color: #636363;
    margin: 26px 0;
    padding: 0
}

.body-text {
    /* font-weight: 600; */
    font-size: 14px;
    line-height: 20px;
    letter-spacing: -0.2px;
    color: #636363;
    margin: 26px 0;
    padding: 0;
    font-family: "LINE Seed Sans TH", Arial, sans-serif;
}

@media(max-width: 767px) {
    .small-text {
        font-size: 12px;
        line-height: 18px
    }
}

.foot-note {
    font-weight: 600;
    font-size: 10px;
    line-height: 16px;
    letter-spacing: .2px;
    color: #393939
}

.nav-main {
    font-size: 14px;
    line-height: 22px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0;
    color: #393939
}

.tags {
    position: absolute;
    bottom: 0;
    width: 100%;
    display: flex;
    gap: 16px;
}

.tags a {
    display: inline-flex;
    text-align: left;
    padding: 2px 10px;
    position: relative;
    z-index: 2;
    color: #fff;
    font-weight: 800;
    font-size: 12px;
    line-height: 18px;
    text-transform: uppercase;
    pointer-events: none;
    background-color: #f354b2;
}

.tags a:after, .tags a:before {
    content: "";
    display: block;
    width: 9px;
    height: 100%;
    background-color: #f354b2;
    position: absolute;
    top: 0
}

.tags a:before {
    transform: translateX(-50%) skewX(-10deg);
    left: 0
}

.tags a:after {
    right: 0;
    transform: translateX(50%) skewX(-10deg)
}

.tags a:nth-child(3) span {
    font-size: 0;
    display: inline-block;
    position: relative;
    min-width: 12px
}

.tags a:nth-child(3) span:before {
    content: "...";
    font-size: 12px;
    line-height: 18px;
    position: absolute;
    letter-spacing: .1em
}

.tags a:nth-child(n+4) {
    display: none
}

html[lang=vi] .heading--outline {
    line-height: 1.2;
    padding-top: 5px
}

@media(min-width: 992px) {
    html[lang=vi] .heading--outline {
        line-height: 1.2
    }
}

html[lang=vi] .heading-large--filled {
    line-height: 1.2
}

@media(min-width: 992px) {
    html[lang=vi] .heading-large--filled {
        line-height: 1.2
    }
}

html[lang=vi] .heading-large--outline {
    line-height: 1.2
}

@media(min-width: 768px) {
    html[lang=vi] .heading-large--outline {
        line-height: 1.2
    }
}

html[lang=vi] .heading--filled {
    line-height: 1.2
}

html[lang=th] .nav-main {
    font-size: 22px;
    line-height: 22px
}

html[lang=th] .tags a {
    font-size: 18px;
    line-height: 18px
}

html[lang=th] .tags a:nth-child(n+4) {
    display: none
}

html[lang=th] .title, html[lang=th] .title--large, html[lang=th] .heading--outline, html[lang=th] .heading-large--filled, html[lang=th] .heading-large--outline {
    font-family: "PSL Toranong", Helvetica, Arial, sans-serif
}

html[lang=th] .heading-large--outline {
    font-size: 90px;
    line-height: 70px
}

@media(min-width: 992px) {
    html[lang=th] .heading-large--outline {
        font-size: 136px;
        line-height: 100px
    }
}

html[lang=th] .heading-large--filled {
    font-size: 62px;
    line-height: 52px;
    padding: 24px 0;
    margin: 0
}

@media(min-width: 992px) {
    html[lang=th] .heading-large--filled {
        font-size: 112px;
        line-height: 92px
    }
}

html[lang=th] .heading--outline {
    font-size: 62px;
    line-height: 1.2
}

@media(min-width: 992px) {
    html[lang=th] .heading--outline {
        font-size: 112px;
        line-height: 1
    }
}

html[lang=th] .heading--filled {
    font-family: "PSL Toranong", Helvetica, Arial, sans-serif;
    font-size: 42px;
    line-height: 1
}

@media(min-width: 768px) {
    html[lang=th] .heading--filled {
        font-size: 68px
    }
}

@media(min-width: 1400px) {
    html[lang=th] .heading--filled {
        font-size: 78px
    }
}

html[lang=th] .title--large {
    font-size: 36px
}

@media(min-width: 768px) {
    html[lang=th] .title--large {
        font-size: 52px
    }
}

html[lang=th] .title {
    font-size: 30px;
    line-height: .93
}

@media(min-width: 768px) {
    html[lang=th] .title {
        font-size: 36px
    }
}

html[lang=th] .title--small {
    font-size: 20px;
    font-family: "PSL Toranong", Helvetica, Arial, sans-serif
}

@media(min-width: 768px) {
    html[lang=th] .title--small {
        font-size: 30px
    }
}

.paragraph--type--accordion {
    max-width: none
}

.paragraph--type--accordion-item {
    margin-top: 4px
}

@media(min-width: 992px) {
    .paragraph--type--accordion-item {
        margin-top: 20px
    }

    .paragraph--type--accordion-item.ogilvy-faq----accordion-item {
        margin-top: 8px
    }
}

.paragraph--type--accordion-item .accordion--text {
    display: block;
    font-size: 1rem;
    font-weight: 800;
    text-transform: uppercase;
    padding: 12px 20px 12px 0;
    border-bottom: 4px solid #00ae4d;
    color: #393939;
    position: relative;
    cursor: pointer !important;
    line-height: 1.5
}

@media(min-width: 992px) {
    .paragraph--type--accordion-item .accordion--text {
        font-size: 2rem;
        line-height: 1.2;
        padding: 16px 30px 16px 0
    }
}

html[lang=th] .paragraph--type--accordion-item .accordion--text {
    font-weight: 400;
    font-size: 36px;
    line-height: 83%
}

@media(min-width: 992px) {
    html[lang=th] .paragraph--type--accordion-item .accordion--text {
        font-weight: 400;
        font-size: 52px;
        line-height: 81%
    }
}

.paragraph--type--accordion-item .accordion--text:after {
    font-family: "icomoon" !important;
    speak: never;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    font-size: 12px;
    color: #393939;
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    z-index: 1;
    transition: transform .5s ease-in-out
}

@media(min-width: 992px) {
    .paragraph--type--accordion-item .accordion--text:after {
        font-size: 16px
    }
}

.paragraph--type--accordion-item .accordion--text[aria-expanded=true], .paragraph--type--accordion-item .accordion--text:hover {
    color: #00ae4d
}

.paragraph--type--accordion-item .accordion--text[aria-expanded=true]:after, .paragraph--type--accordion-item .accordion--text:hover:after {
    transform: translateY(-50%) rotate(180deg);
    color: #00ae4d
}

.paragraph--type--accordion-item .accordion--text-item {
    background: linear-gradient(256.14deg, #00AE4D 3.56%, #088B2C 99.3%);
    font-weight: 800;
    font-size: 0.875rem;
    line-height: 129%;
    letter-spacing: .005em;
    color: #fff;
    display: block;
    padding: 16px 17% 16px 20px;
    max-width: 745px;
    margin-left: auto;
    margin-right: auto;
    position: relative;
    text-align: left;
    display: flex;
    align-items: center;
    transition: transform .8s ease-in-out
}

@media(min-width: 992px) {
    .paragraph--type--accordion-item .accordion--text-item {
        padding: 20px 55px 20px 20px
    }
}

html[lang=th] .paragraph--type--accordion-item .accordion--text-item {
    font-size: 22px;
    line-height: .9090909091
}

.paragraph--type--accordion-item .accordion--text-item:after {

    font-family: "icomoon" !important;
    speak: never;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    font-size: 12px;
    color: #fff;
    position: absolute;
    right: 23px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 1;
    transition: transform .5s ease-in-out
}

@media(min-width: 992px) {
    .paragraph--type--accordion-item .accordion--text-item:after {
        font-size: 12px;
        right: 26px
    }
}

.paragraph--type--accordion-item .accordion--text-item[aria-expanded=true] {
    background: linear-gradient(256.14deg, #088B2C 3.56%, #00AE4D 99.3%)
}

.paragraph--type--accordion-item .accordion--text-item[aria-expanded=true]:after {
    transform: translateY(-50%) rotate(180deg);
    color: #fff
}

.paragraph--type--accordion-item .accordion--text-item:hover {
    background: linear-gradient(256.14deg, #088B2C 3.56%, #00AE4D 99.3%);
    color: #fff
}

.paragraph--type--accordion-item .accordion--text-item:hover::after {
    color: #fff;
    transform: translateY(-50%) rotate(180deg)
}

.field_component_entity_selector {
    margin: 0 0 15px;
    width: 100%
}

@media(min-width: 992px) {
    .field_component_entity_selector {
        margin: 0 0 20px
    }
}

.ogilvy-faq-component {
    display: block;
    width: 100%;
    max-width: 745px;
    margin-left: auto;
    margin-right: auto;
    text-align: left;
    padding: 15px 10px 15px
}

@media(min-width: 992px) {
    .ogilvy-faq-component {
        padding: 15px 15px 5px
    }
}

.article__item {
    padding-bottom: .4rem
}

.article__item .article__banner {
    position: relative;
    display: block;
    width: 100%;
    height: 0;
    overflow: hidden;
    padding-bottom: 66.6666666667%
}

.article__item .article__banner img {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: translate(-50%, -50%);
    transition: all .5s ease-in-out
}

.article__item .title {
    transition: all .5s ease-in-out;
    text-transform: uppercase;
    padding: 0;
    margin: 12px 0 8px;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-line-clamp: 2;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    color: #00ae4d;
    padding-top: 6px
}

@media(min-width: 768px) {
    .article__item .title {
        margin: 10px 0 16px
    }
}

.article__item .title a {
    color: #00ae4d
}

.article__item .body-text {
    transition: all .5s ease-in-out;
    margin: 0
}

.article__item .body-text p {
    margin: 0
}

.article__item .content-text {
    padding: 0;
    margin: 15px 0 0;
    font-weight: 600;
    font-size: 14px;
    line-height: 143%;
    letter-spacing: -0.2px;
    color: #636363;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-line-clamp: 4;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    height: 80px
}

@media(min-width: 768px) {
    .article__item .content-text {
        height: 60px;
        -webkit-line-clamp: 3;
        margin: 15px 0 0
    }
}

@media(min-width: 1200px) {
    .article__item:hover {
        border: 2px solid #00ae4d
    }

    .article__item:hover .article__banner img {
        transform: translate(-50%, -50%) scale(1.1) !important
    }

    .article__item:hover .title, .article__item:hover .body-text {
        margin-left: 2%;
        margin-right: 2%
    }
}

html[lang=vi] .article__item .title {
    line-height: 1.4
}

html[lang=th] .article__item .content-text {
    font-size: 20px
}

.block_teaser {
    position: relative;
    background-color: #000
}

.block_teaser .container {
    overflow: visible
}

.block_teaser .show-mobile {
    display: block
}

@media(min-width: 1200px) {
    .block_teaser .show-mobile {
        display: none
    }
}

.block_teaser .hide-mobile {
    display: block
}

@media(max-width: 1199px) {
    .block_teaser .hide-mobile {
        display: none
    }
}

.block_teaser img {
    position: absolute;
    top: 0;
    width: 100%;
    object-fit: cover;
    height: 100%
}

@media(max-width: 767px) {
    .block_teaser img {
        position: absolute;
        top: 0;
        left: 50%;
        transform: translateX(-50%);
        max-width: none
    }
}

.block_teaser .inner {
    text-align: center;
    max-width: 500px;
    margin: 0 auto
}

@media(min-width: 768px) {
    .block_teaser .inner {
        text-align: left;
        margin: 0
    }
}

.block_teaser .wrapper {
    position: relative;
    width: 100%;
    padding-top: 60px;
    padding-bottom: 60px
}

@media(min-width: 768px) {
    .block_teaser .wrapper {
        height: 100%;
        top: 0;
        bottom: auto;
        padding-top: 62px;
        padding-bottom: 62px
    }
}

.block_teaser h2 {
    padding: 0;
    -webkit-text-stroke-color: #fff
}

@media(min-width: 768px) {
    .block_teaser h2 {
        padding: 0 0 5px
    }
}

.block_teaser h3 {
    padding: 0;
    margin-bottom: 31px;
    position: relative;
    color: #fff;
    text-transform: uppercase
}

@media(min-width: 992px) {
    .block_teaser h3 {
        margin-bottom: 55px
    }
}

.block_teaser h3::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -16px;
    transform: translateX(-50%);
    width: 60px;
    height: 5px;
    background-color: #ffc208
}

@media(min-width: 768px) {
    .block_teaser h3::after {
        left: 0;
        bottom: -15px;
        transform: none
    }
}

@media(min-width: 992px) {
    .block_teaser h3::after {
        height: 8px;
        width: 120px;
        bottom: -33px
    }
}

.block_teaser .link_teaser {
    display: flex;
    justify-content: center;
    margin: 0;
    padding: 0
}

@media(min-width: 992px) {
    .block_teaser .link_teaser {
        justify-content: flex-start
    }
}

.block_teaser p {
    margin: 0;
    color: #fff;
    margin-bottom: 10px;
    font-weight: 600;
    font-size: 14px;
    line-height: 143%;
    padding: 0 0 6px
}

@media(min-width: 768px) {
    .block_teaser p {
        margin-bottom: 16px;
        margin-bottom: 33px;
        padding: 0;
        max-width: 456px
    }
}

html[lang=vi] .block_teaser h3 {
    line-height: 1.2
}

html[lang=th] .block_teaser p {
    font-size: 20px;
    line-height: 1
}

.block__title {
    text-align: center;
    text-transform: uppercase
}

.block__title .title__wrap {
    position: relative
}

@media(max-width: 767px) {
    .block__title .title__wrap {
        overflow: hidden;
        width: calc(100% + 40px);
        max-width: 100vmin;
        left: 50%;
        transform: translate(-50%, 0)
    }
}

@media(max-width: 767px) {
    .block__title .title__wrap .title__inner-text {
        flex: 0 1 auto;
        max-width: calc(100% - 90px)
    }
}

@media(min-width: 768px) {
    .block__title .title__wrap .title__inner-text {
        max-width: 610px
    }

    html[lang=th] .block__title .title__wrap .title__inner-text {
        font-size: 78px
    }
}

.block__title .heading--outline {
    padding: 0 24px;
    display: block
}

@media(min-width: 768px) {
    .block__title .heading--outline {
        padding: 2px 20px
    }
}

.block__title .heading--filled {
    padding: 0;
    color: #393939;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    gap: 20px
}

@media(max-width: 767px) {
    .block__title .heading--filled {
        width: calc(100% + 20px);
        left: 50%;
        transform: translate(-50%, 0)
    }
}

@media(min-width: 768px) {
    .block__title .heading--filled {
        padding: 2px 0;
        display: inline-flex;
        gap: 16px
    }
}

.block__title .heading--filled:before, .block__title .heading--filled:after {
    content: "";
    flex: 0 100000 50%;
    height: 8px;
    background: #00ae4d;
    transform: skewX(-30deg)
}

@media(min-width: 768px) {
    .block__title .heading--filled:before, .block__title .heading--filled:after {
        height: 16px;
        width: 79px;
        flex-basis: 79px
    }
}

.filter__functions {
    position: relative;
    z-index: 9
}

.filter__functions.active .dropdown {
    opacity: 1;
    pointer-events: all;
    transform: scaleY(1)
}

.filter__functions .link--filter {
    position: relative;
    z-index: 11;
    cursor: pointer
}

.filter__functions .dropdown {
    position: absolute;
    top: -10px;
    right: -10px;
    width: 100%;
    min-width: 240px;
    z-index: 10;
    padding: 10px;
    background: #fff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .1);
    transform: scaleY(0);
    transform-origin: 50% 0;
    pointer-events: none;
    padding-top: 40px;
    opacity: 0;
    transition: all ease .3s
}

.filter__functions .dropdown a {
    padding: 8px 0;
    display: block;
    text-transform: uppercase;
    border-top: 1px solid rgba(99, 99, 99, .2)
}

.filter__functions .dropdown a:hover {
    color: #ffc208
}

footer ul {
    margin: 0;
    padding: 0;
    list-style-type: none
}

.footer-top {
    background-color: #00ae4d;
    padding-top: 36px;
    padding-bottom: 24px;
    border-bottom: 8px solid #ffc208
}

@media(min-width: 768px) {
    .footer-top {
        padding-top: 56px;
        padding-bottom: 64px;
        border-width: 12px
    }
}

.footer-container {
    display: flex
}

@media(max-width: 767px) {
    .footer-container {
        flex-wrap: wrap;
        padding-left: 20px;
        padding-right: 20px
    }
}

.footer__logo--milo {
    flex: 0 0 auto;
    width: 110px
}

.footer__logo--milo a, .footer__logo--milo img {
    display: block;
    width: 100%
}

@media(min-width: 768px) {
    .footer__logo--milo img {
        transform: scale(1.2)
    }
}

.footer__main {
    margin-top: 30px;
    width: 100%
}

@media(min-width: 768px) {
    .footer__main {
        width: auto;
        margin-top: 0;
        margin-left: 5.8%
    }
}

.footer__main li+li {
    line-height: 26px;
    margin-top: 11px
}

.footer__main li a {
    font-weight: 900;
    font-size: 18px;
    line-height: 26px;
    color: #fff
}

html[lang=vi] .footer__main li a {
    font-size: 16px
}

.footer__sub {
    margin-top: 24px;
    width: 100%
}

@media(min-width: 768px) {
    .footer__sub {
        width: auto;
        margin-top: 0;
        margin-left: 7.4%;
        margin-right: 5%
    }
}

.footer__sub li+li {
    margin-top: 22px;
    line-height: 16px
}

.footer__sub li a {
    font-weight: 600;
    font-size: 14px;
    line-height: 18px;
    letter-spacing: .1px;
    text-decoration-line: underline;
    text-transform: uppercase;
    color: #fff
}

@media(min-width: 768px) {
    .footer__sub li a {
        line-height: 16px
    }
}

.footer__contact {
    padding-top: 2px;
    font-weight: 600;
    font-size: 12px;
    line-height: 18px;
    color: #fff;
    margin-top: 40px;
    display: flex;
    flex-wrap: wrap
}

@media(min-width: 768px) {
    .footer__contact {
        width: 288px;
        margin-top: 0;
        margin-left: auto;
        display: block
    }
}

.footer__contact li {
    width: 100%
}

.footer__contact .footer__socials {
    display: inline-flex;
    margin-top: 24px;
    width: auto
}

@media(min-width: 768px) {
    .footer__contact .footer__socials {
        display: flex;
        margin-top: 12px
    }
}

.footer__contact .footer__socials a {
    display: block;
    font-size: 28px;
    color: #fff
}

.footer__contact .footer__socials a+a {
    margin-left: 15px
}

@media(min-width: 768px) {
    .footer__contact .footer__socials a+a {
        margin-left: 29px
    }
}

.footer__contact .footter__ask-an-expert {
    display: inline-flex;
    margin-top: 24px;
    margin-left: 15px;
    width: auto
}

@media(min-width: 768px) {
    .footer__contact .footter__ask-an-expert {
        margin-left: 0;
        margin-top: 24px
    }
}

.footer__contact .footer__tnc {
    flex: 0 0 auto;
    margin-top: 24px;
    display: flex;
    flex-wrap: wrap;
    gap: 6px 16px
}

@media(min-width: 992px) {
    .footer__contact .footer__tnc {
        gap: 6px 24px
    }
}

.footer__contact .footer__tnc a {
    font-weight: 800;
    font-size: 10px;
    line-height: 12px;
    letter-spacing: .2px;
    text-transform: uppercase;
    color: #fff;
    width: calc((95% - 16px)/(3))
}

html[lang=th] .footer__contact .footer__tnc a {
    width: calc((95% - 16px)/(2))
}

@media(min-width: 768px) {
    .footer__contact .footer__tnc a {
        line-height: 16px;
        width: calc((95% - 16px)/(2))
    }
}

@media(max-width: 359px) {
    .footer__contact .footer__tnc a {
        width: calc((95% - 16px)/(2))
    }
}

.footer-bottom {
    padding-top: 16px;
    padding-bottom: 32px
}

@media(min-width: 768px) {
    .footer-bottom {
        padding-top: 24px;
        padding-bottom: 24px
    }
}

.footer-bottom .footer-container {
    justify-content: space-between;
    align-items: flex-end
}

.footer-bottom .footer__logo--nestle img {
    display: block;
    width: 194px
}

@media(min-width: 768px) {
    .footer-bottom .footer__logo--nestle img {
        width: 186px
    }
}

.footer-bottom .footer__copyright {
    font-weight: 600;
    font-size: 10px;
    line-height: 12px;
    color: #636363;
    width: 100%;
    margin-top: 16px
}

@media(min-width: 768px) {
    .footer-bottom .footer__copyright {
        font-size: 12px;
        line-height: 18px;
        text-align: right;
        margin-top: auto;
        width: auto
    }
}

html[lang=th] .footer__main li a {
    font-size: 28px;
    line-height: 28px
}

html[lang=th] .footer__main li>ul {
    margin: 11px 0 20px
}

html[lang=th] .footer__main li>ul a {
    font-size: 20px;
    line-height: 1;
    font-weight: 300
}

html[lang=th] .footer__contact li {
    width: 100%
}

html[lang=th] .footer__contact li:first-child {
    font-weight: 300
}

html[lang=th] .footer__contact .footer__tnc a {
    font-size: 16px;
    line-height: 16px
}

@media(min-width: 768px) {
    html[lang=th] .footer__contact .footer__tnc a {
        line-height: 16px
    }
}

html[lang=th] .footer__sub li a {
    font-size: 20px
}

header {
    position: relative;
    background: linear-gradient(256.14deg, #00ae4d 3.56%, #088b2c 99.3%);
    z-index: 100;
    position: fixed;
    width: 100%
}

header .h-full {
    position: relative
}

header .block.btn--buy-now {
    position: absolute;
    right: 0;
    z-index: 999;
    display: none
}

@media(max-width: 1199px) {
    header {
        display: flex;
        justify-content: flex-end;
        align-items: center;
        max-width: 100%;
        height: 52px;
        padding: 0 12px
    }
}

header ul {
    margin: 0;
    padding: 0;
    list-style-type: none;
    display: flex;
    text-transform: uppercase;
    z-index: 2
}

header ul li a {
    display: block;
    font: inherit;
    color: inherit
}

header .logo {
    width: 86px;
    height: 66px;
    position: absolute;
    top: 0;
    left: 12px;
    background: url(/themes/custom/milo/assets/images/logo/header-logo.png) no-repeat center/cover;
    z-index: 3;
    overflow: hidden
}

@media(min-width: 1200px) {
    header .logo {
        width: 120px;
        height: 120px;
        left: calc(100% / 2 - 1152px / 2 + 12px)
    }
}

header .hamburger {
    display: block;
    width: 20px;
    height: 20px;
    position: relative;
    overflow: hidden
}

@media(min-width: 1200px) {
    header .hamburger {
        display: none
    }
}

header .hamburger span {
    display: block;
    width: 100%;
    height: 2px;
    position: absolute;
    transform: translateY(-50%);
    transform-origin: center;
    background-color: #fff;
    transition: all .2s
}

header .hamburger span:nth-child(1) {
    top: 15%
}

header .hamburger span:nth-child(2) {
    top: 50%
}

header .hamburger span:nth-child(3) {
    top: 85%
}

header .hamburger.open span:nth-child(1) {
    top: 50%;
    transform: translateY(-50%) rotate(45deg)
}

header .hamburger.open span:nth-child(2) {
    opacity: 0;
    transform: translate(100%, -50%)
}

header .hamburger.open span:nth-child(3) {
    top: 50%;
    transform: translateY(-50%) rotate(-45deg)
}

header .mb--search {
    width: 20px;
    height: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-right: 20px;
    padding-top: 1px
}

@media(min-width: 1200px) {
    header .mb--search {
        display: none
    }
}

header .mb--search a {
    display: block
}

header .mb--search a svg {
    display: block;
    width: 100%;
    color: #fff
}

header .mb--search .icon {
    color: #fff;
    display: none
}

.section-sportify header .mb--search, .section-sportify header .hamburger {
    display: none
}

.top-nav {
    position: relative;
    background-color: #00461f;
    display: none
}

@media(min-width: 1200px) {
    .top-nav {
        display: flex
    }
}

@media(min-width: 1200px) {
    .top-nav .nav-container {
        display: flex;
        justify-content: space-between;
        padding-left: 203px;
        padding-right: 0;
        align-items: center
    }
}

.top-nav ul li a {
    padding: 8px 12px;
    font-weight: 800;
    font-size: 10px;
    line-height: 16px;
    color: #00ae4d;
    letter-spacing: .2px
}

.top-nav .top-nav__main ul li a {
    padding-top: 14px;
    padding-bottom: 14px;
    transition: all .3s ease-in-out
}

.top-nav .top-nav__main ul li a:hover {
    color: #fff
}

.top-nav .top-nav__main, .top-nav .top-nav__sub {
    z-index: 2
}

.top-nav .top-nav__sub {
    flex: 1
}

.top-nav .top-nav__sub ul {
    justify-content: flex-end
}

.top-nav .top-nav__sub li {
    display: flex;
    align-items: center
}

.top-nav .top-nav__sub li:first-child .nav-icon {
    margin: 0
}

.top-nav .top-nav__sub li:last-child {
    margin-left: 3%
}

.top-nav .top-nav__sub li:last-child a {
    background: #00ae4d
}

.top-nav .top-nav__sub a {
    display: flex;
    align-items: center;
    height: 70%;
    border-radius: 40px;
    color: #fff;
    transition: all .5s ease-in-out
}

@media(min-width: 1200px) {
    .top-nav .top-nav__sub a:hover {
        top: 0;
        background: #fff !important;
        color: #00461f !important;
        text-shadow: none
    }
}

.top-nav .top-nav__sub .nav-icon {
    display: inline-block;
    width: 16px;
    margin-right: 8px
}

.main-nav {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    background: linear-gradient(1.14deg, #00ae4d 74.26%, #088b2c 106.36%)
}

@media(max-width: 1199px) {
    .main-nav {
        display: none;
        flex-flow: column;
        overflow: auto;
        padding-bottom: 40px;
        height: calc(100vh - 52px)
    }
}

@media(min-width: 1200px) {
    .main-nav {
        background: linear-gradient(256.14deg, #00ae4d 3.56%, #088b2c 99.3%);
        position: relative
    }
}

@media(max-width: 1199px) {
    .main-nav .nav-container {
        margin-top: 0;
        padding: 0
    }
}

@media(min-width: 1200px) {
    .main-nav .nav-container {
        display: flex;
        justify-content: space-between;
        padding-left: 197px;
        padding-right: 0
    }
}

.main-nav ul li {
    position: relative;
    font-weight: 800;
    font-size: 14px;
    line-height: 16px;
    color: #fff
}

.main-nav ul li a {
    padding: 15px 18px
}

.main-nav ul li .btn-primary {
    height: 32px;
    font-weight: 800;
    font-size: 14px;
    line-height: 24px;
    letter-spacing: .02em;
    padding-top: 0;
    padding-bottom: 0;
    padding-left: 24px;
    padding-right: 24px;
    display: flex;
    justify-content: center;
    align-items: center
}

.main-nav .btn-primary {
    height: 32px;
    font-weight: 800;
    font-size: 14px;
    line-height: 24px;
    letter-spacing: .02em;
    padding-top: 0;
    padding-bottom: 0;
    padding-left: 24px;
    padding-right: 24px;
    display: flex;
    justify-content: center;
    align-items: center
}

.main-nav .main-nav__main, .main-nav .main-nav__sub {
    z-index: 2;
    display: flex;
    align-items: center
}

@media(max-width: 1199px) {
    .main-nav .main-nav__main {
        flex-flow: column
    }
}

@media(min-width: 1200px) {
    .main-nav .main-nav__main ul>li.active>a {
        background-color: #00ae4d;
        height: 100%
    }
}

@media(min-width: 1200px) {
    .main-nav .main-nav__main ul>li>a:hover, .main-nav .main-nav__main ul>li>a.open {
        background-color: #00ae4d;
        height: 100%
    }
}

@media(max-width: 1199px) {
    .main-nav .main-nav__main ul:not(.mb--top-nav) {
        flex-flow: column;
        width: 100%
    }
}

@media(max-width: 1199px) {
    .main-nav .main-nav__main ul:not(.mb--top-nav) li {
        margin-top: 28px;
        font-weight: 900;
        font-size: 24px;
        line-height: 29px
    }
}

@media(max-width: 1199px) {
    .main-nav .main-nav__main ul:not(.mb--top-nav) li a {
        padding: 0 50px 0 20px
    }
}

@media(max-width: 1199px) {
    .main-nav .main-nav__main ul:not(.mb--top-nav) li a::before {
        position: absolute;
        right: 20px;
        margin: 0
    }
}

.main-nav .main-nav__main ul:not(.mb--top-nav) li.has-sub>a {
    display: flex;
    align-items: center
}

.main-nav .main-nav__main ul:not(.mb--top-nav) li.has-sub>a::before {

    font-family: "icomoon" !important;
    speak: never;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    font-size: 8px;
    line-height: 1;
    margin-right: 10px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    transition: all .3s
}

.main-nav .main-nav__main ul:not(.mb--top-nav) li.open>a::before {
    transform: rotate(180deg)
}

.main-nav .main-nav__main ul:not(.mb--top-nav) li>ul {
    display: none;
    flex-flow: column;
    padding: 0;
    padding: 0 20px
}

@media(max-width: 1199px) {
    .main-nav .main-nav__main ul:not(.mb--top-nav) li>ul {
        padding-bottom: 24px
    }
}

@media(min-width: 1200px) {
    .main-nav .main-nav__main ul:not(.mb--top-nav) li>ul {
        padding: 12px 30px 30px;
        position: absolute;
        top: 100%;
        left: 0;
        width: 320px;
        background-color: #00ae4d;
        box-shadow: 0px 4px 40px rgba(0, 0, 0, .12)
    }
}

.main-nav .main-nav__main ul:not(.mb--top-nav) li>ul li {
    font-weight: 800;
    font-size: 16px;
    line-height: 20px
}

@media(min-width: 1200px) {
    .main-nav .main-nav__main ul:not(.mb--top-nav) li>ul li {
        font-size: 12px;
        line-height: 18px;
        margin-top: 4px
    }
}

@media(min-width: 1200px) {
    .main-nav .main-nav__main ul:not(.mb--top-nav) li>ul li:hover a::after, .main-nav .main-nav__main ul:not(.mb--top-nav) li>ul li.actived a::after {
        content: "";
        width: calc(100% - 15px);
        height: 2px;
        position: absolute;
        bottom: 0;
        right: 0;
        background-color: #fff
    }
}

.main-nav .main-nav__main ul:not(.mb--top-nav) li>ul li a {
    padding: 0 0 0 15px;
    background: url(/themes/custom/milo/assets/images/icons/svg/chevron-right.svg) no-repeat left 2px center/6px 8px;
    display: inline-block;
    position: relative
}

@media(max-width: 1199px) {
    .main-nav .main-nav__main ul:not(.mb--top-nav) li>ul li a {
        background-position: left center
    }
}

.main-nav .main-nav__main ul:not(.mb--top-nav) li>ul li.sub-nav__head {
    border-bottom: 2px solid #fff;
    align-self: start;
    pointer-events: none;
    margin-bottom: 20px
}

.main-nav .main-nav__main ul:not(.mb--top-nav) li>ul li.sub-nav__head a {
    padding: 0;
    background: none
}

.main-nav .main-nav__main ul:not(.mb--top-nav) li>ul li.sub-nav__head+li {
    margin-top: 0
}

.main-nav .main-nav__main ul:not(.mb--top-nav) li>ul li.sub-nav__group-head {
    font-weight: 600;
    font-size: 14px;
    line-height: 16px;
    letter-spacing: .2px;
    margin-top: 20px;
    pointer-events: none
}

@media(min-width: 1200px) {
    .main-nav .main-nav__main ul:not(.mb--top-nav) li>ul li.sub-nav__group-head {
        font-size: 10px
    }
}

.main-nav .main-nav__main ul:not(.mb--top-nav) li>ul li.sub-nav__group-head a {
    padding: 0;
    background: none
}

@media(max-width: 424px) {
    .main-nav .main-nav__main ul:not(.mb--top-nav) li>ul li.sub-nav__view-all a {
        padding-left: 0;
        background: none;
        font-size: 14px;
        font-weight: 800;
        text-decoration: underline
    }
}

.main-nav .main-nav__main ul:not(.mb--top-nav) li>ul li.sub-nav__hightlight:hover a::after {
    display: none
}

.main-nav .main-nav__main ul:not(.mb--top-nav) li>ul li.sub-nav__hightlight a {
    width: 100%;
    max-width: 210px;
    position: relative;
    padding: 0;
    background: none
}

.main-nav .main-nav__main ul:not(.mb--top-nav) li>ul li.sub-nav__hightlight img {
    display: block;
    width: 100%
}

.main-nav .main-nav__main ul:not(.mb--top-nav) li>ul li.sub-nav__hightlight .label {
    position: absolute;
    left: 0;
    bottom: 0;
    padding: 0 12px 2px;
    width: 100%;
    font-weight: 800;
    font-size: 12px;
    line-height: 18px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

.main-nav .main-nav__sub {
    padding-right: 12px;
    margin-left: 20px;
    flex: 0 0 auto
}

@media(max-width: 1199px) {
    .main-nav .main-nav__sub {
        display: none
    }
}

.main-nav .mb--sub-nav {
    position: relative;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 20px;
    color: #fff;
    margin-top: 20px
}

@media(min-width: 1200px) {
    .main-nav .mb--sub-nav {
        display: none
    }
}

.main-nav .mb--sub-nav li a:not(.btn) {
    padding: 0;
    display: flex;
    align-items: center
}

.main-nav .mb--sub-nav .nav-icon {
    width: 16px;
    margin-right: 8px
}

.main-nav .mb--top-nav {
    width: 100%;
    flex-flow: column;
    margin-top: 16px
}

@media(min-width: 1200px) {
    .main-nav .mb--top-nav {
        display: none
    }
}

@media(max-width: 1199px) {
    .main-nav .mb--top-nav li {
        margin-top: 24px
    }
}

@media(max-width: 1199px) {
    .main-nav .mb--top-nav li a {
        font-weight: 800;
        font-size: 16px;
        line-height: 20px;
        padding: 0 20px
    }
}

.search-container {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 2;
    opacity: 0;
    pointer-events: none;
    background: linear-gradient(1.14deg, #00ae4d 71.01%, #088b2c 106.36%);
    transition: all 0s 2s
}

@media(min-width: 992px) {
    .search-container {
        top: 100%;
        transition: none;
        opacity: 1;
        display: none
    }
}

.search-container.active {
    opacity: 1;
    pointer-events: all;
    height: calc(100vh - 52px);
    transition-delay: 0s
}

@media(min-width: 992px) {
    .search-container.active {
        height: auto
    }
}

.search-container .search-inner {
    padding: 70px 20px 0;
    max-width: 784px;
    margin: auto
}

@media(min-width: 768px) {
    .search-container .search-inner {
        padding: 48px 20px
    }
}

.search-container .body-text {
    color: #fff;
    margin: 16px 0 12px
}

@media(max-width: 767px) {
    .search-container .body-text {
        text-align: left
    }
}

.search-container .search-box {
    position: relative
}

.search-container .search-box input {
    width: 100%;
    display: block;
    border: none;
    border-bottom: 1px solid #fff;
    background: none;
    color: #fff;
    padding: 16px 0;
    font-size: 14px;
    letter-spacing: -0.2px;
    font-weight: 600
}

@media(min-width: 768px) {
    .search-container .search-box input {
        font-size: 18px
    }
}

.search-container .search-box input:focus {
    outline: none
}

.search-container .search-box input::placeholder {
    color: rgba(255, 255, 255, .8)
}

.search-container .search-box button {
    position: absolute;
    background: none;
    border: none;
    outline: none;
    right: 0;
    top: 50%;
    color: #fff;
    transform: translate(0, -50%)
}

@media(max-width: 767px) {
    .search-container .suggestion {
        flex-direction: column
    }
}

html[lang=vi] .section-su-kien header .container, html[lang=vi] .section-su-kien footer .container {
    max-width: 1200px !important
}

@media(max-width: 1199px) {
    html[lang=vi] .main-nav .mb--top-nav li a {
        padding: 0 20px
    }
}

html[lang=th] .top-nav ul li a {
    font-size: 16px
}

html[lang=th] .main-nav__main ul:not(.mb--top-nav) li>ul li {
    font-size: 18px
}

html[lang=th] .main-nav__main ul:not(.mb--top-nav) li>ul li.sub-nav__group-head {
    font-size: 20px
}

@media(max-width: 424px) {
    html[lang=th] .main-nav__main ul:not(.mb--top-nav) li>ul li.sub-nav__view-all a {
        font-size: 20px
    }
}

html[lang=th] .search-box input {
    font-size: 20px
}

html[lang=th] ul li {
    font-size: 22px;
    line-height: 1
}

html[lang=th] ul li .btn-primary {
    font-size: 22px;
    line-height: 1
}

html[lang=th] .btn-primary {
    font-size: 26px;
    font-weight: 400
}

.product__item {
    padding-bottom: .4rem
}

.product__item .product__banner {
    position: relative;
    display: block;
    width: 100%;
    height: 0;
    padding-bottom: 100%;
    background: radial-gradient(64.47% 64.47% at 50% 50%, #ffffff 51.04%, #e5e5e5 100%), linear-gradient(0deg, #e5e5e5, #e5e5e5);
    overflow: hidden
}

.product__item .product__banner img {
    position: absolute;
    left: 50%;
    top: 50%;
    max-width: calc(100% - 20px);
    transform: translate(-50%, -50%);
    transition: all .5s ease-in-out
}

html[lang=th] .product__item .product__banner img {
    max-width: 100%
}

.product__item .product__tagline {
    background: #00ae4d;
    padding: 2px 10px;
    color: #fff;
    text-transform: uppercase;
    font-weight: 800;
    font-size: 12px;
    line-height: 18px
}

html[lang=th] .product__item .product__tagline {
    font-size: 18px
}

@media(max-width: 767px) {
    .product__item .product__tagline {
        display: flex;
        min-height: 40px;
        align-items: center;
        max-height: 40px;
        overflow: hidden
    }
}

.product__item .product__content {
    padding-top: 12px;
    transition: all .5s ease-in-out
}

.product__item .product__content .product__category {
    font-size: 12px;
    line-height: 18px;
    font-weight: 800;
    color: #393939
}

.product__item .product__content .title {
    color: #00ae4d;
    text-transform: uppercase;
    padding: 0;
    margin-top: 8px
}

.product__item .product__content .product__note {
    font-weight: 600;
    font-size: 10px;
    line-height: 16px;
    letter-spacing: .2px;
    color: #393939;
    margin-top: 8px
}

.product__item .product__content .body-text {
    margin: 8px 0
}

.product__item .product__content .body-text p {
    margin: 8px 0
}

.product__item .product__content .product__desc {
    font-weight: 600;
    font-size: 14px;
    line-height: 20px;
    color: #636363;
    margin-top: 8px
}

@media(min-width: 768px) {
    .product__item .product__content .product__desc {
        letter-spacing: -0.2px
    }
}

@media(min-width: 1200px) {
    .product__item:hover {
        border: 2px solid #00ae4d
    }

    .product__item:hover .product__banner img {
        transform: translate(-50%, -50%) scale(1.1)
    }

    .product__item:hover .product__content {
        margin-left: 2%;
        margin-right: 2%
    }
}

html[lang=th] .product__item .product__content .product__desc {
    font-weight: 300;
    font-size: 20px;
    line-height: 1.2
}

html[lang=th] .product__item .product__note, html[lang=th] .product__item .product__category {
    font-size: 18px;
    line-height: 1
}

.recipe__item {
    padding-bottom: .4rem
}

@media(min-width: 1200px) {
    .recipe__item:hover {
        border: 2px solid #00ae4d
    }

    .recipe__item:hover .recipe__banner img {
        transform: translate(-50%, -50%) scale(1.1)
    }

    .recipe__item:hover .title, .recipe__item:hover .content-wrapper, .recipe__item:hover .event_slider {
        margin-left: 2%;
        margin-right: 2%
    }
}

.recipe__item .recipe__banner {
    position: relative;
    display: block;
    width: 100%;
    height: 0;
    overflow: hidden;
    padding-bottom: 66.6666666667%
}

.recipe__item .recipe__banner img {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: translate(-50%, -50%);
    transition: all .5s ease-in-out
}

.recipe__item .title, .recipe__item .content-wrapper, .recipe__item .event_slider {
    transition: all .5s ease-in-out
}

.recipe__item .title {
    text-transform: uppercase;
    padding: 0;
    margin: 12px 0 8px;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-line-clamp: 2;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    color: #00ae4d
}

.recipe__item .title sup {
    top: .09rem
}

@media(min-width: 768px) {
    .recipe__item .title {
        margin: 16px 0
    }
}

.recipe__item .title a {
    color: #00ae4d
}

.recipe__item .title+p {
    font-weight: 600;
    font-size: 14px;
    line-height: 143%
}

.recipe__item .content-wrapper {
    display: flex;
    gap: 20px;
    margin-top: 8px
}

@media(min-width: 768px) {
    .recipe__item .content-wrapper {
        margin-top: 13px
    }
}

.recipe__item .content-wrapper .field_recipe_difficulty, .recipe__item .content-wrapper .field_recipe_cooking_time {
    font-size: 12px;
    line-height: 18px;
    text-transform: uppercase;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px
}

html[lang=th] .recipe__item .content-wrapper .field_recipe_difficulty, html[lang=th] .recipe__item .content-wrapper .field_recipe_cooking_time {
    font-size: 22px;
    line-height: 20px
}

.recipe__item .content-wrapper .field_recipe_cooking_time::before {
    content: "";
    width: 24px;
    height: 24px;
    background-image: url(/themes/custom/milo/assets/images/icons/svg/time.svg);
    background-size: 86% 86%;
    background-repeat: no-repeat
}

.recipe__item .content-wrapper .field_recipe_difficulty::before {
    content: "";
    width: 24px;
    height: 24px;
    background-image: url(/themes/custom/milo/assets/images/icons/svg/difficulty.svg);
    background-size: contain;
    background-repeat: no-repeat
}

html[lang=th] .recipe__item .title+p {
    font-size: 20px
}

.related__slider {
    min-width: 100%;
    overflow: hidden
}

.related__slider .slides__container {
    overflow: hidden;
    margin-right: calc((100vw - 100%) * -0.5 + 8px)
}

.related__slider .slides--default {
    margin-right: 0
}

.related__slider .slides--default .swiper .swiper-wrapper {
    gap: 16px
}

@media(min-width: 768px) {
    .related__slider .slides--default .swiper .swiper-wrapper {
        justify-content: center
    }
}

@media(min-width: 992px) {
    .related__slider .slides--default .swiper .swiper-wrapper {
        gap: 24px
    }
}

.related__slider .slides--default .swiper .swiper-button-next, .related__slider .slides--default .swiper .swiper-button-prev {
    display: none
}

.related__slider .event_slider {
    display: flex;
    gap: 12px;
    flex-direction: column;
    align-items: flex-start;
    margin-top: 15px
}

@media(min-width: 992px) {
    .related__slider .event_slider {
        margin-top: 20px
    }
}

.related__slider .event_slider .event-icon {
    font-weight: 800;
    font-size: 12px;
    line-height: 150%;
    text-transform: uppercase;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    color: #636363
}

.related__slider .event_slider .event-icon span {
    font-size: 20px;
    min-width: 23px;
    text-align: center
}

.related__slider .event_slider .event-icon span.icon-calendar {
    font-size: 23px
}

.related__slider .block__title {
    margin-bottom: 24px
}

@media(min-width: 768px) {
    .related__slider .block__title {
        margin-bottom: 32px
    }
}

.related__slider .container {
    position: relative
}

.related__slider .swiper.swiper--default .swiper-wrapper {
    justify-content: center;
    gap: 16px
}

@media(min-width: 992px) {
    .related__slider .swiper.swiper--default .swiper-wrapper {
        gap: 24px
    }
}

.related__slider .swiper.swiper--default .swiper-button-next, .related__slider .swiper.swiper--default .swiper-button-prev {
    display: none
}

.related__slider .swiper.swiper--active {
    padding-bottom: 55px;
    position: static;
    overflow: visible;
    max-width: 1124px;
    margin: 0
}

@media(min-width: 768px) {
    .related__slider .swiper.swiper--active {
        padding-bottom: 74px
    }
}

.related__slider .swiper-pagination-bullet {
    width: 10px;
    height: 10px;
    margin: 0 6px
}

@media(min-width: 1400px) {
    .related__slider .swiper-button-next, .related__slider .swiper-rtl .swiper-button-prev {
        margin-left: 80px
    }
}

.related__slider .swiper-pagination-bullet-active {
    background: #00ae4d
}

.related__slider .swiper-slide {
    width: 77%
}

@media(min-width: 768px) {
    .related__slider .swiper-slide {
        width: 35%
    }
}

@media(min-width: 992px) {
    .related__slider .swiper-slide {
        width: 360px
    }
}

.related__slider .block__more {
    margin-top: 14px;
    padding-bottom: 10px
}

.comp-ogilvy-form_signup_teaser .teaser-float {
    bottom: 0;
    width: 100%;
    background: linear-gradient(256.14deg, #00AE4D 3.56%, #088B2C 99.3%);
    z-index: 100;
    overflow: hidden
}

.comp-ogilvy-form_signup_teaser .teaser-content p {
    font-size: 12px;
    line-height: 1.33333;
    max-width: 160px;
    flex: 0 0 160px;
    font-weight: 800;
    text-transform: uppercase
}

@media(min-width: 992px) {
    .comp-ogilvy-form_signup_teaser .teaser-content p {
        max-width: 552px;
        flex: 0 0 552px;
        font-size: 20px;
        line-height: 1.2
    }
}

html[lang=th] .comp-ogilvy-form_signup_teaser .teaser-content p {
    font-weight: 400;
    font-size: 20px
}

@media(min-width: 992px) {
    html[lang=th] .comp-ogilvy-form_signup_teaser .teaser-content p {
        font-size: 30px
    }
}

.comp-ogilvy-form_signup_teaser .teaser--fixed {
    position: fixed;
    background: none
}

.comp-ogilvy-form_signup_teaser .teaser--fixed .teaser--mobile {
    display: block
}

.comp-ogilvy-form_signup_teaser .teaser--fixed .teaser--desktop {
    display: none
}

.comp-ogilvy-form_signup_teaser .teaser--desktop {
    display: flex;
    color: #fff;
    align-items: center;
    justify-content: space-between
}

.comp-ogilvy-form_signup_teaser .teaser--mobile {
    display: none;
    position: relative
}

.comp-ogilvy-form_signup_teaser .teaser--mobile p {
    position: absolute;
    top: 55%;
    left: 0;
    transform: translateY(-50%);
    font-size: 11px;
    color: #fff;
    text-transform: uppercase;
    z-index: 2;
    margin: 0
}

.comp__articlelisting_1hero-3small .news-top {
    height: 59px;
    padding-top: 9px;
    border-bottom: #d5d5d5 1px solid;
    margin-bottom: 32px !important;
}

.news-39-1 .tab1 {
    font: 16px/30px 'kanit', Arial, sans-serif;
    color: #0d0d0d;
    padding-top: 25px;
}

.comp__articlelisting_1hero-3small .tab {
    font: 17px/44px 'kanit', Arial, sans-serif;
    color: #0d0d0d;
    margin-bottom: -1px;
    /* padding: 2px 10px; */
    /* background: #41addd; */
    /* border:1px solid #0088d2; */
    /* -webkit-border-radius: 10px; */
    -moz-border-radius: 10px;
    /* border-radius: 10px; */
    /* -webkit-box-shadow: 2px 4px 7px 0px rgba(0,0,0,0.21); */
    -moz-box-shadow: 2px 4px 7px 0px rgba(0, 0, 0, 0.21);
    /* box-shadow: 2px 4px 7px 0px rgba(0,0,0,0.21); */
}

.comp__articlelisting_1hero-3small .tab ul {
    padding: 0;
    margin: 0;
    color: #0d0d0d;
}

.comp__articlelisting_1hero-3small .tab ul li {
    padding: 0px 10px;
}

.comp__articlelisting_1hero-3small .tab .normal {
    /* width: 190px; */
    height: auto;
    display: inline-block;
    text-align: center;
    /* margin-top: 7px;*/
    color: #3e677c;
    padding: 5px 0px 1px 30px;
    /* letter-spacing:1px; */
}

.comp__articlelisting_1hero-3small .tab .active {
    width: 100%;
    /* height: 42px; */
    /* background: #fff; */
    white-space: nowrap;
    border-bottom: 3px solid #ffd800;
    text-align: center;
    margin-top: 0;
    padding: 5px 30px 0px 30px;
    color: #fff;
}

.comp__articlelisting_1hero-3small .tab .active a {
    color: #171717;
    padding: 0 10px 10px 10px;
    font-size: 19px;
}

.comp__articlelisting_1hero-3small .tab .normal a {
    color: #333;
}

.comp__articlelisting_1hero-3small .tab .normal a:hover {
    color: #333;
}

.comp-ogilvy-form_signup_teaser .teaser--mobile span {
    color: #ffc208
}

.comp-ogilvy-form_signup_teaser .btn-wrapper {
    position: relative;
    z-index: 1;
    margin-left: auto;
    min-width: 125px
}

@media(min-width: 992px) {
    .comp-ogilvy-form_signup_teaser .btn-wrapper {
        transform: translateX(25px)
    }
}

.comp-ogilvy-form_signup_teaser .btn-primary {
    font-size: 10px;
    line-height: 12px;
    text-transform: uppercase
}

@media(min-width: 992px) {
    .comp-ogilvy-form_signup_teaser .btn-primary {
        font-size: 16px;
        line-height: 24px
    }
}

.comp-ogilvy-form_signup_teaser .img-bg {
    position: relative;
    z-index: 0;
    transform: translateX(-25px)
}

@media(min-width: 992px) {
    .comp-ogilvy-form_signup_teaser .img-bg {
        transform: none
    }
}

.comp-ogilvy-signup {
    background: linear-gradient(256.14deg, #00AE4D 3.56%, #088B2C 99.3%);
    overflow: hidden
}

.comp-ogilvy-signup h2 {
    font-style: normal;
    font-weight: 800;
    font-size: 12px;
    line-height: 133%;
    color: #fff
}

@media(min-width: 992px) {
    .comp-ogilvy-signup h2 {
        font-size: 20px;
        line-height: 24px;
        padding: 20px 0
    }
}

.comp-ogilvy-signup .btn-wrapper {
    display: flex;
    justify-content: flex-end;
    padding: 12px 0;
    position: relative
}

.comp-ogilvy-signup .btn-wrapper .btn-primary {
    padding: 8px 24px
}

.teaser__item .teaser__banner {
    position: relative;
    display: block;
    width: 100%;
    height: 0;
    padding-bottom: 100%
}

.teaser__item .teaser__banner img {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 150%;
    max-width: calc(100%);
    transform: translate(-50%, -50%)
}

.multiple_gallery .slide-for .slick-list {
    background: radial-gradient(64.47% 64.47% at 50% 50%, #FFFFFF 51.04%, #E5E5E5 100%), linear-gradient(0deg, #E5E5E5, #E5E5E5)
}

.multiple_gallery .slide-for .slick-list:after {
    content: "";
    display: block;
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 45%;
    background: url(/themes/custom/milo/assets/images/products/bg-slide.png) no-repeat center;
    background-size: cover
}

@media(min-width: 992px) {
    .multiple_gallery .slide-for .slick-list:after {
        height: 50%
    }
}

.multiple_gallery .slide-for .slick-track {
    z-index: 1
}

.multiple_gallery .slide-for picture source {
    display: none
}

.multiple_gallery .slide-for .slick-dots {
    bottom: 20px;
    z-index: 1
}

.multiple_gallery .slide-for .slick-dots li {
    padding: 0 6px
}

.multiple_gallery .slide-for .slick-dots button {
    padding: 0;
    opacity: 1;
    background-color: rgba(57, 57, 57, .25)
}

.multiple_gallery .slide-for .slick-dots .slick-active button {
    background-color: #fff
}

.multiple_gallery .slide-for .slick-arrow {
    width: 27px;
    height: 27px;
    background: #00ae4d;
    text-align: center
}

@media(min-width: 992px) {
    .multiple_gallery .slide-for .slick-arrow {
        width: 33px;
        height: 33px
    }
}

.multiple_gallery .slide-for .slick-arrow:before {

    font-family: "icomoon" !important;
    speak: never;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    font-size: 10px;
    line-height: 27px;
    color: #fff;
    transform-origin: center
}

@media(min-width: 992px) {
    .multiple_gallery .slide-for .slick-arrow:before {
        font-size: 12px;
        line-height: 33px
    }
}

.multiple_gallery .slide-for .slick-arrow.slick-prev {
    transform: rotate(90deg);
    left: 22px
}

@media(min-width: 768px) {
    .multiple_gallery .slide-for .slick-arrow.slick-prev {
        left: auto;
        right: 100%;
        margin-right: 20px
    }
}

.multiple_gallery .slide-for .slick-arrow.slick-next {
    transform: rotate(-90deg);
    right: 22px
}

@media(min-width: 768px) {
    .multiple_gallery .slide-for .slick-arrow.slick-next {
        right: auto;
        left: 100%;
        margin-left: 20px
    }
}

.multiple_gallery .slide-nav {
    margin-top: 0;
    padding-top: 16px;
    display: none !important
}

@media(min-width: 992px) {
    .multiple_gallery .slide-nav {
        display: block !important
    }
}

.multiple_gallery .slide-nav .slick-track {
    margin-left: -12px
}

.multiple_gallery .slide-nav .slick-slide {
    padding: 0 12px
}

.multiple_gallery .slide-nav .slide-selected {
    border: 4px solid #00ae4d
}

.multiple_gallery .slide-nav .slide-selected img {
    border: none
}

.multiple_gallery li {
    padding: 16px;
    background: radial-gradient(64.47% 64.47% at 50% 50%, #FFFFFF 51.04%, #E5E5E5 100%), #e5e5e5;
    border: 4px solid transparent
}

.user-login-form {
    padding: 48px 0 80px;
    text-align: center
}

@media(min-width: 992px) {
    .user-login-form {
        padding: 48px 0 120px
    }
}

.user-login-form input[type=text], .user-login-form input[type=password] {
    padding: 8px 14px;
    border: 2px solid #00ae4d;
    width: 100%;
    margin-top: 8px;
    font-size: 14px;
    line-height: 20px;
    border-radius: 0;
    outline: none
}

.user-login-form .js-form-item {
    max-width: 386px;
    padding-top: 16px;
    margin: 0 auto;
    text-align: left
}

@media(min-width: 992px) {
    .user-login-form .js-form-item {
        padding-top: 24px
    }
}

.user-login-form .js-form-item label {
    font-size: 14px;
    font-weight: bold;
    color: #00ae4d
}

.user-login-form .js-form-item .description {
    font-size: 12px;
    padding-top: 5px
}

.user-login-form .form-actions {
    padding-top: 16px
}

@media(min-width: 992px) {
    .user-login-form .form-actions {
        padding-top: 24px
    }
}

.user-login-form .button {
    display: inline-block;
    padding-left: 24px;
    padding-right: 24px;
    max-width: none;
    width: auto;
    padding-bottom: 8px;
    margin-left: auto;
    margin-right: auto;
    border-radius: 42px;
    padding: 8px 24px;
    font-size: 16px;
    line-height: 24px;
    font-weight: 800;
    text-shadow: 0px 0px 9px rgba(164, 75, 33, .8);
    text-align: center;
    position: relative;
    top: 0;
    transition: all .5s ease-in-out;
    text-transform: capitalize;
    background-color: #ffc208;
    color: #fff;
    border: none;
    margin: 0 auto
}

.user-login-form .button:hover {
    top: -5px;
    box-shadow: 0px 4px 5px rgba(164, 75, 33, .8)
}

html[lang=th] .user-login-form input[type=text], html[lang=th] .user-login-form input[type=password] {
    font-size: 20px
}

html[lang=th] .user-login-form .js-form-item label {
    font-size: 20px
}

.comp__article_details_masthead_a {
    position: relative;
    overflow: hidden
}

.comp__article_details_masthead_a>img, .comp__article_details_masthead_a picture {
    width: 100%;
    height: auto
}

.comp__article_details_masthead_a>img img, .comp__article_details_masthead_a picture img {
    max-width: initial;
    width: 100%
}

.comp__article_details_masthead_a .wrapper {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%
}

.comp__article_details_masthead_a .container {
    position: relative;
    padding: 28px 15px 0
}

@media(min-width: 768px) {
    .comp__article_details_masthead_a .container {
        padding: 40px 15px 0
    }
}

.comp__article_details_masthead_a .back {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 12px;
    color: #fff;
    text-transform: uppercase;
    font-weight: bold;
    text-decoration: none;
    position: relative;
    padding: 0 0 0 20px;
    width: 100%;
    display: inline-block;
    text-shadow: 0 0 10px gray
}

@media(min-width: 768px) {
    .comp__article_details_masthead_a .back {
        display: none
    }
}

.comp__article_details_masthead_a .back:after {

    font-family: "icomoon" !important;
    position: absolute;
    top: 50%;
    left: 0;
    speak: never;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    font-size: 6px;
    line-height: 27px;
    color: #fff;
    transform-origin: center;
    transform: translateY(-50%) rotate(90deg)
}

.breadcrumb {
    margin: 0;
    padding: 0;
    list-style: none
}

.breadcrumb li {
    margin: 0 28px 0 0;
    padding: 0;
    color: #fff;
    text-transform: uppercase;
    font-size: 12px;
    display: inline-block;
    vertical-align: middle;
    font-weight: bold
}

.breadcrumb a {
    font-size: 12px;
    color: #fff;
    text-transform: uppercase;
    text-decoration: none;
    position: relative;
    font-weight: bold;
    text-shadow: 0 0 10px gray
}

.breadcrumb a:after {

    font-family: "icomoon" !important;
    position: absolute;
    top: 50%;
    right: -22px;
    speak: never;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    font-size: 6px;
    line-height: 27px;
    color: #fff;
    transform-origin: center;
    transform: translateY(-50%) rotate(-90deg)
}

@media(max-width: 767px) {
    .column-reverse {
        flex-direction: column-reverse
    }

    .column-reverse .content {
        margin-bottom: 25px
    }
}

.comp__article_details_content_description_image {
    display: flex
}

@media(min-width: 768px) {
    .comp__article_details_content_description_image {
        padding: 48px 0
    }
}

.comp__article_details_content_description_image .container {
    position: relative
}

.comp__article_details_content_description_image .image {
    padding-left: 20px;
    padding-right: 20px
}

@media(min-width: 768px) {
    .comp__article_details_content_description_image .image {
        padding-left: 0;
        padding-right: 0;
        width: 44.17%
    }
}

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

.comp__article_details_content_description_image .content {
    padding: 20px 20px 0
}

@media(min-width: 768px) {
    .comp__article_details_content_description_image .content {
        padding: 0px;
        width: 54.83%;
        padding-left: 96px
    }
}

@media(min-width: 768px) {
    .comp__article_details_content_description_image .inner {
        max-width: 456px
    }
}

.comp__article_details_content_description_image h3 {
    font-weight: 800;
    font-size: 24px;
    line-height: 29px;
    margin: 0 0 12px;
    color: #00ae4d
}

.comp__article_details_content_description_image p {
    font-size: 12px;
    font-weight: 600;
    line-height: 150%;
    color: #333
}

@media(min-width: 768px) {
    .comp__article_details_content_description_image p {
        font-size: 14px;
        line-height: 157%;
        letter-spacing: -0.2px
    }
}

.title_italic h3 {
    font-style: italic;
    font-weight: 900;
    font-size: 28px !important;
    line-height: 100% !important;
    letter-spacing: .2px;
    text-transform: uppercase
}

@media(min-width: 768px) {
    .title_italic h3 {
        font-size: 48px !important
    }
}

html[lang=th] .title_italic h3 {
    font-size: 42px !important;
    line-height: .79 !important
}

@media(min-width: 768px) {
    html[lang=th] .title_italic h3 {
        font-size: 78px !important
    }
}

html[lang=th] .comp__article_details_content_description_image p {
    font-size: 16px
}

@media(min-width: 768px) {
    html[lang=th] .comp__article_details_content_description_image p {
        font-size: 20px
    }
}

html[lang=th] .comp__article_details_content_description_no_image h2 {
    font-weight: 400;
    font-size: 30px;
    line-height: 28px
}

@media(min-width: 768px) {
    html[lang=th] .comp__article_details_content_description_no_image h2 {
        font-size: 36px;
        line-height: 32px
    }
}

.comp__article_details_content_description_no_image h3 {
    font-weight: 900;
    font-size: 24px;
    line-height: 29px;
    margin: 20px 0;
    color: #00ae4d
}

@media(min-width: 768px) {
    .comp__article_details_content_description_no_image h3 {
        margin: 35px 0
    }
}

html[lang=th] .comp__article_details_content_description_no_image h3 {
    font-size: 42px;
    line-height: .79
}

@media(min-width: 992px) {
    html[lang=th] .comp__article_details_content_description_no_image h3 {
        font-size: 78px
    }
}

.comp__article_details_content_description_no_image strong {
    font-weight: 800;
    color: #393939
}

.comp__article_details_content_description_no_image p {
    margin: 0 0 20px;
    font-size: 14px;
    font-weight: 600
}

.comp__article_details_content_description_no_image p:last-child {
    margin: 0
}

html[lang=th] .comp__article_details_content_description_no_image p {
    font-size: 20px;
    font-weight: 300
}

html[lang=th] .comp__article_details_content_description_no_image p span {
    font-size: 22px !important
}

.comp__article_details_content_description_no_image ul {
    list-style: none;
    padding-left: 20px;
    margin: 0
}

.comp__article_details_content_description_no_image li {
    position: relative;
    margin-bottom: 24px;
    font-weight: 600;
    color: #636363
}

@media(min-width: 768px) {
    .comp__article_details_content_description_no_image li {
        margin-bottom: 32px
    }
}

.comp__article_details_content_description_no_image li:last-child {
    margin-bottom: 0
}

.comp__article_details_content_description_no_image li::before {

    color: #00ae4d;
    font-weight: bold;
    display: inline-block;
    font-size: 30px;
    width: 20px;
    line-height: 0;
    position: absolute;
    top: 10px;
    left: -20px
}

.comp__article_details_content_description_no_image table {
    width: 100%;
    font-size: 12px;
    font-weight: 600
}

.comp__article_details_content_description_no_image td, .comp__article_details_content_description_no_image th {
    padding: 12px 8px;
    font-size: 12px;
    text-align: left
}

.comp__article_details_content_description_no_image th {
    color: #fff;
    background-color: #00ae4d;
    font-weight: 800
}

.comp__article_details_content_description_no_image th+th {
    border-left: 1px solid #fff
}

.comp__article_details_content_description_no_image td {
    color: #393939;
    border-bottom: 1px solid #ddd
}

.comp__article_details_content_description_no_image td+td {
    border-left: 1px solid #ddd
}

.comp__article_details_content_description_no_image tr:nth-child(odd) {
    background-color: #f2f2f2
}

.comp__article_details_content_description_no_image .btn-primary {
    margin-top: 61px;
    display: inline-block
}

@media(min-width: 768px) {
    .comp__article_details_content_description_no_image .btn-primary {
        margin-top: 48px
    }
}

@media(max-width: 767px) {
    .comp__article_details_content_description_no_image .field_c_video_url {
        margin: 84px -20px 0
    }
}

.comp__article_details_content_description_no_image iframe {
    width: 100%;
    margin: 48px -20px 40px
}

@media(min-width: 768px) {
    .comp__article_details_content_description_no_image iframe {
        margin: 104px 0 56px
    }
}

html[lang=vi] .comp__article_details_content_description_no_image h3 {
    line-height: 1.2 !important
}

.comp__article_details_header_description_social {
    padding: 34px 0 0
}

@media(min-width: 768px) {
    .comp__article_details_header_description_social {
        padding: 48px 0 0
    }
}

.comp__article_details_header_description_social .container {
    position: relative
}

.comp__article_details_header_description_social h1, .comp__article_details_header_description_social h2 {
    font-weight: 900;
    font-size: 36px;
    margin: 0 0 25px;
    color: #333;
    line-height: 120%;
    text-transform: uppercase;
    max-width: 76%
}

@media(min-width: 768px) {
    .comp__article_details_header_description_social h1, .comp__article_details_header_description_social h2 {
        font-size: 48px;
        margin: 0 0 35px;
        line-height: 120%;
        max-width: 80%
    }
}

html[lang=th] .comp__article_details_header_description_social h1, html[lang=th] .comp__article_details_header_description_social h2 {
    font-style: italic;
    font-weight: bold;
    font-size: 42px;
    line-height: 32px
}

@media(min-width: 768px) {
    html[lang=th] .comp__article_details_header_description_social h1, html[lang=th] .comp__article_details_header_description_social h2 {
        font-size: 78px;
        line-height: 62px
    }
}

.comp__article_details_header_description_social p {
    margin: 20px 0;
    font-size: 14px
}

.comp__article_details_header_description_social ul {
    list-style: none;
    padding: 0;
    margin: 0
}

.comp__article_details_header_description_social li {
    padding: 0;
    margin: 0;
    text-transform: uppercase;
    font-size: 12px;
    font-weight: 800
}

.comp__article_details_header_description_social .category {
    padding-right: 30%
}

.comp__article_details_header_description_social .category li {
    margin-bottom: 12px;
    display: inline-block;
    margin-right: 20px
}

@media(min-width: 768px) {
    .comp__article_details_header_description_social .category li {
        margin-bottom: 24px
    }
}

.comp__article_details_header_description_social .category a {
    display: inline-block;
    background-color: #00ae4d;
    position: relative;
    padding: 2px 10px;
    color: #fff
}

.comp__article_details_header_description_social .category a::after {
    content: "";
    position: absolute;
    right: -2px;
    top: 0;
    height: 100%;
    width: 4px;
    transform: skew(-10deg);
    background-color: #00ae4d
}

.comp__article_details_header_description_social .time {
    position: absolute;
    top: 0;
    right: 20px;
    font-weight: 800;
    font-size: 12px;
    text-transform: uppercase;
    margin: 0;
    color: #393939
}

.comp__article_details_header_description_social .infos li {
    margin: 0 0 10px
}

@media(min-width: 768px) {
    .comp__article_details_header_description_social .infos li {
        display: inline-block;
        width: 49%
    }
}

.comp__article_details_header_description_social .infos span {
    font-size: 16px;
    display: inline-block;
    vertical-align: text-top;
    width: 16px;
    text-align: center;
    margin-right: 6px
}

html[lang=vi] .comp__article_details_header_description_social.comp__article_details_max_width100 h1, html[lang=vi] .comp__article_details_header_description_social.comp__article_details_max_width100 h2 {
    max-width: 100%
}

@media(min-width: 768px) {
    html[lang=vi] .comp__article_details_header_description_social.comp__article_details_max_width100 h1, html[lang=vi] .comp__article_details_header_description_social.comp__article_details_max_width100 h2 {
        max-width: 95%
    }
}

html[lang=th] .comp__article_details_header_description_social p {
    font-size: 20px
}

.comp__article_details_image {
    text-align: center;
    padding-bottom: 61px
}

html[lang=th] .comp__article_details_image {
    display: flex;
    justify-content: center
}

@media(min-width: 768px) {
    .comp__article_details_image {
        padding-bottom: 48px
    }
}

.comp__article_details_image a {
    display: inline-block
}

.comp__article_details_image img {
    height: auto
}

.comp__article_details_pullout_quote {
    padding: 62px 0 64px
}

@media(min-width: 768px) {
    .comp__article_details_pullout_quote {
        padding-top: 68px
    }
}

.comp__article_details_pullout_quote .inner {
    position: relative;
    overflow: visible
}

.comp__article_details_pullout_quote .quote-icon {
    position: absolute;
    left: -10px;
    top: -49px;
    width: 96px;
    z-index: -1
}

@media(min-width: 768px) {
    .comp__article_details_pullout_quote .quote-icon {
        top: -51px;
        left: -68px;
        width: 127px
    }
}

.comp__article_details_pullout_quote h3 {
    font-weight: 900;
    line-height: 1;
    font-style: italic;
    text-transform: uppercase;
    color: #00ae4d;
    font-size: 28px
}

@media(min-width: 768px) {
    .comp__article_details_pullout_quote h3 {
        font-size: 48px
    }
}

html[lang=th] .comp__article_details_pullout_quote h3 {
    font-size: 42px;
    line-height: .79
}

@media(min-width: 768px) {
    html[lang=th] .comp__article_details_pullout_quote h3 {
        font-size: 78px
    }
}

.comp__article_details_pullout_quote p {
    font-weight: 600;
    margin-bottom: 0
}

html[lang=vi] .comp__article_details_pullout_quote h3 {
    line-height: 1.3
}

.comp__article_details_section_teaser {
    position: relative;
    overflow: hidden;
    background-color: #000
}

.comp__article_details_section_teaser .container {
    overflow: visible
}

.comp__article_details_section_teaser .show-mobile {
    display: block
}

@media(min-width: 1200px) {
    .comp__article_details_section_teaser .show-mobile {
        display: none
    }
}

.comp__article_details_section_teaser .hide-mobile {
    display: block
}

@media(max-width: 1199px) {
    .comp__article_details_section_teaser .hide-mobile {
        display: none
    }
}

.comp__article_details_section_teaser img {
    position: absolute;
    top: 0;
    opacity: .5;
    width: 100%;
    object-fit: cover;
    height: 100%
}

@media(max-width: 767px) {
    .comp__article_details_section_teaser img {
        left: 50%;
        transform: translateX(-50%);
        max-width: none
    }
}

.comp__article_details_section_teaser .inner {
    text-align: center;
    max-width: 480px;
    margin: 0 auto
}

@media(min-width: 768px) {
    .comp__article_details_section_teaser .inner {
        text-align: left;
        margin: 0
    }
}

.comp__article_details_section_teaser .wrapper {
    padding-top: 77%;
    padding-bottom: 48px;
    position: relative
}

@media(min-width: 768px) {
    .comp__article_details_section_teaser .wrapper {
        padding-top: 90px;
        padding-bottom: 91px
    }
}

.comp__article_details_section_teaser h2 {
    font-size: 40px;
    -webkit-text-stroke: 1px #fff;
    padding: 0
}

@media(min-width: 768px) {
    .comp__article_details_section_teaser h2 {
        font-size: 72px;
        -webkit-text-stroke: 1.2px #fff
    }
}

.comp__article_details_section_teaser h3 {
    font-weight: 900;
    font-style: italic;
    color: #fff;
    text-transform: uppercase;
    margin-bottom: 16px;
    position: relative;
    font-size: 28px
}

@media(min-width: 768px) {
    .comp__article_details_section_teaser h3 {
        font-size: 48px;
        margin-bottom: 32px
    }
}

html[lang=th] .comp__article_details_section_teaser h3 {
    font-size: 42px;
    line-height: .79
}

@media(min-width: 768px) {
    html[lang=th] .comp__article_details_section_teaser h3 {
        font-size: 78px
    }
}

.comp__article_details_section_teaser h3::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -8px;
    transform: translateX(-50%);
    width: 60px;
    height: 5px;
    background-color: #ffc208
}

@media(min-width: 768px) {
    .comp__article_details_section_teaser h3::after {
        width: 120px;
        left: 0;
        bottom: -15px;
        transform: none
    }
}

.comp__article_details_section_teaser p {
    color: #fff;
    margin-bottom: 16px;
    font-weight: 600
}

@media(min-width: 768px) {
    .comp__article_details_section_teaser p {
        margin-bottom: 40px
    }
}

.comp__article_details_table {
    padding-bottom: 81px
}

@media(min-width: 768px) {
    .comp__article_details_table {
        padding-bottom: 120px
    }
}

.comp__article_details_table table {
    width: 100%;
    font-size: 12px;
    font-weight: 600
}

.comp__article_details_table td, .comp__article_details_table th {
    padding: 12px 8px;
    font-size: 12px;
    text-align: left
}

.comp__article_details_table th {
    color: #fff;
    background-color: #00ae4d;
    font-weight: 800
}

.comp__article_details_table th+th {
    border-left: 1px solid #fff
}

.comp__article_details_table td {
    color: #393939;
    border-bottom: 1px solid #ddd
}

.comp__article_details_table td+td {
    border-left: 1px solid #ddd
}

.comp__article_details_table tr:nth-child(odd) {
    background-color: #f2f2f2
}

.comp__articlelisting_1hero-3small {
    position: relative;
    margin-bottom: 80px;
    margin-top: 80px
}

@media(min-width: 768px) {
    .comp__articlelisting_1hero-3small {
        margin-bottom: 100px;
    }
}

.comp__articlelisting_1hero-3small .block__title {
    padding-bottom: 20px
}

@media(min-width: 768px) {
    .comp__articlelisting_1hero-3small .block__title {
        margin-bottom: 56px
    }
}

@media(min-width: 768px) {
    .comp__articlelisting_1hero-3small .block__main-content {
        display: flex;
    }
}

.comp__articlelisting_1hero-3small .hero__content {
    position: relative;
    padding-bottom: 24px
}

@media(min-width: 768px) {
    .comp__articlelisting_1hero-3small .hero__content {
        width: 50%
    }
}

@media(min-width: 992px) {
    .comp__articlelisting_1hero-3small .hero__content {
        width: 50%;
        margin-right: 120px;
        padding-bottom: 54px;
    }
}

.comp__articlelisting_1hero-3small .hero__content:before {
    content: "";
    display: block;
    position: absolute;
    /* background: rgb(37,37,135); */
    /* background: linear-gradient(27deg, rgba(37,37,135,1) 40%, rgba(1,137,212,1) 94%); */
    top: 49px;
    bottom: 0;
    right: -20px;
    width: calc(100% + 40px);
    left: -20px;
    background: rgb(11, 186, 255);
    background: linear-gradient(27deg, rgba(11, 186, 255, 1) 13%, rgba(241, 86, 179, 1) 100%);
}

@media(min-width: 768px) {
    .comp__articlelisting_1hero-3small .hero__content:before {
        left: initial;
        right: -59px;
        width: 200%;
        border-radius: 0px 30px 300px 0px;
    }
}

.comp__articlelisting_1hero-3small .hero__content .hero__inner {
    position: relative;
    z-index: 1
}

@media(min-width: 768px) {
    .comp__articlelisting_1hero-3small .hero__content .hero__inner {
        max-width: 360px
    }
}

@media(min-width: 992px) {
    .comp__articlelisting_1hero-3small .hero__content .hero__inner {
        max-width: 480px
    }
}

.comp__articlelisting_1hero-3small .hero__content .hero__banner {
    position: relative;
    padding-bottom: 66.6666666667%;
    height: 0;
    overflow: hidden
}

.comp__articlelisting_1hero-3small .hero__content .hero__banner img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 13px;
}

.comp__articlelisting_1hero-3small .hero__content .tag {
    position: absolute;
    left: 0;
    bottom: 0
}

.comp__articlelisting_1hero-3small .hero__content .title--small {
    color: #fff;
    text-transform: uppercase;
    padding-bottom: 16px
}

@media(max-width: 767px) {
    .comp__articlelisting_1hero-3small .hero__content .title--small {
        padding: 12px 0
    }
}

.comp__articlelisting_1hero-3small .hero__content .body-text {
    color: #fff;
    margin: 0
}

@media(max-width: 767px) {
    .comp__articlelisting_1hero-3small .list__content {
        padding-top: 28px;
    }
}

@media(min-width: 768px) {
    .comp__articlelisting_1hero-3small .list__content {
        width: 50%;
        padding-left: 60px
    }
}

@media(min-width: 992px) {
    .comp__articlelisting_1hero-3small .list__content {
        width: 40%;
        padding-left: 0
    }
}

.comp__articlelisting_1hero-3small .list__content .list {
    margin: 0;
    padding: 0;
    list-style: none;
    width: 100%
}

.comp__articlelisting_1hero-3small .list__content .list li {
    list-style: none;
    margin-top: 28px;
    width: 100%
}

@media(min-width: 768px) {
    .comp__articlelisting_1hero-3small .list__content .list li {
        margin-top: 40px
    }
}

.comp__articlelisting_1hero-3small .list__content .list li:first-child {
    margin-top: 0
}

.comp__articlelisting_1hero-3small .list__content .item {
    position: relative;
    display: flex;
    cursor: pointer
}

@media(min-width: 1200px) {
    .comp__articlelisting_1hero-3small .list__content .item:hover img {
        transform: scale(1.1)
    }

    .comp__articlelisting_1hero-3small .list__content .item:hover .inner__right .desc {
        color: #00ae4d
    }
}

.comp__articlelisting_1hero-3small .list__content .item .inner__left {
    width: 35%;
    flex: 0 0 35%;
    max-width: 112px;
    overflow: hidden
}

@media(min-width: 992px) {
    .comp__articlelisting_1hero-3small .list__content .item .inner__left {
        width: 168px;
        max-width: 168px;
        flex: 0 0 auto
    }
}

.comp__articlelisting_1hero-3small .list__content .item .inner__left img {
    transition: all .5s ease-in-out;
    width: 100%;
}

.comp__articlelisting_1hero-3small .list__content .item .inner__left .item__thumb {
    position: relative;
    padding-bottom: 150%;
    width: 100%;
    overflow: hidden;
    height: 0
}

.comp__articlelisting_1hero-3small .list__content .item .inner__left .item__thumb img {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    object-fit: cover
}

.comp__articlelisting_1hero-3small .list__content .item .inner__right {
    position: relative;
    flex: 1 1 auto
}

.news-title {
    width: 100%;
    height: auto;
    font: 36px/77px 'kanit', Arial, sans-serif;
    /* font-weight: bold; */
    text-align: center;
    color: #265c80;
}

.comp__articlelisting_1hero-3small .list__content .item .tags {
    position: relative;
    margin-left: 16px;
    margin-bottom: 8px;
    font: 17px/44px 'kanit', Arial, sans-serif;
}

.comp__articlelisting_1hero-3small .list__content .item .tags a:first-child:before {
    display: none
}

.comp__articlelisting_1hero-3small .list__content .item .desc {
    font-size: 12px;
    line-height: 133%;
    color: #393939;
    padding-left: 16px;
    font-weight: 800;
    padding-right: 5%;
    width: 100%;
    transition: all .5s ease-in-out
}

@media(min-width: 992px) {
    .comp__articlelisting_1hero-3small .list__content .item .desc {
        font-size: 14px;
        line-height: 143%;
        font: 15px/22px 'LINE Seed Sans TH', Arial, sans-serif;
        letter-spacing: -0.2px;
    }
}

.comp__articlelisting_1hero-3small .block__more {
    /* margin-top: 62px; */
    position: absolute;
    bottom: 0;
    right: 0;
}

@media(max-width: 767px) {
    .comp__articlelisting_1hero-3small .block__more {
        text-align: center;
        /* margin-top: 700px; */
        top: 50px;
        position: relative;
    }
}

@media(min-width: 768px) {
    .comp__articlelisting_1hero-3small .block__more {
        padding-top: 48px;
        font: 17px/17px 'kanit', Arial, sans-serif;
    }
}

html[lang=th] .comp__articlelisting_1hero-3small .list__content .item .desc {
    font-size: 18px;
    line-height: 1
}

@media(min-width: 992px) {
    html[lang=th] .comp__articlelisting_1hero-3small .list__content .item .desc {
        font-size: 22px
    }
}

.comp__articles_related_3cards .swiper-slide .article__banner {
    position: relative;
    display: block;
    width: 100%;
    height: 0;
    overflow: hidden;
    padding-bottom: 66.6666666667%
}

.comp__articles_related_3cards .swiper-slide .article__banner img {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: translate(-50%, -50%)
}

.comp__articlesLanding_cards_list_a {
    margin-bottom: 80px
}

@media(min-width: 768px) {
    .comp__articlesLanding_cards_list_a {
        margin-bottom: 120px
    }
}

.comp__articlesLanding_cards_list_a .article__listing {
    display: flex;
    gap: 24px;
    width: 100vw;
    margin: auto;
    padding: 0 20px;
    position: relative;
    flex-wrap: wrap
}

@media(max-width: 767px) {
    .comp__articlesLanding_cards_list_a .article__listing {
        left: 50vw;
        transform: translate(-50%, 0)
    }
}

@media(min-width: 992px) {
    .comp__articlesLanding_cards_list_a .article__listing {
        max-width: 1128px;
        padding: 0
    }
}

.comp__articlesLanding_cards_list_a .article__listing .article__item {
    width: 100%;
    margin-bottom: 16px
}

@media(min-width: 768px) {
    .comp__articlesLanding_cards_list_a .article__listing .article__item {
        width: calc(50% - 12px)
    }
}

@media(min-width: 992px) {
    .comp__articlesLanding_cards_list_a .article__listing .article__item {
        width: calc((1 / 3 * 100%) - 16px)
    }
}

@media(min-width: 1400px) {
    .comp__articlesLanding_cards_list_a .article__listing .article__item {
        margin-bottom: 56px
    }
}

.comp__articlesLanding_filter_category {
    margin-top: 48px;
    position: relative;
    z-index: 5
}

@media(min-width: 768px) {
    .comp__articlesLanding_filter_category {
        margin-top: 80px;
        margin-bottom: 28px
    }
}

.comp__articlesLanding_filter_category .article__filters {
    display: flex;
    max-width: 1128px;
    padding: 0 20px;
    margin: 24px auto;
    justify-content: space-between;
    align-items: center;
    position: relative;
    z-index: 5
}

@media(min-width: 768px) {
    .comp__articlesLanding_filter_category .article__filters {
        margin: 28px auto
    }
}

.comp__articlesLanding_filter_category .article__filters .num {
    color: #00ae4d;
    font-weight: 800
}

.comp__articlesLanding_filter_category .article__filters .body-text {
    margin: 0;
    color: #393939
}

html[lang=th] .comp__articlesLanding_filter_category .article__filters .body-text {
    font-weight: 400;
    font-size: 22px;
    line-height: 20px
}

.comp__articlesLanding_filter_category .article__filters .filter__functions {
    max-width: 90px
}

@media(min-width: 576px) {
    .comp__articlesLanding_filter_category .article__filters .filter__functions {
        max-width: none
    }
}

.comp__bar_notification {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background: #efffec;
    z-index: 9999;
    padding: 16px 22px;
    display: none
}

@media(min-width: 992px) {
    .comp__bar_notification {
        padding: 26px 26px 20px
    }
}

.comp__bar_notification.active {
    display: block
}

.comp__bar_notification .block {
    padding-right: 24px
}

.comp__bar_notification .swiper {
    padding-bottom: 12px
}

.comp__bar_notification .swiper-pagination {
    top: 100%;
    margin-top: -20px
}

.comp__bar_notification .swiper-pagination .swiper-pagination-bullet {
    background: #393939;
    opacity: .25
}

.comp__bar_notification .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active {
    opacity: 1
}

.comp__bar_notification .inner {
    display: flex;
    gap: 15px
}

@media(min-width: 992px) {
    .comp__bar_notification .inner {
        gap: 18px
    }
}

@media(max-width: 991px) {
    .comp__bar_notification .inner .content {
        padding-bottom: 12px
    }
}

.comp__bar_notification .inner .title--small {
    font-size: 12px;
    line-height: 18px;
    padding: 0;
    color: #393939
}

@media(min-width: 768px) {
    .comp__bar_notification .inner .title--small {
        font-size: 14px;
        line-height: 16px
    }
}

.comp__bar_notification .inner .body-text {
    margin: 4px 0
}

.comp__bar_notification .inner .body-text p {
    margin: 0;
    font-size: 12px;
    line-height: 150%;
    font-weight: 600;
    color: #636363
}

.comp__bar_notification .inner .body-text a {
    color: #636363;
    text-decoration: underline
}

.comp__bar_notification .inner .icon {
    font-size: 18px
}

.comp__bar_notification .inner .icon--green {
    color: #00ae4d
}

.comp__bar_notification .icon-close {
    position: absolute;
    right: 22px;
    top: 16px;
    color: #000;
    cursor: pointer;
    z-index: 1
}

@media(min-width: 992px) {
    .comp__bar_notification .icon-close {
        top: 50%;
        transform: translateY(-50%)
    }
}

html[lang=th] .comp__bar_notification .inner .title--small {
    font-size: 16px;
    line-height: 1.2
}

@media(min-width: 768px) {
    html[lang=th] .comp__bar_notification .inner .title--small {
        font-size: 20px;
        line-height: 1.2
    }
}

html[lang=th] .comp__bar_notification .inner .body-text p {
    font-size: 16px
}

.bg-video-wrap:before {
    display: block;
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background: linear-gradient(0deg, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4))
}

.bg-video-wrap video {
    position: absolute;
    top: 50%;
    left: 50%;
    height: auto;
    width: auto;
    z-index: -1;
    transform: translateX(-50%) translateY(-50%);
    min-width: 100%;
    min-height: 100%
}

@media(min-width: 992px) {
    .bg-video-wrap .mb-show {
        display: none
    }
}

.bg-video-wrap .lg-show {
    display: none
}

@media(min-width: 992px) {
    .bg-video-wrap .lg-show {
        display: block
    }
}

.bg-video-wrap .container {
    position: relative;
    z-index: 1
}

.page-sign-up .bg-video-wrap:before, .page-login .bg-video-wrap:before {
    display: none
}

.comp__breadcrumb {
    position: relative;
    max-width: 1128px;
    margin: 28px auto 16px;
    text-transform: uppercase;
    padding: 0 20px
}

@media(min-width: 768px) {
    .comp__breadcrumb {
        margin: 40px auto 24px
    }
}

@media(min-width: 1200px) {
    .comp__breadcrumb {
        padding: 0
    }
}

.comp__breadcrumb.breadcrumb--sticky {
    position: absolute;
    top: 0;
    z-index: 99;
    left: 0;
    right: 0
}

@media(min-width: 992px) {
    .comp__breadcrumb.breadcrumb--sticky {
        top: 0
    }
}

.comp__breadcrumb.breadcrumb--sticky li span, .comp__breadcrumb.breadcrumb--sticky li a {
    text-shadow: 0 0 10px gray
}

.comp__breadcrumb.breadcrumb--sticky li.active span {
    color: #fff
}

.comp__breadcrumb.breadcrumb--sticky li i {
    color: #fff
}

.comp__breadcrumb.breadcrumb--sticky li a {
    color: #fff
}

.comp__breadcrumb.breadcrumb--sticky-mobile {
    position: absolute;
    top: 0;
    z-index: 1;
    left: 0;
    right: 0
}

@media(min-width: 992px) {
    .comp__breadcrumb.breadcrumb--sticky-mobile {
        position: relative;
        top: 0
    }
}

@media(max-width: 991px) {
    .comp__breadcrumb.breadcrumb--sticky-mobile li.active span {
        color: #fff
    }
}

@media(max-width: 991px) {
    .comp__breadcrumb.breadcrumb--sticky-mobile li i {
        color: #fff
    }
}

@media(max-width: 991px) {
    .comp__breadcrumb.breadcrumb--sticky-mobile li a {
        color: #fff
    }
}

.comp__breadcrumb ul {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    gap: 28px
}

.comp__breadcrumb li {
    position: relative
}

@media(max-width: 767px) {
    .comp__breadcrumb li {
        margin-left: 6px
    }
}

.comp__breadcrumb li.active span {
    font-size: 12px;
    line-height: 18px;
    color: #00ae4d;
    font-weight: 800
}

.comp__breadcrumb li i {
    position: absolute;
    color: #00ae4d;
    right: 100%;
    font-size: 8px;
    top: 50%;
    margin-right: 6px;
    transform: translate(0, -50%) rotate(-90deg)
}

@media(min-width: 992px) {
    .comp__breadcrumb li i {
        transform: translate(0, -50%) rotate(90deg)
    }
}

.comp__breadcrumb li a {
    font-size: 12px;
    line-height: 18px;
    color: #00ae4d
}

html[lang=th] .comp__breadcrumb li a {
    font-size: 18px
}

@media(max-width: 767px) {
    .comp__breadcrumb li a {
        font-weight: 800
    }
}

@media(min-width: 992px) {
    .comp__breadcrumb .show-mobile {
        display: none
    }
}

@media(max-width: 991px) {
    .comp__breadcrumb .hide-mobile {
        display: none
    }
}

.comp__breadcrumb .link--logout {
    position: absolute;
    right: 12px;
    top: 0;
    font-size: 12px
}

@media(min-width: 992px) {
    .comp__breadcrumb .link--logout {
        right: 0
    }
}

.comp__carousel-fulllength {
    margin: 38px auto 80px
}

@media(min-width: 768px) {
    .comp__carousel-fulllength {
        margin: 80px auto 120px;
        max-width: 1128px
    }
}

.comp__carousel-fulllength .slider__container {
    position: relative
}

@media(max-width: 767px) {
    .comp__carousel-fulllength .slider__container {
        width: 100vw;
        left: 50%;
        margin-left: -50vw
    }
}

@media(max-width: 767px) {
    .comp__carousel-fulllength .slider__container .swiper-button-next, .comp__carousel-fulllength .slider__container .swiper-button-prev {
        opacity: 1;
        background: #fff;
        top: 226px;
        width: 26.67px;
        height: 26.67px
    }
}

@media(min-width: 768px) {
    .comp__carousel-fulllength .slider__container .swiper-button-next, .comp__carousel-fulllength .slider__container .swiper-button-prev {
        top: 260px
    }
}

@media(max-width: 767px) {
    .comp__carousel-fulllength .slider__container .swiper-button-next:after, .comp__carousel-fulllength .slider__container .swiper-button-prev:after {
        color: #00ae4d;
        font-size: 9px
    }
}

.comp__carousel-fulllength .slider__container .swiper-slide-active .slide__content {
    opacity: 1
}

.comp__carousel-fulllength .slider__container .slide__banner {
    position: relative
}

.comp__carousel-fulllength .slider__container .slide__banner a {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 100%;
    z-index: 2
}

.comp__carousel-fulllength .slider__container .slide__banner:before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 1
}

@media(min-width: 768px) {
    .comp__carousel-fulllength .slider__container .slide__banner:before {
        background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.6) 100%)
    }
}

.comp__carousel-fulllength .slider__container .slide__banner img {
    width: 100%
}

.comp__carousel-fulllength .slider__container .slide__banner picture img {
    width: 100%
}

.comp__carousel-fulllength .slider__container .slide__content {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    padding: 20px;
    opacity: 0
}

@media(min-width: 992px) {
    .comp__carousel-fulllength .slider__container .slide__content {
        width: 50%;
        padding-left: 56px;
        padding-bottom: 46px
    }
}

.comp__carousel-fulllength .slider__container .slide__content .heading--filled {
    color: #fff;
    margin: 0
}

@media(max-width: 767px) {
    .comp__carousel-fulllength .slider__container .slide__content .heading--filled {
        padding-bottom: 20px
    }
}

html[lang=th] .comp__carousel-fulllength .slider__container .slide__content .heading--filled {
    font-size: 52px;
    line-height: .8076923077
}

@media(max-width: 767px) {
    html[lang=th] .comp__carousel-fulllength .slider__container .slide__content .heading--filled {
        font-size: 36px;
        line-height: .8333333333
    }
}

.comp__carousel-fulllength .slider__container .slide__content .body-text {
    color: #fff;
    margin-bottom: 0
}

@media(max-width: 767px) {
    .comp__carousel-fulllength .slider__container .slide__content .body-text {
        margin-top: 16px
    }
}

.comp__carousel-fulllength .slider__container .slide__decor-bar {
    width: 60px;
    height: 6px;
    background: #ffc208
}

.comp__carousel-fulllength .slider__container a {
    color: #fff;
    display: block
}

.comp__carousel-fulllength .slider__container a p {
    margin: 0;
    padding: 0
}

@media(max-width: 767px) {
    .comp__carousel-fulllength .slider__container .swiper-button-next, .comp__carousel-fulllength .slider__container .swiper-rtl .swiper-button-prev {
        right: 20px
    }

    .comp__carousel-fulllength .slider__container .swiper-button-prev, .comp__carousel-fulllength .slider__container .swiper-rtl .swiper-button-next {
        left: 20px
    }
}

.comp__carousel-fulllength .swiper {
    position: static;
    margin-top: 24px
}

@media(min-width: 768px) {
    .comp__carousel-fulllength .swiper {
        margin-top: 32px
    }
}

.comp__carousel-fulllength .swiper-pagination {
    position: relative;
    display: flex;
    margin: 30px auto 0
}

@media(max-width: 767px) {
    .comp__carousel-fulllength .swiper-pagination {
        max-width: calc(100% - 40px);
        gap: 10px
    }
}

.comp__carousel-fulllength .fulllength__nav-item {
    flex: 0 0 auto;
    width: calc(25% - 7.5px);
    height: auto;
    opacity: 1;
    position: relative;
    display: flex;
    border-radius: 0;
    margin: 0 !important;
    background: none;
    align-items: center
}

.comp__carousel-fulllength .fulllength__nav-item.swiper-pagination-bullet-active .nav-img:before, .comp__carousel-fulllength .fulllength__nav-item:hover .nav-img:before {
    opacity: 1;
    transform: scale(1)
}

.comp__carousel-fulllength .fulllength__nav-item.swiper-pagination-bullet-active .nav-text, .comp__carousel-fulllength .fulllength__nav-item:hover .nav-text {
    color: #00ae4d
}

.comp__carousel-fulllength .fulllength__nav-item .nav-img {
    width: 100%;
    height: 0;
    padding-bottom: 100%;
    overflow: hidden;
    position: relative
}

@media(min-width: 768px) {
    .comp__carousel-fulllength .fulllength__nav-item .nav-img {
        width: 88px;
        flex-basis: 88px;
        padding-bottom: 88px
    }
}

.comp__carousel-fulllength .fulllength__nav-item .nav-img:before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    display: block;
    width: calc(100% - 12px);
    height: calc(100% - 12px);
    border: 6px solid #00ae4d;
    z-index: 1;
    opacity: 0;
    transform: scale(1.2);
    transition: all ease .3s
}

.comp__carousel-fulllength .fulllength__nav-item .nav-img img {
    object-fit: cover;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%
}

.comp__carousel-fulllength .fulllength__nav-item .nav-text {
    display: none
}

@media(min-width: 768px) {
    .comp__carousel-fulllength .fulllength__nav-item .nav-text {
        display: block;
        text-align: left;
        margin-left: 12px;
        margin-right: 8px;
        width: calc(100% - 118px);
        line-height: 1
    }
}

.comp__carousel-fulllength .swiper-slide {
    pointer-events: none
}

.comp__carousel-fulllength .swiper-slide-active {
    z-index: 9;
    pointer-events: inherit
}

.comp__category-filter {
    position: relative
}

.comp__category-filter .category__banner {
    position: relative
}

@media(min-width: 768px) {
    .comp__category-filter .category__banner {
        min-height: 420px;
        display: flex
    }
}

.comp__category-filter .category__banner:before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    opacity: .4;
    background: #000
}

.comp__category-filter .category__banner picture {
    width: 100%
}

.comp__category-filter .category__banner img {
    display: block;
    object-fit: cover;
    object-position: right;
    width: 100%;
    height: 100%
}

.comp__category-filter .category__content {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 24px;
    padding: 0 20px
}

@media(min-width: 768px) {
    .comp__category-filter .category__content {
        max-width: 1128px;
        margin: auto;
        bottom: 34px;
        padding: 0 10px
    }
}

@media(min-width: 1200px) {
    .comp__category-filter .category__content {
        padding: 0
    }
}

.comp__category-filter .category__content .category__heading {
    max-width: 80%
}

@media(min-width: 768px) {
    .comp__category-filter .category__content .category__heading {
        max-width: 60%
    }
}

@media(min-width: 768px) {
    .comp__category-filter .category__content .filter__functions {
        max-width: 60%
    }
}

.comp__category-filter .category__content .heading, .comp__category-filter .category__content .heading--filled {
    color: #fff;
    padding-bottom: 12px
}

@media(min-width: 768px) {
    .comp__category-filter .category__content .heading, .comp__category-filter .category__content .heading--filled {
        padding-bottom: 16px
    }
}

.comp__category-filter .category__content .separator {
    width: 100%;
    height: 2px;
    background: #e0e0e0;
    margin: 23px 0 15px
}

@media(min-width: 768px) {
    .comp__category-filter .category__content .separator {
        margin: 16px 0
    }
}

.comp__category-filter .category__content .button--filter {
    display: flex
}

html[lang=th] .comp__category-filter .category__content .button--filter {
    min-width: calc(100% - 20px)
}

@media(min-width: 768px) {
    html[lang=th] .comp__category-filter .category__content .button--filter {
        min-width: 200px
    }
}

.comp__category-filter .category__content .filter__type-1 {
    display: flex
}

@media(max-width: 767px) {
    .comp__category-filter .category__content .filter__type-1 {
        flex-wrap: wrap
    }
}

@media(min-width: 992px) {
    .comp__category-filter .category__content .filter__type-1 {
        gap: 8px
    }
}

.comp__category-filter .category__content .filter__type-1 .button:not(.active) {
    color: #00ae4d
}

@media(max-width: 767px) {
    .comp__category-filter .category__content .filter__type-1 .button:not(.active) {
        width: 100%
    }
}

.comp__category-filter .category__content .filter__type-1 .button:not(.active):before {
    background: rgba(0, 0, 0, .25);
    border: 2px solid #00ae4d
}

.comp__category-filter .category__content .filter__type-2 {
    display: flex;
    overflow-x: auto
}

@media(min-width: 992px) {
    .comp__category-filter .category__content .filter__type-2 {
        gap: 2px
    }
}

.comp__category-filter .category__content .filter__type-2::-webkit-scrollbar {
    height: 6px
}

.comp__category-filter .category__content .filter__type-2:hover::-webkit-scrollbar-track {
    background: transparent
}

.comp__category-filter .category__content .filter__type-2:hover::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, .6)
}

.comp__category-filter .category__content .filter__type-2:hover::-webkit-scrollbar-thumb:hover {
    background: #fff
}

@media(max-width: 767px) {
    .comp__category-filter .category__content .filter__type-2 {
        width: calc(100% + 40px);
        margin-left: -20px;
        padding-left: 20px;
        padding-right: 20px
    }
}

@media(min-width: 768px) {
    .comp__category-filter .category__content .filter__type-2 {
        width: calc(100vw - ((100vw - (100% * 10 / 6)) * 0.5));
        padding-right: 60px;
        padding-left: 2px
    }
}

@media(min-width: 1400px) {
    .comp__category-filter .category__content .filter__type-2 {
        width: calc(100vw - ((100vw - 1128px + 60px) * 0.5))
    }
}

.comp__category-filter .category__content .filter__type-2 .button {
    white-space: nowrap
}

.comp__category-filter .category__content .filter__type-2 .button:not(.active) {
    color: #ba6400
}

.comp__category-filter .category__content .filter__type-2 .button:not(.active):before {
    background: rgba(0, 0, 0, .25);
    border: 2px solid #ba6400
}

@media(min-width: 768px) {
    html[lang=vi] .comp__category-filter .category__content .category__heading, html[lang=vi] .comp__category-filter .category__content .filter__functions {
        max-width: 80%
    }
}

.comp__ciam_Masthead_a {
    position: relative;
    overflow: hidden
}

.comp__ciam_Masthead_a>img {
    width: 100%;
    height: auto
}

.comp__ciam_Masthead_a .wrapper {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%
}

.comp__ciam_Masthead_a .container {
    position: relative;
    padding: 28px 15px 0
}

@media(min-width: 768px) {
    .comp__ciam_Masthead_a .container {
        padding: 40px 15px 0
    }
}

.comp__ciam_Masthead_a .back {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 12px;
    color: #fff;
    text-transform: uppercase;
    font-weight: bold;
    text-decoration: none;
    position: relative;
    padding: 0 0 0 20px;
    width: 100%;
    display: inline-block;
    text-shadow: 0 0 10px gray
}

@media(min-width: 768px) {
    .comp__ciam_Masthead_a .back {
        display: none
    }
}

.comp__ciam_Masthead_a .back:after {

    font-family: "icomoon" !important;
    position: absolute;
    top: 50%;
    left: 0;
    speak: never;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    font-size: 6px;
    line-height: 27px;
    color: #fff;
    transform-origin: center;
    transform: translateY(-50%) rotate(90deg)
}

@media(min-width: 992px) {
    .comp-ogilvy-accordion-ingredients .paragraph--type--c-text .paragraph--type--c-text {
        padding: 0
    }
}

.comp-ogilvy-accordion-ingredients h3 {
    font-size: 1rem;
    line-height: 1.25;
    color: #00ae4d;
    text-align: left;
    font-weight: 800
}

.comp-ogilvy-accordion-ingredients p {
    text-align: left
}

.comp-ogilvy-accordion-ingredients img {
    display: inline-block
}

.comp-ogilvy-accordion-ingredients .list-images {
    display: flex;
    justify-content: center;
    padding-top: 10px
}

@media(min-width: 992px) {
    .comp-ogilvy-accordion-ingredients .list-images {
        justify-content: flex-start
    }
}

.comp-ogilvy-accordion-ingredients .list-images>div {
    margin: 0 8px
}

@media(min-width: 992px) {
    .comp-ogilvy-nutrition-table .paragraph--type--c-text .paragraph--type--c-text {
        padding: 0
    }
}

.comp-ogilvy-nutrition-table .field_summary_text {
    overflow-x: auto
}

.comp-ogilvy-nutrition-table table {
    min-width: 576px;
    text-align: left;
    border-collapse: collapse;
    width: 100%
}

.comp-ogilvy-nutrition-table table th {
    background-color: #00ae4d;
    font-size: 0.75rem;
    line-height: 1.5;
    color: #fff;
    padding: 8px;
    border-left: 1px solid #fff
}

.comp-ogilvy-nutrition-table tbody tr:nth-child(even) td {
    background-color: #f2f2f2
}

.comp-ogilvy-nutrition-table tbody td {
    padding: 12px 8px;
    color: #393939;
    border-right: 1px solid #e0e0e0;
    border-bottom: 1px solid #e0e0e0
}

.comp-ogilvy-nutrition-table tbody td:first-child {
    font-weight: 800
}

.comp-ogilvy-nutrition-table tbody td:last-child {
    border-right: none
}

.section-milo-teen-quiz-redeem input {
    background-color: #ffb200;
    border-radius: 5px;
    border: none;
    font-size: 12px;
    min-height: 40px;
    padding: 5px 10px;
    width: 100%;
    color: #000
}

.section-milo-teen-quiz-redeem .ui-widget.ui-widget-content {
    padding-top: 2%
}

.comp__error_contentdescription_image {
    margin-top: 48px
}

@media(min-width: 768px) {
    .comp__error_contentdescription_image {
        margin-top: 100px
    }
}

.comp__error_contentdescription_image .error_contentdescription {
    display: flex;
    flex-direction: column;
    align-items: center
}

@media(min-width: 992px) {
    .comp__error_contentdescription_image .error_contentdescription {
        flex-direction: row
    }
}

.comp__error_contentdescription_image .error_contentdescription .error_contentdescription_image {
    width: 40%;
    max-width: 408px;
    min-width: 200px
}

@media(min-width: 992px) {
    .comp__error_contentdescription_image .error_contentdescription .error_contentdescription_image {
        margin-left: 24px;
        margin-right: 13%
    }
}

.comp__error_contentdescription_image .error_contentdescription .error_contentdescription_content {
    flex: 1;
    margin-bottom: 68px
}

@media(min-width: 992px) {
    .comp__error_contentdescription_image .error_contentdescription .error_contentdescription_content {
        margin-bottom: 0
    }
}

.comp__error_contentdescription_image .error_contentdescription .error_contentdescription_content .heading-large--outline {
    margin: 0;
    padding: 34px 0 0
}

@media(min-width: 992px) {
    .comp__error_contentdescription_image .error_contentdescription .error_contentdescription_content .heading-large--outline {
        padding: 0 0 0;
        margin: -50px 0 0
    }
}

.comp__error_contentdescription_image .error_contentdescription .error_contentdescription_content .heading-large--filled {
    color: #333;
    padding: 7px 0 43px
}

@media(min-width: 768px) {
    .comp__error_contentdescription_image .error_contentdescription .error_contentdescription_content .heading-large--filled {
        padding: 3px 0 48px
    }
}

.comp__error_contentdescription_image .error_contentdescription .error_contentdescription_content h3 {
    font-style: normal;
    font-weight: 600;
    font-size: 14px;
    line-height: 143%;
    letter-spacing: -0.2px;
    color: #636363;
    margin: 40px 0 16px;
    padding: 0
}

@media(min-width: 992px) {
    .comp__error_contentdescription_image .error_contentdescription .error_contentdescription_content h3 {
        margin: 46px 0 14px
    }
}

.comp__error_contentdescription_image .error_contentdescription .error_contentdescription_content ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column
}

@media(min-width: 992px) {
    .comp__error_contentdescription_image .error_contentdescription .error_contentdescription_content ul {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 0 50px
    }
}

.comp__error_contentdescription_image .error_contentdescription .error_contentdescription_content ul li {
    margin-bottom: 12px;
    min-width: 145px
}

.comp__error_contentdescription_image .error_contentdescription .error_contentdescription_content ul li a {
    font-style: normal;
    font-weight: 800;
    font-size: 14px;
    line-height: 143%;
    text-align: center;
    letter-spacing: -0.2px;
    color: #00ae4d;
    border-bottom: 3px solid #00ae4d
}

.comp__error_contentdescription_image .error_contentdescription .error_contentdescription_content p {
    margin: 0;
    padding: 0;
    font-style: normal;
    font-weight: 800;
    font-size: 18px;
    line-height: 22px;
    text-transform: uppercase;
    color: #393939
}

@media(min-width: 768px) {
    .comp__error_contentdescription_image .error_contentdescription .error_contentdescription_content p {
        font-size: 20px;
        line-height: 24px
    }
}

.comp__error_contentdescription_image .error_contentdescription .error_contentdescription_content p a {
    text-decoration: underline;
    color: #00ae4d
}

html[lang=vi] .comp__error_contentdescription_image .error_contentdescription .error_contentdescription_content ul li {
    min-width: 210px
}

html[lang=th] .comp__error_contentdescription_image .error_contentdescription .error_contentdescription_content h3 {
    font-size: 20px
}

html[lang=th] .comp__error_contentdescription_image .error_contentdescription .error_contentdescription_content ul li a {
    font-size: 20px
}

.comp-ogilvy-faq_accordion {
    margin-top: 80px
}

@media(min-width: 768px) {
    .comp-ogilvy-faq_accordion {
        margin-top: 120px
    }
}

.comp-ogilvy-faq_accordion .block__title {
    margin-bottom: 24px
}

@media(min-width: 768px) {
    .comp-ogilvy-faq_accordion .block__title {
        margin-bottom: 32px
    }
}

.comp-ogilvy-faq_accordion .ogilvy-faq----accordion-item.status--enable .accordion--text-item {
    background: #00461f
}

.comp-ogilvy-faq_accordion .ogilvy-faq----accordion-item.status--enable .field_c_title {
    color: #fff
}

.comp-ogilvy-faq_accordion .field_summary_text h1, .comp-ogilvy-faq_accordion .field_summary_text h2, .comp-ogilvy-faq_accordion .field_summary_text h3, .comp-ogilvy-faq_accordion .field_summary_text h4, .comp-ogilvy-faq_accordion .field_summary_text h5, .comp-ogilvy-faq_accordion .field_summary_text h6 {
    color: #00ae4d
}

.comp-ogilvy-faq_accordion .field_summary_text h1 strong, .comp-ogilvy-faq_accordion .field_summary_text h2 strong, .comp-ogilvy-faq_accordion .field_summary_text h3 strong, .comp-ogilvy-faq_accordion .field_summary_text h4 strong, .comp-ogilvy-faq_accordion .field_summary_text h5 strong, .comp-ogilvy-faq_accordion .field_summary_text h6 strong {
    color: #00ae4d
}

.comp-ogilvy-faq_accordion .field_summary_text p {
    font-weight: 600;
    font-size: 14px;
    line-height: 20px;
    letter-spacing: -0.2px;
    color: #636363;
    margin: 26px 0;
    padding: 0;
    margin: 16px 0
}

.comp-ogilvy-faq_accordion .field_summary_text p strong {
    color: #000
}

.comp-ogilvy-faq_accordion .field_summary_text ul {
    padding: 0;
    list-style: none
}

.comp-ogilvy-faq_accordion .field_summary_text ul li {
    margin: 12px 0;
    padding-left: 14px;
    position: relative;
    font-style: normal;
    font-weight: 600;
    font-size: 14px;
    line-height: 143%;
    letter-spacing: -0.2px;
    color: #636363
}

.comp-ogilvy-faq_accordion .field_summary_text ul li:before {
    content: "";
    position: absolute;
    display: block;
    left: 0;
    top: 8px;
    width: 6px;
    height: 6px;
    border-radius: 100%;
    background: #00ae4d
}

html[lang=th] .comp-ogilvy-faq_accordion .field_summary_text ul li {
    font-size: 20px
}

.comp__faq_searchbar form {
    outline: 0;
    display: flex;
    border-radius: 0;
    max-width: 360px;
    width: 100%;
    margin: 54px auto 48px;
    border-bottom: 1px solid #bdbdbd
}

@media(min-width: 768px) {
    .comp__faq_searchbar form {
        margin: 64px auto 80px
    }
}

.comp__faq_searchbar form>.textbox {
    outline: 0;
    height: 36px;
    width: 100%;
    line-height: 36px;
    padding: 0;
    background-color: rgba(255, 255, 255, .8);
    color: #393939;
    border: 0;
    border-radius: 4px 0 0 4px;
    font-weight: 600;
    font-size: 12px;
    letter-spacing: .005em
}

@media(min-width: 768px) {
    .comp__faq_searchbar form>.textbox {
        font-size: 14px;
        letter-spacing: -0.2px
    }
}

.comp__faq_searchbar form>.textbox:focus {
    outline: 0;
    background-color: #fff
}

.comp__faq_searchbar form>.button {
    outline: 0;
    background: none;
    background-color: rgba(38, 50, 56, 0);
    height: 36px;
    width: 42px;
    text-align: center;
    line-height: 36px;
    border: 0;
    color: #00ae4d;
    font: normal normal normal 16px/1 FontAwesome;
    font-size: 16px;
    text-rendering: auto;
    text-shadow: 0 1px 1px rgba(0, 0, 0, .2);
    transition: background-color .4s ease;
    border-radius: 0 4px 4px 0
}

.comp__faq_searchbar form>.button:hover {
    background-color: #00ae4d;
    color: #fff
}

html[lang=vi] .comp__faq_searchbar form {
    max-width: 500px
}

html[lang=th] .comp__faq_searchbar form>.textbox {
    font-size: 16px
}

@media(min-width: 768px) {
    html[lang=th] .comp__faq_searchbar form>.textbox {
        font-size: 20px
    }
}

.comp__featured_card {
    margin-bottom: 48px
}

@media(min-width: 768px) {
    .comp__featured_card {
        margin-bottom: 60px
    }
}

@media(min-width: 992px) {
    .comp__featured_card {
        margin-bottom: 120px
    }
}

.comp__featured_card .hero__content {
    position: relative;
    padding-bottom: 44px;
    margin: auto;
    max-width: 100%
}

@media(min-width: 768px) {
    .comp__featured_card .hero__content {
        max-width: calc(100% - 40px)
    }
}

@media(min-width: 992px) {
    .comp__featured_card .hero__content {
        padding-bottom: 64px;
        padding-left: 90px;
        max-width: 1154px
    }
}

.comp__featured_card .hero__content:before {
    content: "";
    display: block;
    position: absolute;
    top: 40px;
    bottom: 0;
    right: 0;
    width: 100%;
    left: 0;
    background: linear-gradient(256.14deg, #00AE4D 3.56%, #088B2C 99.3%)
}

@media(max-width: 767px) {
    .comp__featured_card .hero__content:before {
        clip-path: polygon(0 20%, 100% 0, 100% 100%, 0% 100%);
        -webkit-clip-path: polygon(0 20%, 100% 0, 100% 100%, 0% 100%)
    }
}

@media(min-width: 768px) {
    .comp__featured_card .hero__content:before {
        transform: skewX(-6deg);
        margin: auto;
        width: calc(100% - 60px)
    }
}

.comp__featured_card .hero__content .hero__inner {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 0 48px
}

@media(max-width: 767px) {
    .comp__featured_card .hero__content .hero__inner {
        padding: 0 20px;
        flex-direction: column
    }
}

.comp__featured_card .hero__content .hero__banner {
    width: 100%
}

@media(min-width: 768px) {
    .comp__featured_card .hero__content .hero__banner {
        max-width: 360px
    }
}

@media(min-width: 992px) {
    .comp__featured_card .hero__content .hero__banner {
        max-width: 480px
    }
}

.comp__featured_card .hero__content .banner__inner {
    position: relative;
    padding-bottom: 66.6666666667%;
    height: 0;
    overflow: hidden
}

.comp__featured_card .hero__content .banner__inner img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover
}

@media(min-width: 768px) {
    .comp__featured_card .hero__content .hero__info {
        max-width: calc(50% - 80px)
    }
}

.comp__featured_card .hero__content .title--small {
    color: #fff;
    text-transform: uppercase;
    padding-bottom: 16px
}

@media(max-width: 767px) {
    .comp__featured_card .hero__content .title--small {
        padding: 12px 0
    }
}

.comp__featured_card .hero__content .body-text {
    color: #fff;
    margin: 0
}

.comp__featured_card .hero__content .body-text p {
    margin: 0
}

.comp__find_sports_center_list .sports_landingpage_find_sports {
    background: none;
    clip-path: none;
    -webkit-clip-path: none;
    padding: 10% 0 0
}

@media(min-width: 992px) {
    .comp__find_sports_center_list .sports_landingpage_find_sports {
        padding: 67px 0 48px
    }
}

@media(max-width: 767px) {
    .comp__find_sports_center_list .find_sports_left .btn-wrapper {
        margin-left: 0;
        margin-right: 0
    }
}

@media(max-width: 767px) {
    .comp__find_sports_center_list .find_sports_right {
        margin-left: 0;
        margin-right: 0
    }
}

.comp__find_sports_center_list .find_sports_right .btn-wrapper {
    margin-top: 20px
}

.comp__find_sports_center_list .find_sports_right .btn-wrapper a {
    background: #ffc208;
    color: #fff !important;
    text-shadow: 0px 0px 9px rgba(164, 75, 33, .8)
}

@media(min-width: 992px) {
    .comp__find_sports_center_list .find_sports_right .btn-wrapper a {
        background: #fff;
        color: #00ae4d !important;
        text-shadow: none
    }
}

@media(min-width: 992px) {
    .comp__find_sports_center_list .find_sports_right .btn-wrapper {
        margin-top: 20px;
        justify-content: flex-start
    }
}

.find-sports__ctrl {
    background: linear-gradient(256.14deg, #00AE4D 3.56%, #088B2C 99.3%);
    padding: 48px 0 40px;
    background-color: #00ae4d
}

@media(min-width: 992px) {
    .find-sports__ctrl {
        padding: 40px 0 28px
    }
}

@media(min-width: 992px) {
    .find-sports__ctrl .find_sports_left .btn-wrapper {
        padding-top: 40px
    }
}

.find-sports__results {
    padding: 48px 0 80px
}

@media(min-width: 768px) {
    .find-sports__results {
        padding: 77px 0 124px
    }
}

@media(min-width: 768px) {
    .find-sports__list {
        display: flex;
        flex-wrap: wrap
    }
}

.find-sports__item {
    margin-bottom: 64px
}

@media(min-width: 768px) {
    .find-sports__item {
        margin-bottom: 96px;
        width: 33.33%;
        padding-right: 65px
    }
}

.find-sports__item h3 {
    color: #333;
    font-weight: 800;
    text-transform: uppercase;
    font-size: 20px;
    line-height: 24px
}

.find-sports__item p {
    color: #00ae4d;
    font-size: 14px;
    font-weight: 800;
    margin: 8px 0 0;
    padding: 0
}

.find-sports__item ul {
    margin: 16px 0 0 0;
    padding: 0;
    list-style: none
}

.find-sports__item li {
    padding: 0;
    margin: 0 0 16px;
    color: #393939;
    font-size: 14px;
    font-weight: 600;
    display: flex
}

.find-sports__item li a {
    font-size: 14px;
    color: #393939
}

.find-sports__item li [class*=icon-] {
    margin-right: 13px;
    width: 17px;
    font-size: 18px
}

.find-sports__item .icon-web+a {
    text-decoration: underline
}

.find_sports_error {
    display: none;
    margin-top: -15px;
    margin-bottom: 16px;
    font-weight: 500;
    font-size: 12px;
    line-height: 150%;
    color: #ffc208;
    position: relative
}

.find_sports_error.active {
    display: block
}

.find_sports_error span {
    color: #ffc208
}

@media(min-width: 768px) {
    .find_sports_error {
        margin-bottom: 24px
    }
}

html[lang=th] .find-sports__item p {
    font-size: 20px
}

html[lang=th] .find-sports__item li {
    font-size: 20px
}

html[lang=th] .find-sports__item li a {
    font-size: 20px
}

@-webkit-keyframes slideInRight {
    0% {
        -webkit-transform: translate3d(100%, 0, 0);
        transform: translate3d(100%, 0, 0);
        visibility: visible
    }

    to {
        -webkit-transform: translateZ(0);
        transform: translateZ(0)
    }
}

@keyframes slideInRight {
    0% {
        -webkit-transform: translate3d(100%, 0, 0);
        transform: translate3d(100%, 0, 0);
        visibility: visible
    }

    to {
        -webkit-transform: translateZ(0);
        transform: translateZ(0)
    }
}

@-webkit-keyframes slideInLeft {
    0% {
        -webkit-transform: translate3d(-100%, 0, 0);
        transform: translate3d(-100%, 0, 0);
        visibility: visible
    }

    to {
        -webkit-transform: translateZ(0);
        transform: translateZ(0)
    }
}

@keyframes slideInLeft {
    0% {
        -webkit-transform: translate3d(-100%, 0, 0);
        transform: translate3d(-100%, 0, 0);
        visibility: visible
    }

    to {
        -webkit-transform: translateZ(0);
        transform: translateZ(0)
    }
}

@-webkit-keyframes slideInTop {
    0% {
        -webkit-transform: translate3d(0, 100%, 0);
        transform: translate3d(0, 100%, 0);
        visibility: visible
    }

    to {
        -webkit-transform: translateZ(0);
        transform: translateZ(0)
    }
}

@keyframes slideInTop {
    0% {
        -webkit-transform: translate3d(0, 100%, 0);
        transform: translate3d(0, 100%, 0);
        visibility: visible
    }

    to {
        -webkit-transform: translateZ(0);
        transform: translateZ(0)
    }
}

.page-about-milo .bg-video-wrap::before {
    opacity: 0
}

@media(min-width: 768px) {
    .comp__history_list_milestonecarousel .block__title .title__wrap .title__inner-text {
        max-width: 685px
    }
}

.comp__history_list_milestonecarousel .history_list_milestonecarousel ul {
    list-style: none;
    display: flex;
    gap: 16px;
    margin: 40px 0 24px;
    padding: 0;
    justify-content: flex-start;
    overflow-x: scroll;
    padding-bottom: 15px
}

.comp__history_list_milestonecarousel .history_list_milestonecarousel ul::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .1);
    background-color: #f5f5f5;
    border-radius: 10px
}

.comp__history_list_milestonecarousel .history_list_milestonecarousel ul::-webkit-scrollbar {
    height: 6px;
    cursor: pointer;
    background-color: #f5f5f5
}

.comp__history_list_milestonecarousel .history_list_milestonecarousel ul::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background-color: #fff;
    background-image: -webkit-gradient(linear, 40% 0%, 75% 84%, from(#4D9C41), to(#19911D), color-stop(0.6, #54DE5D))
}

html[lang=th] .comp__history_list_milestonecarousel .history_list_milestonecarousel ul {
    justify-content: center
}

.comp__history_list_milestonecarousel .history_list_milestonecarousel ul ::-webkit-scrollbar-thumb:hover {
    background: #555
}

@media(min-width: 768px) {
    .comp__history_list_milestonecarousel .history_list_milestonecarousel ul {
        gap: 8.4%;
        margin: 32px 0 56px
    }
}

.comp__history_list_milestonecarousel .history_list_milestonecarousel ul li {
    font-family: Montserrat;
    font-style: italic;
    font-weight: 800;
    font-size: 16px;
    line-height: 20px;
    text-align: center;
    color: #393939;
    cursor: pointer;
    transition: all .5s cubic-bezier(0.175, 0.885, 0.32, 1.275)
}

@media(min-width: 768px) {
    .comp__history_list_milestonecarousel .history_list_milestonecarousel ul li {
        font-size: 24px;
        line-height: 29px
    }
}

.comp__history_list_milestonecarousel .history_list_milestonecarousel ul li:hover, .comp__history_list_milestonecarousel .history_list_milestonecarousel ul li.active {
    color: #00ae4d;
    text-decoration-line: underline
}

.comp__history_list_milestonecarousel .tabcontent {
    display: none
}

.comp__history_list_milestonecarousel .tabcontent.active {
    display: flex;
    gap: 0;
    flex-direction: column-reverse;
    padding-bottom: 70px
}

@media(min-width: 768px) {
    .comp__history_list_milestonecarousel .tabcontent.active {
        flex-direction: row;
        padding-bottom: 120px;
        gap: 90px
    }
}

.comp__history_list_milestonecarousel .tabcontent.active .photo {
    -webkit-animation-name: slideInRight;
    animation-name: slideInRight;
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both
}

.comp__history_list_milestonecarousel .tabcontent.active .tabcontent-info {
    -webkit-animation-name: slideInLeft;
    animation-name: slideInLeft;
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both
}

.comp__history_list_milestonecarousel .tabcontent .tabcontent-info {
    z-index: 2;
    position: relative
}

.comp__history_list_milestonecarousel .tabcontent h3 {
    text-transform: uppercase;
    font-style: italic;
    font-weight: 900;
    font-size: 52px;
    line-height: 52px;
    color: #fff;
    text-shadow: 0px 4px 50px rgba(0, 0, 0, .3);
    position: relative;
    margin-bottom: 50px;
    transition: .1s;
    position: relative;
    z-index: 2
}

@media(min-width: 768px) {
    .comp__history_list_milestonecarousel .tabcontent h3 {
        font-size: 72px;
        line-height: 62px;
        margin: 20px 0 66px
    }
}

html[lang=th] .comp__history_list_milestonecarousel .tabcontent h3 {
    font-size: 52px;
    line-height: 100%
}

@media(min-width: 768px) {
    html[lang=th] .comp__history_list_milestonecarousel .tabcontent h3 {
        font-size: 112px;
        line-height: 82%
    }
}

.comp__history_list_milestonecarousel .tabcontent h3:after {
    content: "";
    position: absolute;
    left: 0;
    height: 5px;
    width: 56px;
    bottom: -20px;
    background-color: #ffc208
}

@media(min-width: 768px) {
    .comp__history_list_milestonecarousel .tabcontent h3:after {
        bottom: -42px;
        height: 8px;
        width: 120px
    }
}

.comp__history_list_milestonecarousel .tabcontent dl {
    position: relative;
    z-index: 2
}

.comp__history_list_milestonecarousel .tabcontent dl dt, .comp__history_list_milestonecarousel .tabcontent dl dd {
    margin: 0;
    padding: 0
}

.comp__history_list_milestonecarousel .tabcontent dl dt {
    font-style: normal;
    font-weight: 800;
    font-size: 18px;
    line-height: 22px;
    text-transform: uppercase;
    color: #393939;
    max-width: 320px;
    margin-bottom: 12px
}

@media(min-width: 768px) {
    .comp__history_list_milestonecarousel .tabcontent dl dt {
        margin-bottom: 16px;
        font-size: 24px;
        line-height: 29px
    }
}

html[lang=th] .comp__history_list_milestonecarousel .tabcontent dl dt {
    font-size: 30px;
    line-height: 93%
}

@media(min-width: 768px) {
    html[lang=th] .comp__history_list_milestonecarousel .tabcontent dl dt {
        font-size: 36px;
        line-height: 89%
    }
}

.comp__history_list_milestonecarousel .tabcontent dl dd {
    font-style: normal;
    font-weight: 600;
    font-size: 14px;
    line-height: 143%;
    letter-spacing: -0.2px;
    color: #636363;
    max-width: 425px
}

@media(min-width: 768px) {
    .comp__history_list_milestonecarousel .tabcontent dl dd {
        font-size: 16px;
        line-height: 22px;
        letter-spacing: .005em
    }
}

html[lang=th] .comp__history_list_milestonecarousel .tabcontent dl dd {
    font-weight: 300;
    font-size: 20px;
    line-height: 20px
}

@media(min-width: 768px) {
    html[lang=th] .comp__history_list_milestonecarousel .tabcontent dl dd {
        font-size: 20px;
        line-height: 20px
    }
}

.comp__history_list_milestonecarousel .tabcontent .photo {
    position: relative;
    max-width: 476px;
    margin: auto;
    flex: 1;
    width: 100%;
    padding: 0 20px;
    margin: 0 auto -88px
}

@media(min-width: 768px) {
    .comp__history_list_milestonecarousel .tabcontent .photo {
        margin: 0 auto;
        padding: 0
    }
}

.comp__history_list_milestonecarousel .tabcontent .photo>div {
    width: 100%;
    position: relative;
    height: 0;
    padding-bottom: 100%;
    overflow: hidden;
    border-radius: 100%
}

.comp__history_list_milestonecarousel .tabcontent .photo img {
    max-width: inherit;
    object-fit: cover;
    position: absolute;
    transform: translate(-50%, -50%);
    top: 50%;
    left: 50%;
    width: 100%;
    min-height: 100%
}

html[lang=th] .comp__history_list_milestonecarousel .tabcontent dl dd {
    font-size: 16px
}

@media(min-width: 768px) {
    html[lang=th] .comp__history_list_milestonecarousel .tabcontent dl dd {
        font-size: 20px
    }
}

.comp__homepage_sectionteaser .wrapper {
    padding-top: 77%;
    padding-bottom: 48px
}

@media(min-width: 768px) {
    .comp__homepage_sectionteaser .wrapper {
        padding-top: 90px;
        padding-bottom: 91px
    }
}

.comp__listing-products {
    margin-bottom: 80px
}

@media(min-width: 768px) {
    .comp__listing-products {
        margin-bottom: 120px
    }
}

.comp__listing-products .product__filters {
    display: flex;
    max-width: 1128px;
    padding: 0 20px;
    margin: 24px auto;
    justify-content: space-between;
    align-items: center
}

@media(min-width: 768px) {
    .comp__listing-products .product__filters {
        margin: 46px auto 28px
    }
}

.comp__listing-products .product__filters .num {
    color: #00ae4d;
    font-weight: 800
}

.comp__listing-products .product__filters .body-text {
    margin: 0;
    color: #393939
}

.comp__listing-products .product__filters .filter__functions {
    max-width: 90px
}

@media(min-width: 576px) {
    .comp__listing-products .product__filters .filter__functions {
        max-width: none
    }
}

.comp__listing-products .product__listing {
    display: flex;
    gap: 24px;
    width: 100vw;
    margin: auto;
    padding: 0 20px;
    position: relative;
    flex-wrap: wrap
}

.comp__listing-products .product__listing.product__listing--empty {
    margin-top: 8px;
    gap: 0;
    flex-direction: column
}

@media(min-width: 992px) {
    .comp__listing-products .product__listing.product__listing--empty {
        margin-top: 36px
    }
}

.comp__listing-products .product__listing.product__listing--empty h2 {
    color: #00ae4d;
    margin: 0 0 16px;
    padding: 0
}

.comp__listing-products .product__listing.product__listing--empty .des-landing {
    font-weight: 600
}

@media(max-width: 767px) {
    .comp__listing-products .product__listing {
        left: 50vw;
        transform: translate(-50%, 0)
    }
}

@media(min-width: 992px) {
    .comp__listing-products .product__listing {
        max-width: 1128px
    }
}

.comp__listing-products .product__listing .product__item {
    width: calc(50% - 12px)
}

@media(min-width: 768px) {
    .comp__listing-products .product__listing .product__item {
        width: calc((1 / 3 * 100%) - 16px)
    }
}

@media(min-width: 992px) {
    .comp__listing-products .product__listing .product__item {
        width: calc(25% - 18px)
    }
}

.comp__masthead_a {
    position: relative
}

.comp__masthead_a .block__bg {
    width: 100%;
    height: 0;
    padding-bottom: 133.3333333333%;
    overflow: hidden
}

@media(min-width: 768px) {
    .comp__masthead_a .block__bg {
        padding-bottom: 29.1666666667%
    }
}

@media(min-width: 1400px) {
    .comp__masthead_a .block__bg {
        padding-bottom: 540px
    }
}

.comp__masthead_a .block__bg video, .comp__masthead_a .block__bg img {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    object-fit: cover
}

.comp__masthead_a .block__content {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    display: flex;
    align-items: flex-end;
    justify-content: flex-start;
    margin: auto;
    max-width: 1128px;
    padding: 32px 20px 0
}

@media(min-width: 1400px) {
    .comp__masthead_a .block__content {
        padding: 0 0 0
    }
}

@media(min-width: 992px) {
    .comp__masthead_a .block__content .content__inner {
        max-width: 60%
    }
}

.comp__masthead_a .block__content .heading--filled {
    padding-bottom: 0;
    color: #fff
}

.comp__masthead_a h1 {
    margin-top: auto;
    padding-bottom: 30px
}

@media(min-width: 992px) {
    .comp__masthead_a h1 {
        padding-bottom: 64px
    }
}

.comp__masthead_a h1 span {
    line-height: 1.22222;
    color: #fff;
    padding: 0
}

@media(min-width: 992px) {
    .comp__masthead_a h1 span {
        line-height: 1
    }
}

.comp__masthead_a h1 .heading-large--filled {
    max-width: 750px
}

.comp__masthead_a h1 .heading-large--outline {
    color: transparent;
    -webkit-text-stroke-color: #fff
}

.comp__masthead_a h1 .heading--filled {
    max-width: 700px
}

.comp__masthead_c {
    position: relative
}

.comp__masthead_c .block__bg {
    width: 100%;
    height: 0;
    padding-bottom: 122.2222222222%;
    overflow: hidden
}

@media(min-width: 768px) {
    .comp__masthead_c .block__bg {
        padding-bottom: 37.5%
    }
}

@media(min-width: 1400px) {
    .comp__masthead_c .block__bg {
        padding-bottom: 540px
    }
}

.comp__masthead_c .block__bg:before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    background: rgba(32, 59, 44, .6)
}

.comp__masthead_c .block__bg video {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    object-fit: cover
}

.comp__masthead_c .block__content {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden
}

.comp__masthead_c .block__content .content__inner {
    text-align: center;
    max-width: 720px
}

.comp__masthead_c .block__content .heading__wrap {
    transform: rotate(-11deg);
    margin-bottom: 68px;
    margin-left: auto;
    margin-right: auto
}

@media(max-width: 767px) {
    .comp__masthead_c .block__content .heading__wrap {
        max-width: 94%
    }
}

@media(max-width: 1024px) {
    .comp__masthead_c .block__content .heading__wrap {
        margin-bottom: 15px
    }
}

.comp__masthead_c .block__content .heading-large--filled {
    padding-bottom: 0;
    color: #fff
}

.comp__masthead_c .block__content .heading-large--outline {
    padding-top: 0;
    -webkit-text-stroke-color: #fff
}

.comp__masthead_c .block__content .heading-large--outline sup {
    font-size: 2.2rem
}

@media(min-width: 992px) {
    .comp__masthead_c .block__content .heading-large--outline sup {
        font-size: 4rem
    }
}

html[lang=vi] .comp__masthead_c .block__content .heading__wrap {
    margin-bottom: 45px
}

@media(max-width: 767px) {
    html[lang=vi] .comp__masthead_c .block__content .heading__wrap {
        max-width: 94%
    }
}

@media(max-width: 1024px) {
    html[lang=vi] .comp__masthead_c .block__content .heading__wrap {
        margin-bottom: 15px
    }
}

@media(max-width: 767px) {
    html[lang=vi] .comp__masthead_c .block__content .heading__wrap {
        margin-bottom: 20%
    }
}

@media(max-width: 359px) {
    html[lang=vi] .comp__masthead_c .block__content .heading__wrap {
        margin-bottom: 5%
    }
}

@media(min-width: 1400px) {
    html[lang=vi] .comp__masthead_c .block__content .heading-large--filled {
        font-size: 60px
    }
}

@media(min-width: 1200px) {
    html[lang=vi] .comp__masthead_c .block__content .heading-large--filled {
        font-size: 50px
    }
}

@media(min-width: 1400px) {
    html[lang=vi] .comp__masthead_c .block__content .heading-large--outline {
        font-size: 90px
    }
}

@media(min-width: 1200px) {
    html[lang=vi] .comp__masthead_c .block__content .heading-large--outline {
        font-size: 75px
    }
}

.ogilvy_webform_custom {
    padding: 12% 0
}

@media(min-width: 576px) {
    .ogilvy_webform_custom {
        padding: 70px 0 70px
    }
}

.ogilvy_webform_custom form {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 1rem 0
}

.ogilvy_webform_custom fieldset {
    border: 0;
    margin: 0;
    padding: 0
}

.ogilvy_webform_custom fieldset .form-item {
    width: 100%
}

.ogilvy_webform_custom fieldset #edit-avatar {
    display: flex;
    position: relative;
    justify-content: space-between;
    padding: 0;
    margin: .5rem 0
}

.ogilvy_webform_custom fieldset #edit-avatar:before {
    width: 48%;
    content: "Select File here";
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    background: #00ae4d;
    color: #fff;
    font-weight: 700;
    z-index: 25;
    text-transform: uppercase;
    pointer-events: none;
    border-radius: 5px 0 0 5px;
    display: flex;
    justify-content: center;
    align-items: center
}

.ogilvy_webform_custom fieldset #edit-avatar input {
    margin: 0
}

.ogilvy_webform_custom fieldset #edit-avatar input:first-child {
    border: 0;
    width: 48%;
    opacity: 0
}

.ogilvy_webform_custom fieldset #edit-avatar input:nth-child(2) {
    width: 50%;
    font-weight: 700;
    z-index: 25;
    color: #fff;
    text-transform: uppercase;
    pointer-events: none;
    border-radius: 0 5px 5px 0;
    background: #00ae4d
}

.ogilvy_webform_custom .form-actions {
    display: block;
    text-shadow: 0px 0px 9px rgba(164, 75, 33, .8);
    text-align: center;
    position: relative;
    top: 0;
    transition: all .5s ease-in-out;
    text-transform: capitalize;
    border: none;
    width: 100%;
    max-width: 320px;
    margin: 0 auto
}

.ogilvy_webform_custom .form-actions input {
    display: block;
    width: 100%;
    background: none;
    border: 0;
    color: #fff;
    font-size: 16px;
    line-height: 24px;
    font-weight: 800;
    margin: 0;
    padding: 0;
    text-transform: uppercase;
    border-radius: 42px;
    padding: 8px 24px;
    background-color: #ffc208
}

.ogilvy_webform_custom .form-item {
    display: block;
    width: 100%;
    box-sizing: border-box
}

@media(min-width: 576px) {
    .ogilvy_webform_custom .form-item {
        width: 48%
    }
}

.ogilvy_webform_custom .form-item label, .ogilvy_webform_custom .form-item .fieldset-legend {
    display: block;
    font-size: .9rem;
    line-height: 1.5;
    font-weight: 600
}

.ogilvy_webform_custom .form-item input, .ogilvy_webform_custom .form-item textarea {
    padding: 8px 14px;
    border: 2px solid #00ae4d;
    width: 100%;
    margin-top: 8px;
    font-size: 14px;
    line-height: 20px;
    border-radius: 0;
    outline: none
}

.ogilvy_webform_custom .form-item.js-form-type-checkbox {
    display: flex
}

.ogilvy_webform_custom .form-item.js-form-type-checkbox label {
    margin: 0;
    position: relative;
    cursor: pointer;
    padding: 0
}

.ogilvy_webform_custom .form-item.js-form-type-checkbox label:before {
    content: "";
    -webkit-appearance: none;
    background-color: transparent;
    border: 2px solid #00ae4d;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .05), inset 0px -15px 10px -12px rgba(0, 0, 0, .05);
    padding: 10px;
    display: inline-block;
    position: relative;
    vertical-align: middle;
    cursor: pointer;
    margin-right: 5px
}

.ogilvy_webform_custom .form-item.js-form-type-checkbox input:checked+label:after {
    content: "";
    display: block;
    position: absolute;
    top: 2px;
    left: 9px;
    width: 6px;
    height: 14px;
    border: solid #00ae4d;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg)
}

.ogilvy_webform_custom .form-item.js-form-type-checkbox input {
    padding: 0;
    height: initial;
    width: initial;
    margin-bottom: 0;
    display: none;
    cursor: pointer
}

.ogilvy_webform_custom .webform-type-radios .js-webform-radios {
    margin: .5rem 0
}

.ogilvy_webform_custom .webform-type-radios .js-webform-radios>div {
    margin-bottom: .5rem
}

.ogilvy_webform_custom .webform-type-radios [type=radio]:checked, .ogilvy_webform_custom .webform-type-radios [type=radio]:not(:checked) {
    position: absolute;
    left: -9999px
}

.ogilvy_webform_custom .webform-type-radios [type=radio]:checked+label, .ogilvy_webform_custom .webform-type-radios [type=radio]:not(:checked)+label {
    position: relative;
    padding-left: 28px;
    cursor: pointer;
    line-height: 20px;
    display: inline-block;
    color: #666
}

.ogilvy_webform_custom .webform-type-radios [type=radio]:checked+label:before, .ogilvy_webform_custom .webform-type-radios [type=radio]:not(:checked)+label:before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 18px;
    height: 18px;
    border: 1px solid #ddd;
    border-radius: 100%;
    background: #fff
}

.ogilvy_webform_custom .webform-type-radios [type=radio]:checked+label:after, .ogilvy_webform_custom .webform-type-radios [type=radio]:not(:checked)+label:after {
    content: "";
    width: 12px;
    height: 12px;
    background: #00ae4d;
    position: absolute;
    top: 4px;
    left: 4px;
    border-radius: 100%;
    -webkit-transition: all .2s ease;
    transition: all .2s ease
}

.ogilvy_webform_custom .webform-type-radios [type=radio]:not(:checked)+label:after {
    opacity: 0;
    -webkit-transform: scale(0);
    transform: scale(0)
}

.ogilvy_webform_custom .webform-type-radios [type=radio]:checked+label:after {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1)
}

html[lang=th] .ogilvy_webform_custom .form-item input, html[lang=th] .ogilvy_webform_custom .form-item textarea {
    font-size: 20px;
    line-height: 1.2
}

sup {
    top: 0
}

#tfa-entry-form {
    max-width: 600px;
    margin: 12vh auto;
    padding: 0 20px
}

#tfa-entry-form #edit-code {
    border: 2px solid #00ae4d;
    width: 100%;
    margin: 10px 0;
    font-size: 14px;
    line-height: 20px;
    border-radius: 0;
    outline: none;
    padding: 10px 15px
}

#tfa-entry-form #edit-login {
    height: 32px;
    font-weight: 800;
    font-size: 14px;
    line-height: 24px;
    letter-spacing: .02em;
    padding-top: 0;
    padding-bottom: 0;
    padding-left: 24px;
    padding-right: 24px;
    display: flex;
    justify-content: center;
    align-items: center
}

#tfa-entry-form #edit-login {
    background-color: #ffc208;
    color: #fff !important;
    height: 32px;
    font-weight: 800;
    font-size: 14px;
    line-height: 24px;
    letter-spacing: .02em;
    padding-top: 0;
    padding-bottom: 0;
    padding-left: 24px;
    padding-right: 24px;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 0;
    border-radius: 42px;
    text-shadow: 0px 0px 9px rgba(164, 75, 33, .8);
    margin-top: 15px
}

html[lang=th] #tfa-entry-form #edit-code {
    font-size: 20px
}

html[lang=th] #tfa-entry-form #edit-login {
    font-size: 20px
}

html[lang=th] #tfa-entry-form #edit-login {
    font-size: 20px;
    line-height: 1.5
}

.comp__sitemap {
    padding: 30px 0
}

@media(min-width: 768px) {
    .comp__sitemap {
        padding: 30px 0 60px
    }
}

.comp__sitemap h1 {
    text-align: center;
    color: #00ae4d;
    width: 100%
}

.comp__sitemap .sitemap__list {
    list-style: none;
    padding: 0
}

.comp__sitemap .sitemap__list>li a {
    text-decoration: none;
    color: #898989;
    cursor: pointer;
    font-family: Arial, Verdana, sans-serif;
    font-size: 14px;
    font-weight: 700
}

.comp__sitemap .sitemap__list li {
    padding: 8px 0;
    text-decoration: none;
    list-style-type: none;
    position: relative
}

.comp__sitemap .sitemap__list .dropdown li {
    position: relative;
    display: block;
    border-bottom: 1px dashed #ccc
}

.comp__sitemap .sitemap__list .title {
    color: #1ca642;
    text-transform: uppercase
}

.comp__sitemap .sitemap__list .sport-list .buttons h3 {
    color: #1ca642;
    text-transform: uppercase
}

.comp__sitemap .sitemap__list .sport-tab-content .buttons h3 {
    color: #1ca642;
    text-transform: uppercase
}

.comp__sitemap .sitemap__list ul {
    list-style: none;
    padding-left: 20px
}

html[lang=th] .comp__sitemap .sitemap__list>li a {
    font-size: 20px
}

.milo_partner {
    padding: 4.5rem 0 2rem
}

@media(min-width: 576px) {
    .milo_partner {
        padding: 6.5rem 0 3rem
    }
}

.milo_partner h2 {
    margin-bottom: 2rem
}

@media(min-width: 576px) {
    .milo_partner h2 {
        margin-bottom: 4rem
    }
}

.milo_partner .box-slide {
    position: relative
}

.milo_partner__list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin: 0;
    list-style: none;
    padding: 0
}

@media(min-width: 576px) {
    .milo_partner__list {
        margin: 0 0
    }
}

.milo_partner__list li {
    border: 1px solid #2d9c2e;
    border-radius: 1rem;
    overflow: hidden;
    max-width: 20rem;
    width: 46%;
    margin: 0 2% 4%
}

html[lang=th] .milo_partner__list li {
    border-radius: 10px
}

@media(min-width: 576px) {
    .milo_partner__list li {
        margin: 0 1rem 2rem;
        width: calc(33.33% - 2rem)
    }
}

@media(min-width: 992px) {
    .milo_partner__list li {
        width: calc(20% - 2rem)
    }
}

.milo_partner__list li img {
    margin: 0 auto;
    object-fit: contain;
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    transform: translateY(-50%);
    height: 90%;
    max-width: 85%
}

.milo_partner__list li a {
    display: flex;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    padding: 3%;
    background: #fff;
    align-items: center;
    position: relative;
    padding-bottom: 56.25%
}

.milo_partner__list li:hover {
    box-shadow: rgba(100, 100, 111, .2) 0px 7px 29px 0px
}

@media(min-width: 768px) {
    .comp__product_related_4cards {
        background: url(/themes/custom/milo/assets/images/products/slider-bg.png) center 80px no-repeat;
        background-size: contain
    }
}

.comp__product_related_4cards .swiper-slide {
    width: 100%
}

@media(min-width: 768px) {
    .comp__product_related_4cards .swiper-slide {
        width: 25%
    }
}

@media(min-width: 992px) {
    .comp__product_related_4cards .swiper-slide {
        width: 264px
    }
}

.comp-ogilvy-benefits_horizontal {
    position: relative;
    overflow: hidden
}

.comp-ogilvy-benefits_horizontal:before {
    content: "";
    display: block;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background: rgba(0, 0, 0, .6);
    z-index: 1
}

.comp-ogilvy-benefits_horizontal picture {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 0
}

.comp-ogilvy-benefits_horizontal picture img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    font-family: "object-fit: cover;"
}

.comp-ogilvy-benefits_horizontal>* {
    z-index: 2;
    position: relative
}

.comp-ogilvy-benefits_horizontal .benefit-item {
    position: relative;
    margin-bottom: 26px
}

@media(min-width: 992px) {
    .comp-ogilvy-benefits_horizontal .benefit-item {
        margin-bottom: 0
    }
}

.comp-ogilvy-benefits_horizontal .benefit-item>div {
    position: relative;
    margin-bottom: 5%;
    text-align: left
}

@media(min-width: 992px) {
    .comp-ogilvy-benefits_horizontal .benefit-item>div {
        max-width: 240px;
        margin-bottom: 6%
    }
}

.comp-ogilvy-benefits_horizontal .benefit-item>div h3 {
    position: absolute;
    bottom: -4%;
    font-style: italic;
    font-weight: 800;
    font-size: 24px;
    line-height: 29px;
    text-align: left;
    max-width: 50%;
    z-index: 1
}

html[lang=th] .comp-ogilvy-benefits_horizontal .benefit-item>div h3 {
    font-size: 36px;
    line-height: .83
}

@media(min-width: 768px) {
    .comp-ogilvy-benefits_horizontal .benefit-item>div h3 {
        bottom: 0;
        font-size: 32px;
        line-height: 39px
    }

    html[lang=th] .comp-ogilvy-benefits_horizontal .benefit-item>div h3 {
        font-size: 52px;
        line-height: .83
    }
}

@media(max-width: 359px) {
    .comp-ogilvy-benefits_horizontal .benefit-item>div h3 {
        max-width: 100%;
        line-break: anywhere
    }
}

.comp-ogilvy-benefits_horizontal .benefit-item>div h3 span {
    color: #00ae4d
}

.comp-ogilvy-benefits_horizontal .benefit-item>div .field_media_image {
    display: block
}

.comp-ogilvy-benefits_horizontal .benefit-item>div .field_media_image img {
    margin-left: auto;
    margin-right: inherit;
    max-width: 104px
}

@media(min-width: 992px) {
    .comp-ogilvy-benefits_horizontal .benefit-item>div .field_media_image img {
        max-width: none
    }
}

.comp-ogilvy-benefits_horizontal .benefit-item p {
    text-align: left;
    margin: 0;
    padding: 0;
    font-weight: 600;
    font-size: 12px;
    line-height: 15px;
    letter-spacing: .008em;
    margin-left: auto;
    margin-right: auto
}

@media(min-width: 992px) {
    .comp-ogilvy-benefits_horizontal .benefit-item p {
        max-width: 240px;
        font-size: 14px;
        line-height: 143%;
        letter-spacing: -0.2px;
        margin-left: 0
    }
}

.comp-ogilvy-benefits_horizontal .benefit-item .btn-wrapper {
    margin-top: 0;
    margin-bottom: 10%
}

@media(min-width: 992px) {
    .comp-ogilvy-benefits_horizontal .benefit-item .btn-wrapper {
        margin-top: -35px
    }
}

.comp-ogilvy-benefits_horizontal .txt-benefits {
    font-weight: 600;
    font-size: 14px;
    line-height: 143%;
    letter-spacing: -0.2px;
    max-width: 470px;
    text-align: center;
    padding: 0;
    margin: -15px auto 12px
}

@media(min-width: 992px) {
    .comp-ogilvy-benefits_horizontal .txt-benefits {
        margin-bottom: 30px
    }
}

.comp-ogilvy-benefits_horizontal .field_card_entity_selector {
    justify-content: center
}

@media(min-width: 992px) {
    .comp-ogilvy-benefits_breakfast .style-linebd {
        margin-bottom: 80px
    }
}

@media(min-width: 992px) {
    .comp-ogilvy-benefits_breakfast .style-linebd::before {
        bottom: -44px
    }
}

.comp-ogilvy-benefits_breakfast .benefit-item>div .field_media_image {
    position: relative;
    top: -25px
}

@media(min-width: 768px) {
    .comp-ogilvy-benefits_breakfast .benefit-item>div .field_media_image {
        top: -44px
    }
}

.comp-ogilvy-benefits_breakfast .benefit-item .field_image {
    padding-top: 25px
}

@media(min-width: 768px) {
    .comp-ogilvy-benefits_breakfast .benefit-item .field_image {
        padding-top: 44px
    }
}

.comp-ogilvy-benefits__bg::before {
    display: block !important;
    background: #393939
}

@media(min-width: 768px) {
    .comp-ogilvy-benefits__bg::before {
        background: url(/themes/custom/milo/assets/images/default/breakfast.png), rgba(0, 0, 0, .3)
    }
}

html[lang=th] .comp-ogilvy-benefits__bg::before {
    opacity: .3
}

html[lang=th] .comp-ogilvy-benefits_horizontal .benefit-item {
    font-weight: 300
}

@media(min-width: 992px) {
    html[lang=th] .comp-ogilvy-benefits_horizontal .benefit-item p {
        font-size: 20px
    }
}

html[lang=th] .comp-ogilvy-benefits_horizontal .txt-benefits {
    font-size: 20px
}

.product-detail-field.field_rating_addition {
    padding-top: 17px;
    font-weight: 500;
    color: #00ae4d
}

@media(min-width: 992px) {
    .product-detail-field.field_rating_addition {
        padding-top: 32px
    }
}

.product-detail-field.field_rating_addition #short-total-stars {
    color: #00ae4d
}

.product-detail-field.field_rating_addition .js-form-type-select {
    display: flex
}

.product-detail-field.field_rating_addition .fivestar-widget {
    margin-left: -3px;
    pointer-events: none
}

.product-detail-field.field_rating_addition .fivestar-widget+.star {
    color: #393939
}

.product-detail-field.field_rating_addition .fivestar-widget .star {
    background: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22.9 21.92'%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bfill:none;stroke:%23FFC208;stroke-miterlimit:10;stroke-width:0.5px;fill-rule:evenodd;%7D%3C/style%3E%3C/defs%3E%3Cg id='Layer_2' data-name='Layer 2'%3E%3Cg id='Layer_1-2' data-name='Layer 1'%3E%3Cpath class='cls-1' d='M12.32.88l2.21,6.86h7.22a.91.91,0,0,1,.45,1.7L16.44,13.6l2.24,6.86a.91.91,0,0,1-1.45,1l-5.78-4.21L5.63,21.47c-.79.58-1.67-.2-1.34-1.21L6.47,13.6.63,9.37a.91.91,0,0,1,.59-1.64H8.37L10.59.88a.91.91,0,0,1,1.73,0Z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E") !important;
    background-repeat: no-repeat;
    width: 16px;
    height: 16px;
    background-position: 0px 0px;
    margin: 0 3px
}

.product-detail-field.field_rating_addition .fivestar-widget .star.on a {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22.4 21.42'%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bfill:%23FFC208;fill-rule:evenodd;%7D%3C/style%3E%3C/defs%3E%3Cg id='Layer_2' data-name='Layer 2'%3E%3Cg id='Layer_1-2' data-name='Layer 1'%3E%3Cpath class='cls-1' d='M12.07.63l2.21,6.86H21.5A.91.91,0,0,1,22,9.18l-5.76,4.17,2.24,6.86a.91.91,0,0,1-1.45,1L11.2,17,5.38,21.22C4.59,21.8,3.71,21,4,20l2.18-6.66L.38,9.12A.91.91,0,0,1,1,7.48H8.12L10.34.63a.91.91,0,0,1,1.73,0Z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E") !important
}

.product-detail-field.field_rating_addition .fivestar-widget .star a {
    background: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22.9 21.92'%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bfill:none;stroke:%23FFC208;stroke-miterlimit:10;stroke-width:0.5px;fill-rule:evenodd;%7D%3C/style%3E%3C/defs%3E%3Cg id='Layer_2' data-name='Layer 2'%3E%3Cg id='Layer_1-2' data-name='Layer 1'%3E%3Cpath class='cls-1' d='M12.32.88l2.21,6.86h7.22a.91.91,0,0,1,.45,1.7L16.44,13.6l2.24,6.86a.91.91,0,0,1-1.45,1l-5.78-4.21L5.63,21.47c-.79.58-1.67-.2-1.34-1.21L6.47,13.6.63,9.37a.91.91,0,0,1,.59-1.64H8.37L10.59.88a.91.91,0,0,1,1.73,0Z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E") !important;
    background-repeat: no-repeat
}

.product-detail-field.field_rating_addition .description {
    display: inline-block;
    vertical-align: middle;
    margin-left: 6px;
    border-left: 1px solid #fff;
    font-weight: 800;
    color: #00ae4d;
    text-transform: uppercase
}

.product-detail-field.field_rating_addition .description a {
    color: #00ae4d
}

html[lang=th] .product-detail-field.field_rating_addition .description a {
    font-weight: 400;
    font-size: 22px;
    line-height: 20px
}

.paragraph--type--content-product-header .product-infor {
    padding-top: 17px;
    font-weight: 600
}

@media(min-width: 992px) {
    .paragraph--type--content-product-header .product-infor {
        padding-top: 35px
    }
}

.paragraph--type--content-product-header .btn-wrapper {
    padding-top: 20px;
    display: flex
}

@media(max-width: 991px) {
    .paragraph--type--content-product-header .btn-wrapper {
        flex-direction: column
    }
}

@media(min-width: 992px) {
    .paragraph--type--content-product-header .btn-wrapper {
        padding-top: 35px;
        justify-content: space-between;
        align-items: center
    }
}

@media(max-width: 991px) {
    .paragraph--type--content-product-header .btn-wrapper .buy-component {
        margin-top: 4px;
        margin-bottom: 40px
    }
}

.paragraph--type--content-product-header .btn-wrapper .product-social-sharing {
    text-align: left
}

.paragraph--type--accordion .comp-ogilvy-ratings-reviews .milo-product-comment-form form input[type=submit] {
    text-transform: capitalize
}

.product-taxonomy {
    padding-top: 25px
}

@media(min-width: 992px) {
    .product-taxonomy {
        padding-top: 4px
    }
}

.product-taxonomy>div {
    display: inline-block
}

.product-taxonomy div:first-child a::before, .product-taxonomy div:first-child span::before {
    opacity: 0
}

.product-taxonomy a, .product-taxonomy span {
    position: relative;
    display: inline-block;
    padding: 2px 10px;
    font-size: 12px;
    line-height: 1.5;
    background-color: #00ae4d;
    margin-right: 15px;
    font-weight: 800;
    text-transform: uppercase;
    color: #fff
}

html[lang=th] .product-taxonomy a, html[lang=th] .product-taxonomy span {
    font-size: 18px
}

.product-taxonomy a:after, .product-taxonomy a:before, .product-taxonomy span:after, .product-taxonomy span:before {
    content: "";
    display: block;
    width: 9px;
    height: 100%;
    background-color: #00ae4d;
    position: absolute;
    top: 0
}

.product-taxonomy a:before, .product-taxonomy span:before {
    transform: translateX(-50%) skewX(-10deg);
    left: 0
}

.product-taxonomy a:after, .product-taxonomy span:after {
    right: 0;
    transform: translateX(50%) skewX(-10deg)
}

.product-taxonomy+h1 {
    padding-top: 12px
}

@media(min-width: 992px) {
    .product-taxonomy+h1 {
        padding-top: 24px
    }
}

.product-taxonomy+h1 span {
    color: #393939
}

.product-taxonomy+h1 span.outline {
    -webkit-text-stroke: 2px #393939;
    color: transparent
}

html[lang=vi] .product-taxonomy+h1 span.outline {
    line-height: 1
}

.product-tag-types {
    padding-top: 17px
}

@media(min-width: 992px) {
    .product-tag-types {
        padding-top: 23px
    }
}

.product-tag-types>div {
    display: inline-block
}

.product-tag-types a, .product-tag-types span {
    position: relative;
    display: inline-block;
    padding: 2px 13px;
    font-size: 12px;
    line-height: 1.5;
    margin-right: 8px;
    font-weight: 800;
    color: #00ae4d;
    border-radius: 40px;
    border: 2px solid #00ae4d
}

.product-tag-types a.current, .product-tag-types a:hover, .product-tag-types span.current, .product-tag-types span:hover {
    background-color: #00ae4d;
    color: #fff
}

.field_sku_addition {
    padding-top: 30px
}

@media(min-width: 992px) {
    .field_sku_addition {
        padding-top: 60px
    }
}

.field_sku_addition>div:first-child {
    padding-top: 0
}

.field_sku_addition span {
    font-weight: 800;
    text-transform: uppercase;
    color: #393939;
    width: calc(100% - 136px)
}

.field_sku_addition .product-detail-sku, .field_sku_addition .product-detail-type {
    display: flex;
    justify-content: space-between
}

.product-social-sharing {
    padding-top: 20px;
    font-weight: 800;
    text-transform: uppercase
}

@media(min-width: 992px) {
    .product-social-sharing {
        display: flex;
        padding-top: 0;
        align-items: center
    }
}

@media(min-width: 992px) {
    .product-social-sharing.social-sharing--column {
        align-items: flex-start;
        flex-direction: column
    }
}

@media(min-width: 992px) {
    .product-social-sharing.social-sharing--right {
        justify-content: flex-end
    }
}

@media(max-width: 767px) {
    .product-social-sharing {
        flex-direction: column
    }

    .product-social-sharing .social-media-sharing ul {
        display: block;
        text-align: left
    }
}

.product-social-sharing>div:first-child {
    margin-right: 24px
}

html[lang=th] .product-social-sharing>div:first-child {
    font-weight: 400;
    font-size: 22px;
    line-height: 20px
}

#productdetail-hero-slide {
    margin: 0 -20px
}

@media(min-width: 992px) {
    #productdetail-hero-slide {
        position: sticky;
        margin: 0;
        top: 104px;
        max-width: 480px
    }
}

@media(min-width: 992px) {
    #productdetail-hero-slide .col-lg-6 {
        position: relative
    }
}

#productdetail-hero-slide .slide-for .slick-list {
    background: radial-gradient(64.47% 64.47% at 50% 50%, #ffffff 51.04%, #e5e5e5 100%), linear-gradient(0deg, #e5e5e5, #e5e5e5)
}

#productdetail-hero-slide .slide-for .slick-list:after {
    content: "";
    display: block;
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 45%;
    background: url(/themes/custom/milo/assets/images/products/bg-slide.png) no-repeat center;
    background-size: cover
}

@media(min-width: 992px) {
    #productdetail-hero-slide .slide-for .slick-list:after {
        height: 50%
    }
}

#productdetail-hero-slide .slide-for .slick-track {
    z-index: 1
}

#productdetail-hero-slide .slide-for picture source {
    display: none
}

#productdetail-hero-slide .slide-for .slick-dots {
    bottom: 20px;
    z-index: 1
}

#productdetail-hero-slide .slide-for .slick-dots li {
    padding: 0 6px
}

#productdetail-hero-slide .slide-for .slick-dots button {
    padding: 0;
    opacity: 1;
    background-color: rgba(57, 57, 57, .25)
}

#productdetail-hero-slide .slide-for .slick-dots .slick-active button {
    background-color: #fff
}

#productdetail-hero-slide .slide-for .slick-arrow {
    width: 27px;
    height: 27px;
    background: #00ae4d;
    text-align: center
}

@media(min-width: 992px) {
    #productdetail-hero-slide .slide-for .slick-arrow {
        width: 33px;
        height: 33px
    }
}

#productdetail-hero-slide .slide-for .slick-arrow:before {

    font-family: "icomoon" !important;
    speak: never;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    font-size: 10px;
    line-height: 27px;
    color: #fff;
    transform-origin: center
}

@media(min-width: 992px) {
    #productdetail-hero-slide .slide-for .slick-arrow:before {
        font-size: 12px;
        line-height: 33px
    }
}

#productdetail-hero-slide .slide-for .slick-arrow.slick-prev {
    transform: rotate(90deg);
    left: 22px
}

@media(min-width: 768px) {
    #productdetail-hero-slide .slide-for .slick-arrow.slick-prev {
        left: auto;
        right: 100%;
        margin-right: 20px
    }
}

#productdetail-hero-slide .slide-for .slick-arrow.slick-next {
    transform: rotate(-90deg);
    right: 22px
}

@media(min-width: 768px) {
    #productdetail-hero-slide .slide-for .slick-arrow.slick-next {
        right: auto;
        left: 100%;
        margin-left: 20px
    }
}

#productdetail-hero-slide .slide-nav {
    margin-top: 0;
    padding-top: 16px;
    display: none !important
}

@media(min-width: 992px) {
    #productdetail-hero-slide .slide-nav {
        display: block !important
    }
}

#productdetail-hero-slide .slide-nav .slick-track {
    margin-left: -12px
}

#productdetail-hero-slide .slide-nav .slick-slide {
    padding: 0 12px
}

#productdetail-hero-slide .slide-nav .slide-selected .wrapper-image {
    border: 4px solid #00ae4d
}

#productdetail-hero-slide .slide-nav .slide-selected img {
    border: none
}

#productdetail-hero-slide .wrapper-image {
    padding: 16px;
    background: radial-gradient(64.47% 64.47% at 50% 50%, #ffffff 51.04%, #e5e5e5 100%), #e5e5e5;
    border: 4px solid transparent
}

.style-linebd {
    position: relative;
    margin-bottom: 20%
}

@media(min-width: 992px) {
    .style-linebd {
        margin-bottom: 8%
    }
}

@media(min-width: 992px) {
    .style-linebd.text-lg-left::before {
        left: 0;
        transform: none;
        -webkit-transform: none;
        -moz-transform: none;
        -ms-transform: none;
        -o-transform: none
    }
}

.style-linebd::before {
    content: "";
    bottom: -42%;
    position: absolute;
    max-width: 113px;
    width: 17%;
    height: 0px;
    border: 2px solid #ffc208;
    left: 50%;
    transform: translateX(-50%)
}

@media(min-width: 992px) {
    .style-linebd::before {
        bottom: -33%;
        border: 4px solid #ffc208
    }
}

.comp-ogilvy-didyouknow {
    color: #fff
}

.comp-ogilvy-didyouknow .bg-primaryGradientGreen {
    margin-left: 20px;
    margin-right: 20px;
    width: auto
}

.comp-ogilvy-didyouknow .bg-primaryGradientGreen .row {
    align-items: center
}

@media(min-width: 768px) {
    .comp-ogilvy-didyouknow .bg-primaryGradientGreen {
        margin-left: auto;
        margin-right: auto;
        padding-left: 5%;
        padding-right: 5%
    }
}

.comp-ogilvy-didyouknow .didyouknow-left {
    position: relative
}

.comp-ogilvy-didyouknow .didyouknow-left h2 {
    max-width: 100%
}

@media(min-width: 768px) {
    .comp-ogilvy-didyouknow .didyouknow-left h2 {
        margin-bottom: 0
    }
}

.comp-ogilvy-didyouknow .didyouknow-left h2 span {
    font-size: 1.8rem;
    line-height: 81%;
    font-weight: 900;
    text-transform: uppercase;
    font-style: italic;
    text-align: left
}

@media(min-width: 768px) {
    .comp-ogilvy-didyouknow .didyouknow-left h2 span {
        font-size: 3.75rem
    }
}

@media(min-width: 768px) {
    .comp-ogilvy-didyouknow .didyouknow-left h2 span {
        max-width: 65%;
        font-size: 4.5rem
    }
}

.comp-ogilvy-didyouknow .didyouknow-left h2 img {
    position: absolute;
    top: 52%;
    right: 0%;
    transform: translateY(-50%);
    display: block
}

@media(min-width: 768px) {
    .comp-ogilvy-didyouknow .didyouknow-left h2 img {
        display: none
    }
}

.comp-ogilvy-didyouknow .didyouknow-left h2 img+img {
    display: none
}

@media(min-width: 768px) {
    .comp-ogilvy-didyouknow .didyouknow-left h2 img+img {
        right: -18%;
        display: block
    }
}

@media(min-width: 1200px) {
    .comp-ogilvy-didyouknow .didyouknow-left h2 img+img {
        right: 5%;
        display: block
    }
}

.comp-ogilvy-didyouknow .didyouknow-right {
    display: flex;
    justify-content: center;
    align-items: center
}

@media(min-width: 768px) {
    .comp-ogilvy-didyouknow .didyouknow-right {
        text-align: left;
        padding: 64px 12px
    }
}

@media(min-width: 992px) {
    .comp-ogilvy-didyouknow .didyouknow-right {
        padding-left: 60px
    }
}

.comp-ogilvy-didyouknow .didyouknow-right .title--small {
    color: #fff;
    padding: 0;
    display: none
}

@media(min-width: 768px) {
    .comp-ogilvy-didyouknow .didyouknow-right .title--small {
        display: block
    }
}

.comp-ogilvy-didyouknow .didyouknow-right .desc {
    font-size: .875rem;
    line-height: 1.375rem;
    max-width: 100%;
    width: calc(100% - 8px);
    margin: 24px 4px;
    text-align: left
}

@media(min-width: 768px) {
    .comp-ogilvy-didyouknow .didyouknow-right .desc {
        max-width: 80%;
        margin: 0
    }
}

.comp-ogilvy-didyouknow .didyouknow-right .desc p {
    margin: 12px 0
}

.comp-ogilvy-didyouknow .didyouknow-right .btn-wrapper {
    margin-top: 38px
}

@media(min-width: 768px) {
    .comp-ogilvy-didyouknow .didyouknow-right .btn-wrapper {
        text-align: left;
        margin-top: 48px
    }
}

.comp-ogilvy-infographic_nutrition {
    background: url(/themes/custom/milo/assets/images/graphical/bg2.png) no-repeat center top/cover !important
}

@media(min-width: 992px) {
    .comp-ogilvy-infographic_nutrition {
        background: url(/themes/custom/milo/assets/images/graphical/bg1.png) no-repeat center top/cover !important
    }
}

.comp-ogilvy-infographic_nutrition .style-linebd {
    margin-bottom: 40px
}

@media(min-width: 992px) {
    .comp-ogilvy-infographic_nutrition .style-linebd {
        margin-bottom: 116px
    }
}

.comp-ogilvy-infographic_nutrition .style-linebd::before {
    bottom: -24px
}

@media(min-width: 992px) {
    .comp-ogilvy-infographic_nutrition .style-linebd::before {
        bottom: -44px
    }
}

.comp-ogilvy-infographic_nutrition .benefit-item {
    position: relative;
    padding: 0 20px;
    width: 160px;
    max-width: 50%;
    margin-top: 16px;
    margin-bottom: 16px
}

html[lang=th] .comp-ogilvy-infographic_nutrition .benefit-item {
    font-weight: 300
}

@media(min-width: 992px) {
    .comp-ogilvy-infographic_nutrition .benefit-item {
        margin-top: 20px;
        margin-bottom: 20px;
        max-width: 160px;
        flex: 0 0 160px;
        padding: 0
    }
}

.comp-ogilvy-infographic_nutrition .benefit-item>div {
    max-width: 278px;
    margin-left: auto;
    margin-right: auto
}

.comp-ogilvy-infographic_nutrition .benefit-item h3 {
    position: absolute;
    top: 52%;
    left: 35%;
    max-width: 90%;
    transform: translateY(-50%);
    text-align: left;
    font-size: 16px;
    line-height: 1.25
}

@media(min-width: 992px) {
    .comp-ogilvy-infographic_nutrition .benefit-item h3 {
        left: 40%;
        font-size: 20px;
        line-height: 1.2;
        min-width: 130px
    }
}

.comp-ogilvy-infographic_nutrition .benefit-item h3 .field_teaser_subtitle {
    font-size: 12px;
    opacity: .75
}

@media(min-width: 992px) {
    .comp-ogilvy-infographic_nutrition .benefit-item h3 .field_teaser_subtitle {
        font-size: 20px;
        line-height: 1.25
    }
}

.comp-ogilvy-infographic_nutrition .desc {
    font-weight: 600;
    font-size: 10px;
    line-height: 14px;
    text-align: left;
    letter-spacing: .008em;
    color: #fff;
    max-width: 552px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 16px;
    margin-bottom: 0;
    max-width: 302px
}

html[lang=th] .comp-ogilvy-infographic_nutrition .desc {
    font-size: 20px
}

@media(min-width: 992px) {
    .comp-ogilvy-infographic_nutrition .desc {
        margin-top: 20px;
        margin-bottom: 7px;
        text-align: center;
        padding: 0;
        max-width: 520px
    }
}

.comp-ogilvy-infographic_nutrition .desc * {
    margin: 0;
    padding: 0
}

.comp-ogilvy-infographic_nutrition .btn-wrapper {
    padding-top: 24px;
    margin-bottom: 3px
}

@media(min-width: 992px) {
    .comp-ogilvy-infographic_nutrition .btn-wrapper {
        padding-top: 35px
    }
}

.comp-ogilvy-infographic_nutrition .benefit-item .cls-1 {
    fill: #fff
}

.comp-ogilvy-infographic_nutrition .benefit-item .cls-2 {
    mask: url(/themes/custom/milo/assets/css/#mask)
}

.comp-ogilvy-infographic_nutrition .benefit-item .cls-3 {
    fill: none;
    stroke: #fff;
    stroke-width: 2px
}

.comp-ogilvy-infographic_nutrition .svg_wrapper {
    width: 85%;
    display: block
}

@media(min-width: 992px) {
    .comp-ogilvy-infographic_nutrition .svg_wrapper {
        width: 94%
    }
}

.comp-ogilvy-infographic_nutrition .svg_wrapper svg {
    display: block
}

.comp-ogilvy-infographic_nutrition .product-infographic-nutri {
    max-width: 942px;
    margin: 0 auto;
    padding: 0 16px
}

.comp-ogilvy-infographic_nutrition .product-infographic-nutri .field_card_entity_selector {
    justify-content: space-between
}

@keyframes progress {
    0% {
        stroke-dasharray: 0 396
    }
}

.comp__profile {
    max-width: 864px;
    margin: 20px auto 120px
}

@media(max-width: 767px) {
    .comp__profile {
        padding: 0 20px
    }
}

.comp__profile .heading--filled {
    text-align: center;
    color: #393939
}

.comp__profile .title--large {
    color: #00ae4d
}

@media(min-width: 768px) {
    .comp__profile .title--large {
        text-align: center
    }
}

.comp__profile .accordion.active .head {
    color: #00ae4d
}

.comp__profile .accordion.active .head .title {
    color: #00ae4d
}

.comp__profile .accordion.active .head .icon {
    transform: translate(0, -50%) rotate(180deg)
}

.comp__profile .accordion.active .content {
    display: block;
    padding-bottom: 64px
}

.comp__profile .accordion .head {
    position: relative;
    text-transform: uppercase;
    border-bottom: 4px solid #00ae4d
}

.comp__profile .accordion .head .title {
    transition: all ease .3s
}

@media(max-width: 767px) {
    .comp__profile .accordion .head .title {
        padding: 12px 0
    }
}

.comp__profile .accordion .head .icon {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translate(0, -50%);
    transition: all ease .3s
}

@media(max-width: 767px) {
    .comp__profile .accordion .head .icon {
        font-size: 12px
    }
}

@media(min-width: 768px) {
    .comp__profile .accordion .head .icon {
        right: 10px
    }
}

.comp__profile .accordion .content {
    display: none
}

.comp__recipedetails_didyouknow_fullwidth {
    color: #fff;
    margin-top: 42px;
    margin-bottom: 80px
}

@media(min-width: 992px) {
    .comp__recipedetails_didyouknow_fullwidth {
        margin-top: 150px;
        margin-bottom: 120px
    }
}

.comp__recipedetails_didyouknow_fullwidth .bg-primaryGradientGreen {
    background: linear-gradient(256.14deg, #00AE4D 3.56%, #088B2C 99.3%);
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    padding: 58px 24px 42px
}

@media(min-width: 992px) {
    .comp__recipedetails_didyouknow_fullwidth .bg-primaryGradientGreen {
        padding: 0 0 20px
    }
}

.comp__recipedetails_didyouknow_fullwidth .didyouknow-left {
    position: relative;
    width: 100%;
    flex-shrink: 0;
    box-sizing: border-box
}

@media(min-width: 992px) {
    .comp__recipedetails_didyouknow_fullwidth .didyouknow-left {
        width: 38%;
        padding-left: 48px
    }
}

.comp__recipedetails_didyouknow_fullwidth .didyouknow-left h2 {
    margin-bottom: 3%;
    max-width: 100%
}

@media(min-width: 992px) {
    .comp__recipedetails_didyouknow_fullwidth .didyouknow-left h2 {
        margin-bottom: 0;
        max-width: 65%
    }
}

.comp__recipedetails_didyouknow_fullwidth .didyouknow-left h2 span {
    font-size: 1.8rem;
    line-height: 81%;
    font-weight: 900;
    text-transform: uppercase;
    font-style: italic;
    text-align: left
}

@media(min-width: 768px) {
    .comp__recipedetails_didyouknow_fullwidth .didyouknow-left h2 span {
        font-size: 3.75rem
    }
}

@media(min-width: 992px) {
    .comp__recipedetails_didyouknow_fullwidth .didyouknow-left h2 span {
        max-width: 65%;
        font-size: 4.5rem
    }
}

.comp__recipedetails_didyouknow_fullwidth .didyouknow-left h2 img {
    position: absolute;
    top: 8%;
    right: -9%;
    transform: translateY(-50%);
    display: block
}

@media(min-width: 576px) {
    .comp__recipedetails_didyouknow_fullwidth .didyouknow-left h2 img {
        right: 0
    }
}

@media(min-width: 992px) {
    .comp__recipedetails_didyouknow_fullwidth .didyouknow-left h2 img {
        display: none
    }
}

.comp__recipedetails_didyouknow_fullwidth .didyouknow-left h2 img+img {
    display: none
}

@media(min-width: 992px) {
    .comp__recipedetails_didyouknow_fullwidth .didyouknow-left h2 img+img {
        top: 52%;
        right: -18%;
        display: block
    }
}

@media(min-width: 1200px) {
    .comp__recipedetails_didyouknow_fullwidth .didyouknow-left h2 img+img {
        right: 5%;
        display: block
    }
}

.comp__recipedetails_didyouknow_fullwidth .didyouknow-right {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding-left: calc(var(--bs-gutter-x) * .5)
}

@media(min-width: 992px) {
    .comp__recipedetails_didyouknow_fullwidth .didyouknow-right {
        padding-left: 10%
    }
}

@media(min-width: 1200px) {
    .comp__recipedetails_didyouknow_fullwidth .didyouknow-right {
        padding-left: 50px;
        text-align: left
    }
}

.comp__recipedetails_didyouknow_fullwidth .didyouknow-right .title {
    font-weight: 800;
    font-size: 1.25rem;
    line-height: 1.5625rem;
    display: none;
    margin: 62px 0 0px;
    padding: 0;
    color: #fff
}

@media(min-width: 992px) {
    .comp__recipedetails_didyouknow_fullwidth .didyouknow-right .title {
        display: block
    }
}

.comp__recipedetails_didyouknow_fullwidth .didyouknow-right .desc {
    font-size: 14px;
    line-height: 143%;
    max-width: 100%;
    width: 100%;
    margin: 18px 0 23px;
    text-align: left;
    letter-spacing: .01rem
}

@media(min-width: 992px) {
    .comp__recipedetails_didyouknow_fullwidth .didyouknow-right .desc {
        max-width: 80%;
        margin-top: 14px;
        margin-bottom: 52px
    }
}

.comp__recipedetails_didyouknow_fullwidth .didyouknow-right .btn-wrapper {
    margin: 5% auto 0
}

@media(min-width: 768px) {
    .comp__recipedetails_didyouknow_fullwidth .didyouknow-right .btn-wrapper {
        margin-left: 0;
        margin-right: 0
    }
}

@media(min-width: 992px) {
    .comp__recipedetails_didyouknow_fullwidth .didyouknow-right .btn-wrapper {
        margin-top: 0;
        margin-bottom: 45px;
        margin-left: 0;
        margin-right: auto
    }
}

html[lang=vi] .comp__recipedetails_didyouknow_fullwidth .didyouknow-left h2 span {
    line-height: 1.2
}

html[lang=th] .comp__recipedetails_didyouknow_fullwidth .didyouknow-right .desc {
    font-size: 20px
}

.recipe-taxonomy {
    padding-top: 8px
}

.recipe-taxonomy>div {
    display: inline-block
}

.recipe-taxonomy div:first-child a::before, .recipe-taxonomy div:first-child span::before {
    opacity: 0
}

.recipe-taxonomy a, .recipe-taxonomy span {
    position: relative;
    display: inline-block;
    padding: 2px 10px;
    font-size: 12px;
    line-height: 1.5;
    background-color: #ba6400;
    margin-right: 15px;
    font-weight: 800;
    text-transform: uppercase;
    color: #fff
}

.recipe-taxonomy a:after, .recipe-taxonomy a:before, .recipe-taxonomy span:after, .recipe-taxonomy span:before {
    content: "";
    display: block;
    width: 9px;
    height: 100%;
    background-color: #ba6400;
    position: absolute;
    top: 0
}

.recipe-taxonomy a:before, .recipe-taxonomy span:before {
    transform: translateX(-50%) skewX(-10deg);
    left: 0
}

.recipe-taxonomy a:after, .recipe-taxonomy span:after {
    right: 0;
    transform: translateX(50%) skewX(-10deg)
}

.recipedetails-field {
    display: flex;
    align-items: center;
    flex-direction: row;
    margin-top: 22px
}

@media(min-width: 992px) {
    .recipedetails-field {
        margin-top: 30px
    }
}

.recipedetails-field .recipedetails__fivestar-show {
    display: flex;
    margin-right: 9px
}

.recipedetails-field .recipedetails__fivestar-show p {
    margin: 0;
    padding: 0;
    width: 16px;
    height: 16px;
    position: relative
}

.recipedetails-field .recipedetails__fivestar-show p:not(:last-child) {
    margin-right: 6px
}

.recipedetails-field .recipedetails__fivestar-show p.active svg {
    fill: #ffc208
}

.recipedetails-field .recipedetails__fivestar-show p svg {
    position: absolute;
    width: 100%;
    height: 100%
}

.recipedetails-field .recipedetails__fivestar-summary .total-votes {
    color: #00ae4d;
    font-weight: 800;
    font-size: 14px;
    line-height: 129%;
    letter-spacing: .1px;
    text-transform: uppercase
}

.recipedetails-field .recipedetails__fivestar-summary .total-votes a, .recipedetails-field .recipedetails__fivestar-summary .total-votes span {
    color: #00ae4d
}

@media(min-width: 992px) {
    .com__recipedetails_headerdescription_social .product-taxonomy {
        padding-top: 0
    }
}

.com__recipedetails_headerdescription_social h1 {
    padding-top: 12px
}

@media(min-width: 992px) {
    .com__recipedetails_headerdescription_social h1 {
        padding-top: 24px
    }
}

.com__recipedetails_headerdescription_social h1 span {
    color: #393939;
    line-height: 106%
}

@media(min-width: 992px) {
    .com__recipedetails_headerdescription_social h1 span {
        font-size: 48px;
        line-height: 100%
    }
}

.com__recipedetails_headerdescription_social h1 span.outline {
    color: transparent;
    font-size: 52px;
    line-height: 100%;
    letter-spacing: .02em;
    text-transform: uppercase;
    -webkit-text-stroke-width: .68px
}

@media(min-width: 992px) {
    .com__recipedetails_headerdescription_social h1 span.outline {
        line-height: 81%;
        font-size: 72px;
        margin-bottom: 4px;
        -webkit-text-stroke-width: 1.2px
    }
}

.com__recipedetails_headerdescription_social .recipedetails_masthead_icon {
    margin-bottom: 7px;
    display: none
}

@media(max-width: 991px) {
    .com__recipedetails_headerdescription_social .recipedetails_masthead_icon {
        display: flex
    }
}

.com__recipedetails_headerdescription_social .recipe-infor {
    margin-top: 22px;
    margin-bottom: 10px;
    font-style: normal;
    font-weight: 600;
    font-size: 14px;
    line-height: 143%;
    letter-spacing: -0.2px;
    color: #636363
}

@media(min-width: 992px) {
    .com__recipedetails_headerdescription_social .recipe-infor {
        margin-top: 27px;
        margin-bottom: 28px;
        line-height: 157%
    }
}

.com__recipedetails_headerdescription_social+.paragraph .product-social-sharing {
    margin-bottom: 24px
}

@media(min-width: 992px) {
    .com__recipedetails_headerdescription_social+.paragraph .product-social-sharing {
        margin-bottom: 36px;
        justify-content: flex-end
    }
}

html[lang=vi] .recipe-taxonomy {
    display: flex;
    flex-wrap: wrap
}

html[lang=vi] .recipe-taxonomy>div {
    margin-bottom: 8px
}

@media(max-width: 408px) {
    html[lang=vi] .recipe-taxonomy div a::before, html[lang=vi] .recipe-taxonomy div span::before {
        opacity: 0
    }
}

html[lang=th] .recipedetails-field .recipedetails__fivestar-summary .total-votes {
    font-size: 20px
}

html[lang=th] .com__recipedetails_headerdescription_social .recipe-infor {
    font-size: 20px
}

.com__recipedetails_masthead_short {
    flex: 1;
    position: relative;
    display: block;
    margin-left: -20px;
    margin-right: -20px
}

@media(min-width: 992px) {
    .com__recipedetails_masthead_short {
        margin-left: 0;
        margin-right: 0;
        max-width: 520px
    }
}

.com__recipedetails_masthead_short .img-wrapper {
    display: block;
    height: 0;
    padding-top: 66.5%;
    overflow: hidden;
    position: relative;
    max-height: 345px
}

.com__recipedetails_masthead_short .img-wrapper img {
    width: 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    min-height: 100%;
    object-fit: cover;
    transform: translate(-50%, -50%);
    max-width: inherit
}

.com__recipedetails_masthead_short .recipedetails_masthead_icon {
    display: none
}

@media(min-width: 992px) {
    .com__recipedetails_masthead_short .recipedetails_masthead_icon {
        display: flex
    }
}

.recipedetails_masthead_icon {
    display: flex;
    gap: 20px;
    margin-top: 27px;
    margin-left: 0;
    margin-bottom: 29px
}

@media(min-width: 992px) {
    .recipedetails_masthead_icon {
        margin-top: 28px;
        margin-left: 6px
    }
}

.recipedetails_masthead_icon .recipe_difficulty, .recipedetails_masthead_icon .recipe_cooking_user, .recipedetails_masthead_icon .recipe_cooking_time {
    font-style: normal;
    font-weight: 800;
    font-size: 12px;
    line-height: 150%;
    text-transform: uppercase;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px
}

.recipedetails_masthead_icon .recipe_difficulty i, .recipedetails_masthead_icon .recipe_cooking_user i, .recipedetails_masthead_icon .recipe_cooking_time i {
    font-size: 18px
}

.recipedetails_masthead_icon .recipe_difficulty i.icon-difficulty, .recipedetails_masthead_icon .recipe_cooking_user i.icon-difficulty, .recipedetails_masthead_icon .recipe_cooking_time i.icon-difficulty {
    font-size: 22px
}

html[lang=th] .recipedetails_masthead_icon .recipe_difficulty, html[lang=th] .recipedetails_masthead_icon .recipe_cooking_user, html[lang=th] .recipedetails_masthead_icon .recipe_cooking_time {
    font-size: 22px;
    line-height: 20px
}

.comp__recipedetails_nutritionalindicator_tab h2 {
    padding: 0;
    color: #393939
}

.comp__recipedetails_nutritionalindicator_tab .btn-primary {
    display: block;
    max-width: 376px;
    margin: 40px auto 0
}

.comp__recipedetails_nutritionalindicator_tab .cls-1 {
    fill: #00ae4d
}

.comp__recipedetails_nutritionalindicator_tab .cls-6 {
    stroke: #00ae4d;
    stroke-width: 2px
}

.comp__recipedetails_nutritionalindicator_tab .cls-7 {
    fill: #e8dbdb
}

.comp__recipedetails_nutritionalindicator_tab .cls-2, .comp__recipedetails_nutritionalindicator_tab .cls-4, .comp__recipedetails_nutritionalindicator_tab .cls-6 {
    fill: none
}

.comp__recipedetails_nutritionalindicator_tab .cls-4 {
    stroke: #00ae4d;
    stroke-width: 25px
}

.comp__recipedetails_nutritionalindicator_tab .nutrition-list {
    padding-top: 32px;
    display: flex;
    flex-wrap: wrap;
    align-items: center
}

@media(min-width: 768px) {
    .comp__recipedetails_nutritionalindicator_tab .nutrition-list {
        padding-top: 72px;
        justify-content: center
    }
}

.comp__recipedetails_nutritionalindicator_tab .nutrition-item {
    position: relative;
    flex: 0 0 50%;
    max-width: 50%;
    margin-bottom: 20px
}

@media(min-width: 768px) {
    .comp__recipedetails_nutritionalindicator_tab .nutrition-item {
        flex: 0 0 25%;
        max-width: 25%;
        margin-bottom: 30px
    }
}

@media(min-width: 992px) {
    .comp__recipedetails_nutritionalindicator_tab .nutrition-item {
        flex: 0 0 19.5%;
        max-width: 19.5%
    }
}

.comp__recipedetails_nutritionalindicator_tab .nutrition-item h3 {
    position: absolute;
    top: 50%;
    left: 60%;
    transform: translateY(-50%) translateX(-50%);
    text-align: left;
    font-size: 12px;
    line-height: 1.17;
    font-weight: 800;
    width: 63%;
    color: #393939
}

@media(min-width: 768px) {
    .comp__recipedetails_nutritionalindicator_tab .nutrition-item h3 {
        left: 55%;
        width: 58%
    }
}

.comp__recipedetails_nutritionalindicator_tab .nutrition-item h3 span {
    display: block;
    padding: 0
}

.comp__recipedetails_nutritionalindicator_tab .nutrition-item .name {
    font-size: 16px;
    line-height: 1.3;
    text-transform: uppercase
}

@media(min-width: 768px) {
    .comp__recipedetails_nutritionalindicator_tab .nutrition-item .name {
        font-size: 20px;
        line-height: 1.2
    }
}

.comp__recipedetails_nutritionalindicator_tab .nutrition-item .energy {
    color: #00ae4d;
    min-height: 20px
}

@media(min-width: 768px) {
    .comp__recipedetails_nutritionalindicator_tab .nutrition-item .energy {
        font-size: 16px;
        line-height: 1.25
    }
}

.comp__recipedetails_nutritionalindicator_tab .nutrition-item .svg_wrapper {
    width: 77%
}

@media(min-width: 768px) {
    .comp__recipedetails_nutritionalindicator_tab .nutrition-item .svg_wrapper {
        width: 65%
    }
}

.comp__recipedetails_nutritionalindicator_tab .desc {
    text-align: center
}

.comp__recipedetails_nutritionalindicator_tab .desc p {
    font-weight: 600;
    font-size: 10px;
    line-height: 1.6;
    max-width: 602px;
    margin: 0 auto
}

@media(min-width: 768px) {
    .comp__recipedetails_nutritionalindicator_tab .desc p {
        font-size: 12px;
        line-height: 1.5
    }
}

html[lang=th] .comp__recipedetails_nutritionalindicator_tab .desc p {
    font-weight: 400;
    font-size: 16px;
    line-height: 16px
}

.comp__recipedetails_nutritionalindicator_tab .tab-head ul {
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center
}

.comp__recipedetails_nutritionalindicator_tab .tab-head li {
    list-style: none
}

.comp__recipedetails_nutritionalindicator_tab .tab-head a {
    display: block;
    position: relative;
    cursor: pointer;
    padding: 13px 22px;
    font-size: 12px;
    line-height: 1.2;
    font-weight: 800;
    color: #00ae4d;
    min-width: 156px;
    text-align: center;
    text-transform: uppercase;
    outline: none
}

html[lang=th] .comp__recipedetails_nutritionalindicator_tab .tab-head a {
    font-size: 22px;
    line-height: 1.1
}

.comp__recipedetails_nutritionalindicator_tab .tab-head a:before {
    content: "";
    display: block;
    position: absolute;
    width: 100%;
    height: 36px;
    top: 0;
    left: 0;
    border: 2px solid #00ae4d;
    transform: skew(-191deg);
    z-index: -1;
    outline: none
}

html[lang=th] .comp__recipedetails_nutritionalindicator_tab .tab-head a:before {
    height: 40px
}

.comp__recipedetails_nutritionalindicator_tab .tab-head a.active {
    color: #fff
}

.comp__recipedetails_nutritionalindicator_tab .tab-head a.active:before {
    background-color: #00ae4d
}

.comp__recipedetails_nutritionalindicator_tab .tab-cotent {
    overflow: hidden
}

.comp__recipedetails_nutritionalindicator_tab .content-item {
    height: 0
}

.comp__recipedetails_nutritionalindicator_tab .content-item.show {
    height: auto
}

.comp__recipedetails_nutritionalindicator h2 {
    padding: 0;
    color: #393939
}

.comp__recipedetails_nutritionalindicator .btn-primary {
    display: block;
    max-width: 376px;
    margin: 40px auto 0
}

.comp__recipedetails_nutritionalindicator .cls-1 {
    fill: #00ae4d
}

.comp__recipedetails_nutritionalindicator .cls-6 {
    stroke: #00ae4d;
    stroke-width: 2px
}

.comp__recipedetails_nutritionalindicator .cls-7 {
    fill: #e8dbdb
}

.comp__recipedetails_nutritionalindicator .cls-2, .comp__recipedetails_nutritionalindicator .cls-4, .comp__recipedetails_nutritionalindicator .cls-6 {
    fill: none
}

.comp__recipedetails_nutritionalindicator .cls-4 {
    stroke: #00ae4d;
    stroke-width: 25px
}

.comp__recipedetails_nutritionalindicator .nutrition-list {
    padding-top: 32px;
    display: flex;
    flex-wrap: wrap;
    align-items: center
}

@media(min-width: 768px) {
    .comp__recipedetails_nutritionalindicator .nutrition-list {
        padding-top: 72px;
        justify-content: center
    }
}

.comp__recipedetails_nutritionalindicator .nutrition-item {
    position: relative;
    flex: 0 0 50%;
    max-width: 50%;
    margin-bottom: 20px
}

@media(min-width: 768px) {
    .comp__recipedetails_nutritionalindicator .nutrition-item {
        flex: 0 0 25%;
        max-width: 25%;
        margin-bottom: 30px
    }
}

@media(min-width: 992px) {
    .comp__recipedetails_nutritionalindicator .nutrition-item {
        flex: 0 0 19.5%;
        max-width: 19.5%
    }
}

.comp__recipedetails_nutritionalindicator .nutrition-item h3 {
    position: absolute;
    top: 50%;
    left: 60%;
    transform: translateY(-50%) translateX(-50%);
    text-align: left;
    font-size: 12px;
    line-height: 1.17;
    font-weight: 800;
    width: 63%;
    color: #393939
}

@media(min-width: 768px) {
    .comp__recipedetails_nutritionalindicator .nutrition-item h3 {
        left: 55%;
        width: 58%
    }
}

.comp__recipedetails_nutritionalindicator .nutrition-item h3 span {
    display: block;
    padding: 0
}

.comp__recipedetails_nutritionalindicator .nutrition-item .name {
    font-size: 16px;
    line-height: 1.3;
    text-transform: uppercase
}

@media(min-width: 768px) {
    .comp__recipedetails_nutritionalindicator .nutrition-item .name {
        font-size: 20px;
        line-height: 1.2
    }
}

.comp__recipedetails_nutritionalindicator .nutrition-item .energy {
    color: #00ae4d
}

@media(min-width: 768px) {
    .comp__recipedetails_nutritionalindicator .nutrition-item .energy {
        font-size: 16px;
        line-height: 1.25
    }
}

.comp__recipedetails_nutritionalindicator .nutrition-item .svg_wrapper {
    width: 77%
}

@media(min-width: 768px) {
    .comp__recipedetails_nutritionalindicator .nutrition-item .svg_wrapper {
        width: 65%
    }
}

.comp__recipedetails_nutritionalindicator .desc {
    text-align: center
}

.comp__recipedetails_nutritionalindicator .desc p {
    font-size: 10px;
    line-height: 1.6;
    max-width: 602px;
    margin: 0 auto;
    font-weight: 600
}

@media(min-width: 768px) {
    .comp__recipedetails_nutritionalindicator .desc p {
        font-size: 12px;
        line-height: 1.5
    }
}

.comp__recipedetails_productmention .recipedetails_productmention {
    padding-bottom: 52px;
    padding-top: 23px
}

.comp__recipedetails_productmention .recipedetails_productmention h2 {
    font-weight: 800;
    font-size: 14px;
    line-height: 143%;
    letter-spacing: -0.2px;
    color: #393939;
    text-transform: initial;
    font-style: normal;
    margin-bottom: 12px
}

.comp__recipedetails_productmention .recipedetails_productmention .productmention_box {
    display: flex;
    flex-direction: row
}

.comp__recipedetails_productmention .recipedetails_productmention .productmention_box .photo {
    width: 96px;
    height: 96px;
    flex-shrink: 0;
    background: url(/themes/custom/milo/assets/images/recipe/bg-productmention.png) no-repeat center center/cover
}

.comp__recipedetails_productmention .recipedetails_productmention .productmention_box .photo a {
    display: block
}

.comp__recipedetails_productmention .recipedetails_productmention .productmention_box .photo img {
    width: 100%;
    object-fit: cover
}

.comp__recipedetails_productmention .recipedetails_productmention .productmention_box .contetnt_buy {
    flex: 1;
    padding-left: 24px
}

.comp__recipedetails_productmention .recipedetails_productmention .productmention_box .contetnt_buy .btn-wrapper {
    display: flex;
    justify-content: flex-start
}

.comp__recipedetails_productmention .recipedetails_productmention .productmention_box .contetnt_buy .btn-wrapper .adimo-site-product-first {
    background: none;
    margin: 0;
    padding: 0
}

.comp__recipedetails_productmention .recipedetails_productmention .productmention_box .contetnt_buy .btn-wrapper .adimo-site-product-first button {
    border-radius: 42px;
    padding: 8px 22px;
    font-size: 16px;
    line-height: 24px;
    font-weight: 800;
    text-shadow: 0px 0px 9px rgba(164, 75, 33, .8);
    text-align: center;
    position: relative;
    border: 0;
    top: 0;
    transition: all .5s ease-in-out;
    text-transform: capitalize;
    background-color: #ffc208;
    color: #fff !important
}

@media(min-width: 576px) {
    .comp__recipedetails_productmention .recipedetails_productmention .productmention_box .contetnt_buy .btn-wrapper .adimo-site-product-first button {
        font-size: 16px
    }
}

.comp__recipedetails_productmention .recipedetails_productmention .productmention_box .contetnt_buy .btn-wrapper .adimo-site-product-first button:hover {
    top: -5px;
    box-shadow: 0px 4px 5px rgba(164, 75, 33, .8)
}

.comp__recipedetails_productmention .recipedetails_productmention h3 {
    font-weight: 800;
    font-size: 18px;
    line-height: 22px;
    text-decoration-line: underline;
    text-transform: uppercase;
    color: #00ae4d;
    margin-bottom: 16px
}

html[lang=th] .comp__recipedetails_productmention .recipedetails_productmention h2 {
    font-weight: 400;
    font-size: 22px;
    line-height: 91%
}

html[lang=th] .comp__recipedetails_productmention .recipedetails_productmention h3 {
    font-weight: 400;
    font-size: 28px;
    line-height: 28px
}

.comp__recipedetails_recipedescription_list {
    margin-top: 4px
}

@media(min-width: 992px) {
    .comp__recipedetails_recipedescription_list {
        max-width: 456px;
        margin-top: 40px
    }
}

.comp__recipedetails_recipedescription_list .recipedetails_description h2 {
    font-style: italic;
    font-weight: 900;
    font-size: 28px;
    line-height: 100%;
    letter-spacing: .2px;
    text-transform: uppercase;
    color: #393939;
    margin-bottom: 24px
}

@media(min-width: 992px) {
    .comp__recipedetails_recipedescription_list .recipedetails_description h2 {
        font-size: 32px;
        line-height: 39px;
        font-style: normal;
        margin-bottom: 32px;
        font-weight: 800
    }
}

html[lang=th] .comp__recipedetails_recipedescription_list .recipedetails_description h2 {
    font-weight: 400;
    font-size: 36px;
    line-height: 83%
}

@media(min-width: 992px) {
    html[lang=th] .comp__recipedetails_recipedescription_list .recipedetails_description h2 {
        font-weight: 400;
        font-size: 52px;
        line-height: 81%
    }
}

.comp__recipedetails_recipedescription_list .recipedetails_description ul {
    list-style: none;
    margin: 0;
    padding: 0
}

.comp__recipedetails_recipedescription_list .recipedetails_description ul li {
    font-weight: 600;
    font-size: 14px;
    line-height: 143%;
    letter-spacing: -0.2px;
    color: #636363;
    border-bottom: 1px solid #e0e0e0;
    padding-bottom: 11px;
    margin-bottom: 12px
}

@media(min-width: 992px) {
    .comp__recipedetails_recipedescription_list .recipedetails_description ul li {
        border-bottom-width: 2px;
        padding-bottom: 10px
    }
}

html[lang=th] .comp__recipedetails_recipedescription_list .recipedetails_description ul li {
    font-size: 20px;
    font-weight: 300
}

.comp__recipedetails_reviews_ratings {
    margin-bottom: 80px
}

@media(min-width: 992px) {
    .comp__recipedetails_reviews_ratings {
        margin-bottom: 120px
    }
}

.comp__recipedetails_reviews_ratings .recipedetails_reviews__star {
    display: flex;
    align-items: center
}

.comp__recipedetails_reviews_ratings .recipedetails_reviews__star p {
    position: relative;
    width: 22px;
    height: 22px;
    margin: 0;
    padding: 0
}

.comp__recipedetails_reviews_ratings .recipedetails_reviews__star p:not(:last-child) {
    margin-right: 10px
}

@media(min-width: 992px) {
    .comp__recipedetails_reviews_ratings .recipedetails_reviews__star p {
        width: 32px;
        height: 32px
    }

    .comp__recipedetails_reviews_ratings .recipedetails_reviews__star p:not(:last-child) {
        margin-right: 12px
    }
}

.comp__recipedetails_reviews_ratings .recipedetails_reviews__star p.active svg {
    fill: #fff
}

.comp__recipedetails_reviews_ratings .recipedetails_reviews__star p svg {
    fill: none;
    stroke: #fff;
    stroke-miterlimit: 10;
    fill-rule: evenodd;
    width: 100%;
    height: 100%;
    position: absolute
}

.comp__recipedetails_reviews_ratings .recipedetails_reviews_ratings {
    background: linear-gradient(256.14deg, #00AE4D 3.56%, #088B2C 99.3%);
    max-width: 747px;
    color: #fff;
    flex: 1;
    padding-left: 20px;
    padding-right: 20px;
    padding-top: 35px;
    margin-left: auto;
    margin-right: auto;
    padding-bottom: 40px;
    display: flex;
    flex-direction: column
}

@media(min-width: 992px) {
    .comp__recipedetails_reviews_ratings .recipedetails_reviews_ratings {
        align-items: center
    }
}

@media(max-width: 767px) {
    .comp__recipedetails_reviews_ratings .recipedetails_reviews_ratings .btn-wrapper {
        justify-content: flex-start
    }
}

.comp__recipedetails_reviews_ratings .recipedetails_reviews_ratings .btn-wrapper .field_c_link {
    display: flex
}

.comp__recipedetails_reviews_ratings .recipedetails_reviews_ratings h2 {
    margin-left: auto;
    margin-right: auto;
    font-style: normal;
    font-weight: 800;
    font-size: 24px;
    line-height: 29px;
    text-align: left;
    text-transform: none;
    margin: 20px 0 23px
}

@media(min-width: 992px) {
    .comp__recipedetails_reviews_ratings .recipedetails_reviews_ratings h2 {
        max-width: 320px;
        text-align: center
    }
}

.recipe .recipe__item .title {
    min-height: 42px
}

@media(min-width: 768px) {
    .recipe .recipe__item .title {
        min-height: 56px
    }
}

.comp__recipedetails_stepbystep {
    color: #fff;
    background: #00ae4d;
    padding-top: 32px;
    padding-bottom: 40px;
    margin-left: -20px;
    margin-right: -20px;
    margin-bottom: 0
}

@media(min-width: 768px) {
    .comp__recipedetails_stepbystep {
        margin-left: -12px;
        margin-right: -12px
    }
}

@media(min-width: 992px) {
    .comp__recipedetails_stepbystep {
        padding-bottom: 54px;
        margin-left: 0;
        margin-right: 0;
        margin-top: 8px;
        padding-left: 20px;
        padding-right: 20px
    }
}

.comp__recipedetails_stepbystep .recipedetails_stepbystep h2 {
    font-style: italic;
    font-weight: 900;
    font-size: 28px;
    line-height: 100%;
    letter-spacing: .2px;
    text-transform: uppercase;
    margin-bottom: 36px
}

@media(min-width: 992px) {
    .comp__recipedetails_stepbystep .recipedetails_stepbystep h2 {
        font-size: 32px;
        line-height: 39px;
        font-style: normal;
        margin-bottom: 32px
    }
}

.comp__recipedetails_stepbystep .recipedetails_stepbystep .stepbystep-items {
    margin: 0;
    padding: 0
}

.comp__recipedetails_stepbystep .recipedetails_stepbystep .stepbystep-items .item {
    display: flex;
    gap: 16px
}

.comp__recipedetails_stepbystep .recipedetails_stepbystep .stepbystep-items .item:not(:last-child) {
    margin-bottom: 24px
}

@media(min-width: 992px) {
    .comp__recipedetails_stepbystep .recipedetails_stepbystep .stepbystep-items .item:not(:last-child) {
        margin-bottom: 30px
    }
}

.comp__recipedetails_stepbystep .recipedetails_stepbystep .stepbystep-items .item .number {
    flex-shrink: 0;
    font-style: italic;
    font-weight: 900;
    font-size: 40px;
    line-height: 100%;
    text-align: center;
    letter-spacing: .02em;
    text-transform: uppercase;
    min-width: 30px
}

.comp__recipedetails_stepbystep .recipedetails_stepbystep .stepbystep-items .item .content {
    flex: 1
}

.comp__recipedetails_stepbystep .recipedetails_stepbystep .stepbystep-items .item .content p {
    margin: 0;
    padding: 0;
    font-weight: 600;
    font-size: 14px;
    line-height: 143%;
    letter-spacing: -0.2px
}

.comp__recipedetails_stepbystep .recipedetails_stepbystep .stepbystep-items .item .content p:not(:last-child) {
    margin-bottom: 21px
}

@media(min-width: 992px) {
    .comp__recipedetails_stepbystep .recipedetails_stepbystep .stepbystep-items .item .content p {
        border-bottom-width: 2px;
        padding-bottom: 10px
    }

    .comp__recipedetails_stepbystep .recipedetails_stepbystep .stepbystep-items .item .content p:not(:last-child) {
        margin-bottom: 11px
    }
}

html[lang=th] .comp__recipedetails_stepbystep .recipedetails_stepbystep .stepbystep-items .item .content p {
    font-size: 20px
}

.comp__recipeLanding_cards_list_a {
    margin-bottom: 80px
}

@media(min-width: 768px) {
    .comp__recipeLanding_cards_list_a {
        margin-bottom: 120px
    }
}

.comp__recipeLanding_cards_list_a .recipe__filters {
    display: flex;
    max-width: 1128px;
    padding: 0 20px;
    margin: 24px auto;
    justify-content: space-between;
    align-items: center
}

@media(min-width: 768px) {
    .comp__recipeLanding_cards_list_a .recipe__filters {
        margin: 28px auto
    }
}

.comp__recipeLanding_cards_list_a .recipe__filters .num {
    color: #00ae4d;
    font-weight: 800
}

.comp__recipeLanding_cards_list_a .recipe__filters .body-text {
    margin: 0;
    color: #393939
}

.comp__recipeLanding_cards_list_a .recipe__filters .filter__functions {
    max-width: 90px
}

@media(min-width: 576px) {
    .comp__recipeLanding_cards_list_a .recipe__filters .filter__functions {
        max-width: none
    }
}

.comp__recipeLanding_cards_list_a .recipe__listing {
    display: flex;
    gap: 24px;
    width: 100vw;
    margin: auto;
    padding: 0 20px;
    position: relative;
    flex-wrap: wrap
}

@media(max-width: 767px) {
    .comp__recipeLanding_cards_list_a .recipe__listing {
        left: 50vw;
        transform: translate(-50%, 0)
    }
}

@media(min-width: 992px) {
    .comp__recipeLanding_cards_list_a .recipe__listing {
        max-width: 1128px;
        padding: 0
    }
}

.comp__recipeLanding_cards_list_a .recipe__listing .recipe__item {
    width: 100%;
    margin-bottom: 16px
}

@media(min-width: 768px) {
    .comp__recipeLanding_cards_list_a .recipe__listing .recipe__item {
        width: calc(50% - 12px)
    }
}

@media(min-width: 992px) {
    .comp__recipeLanding_cards_list_a .recipe__listing .recipe__item {
        width: calc((1 / 3 * 100%) - 16px)
    }
}

@media(min-width: 1400px) {
    .comp__recipeLanding_cards_list_a .recipe__listing .recipe__item {
        margin-bottom: 56px
    }
}

.comp-ogilvy-ratings-reviews {
    padding-top: 10%;
    background: #f2f2f2
}

.comp-ogilvy-ratings-reviews .title-ratings-reviews {
    text-align: center;
    font-size: 24px;
    line-height: 114%;
    letter-spacing: .2px;
    text-transform: uppercase;
    color: #393939;
    margin-bottom: 21px;
    font-weight: 800
}

@media(min-width: 992px) {
    .comp-ogilvy-ratings-reviews .title-ratings-reviews {
        font-size: 32px;
        margin-bottom: 24px
    }
}

.comp-ogilvy-ratings-reviews .title-ratings-reviews .comment-total {
    margin-left: -6px;
    margin-right: -6px
}

.comp-ogilvy-ratings-reviews article {
    background: linear-gradient(90deg, #088b2c 0%, #00ae4d 100%);
    color: #fff;
    padding: 20px 20px;
    margin: 0 20px 15px
}

.comp-ogilvy-ratings-reviews article .form-comment-total-val {
    margin-left: -6px;
    margin-right: -6px
}

@media(min-width: 992px) {
    .comp-ogilvy-ratings-reviews article {
        margin-bottom: 30px;
        padding: 30px;
        margin-left: 32px;
        margin-right: 32px
    }
}

.comp-ogilvy-ratings-reviews article h3 {
    font-weight: 800;
    font-size: 16px;
    line-height: 20px;
    text-transform: uppercase
}

@media(min-width: 992px) {
    .comp-ogilvy-ratings-reviews article h3 {
        font-size: 22px
    }
}

.comp-ogilvy-ratings-reviews article .comment-author-information {
    font-size: 10px;
    line-height: 180%;
    letter-spacing: .005em;
    margin-bottom: 12px
}

@media(min-width: 992px) {
    .comp-ogilvy-ratings-reviews article .comment-author-information {
        font-size: 14px;
        margin-bottom: 2%
    }
}

.comp-ogilvy-ratings-reviews article .comment-author-information a {
    color: #fff
}

.comp-ogilvy-ratings-reviews article .field_dsu_comment {
    margin-top: 10px;
    font-size: 12px;
    line-height: 150%;
    letter-spacing: .005em;
    color: #fff
}

@media(min-width: 992px) {
    .comp-ogilvy-ratings-reviews article .field_dsu_comment {
        font-size: 16px;
        margin-top: 2%
    }
}

.comp-ogilvy-ratings-reviews article .field_dsu_ratings {
    margin-left: -7px;
    pointer-events: none
}

.comp-ogilvy-ratings-reviews article .field_dsu_ratings .star {
    background: none;
    background-image: url('data:image/svg+xml,<svg width="26" height="26" viewBox="0 0 26 26" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M13.9905 1.47936L16.5218 9.3232L24.7656 9.30695C25.8056 9.30695 26.1956 10.5932 25.2843 11.2557L18.6994 16.0208L21.2631 23.8544C21.5894 24.8532 20.3869 25.6394 19.5994 24.9644L13.0045 20.1545L6.34211 25.0121C5.43961 25.6708 4.43836 24.7846 4.81587 23.6333L7.30585 16.0209L0.630973 11.1882C-0.220291 10.5732 0.282237 9.23571 1.31222 9.30698L9.48214 9.32323L12.0171 1.47939C12.3246 0.515644 13.6872 0.529372 13.9947 1.47939L13.9905 1.47936Z" fill="white"/></svg>') !important;
    background-repeat: no-repeat;
    width: 26px;
    height: 26px;
    background-position: 0px 0px;
    margin: 0 7px
}

.comp-ogilvy-ratings-reviews article .field_dsu_ratings .star.empty {
    background: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22.9 21.92'%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bfill:none;stroke:white;stroke-miterlimit:10;stroke-width:0.5px;fill-rule:evenodd;%7D%3C/style%3E%3C/defs%3E%3Cg id='Layer_2' data-name='Layer 2'%3E%3Cg id='Layer_1-2' data-name='Layer 1'%3E%3Cpath class='cls-1' d='M12.32.88l2.21,6.86h7.22a.91.91,0,0,1,.45,1.7L16.44,13.6l2.24,6.86a.91.91,0,0,1-1.45,1l-5.78-4.21L5.63,21.47c-.79.58-1.67-.2-1.34-1.21L6.47,13.6.63,9.37a.91.91,0,0,1,.59-1.64H8.37L10.59.88a.91.91,0,0,1,1.73,0Z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E") !important;
    background-repeat: no-repeat
}

.comp-ogilvy-ratings-reviews article .field_dsu_ratings .star.empty a {
    background: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22.9 21.92'%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bfill:none;stroke:white;stroke-miterlimit:10;stroke-width:0.5px;fill-rule:evenodd;%7D%3C/style%3E%3C/defs%3E%3Cg id='Layer_2' data-name='Layer 2'%3E%3Cg id='Layer_1-2' data-name='Layer 1'%3E%3Cpath class='cls-1' d='M12.32.88l2.21,6.86h7.22a.91.91,0,0,1,.45,1.7L16.44,13.6l2.24,6.86a.91.91,0,0,1-1.45,1l-5.78-4.21L5.63,21.47c-.79.58-1.67-.2-1.34-1.21L6.47,13.6.63,9.37a.91.91,0,0,1,.59-1.64H8.37L10.59.88a.91.91,0,0,1,1.73,0Z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E") !important;
    background-repeat: no-repeat
}

.comp-ogilvy-ratings-reviews article .field_dsu_ratings .star a {
    background: none;
    background-image: url('data:image/svg+xml,<svg width="26" height="26" viewBox="0 0 26 26" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M13.4943 1.56986C13.2953 1.13475 12.6423 1.16509 12.4935 1.63137L12.4929 1.63315L9.95791 9.47699L9.84578 9.82395L9.48115 9.82323L1.31123 9.80698L1.29445 9.80694L1.27771 9.80579C0.737144 9.76838 0.490089 10.4696 0.923783 10.7829L0.924193 10.7832L7.59907 15.6159L7.89444 15.8297L7.78108 16.1763L5.29109 23.7888L5.29098 23.7891C5.15594 24.201 5.28294 24.4949 5.43268 24.6291C5.56595 24.7485 5.77918 24.804 6.04732 24.6082L6.04754 24.6081L12.7099 19.7505L13.0046 19.5357L13.2991 19.7505L19.894 24.5604L19.9099 24.572L19.9248 24.5848C20.3368 24.9379 20.9535 24.5175 20.7879 24.0099L13.4943 1.56986ZM13.4943 1.56986L13.5147 1.63291L16.0459 9.47675L16.158 9.82391L16.5227 9.82319L24.7656 9.80695C24.7657 9.80695 24.7659 9.80695 24.766 9.80695C25.0518 9.80711 25.2196 9.96987 25.2753 10.1681C25.3313 10.3674 25.2799 10.6406 24.9907 10.851C24.9905 10.8511 24.9904 10.8512 24.9903 10.8513L18.4063 15.6157L18.1107 15.8296L18.2242 16.1763L20.7878 24.0096L13.4943 1.56986Z" stroke="white"/></svg>') !important;
    background-repeat: no-repeat
}

.comp-ogilvy-ratings-reviews .milo-product-comment-form {
    padding: 24px 20px 36px
}

@media(min-width: 992px) {
    .comp-ogilvy-ratings-reviews .milo-product-comment-form {
        padding-left: 48px;
        padding-right: 48px
    }
}

.comp-ogilvy-ratings-reviews .milo-product-comment-form .fivestar-basic div.fivestar-widget-static {
    margin-left: -7px
}

.comp-ogilvy-ratings-reviews .milo-product-comment-form .fivestar-basic div.fivestar-widget-static .star {
    background: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22.9 21.92'%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bfill:none;stroke:%23000;stroke-miterlimit:10;stroke-width:0.5px;fill-rule:evenodd;%7D%3C/style%3E%3C/defs%3E%3Cg id='Layer_2' data-name='Layer 2'%3E%3Cg id='Layer_1-2' data-name='Layer 1'%3E%3Cpath class='cls-1' d='M12.32.88l2.21,6.86h7.22a.91.91,0,0,1,.45,1.7L16.44,13.6l2.24,6.86a.91.91,0,0,1-1.45,1l-5.78-4.21L5.63,21.47c-.79.58-1.67-.2-1.34-1.21L6.47,13.6.63,9.37a.91.91,0,0,1,.59-1.64H8.37L10.59.88a.91.91,0,0,1,1.73,0Z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E") !important;
    background-repeat: no-repeat;
    width: 24px;
    height: 22px;
    background-position: 0px 0px;
    margin: 0 7px
}

.comp-ogilvy-ratings-reviews .milo-product-comment-form .fivestar-basic div.fivestar-widget-static .star span {
    background: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22.9 21.92'%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bfill:none;stroke:%23000;stroke-miterlimit:10;stroke-width:0.5px;fill-rule:evenodd;%7D%3C/style%3E%3C/defs%3E%3Cg id='Layer_2' data-name='Layer 2'%3E%3Cg id='Layer_1-2' data-name='Layer 1'%3E%3Cpath class='cls-1' d='M12.32.88l2.21,6.86h7.22a.91.91,0,0,1,.45,1.7L16.44,13.6l2.24,6.86a.91.91,0,0,1-1.45,1l-5.78-4.21L5.63,21.47c-.79.58-1.67-.2-1.34-1.21L6.47,13.6.63,9.37a.91.91,0,0,1,.59-1.64H8.37L10.59.88a.91.91,0,0,1,1.73,0Z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E") !important;
    background-repeat: no-repeat
}

.comp-ogilvy-ratings-reviews .milo-product-comment-form .fivestar-basic div.fivestar-widget-static .star span.on {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22.4 21.42'%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bfill:%23000;fill-rule:evenodd;%7D%3C/style%3E%3C/defs%3E%3Cg id='Layer_2' data-name='Layer 2'%3E%3Cg id='Layer_1-2' data-name='Layer 1'%3E%3Cpath class='cls-1' d='M12.07.63l2.21,6.86H21.5A.91.91,0,0,1,22,9.18l-5.76,4.17,2.24,6.86a.91.91,0,0,1-1.45,1L11.2,17,5.38,21.22C4.59,21.8,3.71,21,4,20l2.18-6.66L.38,9.12A.91.91,0,0,1,1,7.48H8.12L10.34.63a.91.91,0,0,1,1.73,0Z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E") !important
}

.comp-ogilvy-ratings-reviews .milo-product-comment-form .comment-form-subtitle {
    font-style: normal;
    font-weight: 800;
    font-size: 16px;
    line-height: 130%;
    text-transform: uppercase;
    color: #00ae4d;
    margin: 0;
    padding: 0;
    text-align: center
}

@media(min-width: 992px) {
    .comp-ogilvy-ratings-reviews .milo-product-comment-form .comment-form-subtitle {
        font-size: 22px
    }
}

.comp-ogilvy-ratings-reviews .milo-product-comment-form .comment-form-helptext {
    font-weight: 600;
    font-size: 14px;
    line-height: 20px;
    letter-spacing: -0.2px;
    color: #636363;
    margin: 26px 0;
    padding: 0;
    color: #393939;
    margin: 8px 0
}

@media(max-width: 991px) {
    .comp-ogilvy-ratings-reviews .milo-product-comment-form .comment-form-helptext {
        font-size: 12px;
        line-height: 18px;
        letter-spacing: .005em
    }
}

.comp-ogilvy-ratings-reviews .milo-product-comment-form form label {
    font-weight: 600;
    font-size: 14px;
    line-height: 20px;
    letter-spacing: -0.2px;
    color: #636363;
    margin: 26px 0;
    padding: 0;
    color: #393939;
    margin: 16px 0 8px;
    display: inline-block
}

@media(max-width: 991px) {
    .comp-ogilvy-ratings-reviews .milo-product-comment-form form label {
        font-size: 12px;
        line-height: 18px;
        letter-spacing: .005em
    }
}

@media(min-width: 992px) {
    .comp-ogilvy-ratings-reviews .milo-product-comment-form form label {
        margin-top: 26px
    }
}

.comp-ogilvy-ratings-reviews .milo-product-comment-form form input[type=submit] {
    cursor: pointer;
    font-size: 16px;
    line-height: 24px;
    border: 0;
    width: 50%;
    margin: 7% auto 0;
    display: inherit;
    max-width: 180px;
    border-radius: 42px;
    padding: 10px 24px;
    font-weight: 800;
    text-shadow: 0px 0px 9px rgba(164, 75, 33, .8);
    text-align: center;
    background-color: #ffc208;
    position: relative;
    transition: all .5s ease-in-out;
    top: 0;
    color: #fff
}

@media(min-width: 576px) {
    .comp-ogilvy-ratings-reviews .milo-product-comment-form form input[type=submit] {
        font-size: 16px
    }
}

.comp-ogilvy-ratings-reviews .milo-product-comment-form form input[type=submit]:hover {
    top: -5px;
    box-shadow: 0px 4px 5px rgba(164, 75, 33, .8)
}

.comp-ogilvy-ratings-reviews .milo-product-comment-form form input[type=text] {
    max-height: 50px
}

.comp-ogilvy-ratings-reviews .milo-product-comment-form form input[type=text], .comp-ogilvy-ratings-reviews .milo-product-comment-form form textarea {
    background: #fff;
    border: 1px solid #00ae4d;
    box-sizing: border-box;
    outline: 0;
    padding: 3.2% 3%;
    width: 100%;
    font-size: 12px;
    line-height: 18px;
    letter-spacing: .005em;
    font-family: "Montserrat", Helvetica, Arial, sans-serif;
    color: #393939
}

@media(min-width: 992px) {
    .comp-ogilvy-ratings-reviews .milo-product-comment-form form input[type=text], .comp-ogilvy-ratings-reviews .milo-product-comment-form form textarea {
        font-size: 16px
    }
}

.comp-ogilvy-ratings-reviews .milo-product-comment-form form input[type=text]::-webkit-input-placeholder, .comp-ogilvy-ratings-reviews .milo-product-comment-form form textarea::-webkit-input-placeholder {
    color: #393939;
    opacity: .5
}

.comp-ogilvy-ratings-reviews .milo-product-comment-form form input[type=text]::-moz-placeholder, .comp-ogilvy-ratings-reviews .milo-product-comment-form form textarea::-moz-placeholder {
    color: #393939;
    opacity: .5
}

.comp-ogilvy-ratings-reviews .milo-product-comment-form form input[type=text]:-ms-input-placeholder, .comp-ogilvy-ratings-reviews .milo-product-comment-form form textarea:-ms-input-placeholder {
    color: #393939;
    opacity: .5
}

.comp-ogilvy-ratings-reviews .milo-product-comment-form form input[type=text]:-moz-placeholder, .comp-ogilvy-ratings-reviews .milo-product-comment-form form textarea:-moz-placeholder {
    color: #393939;
    opacity: .5
}

.comp-ogilvy-ratings-reviews .milo-product-comment-form .captcha {
    margin-top: 16px
}

@media(min-width: 768px) {
    .comp-ogilvy-ratings-reviews .milo-product-comment-form .captcha {
        margin-top: 28px
    }
}

@media(min-width: 992px) {
    html[lang=th] .comp-ogilvy-ratings-reviews article .comment-author-information {
        font-size: 20px;
        margin-bottom: 2%
    }
}

.comp__search .btn-wrapper {
    margin-bottom: 84px
}

.search__form {
    margin-bottom: 20px
}

@media(min-width: 768px) {
    .search__form {
        margin-bottom: 50px
    }
}

.search__input {
    position: relative
}

.search__input .icon-search {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    font-size: 18px;
    color: #00ae4d
}

.search__input button {
    border: none;
    background: none;
    position: absolute;
    right: 0;
    top: 0;
    display: block;
    height: 100%
}

.search__input input {
    border: none;
    width: 100%;
    outline: none;
    padding: 10px 50px 10px 0;
    color: #393939;
    border-bottom: 2px solid #393939;
    font-size: 14px;
    font-weight: 600
}

@media(min-width: 768px) {
    .search__input input {
        font-size: 18px
    }
}

.search__summary {
    font-size: 14px;
    font-weight: 600;
    color: #393939
}

.search__summary strong {
    color: #00ae4d
}

.search__summary em {
    font-style: normal
}

.search__category {
    color: #393939;
    font-size: 18px;
    margin: 40px 0 20px;
    font-weight: 800;
    text-transform: uppercase
}

@media(min-width: 768px) {
    .search__category {
        font-size: 24px;
        margin: 40px 0 32px;
        font-weight: 800
    }
}

.search__item {
    padding-bottom: 40px;
    display: flex
}

.search__item a {
    color: #393939 !important
}

.search__image {
    margin-right: 16px;
    flex: 0 0 112px
}

@media(min-width: 768px) {
    .search__image {
        flex: 0 0 168px;
        margin-right: 24px
    }
}

.search__image--product {
    position: relative;
    display: block;
    width: 100%;
    height: 112px;
    background: radial-gradient(64.47% 64.47% at 50% 50%, #FFFFFF 51.04%, #E5E5E5 100%), linear-gradient(0deg, #E5E5E5, #E5E5E5)
}

@media(min-width: 768px) {
    .search__image--product {
        height: 168px
    }
}

.search__image--product img {
    position: absolute;
    left: 50%;
    top: 50%;
    max-width: calc(100% - 20px);
    transform: translate(-50%, -50%)
}

.search__inner h3, .search__inner h3 a {
    color: #393939;
    font-size: 12px;
    font-weight: 800
}

@media(min-width: 768px) {
    .search__inner h3, .search__inner h3 a {
        font-size: 16px
    }
}

.search__inner h4, .search__inner h4 a {
    color: #393939;
    text-transform: capitalize;
    font-size: 10px;
    font-weight: 800
}

@media(min-width: 768px) {
    .search__inner h4, .search__inner h4 a {
        font-size: 12px
    }
}

.search__inner strong {
    color: #00ae4d;
    font-weight: 800
}

.search__inner small {
    font-size: 10px;
    color: #393939;
    font-weight: 600
}

.search__inner p {
    font-weight: 600;
    font-size: 12px;
    margin: 0
}

html[lang=th] .search__input input {
    font-size: 20px
}

html[lang=th] .search__summary {
    font-size: 20px
}

.comp__section-teaser-2cards {
    margin-top: 64px
}

@media(min-width: 768px) {
    .comp__section-teaser-2cards {
        margin-top: 120px
    }
}

.comp__section-teaser-2cards .card__list {
    margin: 32px auto 80px;
    padding: 0 20px;
    list-style: none;
    display: flex;
    width: 100%;
    max-width: 1128px;
    position: relative;
    gap: 16px;
    justify-content: center;
    flex-wrap: wrap
}

@media(max-width: 767px) {
    .comp__section-teaser-2cards .card__list {
        left: 50%;
        width: 100vw;
        margin-left: -50vw
    }
}

@media(min-width: 768px) {
    .comp__section-teaser-2cards .card__list {
        gap: 24px;
        margin-bottom: 120px
    }
}

@media(min-width: 992px) {
    .comp__section-teaser-2cards .card__list {
        padding: 0
    }
}

.comp__section-teaser-2cards .card__item {
    flex: 0 0 50%;
    max-width: calc(50% - 8px);
    transition: all .5s ease-in-out
}

@media(min-width: 768px) {
    .comp__section-teaser-2cards .card__item {
        max-width: 360px
    }
}

.comp__section-teaser-2cards .card__item .item__banner {
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 66.6666666667%
}

.comp__section-teaser-2cards .card__item .item__banner img {
    position: absolute;
    left: 0;
    top: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover
}

.comp__section-teaser-2cards .card__item .title {
    text-transform: uppercase;
    color: #00ae4d;
    transition: all .5s ease-in-out
}

@media(min-width: 1200px) {
    .comp__section-teaser-2cards .card__item:hover {
        border: 2px solid #00ae4d
    }

    .comp__section-teaser-2cards .card__item:hover .title {
        margin-left: 2%;
        margin-right: 2%
    }
}

.comp__sectionTeaser_small {
    margin-bottom: 80px
}

@media(min-width: 992px) {
    .comp__sectionTeaser_small {
        margin-bottom: 180px
    }
}

.comp__sectionTeaser_small .block__title {
    margin-bottom: 60px
}

@media(min-width: 768px) {
    .comp__sectionTeaser_small .block__title {
        margin-bottom: 80px
    }
}

.comp__sectionTeaser_small .teaser__list {
    display: flex;
    flex-wrap: wrap;
    max-width: 1128px;
    margin: auto;
    gap: 24px;
    justify-content: center
}

.comp__sectionTeaser_small .block_teaser {
    width: 100%;
    max-width: 552px
}

@media(min-width: 992px) {
    .comp__sectionTeaser_small .block_teaser {
        width: calc(50% - 12px)
    }
}

.comp__sectionTeaser_small .block_teaser p {
    font-weight: 600;
    font-size: 14px;
    line-height: 20px;
    letter-spacing: -0.2px;
    color: #636363;
    margin: 26px 0;
    padding: 0;
    color: #fff;
    margin-bottom: 0
}

.comp__sectionTeaser_small .block_teaser .placehold {
    position: relative;
    display: block;
    width: 100%;
    height: 0;
    padding-bottom: 100%;
    background: linear-gradient(0deg, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3))
}

.comp__sectionTeaser_small .block_teaser .wrapper {
    position: absolute;
    bottom: 0;
    top: auto;
    height: auto;
    padding: 48px 0
}

@media(min-width: 768px) {
    .comp__sectionTeaser_small .block_teaser .wrapper {
        padding: 56px 36px
    }
}

.social-media-sharing li {
    margin-right: 0;
    width: 27px;
    height: 27px
}

.social-media-sharing li:not(:last-child) {
    margin-right: 16px
}

.comp__socialAggregator {
    margin-top: 64px
}

@media(min-width: 768px) {
    .comp__socialAggregator {
        margin-top: 120px
    }
}

.comp__socialAggregator .swiper.swiper--active {
    overflow: hidden;
    padding-bottom: 0;
    margin-right: 30px;
    margin-left: 30px
}

@media(min-width: 992px) {
    .comp__socialAggregator .swiper.swiper--active {
        margin-left: 0;
        margin-right: 0
    }
}

.comp__socialAggregator .swiper .swiper-button-next, .comp__socialAggregator .swiper .swiper-button-prev {
    opacity: 1;
    width: 26px;
    height: 26px;
    background-color: #00ae4d;
    border-radius: 50%;
    top: 50%
}

.comp__socialAggregator .swiper .swiper-button-next.swiper-button-disabled, .comp__socialAggregator .swiper .swiper-button-prev.swiper-button-disabled {
    opacity: 0
}

.comp__socialAggregator .swiper .swiper-button-next::after, .comp__socialAggregator .swiper .swiper-button-prev::after {
    font-size: 9px
}

@media(min-width: 992px) {
    .comp__socialAggregator .swiper .swiper-button-next, .comp__socialAggregator .swiper .swiper-button-prev {
        width: 40px;
        height: 40px
    }

    .comp__socialAggregator .swiper .swiper-button-next::after, .comp__socialAggregator .swiper .swiper-button-prev::after {
        font-size: 12px
    }
}

.comp__socialAggregator .swiper .swiper-button-next, .comp__socialAggregator .swiper .swiper-button-prev {
    top: 50%
}

.comp__socialAggregator .swiper .swiper-button-prev, .comp__socialAggregator .swiper .swiper-rtl .swiper-button-next {
    margin-right: 15px
}

.comp__socialAggregator .swiper .swiper-button-next, .comp__socialAggregator .swiper .swiper-rtl .swiper-button-prev {
    margin-left: 15px
}

.comp__sportsLanding_carousel_imageEtch {
    overflow: hidden
}

.comp__sportsLanding_carousel_imageEtch .block__title {
    margin-bottom: 20px
}

@media(max-width: 575px) {
    .comp__sportsLanding_carousel_imageEtch .block__title .title__wrap .title__inner-text {
        max-width: calc(100% - 130px)
    }
}

@media(min-width: 768px) {
    .comp__sportsLanding_carousel_imageEtch .block__title {
        margin-bottom: 35px
    }
}

@media(min-width: 768px) {
    .comp__sportsLanding_carousel_imageEtch .block__title .title__wrap .title__inner-text {
        max-width: none
    }
}

.comp__sportsLanding_carousel_imageEtch .container {
    position: relative;
    min-height: 500px
}

@media(min-width: 768px) {
    .comp__sportsLanding_carousel_imageEtch .container {
        min-height: 640px
    }
}

.comp__sportsLanding_carousel_imageEtch .nav {
    text-align: center;
    list-style: none;
    padding: 0 20px 15px;
    margin: 0 auto;
    overflow: hidden;
    overflow-x: auto;
    position: relative;
    z-index: 2;
    white-space: nowrap
}

.comp__sportsLanding_carousel_imageEtch .nav::-webkit-scrollbar {
    display: none
}

.comp__sportsLanding_carousel_imageEtch .nav {
    -ms-overflow-style: none;
    scrollbar-width: none
}

@media(min-width: 768px) {
    .comp__sportsLanding_carousel_imageEtch .nav {
        padding: 0;
        margin-bottom: 25px
    }
}

.comp__sportsLanding_carousel_imageEtch .nav li {
    padding: 0;
    display: inline-block;
    margin: 0 9px
}

@media(min-width: 768px) {
    .comp__sportsLanding_carousel_imageEtch .nav li {
        margin: 0 40px
    }
}

.comp__sportsLanding_carousel_imageEtch .nav li:hover a {
    color: #00ae4d
}

.comp__sportsLanding_carousel_imageEtch .nav a {
    font-size: 16px;
    color: #393939;
    font-weight: 800;
    font-style: italic;
    outline: none;
    text-transform: uppercase
}

@media(min-width: 992px) {
    .comp__sportsLanding_carousel_imageEtch .nav a {
        font-size: 24px
    }
}

html[lang=th] .comp__sportsLanding_carousel_imageEtch .nav a {
    font-size: 30px
}

@media(min-width: 992px) {
    html[lang=th] .comp__sportsLanding_carousel_imageEtch .nav a {
        font-size: 36px
    }
}

.comp__sportsLanding_carousel_imageEtch .nav .active a {
    color: #00ae4d;
    text-decoration: underline
}

.comp__sportsLanding_carousel_imageEtch .inner {
    padding: 0;
    margin: 0 auto;
    max-width: 320px;
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    opacity: 0
}

@media(min-width: 768px) {
    .comp__sportsLanding_carousel_imageEtch .inner {
        position: relative;
        left: auto;
        transform: none;
        margin: 0;
        max-width: none;
        padding-top: 50px;
        width: 45%
    }
}

.comp__sportsLanding_carousel_imageEtch h3 {
    text-transform: uppercase;
    font-style: italic;
    font-weight: 900;
    font-size: 52px;
    line-height: 52px;
    color: #fff;
    text-shadow: 0px 4px 50px rgba(0, 0, 0, .3);
    position: relative;
    margin-bottom: 50px;
    opacity: .6;
    transition: .1s
}

@media(min-width: 768px) {
    .comp__sportsLanding_carousel_imageEtch h3 {
        font-size: 72px;
        line-height: 62px
    }
}

html[lang=th] .comp__sportsLanding_carousel_imageEtch h3 {
    font-size: 90px;
    line-height: .9;
    margin-bottom: 0px
}

@media(min-width: 992px) {
    html[lang=th] .comp__sportsLanding_carousel_imageEtch h3 {
        margin-bottom: 50px;
        font-size: 112px
    }
}

.comp__sportsLanding_carousel_imageEtch h3:after {
    content: "";
    position: absolute;
    left: 0;
    height: 5px;
    width: 56px;
    bottom: -20px;
    background-color: #ffc208
}

@media(min-width: 768px) {
    .comp__sportsLanding_carousel_imageEtch h3:after {
        bottom: -32px;
        height: 8px;
        width: 120px
    }
}

@media(max-width: 767px) {
    html[lang=th] .comp__sportsLanding_carousel_imageEtch h3:after {
        bottom: -15px
    }
}

.comp__sportsLanding_carousel_imageEtch p {
    display: none;
    text-shadow: 0 0 10px #fff;
    font-size: 16px;
    font-weight: 600;
    letter-spacing: .005em;
    line-height: 22px
}

html[lang=th] .comp__sportsLanding_carousel_imageEtch p {
    font-size: 20px
}

@media(min-width: 768px) {
    .comp__sportsLanding_carousel_imageEtch p {
        display: block
    }
}

.comp__sportsLanding_carousel_imageEtch .btn {
    display: inline-block;
    text-transform: capitalize
}

.comp__sportsLanding_carousel_imageEtch .btn.yellow {
    margin-bottom: 20px
}

.comp__sportsLanding_carousel_imageEtch .swiper {
    overflow: visible
}

.comp__sportsLanding_carousel_imageEtch .swiper-slide {
    z-index: 1;
    transition-property: transform, opacity
}

.comp__sportsLanding_carousel_imageEtch .swiper-slide:not(.swiper-slide-active) {
    opacity: 0
}

.comp__sportsLanding_carousel_imageEtch .kol, .comp__sportsLanding_carousel_imageEtch .symbol, .comp__sportsLanding_carousel_imageEtch .slide-bg {
    position: absolute;
    top: 0;
    left: 0
}

.comp__sportsLanding_carousel_imageEtch .slide-bg {
    height: 420px;
    width: 100%;
    background-color: #000;
    transform: translateY(-50%);
    top: 42%
}

.comp__sportsLanding_carousel_imageEtch .slide-bg img {
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    max-width: none;
    opacity: .5;
    transition: .5s
}

.comp__sportsLanding_carousel_imageEtch .slide-bg:after {
    content: "";
    background-color: #fff;
    width: 72%;
    height: 101%;
    position: absolute;
    left: -10%;
    top: -1px;
    transform: skew(-9deg)
}

@media(min-width: 768px) {
    .comp__sportsLanding_carousel_imageEtch .slide-bg {
        height: 460px
    }
}

.comp__sportsLanding_carousel_imageEtch .kol {
    top: 50%;
    left: 50%;
    transform: translate(-100%, -50%);
    opacity: 0;
    max-width: none;
    max-height: 100%;
    transition: .5s
}

@media(min-width: 768px) {
    .comp__sportsLanding_carousel_imageEtch .kol {
        top: 58%;
        left: 64%;
        max-height: 140%
    }
}

@media(min-width: 992px) {
    .comp__sportsLanding_carousel_imageEtch .kol {
        transform: translate(0, -50%)
    }
}

.comp__sportsLanding_carousel_imageEtch .symbol {
    top: 61%;
    left: -71px;
    transform: translate(-50%, -50%);
    width: 334px;
    height: 334px;
    opacity: 0
}

@media(max-width: 767px) {
    .comp__sportsLanding_carousel_imageEtch .symbol {
        display: none
    }
}

.comp__sportsLanding_carousel_imageEtch .swiper-button-next {
    right: 56px
}

.comp__sportsLanding_carousel_imageEtch .swiper-button-prev {
    left: 56px
}

.comp__sportsLanding_carousel_imageEtch .swiper-button-next, .comp__sportsLanding_carousel_imageEtch .swiper-button-prev {
    width: 27px;
    height: 27px;
    background: #00ae4d;
    text-align: center;
    display: none;
    border-radius: 50%;
    top: 42%
}

@media(min-width: 1200px) {
    .comp__sportsLanding_carousel_imageEtch .swiper-button-next, .comp__sportsLanding_carousel_imageEtch .swiper-button-prev {
        width: 40px;
        height: 40px;
        display: block
    }
}

.comp__sportsLanding_carousel_imageEtch .swiper-button-next::after, .comp__sportsLanding_carousel_imageEtch .swiper-button-prev::after {
    display: none
}

.comp__sportsLanding_carousel_imageEtch .swiper-button-next:before, .comp__sportsLanding_carousel_imageEtch .swiper-button-prev:before {
    font-family: "icomoon" !important;
    speak: never;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    font-size: 10px;
    line-height: 27px;
    color: #fff;
    transform-origin: center
}

@media(min-width: 992px) {
    .comp__sportsLanding_carousel_imageEtch .swiper-button-next:before, .comp__sportsLanding_carousel_imageEtch .swiper-button-prev:before {
        font-size: 12px;
        line-height: 40px
    }
}

.comp__sportsLanding_carousel_imageEtch .swiper-button-next.swiper-button-prev, .comp__sportsLanding_carousel_imageEtch .swiper-button-prev.swiper-button-prev {
    transform: rotate(90deg)
}

.comp__sportsLanding_carousel_imageEtch .swiper-button-next.swiper-button-next, .comp__sportsLanding_carousel_imageEtch .swiper-button-prev.swiper-button-next {
    transform: rotate(-90deg);
    right: 56px;
    left: auto;
    margin: 0
}

.comp__sportsLanding_carousel_imageEtch .swiper-slide-prev .kol {
    transform: translate(-100%, -50%)
}

@media(min-width: 768px) {
    .comp__sportsLanding_carousel_imageEtch .swiper-slide-prev .kol {
        transform: translate(-50%, -50%)
    }
}

.comp__sportsLanding_carousel_imageEtch .swiper-slide-next .kol {
    transform: translate(0%, -50%)
}

.comp__sportsLanding_carousel_imageEtch .swiper-slide-next+.swiper-slide .kol {
    transform: translate(0%, -50%)
}

.comp__sportsLanding_carousel_imageEtch .swiper-slide-active {
    z-index: 3
}

.comp__sportsLanding_carousel_imageEtch .swiper-slide-active .symbol {
    opacity: .6
}

.comp__sportsLanding_carousel_imageEtch .swiper-slide-active h3, .comp__sportsLanding_carousel_imageEtch .swiper-slide-active .kol {
    opacity: 1
}

.comp__sportsLanding_carousel_imageEtch .swiper-slide-active .kol {
    transform: translate(-50%, -50%);
    transition: .5s
}

.comp__sportsLanding_carousel_imageEtch .swiper-slide-active .inner {
    opacity: 1
}

.comp__sportsLanding_carousel_imageEtch .btn-primary.yellow {
    margin-top: 32px
}

html[lang=th] .comp__sportsLanding_carousel_imageEtch .btn-primary.yellow {
    font-size: 26px
}

.comp__sportsLanding_carousel_imageEtch_test h3, .comp__sportsLanding_carousel_imageEtch_test p {
    text-shadow: 0px 4px 50px #2d3436
}

.comp__sportslanding_intro_fulllength {
    text-align: center
}

.comp__sportslanding_intro_fulllength .paragraph--type--c-text {
    padding: 0
}

.comp__sportslanding_intro_fulllength .block__title {
    margin: 5px 0 13px
}

@media(min-width: 992px) {
    .comp__sportslanding_intro_fulllength .block__title {
        margin: 35px 0 19px
    }
}

@media(max-width: 767px) {
    .comp__sportslanding_intro_fulllength .block__title .heading--filled::before, .comp__sportslanding_intro_fulllength .block__title .heading--filled::after {
        display: none
    }
}

.comp__sportslanding_intro_fulllength .desc {
    display: inline-block;
    max-width: 762px;
    margin: 0 auto 12px
}

@media(min-width: 992px) {
    .comp__sportslanding_intro_fulllength .desc {
        margin-bottom: 54px
    }
}

.comp__sportslanding_intro_fulllength .desc p {
    margin: 0;
    font-size: 14px;
    line-height: 143%;
    letter-spacing: -0.2px;
    font-weight: 600
}

html[lang=th] .comp__sportslanding_intro_fulllength .desc p {
    font-weight: 400
}

html[lang=th] .comp__sportslanding_intro_fulllength .desc p {
    font-size: 20px;
    line-height: 1
}

.comp__sportslanding_masthead {
    position: relative;
    overflow: hidden;
    padding: 0
}

.comp__sportslanding_masthead picture img {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    object-fit: cover;
    max-width: inherit;
    width: 100%;
    min-height: 100%;
    z-index: -1
}

@media(min-width: 992px) {
    .comp__sportslanding_masthead .container {
        padding: 0
    }
}

.comp__sportslanding_masthead .container .col-12 {
    min-height: 480px;
    display: flex;
    flex-direction: column
}

@media(min-width: 992px) {
    .comp__sportslanding_masthead .container .col-12 {
        min-height: 420px
    }
}

html[lang=th] .comp__sportslanding_masthead .container .col-12 {
    min-height: 480px
}

@media(min-width: 992px) {
    html[lang=th] .comp__sportslanding_masthead .container .col-12 {
        min-height: 540px
    }
}

.comp__sportslanding_masthead .heading__wrap {
    margin-top: auto;
    padding-bottom: 30px
}

@media(min-width: 992px) {
    .comp__sportslanding_masthead .heading__wrap {
        padding-bottom: 64px
    }
}

.comp__sportslanding_masthead .heading__wrap span {
    line-height: 1.22222;
    color: #fff;
    padding: 0
}

@media(min-width: 992px) {
    .comp__sportslanding_masthead .heading__wrap span {
        line-height: 1
    }
}

html[lang=th] .comp__sportslanding_masthead .heading__wrap span {
    line-height: 70px
}

@media(min-width: 992px) {
    html[lang=th] .comp__sportslanding_masthead .heading__wrap span {
        line-height: 1
    }
}

.comp__sportslanding_masthead .heading__wrap .heading-large--filled {
    max-width: 750px
}

html[lang=th] .comp__sportslanding_masthead .heading__wrap .heading-large--filled {
    line-height: .79
}

.comp__sportslanding_masthead .heading__wrap .heading-large--outline {
    color: transparent;
    -webkit-text-stroke-color: #fff
}

.comp__sportslanding_masthead .heading__wrap .heading--filled {
    max-width: 700px
}

.comp__sportslanding_masthead .paragraph--type--c-text {
    padding: 0
}

html[lang=vi] .comp__sportslanding_masthead .heading__wrap .heading--filled {
    line-height: 1.2
}

.comp__sports_landingpage_initiatives_partnerships {
    display: block;
    margin: 0 auto;
    padding-bottom: .1px
}

.comp__sports_landingpage_initiatives_partnerships .block__title {
    margin-bottom: 53px
}

.comp__sports_landingpage_initiatives_partnerships .initiatives_box {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: 16px;
    margin: 0 0 80px
}

@media(min-width: 992px) {
    .comp__sports_landingpage_initiatives_partnerships .initiatives_box {
        gap: 40px;
        margin-bottom: 125px
    }
}

.comp__sports_landingpage_initiatives_partnerships .initiatives_box.initiatives_box_photoright {
    flex-direction: row-reverse
}

.comp__sports_landingpage_initiatives_partnerships .initiatives_box .initiatives_photo {
    flex-shrink: 0;
    max-width: 192px;
    border: 1.6px solid #e0e0e0;
    box-sizing: border-box;
    width: 112px;
    height: 112px
}

.comp__sports_landingpage_initiatives_partnerships .initiatives_box .initiatives_photo img {
    object-fit: cover;
    width: 100%
}

@media(min-width: 992px) {
    .comp__sports_landingpage_initiatives_partnerships .initiatives_box .initiatives_photo {
        border: 0;
        width: 192px;
        height: 192px
    }
}

.comp__sports_landingpage_initiatives_partnerships .initiatives_box .initiatives_contents {
    flex: 1;
    max-width: 512px;
    padding-right: 0
}

@media(min-width: 992px) {
    .comp__sports_landingpage_initiatives_partnerships .initiatives_box .initiatives_contents {
        padding-right: 8%
    }
}

.comp__sports_landingpage_initiatives_partnerships .initiatives_box .initiatives_contents h3 {
    font-weight: 800;
    font-size: 18px;
    line-height: 22px;
    text-transform: uppercase;
    color: #00ae4d;
    margin: 0 0 11px;
    padding: 0
}

@media(min-width: 992px) {
    .comp__sports_landingpage_initiatives_partnerships .initiatives_box .initiatives_contents h3 {
        font-size: 24px;
        line-height: 29px
    }
}

.comp__sports_landingpage_initiatives_partnerships .initiatives_box .initiatives_contents p {
    margin: 0;
    padding: 0;
    font-weight: 600;
    font-size: 14px;
    line-height: 143%;
    letter-spacing: -0.2px;
    color: #636363
}

html[lang=th] .comp__sports_landingpage_initiatives_partnerships .initiatives_box .initiatives_contents p {
    font-size: 20px
}

.comp__sports_landingpage_find_sports {
    position: relative;
    color: #fff;
    margin-top: 0;
    overflow: hidden;
    background: #00ae4d;
    margin-bottom: 80px
}

@media(min-width: 992px) {
    .comp__sports_landingpage_find_sports {
        margin-top: 12px;
        background: none;
        margin-bottom: 120px
    }
}

@media(min-width: 992px) {
    .comp__sports_landingpage_find_sports .find_sports_left .btn-wrapper {
        padding-top: 32px
    }
}

@media(min-width: 992px) {
    .comp__sports_landingpage_find_sports .find_sports_right .btn-wrapper {
        justify-content: flex-start
    }
}

.sports_landingpage_find_sports {
    display: flex;
    width: 100%;
    padding-left: 0;
    padding-right: 0;
    flex-direction: column
}

@media(min-width: 992px) {
    .sports_landingpage_find_sports {
        background: linear-gradient(256.14deg, #00AE4D 3.56%, #088B2C 99.3%);
        -webkit-clip-path: polygon(7% 0, 100% 0, 93% 100%, 0% 100%);
        clip-path: polygon(7% 0, 100% 0, 93% 100%, 0% 100%);
        padding-right: 102px;
        padding-left: 112px;
        flex-direction: row
    }
}

.line-text-break {
    display: block;
    position: relative;
    text-align: center;
    margin: 0 20px;
    overflow: hidden
}

@media(min-width: 992px) {
    .line-text-break {
        margin: 0;
        display: flex;
        align-items: center;
        overflow: inherit
    }
}

.line-text-break span {
    letter-spacing: -0.2px;
    font-weight: 600;
    font-size: 14px;
    line-height: 20px;
    color: #fff
}

.line-text-break span::before, .line-text-break span::after {
    background: #fff;
    content: "";
    width: calc(100% - 40px);
    height: 1px;
    position: absolute
}

@media(max-width: 991px) {
    .line-text-break span::before, .line-text-break span::after {
        top: 50%;
        transform: translateX(-50%)
    }
}

@media(min-width: 992px) {
    .line-text-break span::before, .line-text-break span::after {
        width: 1px;
        height: 46%
    }
}

.line-text-break span::before {
    left: 0
}

@media(min-width: 992px) {
    .line-text-break span::before {
        left: 50%;
        top: 0
    }
}

.line-text-break span::after {
    left: 100%
}

@media(min-width: 992px) {
    .line-text-break span::after {
        left: 50%;
        bottom: -10%;
        top: initial;
        height: 56%
    }
}

.find_sports_left {
    width: 100%;
    flex-shrink: 0;
    display: flex;
    flex-direction: column
}

@media(min-width: 992px) {
    .find_sports_left {
        width: 58%
    }
}

@media(min-width: 992px) {
    .find_sports_left .block__title {
        text-align: left
    }

    .find_sports_left .block__title .heading--outline {
        padding-left: 0
    }
}

.find_sports_left .block__title span {
    color: #fff;
    letter-spacing: .2px
}

.find_sports_left .block__title .heading--filled::before, .find_sports_left .block__title .heading--filled::after {
    background-color: #fff
}

@media(min-width: 992px) {
    .find_sports_left .block__title .heading--filled::before, .find_sports_left .block__title .heading--filled::after {
        display: none
    }
}

@media(min-width: 992px) {
    .find_sports_left .block__title .heading--filled {
        justify-content: left
    }
}

.find_sports_left .block__title .heading--outline {
    -webkit-text-stroke: 1px #fff;
    color: transparent;
    letter-spacing: .02em
}

@media(min-width: 992px) {
    .find_sports_left .block__title span {
        letter-spacing: 0
    }

    .find_sports_left .block__title .heading--outline {
        -webkit-text-stroke: 1.2px #fff;
        line-height: 81%;
        margin-bottom: 6px
    }
}

.find_sports_left .btn-wrapper {
    padding-top: 20px;
    padding-bottom: 14px;
    margin-left: 20px;
    margin-right: 20px;
    display: block
}

.find_sports_left .btn-wrapper .icon-location::before {
    color: #fff
}

@media(min-width: 992px) {
    .find_sports_left .btn-wrapper {
        margin-left: 0;
        padding-top: 8px;
        padding-bottom: 0
    }
}

.find_sports_left .btn-wrapper a {
    display: block
}

@media(min-width: 992px) {
    .find_sports_left .btn-wrapper a {
        max-width: 320px
    }
}

html[lang=vi] .find_sports_left .block__title .heading--outline {
    line-height: 1.2
}

.find_sports_right {
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 20px;
    display: flex;
    flex-direction: column;
    flex: 1
}

@media(min-width: 992px) {
    .find_sports_right {
        margin-top: 8px;
        margin-right: 0;
        margin-left: 46px
    }
}

.find_sports_right .select-box label {
    position: absolute;
    top: 30px;
    left: 57px;
    font-weight: 800;
    text-transform: uppercase;
    color: #393939;
    font-size: 14px
}

.find_sports_right .find-city, .find_sports_right .find_district {
    position: relative;
    background: #fff;
    border-radius: 6px;
    padding: 0px 16px 5px;
    display: flex;
    align-items: center;
    margin-bottom: 16px
}

@media(min-width: 992px) {
    .find_sports_right .find-city, .find_sports_right .find_district {
        margin-bottom: 24px;
        padding-bottom: 0
    }
}

.find_sports_right .find-city p, .find_sports_right .find_district p {
    position: relative;
    z-index: 1;
    pointer-events: none;
    color: #393939;
    flex-shrink: 0
}

.find_sports_right .find-city p.icon-city, .find_sports_right .find_district p.icon-city {
    font-size: 20px
}

.find_sports_right .find-city p.icon-district, .find_sports_right .find_district p.icon-district {
    font-size: 20px
}

.find_sports_right .find-city p.icon-chevron-down, .find_sports_right .find_district p.icon-chevron-down {
    font-size: 12px
}

.find_sports_right .find-city .box-find, .find_sports_right .find_district .box-find {
    flex: 1;
    padding: 20px
}

.find_sports_right .find-city .box-find p, .find_sports_right .find_district .box-find p {
    position: relative;
    z-index: 1;
    font-weight: 600;
    font-size: 12px;
    line-height: 20px;
    letter-spacing: -0.2px;
    color: #636363;
    padding: 0;
    margin: 0;
    pointer-events: none;
    margin-top: -20px
}

.find_sports_right .find-city .box-find select, .find_sports_right .find_district .box-find select {
    appearance: none;
    outline: 0;
    border: 0;
    box-shadow: none;
    flex: 1;
    padding: 30px 58px 0 58px;
    color: #393939;
    cursor: pointer;
    display: block;
    border-radius: 6px;
    width: 100%;
    font-weight: 800;
    font-size: 14px;
    line-height: 16px;
    text-transform: uppercase;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 0
}

.find_sports_right .find-city .box-find select::-ms-expand, .find_sports_right .find_district .box-find select::-ms-expand {
    display: none
}

@media(min-width: 992px) {
    .find_sports_right .find-city .box-find select, .find_sports_right .find_district .box-find select {
        padding-top: 20px
    }
}

.find_sports_right .find-city .box-find option, .find_sports_right .find_district .box-find option {
    text-transform: uppercase
}

.find_sports_right .btn-wrapper {
    margin-top: 17px
}

.find_sports_right .btn-wrapper a {
    background: #fff;
    color: #00ae4d !important;
    text-shadow: none
}

@media(min-width: 992px) {
    .find_sports_right .btn-wrapper {
        margin-top: auto
    }
}

.comp__sportslanding_videolisting {
    position: relative
}

.comp__sportslanding_videolisting .block__title {
    padding-bottom: 20px
}

@media(min-width: 992px) {
    .comp__sportslanding_videolisting .block__title {
        margin-bottom: 33px
    }
}

@media(min-width: 992px) {
    .comp__sportslanding_videolisting .vid-main {
        display: flex
    }
}

.comp__sportslanding_videolisting .vid-player {
    position: relative;
    padding-bottom: 16px
}

@media(min-width: 992px) {
    .comp__sportslanding_videolisting .vid-player {
        width: 49%;
        margin-right: 120px;
        padding-bottom: 39px
    }
}

.comp__sportslanding_videolisting .vid-player:before {
    content: "";
    display: block;
    position: absolute;
    background-color: #00ae4d;
    top: 49px;
    bottom: 0;
    right: -20px;
    width: calc(100% + 40px);
    left: -20px;
    clip-path: polygon(0 30%, 100% 0, 100% 100%, 0% 100%);
    -webkit-clip-path: polygon(0 30%, 100% 0, 100% 100%, 0% 100%)
}

@media(min-width: 992px) {
    .comp__sportslanding_videolisting .vid-player:before {
        left: initial;
        right: -59px;
        width: 200%;
        clip-path: polygon(0 0, 100% 0, 95.5% 100%, 0% 100%);
        -webkit-clip-path: polygon(0 0, 100% 0, 95.5% 100%, 0% 100%)
    }
}

.comp__sportslanding_videolisting .vid-player>* {
    position: relative;
    z-index: 1
}

.comp__sportslanding_videolisting .vid-player h3 {
    font-size: 16px;
    line-height: 1.22;
    color: #fff;
    padding-top: 12px;
    text-transform: uppercase;
    font-weight: 800
}

@media(min-width: 992px) {
    .comp__sportslanding_videolisting .vid-player h3 {
        font-size: 20px;
        line-height: 1.2;
        padding-top: 24px
    }
}

html[lang=th] .comp__sportslanding_videolisting .vid-player h3 {
    font-weight: 400;
    font-size: 30px;
    line-height: 30px
}

@media(min-width: 992px) {
    html[lang=th] .comp__sportslanding_videolisting .vid-player h3 {
        font-size: 30px;
        line-height: 30px
    }
}

.comp__sportslanding_videolisting .vid-wrapper {
    position: relative;
    padding-bottom: 56.25%;
    height: 0
}

.comp__sportslanding_videolisting .vid-wrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%
}

@media(min-width: 992px) {
    .comp__sportslanding_videolisting .vid-list-wrapper {
        width: 38.72%
    }
}

.comp__sportslanding_videolisting .scrollbar-container {
    height: 246px;
    overflow: hidden;
    margin-top: 28px;
    position: relative
}

@media(min-width: 992px) {
    .comp__sportslanding_videolisting .scrollbar-container {
        margin-top: 0;
        height: 341px
    }
}

.comp__sportslanding_videolisting .scrollbar-container .ps__rail-y {
    width: 10px;
    background-color: #e0e0e0
}

.comp__sportslanding_videolisting .scrollbar-container .ps__rail-x, .comp__sportslanding_videolisting .scrollbar-container .ps__rail-y {
    opacity: 1
}

.comp__sportslanding_videolisting .scrollbar-container .ps__thumb-y {
    right: 0;
    width: 10px;
    background-color: #00ae4d;
    border-radius: 0
}

.comp__sportslanding_videolisting .vid-list {
    margin: 0;
    padding: 0;
    list-style: none;
    width: 100%
}

.comp__sportslanding_videolisting .vid-list li {
    list-style: none;
    padding-top: 28px;
    width: 100%
}

.comp__sportslanding_videolisting .vid-list li.hide {
    display: none
}

.comp__sportslanding_videolisting .vid-list li:first-child {
    padding-top: 0
}

.comp__sportslanding_videolisting .vid-item {
    position: relative;
    display: flex;
    cursor: pointer
}

.comp__sportslanding_videolisting .vid-left {
    width: 39%;
    flex: 0 0 39%;
    max-width: 112px
}

@media(min-width: 992px) {
    .comp__sportslanding_videolisting .vid-left {
        max-width: 168px
    }
}

.comp__sportslanding_videolisting .vid-thumb {
    position: relative;
    padding-bottom: 56.25%;
    width: 100%;
    overflow: hidden;
    height: 0
}

.comp__sportslanding_videolisting .vid-thumb img {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0
}

.comp__sportslanding_videolisting .desc {
    font-size: 12px;
    line-height: 133%;
    color: #393939;
    padding-left: 16px;
    font-weight: 800;
    padding-right: 5%
}

@media(min-width: 992px) {
    .comp__sportslanding_videolisting .desc {
        font-size: 14px;
        line-height: 143%;
        letter-spacing: -0.2px
    }
}

html[lang=th] .comp__sportslanding_videolisting .desc {
    font-weight: 400;
    font-size: 18px;
    line-height: 18px
}

@media(min-width: 992px) {
    html[lang=th] .comp__sportslanding_videolisting .desc {
        font-weight: 400;
        font-size: 22px;
        line-height: 20px
    }
}

.comp__sportslanding_videolisting .show-more {
    padding-top: 40px;
    text-align: center
}

@media(min-width: 992px) {
    .comp__sportslanding_videolisting .show-more {
        text-align: left;
        padding-top: 36px
    }
}

.comp__sportslanding_videolisting .show-more a {
    text-align: center;
    font-weight: 800;
    color: #00ae4d;
    font-size: 14px;
    line-height: 1.2;
    letter-spacing: .005em;
    display: inline-block;
    position: relative
}

html[lang=th] .comp__sportslanding_videolisting .show-more a {
    font-weight: 400;
    font-size: 22px;
    line-height: 20px
}

.comp__sportslanding_videolisting .show-more a:after {
    content: "";
    display: block;
    position: absolute;
    height: 3px;
    bottom: -4px;
    left: -2px;
    right: -2px;
    background-color: #00ae4d
}

.comp__sportslanding_videolisting .show-more a.disable {
    pointer-events: none;
    cursor: default;
    text-decoration: none;
    color: #716e6e
}

.comp__sportslanding_videolisting .show-more a.disable:after {
    background-color: #716e6e
}

.template__iframe {
    position: relative;
    overflow: hidden;
    height: 100vh;
    transition: all ease .3s
}

.template__iframe.active {
    height: auto
}

.template__iframe.active:before, .template__iframe.active:after {
    opacity: 0;
    pointer-events: none;
    visibility: hidden
}

.template__iframe:before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: #fff;
    opacity: 1;
    pointer-events: all;
    visibility: visible;
    transition: all ease .3s
}

.template__iframe:after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 64px;
    height: 64px;
    margin-left: -32px;
    margin-top: -32px;
    border: 3px solid rgba(0, 174, 77, .1);
    border-top-color: #00ae4d;
    border-radius: 100%;
    background: #fff;
    opacity: 1;
    pointer-events: all;
    visibility: visible;
    animation: spin 1s ease infinite both;
    transition: all ease .3s
}

.template__iframe iframe {
    display: block;
    width: 100%;
    border: none
}

@keyframes spin {
    0% {
        transform: rotate(0deg)
    }

    100% {
        transform: rotate(360deg)
    }
}

.tint-social .tint-container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 20px
}

.tint-social .tintup {
    height: 265px
}

.tint-social iframe {
    width: 100%;
    height: 100%;
    border: 0
}

.table-wrapper {
    margin: 50px 0;
    box-shadow: 0px 35px 50px rgba(0, 0, 0, .2);
    display: block;
    margin-right: 0;
    width: 100%
}

@media(min-width: 992px) {
    .table-wrapper {
        margin-right: 0
    }
}

.table-wrapper .fl-table {
    border-radius: 5px;
    font-weight: normal;
    border: none;
    border-collapse: collapse;
    width: 600px;
    background-color: #fff
}

@media(min-width: 768px) {
    .table-wrapper .fl-table {
        width: 100%;
        max-width: 100%
    }
}

.table-wrapper .fl-table td, .table-wrapper .fl-table th {
    text-align: center;
    padding: 14px 8px;
    font-size: 14px;
    text-transform: capitalize
}

.table-wrapper .fl-table th {
    border-right: 1px solid #f8f8f8;
    font-weight: bold;
    font-size: 16px
}

.table-wrapper .fl-table td {
    border-right: 1px solid #f8f8f8;
    font-size: 14px
}

.table-wrapper .fl-table thead th {
    color: #fff;
    background: #00ae4d
}

.table-wrapper .fl-table tr:nth-child(even) {
    background: #f8f8f8
}

.table-wrapper .fl-table tr {
    cursor: pointer
}

.no-touchevents .table-wrapper .fl-table tr:hover {
    background: #abdab0
}

.list-winner {
    padding-top: 10%
}

@media(min-width: 992px) {
    .list-winner {
        padding-top: 70px
    }
}

.list-winner .title--large {
    text-align: center;
    color: #00ae4d
}

.list-winner .list-winner-des p {
    margin: 0;
    padding: 0 0 1rem
}

.list-winner .list-winner-des p:not(:last-child) {
    margin-bottom: 0
}

.list-winner .search__input {
    max-width: 700px;
    margin: 2% auto 3%
}

@media(min-width: 992px) {
    .list-winner .search__input {
        margin-top: 30px;
        margin-bottom: 50px
    }
}

.list-winner .winner-week {
    display: flex;
    gap: 20px 25px;
    flex-direction: row;
    justify-content: space-evenly;
    flex-wrap: wrap
}

@media(min-width: 992px) {
    .list-winner .winner-week {
        gap: 20px;
        justify-content: center
    }
}

.list-winner .winner-week .wl-week {
    color: #00ae4d
}

.list-winner .winner-week .wl-week.active {
    color: #ffc208
}

.list-winner .wrapper__table {
    margin-bottom: 25%;
    overflow: hidden
}

@media(max-width: 767px) {
    .list-winner .wrapper__table {
        overflow-x: scroll;
        padding-bottom: 15px;
        cursor: pointer
    }

    .list-winner .wrapper__table::-webkit-scrollbar-track {
        -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .1);
        background-color: #f5f5f5;
        border-radius: 5px
    }

    .list-winner .wrapper__table::-webkit-scrollbar {
        height: 8px;
        background-color: #f5f5f5
    }

    .list-winner .wrapper__table::-webkit-scrollbar-thumb {
        border-radius: 5px;
        background-color: #fff;
        background-image: -webkit-gradient(linear, 40% 0%, 75% 84%, from(#4D9C41), to(#19911D), color-stop(0.6, #54DE5D))
    }
}

@media(min-width: 992px) {
    .list-winner .wrapper__table {
        margin-bottom: 200px
    }
}

.list-winner .wrapper__table .winner-list-table {
    display: none
}

.list-winner .wrapper__table .winner-list-table.active {
    display: block
}

@media(min-width: 992px) {
    .list-winner .wrapper__table .winner-list-table.active {
        display: table
    }
}

.xzoom-source img, .xzoom-preview img, .xzoom-lens img {
    display: block;
    max-width: none;
    max-height: none;
    -webkit-transition: none;
    -moz-transition: none;
    -o-transition: none;
    transition: none
}

.xzoom-container {
    display: inline-block
}

.xzoom-thumbs {
    text-align: center;
    margin-bottom: 10px
}

.xzoom2, .xzoom3, .xzoom4, .xzoom5 {
    -webkit-box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, .5);
    -moz-box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, .5);
    box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, .5)
}

.xzoom-gallery, .xzoom-gallery2, .xzoom-gallery3, .xzoom-gallery4, .xzoom-gallery5 {
    border: 1px solid #cecece;
    margin-left: 5px;
    margin-bottom: 10px
}

.xzoom-source, .xzoom-hidden {
    display: block;
    position: static;
    float: none;
    clear: both
}

.xzoom-hidden {
    overflow: hidden
}

.xzoom-preview {
    border: 1px solid #888;
    background: #2f4f4f;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, .5)
}

.xzoom-lens {
    border: 1px solid #555;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, .5);
    cursor: crosshair
}

.xzoom-loading {
    background-position: center center;
    background-repeat: no-repeat;
    border-radius: 100%;
    opacity: .7;
    background: url(/themes/custom/milo/assets/images/xloading.gif);
    width: 48px;
    height: 48px
}

.xactive {
    -webkit-box-shadow: 0px 0px 3px 0px #4aa9d2;
    -moz-box-shadow: 0px 0px 3px 0px #4aa9d2;
    box-shadow: 0px 0px 3px 0px #4aa9d2;
    border: 1px solid #4aaad2
}

.xzoom-caption {
    position: absolute;
    bottom: -43px;
    left: 0;
    background: #000;
    width: 100%;
    text-align: left
}

.xzoom-caption span {
    color: #fff;
    font-family: Arial, sans-serif;
    display: block;
    font-size: .75em;
    font-weight: bold;
    padding: 10px
}


/*-------------------------------------------------------------------*/
@media (min-width: 375px) and (max-width: 419px) {
    .comp__articlelisting_1hero-3small .tab {
        font: 14px / 44px 'kanit', Arial, sans-serif;
        color: #0d0d0d;
        margin-bottom: -1px;
        /* padding: 2px 10px; */
        /* background: #41addd; */
        /* border: 1px solid #0088d2; */
        /* -webkit-border-radius: 10px; */
        -moz-border-radius: 10px;
        /* border-radius: 10px; */
        /* -webkit-box-shadow: 2px 4px 7px 0px rgba(0, 0, 0, 0.21); */
        -moz-box-shadow: 2px 4px 7px 0px rgba(0, 0, 0, 0.21);
        /* box-shadow: 2px 4px 7px 0px rgba(0, 0, 0, 0.21); */
    }
    .comp__articlelisting_1hero-3small .tab .active {
        width: 100%;
        /* height: 42px; */
        /* background: #fff; */
        white-space: nowrap;
        border-bottom: 3px solid #ffd800;
        text-align: center;
        margin-top: 0;
        padding: 5px 15px 0px 15px;
        color: #fff;
    }
    .comp__articlelisting_1hero-3small .tab .active a {
        color: #171717;
        padding: 0 10px 10px 10px;
        font-size: 16px;
    }
    .comp__articlelisting_1hero-3small .tab .normal {
        width: 100%;
        height: auto;
        display: inline-block;
        text-align: center;
        /* margin-top: 7px; */
        color: #3e677c;
        padding: 5px 0px 1px 15px;
        /* letter-spacing: 1px; */
    }
}

@media (min-width: 413px) and (max-width: 414px) {
    .comp__articlelisting_1hero-3small .tab {
        font: 14px / 44px 'kanit', Arial, sans-serif;
        color: #0d0d0d;
        margin-bottom: -1px;
        /* padding: 2px 10px; */
        /* background: #41addd; */
        /* border: 1px solid #0088d2; */
        /* -webkit-border-radius: 10px; */
        -moz-border-radius: 10px;
        /* border-radius: 10px; */
        /* -webkit-box-shadow: 2px 4px 7px 0px rgba(0, 0, 0, 0.21); */
        -moz-box-shadow: 2px 4px 7px 0px rgba(0, 0, 0, 0.21);
        /* box-shadow: 2px 4px 7px 0px rgba(0, 0, 0, 0.21); */
    }
    .comp__articlelisting_1hero-3small .tab .active {
        width: 100%;
        /* height: 42px; */
        /* background: #fff; */
        white-space: nowrap;
        border-bottom: 3px solid #ffd800;
        text-align: center;
        margin-top: 0;
        padding: 5px 15px 0px 15px;
        color: #fff;
    }
    .comp__articlelisting_1hero-3small .tab .active a {
        color: #171717;
        padding: 0 10px 10px 10px;
        font-size: 16px;
    }
    .comp__articlelisting_1hero-3small .tab .normal {
        width: 100%;
        height: auto;
        display: inline-block;
        text-align: center;
        /* margin-top: 7px; */
        color: #3e677c;
        padding: 5px 0px 1px 15px;
        /* letter-spacing: 1px; */
    }
}

@media (min-width: 420px) and (max-width: 575px) {
    .comp__articlelisting_1hero-3small .tab {
        font: 14px / 44px 'kanit', Arial, sans-serif;
        color: #0d0d0d;
        margin-bottom: -1px;
        /* padding: 2px 10px; */
        /* background: #41addd; */
        /* border: 1px solid #0088d2; */
        /* -webkit-border-radius: 10px; */
        -moz-border-radius: 10px;
        /* border-radius: 10px; */
        /* -webkit-box-shadow: 2px 4px 7px 0px rgba(0, 0, 0, 0.21); */
        -moz-box-shadow: 2px 4px 7px 0px rgba(0, 0, 0, 0.21);
        /* box-shadow: 2px 4px 7px 0px rgba(0, 0, 0, 0.21); */
    }
    .comp__articlelisting_1hero-3small .tab .active {
        width: 100%;
        /* height: 42px; */
        /* background: #fff; */
        white-space: nowrap;
        border-bottom: 3px solid #ffd800;
        text-align: center;
        margin-top: 0;
        padding: 5px 15px 0px 15px;
        color: #fff;
    }
    .comp__articlelisting_1hero-3small .tab .active a {
        color: #171717;
        padding: 0 10px 10px 10px;
        font-size: 16px;
    }
    .comp__articlelisting_1hero-3small .tab .normal {
        width: 100%;
        height: auto;
        display: inline-block;
        text-align: center;
        /* margin-top: 7px; */
        color: #3e677c;
        padding: 5px 0px 1px 15px;
        /* letter-spacing: 1px; */
    }
}

@media (min-width: 768px) and (max-width: 991px) {
    ...
}

@media (min-width: 819px) and (max-width: 820px) {
    ...
}

@media (min-width: 992px) and (max-width: 1199px) {
    ...
}

@media (min-width: 1281px) and (max-width: 1366px) {
    ...
}

@media (min-width: 1367px) and (max-width: 1440px) {
    ...
}

@media (min-width: 1441px) and (max-width: 1600px) {
    ...
}

@media (min-width: 1601px) and (max-width: 1920px) {
    ...
}