/* --- Style Last Update - 30 APR 2026 14:00 --- */

:root {
    --font-family-primary: "Noto Sans Thai", sans-serif;
    --font-family-stack: -apple-system, system-ui, blinkmacsystemfont, "Segoe UI", roboto, "Helvetica Neue", sans-serif;
    --color-primary-fit-green-dark: #1C4863;
    --color-secondary-gfca-green-dark: #113247;
    --color-white: #ffffff;

    --border-radius-section-lg: 20rem;
    --border-radius-section-md: 15rem;
    --border-radius-section-sm: 0rem;
    --border-radius-section-xs: 0rem;

    --fixed-screen-container: 1080px;
    --fixed-screen-container-md: 720px;

    --header-hight-size: 108px;
    --header-hight-size-down: 11px;

    --color-txt-green-teal: #00bcd4;
    --color-txt-primary: #212529;
    --color-txt-primary-deep-teal: #013B51;

    --color-btn-txt-white: #ffffff;
    --color-btn-txt-white--hover: #ffffff;
    --color-btn-txt-white--active: #ffffffbe;

    --color-btn-txt-dark-blue-grey: #175263;

    --color-btn-txt-black: #333333;
    --color-btn-txt-black--hover: #383838;

    --color-btn-txt-black-secondary: #454545;

    --color-btn-bg-green-dark: #003B4E;
    --color-btn-bglinear-gradient-green-dark: linear-gradient(296deg, rgba(0, 59, 78, 1) 0%, rgba(0, 102, 132, 1) 65%);

    --color-btn-bg-green-dark--hover: #003B4E;
    --color-btn-bglinear-gradient-green-dark--hover: linear-gradient(296deg, rgb(0, 117, 153) 0%, rgb(0, 117, 153) 65%);
    --color-btn-bglinear-gradient-green-dark--active: linear-gradient(296deg, rgba(0, 59, 78, 1) 0%, rgba(0, 59, 78, 1) 65%);

    --color-btn-bg-green-light: #7AB32C;
    --color-btn-bglinear-gradient-green-light: linear-gradient(296deg, rgba(122, 179, 44, 1) 0%, rgba(141, 198, 63, 1) 65%);

    --color-btn-bg-green-light--hover: #7AB32C;
    --color-btn-bglinear-gradient-green-light--active: linear-gradient(296deg, rgba(141, 198, 63, 1) 0%, rgba(141, 198, 63, 1) 65%);

    --color-btn-bg-blue: #0d6682;
    --color-btn-bg-blue--hover: #0a5369;
    --color-btn-bg-blue--active: #083f51;

    --color-btn-bg-green-teal-light: #def3f9;
    --color-btn-bg-green-teal-light--hover: #cee9f0;
    --color-btn-bg-green-teal-light--active: #cee9f0;

    --bg-color-section-dark-main: #006684;
    --bg-color-section-dark: linear-gradient(342deg, rgba(0, 102, 132, 1) 0%, rgba(0, 61, 81, 1) 66%, rgba(0, 48, 64, 1) 100%);

    --bg-color-section-light-main: #edf2f5;
    --bg-color-section-light: linear-gradient(to bottom, #f8fcff 0%, #f4f7f9 45%, #1e4a632e 100%);

    --bg-color-section-light-green-main: #edf2f5;
    --bg-color-section-light-green: linear-gradient(to bottom, #edf2f5 0%, #f4f7f9 45%, #8cc63f 100%);

    --color-btn-bg-gray-light: #edeff3;
    --color-btn-bg-gray-light--hover: #dfe3ea;
    --color-btn-bg-gray-light--active: #cfd5de;

    --color-loading-primary: var(--color-btn-bg-blue);
    --color-loading-secondary: var(--color-btn-bg-blue--active);

    --shadow-flat-btn-bg-default: #d5dbde 0px 2px 0px 0px;
    --shadow-flat-btn-bg-default--hover: #e0e5e8 0px 2px 0px 0px;

    --btn-transition-delay: all 0.3s ease-in-out;

    --color-border-card: 1px solid #e1e8ed;
    --bx-shadow-card: 0 4px 6px rgba(0, 0, 0, 0.07);
    --bx-shadow-card--hover: -1px 27px 38px 20px rgb(0 0 0 / 0%), 0px 10px 22px 5px rgb(0 0 0 / 10%);

    --border-radius-btn-fit: 8px;
    --border-radius-modal-gfca: 8px;

    --padding-btn-primary-md: 8px 12px;

    --padding-btn-gfca: 8px 16px;

    --padding-x-screen: 1.2rem;

    --cover-image-second-page-size: 100px;
    --cover-image-second-page-size-sm: 140px;
}

body {
    font-family: var(--font-family-primary);
    font-weight: 400;
}

p {
    font-family: var(--font-family-primary);
}

.container-screen-width {
    max-width: var(--fixed-screen-container);
}

@media screen and (max-width: 576px) {
    .container-screen-width {
        padding: 0 var(--padding-x-screen);
    }
}

.form-select-footer-contact,
.form-control-footer-contact {
    color: #ffffff !important;
    background: rgb(0 0 0 / 22%);
    backdrop-filter: blur(8px);
    border: 1px solid #00000017;
}

.form-control-footer-contact:focus,
.form-select-footer-contact:focus {
    color: #ffffff;
    background-color: #1e3b4e;
    border-color: #ffffff;
    outline: 0;
    box-shadow: 0 0 0 .25rem rgb(255 255 255 / 22%);
}

.form-control-footer-contact::placeholder {
    color: #ffffff !important;
}

.btn-primary-fit {
    background: var(--color-btn-bg-green-dark) !important;
    background: var(--color-btn-bglinear-gradient-green-dark) !important;
    color: var(--color-btn-txt-white) !important;
    border-radius: var(--border-radius-btn-fit) !important;
    padding: var(--padding-btn-primary-md);
    transition: var(--btn-transition-delay);
    border: none !important;
    display: flex;
    align-items: center;
    justify-content: center;
}

.btn-primary-fit:hover {
    background: var(--color-btn-bg-green-dark--hover) !important;
    background: var(--color-btn-bglinear-gradient-green-dark--hover) !important;
    color: var(--color-btn-txt-white--hover) !important;
    border: none !important;
}

.btn-primary-fit:focus,
.btn-primary-fit:focus-visible {
    background: var(--color-btn-bg-green-dark) !important;
    background: var(--color-btn-bglinear-gradient-green-dark--active) !important;
    color: var(--color-btn-txt-white--hover) !important;
    border: none !important;
}

.btn-primary-fit:active {
    background: var(--color-btn-bg-green-dark) !important;
    background: var(--color-btn-bglinear-gradient-green-dark--active) !important;
    color: var(--color-btn-txt-white--active) !important;
    border: none !important;
}

.btn-primary-fit-blue {
    background: var(--color-btn-bg-blue) !important;
    color: var(--color-btn-txt-white) !important;
    border-radius: var(--border-radius-btn-fit) !important;
    transition: var(--btn-transition-delay);
    border: none !important;
}

.btn-primary-fit-blue:hover {
    background: var(--color-btn-bg-blue--hover) !important;
    color: var(--color-btn-txt-white--hover) !important;
    border: none !important;
}

.btn-primary-fit-blue:focus,
.btn-primary-fit-blue:focus-visible {
    background: var(--color-btn-bg-blue--hover) !important;
    color: var(--color-btn-txt-white--hover) !important;
    border: none !important;
}

.btn-primary-fit-blue:active {
    background: var(--color-btn-bg-blue--active) !important;
    color: var(--color-btn-txt-white--hover) !important;
    border: none !important;
}

.btn-secondary-fit {
    background: var(--color-btn-bg-green-light) !important;
    background: var(--color-btn-bglinear-gradient-green-light) !important;
    color: var(--color-btn-txt-white) !important;
    padding: var(--padding-btn-primary-md);
    border-radius: var(--border-radius-btn-fit) !important;
    transition: var(--btn-transition-delay);
    border: none !important;
    display: flex;
    align-items: center;
    justify-content: center;
}

.btn-light-black {
    display: inline-block;
    text-decoration: none;
    padding: 6px 20px 6px 10px;
    border-radius: var(--border-radius-btn-fit);
    color: var(--color-btn-bg-blue);
    background-color: var(--color-btn-bg-blue);
    transition: all .1s ease-in-out;
    box-shadow: #0000001a 0 2px 3px -1px;

    &>i {
        position: relative;
        top: 3px;
        font-size: 22px;
        display: inline-block;
        line-height: 0;
    }
}

.btn-light-black:hover,
.btn-light-black:active,
.btn-light-black:focus {
    color: var(--color-btn-bg-blue--hover);
    background-color: var(--color-btn-bg-blue-light--hover);
    box-shadow: #0000003c 0 2px 3px -1px;
}

.btn .area-icon {
    position: relative;
    display: flex;
    width: 20px;
    height: 20px;
    align-items: center;
    justify-content: center;
}

.btn .area-icon .bi-arrow-right-short {
    position: absolute;
    font-size: 22px;
    transform: translate(4px, 1px);
}

.btn .area-icon .bi-check2-square {
    position: absolute;
    font-size: 18px;
    transform: translate(4px, 1px);
}

.block-btn-readmore {
    display: flex;
    justify-content: flex-end;
    overflow: hidden;

    & .btn-light-readmore {
        display: inline-block;
        text-decoration: none;
        color: var(--color-txt-green-teal);
        transition: all .3s ease-in-out;
        font-weight: 500;
        font-size: 14px;
        position: relative;
        bottom: -25px;
        text-transform: capitalize;

        &>i {
            position: relative;
            top: 3px;
            left: -3px;
            font-size: 22px;
            display: inline-block;
            line-height: 0;
        }
    }

    & .btn-light-readmore:hover {
        color: var(--color-txt-green-teal);
    }
}

.text-title-section {
    font-size: 2.4rem;
    font-weight: 600;
    color: var(--color-btn-txt-dark-blue-grey);
}

@media screen and (max-width:576px) {
    .text-title-section {
        font-size: 1.6rem;
    }
}

.custom-tooltip {
    --bs-tooltip-bg: var(--color-btn-txt-dark-blue-grey);
    --bs-tooltip-color: var(--color-btn-txt-white);
    font-size: 12px;
}

.no-scroll {
    overflow: hidden;
}

body.modal-open {
    overflow: hidden;
}

.section-main-content {
    position: relative;
    margin: var(--header-hight-size) 0 0 0;
    min-height: 600px;
}

@media screen and (max-width:576px) {
    .section-main-content {
        margin: calc(var(--header-hight-size) - var(--header-hight-size-down)) 0 0 0 !important;
        min-height: 600px;
    }
}

/* ----------------------------------------- Sweetalert2 */

.fit-swal-popup {
    width: 420px !important;
    padding: 2em;
    border-radius: 10px !important;
}

.fit-swal-title {
    margin: 0;
    padding: .8em 0 0;
    color: #212529;
    font-size: 22px;
    font-weight: 500;
}

.fit-swal-btn {
    border-radius: 8px !important;
    background: var(--color-btn-bglinear-gradient-green-dark) !important;
    min-width: 7rem;
}

.swal2-icon.swal2-warning {
    border-color: #d6d6d6 !important;
    color: #d6d6d6 !important;
}

.swal2-styled.swal2-confirm:focus,
.swal2-styled.swal2-default-outline:focus {
    box-shadow: 0 0 0 3px rgb(255 255 255 / 0%) !important;
}

/* ----------------------------------------- START : Modal Sandbox */

.modal-body-sandbox {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.form-control:focus {
    border-color: #e1ebee !important;
    box-shadow: 0 0 0 .25rem rgb(242 246 249) !important;
}

/* ----------------------------------------- START : Modern Toggle */

.modern-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    user-select: none;
    padding: 0 0 0 0;
    transition: background 0.2s ease;
}

.modern-toggle:hover {
    background: #f8fafc;
}

.modern-toggle .toggle-switch {
    position: relative;
    display: inline-block;
    width: 52px;
    height: 28px;
    background: #cbd5e0;
    border-radius: 14px;
    transition: all 0.3s ease;
}

.modern-toggle .toggle-switch::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 24px;
    height: 24px;
    background: white;
    border-radius: 50%;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

input[type="checkbox"]:checked+.modern-toggle .toggle-switch {
    background: #5CD168;
}

input[type="checkbox"]:checked+.modern-toggle .toggle-switch::after {
    left: 26px;
}

/* ----------------------------------------- START :  hamburger menu */

.hamburger {
    display: none;
    flex-direction: column;
    justify-content: space-between;
    width: 28px;
    height: 20px;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
    z-index: 1001;
    transition: all 0.3s ease;
    margin: 12px 0;
}

.hamburger-line {
    width: 100%;
    height: 2px;
    background: #214c66;
    transition: all 0.3s ease;
    opacity: 1;
}

.hamburger.active .hamburger-line:nth-child(1) {
    transform: translateY(8px) rotate(45deg);
}

.hamburger.active .hamburger-line:nth-child(2) {
    opacity: 0;
}

.hamburger.active .hamburger-line:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg);
}

@media (max-width: 991px) {

    .hamburger.active .hamburger-line {
        background: #8ea0ab;
    }

    .hamburger {
        display: flex;
    }

    .hamburger.active .hamburger-line:nth-child(1) {
        transform: translateY(8px) rotate(45deg);
    }

    .hamburger.active .hamburger-line:nth-child(3) {
        transform: translateY(-10px) rotate(-45deg);
    }

}

@media (max-width: 576px) {

    .hamburger.active .hamburger-line {
        background: #8ea0ab;
    }

    .hamburger {
        width: 28px;
        height: 17px;
    }

    .hamburger.active .hamburger-line:nth-child(1) {
        transform: translateY(7px) rotate(45deg);
    }

    .hamburger.active .hamburger-line:nth-child(3) {
        transform: translateY(-8px) rotate(-45deg);
    }
}


/* ----------------------------------------- START : Main Page Site */

.main-cover-page {
    min-height: var(--cover-image-second-page-size);
    position: relative;
    width: 100%;
    opacity: 1;
    transition: all .3s ease;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    /* background-position-y: -16rem; */
    background: linear-gradient(to right, #eef3f6 0%, #e7eff2 50%, #6fa3b3 100%);
    align-items: center;
    align-content: center;
    overflow: hidden;
    z-index: 10;
}


/* .main-cover-page::before {
    content: "";
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    opacity: .93;
    z-index: 0;
} */


.warpper-content-area {
    position: relative;
    padding-top: 0;
    background: #f8fcff;
}

.active-sticky-bg.warpper-content-area {
    padding-top: 140px;
}

@media screen and (max-width: 576px) {
    .warpper-content-area {
        /* padding: 0 1rem; */
    }
}

.text-title-page {
    /* position: fixed; */
    left: 0;
    right: 0;
    top: 8rem;
    margin: 0 auto;
    font-size: 2.2rem;
    font-weight: 600;
    color: var(--color-txt-primary-deep-teal);
    /* text-transform: uppercase; */
    transition: all 0.3s ease;
    max-width: 1080px;
    z-index: 1;
    padding: 0 1rem;
    text-align: left;
    display: grid;
    grid-template-columns: 1fr auto;

    & .area-content-left {
        position: relative;
        z-index: 1;

        & .btn-left-title {
            text-decoration: none;
            color: #d6e8ee;
            font-size: 34px;
            margin-right: 8px;
            transition: all .3s ease;
            cursor: pointer;
            line-height: 0;
        }

        & .btn-left-title:hover {
            color: #def1f7;
            text-shadow: #00000023 0 2px 5px;
        }

    }

    & .area-content-right {
        position: relative;
        display: flex;
        justify-content: flex-end;
        z-index: 4;
    }
}

@media screen and (max-width: 576px) {
    .text-title-page {
        top: 4.3rem;

        & .area-content-left {
            font-size: 1.6rem;

            & .btn-left-title {
                font-size: 30px;
                position: relative;
                top: 2px;
            }
        }

        & .area-content-right {}
    }

}

.container-content-area {
    position: relative;
    padding: 1.6rem 1rem;
    transition: all .2s ease;
    min-height: 500px;
}


@media screen and (max-width: 576px) {

    .main-cover-page {
        min-height: 60px
    }

}

/* ----------------------------------------- START : Slide Banner home page */

.container-content-banner {
    min-height: 500px;
    display: grid;
    align-items: center;
    grid-template-columns: 1fr 1fr;
}

.container-content-banner .block-content-start,
.container-content-banner .block-content-end {
    display: flex;
    flex-direction: column;
    row-gap: 1rem;
}

.container-content-banner .block-content-start .text-big,
.container-content-banner .block-content-end .text-big {
    font-size: 3rem;
    font-weight: 600;
    line-height: 1.4;
}

.container-content-banner .block-content-start .text-big .text-color-green,
.container-content-banner .block-content-end .text-big .text-color-green {
    color: #37ba13;
}

.container-content-banner .block-content-start .text-big .text-color-white,
.container-content-banner .block-content-end .text-big .text-color-white {
    color: #FFFFFF;
}

.container-content-banner .decor-ball-banner::before {
    content: "";
    position: absolute;
    z-index: -1;
    background-image: url('<?= $imagesPath ?>/website/decor-ball-greenlight-fade.svg');
    background-size: 100%;
    --size-ball-square-greendark: 420px;
    transform: translate(-173px, -247px);
    width: var(--size-ball-square-greendark);
    height: var(--size-ball-square-greendark);
}

.container-content-banner .decor-ball-banner::after {
    content: "";
    position: absolute;
    z-index: -1;
    background-image: url('<?= $imagesPath ?>/website/decor-ball-greendark-fade.svg');
    background-size: 100%;
    --size-ball-square-greenlight: 320px;
    transform: translate(45px, -8px);
    width: var(--size-ball-square-greenlight);
    height: var(--size-ball-square-greenlight);
}


/* ----------------------------------------- START : Cookie Theme */

.cookie-bar {
    font-family: 'Noto Sans Thai' !important;
    padding: 2rem 1rem !important;
    background: linear-gradient(145deg, #e4f5fa -34%, #ffffff 67%) !important;
    z-index: 1000 !important;
    border: none !important;
    box-shadow: #0000001a 0 -1px 1px !important;

    &>.cookie-bar-content {
        position: relative;
        max-width: 1080px;

        &>span {
            color: var(--color-txt-primary-deep-teal);

            &>a {
                color: var(--color-txt-primary-deep-teal);
            }

            &>a:hover {
                color: var(--color-btn-bg-blue--hover);
            }
        }

        & .cookie-bar-controls {
            gap: 1rem;

            &>#acceptAll {
                background: var(--color-btn-bglinear-gradient-green-light);
                color: var(--color-btn-txt-white);
                padding: 8px 18px;
                transition: var(--btn-transition-delay);
                box-shadow: var(--shadow-flat-btn-bg-default);
            }

            &>#rejectAll {
                background: var(--color-btn-bg-gray-light);
                color: var(--color-txt-primary-deep-teal);
                padding: 8px 18px;
                transition: var(--btn-transition-delay);
                box-shadow: var(--shadow-flat-btn-bg-default);
            }

            &>#openSettings {
                background: none !important;
                color: var(--color-txt-primary-deep-teal);
                padding: 8px 18px;
                transition: var(--btn-transition-delay);
                box-shadow: none !important;
                margin-left: 10px;
            }

            &>#acceptAll:hover {
                background: var(--color-btn-bglinear-gradient-green-light--active);
                box-shadow: var(--shadow-flat-btn-bg-default--hover);
            }

            &>#acceptAll:active {
                background: var(--color-btn-bglinear-gradient-green-light--active);
                box-shadow: var(--shadow-flat-btn-bg-default--hover);
            }

            &>#rejectAll:hover {
                background: var(--color-btn-bg-gray-light--hover);
                box-shadow: var(--shadow-flat-btn-bg-default--hover);
            }

            &>#rejectAll:active {
                background: var(--color-btn-bg-gray-light--active);
                box-shadow: var(--shadow-flat-btn-bg-default--hover);
            }

            &>#openSettings:hover {
                color: var(--color-btn-bg-blue--hover);
                background: none !important;
                box-shadow: none !important;
            }

            &>#openSettings:active {
                color: var(--color-btn-bg-blue--active);
                background: none !important;
                box-shadow: none !important;
            }

            &>#openSettings:focus {
                color: var(--color-btn-bg-blue--active);
                background: none !important;
                box-shadow: none !important;
            }

            &>#openSettings:focus-visible {
                color: var(--color-btn-bg-blue--active);
                background: none !important;
                box-shadow: none !important;
            }

            &>#openSettings:focus-within {
                color: var(--color-btn-bg-blue--active);
                background: none !important;
                box-shadow: none !important;
            }

            &>#openSettings::before {
                content: "";
                position: absolute;
                height: 35px;
                width: 1px;
                background-color: #00000027;
                margin-left: -20px;
                margin-top: -6px;
            }

        }
    }

}

.cookie-bar::before {
    content: "";
    position: absolute;
    background-size: 100%;
    height: 133px;
    width: 389px;
    background-position: center center;
    background-repeat: no-repeat;
    bottom: 0;
    left: 61%;
}

@media screen and (max-width: 1600px) {
    .cookie-bar::before {
        left: 60%;
    }
}

@media screen and (max-width: 1400px) {
    .cookie-bar::before {
        left: 63%;
    }
}

@media screen and (max-width: 1200px) {
    .cookie-bar::before {
        left: 60%;
    }
}

@media screen and (max-width: 991px) {
    .cookie-bar::before {
        left: 60%;
    }
}

@media screen and (max-width: 768px) {
    .cookie-bar::before {
        left: 55%;
    }
}

@media screen and (max-width: 768px) {
    .cookie-bar::before {
        content: none !important;
    }
}



@media screen and (max-width: 576px) {
    .cookie-bar {
        padding: 2rem 1.2rem 1.2rem 1.2rem !important;

        & .cookie-bar-content {
            & .cookie-bar-controls {
                display: grid !important;
                grid-template-columns: 1fr 1fr;
                grid-template-rows: 1fr 1fr;
                grid-template-areas:
                    "acceptAll rejectAll"
                    "openSettings openSettings";
                gap: .8rem;
                row-gap: 1.6rem;
                /* align-items: end; */
            }

            #acceptAll {
                grid-area: acceptAll;
            }

            #rejectAll {
                grid-area: rejectAll;
            }

            #openSettings {
                grid-area: openSettings;
            }

            & .cookie-bar-controls>button {
                width: 100%;
            }

            & .cookie-bar-controls>button#openSettings {
                right: 0 !important;
                margin-left: 0 !important;
            }

            & .cookie-bar-controls>button#openSettings::before {
                content: none !important;
            }
        }
    }
}


#cookieFloatingBtn {
    visibility: hidden;
    display: none;
}

/* Hide default checkbox */

.cookie-setting-item {
    &>input[type="checkbox"] {
        display: none;
    }
}

.cookie-settings-modal {
    font-family: 'Noto Sans Thai' !important;
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto auto;
    max-width: 500px;
    max-height: max-content;
    border-radius: 12px !important;
    /* padding: 1.6rem 1.2rem !important; */
    padding: 2rem 1.8rem !important;

    & .cookie-settings-content {
        & #cookieSettingsTitle {
            font-weight: 600;
            margin-bottom: 12px;
        }

        & #cookieSettingsMain {
            & .cookie-setting-item {
                & label {
                    display: flex;
                    align-items: center;
                    background-color: #ffffff;
                    margin: 0 !important;

                    & .label-text {
                        font-weight: 500;
                    }

                    & .toggle-switch {
                        top: -4px;
                    }
                }

                & .cookie-description {
                    padding: 0;
                    margin: 0 !important;

                    & a {
                        color: var(--color-txt-green-teal) !important;
                    }
                }
            }

            .cookie-bar-controls {
                display: grid;
                grid-template-columns: 125px 125px;
                /* justify-content: end; */
                margin-top: 1.2rem;

                & #saveSettings {
                    background: var(--color-btn-bglinear-gradient-green-light);
                    color: var(--color-btn-txt-white);
                    padding: 8px 18px;
                    transition: var(--btn-transition-delay);
                    box-shadow: var(--shadow-flat-btn-bg-default);
                }

                & #closeSettings {
                    background: var(--color-btn-bg-gray-light);
                    color: var(--color-btn-txt-black);
                    padding: 8px 18px;
                    transition: var(--btn-transition-delay);
                    box-shadow: var(--shadow-flat-btn-bg-default);
                }

                &>#saveSettings:hover {
                    background: var(--color-btn-bglinear-gradient-green-light--active);
                    box-shadow: var(--shadow-flat-btn-bg-default--hover);
                }

                &>#saveSettings:active {
                    background: var(--color-btn-bglinear-gradient-green-light--active);
                    box-shadow: var(--shadow-flat-btn-bg-default--hover);
                }

                &>#closeSettings:hover {
                    background: var(--color-btn-bg-gray-light--hover);
                    box-shadow: var(--shadow-flat-btn-bg-default--hover);
                }

                &>#closeSettings:active {
                    background: var(--color-btn-bg-gray-light--active);
                    box-shadow: var(--shadow-flat-btn-bg-default--hover);
                }
            }
        }

        & #cookieDetailDefault,
        #cookieDetailAnalytics,
        #cookieDetailMarketing {
            padding: 0 !important;
            width: auto;
            background-color: #ffffff !important;


            & .back-to-settings {
                background: var(--color-btn-bg-gray-light);
                box-shadow: var(--shadow-flat-btn-bg-default);
                color: var(--color-btn-txt-black);
                transition: var(--btn-transition-delay);
                margin-bottom: 0 !important;
            }

            &>.back-to-settings:hover {
                background: var(--color-btn-bg-gray-light--hover);
                color: var(--color-btn-txt-black--hover);
                box-shadow: var(--shadow-flat-btn-bg-default--hover);
            }

            &>.back-to-settings:active {
                background: var(--color-btn-bg-gray-light--active);
                box-shadow: var(--shadow-flat-btn-bg-default--hover);
            }


            & .cookie-detail-list {
                margin-bottom: 16px !important;
                font-size: 12px !important;
                color: #555;
                max-height: unset !important;
                overflow-x: unset !important;
                overflow-y: unset !important;
                -webkit-overflow-scrolling: unset !important;

                &>li {
                    word-break: break-all;
                    overflow-wrap: break-word;
                    display: grid;
                    grid-template-columns: auto 1fr;
                    column-gap: 8px;
                }
            }

            &>strong {
                font-weight: 500;
                margin-bottom: 8px;
                display: inline-block;
            }
        }

    }

}

@media screen and (max-width: 991px) {
    .cookie-settings-modal {
        margin: auto auto !important;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }
}

@media screen and (max-width: 576px) {
    .cookie-settings-modal {
        padding: 1.6rem 1.2rem !important;
        margin: auto 1rem !important;
        max-height: max-content !important;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }
}

/* ----------------------------------------- START : END : Header  */

.fit-header {
    position: fixed;
    z-index: 999;
    top: 0;
    width: 100%;
    background-color: var(--color-white);
    transition: all .3s ease;
    min-height: var(--header-hight-size);
    box-shadow: #0000001a 0 1px 1px;
}

.fit-header .logo-company {
    max-width: 45px;
    margin-left: 0rem;
    transition: all .3s ease;
    pointer-events: none;
}

.fit-header .tobhead-bar {
    background: #0e2b3f;
    background: linear-gradient(148deg, #224e68, #0e2c3f);
    color: #ffffffd6;
    height: 30px;
}

.fit-header .tobhead-bar .group-warpper-content {
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    height: 30px;
    align-items: center;
    padding: 0 1rem;
}

.fit-header .tobhead-bar .group-warpper-content .area-content-start .warper-text-company {
    font-size: 12px;
    font-weight: 500;
}

.fit-header .tobhead-bar .group-warpper-content .area-content-end {
    display: flex;
    justify-content: flex-end;
    gap: 1rem;
}

.fit-header .group-warpper-content .area-content-end .item-contact-topbar {
    display: flex;
    align-items: center;
}


.fit-header .area-content-end .item-contact-topbar .warpper-icon {
    width: 30px;
    height: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.fit-header .area-content-end .item-contact-topbar .warpper-icon i {
    font-size: 13px;
}

.fit-header .area-content-end .item-contact-topbar a {
    font-size: 12px;
    text-decoration: none;
    color: #ffffffd6;
}

@media screen and (max-width: 576px) {
    .fit-header .tobhead-bar .group-warpper-content {
        grid-template-columns: 1fr;
    }

    .fit-header .tobhead-bar .group-warpper-content .area-content-end {
        display: none;
    }
}


.fit-header .btn-lang-sm {
    display: none;
}

.fit-header .btn-lang-sm:hover {
    background-color: #f7f7f7;
}

@media screen and (max-width: 991px) {
    .fit-header .btn-lang-sm {
        display: block;
        padding: 0;
        border: none;
        font-size: 16px;
        font-weight: 600;
        color: #214c66;
        position: relative;
        transition: all .3s ease-in;
        border-radius: 4px;
        width: 45px;
    }

    .fit-header .btn-lang-sm .lang-text {
        top: 2px;
        position: relative;
    }
}


@media screen and (max-width: 576px) {
    .fit-header {
        min-height: calc(var(--header-hight-size) - var(--header-hight-size-down));
    }

    .fit-header .logo-company {
        max-width: 35px !important;
        position: relative;
        left: -1px;
    }
}

.fit-header.sticky-header-active {
    padding: 0rem;

    & .logo-company {
        max-width: 130px;
    }
}

@media screen and (max-width: 576px) {

    .fit-header::before {
        height: 60px;
    }

    .fit-header.sticky-header-active::before {
        height: 60px;
    }

    .fit-header::after {
        height: 60px;
    }

    .fit-header.sticky-header-active::after {
        height: 60px;
    }


    .fit-header.sticky-header-active {
        padding: 1rem 0;

        & .fit-navbar {
            margin-top: 1rem;
        }
    }
}

.fit-header.active-navbar .area-content-bottom {
    display: flex;
    margin-top: 1rem;
    justify-content: center;
    text-align: center;
}

.fit-header.active-navbar .navbar-collapse {
    overflow-y: auto;
    height: 100%;
}

.fit-header .area-content-bottom {
    display: none;
    transition: all .3s ease-in;
}

.fit-header .area-content-bottom .block-request-cta {
    height: unset !important;
}

.fit-header .area-content-bottom .block-request-cta .text-your-integrated {
    font-size: 1.6rem;
    font-weight: 600;
    color: #2d556d;
}

.fit-header .area-content-bottom .block-request-cta .text-ingredient-solutions {
    font-size: 1.6rem;
    font-weight: 600;
    color: #7eb731;
    margin-bottom: 1rem;
}

.fit-navbar {
    position: relative;
    transition: all .3s ease-in;
}

.fit-navbar .nav-link {
    color: #214c66;
    font-size: 16px;
    position: relative;
    text-transform: capitalize;
    font-weight: 500;
    transition: all .2s ease-in;
}

.fit-navbar .nav-link.active {
    color: #023b51;
    font-weight: 600;
    font-size: 16px;
    opacity: 1;
}

.fit-navbar .nav-link:hover {
    color: #006684;
    opacity: 1;
}

.fit-navbar .side-right {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 1rem;
}

.dropdown-menu-main .dropdown-item-list:hover {
    background-color: #006684;
    border-radius: 4px;
}

.dropdown-menu-main .dropdown-item-list::before {
    content: "";
    position: absolute;
    left: 4px;
    border-radius: 1px 1px 1px 1px;
    width: 3px;
    height: 28px;
    background: var(--color-btn-bg-blue);
}

@media screen and (max-width: 991px) {
    .navbar-nav-menu {
        padding-top: 1rem;
    }

    .navbar-nav-menu .nav-item-menu {
        border-bottom: solid 1px #ffffff2b;
        min-height: 1rem;
    }

    .navbar-nav-menu .nav-item-menu .nav-link {
        padding: 1rem 0;
        border-bottom: solid 1px #e9e9e9;
    }

    .nav-item-menu .nav-link {
        min-height: 3rem;
    }
}

@media screen and (max-width: 576px) {
    .navbar-nav-menu {
        padding-top: 1rem;
    }

    .navbar-nav-menu .nav-item-menu {
        border-bottom: solid 1px #ffffff2b;
        min-height: 1rem;
    }

    .navbar-nav-menu .nav-item-menu .nav-link {
        padding: 0;
        display: flex;
        align-items: center;
    }

    .nav-item-menu .nav-link {
        min-height: 3rem;
        transition: all .1s ease-in;
    }

    .nav-item-menu .nav-link:hover {
        min-height: 3rem;
    }

    .dropdown-menu-main .dropdown-item-list::before {
        content: "";
        position: absolute;
        left: 4px;
        border-radius: 1px 1px 1px 1px;
        width: 3px;
        height: 40px;
        background: var(--color-btn-bg-blue);
    }
}

.dropdown-menu-main {
    padding: 4px;
    box-shadow: #00000030 0px 8px 10px -5px;
    z-index: 99 !important;
    border-radius: 8px;
    background: #f8fcff;

    .dropdown-item-list {
        color: #454549;
        text-transform: uppercase;
        font-size: 14px;
        min-height: 35px;
        display: flex;
        align-items: center;
        z-index: 99 !important;
        position: relative;
    }

    .dropdown-item-list.active,
    .dropdown-item-list:active,
    .dropdown-item-list.focus,
    .dropdown-item-list:focus-within {
        color: #000000;
        font-weight: 600;
        text-decoration: none;
        background-color: #F4F4F5;
        border-radius: 4px;
    }
}

.dropdown-menu-main.show {
    position: absolute;
}

.fit-header.active-navbar::before {
    height: 100% !important;
    background: linear-gradient(rgb(34 77 105) 0%, rgb(34 77 105 / 77%) 0%, rgb(26 65 90 / 95%) 0%);
}

.fit-header.active-navbar::after {
    height: 100% !important;
}


.fit-header.active-navbar {
    height: 100%;
    /* background: linear-gradient(238deg, rgb(11 58 73) 0%, rgb(36 103 124)); */
    /* backdrop-filter: blur(20px); */
}



@media screen and (max-width:576px) {
    .dropdown-menu-main {
        width: 100%;
        padding: 1rem;

        .dropdown-item-list {
            min-height: 50px;
            padding: 0rem 1.2rem;
        }
    }
}


.btn-lang {
    color: #214c66;
    border-color: #cad4d9;
    border-radius: 5rem;
    font-size: 14px;
    display: flex;
    gap: 6px;
    position: relative;
    transition: all .3s ease-in;
    top: -1px;

    & .lang-icon {
        position: relative;
        top: 1px;
    }

    & .lang-text {
        position: relative;
        top: 1px;
    }
}


.btn-lang:hover,
.btn-lang:active {
    color: #006684 !important;
    border-color: #0065847e !important;
}

.modal-header-language {
    padding: 1rem 1.4rem;
    border-color: #ffffff;
}

.modal-footer-language {
    padding: .4rem 1.4rem;
    border-color: #ffffff;
}

.modal-content-language {
    border-radius: var(--border-radius-modal-gfca);
    border: none !important;
}

.modal-dialog-gfca {
    padding: 0 0.6rem;
}

.language-list .list-group-item {
    cursor: pointer;
    display: grid;
    grid-template-columns: 1fr 18px;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.4rem;
    transition: all .1s ease-in-out;
    margin: 0 1rem;
    border: none;
    color: #1f1f1f;
    font-weight: 600;
}

.language-list .list-group-item .check {
    width: 22px;
    height: 22px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #ffffff;
    border-radius: 50%;
    position: relative;
    transition: all .1s ease;
}

.language-list .list-group-item.active,
.language-list .list-group-item.hover {
    background-color: #f7f7f7;
    border: none;
    color: #2a2b2c;
    font-weight: 600;
    border-radius: var(--border-radius-modal-gfca);
    box-shadow: #818181 0 1px 3px -2px;
}

.language-list .list-group-item.active .check {
    color: #ffffff;
    background: #7fb831;
}

.language-list .list-group-item.active .check i {
    position: relative;
    top: 1px;
    font-size: 18px;
}

.modal-content {
    color: #212529;
    padding: 0.6rem .2rem;
}

@media (max-width: 991px) {
    .btn-lang {
        display: none;
    }
}


@media (max-width: 576px) {
    .btn-lang {
        /* right: 56px;
        top: 16px; */
    }
}

/* ----------------------------------------- Our Products */

/* ---------------------------------- Our Products */

.section_our-products .container-our-products {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 2rem;
    margin: .4rem 0;
}

.section_our-products .item-url-product {
    display: block;
    text-decoration: none;
    background: #fff;
    border-radius: 8px;
    box-shadow: #00000047 0 8px 33px -20px;
    transition: all .3s ease;
}

.section_our-products .item-url-product:hover {
    box-shadow: #000000c4 0 8px 33px -20px;
}

.section_our-products .item-url-product .item-card-content {
    position: relative;
    overflow: hidden;
    border-radius: 8px;
    aspect-ratio: 1 / 1;
}

.section_our-products .item-card-content::after {
    content: "";
    position: absolute;
    height: 210px;
    width: 100%;
    background: #0000002c;
    background: linear-gradient(167deg, rgb(0 0 0 / 42%) 0%, rgba(0, 0, 0, 0) 46%);
    transition: all .5s ease;
}

.section_our-products .item-card-content::before {
    content: "";
    position: absolute;
    height: 210px;
    width: 100%;
    background: #89c140;
    background: linear-gradient(20deg, rgb(137 193 64) 0%, rgba(0, 0, 0, 0) 41%);
    bottom: 0;
    z-index: 1;
}

.section_our-products .block-image-product .item-image-product {
    width: 400px;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    opacity: .9;
    transition: all .5s ease;
    position: absolute;
    top: -50%;
    left: -50%;
    transform: translate(50%, 50%);
}

.section_our-products .item-card-content .item-image-product {
    height: 100%;
    width: auto;
    scale: 1;
    position: absolute;
    z-index: 0;
    transition: all .5s ease;
    left: 50%;
    transform: translateX(-50%);
}

.section_our-products .item-url-product:hover .item-card-content .item-image-product {
    opacity: 1;
    scale: 1.1;
    transform: translateX(-45%) rotate(3deg);
}

.section_our-products .block-text-content {
    position: absolute;
    z-index: 1;
    padding: 1.8rem;
}

.section_our-products .block-text-content-bottom {
    position: absolute;
    z-index: 1;
    bottom: 1.4rem;
    left: 1.8rem;
}

.section_our-products .block-text-content-bottom .text-view-product {
    color: #fdfeff;
    font-weight: 600;
    font-size: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-shadow: #00000032 0px 1px 2px;
    text-transform: capitalize;
    transition: all .1s ease;
}

.section_our-products .item-url-product:hover .block-text-content-bottom .text-view-product {
    color: #ffffff;
    text-shadow: #00000019 0px 1px 2px;
}

.section_our-products .block-text-content .text-name-product {
    position: relative;
    font-size: 1.2rem;
    text-transform: capitalize;
    font-weight: 600;
    color: #fdfeff;
    line-height: 1.25;
}

.section_our-products .block-text-content-bottom .text-view-product .icon-arrow-right {
    position: relative;
    font-size: 20px;
    transform: translate(5px, 1.05px);
}

@media screen and (max-width: 992px) {
    .section_our-products .container-our-products {
        grid-template-columns: 1fr 1fr;
    }
}

@media screen and (max-width: 768px) {
    .section_our-products .container-our-products {
        grid-template-columns: 1fr 1fr;
    }
}

@media screen and (max-width: 576px) {
    .section_our-products .container-our-products {
        grid-template-columns: 1fr;
        gap: 1.6rem;
        margin: 0;
    }

    .section_our-products .block-text-content {
        margin-top: .6rem;
        padding: 1.2rem;
    }
}


/* ----------------------------------------- Product List */


.section_our-products_group .container-products-group .area-btn-back {
    display: flex;
    gap: 1rem;
    align-items: center;
    margin-bottom: 1rem;
}

.section_our-products_group .container-products-group .area-btn-back .text-name-product {
    font-size: 1.1rem;
    color: #356674;
    text-transform: capitalize;
    line-height: 1.25;
}

.section_our-products_group .container-products-group .area-btn-back .btn-back-left {
    position: relative;
    height: 40px;
    width: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.section_our-products_group .container-products-group .area-btn-back .btn-back-left .icon-black-left {
    position: absolute;
    font-size: 25px;
    top: 2.5px;
}

.section_our-products_group .area-content-product-group .warpper-product-group {
    min-height: 460px;
    background-color: #ffffff;
    border-radius: 8px;
    box-shadow: #00000047 0 8px 33px -20px;
    display: grid;
    grid-template-columns: 300px auto;
    gap: 2rem;
    margin-bottom: 1rem;
}

.section_our-products_group .warpper-product-group .block-content-left {
    padding: 2rem 0 2rem 2rem;
}

.section_our-products_group .warpper-product-group .block-content-left .group-image-item {
    position: relative;
    border-radius: 6px;
    border: solid 1px #f2f2f2;
    overflow: hidden;
    aspect-ratio: 1 / 1;
    display: flex;
    justify-content: center;
}

.section_our-products_group .warpper-product-group .block-content-left .group-image-item img {
    width: auto;
    height: 100%;
}

.section_our-products_group .warpper-product-group .block-content-right {
    padding: 2rem 2rem 2rem 0;
}

.section_our-products_group .warpper-product-group .block-content-right .text-name-product {
    font-size: 1.6rem;
    font-weight: 500;
    border-bottom: 2px solid #f2f2f2;
    padding-bottom: .8rem;
    line-height: 1.25;
}

.section_our-products_group .warpper-product-group .block-content-right .group-product-item .item-product {
    padding: .6rem .6rem;
    border-bottom: #eeeeee 1px solid;
    display: flex;
    gap: .6rem;
}

.section_our-products_group .warpper-product-group .block-content-right .group-product-item .item-product .block-icon-dot {
    position: relative;
    height: 24px;
    width: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.section_our-products_group .warpper-product-group .block-content-right .group-product-item .item-product .block-icon-dot i {
    position: absolute;
    color: #8dc53f;
    font-size: 27px;
}

.section_our-products_group .warpper-product-group .block-content-right .group-product-item .item-product:nth-last-child(1) {
    border-bottom: 0;
}

@media screen and (max-width: 768px) {
    .section_our-products_group .area-content-product-group .warpper-product-group {
        grid-template-columns: 200px auto;
    }
}

@media screen and (max-width: 576px) {
    .section_our-products_group .area-content-product-group .warpper-product-group {
        min-height: 300px;
        grid-template-columns: 1fr;
        gap: 1.2rem;
    }

    .section_our-products_group .warpper-product-group .block-content-left {
        padding: 0;
    }

    .section_our-products_group .container-products-group .area-btn-back {
        display: flex;
        gap: 1rem;
        align-items: center;
        margin-bottom: 1rem;
        margin-top: -10px;
    }

    .section_our-products_group .container-products-group .area-btn-back .text-name-product {
        font-size: 1.1rem;
    }

    .section_our-products_group .warpper-product-group .block-content-right {
        padding: 0 1.2rem;
        margin-bottom: 2rem;
    }

    .section_our-products_group .warpper-product-group .block-content-left .group-image-item {
        border-radius: 8px 8px 0 0;
        border-left: none;
        border-right: none;
        border-top: none;
        aspect-ratio: unset;
    }

    .section_our-products_group .warpper-product-group .block-content-right .group-product-item .item-product {
        padding: .6rem 0;
    }

    .section_our-products_group .warpper-product-group .block-content-right .text-name-product {
        font-size: 1.4rem;
    }
    .section_our-products_group .warpper-product-group .block-content-left .group-image-item img {
        width: 100%;
        height: auto;
    }

}



/* ----------------------------------------- START : Page New & Event */


.url-link-article {
    text-decoration: none !important;
    color: initial;
}

.item-article-content {
    /* margin-bottom: 1.6rem; */
    padding: 0 1rem;
    border: var(--color-border-card);
    border-radius: 8px;
    padding: 1rem 1rem 1.6rem 1rem;
    background: #ffffff;
    box-shadow: var(--bx-shadow-card);
    position: relative;
    overflow: hidden;
    transition: all .2s ease-in;

    & .group-card-image {
        aspect-ratio: 16 / 9;
        object-fit: cover;
        overflow: hidden;
        border-radius: var(--border-radius-btn-fit);
        background: #d6d6d6;
        pointer-events: none;

        & img {
            border-radius: 2px;
            transition: all .3s ease;
            opacity: 0.9;
        }

    }

    &>a:hover .group-card-image img {
        scale: 1.05;
    }


    .group-text-content {
        min-height: 3rem;

        .text-title {
            color: var(--color-btn-txt-black);
            overflow: hidden;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            line-clamp: 2;
            text-overflow: ellipsis;
            -webkit-box-orient: vertical;
            margin: 1rem 0 .6rem 0;
            min-height: 48px;

            .hyperlink-readmore {
                text-decoration: none;
                color: inherit;
            }
        }

        .text-description {
            overflow: hidden;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            line-clamp: 2;
            text-overflow: ellipsis;
            -webkit-box-orient: vertical;
            margin-bottom: .4rem;
        }

        .group-date-article {
            display: flex;
            align-items: center;
            gap: 1rem;
            /* margin-bottom: 1rem; */

            .item-date {
                display: flex;
                align-items: center;
                gap: .6rem;
                font-size: 12px;
                color: #2b323bad;

                & i {
                    font-size: 14px;
                    color: #1c4863;
                }
            }

            .item-view {
                display: flex;
                align-items: center;
                gap: .6rem;
                font-size: 12px;
                color: #2b323bad;

                & i {
                    font-size: 15px;
                    color: #1c4863;
                }
            }
        }

        & .group-left-right {
            display: grid;
            grid-template-columns: 1fr 1fr;
        }
    }
}

.item-article-content:hover {
    box-shadow: var(--bx-shadow-card--hover);
}

.item-article-content:hover .btn-light-readmore {
    bottom: 2px;
}

.item-article-content:hover .group-card-image img {
    scale: 1.05;
    opacity: 1;
}

.body-area-aticle {
    row-gap: 1.6rem;
}

@media screen and (max-width: 768px) {
    .item-article-content {
        .btn-light-readmore {
            bottom: unset;
        }
    }
}


@media screen and (max-width: 576px) {

    .item-article-content {
        padding: 1rem;
        min-height: max-content;
        /* margin-bottom: 2rem; */

        .btn-light-readmore {
            bottom: unset;
        }
    }

    .body-area-aticle {
        row-gap: 1rem;
    }
}

/* ----------------------------------------- START : Event Detail */

.item-article-content-detail {
    padding: 0 1rem 1rem 1rem;
    border-bottom: solid 2px #122e3f26;

    .group-card-image {
        aspect-ratio: 16 / 9;
        object-fit: cover;
        overflow: hidden;
        border-radius: var(--border-radius-btn-fit);
        box-shadow: #00000054 0px 7px 12px -9px;
        background: #d6d6d6;
        pointer-events: none;
        max-width: 900px;
        position: relative;
        left: 0;
        right: 0;
        margin: 2rem auto 2rem;

        &>img {
            border-radius: 2px;
        }
    }

    @media screen and (max-width: 576px) {
        .group-card-image {
            margin: 1rem auto 1rem;
        }
    }

    & .group-text-content {
        min-height: 3rem;

        & .text-title {
            font-size: 1.8rem;
            font-weight: 600;
            line-height: 1.2;
            margin: 0 0 0.4rem 0;

            & .hyperlink-readmore {
                text-decoration: none;
                color: inherit;
            }
        }

        @media screen and (max-width: 576px) {
            & .text-title {
                font-size: 1.4rem;
            }
        }

        .group-date-article {
            display: flex;
            align-items: center;
            gap: 1rem;
            margin-bottom: 1rem;

            .item-date {
                display: flex;
                align-items: center;
                gap: .6rem;
                font-size: 12px;
                color: #828282;

                & i {
                    font-size: 12px;
                    color: #1c4863;
                }
            }

            .item-view {
                display: flex;
                align-items: center;
                gap: .6rem;
                font-size: 12px;
                color: #828282;

                & i {
                    font-size: 12px;
                    color: #1c4863;
                }
            }
        }

        /* .block-btn-readmore {
            .btn-light-readmore {
                display: inline-block;
                text-decoration: none;
                padding: var(--padding-btn-gfca);
                border-radius: var(--border-radius-btn-fit);
                color: var(--color-btn-bg-blue);
                background-color: var(--color-btn-bg-blue-light);
                transition: all .1s ease-in-out;
                box-shadow: #0000001a 0 2px 3px -1px;

            }

            .btn-light-readmore:hover {
                color: var(--color-btn-bg-blue--hover);
                background-color: var(--color-btn-bg-blue-light--hover);
            }
        } */
    }

    .text-description {
        margin: 1rem 0;
    }
}

@media screen and (max-width: 576px) {

    .item-article-content-detail {
        padding: 0 0 .6rem 0;
    }
}


/* ----------------------------------------- START : Coming Soon */

.coming-soon-content {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 400px;

    & .text-comimg-soon {
        font-size: 3rem;
        color: #9f9f9f;
    }
}

/* ----------------------------------------- START : Thank you page */

.page-thankyou-content {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 400px;
    flex-direction: column;
    text-align: center;
    row-gap: 1rem;

    & .image-thankyou {
        max-width: 280px;

        & img {
            pointer-events: none;
        }
    }

    & .text-thankyou {
        font-size: 2.6rem;
        color: var(--color-txt-primary-deep-teal);
    }
}

@media screen and (max-width: 576px) {
    .page-thankyou-content {
        & .image-thankyou {
            max-width: 200px;
        }

        & .text-thankyou {
            font-size: 1.8rem;
        }
    }
}


/* -------------------------------- Section Main Footer */


.footer-content-area {
    min-height: 400px;
    overflow: hidden;
    position: relative;
    z-index: 10;
    background: #ffffff;
    box-shadow: #0000000a 0 -1px 1px;
}

.footer-content-area::before {
    content: "";
    position: absolute;
    z-index: -1;
    background-size: 100%;
    --size-ball-square-greendark-footer: 490px;
    right: -220px;
    bottom: -100px;
    width: var(--size-ball-square-greendark-footer);
    height: var(--size-ball-square-greendark-footer);
    opacity: .6;
}

.footer-content-area::after {
    content: "";
    position: absolute;
    z-index: -1;
    background-size: 100%;
    --size-ball-square-greenlight-footer: 294px;
    right: 109px;
    bottom: -5rem;
    width: var(--size-ball-square-greenlight-footer);
    height: var(--size-ball-square-greenlight-footer);
    opacity: .6;
}

.footer-content-area .footer-container-primary {
    min-height: 25rem;
    padding: 4rem 0 5rem 0;
}

.footer-content-area .footer-container-smallbar {
    font-size: 14px;
    height: 4rem;
    display: grid;
    align-items: center;
    background: #0e2b3f;
    background: linear-gradient(148deg, #224e68, #0e2c3f);
}

.footer-content-area .footer-container-smallbar .footer-warpper-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    opacity: .7;
}

.footer-content-area .footer-container-smallbar .block-content-left .item-text-copyright {
    color: #ffffff;
}

.footer-content-area .footer-container-smallbar .block-content-right {
    display: flex;
    justify-content: flex-end;
    column-gap: 2rem;
}

.footer-content-area .footer-container-smallbar .block-content-right .group-btn-policy {
    display: flex;
    column-gap: 1rem;
}

.footer-content-area .footer-container-smallbar .block-content-right .group-btn-policy .item-link {
    color: #fff;
}

.footer-content-area .footer-container-smallbar .block-content-right .group-btn-policy .item-link a {
    text-decoration: none;
    color: #fff;
}

.footer-content-area .footer-container-smallbar .block-content-right .group-btn-policy .item-link a:hover,
.footer-content-area .footer-container-smallbar .block-content-right .group-btn-policy .item-link a:focus,
.footer-content-area .footer-container-smallbar .block-content-right .group-btn-policy .item-link a:active {
    text-decoration: underline;
}

.footer-content-area .footer-container-smallbar .block-content-right .group-powered {
    display: flex;
    color: #fff;
    column-gap: 4px;
    position: relative;
}

.footer-content-area .footer-container-smallbar .block-content-right .group-powered .item-url-gfca {
    text-decoration: none;
    color: #fff;
    font-weight: 600;
}

.footer-content-area .footer-container-smallbar .block-content-right .group-powered .item-url-gfca:hover,
.footer-content-area .footer-container-smallbar .block-content-right .group-powered .item-url-gfca:focus,
.footer-content-area .footer-container-smallbar .block-content-right .group-powered .item-url-gfca:active {
    text-decoration: underline;
}

.footer-content-area .footer-container-smallbar .block-content-right .group-powered::before {
    content: "";
    position: absolute;
    height: 30px;
    width: 1px;
    background: #ffffff63;
    left: -16px;
    top: -5px;
}

.footer-content-area .block-name-company .group-detail-contact {
    display: grid;
    grid-template-columns: 1fr 1fr;
    row-gap: .6rem;
}

.footer-content-area .block-name-company .group-detail-contact .item-contact .icon-contact {
    width: 35px;
    height: 35px;
    border-radius: 10rem;
    background-color: #214c66;
    display: flex;
    align-items: center;
    justify-content: center;
}

.footer-content-area .block-name-company .group-detail-contact .item-contact .icon-fax img {
    max-width: ;
}

.footer-content-area .block-name-company .group-detail-contact .item-contact {
    display: grid;
    grid-template-columns: 3rem auto;
    align-items: center;
}

.footer-content-area .block-name-company .group-detail-contact .item-contact a {
    font-size: 14px;
    text-decoration: none;
    color: #212529;
}

.footer-content-area .block-name-company .group-detail-contact .item-contact i {
    color: #ffffff;
    font-size: 13px;
    position: relative;
    top: 1px;
}

.footer-content-area .footer-grid-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
        "block-logo-company block-request-cta"
        "block-name-company block-request-cta"
        "block-list-certificate block-request-cta";
    gap: 20px;
}


.footer-content-area .block-logo-company {
    grid-area: block-logo-company;
}

.footer-content-area .block-name-company {
    grid-area: block-name-company;
}

.footer-content-area .block-name-company .item-name-company {
    grid-area: block-name-company;
    font-size: 18px;
    font-weight: 600;
    color: #212529;
}

.footer-content-area .block-name-company .item-address-company {
    margin-bottom: 1rem;
}

.footer-content-area .block-list-certificate {
    grid-area: block-list-certificate;
}

.footer-content-area .block-request-cta {
    grid-area: block-request-cta;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.footer-content-area .block-list-certificate .group-certificate {
    display: flex;
    column-gap: 1rem;
}

.footer-content-area .block-list-certificate .group-certificate .item-certificate {
    display: flex;
    background: #ffffff;
    padding: 8px;
    border-radius: 2px;
    border: solid 1px #0000001d;
}

.footer-content-area .block-list-certificate .group-certificate .item-certificate img {
    max-height: 60px;
    width: 100%;
}

.footer-content-area .block-request-cta .text-your-integrated {
    font-size: 32px;
    font-weight: 600;
    color: #2d556d;
}

.footer-content-area .block-request-cta .text-ingredient-solutions {
    font-size: 32px;
    font-weight: 600;
    color: #7eb731;
    margin-bottom: 1rem;
}


@media screen and (max-width: 991px) {
    .footer-content-area .block-list-certificate .group-certificate {
        justify-content: center;
    }
}

@media screen and (max-width: 768px) {
    .footer-content-area .block-list-certificate .group-certificate {
        justify-content: center;
    }

    .footer-content-area .footer-grid-layout {
        grid-template-columns: 1fr;
        grid-template-areas:
            "block-logo-company"
            "block-name-company"
            "block-request-cta"
            "block-list-certificate";
    }
}

@media screen and (max-width: 576px) {
    .footer-content-area::before {
        --size-ball-square-greendark-footer: 450px;
        right: -16rem;
        bottom: -13rem;
        width: var(--size-ball-square-greendark-footer);
        height: var(--size-ball-square-greendark-footer);
        opacity: 1;
    }

    .footer-content-area::after {
        --size-ball-square-greenlight-footer: 200px;
        right: 6rem;
        bottom: -5rem;
        width: var(--size-ball-square-greenlight-footer);
        height: var(--size-ball-square-greenlight-footer);
        opacity: .6;
    }

    .footer-content-area .footer-container-primary {
        padding: 3rem 0;
    }

    .footer-content-area .block-name-company .group-detail-contact {
        grid-template-columns: 1fr;
        row-gap: .6rem;
    }

    .footer-content-area .block-request-cta {
        height: 206px;
    }

    .footer-content-area .block-list-certificate .group-certificate {
        justify-content: center;
    }

    .footer-content-area .footer-container-smallbar {
        font-size: 12px;
        height: 5rem;
        display: grid;
        align-items: center;
        background: #0e2b3f;
        background: linear-gradient(148deg, #224e68, #0e2c3f);
    }

    .footer-content-area .footer-container-smallbar .footer-warpper-content {
        display: flex;
        flex-direction: column-reverse;
        row-gap: .4rem;
    }

    .footer-content-area .footer-container-smallbar .block-content-right .group-powered {
        justify-content: flex-end;
    }


    .footer-content-area .footer-container-smallbar .block-content-right {
        display: grid;
        grid-template-columns: 1fr 120px;
        column-gap: 0;
    }

    .footer-content-area .footer-container-smallbar .block-content-right .group-powered::before {
        height: 18px;
        width: 1px;
        left: 6px;
        top: -1px;
    }

    .footer-content-area .footer-container-smallbar .block-content-left .item-text-copyright {
        color: #ffffff;
        font-size: 11px;
        opacity: .7;
    }

}

/* -------------------------------------------------- Recaptcha */

.grecaptcha-badge {
    display: none !important;
}

/* -------------------------------------------------- */


.btn-gf-gd {
    background: linear-gradient(135deg, #2ecc71, #27ae60);
    color: white;
    border: none;
    padding: 15px 40px;
    font-size: 18px;
    font-weight: 600;
    border-radius: 50px;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(46, 204, 113, 0.4);
    width: 100%;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.btn-gf-gd:hover:not(.disabled) {
    background: linear-gradient(135deg, #27ae60, #229954);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(46, 204, 113, 0.6);
}

.btn-gf-gd.disabled {
    background: linear-gradient(135deg, #95a5a6, #7f8c8d);
    cursor: not-allowed;
    box-shadow: none;
    opacity: 0.6;
}


/* ----------------------------------------- Home page */

.main_content {
    align-items: center;
    display: flex;
    justify-content: center;
}

/* ----------------------------------------- Why FIT page */


.section-home_why-fit .section-group-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    margin: 0 0 1.8rem 0;
    box-shadow: #00000047 0 8px 33px -20px;
    border-radius: 1rem;
    overflow: hidden;
}

.section-home_why-fit .section-group-content .area-content-start {
    background-color: #ffffff;
    padding: 2rem;
    font-size: 1.1rem;
    display: flex;
    align-items: center;
}

.section-home_why-fit .section-group-content .area-content-start.block-content-light {
    background-color: #e7eff2;
}

.section-home_why-fit .section-group-content .area-content-start.block-content-blue {
    background-color: #1c455d;
    color: #ffffffe4;
}

.section-home_why-fit .section-group-content .area-content-start.block-content-green {
    background-color: #89c13a;
    color: #ffffffe4;
}

.section-home_why-fit .section-group-content .item-content-image {
    overflow: hidden;
}


.section-home_why-fit .section-group-content .area-content-end .warpper-image {
    position: relative;
    display: block;
    background: #d4e3e8;
    min-height: 19rem;
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
    transition: all .5s ease;
}

.section-home_why-fit .section-group-content .item-content-image:hover .warpper-image {
    scale: 1.1;
    transform: rotate(3deg);
}

.section-home_why-fit .section-group-content .item-content-detail p {
    margin-bottom: 0;
}

@media screen and (max-width: 768px) {
    .section-home_why-fit .section-group-content .area-content-start {
        font-size: 1rem;
    }
}

@media screen and (max-width: 576px) {

    .section-home_why-fit .section-group-content {
        display: flex;
        flex-direction: column-reverse;
        margin: 0 0 1rem 0;
        box-shadow: none;
    }

    .section-home_why-fit .section-group-content .area-content-start {
        padding: 1.2rem 0;
        background-color: unset !important;
        color: #212529 !important;
    }

    .section-home_why-fit .section-group-content .area-content-end .warpper-image {
        border-radius: 1rem;
        min-height: 15rem;
    }

    .section-home_why-fit .section-group-content .item-content-image {
        border-radius: 1rem !important;
    }
}

/* ---------------------------------- About Us Page */

.section-content_about-us .cover-content-image {
    position: relative;
    background-size: 1100px;
    background-position: center -40px;
    background-repeat: no-repeat;
    min-height: 310px;
    border-radius: 1rem;
}

.section-content_about-us .cover-content-image .item-logo-company {
    position: absolute;
    bottom: -2rem;
    left: 4rem;
    border: solid 1px #e5e5e5;
    box-shadow: #00000047 0 8px 33px -20px;
    z-index: 2;
}

.section-content_about-us .cover-content-image .item-logo-company img {
    max-width: 115px;
}

.section-content_about-us .cover-content-image .item-ceo-company {
    visibility: hidden;
    position: absolute;
    right: 6rem;
    bottom: -3rem;
}

.section-content_about-us .cover-content-image .item-ceo-company img {
    max-width: 360px;
}

.section-content_about-us .content-about-company {
    padding: 3rem 4rem 1rem 4rem;
    position: relative;
    z-index: 1;
    min-height: 260px;
}

.section-content_about-us .content-about-company>p {
    position: relative;
    z-index: 1;
}

.section-content_about-us .content-about-company .text-name-company {
    font-size: 1.8rem;
    font-weight: 600;
    margin-bottom: .6rem;
    position: relative;
    z-index: 2;
}

.section-content_about-us .content-about-company::after {
    content: '';
    position: absolute;
    background-size: 100%;
    background-repeat: no-repeat;
    background-position: center 4rem;
    left: 0;
    z-index: 0;
    height: 100%;
    width: 100%;
    opacity: .4;
    top: 0;
}

.section-content_about-us .group-name-ceo {
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: center;
    bottom: 3rem;
    right: 0;
    transform: translate(3px, -23px);
}

.section-content_about-us .group-name-ceo .text-name {
    /* background: #183d54; */
    color: aliceblue;
    font-size: 22px;
    font-weight: 600;
    padding: 0rem 1rem;
    min-height: 30px;
    display: flex;
    align-items: center;
}

.section-content_about-us .group-name-ceo .text-position {
    background: #1c435b;
    color: #ffffff;
    padding: 0px 14px;
    min-height: 26px;
    font-size: 14px;
    display: flex;
    align-items: center;
    position: relative;
    top: 4px;
}

.section-content_about-us .content-about-certificate {
    margin-bottom: 4rem;
    padding: 0 4rem;
}

.section-content_about-us .area-groups-certificate {
    display: flex;
    position: relative;
    gap: 1rem;
    /* min-height: 7rem; */
    flex-direction: column;
    align-items: center;
}

.section-content_about-us .area-groups-certificate .group-area-end {
    display: flex;
    gap: 1.4rem;
}


.section-content_about-us .area-groups-certificate .group-area-end .item-certificate {
    background: #ffffff;
    padding: .4rem;
    display: flex;
    align-items: center;
    border: solid 1px #ececec;
}

.section-content_about-us .area-groups-certificate .group-area-end .item-certificate img {
    max-height: 70px;
    width: 100%;
}

.section-content_about-us .area-content-about .swiper_image-slide-aboutus {
    width: 100%;
    height: 100%;
}

.section-content_about-us .area-content-about .swiper_image-slide-aboutus .swiper-slide {
    text-align: center;
    font-size: 18px;
    background: #e2e2e2;
    display: flex;
    justify-content: center;
    align-items: center;
}

.section-content_about-us .area-content-about .swiper_image-slide-aboutus .swiper-slide img {
    display: block;
    width: 100%;
    height: 100%;
    max-height: 300px;
    object-fit: cover;
}

.section-content_about-us .area-content-about .swiper_image-slide-aboutus .swiper-wrapper {
    transition-timing-function: linear;
}

.section-content_about-us .area-content-about .content-slide-about {
    padding: 0 4rem 0 4rem;
    margin-bottom: 4rem;
}


@media screen and (max-width: 768px) {
    .section-content_about-us .cover-content-image .item-ceo-company {
        right: 3rem;
    }
}

@media screen and (max-width: 576px) {
    .section-content_about-us .cover-content-image {
        background-size: 100%;
        background-position: 0 -12px;
        min-height: 177px;
        margin: -.6rem 0 3rem 0;
    }

    .section-content_about-us .cover-content-image .item-logo-company {
        left: 50%;
        bottom: 50%;
        transform: translate(-50%, calc(50% + 4.5rem));
    }

    .section-content_about-us .cover-content-image .item-logo-company img {
        max-width: 90px;
    }

    .section-content_about-us .cover-content-image .item-ceo-company {
        right: 0;
        bottom: -2rem;
    }

    .section-content_about-us .cover-content-image .item-ceo-company img {
        max-width: 200px;
    }

    .section-content_about-us .content-about-company {
        padding: 0;
        min-height: 400px;
    }

    .section-content_about-us .group-name-ceo .text-name {
        font-size: 14px;
        font-weight: 600;
        padding: 0rem 1rem;
        min-height: 23px;
        text-shadow: #000000c4 0 1px 3px;
    }

    .section-content_about-us .group-name-ceo .text-position {
        padding: 0px 6px;
        min-height: 20px;
        font-size: 11px;
        top: 0px;
    }

    .section-content_about-us .group-name-ceo {
        bottom: 23px;
        right: 0;
        transform: translate(0, 0);
    }

    .section-content_about-us .content-about-company .text-name-company {
        font-size: 1.6rem;
        font-weight: 600;
        margin-bottom: 1rem;
        line-height: 1.25;
        text-align: center;
    }

    .section-content_about-us .area-groups-certificate .group-area-end {
        gap: .8rem;
    }

    .section-content_about-us .content-about-certificate {
        margin-bottom: 2rem;
        padding: 0;
    }

    .section-content_about-us .area-content-about .content-slide-about {
        padding: 0;
        margin-bottom: 2rem;
    }

    .section-content_about-us .content-about-company::after {
        background-size: 760px;
        background-position: right 15rem;
    }
}


/* -------------------------------- News & Activity Page */

.section-content_events .group-btn-fillter {
    display: flex;
    gap: .6rem;
    margin-bottom: 1.4rem;
    flex-wrap: wrap;
}

.section-content_events .group-btn-fillter .item-btn-fillter {
    background-color: #f2f2f6;
    color: #356674;
    border-radius: 8px;
    padding: 6px 12px 5px 12px;
    cursor: pointer;
    transition: all .1s ease;
    text-decoration: none;
    box-shadow: #0000001a 0 1px 1px;
    font-weight: 500;
    min-width: 3.6rem;
    text-align: center;
}

.section-content_events .group-btn-fillter .item-btn-fillter:hover {
    background-color: #dde5e8;
    color: #175263;
}

.section-content_events .group-btn-fillter .item-btn-fillter.active {
    background: var(--color-btn-bglinear-gradient-green-light) !important;
    color: #ffffff;
}

.section-content_events .area-title-head {
    display: grid;
    grid-template-columns: 1fr 1fr;
    margin-bottom: 1.4rem;
}

.section-content_events .area-title-head .content-end {
    display: grid;
    align-items: center;
}

.section-content_events .area-title-head .content-end .group-btn-fillter {
    display: flex;
    gap: .3rem;
    justify-content: flex-end;
}

.section-content_events .area-title-head .content-end .group-btn-fillter .item-btn-fillter {
    background-color: #f2f2f6;
    color: #356674;
    border-radius: 8px;
    padding: 4px 12px;
    cursor: pointer;
    transition: all .1s ease;
}

.section-content_events .area-title-head .content-end .group-btn-fillter .item-btn-fillter:hover {
    background-color: #dde5e8;
    color: #175263;
}

.section-content_events .area-title-head .content-end .group-btn-fillter .item-btn-fillter.active {
    background: var(--color-btn-bglinear-gradient-green-light) !important;
    color: #ffffff;
    box-shadow: #0000001a 0 1px 1px;
}

.section-content_events .warpper-news-activity {
    padding-bottom: 1rem;
}

.section-content_events .warpper-news-activity .area-groups-news-activity {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
    min-height: 380px;
}

.section-content_events .warpper-news-activity .area-groups-news-activity a.card-item-body {
    text-decoration: none;
    background: #ffffff;
    border-radius: 8px;
    /* min-height: 380px; */
    box-shadow: #00000047 0 8px 33px -20px;
    transition: all .3s ease;
}

.section-content_events .item-card-news-activity .block-image {
    position: relative;
    pointer-events: none;
    background-color: #102f41;
    overflow: hidden;
    height: 100%;
    display: flex;
    text-align: center;
}

.section-content_events .item-card-news-activity .block-image .text-category {
    position: absolute;
    left: 10px;
    top: 11px;
    font-size: 12px;
    font-weight: 500;
    color: #fffffff4;
    border-radius: 3px;
    background: #1d1d1d61;
    padding: 2px 8px;
    backdrop-filter: blur(2px);
    z-index: 1;
}

.section-content_events .item-card-news-activity .block-image img {
    width: 100%;
    aspect-ratio: 6 / 4;
    object-fit: cover;
    opacity: .9;
    transition: all .5s ease;
}

.section-content_events .warpper-news-activity .area-groups-news-activity a.card-item-body:hover img {
    opacity: 1;
}

.section-content_events .item-card-news-activity .block-content-title {
    padding: 1.4rem 1.2rem;
    display: grid;
    grid-template-rows: 122px 1fr;
}

.section-content_events .item-card-news-activity .block-content-title .text-date-news-activity {
    font-size: 12px;
    font-weight: 600;
    color: #175263;
    text-transform: uppercase;
    display: flex;
    gap: 1rem;
    justify-content: space-between;
}

.section-content_events .item-card-news-activity .block-content-title .text-title {
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    text-overflow: ellipsis;
    -webkit-box-orient: vertical;
    margin: .4rem 0 .2rem 0;
    font-weight: 600;
    color: #27262f;
    line-height: 1.5;
}

.section-content_events .item-card-news-activity .block-content-title .text-sub-title {
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    text-overflow: ellipsis;
    -webkit-box-orient: vertical;
    margin: 0;
    color: #27262f;
    opacity: .7;
    font-size: 14px;
    line-height: 1.25;
}

.section-content_events .item-card-news-activity .block-content-title .text-readmore {
    position: relative;
    color: #84A2A9;
    font-weight: 600;
    font-size: 15px;
    transition: all .1s ease;
    text-transform: capitalize;
}

.section-content_events .item-card-news-activity .block-content-title .text-readmore .icon-readmore {
    position: absolute;
    font-size: 20px;
    transform: translate(5px, -3px);
    /* opacity: 0; */
}

.section-content_events .warpper-news-activity .area-groups-news-activity .item-card-news-activity {
    border-radius: 8px;
    overflow: hidden;
}

.section-content_events .warpper-news-activity .area-groups-news-activity a:hover .block-content-title .text-readmore {
    color: #214c66;
    text-transform: capitalize;
}

.section-content_events .warpper-news-activity .area-groups-news-activity a:hover .block-image img {
    scale: 1.1;
    transform: rotate(3deg);
}

.section-content_events .area-under-content {
    display: flex;
    justify-content: center;
    margin-top: 3rem;
}

.section-content_events .block-btn-mobile {
    display: none;
}

.section-content_events .pagination-event-page {
    display: flex;
    justify-content: center;
    margin-top: 2rem;
}

@media screen and (max-width: 992px) {

    .section-content_events .warpper-news-activity .area-groups-news-activity a {
        min-height: 0;
    }
}


@media screen and (max-width: 768px) {
    .section-content_events .warpper-news-activity .area-groups-news-activity {
        grid-template-columns: repeat(2, 1fr);
        gap: 2rem;
    }
}

@media screen and (max-width: 576px) {


    .section-content_events .area-title-head {
        grid-template-columns: 1fr;
        row-gap: 1rem;
    }

    .section-content_events .area-title-head .content-end {
        overflow: auto;
        padding-bottom: 8px;
    }

    .section-content_events .area-title-head .content-end .group-btn-fillter {
        justify-content: flex-start;
    }

    .section-content_events .area-under-content {
        margin-top: 1rem;
        display: none !important;
    }

    .section-content_events .warpper-news-activity .area-groups-news-activity {
        grid-template-columns: 1fr;
    }

    .section-content_events .row-area-news-activity {
        position: relative;
        left: -7px;
        margin-right: -26px;
    }

    .section-content_events .area-groups-news-activity {
        display: flex;
    }

    .section-content_events .area-groups-news-activity a:first-child {
        margin-left: 0;
    }

    .section-content_events .warpper-news-activity .area-groups-news-activity a {
        min-width: 300px !important;

    }

    .section-content_events .warpper-news-activity .block-btn-mobile {
        min-width: 12rem;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        gap: 1rem;
    }

    .section-content_events .container-content-area {
        padding: 1rem 1rem 1.6rem 1rem !important;
    }

}



/* ------ Pagination Events Page ------- */

.section-content_events .pagination-event-page {
    display: flex;
    justify-content: center;
    align-items: center;
}

.section-content_events .pagination-event-page .pagination {
    display: flex;
    align-items: center;
    list-style: none;
    margin: 0;
    padding: 0;
    flex-wrap: wrap;
}

.section-content_events .pagination-event-page .page-item {
    display: flex;
    align-items: center;
    justify-content: center;
}

.section-content_events .pagination-event-page .page-link {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 48px;
    height: 48px;
    padding: 0 4px;
    border-radius: 999px;
    text-decoration: none;
    font-size: 16px;
    font-weight: 600;
    color: #8ba0a8;
    background: transparent;
    border: none;
    transition: all 0.25s ease;
}

.section-content_events .pagination-event-page .page-item:not(.active):not(.page-dots) .page-link:hover {
    color: #0a4f63;
}

.section-content_events .pagination-event-page .page-item.page-arrow .page-link:hover {
    background: #ffffff;
    color: #214c66;
    box-shadow: #00000017 0 1px 5px;
}

.section-content_events .pagination-event-page .page-item.active .page-link {
    color: #214c66;
    font-weight: 700;
    background: #edf2f5;
    border-radius: 50%;
}

.section-content_events .pagination-event-page .page-item .page-link:focus {
    box-shadow: 0 0 0 0 rgb(27 66 89 / 27%) !important;
}

.section-content_events .pagination-event-page .page-dots .page-link {
    min-width: auto;
    color: #8ba0a8;
    cursor: default;
}

.section-content_events .pagination-event-page .page-arrow .page-link {
    font-size: 18px;
    border-radius: 50%;
    background: #ffffff;
    font-weight: 600;
    color: #8aa0a8;
    padding: 0;
    box-shadow: #0000000a 0 1px 5px;
}

.section-content_events .area-action-control {
    display: flex;
    justify-content: space-between;
}


.section-content_events .search-box {
    background: #ffffff;
    height: 40px;
    border-radius: 40px;
    padding: 10px;
    border: solid 1px #ededed;
    display: grid;
    grid-template-columns: auto 27px;
    align-items: center;
    align-content: center;
}

.section-content_events .search-btn {
    color: #023b51;
    background: #ffffff;
    width: 35px;
    height: 35px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    text-decoration: none;
    position: relative;
    border: unset;
    transition: all 0.4s ease;
}

.section-content_events .search-txt {
    border: none;
    background: none;
    outline: none;
    float: left;
    padding: 0;
    color: #27262f;
    font-size: 16px;
    transition: 0.4s;
    line-height: 20px;
    padding: 0 6px 0 6px;
}

.section-content_events .search-box:hover>.search-btn {
    background: #f2f2f6;
}


@media (max-width: 768px) {
    .section-content_events .pagination-event-page .page-link {
        min-width: 40px;
        height: 40px;
        font-size: 16px;
    }

    .section-content_events .pagination-event-page .page-arrow .page-link {
        font-size: 16px;
    }
}

.section-content_events .area-not-found {
    grid-column: 1 / -1;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 6rem 0;
    width: 100%;
    flex-direction: column;
    gap: 1rem;
}

.section-content_events .not-found-text {
    color: #8ba0a8;
    font-weight: 500;
    font-size: 1.1rem;
    margin: 0;
    opacity: .8;
}

.section-content_events .not-found-icon {
    font-size: 3rem;
    color: #dde5e8;
    opacity: .8;
}

@media (max-width: 576px) {
    .section-content_events .area-action-control {
        display: flex;
        flex-direction: column;
        margin-bottom: 1rem;
    }

    .section-content_events .group-btn-fillter {
        margin-bottom: 1rem;
    }
}

/* ----------------------------- Details News & Activity Page */

.section-content_events-detail .content-new-activity img {
    width: 100% !important;
}
.section-content_events-detail .content-new-activity p img {
    width: 100% !important;
    max-width: 560px;
    padding-bottom: 1rem;
}

.section-content_events-detail .content-new-activity .table-responsive {
    width: 100% !important;
}

.section-content_events-detail .content-new-activity .table-responsive .table {
    width: 100% !important;
}

.section-content_events-detail .content-new-activity a {
    color: rgb(1 102 132) !important;
    background-color: unset !important;
    text-decoration: underline;
}

.section-content_events-detail .warpper-news-activity-detail {
    display: grid;
    grid-template-columns: 1fr 290px;
    gap: 1.6rem;
}

.section-content_events-detail .warpper-news-activity-detail .area-content-start .image-cover-new-activity {
    max-height: 430px;
    overflow: hidden;
    border-radius: 4px 4px 0 0;
    display: flex;
    justify-content: center;
    align-items: center;
}

.section-content_events-detail .warpper-news-activity-detail .area-content-start .text-title-subject {
    font-size: 1.2rem;
    font-weight: 600;
    margin-bottom: 0.6rem;
}

.section-content_events-detail .warpper-news-activity-detail .area-content-start .text-date-category {
    display: flex;
    gap: 1rem;
    font-size: 12px;
    font-weight: 600;
    color: #175263;
    text-transform: uppercase;
    margin-bottom: 1.4rem;
}

.section-content_events-detail .text-date-category .text-date,
.section-content_events-detail .text-date-category .text-writer,
.section-content_events-detail .text-date-category .text-category,
.section-content_events-detail .text-date-category .text-view {
    display: flex;
    gap: 0.3rem;
}

.section-content_events-detail .text-date-category .text-writer i {
    font-size: 10px;
    position: relative;
    top: 1px;
}

.section-content_events-detail .image-cover-new-activity img {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
}

.section-content_events-detail .content-new-activity {
    background: #ffffff;
    padding: 2rem;
    border-bottom: solid 2px #dbe8f0;
    margin-bottom: 2rem;
    box-shadow: #0000000f 0 1px 4px;
    border-radius: 0 0 4px 4px;
}

.section-content_events-detail .warpper-content-poppular {
    position: sticky;
    top: 134px;
}

.section-content_events-detail .area-content-end {
    margin-bottom: 1rem;
}

.section-content_events-detail .area-content-end .area-content-poppular {
    display: grid;
    gap: .6rem;
}

.section-content_events-detail .area-content-end .url-card-news-activity {
    text-decoration: none;
    color: inherit;
    box-shadow: #00000047 0 1px 4px -2px;
    min-height: 6rem;
    border: solid 1px #e4ebee;
    border-radius: 8px;
    transition: all 0.3s ease;
}

.section-content_events-detail .area-content-end .url-card-news-activity:hover {
    transform: translateX(-4px);
}

.section-content_events-detail .area-content-end .item-card-news-activity {
    display: grid;
    grid-template-columns: 1fr 100px;
    background: #ffffff;
    border-radius: 8px;
    overflow: hidden;
    height: 100%;
    padding: 8px;
    gap: 8px;
    max-height: 100px;
}

.section-content_events-detail .area-content-end .item-card-news-activity .item-area-start {
    position: relative;
    pointer-events: none;
    background-color: #1e4a622b;
    border-radius: 6px;
    overflow: hidden;
}

.section-content_events-detail .area-content-end .item-card-news-activity .item-area-start img {
    width: auto;
    height: 100%;
    aspect-ratio: 6 / 3;
    object-fit: contain;
    position: relative;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

.section-content_events-detail .area-content-end .item-card-news-activity .item-area-start .text-category {
    position: absolute;
    left: 6px;
    top: 6px;
    font-size: 10px;
    font-weight: 500;
    color: #fffffff4;
    border-radius: 3px;
    background: #1d1d1d61;
    padding: 1px 4px;
    backdrop-filter: blur(2px);
    z-index: 1;
}

.section-content_events-detail .area-content-end .item-card-news-activity .item-area-end .text-readmore {
    color: #84A2A9;
    font-weight: 500;
    font-size: 13px;
    transition: all 0.1s ease;
    display: flex;
    align-items: center;
    text-transform: capitalize;
}

.section-content_events-detail .item-card-news-activity .item-area-end .text-readmore .icon-readmore-right {
    position: relative;
    width: 20px;
    height: 19px;
    display: flex;
    align-items: center;
}

.section-content_events-detail .item-card-news-activity .item-area-end .text-readmore .icon-readmore-right i {
    font-size: 18px;
    position: absolute;
}


.section-content_events-detail .area-content-end .url-card-news-activity:hover .item-card-news-activity .item-area-end .text-readmore {
    color: #214c66;
    text-transform: capitalize;
}


.section-content_events-detail .area-content-end .item-card-news-activity .item-area-end {
    display: grid;
    grid-template-rows: 1fr auto;
}

.section-content_events-detail .area-content-end .item-area-end .text-title-subject {
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    text-overflow: ellipsis;
    -webkit-box-orient: vertical;
    margin: 0;
    color: #212529;
    font-size: 14px;
    line-height: 1.25;
    font-weight: 500;
}


.section-content_events-detail .area-content-end .group-detail-top {
    display: grid;
    align-content: start;
    gap: 4px;
}

.section-content_events-detail .area-content-poppular .text-date-category {
    font-size: 11px;
    font-weight: 400;
    color: #626167;
    text-transform: uppercase;
    display: flex;
    gap: .6rem;
}

.section-content_events-detail .text-title-poppular {
    font-size: 1.4rem;
    font-weight: 600;
    margin-bottom: .4rem;
    color: #023b51;
}

.section-content_events-detail .warpper-content-poppular .area-btn-cta {
    margin-top: 1rem;
}

@media screen and (max-width: 576px) {

    .section-content_events-detail .warpper-news-activity-detail {
        grid-template-columns: 1fr;
    }

    .section-content_events-detail .warpper-news-activity-detail .area-content-start {
        margin-bottom: 0;
    }

    .section-content_events-detail .area-content-end {
        margin-bottom: 2rem;
    }

    .section-content_events-detail .content-new-activity {
        margin-bottom: 0rem;
        padding: 1.2rem;
    }

}

/* ---------------------------------- Our Partners Page */


.section-content_our-partner {
    min-height: 400px;
    overflow: hidden;
}

.section-content_our-partner::before {
    content: "";
    position: absolute;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: top center;
    height: 200px;
    width: 100%;
    top: 0;
    z-index: 0;
    opacity: .5;
}

.section-content_our-partner::after {
    content: "";
    position: absolute;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: bottom left;
    height: 800px;
    width: 800px;
    bottom: -10rem;
    left: -20rem;
    opacity: .4;
    z-index: 0;
}

.section-content_our-partner .area-title-head {
    display: grid;
    grid-template-columns: 1fr;
    margin-bottom: 1.4rem;
    justify-items: center;
    position: relative;
}

.section-content_our-partner .warpper-our-partner .area-groups-our-partner {

    padding: 0 0 5rem 0;
}

.section-content_our-partner .warpper-our-partner .area-groups-our-partner .block-content {
    display: flex;
    text-align: center;
    margin-bottom: 4rem;
    flex-direction: column;
    gap: 1rem;
}

.section-content_our-partner .warpper-our-partner .area-groups-our-partner .group-item-partner .block-image-partner {
    max-width: 1100px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    column-gap: 5rem;
    row-gap: 2rem;
    align-items: center;
}

.section-content_our-partner .warpper-our-partner .area-groups-our-partner .group-item-partner .block-image-partner .item-image-partner {
    max-height: 80px;
    pointer-events: none;
}


.section-content_our-partner .group-item-partner {
    display: flex;
    justify-content: center;
}


.section-content_our-partner .warpper-our-partner .area-groups-our-partner .image-partner-cover {
    position: relative;
    background-size: 100%;
    background-position: center -180px;
    background-repeat: no-repeat;
    min-height: 395px;
    border-radius: 1rem;
    margin-bottom: 3rem;
}

@media screen and (max-width: 992px) {
    .section-content_our-partner .warpper-our-partner .area-groups-our-partner .image-partner-cover {
        position: relative;
        background-size: 1000px;
        background-position: center -135px;
        background-repeat: no-repeat;
        border-radius: 1rem;
        min-height: 415px;
        margin: -.6rem 0 2rem 0;
    }
}

@media screen and (max-width: 768px) {
    .section-content_our-partner .warpper-our-partner .area-groups-our-partner .image-partner-cover {
        background-size: 700px;
        background-position: center -70px;
        min-height: 320px
    }
}

@media screen and (max-width: 576px) {

    .section-content_our-partner::before {
        height: 200px;
        width: 800px;
        top: 0;
        opacity: .5;
        z-index: 0;
    }

    .section-content_our-partner::after {
        height: 600px;
        width: 600px;
        bottom: -10rem;
        left: -16rem;
        opacity: .4;
        z-index: 0;
    }

    .section-content_our-partner .warpper-our-partner .area-groups-our-partner {
        padding: 0 0 2rem 0;
    }

    .section-content_our-partner .warpper-our-partner .area-groups-our-partner .group-item-partner .block-image-partner {
        display: grid;
        grid-template-columns: 1fr 1fr;
        justify-items: center;
        column-gap: 3rem;
        row-gap: 2rem;
    }

    .section-content_our-partner .warpper-our-partner .area-groups-our-partner .group-item-partner .block-image-partner .item-image-partner {
        max-height: 50px;
        max-width: 120px;
    }

    .section-content_our-partner .warpper-our-partner .area-groups-our-partner .image-partner-cover {
        background-size: 560px;
        background-position: center -90px;
        min-height: 220px;
    }

    .section-content_our-partner .warpper-our-partner .area-groups-our-partner .block-content {
        margin-bottom: 2rem;
    }

}

@media screen and (max-width: 375px) {
    .section-content_our-partner .warpper-our-partner .area-groups-our-partner .image-partner-cover {
        background-position: center -80px;
        min-height: 160px;
        background-size: 400px;
    }
}
/* ---------------------------------- Request Product List */

.section-home_request-product .body-content-request-product {
    display: grid;
    grid-template-columns: 1fr 2fr;
    box-shadow: #00000047 0 8px 33px -20px;
}

.section-home_request-product .body-content-request-product .area-from-request-product {
    background-color: #ffffff;
    padding: 2rem;
}

.section-home_request-product .warpper-from-your-info {
    padding: 2rem 1.8rem;
    color: #ffffff;
}

.section-home_request-product .warpper-from-your-info .text-title-name {
    opacity: .9;
}

.section-home_request-product .area-from-your-info {
    background: linear-gradient(161deg, #224e68, #0e2c3f);
}

.section-home_request-product .content-product-group {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    align-content: start;
}

.section-home_request-product .group-title-tophead {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.section-home_request-product .group-title-tophead .title-subject {
    font-size: 1.4rem;
    font-weight: 600;
}

.section-home_request-product .block-policy-check {
    background: #f6f6f6;
    padding: 8px 8px;
    padding-left: 36px;
    border-radius: 6px;
}

.section-home_request-product .block-policy-check .form-check-label {
    line-height: 12px;
    color: #8c8c8c;
}

.section-home_request-product .block-policy-check .form-check-input {
    margin-left: -26px;
    margin-top: 1px;
}

.section-home_request-product .block-btn-checkall-product .form-check-input:focus,
.section-home_request-product .check-group-product-request .form-check-input:focus,
.section-home_request-product .content-product-group .form-check-input:focus,
.section-home_request-product .block-policy-check .form-check-input:focus {
    border-color: #7fb831;
    outline: 0;
    box-shadow: 0 0 0 .25rem rgb(125 182 48 / 21%);
}

.section-home_request-product .block-btn-checkall-product .form-check-input:checked,
.section-home_request-product .check-group-product-request .form-check-input:checked,
.section-home_request-product .content-product-group .form-check-input:checked,
.section-home_request-product .block-policy-check .form-check-input:checked {
    background-color: #7fb831;
    border-color: #7fb831;
}

.section-home_request-product .block-policy-check .form-check-label small {
    font-size: 11px;
}

.section-home_request-product .block-policy-check .form-check-label small a {
    text-decoration: none;
    color: #7db630;
}

.section-home_request-product .policy-check .form-check-label small a:hover {
    text-decoration: underline;
}

.section-home_request-product .block-input-request-product {
    width: 100%;
    margin: 0px 0 8px 0;
    position: relative;
    z-index: 1;
}

.section-home_request-product .block-input-request-product :focus {
    outline: none;
}

.section-home_request-product .block-input-request-product input[type="text"],
.section-home_request-product .block-input-request-product input[type="email"],
.section-home_request-product .block-input-request-product textarea {
    color: #eeeeee;
    width: 100%;
    box-sizing: border-box;
    letter-spacing: 1px;
}

.section-home_request-product .effect-solid {
    border: 0;
    padding: 14px 0px 3px 0;
    border-bottom: 2px solid #113042;
    background-color: #ffffff00;
}

.section-home_request-product .input-error~.focus-border {
    display: none;
    height: 0;
}

.section-home_request-product .effect-solid~.focus-border {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 2px;
    background-color: #7b93a0;
    transition: 0.4s;
}

.section-home_request-product .effect-solid~.focus-border.focus-border-textarea {
    bottom: 7px;
}

.section-home_request-product .effect-solid:focus~.focus-border,
.section-home_request-product .has-content.effect-solid~.focus-border {
    width: 100%;
    transition: 0.4s;
}

.section-home_request-product .effect-solid~label {
    position: absolute;
    left: 0;
    width: 100%;
    top: 8px;
    color: #b5c0c8;
    /* color: #78aace; */
    transition: 0.3s;
    z-index: -1;
    letter-spacing: 0.5px;
}

.section-home_request-product .effect-solid:focus~label,
.section-home_request-product .has-content.effect-solid~label {
    top: -1px;
    left: 0;
    font-size: 12px;
    color: #7c92a0;
    transition: 0.3s;

}

.section-home_request-product .check-group-product-request .item-form-check {
    font-size: 16px;
}

.section-home_request-product .check-group-product-request .item-form-check .form-check-label {
    color: #b5c0c8;
    /* color: #78aace; */
    font-size: 15px;
    margin-bottom: 6px;

}

.section-home_request-product .input-error {
    border-bottom-color: #ef293c !important;
}

.section-home_request-product .text-error {
    color: #ef293c;
    font-size: 12px;
    margin-top: 4px;
}

.section-home_request-product .check-group-product-request .input-form-other {
    color: #ffffff !important;
    background-color: #0c2433 !important;
    border: var(--bs-border-width) solid #113043;
    border-radius: 3px !important;
}

.section-home_request-product .check-group-product-request .input-form-other:focus {
    color: #ffffff;
    background-color: #0c2433;
    border-color: #0c2433;
    box-shadow: 0 0 0 .25rem rgb(17 44 61);
}

.section-home_request-product .check-group-product-request input::placeholder {
    color: #b5c0c8 !important;
}

@media screen and (max-width: 576px) {
    .section-home_request-product .body-content-request-product {
        display: grid;
        grid-template-columns: 1fr;
    }

    .section-home_request-product .warpper-from-your-info {
        padding: 2rem 1.6rem;
    }

    .section-home_request-product .body-content-request-product .area-from-request-product {
        padding: 2rem 1.6rem;
    }

    .section-home_request-product .area-from-request-product #btnValidateForm {
        display: block;
        width: 100%;
    }

    .section-home_request-product .group-title-tophead {
        flex-direction: column;
        align-items: flex-start;
    }

    .section-home_request-product .content-product-group {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

}

/* ---------------------------------- Home Page */



.section-home_about-company {
    position: relative;
    background: #ffffff;
    min-height: 435px;
    padding: 0 0 4rem 0;
    overflow: hidden;
}

.section-home_about-company .warpper-about-company {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 4rem 0 4rem 0;
    position: relative;
}

.section-home_about-company .warpper-about-company .text-name-company {
    position: relative;
    z-index: 1;
    text-align: center;
    font-size: 1.8rem;
    color: #214c66;
    margin: 0 0 8px 0;
    font-weight: 600;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

.section-home_about-company .warpper-about-company .text-about-company {
    position: relative;
    z-index: 1;
    max-width: 800px;
    text-align: center;
    font-size: 16px;
    color: #175263;
}

.section-home_about-company .warpper-about-company::after {
    content: "";
    position: absolute;
    z-index: 0;
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    height: 250px;
    width: 100%;
    opacity: .8;
    top: 7rem;
}

.section-home_certificate {
    position: absolute;
    transform: translateY(-60px);
    width: 100%;
}

.section-home_certificate .warpper-certificate {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.section-home_certificate .warpper-certificate .area-groups-certificate {
    display: flex;
    position: relative;
    align-items: center;
    justify-content: center;
    gap: 1.4rem;
    background: #ffffff;
    min-height: 7rem;
    padding: 0 3rem;
    border-radius: 1rem;
    border: solid 1px #ffffff;
    box-shadow: #0000001c 0 3px 10px 0;
}

.section-home_certificate .area-groups-certificate .group-area-end {
    display: flex;
    gap: 1.4rem;
}

.section-home_certificate .area-groups-certificate .group-area-end .item-certificate img {
    max-height: 70px;
    width: 100%;
}

@media screen and (max-width: 576px) {

    .section-home_certificate {
        transform: translateY(-40px);
    }

    .section-home_about-company .warpper-about-company::after {
        height: 200px;
        width: 745px;
        top: 12rem;
        left: -18rem;
    }

    .section-home_about-company .warpper-about-company .text-name-company {
        max-width: 345px;
        font-size: 18px;
    }

    .section-home_certificate .warpper-certificate .area-groups-certificate {
        padding: 0 1rem;
        border-radius: 16px;
        align-items: center;
        gap: 14px;
        flex-direction: column;
        min-height: 5rem;
    }

    .section-home_certificate .warpper-certificate .area-groups-certificate .group-area-end {
        display: flex;
        gap: .8rem;
    }

    .section-home_about-company .warpper-about-company {
        display: flex;
        flex-direction: column;
        align-items: center;
        margin: 2rem 0 8rem 0;
    }

}

.section-home_news-activity {
    min-height: 400px;
    background: #ffffff;
    padding: 5rem 0 5rem 0;
}

.section-home_news-activity .area-title-head {
    display: grid;
    grid-template-columns: 1fr 1fr;
    margin-bottom: 1.4rem;
}

.section-home_news-activity .area-title-head .content-end {
    display: grid;
    align-items: center;
}

.section-home_news-activity .area-title-head .content-end .group-btn-fillter {
    display: flex;
    gap: .3rem;
    justify-content: flex-end;
}

.section-home_news-activity .area-title-head .content-end .group-btn-fillter .item-btn-fillter {
    background-color: #f2f2f6;
    color: #356674;
    border-radius: 8px;
    padding: 4px 12px;
    cursor: pointer;
    transition: all .1s ease;
}

.section-home_news-activity .area-title-head .content-end .group-btn-fillter .item-btn-fillter:hover {
    background-color: #dde5e8;
    color: #175263;
}

.section-home_news-activity .area-title-head .content-end .group-btn-fillter .item-btn-fillter.active {
    background: #8ec63f !important;
    color: #ffffff;
    box-shadow: #0000001a 0 1px 1px;
}

.section-home_news-activity .warpper-news-activity {
    padding-bottom: 1rem;
}

.section-home_news-activity .warpper-news-activity .area-groups-news-activity {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;

}

.section-home_news-activity .warpper-news-activity .area-groups-news-activity .item-card-news-activity {
    border-radius: 8px;
    overflow: hidden;
}

.section-home_news-activity .warpper-news-activity .area-groups-news-activity a.card-item-body {
    text-decoration: none;
    background: #f2f2f6;
    border-radius: 8px;
    border: 1px solid #e3e7ec;
    /* min-height: 400px; */
    box-shadow: #0000001c 0 3px 10px 0;
    transition: all .3s ease;
}

.section-home_news-activity .item-card-news-activity .block-image {
    position: relative;
    pointer-events: none;
    background-color: #102f41;
    overflow: hidden;
    height: 100%;
    display: flex;
    text-align: center;
}

.section-home_news-activity .item-card-news-activity .block-image .text-category {
    position: absolute;
    left: 10px;
    top: 11px;
    font-size: 12px;
    font-weight: 500;
    color: #fffffff4;
    border-radius: 3px;
    background: #1d1d1d61;
    padding: 2px 8px;
    backdrop-filter: blur(2px);
    z-index: 1;
}

.section-home_news-activity .item-card-news-activity .block-image img {
    width: 100%;
    aspect-ratio: 6 / 4;
    object-fit: cover;
    opacity: .9;
    border-radius: 8px 8px 0 0;
    transition: all .5s ease;
}

.section-home_news-activity .warpper-news-activity .area-groups-news-activity a.card-item-body:hover img {
    opacity: 1;
}

.section-home_news-activity .warpper-news-activity .area-groups-news-activity a:hover .block-image img {
    scale: 1.1;
    transform: rotate(3deg);
}

.section-home_news-activity .item-card-news-activity .block-content-title {
    padding: 1.4rem 1.2rem;
    display: grid;
    grid-template-rows: 122px 1fr;
}



.section-home_news-activity .item-card-news-activity .block-content-title .text-date-news-activity {
    font-size: 12px;
    font-weight: 600;
    color: #175263;
    text-transform: uppercase;
}

.section-home_news-activity .item-card-news-activity .block-content-title .text-title {
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    text-overflow: ellipsis;
    -webkit-box-orient: vertical;
    margin: .4rem 0 .2rem 0;
    font-weight: 600;
    color: #27262f;
    line-height: 1.5;
}

.section-home_news-activity .item-card-news-activity .block-content-title .text-sub-title {
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    text-overflow: ellipsis;
    -webkit-box-orient: vertical;
    margin: 0;
    color: #27262f;
    opacity: .7;
    font-size: 14px;
}

.section-home_news-activity .item-card-news-activity .block-content-title .text-readmore {
    position: relative;
    color: #84A2A9;
    font-weight: 600;
    font-size: 15px;
    text-transform: capitalize;
    transition: all .1s ease;
}

.section-home_news-activity .area-under-content {
    display: flex;
    justify-content: center;
    margin-top: 3rem;
}

.section-home_news-activity .block-btn-mobile {
    display: none;
}

@media screen and (max-width: 576px) {

    .section-home_news-activity {
        padding: 3rem 0;
    }

    .section-home_news-activity .area-title-head {
        grid-template-columns: 1fr;
        row-gap: 1rem;
    }

    .section-home_news-activity .area-title-head .content-end {
        overflow: auto;
        padding-bottom: 8px;
    }

    .section-home_news-activity .area-title-head .content-end .group-btn-fillter {
        justify-content: flex-start;
    }

    .section-home_news-activity .area-under-content {
        margin-top: 1rem;
        display: none !important;
    }

    .section-home_news-activity .warpper-news-activity {
        overflow-x: auto;
        padding: 0 0 1rem 0;
        display: flex;
        align-items: center;
    }

    .section-home_news-activity .warpper-news-activity .area-groups-news-activity {
        display: flex;
        gap: 0rem;
    }

    .section-home_news-activity .row-area-news-activity {
        position: relative;
        left: -7px;
        margin-right: -26px;
    }

    .section-home_news-activity .area-groups-news-activity {
        display: flex;
    }

    .section-home_news-activity .area-groups-news-activity a:first-child {
        margin-left: 0;
    }

    .section-home_news-activity .area-groups-news-activity::before {
        content: "";
        min-width: 1.2rem;
    }

    .section-home_news-activity .warpper-news-activity .area-groups-news-activity a {
        min-width: 300px !important;
        margin-right: 1.2rem;
    }

    .section-home_news-activity .warpper-news-activity .area-groups-news-activity a:last-child {
        margin-right: 0;
    }

    .section-home_news-activity .warpper-news-activity .block-btn-mobile {
        min-width: 12rem;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        gap: 1rem;
    }

}

.section-home_our-product {
    min-height: 400px;
    background: #F2F2F6;
    padding: 6rem 0 3rem 0;
}

.section-home_our-product .warpper-our-product .area-groups-our-product {
    display: grid;
    grid-template-columns: 1fr 1fr;
}

.section-home_our-product .warpper-our-product .area-groups-our-product .group-area-start {
    padding: 0 0 0 0;
}

.section-home_our-product .warpper-our-product .area-groups-our-product .group-area-start .group-list-menuname {
    margin: 1rem 0 2rem 1rem;
    /* display: flex;
    flex-direction: column;
    align-items: flex-start; */
}

.section-home_our-product .warpper-our-product .area-groups-our-product .group-area-start .group-list-menuname .text-title-section-inbox {
    display: none;
    font-size: 1.6rem;
    font-weight: 600;
    color: var(--color-btn-txt-dark-blue-grey);
    margin-bottom: 8px;
}

.section-home_our-product .warpper-our-product .area-groups-our-product .group-area-start .group-list-menuname .item-list-menu {
    text-decoration: none;
    color: #175263;
    font-size: 18px;
    font-weight: 500;
    margin-bottom: 1rem;
}

.section-home_our-product .warpper-our-product .area-groups-our-product .group-area-start .group-list-menuname .item-list-menu .text-group-name {
    display: flex;
    align-items: center;
    text-decoration: none;
    color: #175263;
    font-size: 20px;
    font-weight: 600;
    border-left: 4px solid #7cb230;
    padding-left: 12px;
    padding-top: 3px;
    height: 18px;
    margin-bottom: 7px;
}

.section-home_our-product .warpper-our-product .area-groups-our-product .group-area-start .group-btn-cta {
    display: flex;
    column-gap: 1rem;
}

.section-home_our-product .warpper-our-product .area-groups-our-product .group-area-end .item-image img {
    width: 115%;
    transform: translate(-40px, -30px);
}

@media screen and (max-width: 991px) {
    .section-home_our-product .warpper-our-product .area-groups-our-product .group-area-end .item-image img {
        width: 100%;
        transform: none;
    }
}

@media screen and (max-width: 576px) {
    .section-home_our-product .warpper-our-product .area-groups-our-product {
        display: flex;
        flex-direction: column-reverse;
    }

    .section-home_our-product .warpper-our-product .area-groups-our-product .group-area-end {
        width: 100%;
        transform: translate(0px, 0px);
    }

    .section-home_our-product .warpper-our-product .area-groups-our-product .group-area-end .item-image img {
        width: 100%;
        transform: translate(0px, 0px);
    }

    .section-home_our-product .warpper-our-product .area-groups-our-product .group-area-start {
        padding: 0;
    }

    .section-home_our-product .warpper-our-product .area-groups-our-product .group-area-start .group-btn-cta {
        display: flex;
        column-gap: 1rem;
        justify-content: center;
    }

    .section-home_our-product .warpper-our-product .area-groups-our-product .group-area-start .group-btn-cta .btn {
        font-size: 14px !important;
    }

    .section-home_our-product .warpper-our-product .area-groups-our-product .group-area-start .group-list-menuname .item-list-menu .icon-menu a img {
        width: 100%;
    }

    .section-home_our-product .warpper-our-product .area-groups-our-product .group-area-start .group-list-menuname .item-list-menu {
        grid-template-columns: 45px auto;
        min-height: 50px;
    }

    .section-home_our-product .warpper-our-product .area-groups-our-product .group-area-start .group-list-menuname .text-title-section-inbox {
        display: block !important;
    }

    .section-home_our-product .warpper-our-product .area-groups-our-product .group-area-start .group-list-menuname {
        margin: 0;
    }

    .section-home_our-product .area-title-head .content-start .text-title-section {
        display: none !important;
    }

}

.section-home_our-partner {
    min-height: 400px;
    background: #F2F7F9;
    padding: 5rem 0 5rem 0;
    position: relative;
    overflow: hidden;
}

.section-home_our-partner .area-title-head .content-start {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.section-home_our-partner::before {
    content: "";
    position: absolute;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: top center;
    height: 200px;
    width: 100%;
    top: 0;
    z-index: 0;
    opacity: .5;
}

.section-home_our-partner::after {
    content: "";
    position: absolute;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: bottom left;
    height: 800px;
    width: 800px;
    bottom: -10rem;
    left: -20rem;
    opacity: .4;
    z-index: 0;
}

.section-home_our-partner .area-title-head {
    display: grid;
    grid-template-columns: 1fr;
    margin-bottom: 1.4rem;
    justify-items: center;
    position: relative;
}

.section-home_our-partner .warpper-our-partner .area-groups-our-partner {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    z-index: 1;
}

.section-home_our-partner .warpper-our-partner .area-groups-our-partner .block-content {
    display: flex;
    text-align: center;
    /* max-width: 850px; */
    margin-bottom: 3rem;
    color: #175263;
    flex-direction: column;
    gap: 1rem;
}

.section-home_our-partner .warpper-our-partner .area-groups-our-partner .block-content .content-width-th {
    display: flex;
    text-align: center;
    max-width: 700px;
    flex-direction: column;
    gap: 1rem;
}

.section-home_our-partner .warpper-our-partner .area-groups-our-partner .group-item-partner .block-image-partner {
    max-width: 1100px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    column-gap: 5rem;
    row-gap: 2rem;
    align-items: center;
}

.section-home_our-partner .warpper-our-partner .area-groups-our-partner .group-item-partner .block-image-partner .item-image-partner {
    max-height: 80px;
    pointer-events: none;
}

@media screen and (max-width: 576px) {

    .section-home_our-partner::before {
        height: 200px;
        width: 800px;
        top: 0;
        opacity: .5;
        z-index: 0;
    }

    .section-home_our-partner::after {
        height: 600px;
        width: 600px;
        bottom: -10rem;
        left: -16rem;
        opacity: .4;
        z-index: 0;
    }

    .section-home_our-partner .warpper-our-partner .area-groups-our-partner .group-item-partner .block-image-partner {
        display: grid;
        grid-template-columns: 1fr 1fr;
        justify-items: center;
        column-gap: 3rem;
        row-gap: 2rem;

    }

    .section-home_our-partner .warpper-our-partner .area-groups-our-partner .group-item-partner .block-image-partner .item-image-partner {
        max-height: 50px;
        max-width: 120px;
    }

}

/* ---------------------------------- Contact Us Page */

.section-content_contact-us .warpper-cover-image {
    position: relative;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    height: 200px;
    overflow: hidden;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.6rem;
    color: #ffffff;
}

.section-content_contact-us .warpper-cover-image .text-title-company {
    font-size: 2rem;
    font-weight: 500;
    text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
}

.section-content_contact-us .area-content__contact .warpper-cover-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
}

.section-content_contact-us .area-content__contact .warpper-cover-content .content-contact-detail {
    padding: 2rem 1rem;
}

.section-content_contact-us .area-content__contact .warpper-cover-content .content-contact-detail .text-contact-intro {
    font-size: 1.1rem;
    margin-bottom: 1rem;
}

.section-content_contact-us .area-content__contact .warpper-cover-content .content-contact-detail .text-contact-intro .text-intro-feedback {
    font-size: 1.1rem;
    font-weight: 600;
}

.section-content_contact-us .content-contact-detail {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.section-content_contact-us .content-contact-detail .contact-detail-item {
    display: grid;
    grid-template-columns: 50px auto;
    gap: 1rem;
    min-height: 70px;
}

.section-content_contact-us .text-recaptcha-google {
    font-size: 12px;
    color: #aeaeae;
    line-height: 1.2;
}

.section-content_contact-us .text-recaptcha-google a {
    color: #aeaeae;
    text-decoration: none;
    transition: all .3s ease;
}

.section-content_contact-us .text-recaptcha-google a:hover {
    color: #727272;
    text-decoration: underline;
}

.section-content_contact-us .content-contact-detail .contact-detail-item .start-area-icon {
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.section-content_contact-us .content-contact-detail .contact-detail-item .start-area-icon .item-image {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.section-content_contact-us .content-contact-detail .contact-detail-item .end-area-detail .item-title {
    font-weight: 600;
}

.section-content_contact-us .area-content__contact .warpper-cover-content .content-contact-from {
    background-color: #ffffff;
    position: relative;
    top: -3rem;
    margin: 1rem 2rem 0 1rem;
    padding: 2rem 2rem;
    box-shadow: #00000047 0 8px 33px -20px;
}

.section-content_contact-us .area-content__contact .warpper-cover-content .content-contact-from .item-phone {
    --input-drop-size: 0.5rem;
    padding-left: var(--input-drop-size);
}

.section-content_contact-us .area-content__contact .warpper-cover-content .content-contact-from .item-email {
    --input-drop-size: 0.5rem;
    padding-right: var(--input-drop-size);
}

.section-content_contact-us .area-content__contact .warpper-cover-content .content-contact-from .text-title {
    font-size: 2rem;
    font-weight: 500;
    margin-bottom: .6rem;
}

@media screen and (max-width: 576px) {
    .section-content_contact-us .area-content__contact {
        position: relative;
        top: -8px;
        margin-bottom: 2rem;
    }

    .section-content_contact-us .area-content__contact .warpper-cover-content {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .section-content_contact-us .warpper-cover-image {
        height: 130px;
        background-size: 583px;
        background-position: -12px center;
    }

    .section-content_contact-us .warpper-cover-image .text-title-company {
        font-size: 1.1rem;
        text-align: center;
        line-height: 1.2;
    }

    .section-content_contact-us .area-content__contact .warpper-cover-content .content-contact-detail .text-contact-intro {
        font-size: 1rem;
        font-weight: 500;
        margin-bottom: 0;
    }

    .section-content_contact-us .content-contact-detail .contact-detail-item {
        display: grid;
        grid-template-columns: 40px auto;
        gap: 1rem;
        min-height: 0px;
    }

    .section-content_contact-us .content-contact-detail .contact-detail-item .start-area-icon {
        width: 40px;
        height: 40px;
    }

    .section-content_contact-us .area-content__contact .warpper-cover-content .content-contact-from .text-title {
        font-size: 1.4rem;
        font-weight: 600;
        margin-bottom: .6rem;
    }

    .section-content_contact-us .area-content__contact #btn_submit {
        width: 100%;
    }
}

.section-content_contact-us .map-contactus {
    position: relative;
    background: var(--bg-color-section-light-main);
    background: var(--bg-color-section-light);
    padding: 2rem 2rem 7rem 2rem;
    overflow: hidden;
}

.section-content_contact-us .map-contactus::before {
    content: "";
    position: absolute;
    background-position: center top;
    background-repeat: no-repeat;
    background-size: contain;
    left: 0;
    top: -172px;
    width: 100%;
    height: 100%;
}

.section-content_contact-us .map-contactus::after {
    content: "";
    position: absolute;
    background-position: center bottom;
    background-repeat: no-repeat;
    background-size: min(1100px, 120dvmax) auto;
    left: 0%;
    bottom: 0;
    width: 100%;
    height: 100px;
}

.section-content_contact-us .map-contactus .warpper-area-title {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 1rem;
    justify-content: space-between;
    margin-bottom: 1rem;
    align-items: flex-end;
}

.section-content_contact-us .map-contactus .warpper-area-title .text-title {
    font-size: 2.2rem;
    font-weight: 600;
    color: var(--color-txt-primary-deep-teal);
}

.section-content_contact-us .map-contactus .warpper-area-title .group-btn-map {
    display: flex;
    justify-content: flex-end;
    gap: 2.5rem;
}

.section-content_contact-us .map-contactus .item-content-contactus {
    margin-bottom: 2rem;
}

.section-content_contact-us .map-contactus .item-content-contactus>img {
    border-radius: 8px;
}

.section-content_contact-us .map-contactus .map-wrapper {
    position: relative;
    width: 100%;
    height: 400px;
}

.section-content_contact-us .map-contactus .map-wrapper iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 400px;
    border: 0;
    border-radius: 16px;
    background: #ffffff;
    border: solid 1px #f0f0f0;
}

.section-content_contact-us .map-contactus .area-btn-map {
    display: flex;
    gap: .6rem;
    justify-content: center;
    margin-bottom: .6rem;
    align-items: center;
    position: relative;
}

.section-content_contact-us .map-contactus .area-btn-map .text-title-map {
    color: #4f7582;
    font-weight: 500;
}

.section-content_contact-us .map-contactus .area-btn-map:nth-last-child(1) .text-title-map::before {
    content: "";
    position: absolute;
    width: 1px;
    height: 33px;
    background-color: #cedbe0;
    top: 0px;
    left: -1.25rem;
    border-radius: 4px;
}


.section-content_contact-us .map-contactus .map-container {
    position: relative;
    border-radius: 1rem;
    overflow: hidden;
    border: solid 1px #d7e2e8;
    z-index: 1;
}

.section-content_contact-us .map-contactus .map-layer {
    position: relative;
    inset: 0;
    opacity: 0;
    transition: opacity .5s ease;
    pointer-events: none;
    height: 400px;
}

.section-content_contact-us .map-contactus .map-layer.active {
    opacity: 1;
    pointer-events: auto;
    position: absolute;
}

.section-content_contact-us .map-contactus .map-container iframe {
    width: 100%;
    height: 400px;
    object-fit: cover;
}

.section-content_contact-us .map-contactus .map-container img {
    width: 100%;
    height: 400px;
    object-fit: cover;
}

.section-content_contact-us .map-contactus .area-btn-map .btn-primary-map,
.section-content_contact-us .map-contactus .area-btn-map .btn-primary-map:active {
    background-color: #ffffff;
    color: #214c66;
    font-weight: 500;
    padding: 4px 12px;
    cursor: pointer;
    opacity: 1;
    display: flex;
    align-items: center;
    gap: .6rem;
    border-radius: var(--border-radius-btn-fit) !important;
    border: #c1d1d8c9 1px solid;
}

.section-content_contact-us .map-contactus .area-btn-map .btn-primary-map .warpper-icon {
    display: inline-block;
    width: auto;
    height: 20px;
    border-radius: 1rem;
    text-align: center;
}

.section-content_contact-us .map-contactus .area-btn-map .btn-primary-map.active,
.section-content_contact-us .map-contactus .area-btn-map .btn-primary-map:focus {
    background: #004a60 !important;
    color: var(--color-btn-txt-white) !important;
    transition: var(--btn-transition-delay);
    border: #004a60 1px solid;
    box-shadow: #0000004f 0 1px 1px !important;
    opacity: 1;
}

.section-content_contact-us .map-contactus .area-btn-map .warpper-btn-map {
    display: flex;
    gap: .8rem;
}


@media screen and (max-width: 1024px) {
    .section-content_contact-us .map-contactus .warpper-area-title {
        grid-template-columns: 1fr;
        justify-items: center;
    }
}


@media screen and (max-width: 992px) {
    .section-content_contact-us .area-content__contact .warpper-cover-content .content-contact-from .item-phone {
        --input-drop-size: calc(1.5rem * .5);
    }

    .section-content_contact-us .area-content__contact .warpper-cover-content .content-contact-from .item-email {
        --input-drop-size: calc(1.5rem * .5);
    }

    .section-content_contact-us .map-contactus .warpper-area-title .group-btn-map {
        display: flex;
        gap: 0;
        flex-direction: column;
    }

    .section-content_contact-us .map-contactus .area-btn-map:nth-last-child(1) .text-title-map::before {
        display: none;
    }
}

@media screen and (max-width: 576px) {

    .section-content_contact-us .map-contactus {
        padding: 0rem 0rem 4rem 0rem;
    }

    .section-content_contact-us .area-content__contact .warpper-cover-content .content-contact-detail {
        padding: 1.2rem 0;
    }

    .section-content_contact-us .area-content__contact .warpper-cover-content .content-contact-from {
        margin: 0;
        padding: 2rem 1.2rem;
        top: unset !important;
    }

    .section-content_contact-us .map-contactus .warpper-area-title {
        align-items: center;
        flex-direction: column;
        gap: .6rem;
    }

    .section-content_contact-us .map-contactus .warpper-area-title .text-title {
        font-size: 1.6rem;
    }

    .section-content_contact-us .map-contactus .area-btn-map {
        display: flex;
        gap: .2rem;
        justify-content: flex-start;
        margin-bottom: .6rem;
        flex-direction: column;
        align-items: flex-start;
    }

    .section-content_contact-us .map-contactus .area-btn-map .warpper-btn-map {
        display: flex;
        gap: .8rem;
    }

    .section-content_contact-us .map-contactus .warpper-area-title .group-btn-map {

        gap: 0;
        width: 100%;
    }

    .section-content_contact-us .map-contactus .area-btn-map:nth-last-child(1) .text-title-map::before {
        width: 1px;
        height: 33px;
        top: 0px;
        left: 0;
    }
}

.glightbox-clean .gprev,
.glightbox-clean .gnext {
    visibility: hidden;
}

/* ---------------------------------- Pivacy Policy */

.section-second_privacy-policy .group-item-policy {
    max-width: 360px;
    display: grid;
    gap: 1rem;
    margin-bottom: 1rem;
}

.section-second_privacy-policy .group-item-policy .link-to-privacy {
    text-decoration: none;
    background-color: #ffffff;
    color: #214c66 !important;
    padding: 4px 8px;
    box-shadow: #0000000d 0 4px 6px -1px;
}

.section-second_privacy-policy .group-item-policy .link-to-privacy:hover {
    text-decoration: underline;
    color: #234f6b !important;
}

.section-second_privacy-policy .group-item-policy .block-file-policy {
    display: grid;
    grid-template-columns: 35px 1fr;
    align-items: center;
    min-height: 50px;
}

.section-second_privacy-policy .block-file-policy .icon-file-policy {
    font-size: 1.4rem;
    color: var(--color-btn-bg-green-teal);
    display: flex;
    justify-content: center;
    align-items: center;
}

.section-second_privacy-policy .block-file-policy .text-name-policy {
    font-weight: 600;
}

.section-second_privacy-policy .text-name-email {
    text-decoration: none;
    color: #214c66 !important;
    font-weight: 500;
}

.section-second_privacy-policy .text-name-email:hover {
    color: #234f6b !important;
    text-decoration: underline;
}

/* ---------------------------------- Coming Soon Page */


.section-content_comming-soon {
    min-height: 600px;
    position: relative;
    display: flex;
    flex-direction: column;
    font-size: 2rem;
    align-items: center;
    justify-content: center;
    background: #f8fcff;
    /* background: linear-gradient(0deg, rgb(232 232 232) 0%, rgb(247 247 247) 80%); */
    row-gap: 1.4rem;
}

.section-content_comming-soon .block-comming-soon {
    font-size: 2.6rem;
    font-weight: 600;
    color: #0f2e4075;
}

@media screen and (max-width: 576px) {
    .section-content_comming-soon .block-comming-soon {
        font-size: 1.8rem;
    }
}

.block-comming-soon {
    display: grid;
    justify-content: stretch;
    align-items: center;
    justify-items: center;
    min-height: 500px;
    font-size: 2.2rem;
    color: #023b5194;
    font-weight: 500;
}


/* ---------------------------------- Contact */

.map-contactus {
    background: var(--bg-color-section-light-green-main);
    background: var(--bg-color-section-light-green);
    padding: 4rem 2rem 7rem 2rem;


    & .item-content-contactus {
        margin-bottom: 2rem;

        &>img {
            border-radius: 8px;
        }
    }

    & .map-wrapper {
        position: relative;
        width: 100%;
        height: 400px;

    }

    & .map-wrapper iframe {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 400px;
        border: 0;
        border-radius: 8px;
        background: #ffffff;
        border: solid 1px #f0f0f0;
    }
}

@media screen and (max-width: 576px) {
    .map-contactus {
        padding: 3rem 0rem;
    }
}

.area-content-contactus {
    padding: 0 0 2rem 0;
    margin: 1rem 0 0 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;

    & .contact-detail-start {

        & .warper-detail-contact {
            width: 100%;
            min-height: 300px;
            display: grid;
            grid-template-rows: repeat(4, 1fr);
            row-gap: 1rem;
            margin-bottom: 2rem;

            & .group-list-contact {
                display: flex;
                align-items: center;
                gap: 16px;
                padding: .8rem 1.2rem;
                border-radius: 8px;
                background: #ffffff;
                border: var(--color-border-card);

                & .group-icon {
                    flex: 0 0 44px;
                    height: 44px;
                    display: flex;
                    align-items: center;
                    justify-content: center;

                    & i {
                        font-size: 30px;
                        color: #004963;
                    }
                }

                & .group-detail {
                    display: flex;
                    flex-direction: column;

                    & .text-title {
                        font-size: 14px;
                        font-weight: 600;
                        color: #6b7280;
                        line-height: 1.2;
                    }

                    & .text-detail {
                        font-size: 16px;
                        font-weight: 500;
                        color: var(--color-btn-txt-dark-blue-grey);
                        line-height: 1.2;
                        margin-top: 6px;
                    }
                }
            }
        }
    }

    & .contact-detail-end {
        display: flex;
        align-items: center;
        justify-content: center;

        & .warper-image-contact {
            display: flex;
            justify-content: center;
            align-items: center;
        }
    }
}


@media screen and (max-width: 768px) {
    .area-content-contactus {
        display: flex;
        flex-direction: column-reverse;

        & .warper-detail-contact {
            margin-bottom: 0rem;
        }
    }
}

@media screen and (max-width: 576px) {
    .area-content-contactus {
        margin: 0;
        display: flex;
        flex-direction: column-reverse;

        & .warper-detail-contact {
            margin-bottom: 0rem;

            & .group-list-contact {
                padding: .8rem 1.2rem;

                & .group-detail {
                    .text-detail {
                        font-size: 14px;
                    }
                }
            }
        }
    }
}

/* Mobile */
@media (max-width: 575.98px) {
    .contact-detail-end {
        & .warper-image-contact {
            & .block-image {
                .images-contact {
                    scale: 1.05;
                    display: inline-block;
                }
            }
        }
    }
}

/* Tablet */
@media (min-width: 576px) and (max-width: 991.98px) {
    .contact-detail-end {
        & .warper-image-contact {
            & .block-image {
                & .images-contact {
                    scale: 1.05;
                    display: inline-block;
                }
            }
        }
    }
}

/* Desktop */
@media (min-width: 992px) {
    .contact-detail-end {
        & .warper-image-contact {
            & .block-image {
                & .images-contact {
                    width: 500px;
                }
            }
        }
    }
}






/* ----------------------------------------- Cover Page Secondary */


.banner-curve-cover {
    position: absolute;
    bottom: -42px;
    left: 0;
    width: 100%;
    height: 170px;
    z-index: 5;
}

.banner-curve-cover path {
    fill: #f8fcff;
}

@media (max-width: 768px) {
    .banner-curve-cover {
        height: 84px;
        bottom: -14px;
    }
}

@media (max-width: 576px) {
    .banner-curve-cover {
        height: 48px;
        bottom: -8px;
    }
}

.main-cover-page::before {
    content: "";
    position: absolute;
    background-image: url('/asset_sandbox_2026/images/website/decor-halftonesecond-page.png');
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    top: 0;
    left: -50%;
    width: 990px;
    height: 100px;
    /* transform: translate(calc(100% + -170px), 0); */
    transform: translate(calc(100% + 360px), 0);
    z-index: -1;
}

.main-cover-page::after {
    content: "";
    position: absolute;
    background-image: url('/asset_sandbox_2026/images/website/decor-bubble-second-page.png');
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    width: 330px;
    height: 100px;
    top: 0;
    right: 50%;
    z-index: -1;
    transform: translate(calc(100% + 339px), 0);
}


@media (max-width: 1200px) {
    .main-cover-page::before {
        transform: translate(calc(100% + -130px), 0);
    }

    .main-cover-page::after {
        background-size: 210px;
        transform: translate(calc(100% + 250px), 0);
    }
}


@media (max-width: 992px) {
    .main-cover-page::before {
        transform: translate(calc(100% + -490px), 0)
    }

    .main-cover-page::after {
        background-size: 210px;
        transform: translate(calc(100% + 130px), 0);
    }
}


@media (max-width: 768px) {
    .main-cover-page::before {
        transform: translate(calc(100% + -490px), 0)
    }

    .main-cover-page::after {
        background-size: 210px;
        transform: translate(calc(100% + 70px), 0);
    }
}

@media (max-width: 576px) {

    .main-cover-page::before {
        transform: translate(calc(100% + -795px), 0);
    }

    .main-cover-page::after {
        background-size: 210px;
        transform: translate(calc(100% + -0px), 0);
    }

}


@media (max-width: 375px) {

    .main-cover-page::before {
        background-size: contain;
        transform: translate(calc(100% + -978px), 0);
    }

    .main-cover-page::after {
        background-size: 160px;
        transform: translate(calc(100% + -70px), 0);
    }

}


/* ----------------------------------------- @keyframes Animate */

@keyframes fadeInScale {
    from {
        opacity: 0;
        transform: scale(.95);
    }

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

/* ------------------------------------------ Label Sanbox Style */

.icon-sandbox {
    position: fixed;
    /* pointer-events: none; */
    width: 180px;
    top: 0;
    left: 0;
    transition: all .1s ease-in;
    z-index: 9999;
}

@media screen and (max-width: 768px) {
    .icon-sandbox {
        top: -3px;
        width: 100px;
    }
}

@media screen and (max-width: 576px) {
    .icon-sandbox {
        top: -4px;
        width: 70px;
    }
}


/* ------------------------------------------ Loading Style */

#loading {
    opacity: 1;
    transition: opacity 0.4s ease;
}

#loading.fade-out {
    opacity: 0;
}

.loading-card-lg,
.loading-card-md,
.loading-card-list {
    display: flex;
    justify-content: center;
    align-items: center;
}

.loading-card-lg {
    min-height: 400px;
}

.loading-card-md {
    min-height: 200px;
}

.loading-card-list {
    min-height: 100px;
}

.loading-shimmer {
    color: #555;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    flex-basis: calc(100%/3 - 10px);
    background-color: #1a1a1a;
    background-image: linear-gradient(-60deg, #1a1a1a, #1a1a1a 35%, #2a2a2a 50%, #1a1a1a 65%);

    box-sizing: border-box;
    background-size: cover;
    background-position: left center;
    background-attachment: fixed;
    background-repeat: no-repeat;
    animation: animate_shimmer 2s;
    animation-iteration-count: infinite;
}

@keyframes animate_shimmer {
    from {
        background-position: -800px 0;
    }

    to {
        background-position: 800px 0;
    }
}

/* ------------------------------------------ Loading Style 2 */

/* ===== Loader Config ===== */
.loader-animate-ball {

    --ball-size: 15px;
    --distance: calc(var(--ball-size) * 1.5);
    --move: calc(var(--ball-size) * 0.75);
    --gap: calc(var(--ball-size) * 0.5);

    width: calc(var(--ball-size) * 3.3);
    height: calc(var(--ball-size) * 3.3);

    animation: rotate-animate 1s infinite linear;
    transform-origin: center;
    will-change: transform;
}

/* ===== Balls ===== */
.loader-animate-ball::before,
.loader-animate-ball::after {
    content: "";
    display: block;
    width: var(--ball-size);
    height: var(--ball-size);
    border-radius: 50%;
    will-change: transform;
}

.loader-animate-ball::before {
    background-color: var(--color-loading-primary);
    box-shadow: var(--distance) 0 0 var(--color-loading-secondary);
    margin-bottom: var(--gap);
    animation: ball1-animate 1s infinite ease-in-out;
}

.loader-animate-ball::after {
    background-color: var(--color-loading-secondary);
    box-shadow: var(--distance) 0 0 var(--color-loading-primary);
    animation: ball2-animate 1s infinite ease-in-out;
}

/* ===== Rotate Container ===== */
@keyframes rotate-animate {
    0% {
        transform: rotate(0deg) scale(0.85);
    }

    50% {
        transform: rotate(360deg) scale(1.1);
    }

    100% {
        transform: rotate(720deg) scale(0.85);
    }
}


@keyframes ball1-animate {
    0% {
        box-shadow: var(--distance) 0 0 var(--color-loading-secondary);
    }

    50% {
        box-shadow: 0 0 0 var(--color-loading-secondary);
        margin-bottom: 0;
        transform: translate(var(--move), var(--move));
    }

    100% {
        box-shadow: var(--distance) 0 0 var(--color-loading-secondary);
        margin-bottom: var(--gap);
        transform: translate(0, 0);
    }
}


@keyframes ball2-animate {
    0% {
        box-shadow: var(--distance) 0 0 var(--color-loading-primary);
    }

    50% {
        box-shadow: 0 0 0 var(--color-loading-primary);
        margin-top: calc(var(--ball-size) * -1);
        transform: translate(var(--move), var(--move));
    }

    100% {
        box-shadow: var(--distance) 0 0 var(--color-loading-primary);
        margin-top: 0;
        transform: translate(0, 0);
    }
}

.loader-flash {
    width: 320px;
    height: 150px;
    display: block;
    margin: auto;
    position: relative;
    background: #FFF;
    box-sizing: border-box;
}

.loader-flash::after {
    content: '';
    width: calc(100% - 30px);
    height: calc(100% - 30px);
    top: 15px;
    left: 15px;
    position: absolute;
    background-image: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.5) 50%, transparent 80%), radial-gradient(circle 28px at 28px 28px, #DDD 99%, transparent 0), linear-gradient(#DDD 24px, transparent 0), linear-gradient(#DDD 18px, transparent 0), linear-gradient(#DDD 66px, transparent 0);
    background-repeat: no-repeat;
    background-size: 75px 130px, 55px 56px, 160px 30px, 260px 20px, 290px 56px;
    background-position: 0% 0, 0 0, 70px 5px, 70px 38px, 0px 66px;
    box-sizing: border-box;
    animation: animloader-flash 1s linear infinite;
}

@keyframes animloader-flash {
    0% {
        background-position: 0% 0, 0 0, 70px 5px, 70px 38px, 0px 66px;
    }

    100% {
        background-position: 150% 0, 0 0, 70px 5px, 70px 38px, 0px 66px;
    }
}


.loader-gfca {
    display: inline-block;
    animation: smokeout-animate 1s ease-in-out infinite alternate;
}

.loader-gfca img {
    opacity: .2;
    width: 130px;
    height: auto;
    display: block;
    /* filter: drop-shadow(0 0 1px white); */
}

@keyframes smokeout-animate {
    100% {
        opacity: 0.08;
        filter: blur(5px);
        transform: scale(1.05);
    }
}