/*
Theme Name: pixels-app
Description: This is a child theme for Flatsome Theme
Author: UX Themes
Template: flatsome
Version: 3.4
*/

/*************** ADD CUSTOM CSS HERE.   ***************/


@media only screen and (max-width: 48em) {
    /*************** ADD MOBILE ONLY CSS HERE  ***************/


}

body {
    font-family: "Open Sans", sans-serif;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: "Open Sans", sans-serif;
    font-weight: 700;
}

.section {
    padding: 0;
}

.sec_abcty {
    padding: 80px 0;
}

.sidebar-social a:hover {
    color: #df0024;
}

.sec_conso {
    background-color: rgb(248, 185, 5);
}

.sec_sk3 {
    background-color: #f7faf8;
}

.logo-left .logo {
    margin-right: 0;
}

#home_partners {
    margin: auto;
}

.contact {
    margin: auto;
}

/* css header */
.tm-header-top-info ul {
    margin: 0 !important;
    display: flex;
    gap: 25px;
    list-style: none;
}

.tm-header-top-info ul li {
    margin: 0;
    font-size: 15px;
}

.tm-header-top-info ul li a {
    color: #000;
}

.tm-header-top-info ul li span {
    padding-left: 10px;
    color: #000;
}

.header-top {
    border-bottom: 1px solid #DBDBDB99;
}

/* css ơage GGC*/
.sec_hero_ggc {
    background-image: url(/wp-content/uploads/2026/05/ChatGPT-Image-09_14_30-10-thg-5-2026.png);
    background-size: cover;
}

.row_mnhsasa h1 {
    font-size: 46px;
    color: #bf048d;
    margin-bottom: 55px;
}

.row_mnhsasa h1 span {
    font-style: italic;
    color: #16a34a;
}

.row_mnhsasa .btn_mmhsa {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    border-radius: 9999px;
    background: #f8b905;
    padding: 0.875rem 1.75rem;
    font-size: 16px;
    font-weight: 600;
    color: #000;
    box-shadow: 0 4px 14px rgba(22, 163, 74, 0.35);
    transition: transform 0.2s;
}

.col_mis_abs .col-inner {
    background-color: rgb(17, 140, 70);
    padding: 30px;
    border-radius: 10px;
    position: relative;
    min-width: 700px;
    z-index: 99;
}

.bomx_nbsa h2:before {
    content: "";
    background: linear-gradient(90deg, #e4ac59, rgba(255, 255, 255, 0.001) 80%);
    height: 2px;
    position: absolute;
    width: 70px;
    left: 0;
    bottom: -10px;
}

.bomx_nbsa h2 {
    position: relative;
    color: #fff;
}

.bomx_nbsa p {
    margin-top: 20px;
    color: #fff;
}

.btn_mmhsa i {
    top: unset !important;
}

.btn_mmhsa i:before {
    content: "\f218";
    font-family: FontAwesome;
    font-style: normal;
    font-weight: normal;
    text-decoration: inherit;
}

.img_mjsa {
    border-radius: 10px;
    overflow: hidden;
}

.omnhsa h2 {
    font-size: 46px;
    color: #686868;
    margin-bottom: 55px;
}

.omnhsa h2 span {
    font-style: italic;
    color: #16a34a;
}

.omnhsa h2 {
    font-size: 46px;
    color: #686868;
    max-width: 700px;
}

/**/
.wrap_vns {
    color: #2a2a2a;
}

.wrap_vns .heading {
    font-size: 46px;
    font-weight: 700;
    margin: 0 0 0.5rem;
    line-height: 1.2;
    color: #1a1a1a;
}

.wrap_vns .heading span {
    color: #118c46;
    font-style: italic;
}

.wrap_vns .sub {
    font-size: 16px;
    color: #000;
    margin: 0 0 2.5rem;
}

.wrap_vns .stat-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    padding: 2rem 0;
    border-top: 0.5px solid #c8bfb0;
    gap: 2rem;
}

.wrap_vns .stat-row:last-child {
    border-bottom: 0.5px solid #c8bfb0;
}

.stat-num {
    font-size: 42px;
    font-weight: 700;
    color: #1a1a1a;
    line-height: 1;
}

.wrap_vns .stat-num span {
    font-size: 36px;
    font-weight: 300;
    font-style: italic;
    color: #118c46;
    margin-left: 6px;
}

.wrap_vns .stat-desc {
    font-size: 16px;
    color: #000;
    line-height: 1.7;
}

/* ── .featured-grid ── */
.featured-grid {}

.featured-grid .grid-wrap {
    display: grid;
    grid-template-columns: 1fr;
    gap: 32px;
}

@media (min-width: 640px) {
    .featured-grid .grid-wrap {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 768px) {
    .featured-grid .grid-wrap {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* ── .featured-grid card ── */
.featured-grid .card {
    display: grid;
    grid-template-rows: auto auto 1fr;
    gap: 0;
    text-decoration: none;
    cursor: pointer;
    max-width: 650px;
    outline-offset: 2px;
}

.featured-grid .card:focus-visible {
    outline: 2px solid #1a6b3c;
}

/* ── .featured-grid card image wrapper ── */
.featured-grid .card__image-wrap {
    width: 100%;
    border-radius: 4px;
    position: relative;
    overflow: hidden;
    background-color: #e5e7eb;
    aspect-ratio: 4 / 3;
}

.featured-grid .card__image {
    border-radius: 4px;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.4s ease;
}

@media (prefers-reduced-motion: no-preference) {
    .featured-grid .card:hover .card__image {
        transform: scale(1.05);
    }
}

/* ── .featured-grid card caption ── */
.featured-grid .card__caption {
    width: 100%;
    margin-top: 6px;
}

.featured-grid .card__credit {
    font-size: 0.75rem;
    line-height: 1.4;
    color: #fff;
    margin: 0;
}

/* ── .featured-grid card body ── */
.featured-grid .card__body {
    width: 100%;
    margin-top: 10px;
}

.featured-grid .card__eyebrow {
    font-size: 16px;
    font-weight: 700;
    padding-bottom: 4px;
    color: #fff;
    margin: 0;
}

.featured-grid .card__title {
    font-size: 1.125rem;
    font-weight: 600;
    font-style: normal;
    display: inline;
    color: #fff;
    margin: 0;
}

.featured-grid .card__title-link {
    display: inline;
    color: #fff;
    text-decoration: none;
    transition: text-decoration 0.2s;
}

.featured-grid .card:hover .card__title-link {
    text-decoration: underline;
    text-decoration-thickness: 3px;
    text-underline-offset: 4px;
}

.featured-grid .card__desc {
    font-size: 1rem;
    padding-top: 4px;
    color: #fff;
    margin: 0;
}

.mnhsd h2 {
    font-size: 46px;
    color: #fff;
    margin-bottom: 55px;
}

.mnhsd h2 span {
    color: #fff;
    font-weight: 300;
    font-style: italic;
    display: block;
}

.omnhsas h2 {
    text-align: center;
    font-size: 46px;
    color: #000;
    margin-bottom: 55px;
}

.omnhsas h2 span {
    color: #118c46;
    font-style: italic;
}

.anh_thsa .col {
    padding-bottom: 0;
}

.anh_thsa .col .box-text {
    display: none;
}

.anh_thsa .col .col-inner {
    display: flex;
    align-items: center;
    border-radius: 5px;
    overflow: hidden;
    justify-content: center;
    padding: 15px;
    box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
}

.anh_thsa .col .col-inner img {
    width: 100%;
    object-fit: contain;
    height: 150px;
}

.slider-nav-push:not(.slider-nav-reveal) .flickity-prev-next-button {
    margin-top: auto !important;
}

.secJoin {
    border-top: 0px solid #dddddd96;
}

.alo_mnhsssa p {
    margin: 0;
}

/**/
.section_join {
    z-index: 10;
    max-width: 760px;
    margin: auto;
    position: relative;
    padding: 96px 24px;
    background: #f07e07;
    color: #f0ede6;
    overflow: hidden;
    text-align: center;
    border-radius: 25px;
    margin-bottom: 55px;
}

.accent-line {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin-bottom: 36px;
    opacity: 0;
    animation: fade-down 0.8s ease forwards 0.2s;
}

.accent-line::before,
.accent-line::after {
    content: '';
    height: 1px;
    width: 60px;
    background: linear-gradient(90deg, transparent, #00c9c8);
}

.accent-line::after {
    background: linear-gradient(90deg, #00c9c8, transparent);
}

.accent-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #00c9c8;
    box-shadow: 0 0 12px #00c9c8, 0 0 24px #00c9c8;
    animation: pulse-dot 2s ease-in-out infinite;
}

@keyframes pulse-dot {

    0%,
    100% {
        box-shadow: 0 0 12px #00c9c8, 0 0 24px #00c9c8;
    }

    50% {
        box-shadow: 0 0 20px #00e5e4, 0 0 40px #00e5e4;
    }
}

.heading-wrap {
    position: relative;
    margin-bottom: 40px;
    opacity: 0;
    animation: fade-up 0.9s cubic-bezier(0.16, 1, 0.3, 1) forwards 0.4s;
}

.heading-sub {
    font-size: 11px;
    font-weight: 400;
    letter-spacing: 0.35em;
    text-transform: uppercase;
    color: #00c9c8;
    margin-bottom: 12px;
    display: block;
}

.section_join h2 {
    font-size: 46px;
    line-height: 0.92;
    letter-spacing: 0.04em;
    color: #ffffff;
    position: relative;
}

.section_join h2 .highlight {
    position: relative;
    display: inline-block;
    color: #78bf45;
    text-shadow: 0 0 60px rgba(0, 201, 200, 0.4);
}

.section_join h2 .highlight::after {
    content: attr(data-text);
    position: absolute;
    inset: 0;
    color: transparent;
    -webkit-text-stroke: 1px rgba(0, 201, 200, 0.3);
    animation: flicker 6s ease-in-out infinite;
}

@keyframes flicker {

    0%,
    95%,
    100% {
        opacity: 0;
    }

    96%,
    99% {
        opacity: 0.5;
    }
}

.divider {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    margin: 40px auto;
    opacity: 0;
    animation: fade-up 0.8s ease forwards 0.6s;
}

.divider-line {
    height: 1px;
    width: 80px;
    background: linear-gradient(90deg, transparent, rgb(255 255 255 / 40%));
}

.divider-line:last-child {
    background: linear-gradient(90deg, rgb(255 255 255 / 40%), transparent);
}

.divider-icon {
    width: 32px;
    height: 32px;
    border: 1px solid #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
}

.body-text {
    font-size: 22px;
    font-weight: 300;
    line-height: 1.85;
    color: #fff;
    max-width: 640px;
    margin: 0 auto 52px;
    opacity: 0;
    animation: fade-up 0.9s ease forwards 0.7s;
}

.body-text a {
    color: #fff;
    text-decoration: underline;
    text-underline-offset: 3px;
    font-style: italic;
    transition: color 0.3s, text-shadow 0.3s;
}

.body-text a:hover {
    color: #00e5e4;
    text-shadow: 0 0 16px rgba(0, 229, 228, 0.6);
}

.cta-wrap {
    opacity: 0;
    animation: fade-up 0.9s ease forwards 0.9s;
}

.cta-btn {
    position: relative;
    display: inline-block;
    background: none;
    border: none;
    cursor: pointer;
    text-decoration: none;
}

.cta-btn-inner {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px 48px;
    background: #118c46;
    color: #fff;
    font-size: 13px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    transition: 0.3s;
    clip-path: polygon(12px 0%, 100% 0%, calc(100% - 12px) 100%, 0% 100%);
}

.cta-btn:hover .cta-btn-inner {
    background: #118c46;
    transform: translateY(-3px);
    box-shadow: 0 20px 60px rgba(0, 201, 200, 0.4);
}

.cta-arrow {
    transition: transform 0.3s ease;
    display: inline-block;
}

.cta-btn:hover .cta-arrow {
    transform: translateX(5px);
}

.cta-btn::before {
    content: '';
    position: absolute;
    inset: -6px;
    clip-path: polygon(14px 0%, 100% 0%, calc(100% - 14px) 100%, 0% 100%);
    border: 1px solid rgba(0, 201, 200, 0.25);
    transition: 0.3s;
}

.cta-btn:hover::before {
    border-color: rgba(0, 229, 228, 0.5);
    inset: -10px;
}

@keyframes fade-up {
    from {
        opacity: 0;
        transform: translateY(24px);
    }

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

@keyframes fade-down {
    from {
        opacity: 0;
        transform: translateY(-16px);
    }

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

@media (max-width: 600px) {
    .section {
        padding: 60px 24px;
    }
}

/**/
/* CSS */
.nav-social-group {
    display: none;
    align-items: center;
    gap: 12px;
}

@media (min-width: 1024px) {
    .nav-social-group {
        display: flex;
    }
}

.nav-social-group__icons {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #166534;
}

.nav-social-group__icon-link {
    height: 32px;
    width: 32px;
    border-radius: 50%;
    background-color: #dcfce7;
    color: inherit;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.15s ease, color 0.15s ease;
    text-decoration: none;
}

.nav-social-group__icon-link:hover {
    background-color: #166534;
    color: #ffffff;
}

.nav-social-group__donate-btn {
    margin-left: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 9999px;
    background-color: #166534;
    color: #ffffff;
    padding: 10px 24px;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    transition: background-color 0.15s ease;
}

.nav-social-group__donate-btn:hover {
    background-color: #14532d;
}

/* hero slider */
.hero-slider-wrap {
    position: relative;
    width: 100%;
    overflow: hidden;
}

/* ── OWL ITEM ───────────────────────────────── */
.owl-item-inner {
    position: relative;
    display: flex;
    align-items: center;
    overflow: hidden;
    height: 100vh;
}

/* Background image layer */
.slide-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    transform: scale(1.08);
    transition: transform 6s ease;
}

/* Dark gradient overlay */
.slide-bg::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(105deg,
            rgba(10, 10, 15, .88) 0%,
            rgba(10, 10, 15, .55) 55%,
            rgba(10, 10, 15, .25) 100%);
}

.content_wtkvn p:nth-child(1):after {
    content: "";
    height: 1px;
    width: 150px;
    background-color: #dd3333;
    margin: 16px 0;
    display: block;
}

/* Subtle grain texture */
.slide-bg::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.06'/%3E%3C/svg%3E");
    background-size: 180px;
    opacity: .35;
    z-index: 1;
    pointer-events: none;
}

/* ── CONTENT ────────────────────────────────── */
.slide-content {
    position: relative;
    z-index: 10;
    padding: 0px;
    max-width: 1270px;
    margin: 0 auto;
    width: 100%;
}

.slide-tag {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: #e8c97a;
    margin-bottom: 22px;
}

.slide-tag::before {
    content: '';
    display: block;
    width: 28px;
    height: 1px;
    background: #e8c97a;
}

.slide-title {
    font-size: clamp(36px, 5vw, 62px);
    line-height: 1.08;
    color: #fff;
    margin-bottom: 0px;
    max-width: 700px;
}

.slide-title em {
    font-style: italic;
    color: #e8c97a;
}

.slide-desc {
    font-size: 15px;
    font-weight: 300;
    line-height: 1.75;
    color: rgba(245, 240, 232, .45);
    max-width: 420px;
    margin-bottom: 36px;
}

.slide-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: .08em;
    text-decoration: none;
    color: #0a0a0f;
    background: #e8c97a;
    padding: 14px 32px;
    border-radius: 2px;
    transition: background .3s, gap .3s;
}

.slide-btn:hover {
    background: #f0d88a;
    gap: 16px;
}

.slide-btn svg {
    transition: transform .3s;
}

.slide-btn:hover svg {
    transform: translateX(4px);
}

/* ── SLIDE NUMBER ───────────────────────────── */
.slide-number {
    position: absolute;
    bottom: 40px;
    right: 80px;
    z-index: 10;
    font-family: 'Playfair Display', serif;
    font-size: 11px;
    letter-spacing: .15em;
    color: rgba(245, 240, 232, .45);
}

.slide-number span {
    font-size: 36px;
    font-weight: 700;
    color: #fff;
    line-height: 1;
    display: block;
}

/* ── PROGRESS BAR ───────────────────────────── */
.slider-progress {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 2px;
    width: 0%;
    background: #e8c97a;
    z-index: 20;
    transition: none;
}

.slider-progress.animate {
    transition: width 5s linear;
    width: 100%;
}

/* ── OWL CUSTOM DOTS ────────────────────────── */
.hero-slider-wrap .owl-dots {
    position: absolute;
    bottom: 44px;
    left: 80px;
    display: flex;
    gap: 8px;
    z-index: 20;
}

.hero-slider-wrap .owl-dot span {
    width: 24px;
    height: 2px;
    border-radius: 0;
    background: rgba(245, 240, 232, .25);
    transition: background .3s, width .3s;
    margin: 0;
}

.hero-slider-wrap .owl-dot.active span {
    width: 44px;
    background: #e8c97a;
}

/* ── OWL NAV ────────────────────────────────── */
.hero-slider-wrap .owl-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 100%;
    display: flex;
    justify-content: space-between;
    pointer-events: none;
    padding: 0 20px;
    z-index: 20;
}

.hero-slider-wrap .owl-nav button {
    pointer-events: all;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: rgba(245, 240, 232, .08) !important;
    border: 1px solid rgba(245, 240, 232, .15) !important;
    backdrop-filter: blur(8px);
    display: flex !important;
    align-items: center;
    justify-content: center;
    transition: background .3s, border-color .3s;
    color: #fff !important;
    font-size: 0 !important;
}

.hero-slider-wrap .owl-nav button::after {
    content: '';
    display: block;
    width: 10px;
    height: 10px;
    border-top: 1.5px solid #fff;
    border-right: 1.5px solid #fff;
}

.hero-slider-wrap .owl-prev::after {
    transform: rotate(-135deg) translateY(-3px);
}

.hero-slider-wrap .owl-next::after {
    transform: rotate(45deg) translateY(-3px);
}

.hero-slider-wrap .owl-nav button:hover {
    background: rgba(232, 201, 122, .18) !important;
    border-color: #e8c97a !important;
}

/* ── TEXT ANIMATION CLASSES ─────────────────── */
/* Elements start hidden */
.slide-tag,
.slide-title,
.title-line,
.slide-desc,
.slide-btn,
.slide-number {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 0.65s cubic-bezier(.22, 1, .36, 1), transform 0.65s cubic-bezier(.22, 1, .36, 1);
}

/* When active slide is set */
.owl-item.active .slide-tag {
    opacity: 1;
    transform: none;
    transition-delay: .1s;
}

.owl-item.active .slide-title {
    opacity: 1;
    transform: none;
    transition-delay: .25s;
}

.owl-item.active .slide-desc {
    opacity: 1;
    transform: none;
    transition-delay: .4s;
}

.owl-item.active .slide-btn {
    opacity: 1;
    transform: none;
    transition-delay: .55s;
}

.owl-item.active .slide-number {
    opacity: 1;
    transform: none;
    transition-delay: .35s;
}

/* Bg zoom when active */
.owl-item.active .slide-bg {
    transform: scale(1);
}

/* Decorative vertical line */
.deco-line {
    position: absolute;
    left: 64px;
    top: 0;
    bottom: 0;
    width: 1px;
    background: linear-gradient(to bottom, transparent, #e8c97a 30%, #e8c97a 70%, transparent);
    opacity: .18;
    z-index: 5;
    display: none;
}

.slide-number {
    display: none;
}

/**/
.sec_abcty {

    background-size: cover;
}

.sabe-tag {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 16px;
    font-weight: 500;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: #118c46;
    margin-bottom: 5px;
}

.box_ghnsa h2 span {
    display: block;
    font-size: 46px;
}

.sabe-tag:before {
    content: '';
    display: block;
    width: 28px;
    height: 1px;
    background: #e8c97a;
}

.img_absn {
    border-radius: 24px;
    overflow: hidden;
}

span.air {
    color: #409762;
}

span.water {
    color: #1a4561;
}

.box_ghnsa p {
    margin-bottom: 0;
}

.img_absn img {
    height: 500px;
    object-fit: cover;
}

.line_abs {
    height: 1px;
    width: 150px;
    background-color: #dd3333;
    margin: 16px 0;
}

.btn_ourstr {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    border-radius: 9999px;
    background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
    padding: 0.875rem 2.75rem;
    font-size: 16px;
    font-weight: 600;
    color: #ffffff;
    box-shadow: 0 4px 14px rgba(22, 163, 74, 0.35);
    transition: transform 0.2s;
    margin-top: 25px;
}

.btn_ourstr i:before {
    content: "\f061";
    font-family: FontAwesome;
    font-style: normal;
    font-weight: normal;
    text-decoration: inherit;
}

.btn_ourstr i {
    top: unset !important;
}



/* ===== .con_so_an_tuong – scoped styles ===== */
.sec_conso {
    background-size: cover;
}

.con_so_an_tuong {
    position: relative;
    margin-left: auto;
    margin-right: auto;
    padding: 6rem 0rem;
}

/* ---------- header ---------- */
.con_so_an_tuong .csat-header {
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

.con_so_an_tuong .csat-eyebrow-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.con_so_an_tuong .csat-eyebrow {
    font-size: 1.05rem;
    font-weight: 600;
    letter-spacing: 0.3em;
    color: #fff;
    text-transform: uppercase;
    margin: 0;
}

.con_so_an_tuong .csat-divider-svg {
    margin-top: 0.75rem;
    height: 1.25rem;
    width: 4rem;
    color: #fff;
}

.con_so_an_tuong .csat-title {
    margin-top: 1.5rem;
    font-size: 2.25rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: #fff;
    line-height: 1.15;
}

@media (min-width: 768px) {
    .con_so_an_tuong .csat-title {
        font-size: 3rem;
    }
}

.con_so_an_tuong .csat-desc {
    margin-top: 1rem;
    font-size: 1rem;
    line-height: 1.75;
    color: #fff;
}

/* ---------- grid ---------- */
.con_so_an_tuong .csat-grid {
    margin-top: 4rem;
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
}

@media (min-width: 768px) {
    .con_so_an_tuong .csat-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
    .con_so_an_tuong .csat-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* ---------- card ---------- */
.con_so_an_tuong .csat-card {
    position: relative;
    overflow: hidden;
    border-radius: 1rem;
    background-color: #ffffff;
    padding: 1.75rem;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
    transition: transform 0.3s ease;
}

.con_so_an_tuong .csat-card:hover {
    transform: translateY(-4px);
}

/* decorative blob */
.con_so_an_tuong .csat-card-blob {
    pointer-events: none;
    position: absolute;
    bottom: -2rem;
    right: -2.5rem;
    height: 11rem;
    width: 14rem;
    border-radius: 50%;
    background-color: #f8d905;
    opacity: 0.8;
}

/* decorative background icon */
.con_so_an_tuong .csat-card-bg-icon {
    pointer-events: none;
    position: absolute;
    bottom: 0.75rem;
    right: 1rem;
    height: 5rem;
    width: 5rem;
    color: rgba(17, 24, 39, 0.12);
}

/* card inner layout */
.con_so_an_tuong .csat-card-inner {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 1.25rem;
}

/* icon circle */
.con_so_an_tuong .csat-icon-circle {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 5rem;
    width: 5rem;
    border-radius: 9999px;
    background-color: rgba(74, 222, 128, 0.2);
}

.con_so_an_tuong .csat-icon-circle svg {
    height: 2.5rem;
    width: 2.5rem;
    color: #111827;
}

/* card text block */
.con_so_an_tuong .csat-card-body {
    min-width: 0;
}

.con_so_an_tuong .csat-number {
    font-size: 2.25rem;
    font-weight: 700;
    line-height: 1;
    color: #118c46;
}

.con_so_an_tuong .csat-number-bar {
    margin-top: 0.5rem;
    height: 3px;
    width: 2.5rem;
    border-radius: 9999px;
    background-color: #4ade80;
}

.con_so_an_tuong .csat-card-title {
    margin-top: 0.75rem;
    font-size: 1.125rem;
    font-weight: bold;
    color: #111827;
}

.con_so_an_tuong .csat-card-text {
    margin-top: 0.5rem;
    font-size: 16px;
    line-height: 1.6;
    color: #000;
    font-weight: 600;
}

.con_so_an_tuong .csat-card .csat-card-bg-icon {
    display: none;
}

/* ===== #campaigns ===== */

#campaigns {
    padding-top: 96px;
    padding-bottom: 96px;
    background-color: #ffffff;
    margin: auto;
}

#campaigns .campaigns__container {}

/* ── Header row ── */
#campaigns .campaigns__header {
    display: flex;
    flex-direction: column;
    gap: 24px;
    margin-bottom: 56px;
}

#campaigns .campaigns__header-left {
    flex: 1;
}

#campaigns .campaigns__badge {
    display: inline-block;
    background-color: #e8f5ee;
    color: #1a9e4c;
    font-size: 16px;
    font-weight: 600;
    padding: 6px 16px;
    border-radius: 9999px;
    margin-bottom: 12px;
}

#campaigns .campaigns__title {
    font-size: 46px;
    font-weight: 800;
    color: #0f2117;
    line-height: 1.3;
    margin: 0;
}

#campaigns .campaigns__subtitle {
    color: #6b7280;
    margin-top: 8px;
    max-width: 576px;
    margin-bottom: 0;
    font-size: 1rem;
}

#campaigns .campaigns__view-all {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    border-radius: 9999px;
    background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
    padding: 1rem 1.75rem;
    font-size: 16px;
    font-weight: 600;
    color: #ffffff;
    box-shadow: 0 4px 14px rgba(22, 163, 74, 0.35);
    transition: transform 0.2s;
}

#campaigns .campaigns__view-all:hover {
    gap: 12px;
}

/* ── Main grid ── */
#campaigns .campaigns__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
    margin-bottom: 24px;
}

/* ── Featured card ── */
#campaigns .campaigns__featured {
    position: relative;
    border-radius: 16px;
    overflow: hidden;
    cursor: pointer;
}

#campaigns .campaigns__featured-img {
    width: 100%;
    height: 400px;
    object-fit: cover;
    display: block;
    transition: transform 0.5s;
}

#campaigns .campaigns__featured:hover .campaigns__featured-img {
    transform: scale(1.05);
}

#campaigns .campaigns__featured-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.2) 50%, transparent 100%);
}

#campaigns .campaigns__featured-body {
    position: absolute;
    inset: 0;
    padding: 28px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

#campaigns .campaigns__tag--active {
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 600;
    padding: 4px 12px;
    border-radius: 9999px;
    margin-bottom: 12px;
    align-self: flex-start;
    background-color: #dcfce7;
    color: #15803d;
}

#campaigns .campaigns__featured-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: #ffffff;
    line-height: 1.3;
    margin: 0 0 12px;
}

#campaigns .campaigns__featured-desc {
    color: rgba(255, 255, 255, 0.8);
    font-size: 16px;
    margin: 0 0 16px;
}

#campaigns .campaigns__meta-list {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    list-style: none;
    margin: 0;
    padding: 0;
}

#campaigns .campaigns__meta-item {
    display: flex;
    align-items: center;
    gap: 6px;
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.75rem;
}

/* ── Side cards ── */
#campaigns .campaigns__side {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

#campaigns .campaigns__card {
    display: flex;
    gap: 0px;
    background-color: #f7faf8;
    border-radius: 16px;
    overflow: hidden;
    cursor: pointer;
    transition: box-shadow 0.2s;
}

#campaigns .campaigns__card:hover {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}

#campaigns .campaigns__card-thumb {
    width: 190px;
    flex-shrink: 0;
    overflow: hidden;
}

#campaigns .campaigns__card-img {
    width: 100%;
    height: 100%;
    min-height: 190px;
    object-fit: cover;
    display: block;
    transition: transform 0.5s;
}

#campaigns .campaigns__card:hover .campaigns__card-img {
    transform: scale(1.05);
}

#campaigns .campaigns__card-body {
    flex: 1;
    padding: 16px;
}

#campaigns .campaigns__tag--new {
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 600;
    padding: 2px 10px;
    border-radius: 9999px;
    margin-bottom: 8px;
    background-color: #dbeafe;
    color: #1d4ed8;
}

#campaigns .campaigns__tag--upcoming {
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 600;
    padding: 2px 10px;
    border-radius: 9999px;
    margin-bottom: 8px;
    background-color: #ffedd5;
    color: #c2410c;
}

#campaigns .campaigns__card-title {
    font-size: 1rem;
    font-weight: 700;
    color: #0f2117;
    line-height: 1.3;
    margin: 0 0 8px;
}

#campaigns .campaigns__card-desc {
    color: #6b7280;
    font-size: 16px;
    margin: 0 0 12px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

#campaigns .campaigns__card-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    list-style: none;
    margin: 0;
    padding: 0;
}

#campaigns .campaigns__card-meta-item {
    display: flex;
    align-items: center;
    gap: 4px;
    color: #9ca3af;
    font-size: 0.75rem;
}

/* ── CTA banner ── */
#campaigns .campaigns__cta {
    margin-top: 24px;
    background: linear-gradient(to right, #1a9e4c, #0d7a3a);
    border-radius: 16px;
    padding: 32px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
}

#campaigns .campaigns__cta-title {
    font-size: 24px;
    font-weight: 700;
    color: #ffffff;
    margin: 0 0 4px;
}

#campaigns .campaigns__cta-subtitle {
    color: rgba(255, 255, 255, 0.8);
    font-size: 16px;
    margin: 0;
}

#campaigns .campaigns__cta-btn {
    flex-shrink: 0;
    background-color: #ffffff;
    color: #1a9e4c;
    font-weight: 600;
    padding: 12px 24px;
    border-radius: 9999px;
    text-decoration: none;
    transition: background-color 0.2s;
    white-space: nowrap;
}

#campaigns .campaigns__cta-btn:hover {
    background-color: #f3f4f6;
}

/* ── md breakpoint (768px+) ── */
@media (min-width: 768px) {
    #campaigns .campaigns__header {
        flex-direction: row;
        align-items: flex-end;
        justify-content: space-between;
    }

    #campaigns .campaigns__cta {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }
}

/* ── lg breakpoint (1024px+) ── */
@media (min-width: 1024px) {
    #campaigns .campaigns__container {
        padding-left: 0px;
        padding-right: 0px;
    }

    #campaigns .campaigns__grid {
        grid-template-columns: 1fr 1fr;
    }
}

/**/
.section--consulting {
    background: #f6f3ea;
    padding: 80px 0;
}

.section--lifestyle {
    background: #f1ede1;
    padding: 80px 0;
}

.grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 56px;
    align-items: center;
}

/* Eyebrow */
.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.12em;
    color: #118c46;
    text-transform: uppercase;
    margin-bottom: 22px;
}

.eyebrow__icon {
    display: inline-flex;
    width: 22px;
    height: 22px;
    color: #3c9a4f;
}

.eyebrow__icon svg {
    width: 100%;
    height: 100%;
}

/* Heading */
.consulting__content .heading {
    font-size: 46px;
    line-height: 1.1;
    font-weight: 600;
    color: #1f4d2b;
    margin: 0 0 18px;
    letter-spacing: -0.01em;
}

.heading--en {
    font-weight: 600;
    font-size: 46px;
}

.text-accent {
    color: #4caf50;
}

.heading__underline {
    display: block;
    width: 64px;
    height: 3px;
    background: #3c9a4f;
    border-radius: 2px;
    margin-bottom: 26px;
}

/* Lead text */
.consulting__content .lead {
    color: #000;
    font-size: 16px;
    margin: 0 0 12px;
}

/* Benefit cards */
.benefits {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
    margin: 16px 0;
    max-width: 560px;
}

.benefit {
    background: #ffffff;
    border-radius: 18px;
    padding: 18px;
    box-shadow: 0 4px 14px rgba(40, 60, 40, 0.06);
    display: flex;
    flex-direction: column;
    gap: 14px;
    min-height: 140px;
    margin-bottom: 0;
}

.benefit p {
    margin: 0;
    font-size: 16px;
    font-weight: 500;
    color: #000;
    line-height: 1.45;
}

.benefit__icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #eaf5ec;
    color: #3c9a4f;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.benefit__icon svg {
    width: 20px;
    height: 20px;
}

/* Buttons */
.consulting__content .btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-weight: 600;
    font-size: 14px;
    letter-spacing: 0.06em;
    cursor: pointer;
    border: none;
    transition: transform .15s ease, box-shadow .2s ease, background .2s ease;
}

.btn--primary {
    background: #2a6b3a;
    color: #fff;
    padding: 16px 28px;
    border-radius: 10px;
    box-shadow: 0 4px 14px rgba(40, 60, 40, 0.06);
}

.btn--primary:hover {
    background: #1f4d2b;
    transform: translateY(-1px);
}

.btn--pill {
    background: #2f7d3f;
    color: #fff;
    padding: 16px 32px;
    border-radius: 999px;
    box-shadow: 0 4px 14px rgba(40, 60, 40, 0.06);
}

.btn--pill:hover {
    background: #2a6b3a;
    transform: translateY(-1px);
}

/* Media */
.consulting__media {
    position: relative;
    border-radius: 28px;
    overflow: hidden;
    box-shadow: 0 12px 32px rgba(40, 60, 40, 0.10);
    aspect-ratio: 4 / 5;
}

.lifestyle__media {
    position: relative;
    border-radius: 28px;
    overflow: hidden;
    box-shadow: 0 12px 32px rgba(40, 60, 40, 0.10);
    aspect-ratio: 5 / 5;
}

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

.dots {
    position: absolute;
    top: -18px;
    right: 18px;
    width: 80px;
    height: 28px;
    background-image: radial-gradient(#6cc070 1.5px, transparent 1.6px);
    background-size: 10px 10px;
    opacity: .8;
    z-index: 2;
}

/* Tag pill on image */
.media-tag {
    position: absolute;
    left: 24px;
    right: 24px;
    bottom: 24px;
    background: #2a6b3a;
    color: #fff;
    border-radius: 999px;
    padding: 14px 22px;
    display: flex;
    align-items: center;
    gap: 14px;
    box-shadow: 0 12px 32px rgba(40, 60, 40, 0.10);
}

.media-tag__icon {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: #fff;
    color: #3c9a4f;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 44px;
}

.media-tag__icon svg {
    width: 22px;
    height: 22px;
}

.media-tag__text strong {
    display: block;
    font-size: 14px;
    letter-spacing: 0.08em;
}

.media-tag__text span {
    display: block;
    font-size: 12px;
    letter-spacing: 0.18em;
    opacity: .9;
}

/* Lifestyle badge card */
.badge-card {
    position: absolute;
    left: 24px;
    bottom: 24px;
    background: #2f7d3f;
    color: #fff;
    border-radius: 22px;
    padding: 22px 26px;
    box-shadow: 0 12px 32px rgba(40, 60, 40, 0.10);
    max-width: 280px;
}

.badge-card h3 br {
    display: none;
}

.badge-card__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 14px;
    background: #fff;
    color: #3c9a4f;
    margin-bottom: 14px;
}

.badge-card__icon svg {
    width: 30px;
    height: 30px;
}

.badge-card h3 {
    font-size: 24px;
    line-height: 1.05;
    font-weight: 800;
    letter-spacing: 0.04em;
    margin: 0 0 12px;
    color: #fff;
}

.badge-card p {
    font-size: 12px;
    margin: 0;
    opacity: .9;
    line-height: 1.4;
}

/* Checklist */
.checklist {
    display: flex;
    flex-direction: column;
    gap: 18px;
    margin: 28px 0 32px;
}

.checklist li {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    margin-bottom: 0;
}

.benefit p br {
    display: none;
}

.checklist p {
    margin: 0;
    font-size: 16px;
    color: #000;
    line-height: 1.55;
}

.check {
    flex: 0 0 22px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #4caf50;
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: 2px;
}

.check svg {
    width: 14px;
    height: 14px;
}

/* Responsive */
@media (max-width: 960px) {
    .grid-2 {
        grid-template-columns: 1fr;
        column-gap: 40px;
    }

    .benefits {
        grid-template-columns: repeat(2, 1fr);
        max-width: 100%;
    }

    .section {
        padding: 56px 0;
    }

    .consulting__media,
    .lifestyle__media {
        aspect-ratio: 4 / 4;
    }

}

@media (max-width: 520px) {
    .benefits {
        grid-template-columns: 1fr;
    }

    .media-tag {
        padding: 12px 16px;
    }

    .media-tag__text strong {
        font-size: 12px;
    }

    .media-tag__text span {
        font-size: 10px;
    }

    .badge-card h3 {
        font-size: 20px;
    }
}

/* ===== #events SECTION ===== */
#events {
    padding: 6rem 0;
    background: #ffffff;
    margin: auto;
}

#events .events__container {
    margin: 0 auto;
}

/* ===== #events HEADER ROW ===== */
#events .events__header {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    margin-bottom: 3.5rem;
}

@media (min-width: 768px) {
    #events .events__header {
        flex-direction: row;
        align-items: flex-end;
        justify-content: space-between;
    }
}

#events .events__header-left {
    /* left side */
}

#events .events__badge {
    display: inline-block;
    background: #e8f5ee;
    color: #1a9e4c;
    font-size: 16px;
    font-weight: 600;
    padding: 0.375rem 1rem;
    border-radius: 9999px;
    margin-bottom: 0.75rem;
}

#events .events__title {
    font-size: 46px;
    font-weight: 800;
    color: #0f2117;
    line-height: 1.3;
}

#events .events__subtitle {
    color: #000;
    margin-top: 0.5rem;
    margin-bottom: 0;
}

#events .events__view-all {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: #1a9e4c;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    transition: gap 0.2s;
}

#events .events__view-all:hover {
    gap: 0.75rem;
}

#events .events__view-all svg {
    flex-shrink: 0;
}

/* ===== #events GRID ===== */
#events .events__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
}

@media (min-width: 768px) {
    #events .events__grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
    #events .events__grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* ===== #events CARD ===== */
#events .events__card {
    background: #ffffff;
    border: 1px solid #f3f4f6;
    border-radius: 1rem;
    padding: 1.5rem;
    cursor: pointer;
    transition: box-shadow 0.3s, transform 0.3s;
}

#events .events__card:hover {
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
    transform: translateY(-0.25rem);
}

#events .events__card-body {
    display: flex;
    gap: 1rem;
}

/* ===== #events DATE BOX ===== */
#events .events__date-box {
    flex-shrink: 0;
    width: 3.5rem;
    height: 4rem;
    background: #f7faf8;
    border-radius: 0.75rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border: 1px solid #f3f4f6;
}

#events .events__date-day {
    font-size: 1.5rem;
    line-height: 1;
    font-weight: 800;
    color: #1a9e4c;
}

#events .events__date-month {
    font-size: 0.75rem;
    font-weight: 500;
    color: #6b7280;
}

/* ===== #events CARD CONTENT ===== */
#events .events__card-content {
    flex: 1;
    min-width: 0;
}

#events .events__tag {
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.125rem 0.625rem;
    border-radius: 9999px;
    margin-bottom: 0.5rem;
}

#events .events__tag--green {
    background: #dcfce7;
    color: #15803d;
}

#events .events__tag--blue {
    background: #dbeafe;
    color: #1d4ed8;
}

#events .events__tag--emerald {
    background: #d1fae5;
    color: #065f46;
}

#events .events__tag--purple {
    background: #f3e8ff;
    color: #7e22ce;
}

#events .events__tag--orange {
    background: #ffedd5;
    color: #c2410c;
}

#events .events__card-title {
    font-size: 16px;
    font-weight: 700;
    color: #0f2117;
    line-height: 1.4;
    margin-bottom: 0.75rem;
    transition: color 0.2s;
    min-height: 43px;
}

#events .events__card:hover .events__card-title {
    color: #1a9e4c;
}

#events .events__meta {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}

#events .events__meta-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: #000;
    font-size: 14px;
}

#events .events__meta-item svg {
    flex-shrink: 0;
}

#events .events__meta-location {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ===== #events PROGRESS ===== */
#events .events__progress-wrap {
    margin-top: 0.75rem;
}

#events .events__progress-track {
    width: 100%;
    height: 0.375rem;
    background: #f3f4f6;
    border-radius: 9999px;
    overflow: hidden;
}

#events .events__progress-fill {
    height: 100%;
    background: #1a9e4c;
    border-radius: 9999px;
    transition: width 0.3s;
}

#events .events__progress-labels {
    display: flex;
    justify-content: space-between;
    margin-top: 0.25rem;
}

#events .events__progress-pct {
    font-size: 0.75rem;
    color: #9ca3af;
}

#events .events__progress-left {
    font-size: 0.75rem;
    font-weight: 500;
    color: #1a9e4c;
}

/* ===== #events REGISTER BUTTON ===== */
#events .events__btn {
    margin-top: 1rem;
    width: 100%;
    padding: 0.8rem 0;
    border: 2px solid #1a9e4c;
    color: #1a9e4c;
    border-radius: 0.75rem;
    font-size: 16px;
    font-weight: 600;
    background: transparent;
    cursor: pointer;
    transition: background 0.2s, color 0.2s;
    display: block;
    text-align: center;
}

#events .events__btn:hover {
    background: #1a9e4c;
    color: #ffffff;
}

/* ===== #news_home_page ===== */
#news_home_page {
    padding-top: 96px;
    padding-bottom: 96px;
    background-color: #f7faf8;
    margin: auto;
}

#news_home_page .container {
    margin-left: auto;
    margin-right: auto;
    padding-left: 16px;
    padding-right: 16px;
}

/* --- Header row --- */
#news_home_page .header-row {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 56px;
}

@media (min-width: 768px) {
    #news_home_page .header-row {
        flex-direction: row;
        align-items: flex-end;
    }
}

#news_home_page .header-badge {
    display: inline-block;
    background-color: #e8f5ee;
    color: #1a9e4c;
    font-size: 16px;
    font-weight: 600;
    padding: 6px 16px;
    border-radius: 9999px;
    margin-bottom: 12px;
}

#news_home_page .header-title {
    font-size: 46px;
    font-weight: 800;
    color: #0f2117;
    line-height: 1.3;
}

#news_home_page .header-subtitle {
    color: #000;
    margin-top: 8px;
    font-size: 1rem;
    margin-bottom: 0;
}

#news_home_page .header-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #1a9e4c;
    font-weight: 600;
    white-space: nowrap;
    transition: gap 0.2s;
    font-size: 0.95rem;
}

#news_home_page .header-link:hover {
    gap: 12px;
}

#news_home_page .header-link svg {
    flex-shrink: 0;
}

/* --- Grid --- */
#news_home_page .grid {
    display: grid;
    gap: 24px;
}

@media (min-width: 1024px) {
    #news_home_page .grid {
        grid-template-columns: 3fr 2fr;
    }
}

/* ===== FEATURED ARTICLE ===== */
#news_home_page .featured-article {
    cursor: pointer;
}

#news_home_page .featured-article .thumb-wrap {
    position: relative;
    border-radius: 16px;
    overflow: hidden;
    margin-bottom: 16px;
}

#news_home_page .featured-article .thumb-wrap img {
    width: 100%;
    height: 256px;
    object-fit: cover;
    transition: transform 0.5s;
}

#news_home_page .featured-article:hover .thumb-wrap img {
    transform: scale(1.05);
}

#news_home_page .featured-article .badge-activity {
    position: absolute;
    top: 16px;
    left: 16px;
    font-size: 0.75rem;
    font-weight: 600;
    padding: 4px 12px;
    border-radius: 9999px;
    background-color: #dcfce7;
    color: #15803d;
}

#news_home_page .featured-article .badge-featured {
    position: absolute;
    top: 16px;
    right: 16px;
    background-color: #1a9e4c;
    color: #ffffff;
    font-size: 0.75rem;
    font-weight: 600;
    padding: 4px 12px;
    border-radius: 9999px;
}

#news_home_page .featured-article .article-title {
    font-size: 1.3rem;
    font-weight: 700;
    color: #0f2117;
    line-height: 1.4;
    margin-bottom: 12px;
    transition: color 0.2s;
}

#news_home_page .featured-article:hover .article-title {
    color: #1a9e4c;
}

#news_home_page .featured-article .article-excerpt {
    color: #6b7280;
    font-size: 16px;
    line-height: 1.625;
    margin-bottom: 16px;
}

#news_home_page .featured-article .meta {
    display: flex;
    align-items: center;
    gap: 16px;
    color: #9ca3af;
    font-size: 0.75rem;
}

#news_home_page .featured-article .meta-item {
    display: flex;
    align-items: center;
    gap: 6px;
}

/* ===== SIDEBAR LIST ===== */
#news_home_page .sidebar {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

#news_home_page .sidebar .list-item {
    display: flex;
    gap: 16px;
    cursor: pointer;
}

#news_home_page .sidebar .list-item .thumb {
    width: 96px;
    height: 96px;
    flex-shrink: 0;
    border-radius: 12px;
    overflow: hidden;
}

#news_home_page .sidebar .list-item .thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s;
}

#news_home_page .sidebar .list-item:hover .thumb img {
    transform: scale(1.05);
}

#news_home_page .sidebar .list-item .info {
    flex: 1;
    min-width: 0;
}

#news_home_page .sidebar .list-item .tag {
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 9999px;
    margin-bottom: 4px;
}

#news_home_page .sidebar .list-item .tag.environment {
    background-color: #d1fae5;
    color: #065f46;
}

#news_home_page .sidebar .list-item .tag.research {
    background-color: #fee2e2;
    color: #991b1b;
}

#news_home_page .sidebar .list-item .tag.recycle {
    background-color: #dbeafe;
    color: #1e40af;
}

#news_home_page .sidebar .list-item .item-title {
    font-size: 16px;
    font-weight: 600;
    color: #0f2117;
    line-height: 1.4;
    margin-bottom: 6px;
    transition: color 0.2s;
}

#news_home_page .sidebar .list-item:hover .item-title {
    color: #1a9e4c;
}

#news_home_page .sidebar .list-item .item-meta {
    display: flex;
    align-items: center;
    gap: 12px;
    color: #9ca3af;
    font-size: 0.75rem;
}

#news_home_page .sidebar .list-item .item-meta-read {
    display: flex;
    align-items: center;
    gap: 4px;
}

/* --- Read more button --- */
#news_home_page .sidebar .btn-more {
    margin-top: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: 2px solid #1a9e4c;
    color: #1a9e4c;
    font-weight: 600;
    padding: 12px 20px;
    border-radius: 12px;
    font-size: 16px;
    transition: background-color 0.2s, color 0.2s;
}

#news_home_page .sidebar .btn-more:hover {
    background-color: #1a9e4c;
    color: #ffffff;
}

/* ========== #donate ========== */
#donate {
    padding-top: 6rem;
    padding-bottom: 6rem;
}

#donate .donate__grid {
    display: grid;
    gap: 3.5rem;
    align-items: center;
    padding: 0;
}

@media (min-width: 1024px) {
    #donate .donate__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* ---- Left column ---- */
#donate .donate__badge {
    display: inline-block;
    background-color: #e8f5ee;
    color: #1a9e4c;
    font-size: 16px;
    font-weight: 600;
    padding: 0.375rem 1rem;
    border-radius: 9999px;
    margin-bottom: 1rem;
}

#donate .donate__heading {
    font-size: 2.25rem;
    font-weight: 800;
    color: #0f2117;
    line-height: 1.2;
    margin-bottom: 1.25rem;
    margin-top: 0;
}

#donate .donate__desc {
    color: #000;
    font-size: 16px;
    line-height: 1.75;
    margin-bottom: 2rem;
    margin-top: 0;
}

#donate .donate__features {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

#donate .donate__feature-item {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
}

#donate .donate__feature-icon {
    width: 2.5rem;
    height: 2.5rem;
    background-color: #e8f5ee;
    border-radius: 0.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

#donate .donate__feature-icon svg {
    color: #1a9e4c;
    stroke: #1a9e4c;
}

#donate .donate__feature-title {
    font-size: 16px;
    font-weight: 600;
    color: #0f2117;
}

#donate .donate__feature-subtitle {
    font-size: 16px;
    color: #6b7280;
    margin-top: 0.125rem;
}

/* ---- Right column / Card ---- */
#donate .donate__card {
    background-color: #ffffff;
    border-radius: 1.5rem;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.10), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    padding: 2rem;
}

#donate .donate__card-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: #0f2117;
    margin-top: 0;
    margin-bottom: 1.5rem;
}

#donate .donate__amounts {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
    margin-bottom: 1.25rem;
}

#donate .donate__amount-btn {
    padding: 0.75rem 1rem;
    border-radius: 0.75rem;
    font-size: 16px;
    font-weight: 600;
    border: 2px solid #e5e7eb;
    color: #374151;
    background-color: transparent;
    cursor: pointer;
    transition: border-color 0.2s;
    margin: 0;
}

#donate .donate__amount-btn:hover {
    border-color: rgba(26, 158, 76, 0.5);
}

#donate .donate__amount-btn.is-active {
    border-color: #1a9e4c;
    background-color: #e8f5ee;
    color: #1a9e4c;
}

#donate .donate__custom-label {
    display: block;
    font-size: 16px;
    color: #6b7280;
    margin-bottom: 0.5rem;
}

#donate .donate__custom-wrap {
    margin-bottom: 1.5rem;
}

#donate .donate__input-group {
    display: flex;
    align-items: center;
    border: 2px solid #e5e7eb;
    border-radius: 0.75rem;
    overflow: hidden;
    transition: border-color 0.2s;
}

#donate .donate__input-group:focus-within {
    border-color: #1a9e4c;
}

#donate .donate__input-group input {
    flex: 1;
    padding: 0.75rem 1rem;
    font-size: 16px;
    outline: none;
    border: none;
    background: transparent;
    margin: 0;
    height: 62px;
}

#donate .donate__input-unit {
    padding-left: 1rem;
    padding-right: 1rem;
    font-size: 16px;
    font-weight: 500;
    color: #6b7280;
}

#donate .donate__impact {
    background-color: #f7faf8;
    border-radius: 0.75rem;
    padding: 1rem;
    margin-bottom: 1.5rem;
}

#donate .donate__impact p {
    font-size: 16px;
    color: #4b5563;
    margin: 0;
}

#donate .donate__impact-amount {
    font-weight: 600;
    color: #1a9e4c;
}

#donate .donate__impact-highlight {
    font-weight: 600;
    color: #1f2937;
}

#donate .donate__frequency {
    display: flex;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
}

#donate .donate__freq-btn {
    flex: 1;
    padding: 0.5rem;
    border-radius: 0.5rem;
    font-size: 16px;
    font-weight: 500;
    border: 1px solid #e5e7eb;
    color: #6b7280;
    background-color: transparent;
    cursor: pointer;
    transition: all 0.2s;
    margin: 0;
}

#donate .donate__freq-btn.is-active {
    border-color: #1a9e4c;
    background-color: #1a9e4c;
    color: #ffffff;
}

#donate .donate__submit-btn {
    width: 100%;
    background-color: #1a9e4c;
    color: #ffffff;
    font-weight: 600;
    padding: 1rem;
    border-radius: 0.75rem;
    border: none;
    cursor: pointer;
    font-size: 1rem;
    transition: background-color 0.2s;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.10), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

#donate .donate__submit-btn:hover {
    background-color: #157a3c;
}

#donate .donate__note {
    text-align: center;
    color: #9ca3af;
    font-size: 0.75rem;
    margin-top: 1rem;
    margin-bottom: 0;
}

/* ===== #home_partners ===== */
#home_partners {
    padding-top: 96px;
    padding-bottom: 96px;
    background-color: #ffffff;
}

#home_partners .partners-container {
    max-width: 1280px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 16px;
    padding-right: 16px;
}

@media (min-width: 640px) {
    #home_partners .partners-container {
        padding-left: 24px;
        padding-right: 24px;
    }
}

@media (min-width: 1024px) {
    #home_partners .partners-container {
        padding-left: 32px;
        padding-right: 32px;
    }
}

/* Header */
#home_partners .partners-header {
    text-align: center;
    margin-bottom: 56px;
}

#home_partners .partners-badge {
    display: inline-block;
    background-color: #e8f5ee;
    color: #1a9e4c;
    font-size: 14px;
    font-weight: 600;
    padding: 6px 16px;
    border-radius: 9999px;
    margin-bottom: 12px;
}

#home_partners .partners-title {
    font-size: 46px;
    font-weight: 800;
    color: #0f2117;
    line-height: 1.3;
    margin: 0 0 8px 0;
}

#home_partners .partners-subtitle {
    color: #6b7280;
    margin-top: 8px;
    max-width: 576px;
    margin-left: auto;
    margin-right: auto;
    font-size: 15px;
}

/* Grid */
#home_partners .partners-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    margin-bottom: 0px;
}

@media (min-width: 640px) {
    #home_partners .partners-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* Card */
#home_partners .partner-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 24px;
    border-radius: 16px;
    border: 1px solid #f3f4f6;
    cursor: pointer;
    transition: border-color 0.3s, box-shadow 0.3s;
    box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px;
}

#home_partners .partner-card:hover {
    border-color: transparent;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1),
        0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

/* Logo icon */
#home_partners .partner-icon {
    width: 56px;
    height: 56px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 12px;
    transition: transform 0.3s;
}

#home_partners .partner-card:hover .partner-icon {
    transform: scale(1.1);
}

#home_partners .partner-abbr {
    font-weight: 900;
    font-size: 13px;
    letter-spacing: -0.02em;
}

/* Label */
#home_partners .partner-name {
    color: #4b5563;
    font-size: 15px;
    text-align: center;
    font-weight: 500;
    line-height: 1.4;
}

#home_partners {
    border-top: 1px solid #ddddddab;
}

/* Per-partner colors */
#home_partners .partner-icon--monre {
    background-color: #e8f5ee;
}

#home_partners .partner-abbr--monre {
    color: #1a9e4c;
}

#home_partners .partner-icon--undp {
    background-color: #e0f2fe;
}

#home_partners .partner-abbr--undp {
    color: #0369a1;
}

#home_partners .partner-icon--wwf {
    background-color: #fef3c7;
}

#home_partners .partner-abbr--wwf {
    color: #b45309;
}

#home_partners .partner-icon--hsbc {
    background-color: #ede9fe;
}

#home_partners .partner-abbr--hsbc {
    color: #7c3aed;
}

#home_partners .partner-icon--vin {
    background-color: #fee2e2;
}

#home_partners .partner-abbr--vin {
    color: #dc2626;
}

#home_partners .partner-icon--fpt {
    background-color: #f0fdf4;
}

#home_partners .partner-abbr--fpt {
    color: #15803d;
}

#home_partners .partner-icon--uni {
    background-color: #fff7ed;
}

#home_partners .partner-abbr--uni {
    color: #c2410c;
}

#home_partners .partner-icon--coke {
    background-color: #f0f9ff;
}

#home_partners .partner-abbr--coke {
    color: #0284c7;
}

/* ─── Section ─── */
.kvc-section {
    position: relative;
    width: 100%;
    background: #3589b8;
    border-radius: 16px;
    overflow: hidden;
    padding: 40px;
    margin: auto;
    margin-bottom: 55px;
}

/* Topographic SVG overlay */
.kvc-topo {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    opacity: 0.12;
}

/* ─── Header ─── */
.kvc-eyebrow {
    position: relative;
    font-family: 'DM Sans', sans-serif;
    font-weight: 500;
    font-size: 0.78rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: #e8b84b;
    text-align: center;
    margin-bottom: 16px;
}

.kvc-headline {
    position: relative;
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 400;
    color: #ffffff;
    text-align: center;
    line-height: 1.15;
    margin-bottom: 56px;
    text-transform: capitalize;
}

/* ─── Two columns ─── */
.kvc-grid {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 48px 64px;
}

.kvc-col {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 18px;
    text-align: center;
    background-color: #dddddd12;
    padding: 20px;
    border-radius: 10px;
}

.kvc-col-title {
    font-size: 1.6rem;
    font-weight: 400;
    color: #ffffff;
}

.kvc-col-body {
    font-size: 0.95rem;
    font-weight: 500;
    color: #fff;
}

/* ─── Button ─── */
.kvc-btn {
    display: inline-block;
    margin-top: 8px;
    padding: 14px 32px;
    background: #e8b84b;
    color: #1a1a1a;
    font-size: 0.9rem;
    font-weight: 500;
    letter-spacing: 0.02em;
    border: none;
    border-radius: 50px;
    cursor: pointer;
    text-decoration: none;
    transition: background 0.22s ease, transform 0.18s ease, box-shadow 0.22s ease;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.15);
}

.kvc-btn:hover {
    background: #d4a33a;
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.22);
}

.kvc-btn:active {
    transform: translateY(0);
}

/* ─── Responsive ─── */
@media (max-width: 700px) {
    .kvc-section {
        padding: 48px 28px 56px;
        border-radius: 0;
    }

    .kvc-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .kvc-col-divider {
        display: none;
    }
}

.sd_tops .nav-dropdown-default {
    margin-left: 15px;
}

/* =========================
   FLOATING SHARE
========================= */

.sharethis-wrapper {
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 9999;

    margin: 0;
    padding: 0;
    list-style: none;

    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
}

/* =========================
   SOCIAL ITEMS
========================= */

.share-item {
    opacity: 0;
    visibility: hidden;

    transform: translateY(20px) scale(.8);

    transition: all .35s ease;
}

/* Active show */
.sharethis-wrapper.active .share-item {
    opacity: 1;
    visibility: visible;

    transform: translateY(0) scale(1);
}

/* Delay animation */
.sharethis-wrapper.active .share-item:nth-child(1) {
    transition-delay: .05s;
}

.sharethis-wrapper.active .share-item:nth-child(2) {
    transition-delay: .1s;
}

.sharethis-wrapper.active .share-item:nth-child(3) {
    transition-delay: .15s;
}

/* =========================
   SOCIAL BUTTON
========================= */

.social-btn {
    width: 52px;
    height: 52px;

    border-radius: 50%;

    display: flex;
    align-items: center;
    justify-content: center;

    text-decoration: none;

    color: #fff;
    font-size: 22px;

    box-shadow: 0 8px 18px rgba(0, 0, 0, .18);

    transition: all .3s ease;
}

.social-btn:hover {
    transform: translateY(-3px) scale(1.08);
}

/* Colors */
.linkedin {
    background: #0077b5;
}

.twitter {
    background: #111;
}

.facebook {
    background: #3557d6;
}

/* =========================
   MAIN BUTTON
========================= */

.btn-share {
    width: 64px;
    height: 64px;
    border: none;
    outline: none;
    cursor: pointer;
    border-radius: 50%;
    background: #3557d6;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 10px 24px rgba(0, 0, 0, .18);
    transition: all .35s ease;
    margin: 0px;
}

/* Hover */
.btn-share:hover {
    transform: scale(1.06);
}

/* =========================
   SHARE ICON
========================= */

.btn-share svg {
    position: absolute;
    transition: opacity .25s ease, transform .3s ease;
}

.icon-share {
    opacity: 1;
    transform: scale(1) rotate(0deg);
}

.icon-close {
    opacity: 0;
    transform: scale(0.5) rotate(-90deg);
}

.sharethis-wrapper.active .btn-share {
    background: #fff;
    box-shadow: 0 4px 16px rgba(0, 0, 0, .12);
}

.sharethis-wrapper.active .icon-share {
    opacity: 0;
    transform: scale(0.5) rotate(90deg);
}

.sharethis-wrapper.active .icon-close {
    opacity: 1;
    transform: scale(1) rotate(0deg);
}

/* gạch 1 */
.sharethis-wrapper.active .btn-share::before {
    width: 28px;
    height: 5px;

    background: #3557d6;

    border-radius: 10px;

    transform: rotate(45deg);

    top: 30px;
    left: 18px;
}

/* gạch 2 */
.sharethis-wrapper.active .btn-share::after {
    width: 28px;
    height: 5px;

    background: #3557d6;

    border-radius: 10px;

    box-shadow: none;

    transform: rotate(-45deg);

    top: 30px;
    left: 18px;
}

/* =========================
   MOBILE
========================= */

@media(max-width:768px) {

    .sharethis-wrapper {
        right: 15px;
        bottom: 15px;
    }

    .btn-share {
        width: 58px;
        height: 58px;
    }

    .social-btn {
        width: 48px;
        height: 48px;

        font-size: 20px;
    }
}

/*css form popup*/
.logo_form p {
    text-align: center;
}

.logo_form p img {
    width: 135px;
    margin-bottom: 15px;
}

.title_form h2 {
    margin-bottom: 0;
}

.form_register input {
    box-shadow: unset;
    border-radius: 5px;
    height: 45px;
}

.form_register select {
    height: 45px;
    border-radius: 5px;
}

.form-submit input {
    margin: 0;
}

#form-popup form {
    margin: 0;
}

.title_form {
    text-align: center;
}

.form-submit {
    text-align: center;
}

.form_register .col {
    padding-bottom: 0;
}

#form-popup {
    border-radius: 20px;
}

.form_fields textarea {
    box-shadow: unset;
    border-radius: 5px;
    min-height: 90px;
}

.mfp-close {
    mix-blend-mode: unset !important;
}

.mfp-ready .mfp-close {
    opacity: 1;
    background-color: #118c46;
    border-radius: 99px;
    right: 5px;
    margin-top: 5px !important;
}

.mfp-ready .mfp-close svg {
    stroke: #fff;
}

.list_project .card-body p {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    padding: 0;
}

.row_data_fts h3 {
    border-bottom: unset;
}

.events__progress-wrap {
    display: none;
}

#news_home_page .sidebar .item-title a {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    padding: 0;
}

.section-title-normal span {
    border-bottom: 0px solid rgba(0, 0, 0, .1);
}

/* bài viết nhiều lượt xem */
.popular-posts-wrap {
    background: #f3f1f3;
}

.popular-title {
    font-weight: bold;
    text-transform: capitalize;
    font-size: 20px;
    margin-bottom: 20px;
    display: block;
}

.popular-posts-list {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.popular-post-item {
    display: flex;
    align-items: flex-start;
    gap: 15px;
    text-decoration: none;
}

.popular-thumb {
    width: 120px;
    min-width: 120px;
    height: 90px;
    border-radius: 18px;
    overflow: hidden;
}

.popular-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.popular-content {
    flex: 1;
}

.popular-post-title {
    line-height: 1.25;
    margin: 0 0 10px;
    color: #000;
    font-size: 16px;
    font-weight: 700;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    padding: 0;
}

.popular-date {
    font-size: 12px;
    color: #555;
    font-weight: 500;
}

/* Responsive */
@media(max-width:768px) {

    .popular-title {
        font-size: 28px;
    }

    .popular-post-title {
        font-size: 20px;
    }

    .popular-date {
        font-size: 15px;
    }

    .popular-thumb {
        width: 100px;
        min-width: 100px;
        height: 75px;
    }

}

.tieu-de-bai-viet {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    padding: 0;
    font-size: 16px;
}

.searchform {
    margin: 0;
}

.page-wrapper {
    padding-bottom: 0;
    padding-top: 0;
}

.bn_ctbv img {
    width: 100%;
    height: 36.7rem;
    object-fit: cover;
}

#form-connect {
    border-radius: 20px;
}

.partner-col {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.kvc-col-body {
    min-height: 78px;
    color: rgba(255, 255, 255, 0.80);
}

/**/
.partners-slide {
    padding: 10px;
}

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

.partner-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.partner-icon img {
    max-width: 100%;
    height: auto;
}

/* ===== Brochure download card (Our Services hero) ===== */
.kvc-brochure-card {
    display: flex;
    align-items: center;
    gap: 28px;
    background: linear-gradient(135deg, #12693f 0%, #0b3d29 100%);
    border-radius: 20px;
    padding: 28px;
    box-shadow: 0 20px 40px -12px rgba(11, 61, 41, 0.35);
}

.kvc-brochure-thumb {
    flex-shrink: 0;
    width: 120px;
    background: #f4faf6;
    padding: 6px;
    border-radius: 10px;
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.25);
    transform: rotate(-3deg);
    transition: transform 0.25s ease;
}

.kvc-brochure-card:hover .kvc-brochure-thumb {
    transform: rotate(0deg);
}

.kvc-brochure-thumb img {
    display: block;
    width: 100%;
    aspect-ratio: 3 / 4.24;
    object-fit: cover;
    border-radius: 6px;
}

.kvc-brochure-content {
    flex: 1;
    min-width: 0;
}

.kvc-brochure-eyebrow {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #7fe3b4;
    margin: 0 0 6px;
}

.kvc-brochure-title {
    font-size: 22px;
    font-weight: 800;
    color: #ffffff;
    margin: 0 0 8px;
    line-height: 1.25;
}

.kvc-brochure-desc {
    font-size: 14px;
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.78);
    margin: 0 0 18px;
    max-width: 360px;
}

.kvc-brochure-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #ffffff;
    color: #0b3d29;
    font-weight: 700;
    font-size: 14px;
    padding: 11px 20px;
    border-radius: 10px;
    text-decoration: none;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.kvc-brochure-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}

.kvc-brochure-btn svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

.kvc-brochure-meta {
    margin: 14px 0 0;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.6);
}

@media (max-width: 580px) {
    .kvc-brochure-card {
        flex-direction: column;
        align-items: flex-start;
        gap: 20px;
    }
    .kvc-brochure-thumb {
        align-self: center;
        transform: none;
    }
    .kvc-brochure-desc {
        max-width: none;
    }
}

/* ===== #home_partners_media (Media partners section, distinct from #home_partners) ===== */
#home_partners_media {
    padding-top: 96px;
    padding-bottom: 96px;
    background-color: #ffffff;
    border-top: 1px solid #ddddddab;
}
#home_partners_media .partners-container {
    max-width: 1280px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 16px;
    padding-right: 16px;
}
@media (min-width: 640px) {
    #home_partners_media .partners-container {
        padding-left: 24px;
        padding-right: 24px;
    }
}
@media (min-width: 1024px) {
    #home_partners_media .partners-container {
        padding-left: 32px;
        padding-right: 32px;
    }
}
#home_partners_media .partners-header {
    text-align: center;
    margin-bottom: 56px;
}
#home_partners_media .partners-badge {
    display: inline-block;
    background-color: #e8f5ee;
    color: #1a9e4c;
    font-size: 14px;
    font-weight: 600;
    padding: 6px 16px;
    border-radius: 9999px;
    margin-bottom: 12px;
}
#home_partners_media .partners-title {
    font-size: 46px;
    font-weight: 800;
    color: #0f2117;
    line-height: 1.3;
    margin: 0 0 8px 0;
}
#home_partners_media .partners-subtitle {
    color: #6b7280;
    margin-top: 8px;
    max-width: 576px;
    margin-left: auto;
    margin-right: auto;
    font-size: 15px;
}
#home_partners_media .partners-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    margin-bottom: 0px;
}
@media (min-width: 640px) {
    #home_partners_media .partners-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}
#home_partners_media .partner-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 24px;
    border-radius: 16px;
    border: 1px solid #f3f4f6;
    cursor: pointer;
    transition: border-color 0.3s, box-shadow 0.3s;
    box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px;
}
#home_partners_media .partner-card:hover {
    border-color: transparent;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1),
        0 10px 10px -5px rgba(0, 0, 0, 0.04);
}
#home_partners_media .partner-icon {
    width: 56px;
    height: 56px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 12px;
    transition: transform 0.3s;
}
#home_partners_media .partner-card:hover .partner-icon {
    transform: scale(1.1);
}
#home_partners_media .partner-abbr {
    font-weight: 900;
    font-size: 13px;
    letter-spacing: -0.02em;
}
#home_partners_media .partner-name {
    color: #4b5563;
    font-size: 15px;
    text-align: center;
    font-weight: 500;
    line-height: 1.4;
}
#home_partners_media .partner-icon--monre { background-color: #e8f5ee; }
#home_partners_media .partner-abbr--monre { color: #1a9e4c; }
#home_partners_media .partner-icon--undp { background-color: #e0f2fe; }
#home_partners_media .partner-abbr--undp { color: #0369a1; }
#home_partners_media .partner-icon--wwf { background-color: #fef3c7; }
#home_partners_media .partner-abbr--wwf { color: #b45309; }
#home_partners_media .partner-icon--hsbc { background-color: #ede9fe; }
#home_partners_media .partner-abbr--hsbc { color: #7c3aed; }
#home_partners_media .partner-icon--vin { background-color: #fee2e2; }
#home_partners_media .partner-abbr--vin { color: #dc2626; }
#home_partners_media .partner-icon--fpt { background-color: #f0fdf4; }
#home_partners_media .partner-abbr--fpt { color: #15803d; }
#home_partners_media .partner-icon--uni { background-color: #fff7ed; }
#home_partners_media .partner-abbr--uni { color: #c2410c; }
#home_partners_media .partner-icon--coke { background-color: #f0f9ff; }
#home_partners_media .partner-abbr--coke { color: #0284c7; }

@media (max-width: 767px) {
    #home_partners .partners-title,
    #home_partners_media .partners-title {
        font-size: 28px !important;
        line-height: 1.3 !important;
    }
    #home_partners .partners-badge,
    #home_partners_media .partners-badge {
        font-size: 12px !important;
    }
    #home_partners .partners-subtitle,
    #home_partners_media .partners-subtitle {
        font-size: 14px !important;
    }
    #home_partners .partners-grid,
    #home_partners_media .partners-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 12px !important;
    }
    #home_partners .partners-container,
    #home_partners_media .partners-container,
    #home_partners,
    #home_partners_media {
        max-width: 100% !important;
        overflow-x: hidden !important;
    }
}

.box_ghnsa h1 span {
    display: block;
    font-size: 46px;
}

@media (min-width: 1024px) {
    .overview .hero-grid {
        grid-template-columns: 1fr;
    }
}

.overview h1,
.overview .hero-desc {
    max-width: 640px;
}

/* Process timeline (thay cho danh sách số rời rạc của Mission cũ) */
#impact .impact__timeline {
    margin-top: 2.5rem;
    list-style: none;
    padding: 0;
}

#impact .impact__timeline-item {
    display: flex;
    gap: 1.25rem;
    position: relative;
    padding-bottom: 2.25rem;
}

#impact .impact__timeline-item:last-child {
    padding-bottom: 0;
}

#impact .impact__timeline-item::before {
    content: '';
    position: absolute;
    left: 1.5rem;
    top: 3rem;
    bottom: 0;
    width: 2px;
    background: rgba(22, 163, 74, 0.18);
}

#impact .impact__timeline-item:last-child::before {
    display: none;
}

#impact .impact__timeline-num {
    display: flex;
    height: 3rem;
    width: 3rem;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background-color: #16a34a;
    font-size: 0.875rem;
    font-weight: 700;
    color: #ffffff;
    box-shadow: 0 2px 8px rgba(22, 163, 74, 0.3);
    position: relative;
    z-index: 1;
}
#impact {
    padding-top: 5rem;
}
.loi_mo_ta .lmd-photo-card{
    display: none;
}


/* ============================================================
   OUR TEAM — PHIÊN BẢN 5  (cập nhật 20/08/2026)
   - Khung thẻ kiểu United Nations
   - Chức danh nằm dưới tên
   - Nút LinkedIn góc dưới bên phải của ảnh
   - Các phần SÁT NHAU (triệt tiêu padding thừa của Flatsome)
   - Xoá dải xanh thừa hai bên khối Our Advisory Board
   ============================================================ */

:root {
    --kvc-green: #3F8F43;
    --kvc-green-dark: #1F4D2B;
    --kvc-green-light: #EAF4EA;
    --kvc-card-bg: #F2F5F2;
    --kvc-text: #333333;
    --kvc-section-pad: 18px;
    --kvc-container: 1180px;
}

/* ---------- 1. TRIỆT TIÊU KHOẢNG TRỐNG THỪA CỦA FLATSOME ----------
   Khoảng cách lớn giữa các phần KHÔNG đến từ .team-sub mà từ
   section / row / col mà Flatsome bọc quanh mỗi shortcode.
   Các rule dưới đây ép chúng về 0 để các phần sát nhau.            */
.section:has(.team-section-ql),
.section:has(.team-sub),
.section:has(.advisor-section),
.section:has(.cta-section) {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

.row:has(.team-section-ql),
.row:has(.team-sub),
.row:has(.advisor-section),
.row:has(.cta-section) {
    margin-bottom: 0 !important;
}

.col:has(.team-section-ql),
.col:has(.team-sub),
.col:has(.advisor-section),
.col:has(.cta-section) {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

.col:has(.team-section-ql) > .col-inner,
.col:has(.team-sub) > .col-inner,
.col:has(.advisor-section) > .col-inner,
.col:has(.cta-section) > .col-inner {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

/* ---------- 1b. ĐỒNG NHẤT NỀN ----------
   Flatsome gán màu nền riêng cho từng section (ví dụ .sec_sk3 màu
   kem #f7faf8), khiến Core Team có nền khác Management Team và
   để lộ dải màu lệch ở mép trái/phải. Ép tất cả về cùng màu trắng. */
.section:has(.team-section-ql),
.section:has(.team-sub),
.section:has(.advisor-section),
.section:has(.cta-section) {
    background-color: #fff !important;
    background-image: none !important;
}

/* Hero mới nằm trong <section class="section sec_team_mb"> của template
   page-our-team.php — bỏ padding và nền mà Flatsome tự thêm vào. */
.section:has(.kvc-hero) {
    display: block !important;
    float: none !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    margin: 0 !important;
    max-width: none !important;
    width: 100% !important;
    background-color: transparent !important;
    background-image: none !important;
}

.section:has(.kvc-hero) > .section-content,
.section:has(.kvc-hero) .row,
.section:has(.kvc-hero) .col,
.section:has(.kvc-hero) .col-inner {
    max-width: none !important;
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

.section:has(.kvc-hero) .section-bg {
    background-color: transparent !important;
    background-image: none !important;
}

.section:has(.team-section-ql) .section-bg,
.section:has(.team-sub) .section-bg,
.section:has(.advisor-section) .section-bg,
.section:has(.cta-section) .section-bg,
.banner:has(.team-sub) .banner-bg,
.banner:has(.advisor-section) .banner-bg {
    background-color: transparent !important;
    background-image: none !important;
}

.row:has(.team-section-ql),
.row:has(.team-sub),
.row:has(.advisor-section),
.row:has(.cta-section),
.col:has(.team-section-ql),
.col:has(.team-sub),
.col:has(.advisor-section),
.col:has(.cta-section),
.col:has(.team-section-ql) > .col-inner,
.col:has(.team-sub) > .col-inner,
.col:has(.advisor-section) > .col-inner,
.col:has(.cta-section) > .col-inner {
    background-color: transparent !important;
    background-image: none !important;
}

/* ---------- 2. Khoảng cách riêng của từng phần ---------- */
.team-section-ql,
.team-sub {
    padding-top: var(--kvc-section-pad) !important;
    padding-bottom: var(--kvc-section-pad) !important;
    margin: 0 !important;
    background: transparent !important;
}

.team-section-ql .container,
.team-sub .container {
    max-width: var(--kvc-container);
    margin: 0 auto;
    padding-left: 20px;
    padding-right: 20px;
}

/* ---------- 3. Tiêu đề ---------- */
.team-section-ql .header,
.team-sub .sub-header,
.team-sub .sub-header .left {
    display: block;
    text-align: left !important;
    margin: 0 0 16px !important;
}

.team-section-ql .header h2,
.team-sub .sub-header h2 {
    position: relative;
    margin: 0;
    padding-bottom: 9px;
    text-align: left !important;
    font-size: 28px;
    font-weight: 700;
    line-height: 1.25;
    color: var(--kvc-green) !important;
}

.team-section-ql .header h2::after,
.team-sub .sub-header h2::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 54px;
    height: 3px;
    border-radius: 2px;
    background: var(--kvc-green);
}

/* ---------- 4. Lưới thẻ ---------- */
.team-section-ql .grid,
.team-sub .team-grid {
    display: grid;
    gap: 20px;
    margin: 0;
    justify-content: start;
    justify-items: stretch;
    align-items: stretch;
}

.team-section-ql .grid {
    grid-template-columns: repeat(auto-fill, minmax(268px, 1fr));
}

.team-sub .team-grid {
    grid-template-columns: repeat(auto-fill, minmax(224px, 1fr));
}

/* ---------- 5. Khung thẻ kiểu United Nations ---------- */
.team-section-ql .item,
.team-sub .item {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 16px 16px 18px !important;
    border: none !important;
    border-radius: 10px;
    overflow: hidden;
    background: var(--kvc-card-bg) !important;
    box-shadow: none;
    transition: box-shadow 0.25s ease, transform 0.25s ease;
}

.team-section-ql .item:hover,
.team-sub .item:hover {
    box-shadow: 0 6px 20px rgba(31, 77, 43, 0.14);
    transform: translateY(-3px);
}

/* ---------- 6. Ảnh ---------- */
.team-section-ql .img-box,
.team-sub .img-box {
    position: static;      /* KHONG dat relative: de nut LinkedIn ben trong
                              bam theo ca the (.item) chu khong bam theo anh */
    width: 100%;
    aspect-ratio: 3 / 4;
    overflow: hidden;
    border-radius: 6px;
    background: #fff;
}

.team-section-ql .img-box img,
.team-sub .img-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;   /* neo giữa: giữ được người trong ảnh,
                                         'center top' cắt mất mặt/chân dung */
    display: block;
    border-radius: 6px;
    transition: transform 0.35s ease;
}

.team-section-ql .item:hover .img-box img,
.team-sub .item:hover .img-box img {
    transform: scale(1.04);
}

.team-section-ql .overlay,
.team-sub .overlay {
    display: none !important;
}

/* ---------- 7. Tên ở trên, chức danh ở dưới ---------- */
.team-section-ql figcaption,
.team-sub figcaption {
    position: static !important;
    display: block !important;
    flex: 1 1 auto;
    margin-top: 12px !important;
    padding: 0 !important;
    text-align: left !important;
    background: none !important;
}

.team-section-ql figcaption h3,
.team-sub figcaption h3 {
    display: block !important;
    float: none !important;
    width: auto !important;
    margin: 0 0 5px !important;
    font-size: 17px;
    font-weight: 700;
    line-height: 1.3;
    color: var(--kvc-green-dark) !important;
}

.team-section-ql figcaption,
.team-sub figcaption {
    padding-right: 48px !important;   /* chua cho cho nut LinkedIn */
}

.team-section-ql figcaption p,
.team-sub figcaption p {
    display: block !important;
    float: none !important;
    width: auto !important;
    margin: 0 !important;
    font-size: 13.5px;
    font-weight: 400;
    line-height: 1.45;
    color: var(--kvc-text) !important;
}

.team-section-ql figcaption h3 {
    font-size: 19px;
}

.team-section-ql figcaption p {
    font-size: 14.5px;
}

/* ---------- 8. Nút LinkedIn — góc dưới bên phải của ảnh ---------- */
.team-section-ql .social,
.team-sub .social {
    position: absolute !important;
    top: auto !important;
    left: auto !important;
    right: 16px !important;   /* ngang hang voi ten / chuc danh, */
    bottom: 18px !important;  /* nam o goc duoi phai cua ca the */
    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    z-index: 3;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
}

.team-section-ql .social a,
.team-sub .social a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 6px;
    background: var(--kvc-green-dark);
    color: #fff;
    transition: background 0.2s ease, transform 0.2s ease;
}

.team-section-ql .social a:hover,
.team-sub .social a:hover {
    background: var(--kvc-green);
    transform: translateY(-2px);
}

.team-section-ql .social svg,
.team-sub .social svg {
    width: 17px;
    height: 17px;
}

.team-section-ql .social svg path,
.team-section-ql .social svg rect,
.team-section-ql .social svg circle,
.team-sub .social svg path,
.team-sub .social svg rect,
.team-sub .social svg circle {
    fill: currentColor;
}

.team-section-ql .social:empty,
.team-sub .social:empty {
    display: none;
}

/* ---------- 9. Our Advisory Board ---------- */
.section:has(.advisor-section) > .section-bg,
.section:has(.advisor-section) .section-bg,
.banner:has(.advisor-section) .banner-bg {
    background-color: transparent !important;
    background-image: none !important;
}

.section:has(.advisor-section),
.row:has(.advisor-section),
.col:has(.advisor-section),
.col-inner:has(.advisor-section) {
    background-color: transparent !important;
    background-image: none !important;
}

.advisor-section {
    padding: var(--kvc-section-pad) 0 !important;
    background: transparent !important;
}

.advisor-section .advisor-overlay {
    display: none !important;
}

.advisor-section .container {
    max-width: var(--kvc-container);
    margin: 0 auto;
    padding: 38px 42px !important;
    border-radius: 20px;
    background: var(--kvc-green);
}

.advisor-section .advisor-grid {
    display: grid;
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    gap: 32px;
    align-items: center;
}

.advisor-section .advisor-left img {
    display: block;
    width: 100%;
    height: 100%;
    max-height: 320px;
    object-fit: cover;
    border-radius: 12px;
}

.advisor-section .advisor-title {
    margin: 0 0 12px;
    text-align: left;
    font-size: 28px;
    font-weight: 700;
    color: #fff;
}

.advisor-section .advisor-right p {
    margin: 0 0 11px;
    font-size: 14.5px;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.95);
}

.advisor-section .advisor-right p:last-child {
    margin-bottom: 0;
}

/* ---------- 10. CTA ---------- */
.cta-section {
    padding: var(--kvc-section-pad) 0;
}

.cta-section .cta-box {
    padding: 30px 36px;
    border-radius: 20px;
    background: var(--kvc-green);
}

.cta-section .cta-content {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

.cta-section .cta-sub .highlight {
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.9);
}

.cta-section .cta-left h2 {
    margin: 8px 0 0;
    font-size: 26px;
    line-height: 1.3;
    color: #fff;
}

.cta-section .btn {
    display: inline-block;
    margin-right: 10px;
    padding: 11px 22px;
    border-radius: 6px;
    font-weight: 600;
    text-decoration: none;
    transition: background 0.2s ease, color 0.2s ease;
}

.cta-section .btn-primary {
    background: #fff;
    color: var(--kvc-green-dark);
}

.cta-section .btn-primary:hover {
    background: var(--kvc-green-light);
}

.cta-section .btn-outline {
    border: 2px solid #fff;
    color: #fff;
}

.cta-section .btn-outline:hover {
    background: #fff;
    color: var(--kvc-green-dark);
}

/* ---------- 11. Responsive ---------- */
@media (max-width: 900px) {
    :root {
        --kvc-section-pad: 14px;
    }

    .advisor-section .advisor-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .advisor-section .container {
        padding: 26px 22px !important;
        border-radius: 16px;
    }
}

@media (max-width: 600px) {
    :root {
        --kvc-section-pad: 12px;
    }

    .team-section-ql .grid,
    .team-sub .team-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }

    .team-section-ql .item,
    .team-sub .item {
        padding: 11px 11px 13px !important;
    }

    .team-section-ql .header h2,
    .team-sub .sub-header h2,
    .advisor-section .advisor-title {
        font-size: 23px;
    }

    .team-section-ql figcaption h3,
    .team-sub figcaption h3 {
        font-size: 15px;
    }

    .team-section-ql figcaption p,
    .team-sub figcaption p {
        font-size: 12.5px;
    }
}


/* ============================================================
   OUR STORY — phần "Explore the rest of the story"
   Tiêu đề đang bị bó vào một cột hẹp nên gãy thành 3 dòng.
   Cho nó trải dài theo chiều ngang của section.
   ============================================================ */

.explore_story_section .container {
    max-width: 1180px;
    margin: 0 auto;
    padding-left: 20px;
    padding-right: 20px;
}

.explore_story_section .header {
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    margin-bottom: 34px;
}

.explore_story_section .header > div {
    width: 100% !important;
    max-width: none !important;
}

.explore_story_section .heading {
    width: 100% !important;
    max-width: none !important;   /* bỏ giới hạn bề ngang khiến chữ gom một cục */
    white-space: normal;
    text-wrap: balance;           /* chia dòng cân đối khi vẫn phải xuống dòng */
    line-height: 1.18;
}

@media (min-width: 1024px) {
    .explore_story_section .heading {
        font-size: clamp(30px, 3.2vw, 46px);
    }
}


/* ============================================================
   OUR TEAM — HERO MỚI  [team_hero]   (thêm 20/08/2026)
   Bố cục: chữ bên trái · cụm ảnh cắt chéo bên phải
   Không có dải PLANET / PEOPLE / IMPACT — bên dưới đi thẳng
   xuống phần Management Team.
   ============================================================ */

/* Ép hero luôn rộng hết khung.
   Triệu chứng đã gặp: trang tiếng Anh bị bóp hẹp còn nửa màn hình,
   trang tiếng Việt rộng hơn — bề ngang thay đổi theo độ dài đoạn
   văn, tức là hero đang bị co theo nội dung thay vì trải hết hàng.
   Các dòng width/float/display dưới đây chặn mọi kiểu co đó. */
.kvc-hero {
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    float: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;

    --h-cream:      #F4F4EE;   /* nền kem */
    --h-ink:        #14331F;   /* xanh rất đậm cho tiêu đề */
    --h-accent:     #7FA55C;   /* xanh sáng cho dòng nhấn */
    --h-solid-dark: #1D4A2B;   /* khối đặc màu đậm */
    --h-solid-soft: #8FB06A;   /* khối đặc màu nhạt */
    --h-body:       #2F3A33;   /* màu chữ đoạn mô tả */

    position: relative;
    background: var(--h-cream);
    padding: 0;
    margin: 0;
    overflow: hidden;
}

.kvc-hero__inner {
    display: block;
    max-width: none;
    margin: 0;
}

/* ---------- Cột chữ ---------- */
.kvc-hero__text {
    padding: 40px 20px 30px;
}

.kvc-hero__eyebrow {
    margin: 0 0 14px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--h-ink);
}

.kvc-hero__title {
    margin: 0;
    font-size: clamp(38px, 6vw, 68px);
    font-weight: 800;
    line-height: 1.05;
    letter-spacing: -0.01em;
    text-transform: uppercase;
    color: var(--h-ink);
}

.kvc-hero__accent {
    color: var(--h-accent);
}

.kvc-hero__rule {
    display: block;
    width: 48px;
    height: 2px;
    margin: 26px 0 22px;
    background: var(--h-accent);
}

.kvc-hero__desc {
    max-width: 58ch;
    margin: 0 0 4px;
    font-size: 15.5px;
    line-height: 1.8;
    color: var(--h-body);
}

/* Khi có nút bấm thì chừa khoảng cách bên dưới đoạn mô tả */
.kvc-hero__desc:has(+ .kvc-hero__btn) {
    margin-bottom: 30px;
}

/* Mô tả lấy từ ACF có thể chứa nhiều thẻ <p> */
.kvc-hero__desc p {
    margin: 0 0 12px;
    font-size: inherit;
    line-height: inherit;
    color: inherit;
}

.kvc-hero__desc p:last-child {
    margin-bottom: 0;
}

.kvc-hero__btn {
    display: inline-flex;
    align-items: center;
    gap: 18px;
    padding: 17px 26px;
    border: 1.5px solid var(--h-ink);
    border-radius: 2px;
    font-size: 13.5px;
    font-weight: 700;
    letter-spacing: 0.11em;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--h-ink);
    background: transparent;
    transition: background 0.25s ease, color 0.25s ease, gap 0.25s ease;
}

.kvc-hero__btn:hover {
    background: var(--h-ink);
    color: #fff;
    gap: 24px;
}

.kvc-hero__btn svg {
    width: 20px;
    height: 20px;
    flex: none;
}

/* ---------- Cụm ảnh: mặc định (điện thoại) xếp chồng đơn giản ---------- */
.kvc-hero__media {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.kvc-hero__pic {
    position: relative;
    margin: 0;
    height: 210px;
    overflow: hidden;
}

.kvc-hero__pic img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Trên điện thoại CHỈ hiển thị 1 ảnh (ảnh tập thể) cho trang gọn,
   không kéo dài lê thê. Hai ảnh còn lại chỉ hiện ở bản máy tính. */
.kvc-hero__pic--a,
.kvc-hero__pic--c {
    display: none;
}

.kvc-hero__pic--b {
    height: 280px;
    clip-path: polygon(0 0, 100% 0, 100% 93%, 0 100%);
}

.kvc-hero__shape {
    display: none;
}

/* ---------- Máy tính: chữ trái · cụm ảnh cắt chéo phải ---------- */
@media (min-width: 901px) {

    .kvc-hero__inner {
        display: grid;
        grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
        align-items: center;
        gap: clamp(28px, 3.5vw, 56px);

        /* CĂN LỀ: đẩy mép trái của chữ trùng đúng với container 1180px
           mà Management Team / Core Team / Advisors đang dùng, để cả
           trang thẳng một đường dọc. Cột ảnh vẫn chạy tràn sang mép
           phải màn hình như bản thiết kế. */
        padding-left: max(20px, calc((100% - 1180px) / 2 + 20px));
    }

    .kvc-hero__text {
        padding: 72px 40px 72px 0;
    }

    /* ------------------------------------------------------------
       BỐ CỤC CỤM ẢNH (bản sửa 20/08/2026)

       Bản trước cắt ảnh thành các hình nêm chéo rất hẹp theo mẫu
       thiết kế. Với ảnh chụp thực tế thì cách đó cắt mất người —
       ảnh trồng cây chỉ còn trời, ảnh dọn dẹp chỉ còn chân.

       Bản này dùng lưới 3 khung chữ nhật (1 khung dọc bên trái +
       2 khung ngang bên phải), chỉ vát nhẹ ở các cạnh ngoài. Vẫn
       giữ nét hiện đại nhưng chủ thể trong ảnh luôn còn nguyên.
       ------------------------------------------------------------ */
    .kvc-hero__media {
        display: grid;
        position: relative;
        width: 100%;
        height: auto;
        aspect-ratio: 880 / 660;
        min-height: 0;
        grid-template-columns: 0.82fr 1.18fr;
        grid-template-rows: 1fr 1fr;
        gap: 10px;
    }

    .kvc-hero__pic,
    .kvc-hero__pic--a,
    .kvc-hero__pic--c {
        display: block;
        position: relative;
        inset: auto;
        height: 100%;
        width: 100%;
    }

    /* Khung dọc bên trái — hợp ảnh chân dung / ảnh dọc */
    .kvc-hero__pic--a {
        grid-column: 1;
        grid-row: 1 / 3;
        clip-path: polygon(0 0, 100% 4%, 100% 100%, 0 96%);
    }

    /* Khung ngang phía trên bên phải — ảnh tập thể */
    .kvc-hero__pic--b {
        grid-column: 2;
        grid-row: 1;
        clip-path: polygon(0 0, 100% 0, 100% 92%, 0 100%);
    }

    /* Khung ngang phía dưới bên phải — ảnh hoạt động */
    .kvc-hero__pic--c {
        grid-column: 2;
        grid-row: 2;
        clip-path: polygon(0 8%, 100% 0, 100% 100%, 0 100%);
    }

    /* Bố cục lưới không cần hai khối màu trang trí nữa */
    .kvc-hero__shape {
        display: none !important;
    }
}

@media (min-width: 1500px) {
    .kvc-hero__inner {
        gap: 64px;
    }
}

/* Trình duyệt không hỗ trợ clip-path thì bỏ cắt chéo, vẫn hiển thị bình thường */
@supports not (clip-path: polygon(0 0, 1px 0, 1px 1px)) {
    .kvc-hero__pic { clip-path: none !important; }
    .kvc-hero__shape { display: none !important; }
}


/* ---------- Hero kiểu MỘT ẢNH LỚN ----------
   Dùng khi nhóm ACF mới chỉ có 1 ảnh. Tránh việc lặp lại cùng một
   tấm ảnh trong cả ba khung. ---------- */
.kvc-hero__media--single .kvc-hero__shape {
    display: none !important;
}

.kvc-hero__media--single .kvc-hero__pic--b {
    height: 280px;
    clip-path: polygon(0 0, 100% 0, 100% 93%, 0 100%);
}

@media (min-width: 901px) {
    .kvc-hero__media--single {
        display: block;
        aspect-ratio: 880 / 620;
    }

    .kvc-hero__media--single .kvc-hero__pic--b {
        position: absolute;
        inset: 0;
        height: auto;
        width: auto;
        clip-path: polygon(13% 0, 100% 0, 100% 100%, 0 100%, 0 20%);
    }
}
/* ==================================================================
   A. LƯỚI AN TOÀN TOÀN SITE
   ================================================================== */
 
/* Ảnh không bao giờ được rộng hơn khung chứa nó.
   Theme cha Flatsome nhiều khả năng đã có quy tắc này, nhưng đặt lại
   không hại gì và loại bỏ được một nguyên nhân gây tràn ngang. */
img {
    max-width: 100%;
    height: auto;
}
 
 
/* ==================================================================
   B. KHỐI "UPCOMING EVENTS" — TRÀN NGANG TRÊN ĐIỆN THOẠI
 
   TRIỆU CHỨNG: trên điện thoại, tiêu đề sự kiện, địa chỉ và nút
   "Register" bị cắt mất bên phải; trang cuộn ngang được.
 
   NGUYÊN NHÂN: .events__meta-location có white-space:nowrap để hiển
   thị địa chỉ một dòng kèm dấu "…". Nhưng text-overflow:ellipsis chỉ
   hoạt động khi khung chứa bị giới hạn chiều rộng — mà .events__card
   là ô CSS Grid, mặc định có min-width:auto nên KHÔNG được phép co
   nhỏ hơn nội dung. Chuỗi địa chỉ dài đẩy thẻ rộng ra 636px trên màn
   hình 390px.
 
   ĐÃ ĐO: trước 636px → sau 390px (không cuộn ngang ở 390/768/1440).
   ================================================================== */
 
/* Cho phép ô lưới co lại — đây là dòng quyết định */
#events .events__grid > * {
    min-width: 0;
}
 
/* Cho phép dòng địa chỉ co lại để dấu "…" thực sự xuất hiện
   (flex item cũng mặc định min-width:auto) */
#events .events__meta-item {
    min-width: 0;
}
 
#events .events__meta-location {
    min-width: 0;
    flex: 1;
}
 
/* Khối events đang có margin:0 auto nhưng KHÔNG có padding hai bên,
   nên nội dung dính sát mép màn hình.
   Đối chiếu: #news_home_page .container đã có padding 16px. */
#events .events__container {
    max-width: 1180px;
    padding-left: 16px;
    padding-right: 16px;
}
 
/* Tiêu đề 46px cố định quá lớn trên điện thoại */
#events .events__title {
    font-size: clamp(28px, 6vw, 46px);
}
 
@media (max-width: 767px) {
    #events {
        padding: 3rem 0;
    }
 
    #events .events__header {
        margin-bottom: 2rem;
    }
}
 
 
/* ==================================================================
   C. TRANG OUR TEAM
 
   Ba vấn đề riêng biệt, cùng một khối CSS:
 
   C1. Thẻ không đều — style.css đang đặt hai kích thước ô lưới:
       .team-section-ql .grid → minmax(268px)   (Management)
       .team-sub .team-grid   → minmax(224px)   (Core/Shop/Advisors)
       Ở 1024px và 768px, thẻ Core Team nhỏ hơn thẻ Management ~25%.
 
   C2. Điện thoại — Core Team ra 1 cột trong khi Management ra 2 cột.
       Dùng !important để thắng bất kể thứ gì đang ghi đè trên server.
 
   C3. Các thẻ dính thành một khối — nền thẻ #F2F5F2 so với nền trang
       #FFFFFF chỉ chênh ~5%, cộng border:none, nên khe hở 20px giữa
       các thẻ gần như vô hình.
 
   ĐÃ ĐO (rộng × cao một thẻ, Management / Core Team):
       1024px:  347/263 lệch  →  347/347 đều
        768px:  386/261 lệch  →  386/386 đều
        390px:  191/191       →  192/192 đều, 2 cột cả hai mục
   ================================================================== */
 
/* ---- C1. Mọi lưới nhân sự dùng chung một kích thước ô ---- */
.team-section-ql .grid,
.team-sub .team-grid {
    grid-template-columns: repeat(auto-fill, minmax(268px, 1fr)) !important;
    gap: 24px !important;
}
 
/* Ô lưới phải được phép co lại — cùng nguyên nhân với mục B */
.team-section-ql .grid > *,
.team-sub .team-grid > * {
    min-width: 0 !important;
}
 
/* ---- C1b. Đồng nhất cỡ chữ theo thẻ Management ---- */
.team-section-ql figcaption h3,
.team-sub figcaption h3 {
    font-size: 19px !important;
    overflow-wrap: anywhere;
}
 
.team-section-ql figcaption p,
.team-sub figcaption p {
    font-size: 14.5px !important;
}
 
/* KHÔNG đặt min-height cho h3.
   Chiều cao các thẻ cùng hàng đã tự bằng nhau nhờ grid
   (align-items: stretch). Ép min-height chỉ tạo khoảng hở xấu
   giữa tên và chức danh ở những người có tên ngắn. */
 
/* ---- C3. Tách rời từng thẻ ---- */
.team-section-ql .item,
.team-sub .item {
    box-sizing: border-box;   /* padding + viền tính VÀO chiều rộng thẻ.
                                 Thiếu dòng này thẻ rộng hơn ô lưới 34px,
                                 tràn qua khe hở và dính vào thẻ bên cạnh. */
    background: #FFFFFF !important;
    border: 1px solid #DCE5DC !important;
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(31, 77, 43, 0.06);
}
 
.team-section-ql .item:hover,
.team-sub .item:hover {
    border-color: #B9CDBB !important;
    box-shadow: 0 8px 22px rgba(31, 77, 43, 0.13);
}
 
/* Ảnh chân dung của KVC đều tách nền trắng. Khi thẻ đã chuyển sang
   trắng, ảnh cần nền xám nhạt để người trong ảnh không "trôi" ra
   ngoài khung. */
.team-section-ql .img-box,
.team-sub .img-box {
    box-sizing: border-box;
    background: #F4F7F4;
    border: 1px solid #EDF1ED;
}
 
/* ---- C2. Điện thoại: 2 cột đều nhau cho mọi mục ---- */
@media (max-width: 767px) {
    .team-section-ql .grid,
    .team-sub .team-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 14px !important;
    }
 
    .team-section-ql .item,
    .team-sub .item {
        padding: 11px 11px 13px !important;
        border-radius: 10px;
    }
 
    .team-section-ql figcaption h3,
    .team-sub figcaption h3 {
        font-size: 15px !important;
    }
 
    .team-section-ql figcaption p,
    .team-sub figcaption p {
        font-size: 12.5px !important;
    }
 
    .team-section-ql figcaption,
    .team-sub figcaption {
        padding-right: 40px !important;   /* chừa chỗ cho nút LinkedIn */
    }
 
    .team-section-ql .social,
    .team-sub .social {
        right: 11px !important;
        bottom: 12px !important;
    }
 
    .team-section-ql .social a,
    .team-sub .social a {
        width: 30px;
        height: 30px;
    }
 
    /* Tiêu đề mục sau đang dính sát thẻ của mục trước */
    .team-sub .sub-header,
    .team-section-ql .header {
        margin-top: 22px;
    }
}
 
/* Màn hình rất hẹp (dưới 340px) mới cho về 1 cột */
@media (max-width: 339px) {
    .team-section-ql .grid,
    .team-sub .team-grid {
        grid-template-columns: 1fr !important;
    }
}
 /* Thêm khoảng cách phía dưới cho nút Contact us */
a[href*="#"], .elementor-button, .elementor-button-link { 
    /* Hoặc class cụ thể của nút Contact us trong trình chỉnh sửa */
    margin-bottom: 20px; 
}
/* Tác động trực tiếp vào khối chứa nút Contact us trên mobile */
.elementor-element.elementor-widget-button {
    margin-bottom: 25px !important;
}