/* =========================================================
   GLOBAL - FONT & BACKGROUND
========================================================= */

body {
    font-family: 'Inter', sans-serif;
    background: #fff8f1;
}


/* =========================================================
   VỀ COOKIT - BANNER
   ========================================================= */

.veCookit {
    width: 100%;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden;
    line-height: 0;
}

    .veCookit img {
        width: 100%;
        height: auto;
        display: block;
        margin: 0 !important;
        padding: 0 !important;
    }

/* =========================================================
   ABOUT INTRO
========================================================= */

.about-intro {
    width: calc(100% - 80px);
    margin: 0 auto;
    padding: 55px 0;
    background: #fff8f1;
}

.about-intro-wrapper {
    width: calc(100% - 120px);
    max-width: 1400px;
    margin: 0 auto;
    padding: 0;
    display: flex;
    align-items: center;
    gap: 35px;
}


/* =========================================================
   LEFT - FAMILY IMAGE
========================================================= */

.about-family {
    width: 50%;
    flex: 0 0 50%;
}

    .about-family img {
        width: 100%;
        height: 430px;
        display: block;
        object-fit: cover;
        object-position: center;
    }


/* =========================================================
   RIGHT - CONTENT
========================================================= */

.about-intro-content {
    width: 50%;
    flex: 0 0 50%;
    position: relative;
    max-width: 570px;
}


/* =========================================================
   HEADING + AI
========================================================= */

.about-heading-row {
    width: 100%;
    display: block;
    position: relative;
}


/* =========================================================
   TEXT
========================================================= */

.about-heading-text {
    width: 100%;
    min-width: 0;
}


    /* ---------- Heading ---------- */

    .about-heading-text h2 {
        width: 100%;
        margin: 0 0 22px;
        font-size: 2.7rem;
        font-weight: 800;
        line-height: 1.05;
    }


        /* ĐẶC SẢN VIỆT */

        .about-heading-text h2 span {
            display: block;
            margin-bottom: 22px;
            color: #f26522;
        }


        /* TRONG TẦM TAY BẠN */

        .about-heading-text h2 strong {
            display: block;
            width: 100%;
            color: #2b5f22;
            font-weight: 800;
            white-space: nowrap;
        }


    /* ---------- Description ---------- */

    .about-heading-text p {
        width: 100%;
        margin: 0;
        color: #333;
        font-size: 1.15rem;
        line-height: 1.55;
    }


/* =========================================================
   AI / MASCOT
========================================================= */

.about-ai {
    position: absolute;
    width: 150px;
    top: -85px;
    right: -60px;
    z-index: 2;
}

    .about-ai img {
        width: 100%;
        height: auto;
        display: block;
    }


/* =========================================================
   QUOTE BOX
========================================================= */

.about-quote {
    width: 100%;
    min-height: 90px;
    margin-top: 22px;
    padding: 12px 20px;
    border: 2px solid #f5a623;
    border-radius: 22px;
    display: flex;
    align-items: center;
    gap: 18px;
    background: #fff8f1;
    box-sizing: border-box;
}

/* =========================================================
   QUOTE IMAGE
========================================================= */

.about-quote-icon {
    width: 75px;
    height: 75px;
    flex: 0 0 75px;
    position: relative;
    overflow: visible;
}

    .about-quote-icon img {
        width: 55px;
        height: 55px;
        max-width: none;
        display: block;
        object-fit: contain;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
    }


/* =========================================================
   QUOTE TEXT
========================================================= */

.about-quote-text {
    flex: 1;
    min-width: 0;
    color: #111;
    font-size: 1.2rem;
    line-height: 1.25;
}

    .about-quote-text strong {
        font-weight: 600;
    }


/* =========================================================
   CÂU CHUYỆN COOKIT
========================================================= */

.chuyenveCookit {
    width: 85%;
    max-width: 1200px;
    margin: 30px auto;
}

    .chuyenveCookit img {
        width: 100%;
        height: auto;
        display: block;
    }


/* =========================================================
   STORY
========================================================= */

.story-section {
    width: 100%;
    margin: 40px 0;
    padding: 0;
}

.story-images {
    width: 100%;
    display: flex;
    gap: 0;
    margin: 0;
    padding: 0;
}

    .story-images img {
        width: 50%;
        height: auto;
        display: block;
        margin: 0;
        padding: 0;
        object-fit: cover;
    }


/* =========================================================
   TẦM NHÌN
========================================================= */

.vision-section {
    width: calc(100% - 70px);
    margin: 0 auto;
    padding: 30px 0;
    background: #fff8f1;
}

/* ---------- TITLE ---------- */

.vision-title {
    margin: 0 0 45px;
    text-align: center;
    color: #f26522;
    font-size: 2.8rem;
    font-weight: 800;
    line-height: 1;
}


/* ---------- 2 CỘT 50/50 ---------- */

.vision-content {
    width: 100%;
    max-width: 1250px;
    margin: 0 auto;
    padding: 0 20px;
    display: flex;
    align-items: center;
    box-sizing: border-box;
}


/* ---------- LEFT - TEXT ---------- */

.vision-text {
    width: 50%;
    flex: 0 0 50%;
    padding-right: 55px;
    padding-left: 0;
    box-sizing: border-box;
}

.vision-heading,
.vision-subheading,
.vision-description {
    width: 100%;
    margin-left: 0;
    margin-right: 0;
    padding-left: 0;
    padding-right: 0;
    box-sizing: border-box;
}


/* 1. Heading lớn - XANH */

.vision-heading {
    color: #2b5f22;
    font-size: 2.3rem;
    font-weight: 800;
    line-height: 1.2;
    margin-bottom: 30px;
}


/* 2. Heading cam */

.vision-subheading {
    color: #f26522;
    font-size: 1.4rem;
    font-weight: 700;
    line-height: 1.45;
    margin-bottom: 28px;
}


/* 3. Nội dung */

.vision-description {
    color: #222;
    font-size: 1.05rem;
    line-height: 1.7;
}


/* ---------- RIGHT - IMAGE ---------- */

.vision-image {
    width: 50%;
    flex: 0 0 50%;
    display: flex;
    justify-content: center;
    align-items: center;
}

    .vision-image img {
        width: 100%;
        max-width: 650px;
        height: auto;
        display: block;
        object-fit: contain;
        border-radius: 14px;
    }


/* =========================================================
   FUTURE SECTION
========================================================= */

.future-section {
    width: 100%;
    margin: 0;
    padding: 50px 0;
    overflow: hidden;
    background: #fff8f1;
}

.future-images {
    width: 100%;
    margin: 0;
    padding: 0;
}

    .future-images img {
        width: 100%;
        height: auto;
        display: block;
    }

/* =========================================================
   FRUIT / VEGETABLE DECORATION STRIP
========================================================= */

.fruit-strip {
    width: 100%;
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    overflow: hidden;
    background: #fff8f1;
    margin: 60px 0;
    line-height: 0; /* Khử khoảng hở chân ảnh mặc định */
    margin-bottom: 50px !important;
}

    .fruit-strip img {
        width: 50%;
        flex: 0 0 50%;
        height: auto;
        max-height: 90px; /* Giới hạn chiều cao dải trang trí */
        object-fit: contain; /* Giữ trọn vẹn icon rau củ, không bị méo */
        display: block;
        user-select: none;
        pointer-events: none;
    }

@media (max-width: 768px) {
    .fruit-strip img {
        max-height: 60px;
    }
}
/* =========================================================
   RESPONSIVE - TABLET
========================================================= */

@media (max-width: 992px) {

    .about-intro-wrapper {
        padding: 0 25px;
        gap: 25px;
    }

    .about-family img {
        height: 360px;
    }

    .about-heading-text h2 {
        font-size: 2rem;
    }

        .about-heading-text h2 strong {
            white-space: normal;
        }

    .about-ai {
        width: 140px;
        top: -70px;
        right: -10px;
    }

    .about-quote {
        padding: 10px 15px;
    }

    .about-quote-icon {
        width: 65px;
        height: 65px;
        flex-basis: 65px;
    }
}


/* =========================================================
   RESPONSIVE - MOBILE
========================================================= */

@media (max-width: 768px) {

    .about-intro {
        padding: 40px 0;
    }

    .about-intro-wrapper {
        flex-direction: column;
        padding: 0 20px;
    }

    .about-family,
    .about-intro-content {
        width: 100%;
        flex: 0 0 100%;
        max-width: none;
    }

        .about-family img {
            height: auto;
            max-height: 400px;
        }

    .about-heading-text h2 {
        font-size: 2rem;
    }

        .about-heading-text h2 strong {
            white-space: normal;
        }

    .about-ai {
        width: 120px;
        top: -55px;
        right: 0;
    }

    .about-quote {
        margin-top: 25px;
    }
}


/* =========================================================
   RESPONSIVE - SMALL MOBILE
========================================================= */

@media (max-width: 480px) {

    .about-heading-text h2 {
        font-size: 1.65rem;
    }

    .about-heading-text p {
        font-size: 0.9rem;
    }

    .about-ai {
        width: 90px;
        top: -40px;
        right: 0;
    }

    .about-quote {
        gap: 10px;
        padding: 10px;
    }

    .about-quote-icon {
        width: 75px;
        height: 75px;
        flex-basis: 75px;
    }

    .about-quote-text {
        font-size: 0.85rem;
    }
}
/* =========================================================
   FIX: TOPBAR → BANNER VỀ COOKIT
   ========================================================= */

.ck-topbar + main {
    margin: 0 !important;
    padding: 0 !important;
}

main > section:first-child {
    margin-top: 0 !important;
    padding-top: 0 !important;
}