/* ==========================================================================
   micfood.css — tuỳ biến riêng cho MICFOOD.
   Nạp SAU cùng để đè template mà không phải sửa style.css dùng chung.
   Đơn vị rem theo hệ của template: html { font-size: 1.041666666vw }
   → @1440px thì 1rem = 15px; chốt 16px từ 1441px; 3.7325vw dưới 1024px.
   ========================================================================== */

/* Lớp phủ tối cho banner đầu trang chủ — chữ trắng đè lên ảnh sáng trước đây
   không có lớp phủ nào, rất khó đọc. */
#banner.banner {
    position: relative;
}
#banner.banner::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(4, 20, 12, .35) 0%, rgba(4, 20, 12, .78) 100%);
    z-index: 5;
    pointer-events: none;
}
#banner.banner .banner__content {
    z-index: 6;
}

/* Badge + tiêu đề lớn cho banner trang chủ — theo bố cục hero gốc
   (badge pill trên cùng, tiêu đề in đậm cỡ lớn, giữa trang). */
#banner .banner__slogan {
    max-width: 46rem;
    margin: 0 auto;
    text-align: center;
}
#banner .banner__slogan > p {
    display: inline-block;
    font-family: 'SVN-Gotham';
    font-size: .8125rem;
    font-weight: 500;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #fff;
    border: 1px solid rgba(255, 255, 255, .5);
    border-radius: 999px;
    padding: .55rem 1.35rem;
    margin: 0 0 1.5rem;
    background: rgba(255, 255, 255, .08);
}
#banner .banner__slogan h2 {
    font-family: 'SVN-Gotham';
    font-size: 2.5rem;
    font-weight: 700;
    line-height: 1.3;
    color: #fff;
    margin: 0 0 2rem;
}
#banner .banner__slogan .btns {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 1rem;
}
@media (max-width: 767px) {
    #banner .banner__slogan h2 {
        font-size: 1.75rem;
    }
    #banner .banner__slogan > p {
        font-size: .75rem;
        padding: .45rem 1.1rem;
    }
}

:root {
    --mf-green-dark: #085b36;
    --mf-green: #0cac56;
    --mf-green-soft: #1876BC;
    --mf-ink: #26312a;
    --mf-body: #4a544c;
    --mf-muted: #7c857e;
    --mf-tint: #eef4ec;
    --mf-line: #dde5da;
}

/* --- Thanh trên cùng: menu bên trái, hotline bên phải --- */
.top-bar .container-wide {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 100%;
    gap: 1.5rem;
}

.top-bar .top-bar-menu {
    flex: 0 1 auto;
}

.top-bar-hotline {
    flex: none;
    display: flex;
    align-items: center;
}

.top-bar-hotline a {
    color: #fff;
    font-size: .875rem;
    line-height: 1;
    letter-spacing: .02em;
    text-decoration: none;
    white-space: nowrap;
    transition: color .25s;
}

.top-bar-hotline a span {
    opacity: .65;
    margin-right: .35rem;
}

.top-bar-hotline a:hover {
    color: var(--mf-green-soft);
}

/* --- Chân trang --- */
.footer-slogan {
    font-size: 1.375rem;
    line-height: 1.2;
    letter-spacing: .01em;
    margin-bottom: .75rem;
}

.socials a.social-item {
    color: var(--mf-ink);
}

.socials a.social-item:hover {
    color: #fff;
}

.socials a.social-item svg {
    width: 1.25rem;
    height: 1.25rem;
    display: block;
}

/* ==========================================================================
   Khối dùng chung cho các trang trong
   ========================================================================== */

/* --- Banner đầu trang --- */
.mf-banner {
    background: linear-gradient(135deg, var(--mf-green-dark) 0%, #0a7a46 55%, var(--mf-green) 100%);
    color: #fff;
    padding: 5.5rem 0 4.5rem;
    position: relative;
    overflow: hidden;
}

.mf-banner::after {
    content: '';
    position: absolute;
    right: -6rem;
    bottom: -10rem;
    width: 28rem;
    height: 28rem;
    border-radius: 50%;
    background: rgba(255, 255, 255, .06);
    pointer-events: none;
}

.mf-banner__eyebrow {
    font-size: 1rem;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .72);
    margin: 0 0 .75rem;
}

.mf-banner__title {
    font-size: 3.25rem;
    font-weight: 700;
    line-height: 1.1;
    margin: 0 0 1rem;
    color: #fff;
}

.mf-banner__desc {
    font-size: 1.25rem;
    line-height: 1.55;
    max-width: 42rem;
    margin: 0;
    color: rgba(255, 255, 255, .88);
}

/* --- Khung section --- */
.mf-section {
    padding: 4.5rem 0;
}

.mf-section--tint {
    background: var(--mf-tint);
}

.mf-section--dark {
    background: var(--mf-green-dark);
    color: #fff;
}

.mf-section .section-title-wrapper {
    margin-bottom: 2.25rem;
}

.mf-section .section-title {
    color: var(--mf-green-dark);
    font-weight: 700;
}

.mf-section .section-subtitle {
    margin: 0 0 .5rem;
}

/* --- Đoạn văn --- */
.mf-prose p {
    font-size: 1.0625rem;
    line-height: 1.85;
    color: var(--mf-body);
    margin: 0 0 1.1rem;
}

.mf-prose--narrow {
    max-width: 52rem;
}

.mf-lead {
    font-size: 1.125rem;
    line-height: 1.75;
    color: var(--mf-body);
    max-width: 46rem;
    margin: 0 0 2rem;
}

/* --- Bốn điểm mạnh --- */
.mf-strengths {
    list-style: none;
    margin: 2.5rem 0 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
}

.mf-strength {
    background: #fff;
    border: 1px solid var(--mf-line);
    border-radius: .75rem;
    padding: 1.35rem 1.25rem 1.35rem 3.1rem;
    position: relative;
    font-size: 1rem;
    line-height: 1.5;
    font-weight: 500;
    color: var(--mf-ink);
    transition: box-shadow .25s, transform .25s, border-color .25s;
}

.mf-strength::before {
    content: '';
    position: absolute;
    left: 1.25rem;
    top: 1.6rem;
    width: 1.05rem;
    height: .55rem;
    border-left: .16rem solid var(--mf-green);
    border-bottom: .16rem solid var(--mf-green);
    transform: rotate(-45deg);
}

.mf-strength:hover {
    border-color: var(--mf-green);
    box-shadow: 0 .65rem 1.6rem rgba(8, 91, 54, .1);
    transform: translateY(-.15rem);
}

/* --- Dải con số --- */
.mf-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.75rem;
}

.mf-stat {
    position: relative;
    padding-right: 1.5rem;
}

.mf-stat:not(:last-child)::after {
    content: '';
    position: absolute;
    right: 0;
    top: .35rem;
    bottom: .35rem;
    width: 1px;
    background: rgba(255, 255, 255, .18);
}

.mf-stat__num {
    font-size: 3.5rem;
    font-weight: 700;
    line-height: 1;
    color: #fff;
    letter-spacing: -.01em;
}

.mf-stat__num sup {
    font-size: .45em;
    top: -.7em;
    margin-left: .05em;
}

.mf-stat__unit {
    font-size: 1rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .7);
    margin: .5rem 0 .75rem;
}

.mf-stat__desc {
    font-size: .9375rem;
    line-height: 1.6;
    color: rgba(255, 255, 255, .82);
    margin: 0;
}

/* --- Chuỗi 6S --- */
.mf-chain {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.25rem;
    counter-reset: chain;
}

.mf-chain__item {
    background: #fff;
    border: 1px solid var(--mf-line);
    border-radius: .9rem;
    padding: 1.6rem 1.5rem;
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    transition: border-color .25s, box-shadow .25s, transform .25s;
}

.mf-chain__item:hover {
    border-color: var(--mf-green);
    box-shadow: 0 .75rem 1.75rem rgba(8, 91, 54, .1);
    transform: translateY(-.2rem);
}

.mf-chain__no {
    flex: none;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 50%;
    background: var(--mf-tint);
    color: var(--mf-green-dark);
    font-size: 1rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .25s, color .25s;
}

.mf-chain__item:hover .mf-chain__no {
    background: var(--mf-green);
    color: #fff;
}

.mf-chain__title {
    font-size: 1.0625rem;
    font-weight: 600;
    line-height: 1.45;
    color: var(--mf-ink);
    margin: .45rem 0 0;
}

/* --- Sứ mệnh & Tầm nhìn --- */
.mf-mv {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
}

.mf-mv__item {
    background: #fff;
    border-radius: 1rem;
    padding: 2.25rem 2rem;
    border-top: .25rem solid var(--mf-green);
    box-shadow: 0 .5rem 1.5rem rgba(38, 49, 42, .05);
}

.mf-mv__title {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--mf-green-dark);
    margin: 0 0 .85rem;
}

.mf-mv__text {
    font-size: 1.0625rem;
    line-height: 1.8;
    color: var(--mf-body);
    margin: 0;
}

/* --- Giá trị cốt lõi --- */
.mf-values {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.25rem;
}

.mf-value {
    position: relative;
    background: #fff;
    border: 1px solid var(--mf-line);
    border-radius: .9rem;
    padding: 2.1rem 1.75rem 1.75rem;
    overflow: hidden;
    transition: border-color .25s, box-shadow .25s, transform .25s;
}

.mf-value::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: .2rem;
    background: linear-gradient(90deg, var(--mf-green-dark), var(--mf-green));
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .35s ease;
}

.mf-value:hover::before {
    transform: scaleX(1);
}

.mf-value:hover {
    border-color: var(--mf-green);
    box-shadow: 0 .85rem 2rem rgba(8, 91, 54, .1);
    transform: translateY(-.2rem);
}

.mf-value__no {
    display: block;
    font-size: 1.75rem;
    font-weight: 700;
    line-height: 1;
    color: var(--mf-tint);
    margin-bottom: .6rem;
    transition: color .25s;
}

.mf-value:hover .mf-value__no {
    color: var(--mf-green-soft);
}

.mf-value__title {
    font-size: 1.1875rem;
    font-weight: 700;
    color: var(--mf-green-dark);
    margin: 0 0 .7rem;
    line-height: 1.35;
}

.mf-value__text {
    font-size: .9688rem;
    line-height: 1.75;
    color: var(--mf-body);
    margin: 0;
}

/* --- Nút --- */
.mf-cta {
    margin-top: 2.25rem;
}

.mf-btn {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    background: var(--mf-green-dark);
    color: #fff;
    font-size: 1rem;
    font-weight: 600;
    padding: .95rem 2rem;
    border-radius: 2rem;
    text-decoration: none;
    transition: background .25s, transform .25s, box-shadow .25s;
}

.mf-btn::after {
    content: '→';
    font-size: 1.1em;
    line-height: 1;
    transition: transform .25s;
}

.mf-btn:hover {
    background: var(--mf-green);
    color: #fff;
    box-shadow: 0 .6rem 1.4rem rgba(8, 91, 54, .22);
}

.mf-btn:hover::after {
    transform: translateX(.25rem);
}

.mf-btn--ghost {
    background: transparent;
    color: var(--mf-green-dark);
    border: 1px solid var(--mf-green-dark);
}

.mf-btn--ghost:hover {
    background: var(--mf-green-dark);
    color: #fff;
}

/* ==========================================================================
   Máy tính bảng
   ========================================================================== */
@media screen and (max-width: 1023px) {
    .top-bar .container-wide {
        gap: .75rem;
    }

    .top-bar-hotline a {
        font-size: .8125rem;
    }

    .top-bar-hotline a span {
        display: none;
    }

    .mf-banner {
        padding: 3.5rem 0 3rem;
    }

    .mf-banner__title {
        font-size: 2.5rem;
    }

    .mf-banner__desc {
        font-size: 1.0625rem;
    }

    .mf-section {
        padding: 3rem 0;
    }

    .mf-strengths,
    .mf-stats,
    .mf-chain,
    .mf-values {
        grid-template-columns: repeat(2, 1fr);
    }

    .mf-stat:nth-child(2)::after {
        display: none;
    }

    .mf-stat__num {
        font-size: 2.75rem;
    }
}

/* ==========================================================================
   Điện thoại
   ========================================================================== */
@media screen and (max-width: 767px) {
    .mf-banner {
        padding: 2.75rem 0 2.5rem;
    }

    .mf-banner__title {
        font-size: 2rem;
    }

    .mf-banner__eyebrow {
        font-size: .875rem;
    }

    .mf-banner__desc {
        font-size: 1rem;
    }

    .mf-section {
        padding: 2.5rem 0;
    }

    .footer-slogan {
        font-size: 1.125rem;
    }

    .mf-strengths,
    .mf-stats,
    .mf-chain,
    .mf-values,
    .mf-mv {
        grid-template-columns: 1fr;
    }

    .mf-stat {
        padding-right: 0;
        padding-bottom: 1.25rem;
        border-bottom: 1px solid rgba(255, 255, 255, .16);
    }

    .mf-stat:last-child {
        border-bottom: 0;
        padding-bottom: 0;
    }

    .mf-stat::after {
        display: none !important;
    }

    .mf-mv__item {
        padding: 1.75rem 1.5rem;
    }

    .mf-btn {
        width: 100%;
        justify-content: center;
    }
}

/* ==========================================================================
   Trang Tin tuc
   ========================================================================== */
.mf-press {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.25rem;
}

.mf-press__item {
    display: block;
    background: #fff;
    border: 1px solid var(--mf-line);
    border-left: .25rem solid var(--mf-green);
    border-radius: .75rem;
    padding: 1.6rem 1.75rem;
    text-decoration: none;
    transition: box-shadow .25s, transform .25s, border-color .25s;
}

.mf-press__item:hover {
    box-shadow: 0 .85rem 2rem rgba(8, 91, 54, .12);
    transform: translateY(-.2rem);
    border-color: var(--mf-green);
}

.mf-press__source {
    display: block;
    font-size: .8125rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--mf-green-soft);
    margin-bottom: .6rem;
}

.mf-press__title {
    font-size: 1.125rem;
    font-weight: 600;
    line-height: 1.5;
    color: var(--mf-ink);
    margin: 0 0 .9rem;
}

.mf-press__meta {
    display: flex;
    align-items: center;
    gap: .9rem;
    font-size: .875rem;
}

.mf-press__date {
    color: var(--mf-muted);
}

.mf-press__go {
    color: var(--mf-green-dark);
    font-weight: 600;
}

.mf-press__go::after {
    content: ' ↗';
}

.mf-posts {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
}

.mf-post {
    background: #fff;
    border-radius: .9rem;
    overflow: hidden;
    border: 1px solid var(--mf-line);
}

.mf-post__thumb img {
    width: 100%;
    aspect-ratio: 16 / 10;
    object-fit: cover;
    display: block;
}

.mf-post__body {
    padding: 1.35rem 1.5rem 1.6rem;
}

.mf-post__date {
    font-size: .8125rem;
    color: var(--mf-muted);
    margin-bottom: .5rem;
}

.mf-post__title {
    font-size: 1.0625rem;
    line-height: 1.5;
    margin: 0 0 .6rem;
}

.mf-post__title a {
    color: var(--mf-ink);
    text-decoration: none;
}

.mf-post__title a:hover {
    color: var(--mf-green-dark);
}

.mf-post__excerpt {
    font-size: .9375rem;
    line-height: 1.7;
    color: var(--mf-body);
    margin: 0;
}

/* ==========================================================================
   Trang Lien he
   ========================================================================== */
.mf-contact {
    display: grid;
    grid-template-columns: 1fr 1.1fr;
    gap: 3rem;
    align-items: start;
}

.mf-contact__list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.mf-contact__list li {
    display: flex;
    gap: 1rem;
    padding: .95rem 0;
    border-bottom: 1px solid var(--mf-line);
}

.mf-contact__list li:last-child {
    border-bottom: 0;
}

.mf-contact__label {
    flex: none;
    width: 7rem;
    font-size: .875rem;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--mf-muted);
    padding-top: .15rem;
}

.mf-contact__value {
    font-size: 1rem;
    line-height: 1.6;
    color: var(--mf-ink);
    font-weight: 500;
}

.mf-contact__value a {
    color: var(--mf-green-dark);
    text-decoration: none;
}

.mf-contact__value a:hover {
    text-decoration: underline;
}

.mf-form .mf-field {
    margin-bottom: 1.1rem;
}

.mf-form label {
    display: block;
    font-size: .9375rem;
    font-weight: 500;
    color: var(--mf-ink);
    margin-bottom: .45rem;
}

.mf-form label span {
    color: #c0392b;
}

.mf-form input,
.mf-form textarea {
    width: 100%;
    box-sizing: border-box;
    font-family: inherit;
    font-size: 1rem;
    color: var(--mf-ink);
    background: #fff;
    border: 1px solid var(--mf-line);
    border-radius: .55rem;
    padding: .85rem 1rem;
    transition: border-color .2s, box-shadow .2s;
}

.mf-form input:focus,
.mf-form textarea:focus {
    outline: none;
    border-color: var(--mf-green);
    box-shadow: 0 0 0 .2rem rgba(12, 172, 86, .14);
}

.mf-form textarea {
    resize: vertical;
    min-height: 8rem;
}

.mf-alert {
    border-radius: .6rem;
    padding: .95rem 1.15rem;
    font-size: .9375rem;
    margin-bottom: 1.25rem;
}

.mf-alert--ok {
    background: #e6f6ec;
    color: #1c6b3f;
    border: 1px solid #b7e2c7;
}

.mf-places {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.25rem;
}

.mf-place {
    background: #fff;
    border: 1px solid var(--mf-line);
    border-radius: .8rem;
    padding: 1.5rem 1.6rem;
}

.mf-place__name {
    font-size: 1.0625rem;
    font-weight: 700;
    color: var(--mf-green-dark);
    margin: 0 0 .55rem;
}

.mf-place__addr {
    font-size: .9688rem;
    line-height: 1.7;
    color: var(--mf-body);
    margin: 0;
}

.mf-place__note {
    font-size: .875rem;
    color: var(--mf-muted);
    margin: .5rem 0 0;
    font-style: italic;
}

.mf-cta .mf-btn+.mf-btn {
    margin-left: .75rem;
}

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

    .mf-press,
    .mf-places {
        grid-template-columns: repeat(2, 1fr);
    }

    .mf-posts {
        grid-template-columns: repeat(2, 1fr);
    }

    .mf-contact {
        grid-template-columns: 1fr;
        gap: 2.25rem;
    }
}

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

    .mf-press,
    .mf-posts,
    .mf-places {
        grid-template-columns: 1fr;
    }

    .mf-contact__list li {
        flex-direction: column;
        gap: .25rem;
    }

    .mf-contact__label {
        width: auto;
    }

    .mf-cta .mf-btn+.mf-btn {
        margin-left: 0;
        margin-top: .75rem;
    }
}

/* ==========================================================================
   Trang Lich su - dai thoi gian
   ========================================================================== */
.mf-timeline {
    list-style: none;
    margin: 0;
    padding: 0 0 0 1rem;
    position: relative;
}

.mf-timeline::before {
    content: '';
    position: absolute;
    left: 5.6rem;
    top: .6rem;
    bottom: .6rem;
    width: 2px;
    background: linear-gradient(180deg, var(--mf-green) 0%, var(--mf-line) 100%);
}

.mf-timeline__item {
    display: flex;
    align-items: flex-start;
    gap: 2.5rem;
    padding: 0 0 1.85rem;
    position: relative;
}

.mf-timeline__item:last-child {
    padding-bottom: 0;
}

.mf-timeline__year {
    flex: none;
    width: 4.6rem;
    text-align: right;
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.2;
    color: var(--mf-green-dark);
    padding-top: .55rem;
}

.mf-timeline__item::before {
    content: '';
    position: absolute;
    left: 4.6rem;
    top: 1.05rem;
    width: .8rem;
    height: .8rem;
    border-radius: 50%;
    background: #fff;
    border: .18rem solid var(--mf-green);
    z-index: 1;
}

.mf-timeline__body {
    flex: 1;
    background: #fff;
    border: 1px solid var(--mf-line);
    border-radius: .75rem;
    padding: 1.15rem 1.5rem;
    transition: border-color .25s, box-shadow .25s, transform .25s;
}

.mf-timeline__item:hover .mf-timeline__body {
    border-color: var(--mf-green);
    box-shadow: 0 .6rem 1.5rem rgba(8, 91, 54, .1);
    transform: translateX(.2rem);
}

.mf-timeline__text {
    font-size: 1rem;
    line-height: 1.7;
    color: var(--mf-body);
    margin: 0;
}

/* ==========================================================================
   Trang San pham
   ========================================================================== */
.mf-areas {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.75rem;
}

.mf-area {
    background: #fff;
    border: 1px solid var(--mf-line);
    border-radius: 1rem;
    padding: 2.25rem 2rem;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    transition: border-color .25s, box-shadow .25s;
}

.mf-area:hover {
    border-color: var(--mf-green);
    box-shadow: 0 .9rem 2.2rem rgba(8, 91, 54, .1);
}

.mf-area__tag {
    display: inline-block;
    font-size: .8125rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--mf-green-dark);
    background: var(--mf-tint);
    border-radius: 1.5rem;
    padding: .4rem 1rem;
    margin-bottom: 1rem;
}

.mf-area__title {
    font-size: 1.625rem;
    font-weight: 700;
    color: var(--mf-green-dark);
    margin: 0 0 .9rem;
    line-height: 1.3;
}

.mf-area__text {
    font-size: 1rem;
    line-height: 1.8;
    color: var(--mf-body);
    margin: 0 0 1.75rem;
    flex: 1;
}

.mf-items {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.25rem;
}

.mf-item {
    background: #fff;
    border: 1px solid var(--mf-line);
    border-radius: .85rem;
    padding: 1.75rem 1.6rem;
    transition: border-color .25s, box-shadow .25s, transform .25s;
}

.mf-item:hover {
    border-color: var(--mf-green);
    box-shadow: 0 .8rem 1.9rem rgba(8, 91, 54, .1);
    transform: translateY(-.2rem);
}

.mf-item__title {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--mf-green-dark);
    margin: 0 0 .7rem;
    line-height: 1.4;
}

.mf-item__text {
    font-size: .9688rem;
    line-height: 1.75;
    color: var(--mf-body);
    margin: 0;
}

.mf-item__spec {
    font-size: .875rem;
    line-height: 1.6;
    color: var(--mf-muted);
    margin: .85rem 0 0;
    padding-top: .85rem;
    border-top: 1px dashed var(--mf-line);
}

.mf-facts {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
    margin-top: 2.25rem;
}

.mf-fact {
    background: #fff;
    border-radius: .75rem;
    padding: 1.3rem 1.4rem;
    border-left: .2rem solid var(--mf-green);
}

.mf-fact__label {
    font-size: .8125rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--mf-muted);
    margin-bottom: .45rem;
}

.mf-fact__value {
    font-size: 1.0625rem;
    font-weight: 600;
    line-height: 1.45;
    color: var(--mf-green-dark);
}

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

    .mf-items,
    .mf-facts {
        grid-template-columns: repeat(2, 1fr);
    }
}

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

    .mf-areas,
    .mf-items,
    .mf-facts {
        grid-template-columns: 1fr;
    }

    .mf-timeline {
        padding-left: 0;
    }

    .mf-timeline::before {
        left: .4rem;
    }

    .mf-timeline__item {
        flex-direction: column;
        gap: .55rem;
        padding-left: 2rem;
    }

    .mf-timeline__item::before {
        left: 0;
        top: .55rem;
    }

    .mf-timeline__year {
        width: auto;
        text-align: left;
        padding-top: 0;
        font-size: 1.375rem;
    }

    .mf-timeline__body {
        width: 100%;
        box-sizing: border-box;
    }
}

/* ==========================================================================
   Khối 5 giá trị cốt lõi ở trang chủ (.layers)
   Template gốc chỉ đặt màu cho tấm 2 và 3 vì có đúng 3 tấm E/S/G.
   MICFOOD có 5 giá trị nên bổ sung màu cho tấm 4 và 5, giữ nguyên bố cục.
   ========================================================================== */
.layer-item:nth-child(4) .layer-keyword {
    color: #6CBE45;
}

.layer-item:nth-child(5) .layer-keyword {
    color: #8FC640;
}

.layer-item:nth-child(4) .layer-image:before {
    background: linear-gradient(90deg, rgba(255, 255, 255, 0) 49%, #3B8E4C 100%);
}

.layer-item:nth-child(5) .layer-image:before {
    background: linear-gradient(90deg, rgba(255, 255, 255, 0) 49%, #8FC640 100%);
}

.layer-item:nth-child(4) .layer-content:before {
    background: #3B8E4C;
}

.layer-item:nth-child(5) .layer-content:before {
    background: #8FC640;
}

/* ==========================================================================
   Trang Tin tức — Chuẩn GreenFeed Layout & Aesthetics
   ========================================================================== */

/* --- Banner Tin tức (Hero) --- */
.gf-news-banner {
    min-height: 240px;
    background: linear-gradient(180deg, rgba(15, 28, 20, 0.6) 0%, rgba(10, 20, 15, 0.75) 100%), url('/uploads/tham-khao-tam/banner-03.jpg') center 35% / cover no-repeat;
    display: flex;
    align-items: flex-end;
    padding-bottom: 35px;
    position: relative;
}

.gf-news-banner__breadcrumb {
    font-size: .8125rem;
    color: rgba(255, 255, 255, 0.75);
    margin-bottom: .4rem;
}

.gf-news-banner__breadcrumb a {
    color: rgba(255, 255, 255, 0.75);
    text-decoration: none;
    transition: color .2s;
}

.gf-news-banner__breadcrumb a:hover {
    color: #fff;
}

.gf-news-banner__breadcrumb .sep {
    margin: 0 .35rem;
    opacity: .6;
}

.gf-news-banner__breadcrumb .current {
    color: rgba(255, 255, 255, 0.9);
}

.gf-news-banner__title {
    font-size: 2.25rem;
    font-weight: 700;
    color: #fff;
    margin: 0;
    line-height: 1.2;
}

/* --- Container chung cho trang tin tức --- */
.gf-news-content {
    background: #fff;
    padding: 2.25rem 0 4rem;
}

.gf-section {
    padding: 1.75rem 0;
}

.gf-section--tight {
    padding: .75rem 0 1.5rem;
}

/* --- Section Head: Thanh dọc xanh lá + Tiêu đề Uppercase --- */
.gf-head {
    display: flex;
    align-items: center;
    gap: .65rem;
    margin-bottom: 1.35rem;
}

.gf-head__bar {
    width: .22rem;
    height: 1.25rem;
    background: #236598;
    border-radius: .1rem;
    flex: none;
}

.gf-head__title {
    font-size: .875rem;
    font-weight: 700;
    letter-spacing: .06em;
    color: #2d3748;
    margin: 0;
    text-transform: uppercase;
}

/* =============================================================
   S1: TIN NỔI BẬT (Featured News)
   ============================================================= */
.gf-featured-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2.25rem;
}

/* Cột trái: Bài chính */
.gf-feat-main {
    display: block;
    text-decoration: none;
    color: inherit;
}

.gf-feat-main__thumb {
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: #f0f2f5;
    border-radius: 4px;
    margin-bottom: .85rem;
}

.gf-feat-main__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .45s ease;
}

.gf-feat-main:hover .gf-feat-main__thumb img {
    transform: scale(1.03);
}

.gf-feat-main__title {
    font-size: 1.1875rem;
    font-weight: 800;
    line-height: 1.35;
    color: #111;
    margin: 0 0 .5rem;
    text-transform: uppercase;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    transition: color .2s;
}

.gf-feat-main:hover .gf-feat-main__title {
    color: #236598;
}

.gf-feat-main__excerpt {
    font-size: .875rem;
    line-height: 1.6;
    color: #555;
    margin: 0 0 .75rem;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Meta chung */
.gf-meta {
    display: flex;
    align-items: center;
    gap: 1.1rem;
    font-size: .75rem;
    color: #888;
}

.gf-meta--compact {
    gap: .75rem;
    margin-bottom: .25rem;
}

.gf-meta__item {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
}

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

/* Cột phải: 4 bài phụ */
.gf-feat-side {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.gf-feat-side__item {
    display: flex;
    gap: 1rem;
    text-decoration: none;
    color: inherit;
    padding-bottom: .95rem;
    border-bottom: 1px solid #edf0f2;
    transition: opacity .2s;
}

.gf-feat-side__item:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.gf-feat-side__thumb {
    flex: 0 0 7rem;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: #f0f2f5;
    border-radius: 4px;
}

.gf-feat-side__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .35s ease;
}

.gf-feat-side__item:hover .gf-feat-side__thumb img {
    transform: scale(1.04);
}

.gf-feat-side__body {
    flex: 1;
    min-width: 0;
}

.gf-feat-side__title {
    font-size: .8125rem;
    font-weight: 700;
    line-height: 1.35;
    color: #111;
    margin: 0;
    text-transform: uppercase;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    transition: color .2s;
}

.gf-feat-side__item:hover .gf-feat-side__title {
    color: #236598;
}

/* =============================================================
   S2: BÁO CHÍ (Press Grid 4 cột)
   ============================================================= */
.gf-press-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
}

.gf-press-card {
    display: flex;
    gap: .75rem;
    background: #fff;
    border: 1px solid #e8ecef;
    border-radius: 8px;
    padding: .75rem;
    text-decoration: none;
    color: inherit;
    transition: all .25s ease;
    align-items: center;
}

.gf-press-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.05);
    border-color: #236598;
}

.gf-press-card__thumb {
    flex: 0 0 4.25rem;
    height: 3.25rem;
    border-radius: 4px;
    overflow: hidden;
    background: #f5f7f8;
}

.gf-press-card__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.gf-press-card__body {
    flex: 1;
    min-width: 0;
}

.gf-press-card__title {
    font-size: .78125rem;
    font-weight: 600;
    line-height: 1.35;
    color: #222;
    margin: 0 0 .3rem;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.gf-press-card__footer {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-size: .6875rem;
}

.gf-press-card__source {
    font-weight: 700;
}

.gf-press-card__date {
    color: #999;
}

/* Nút Xem thêm */
.gf-more-btn-wrap {
    text-align: center;
    margin-top: 1.75rem;
}

.gf-btn-more {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    font-size: .8125rem;
    font-weight: 600;
    color: #236598;
    border: 1.5px solid #236598;
    border-radius: 2rem;
    padding: .45rem 1.6rem;
    text-decoration: none;
    background: #fff;
    transition: all .25s ease;
}

.gf-btn-more:hover {
    background: #236598;
    color: #fff;
}

/* =============================================================
   S3: DANH MỤC BÀI VIẾT (Pill Tags)
   ============================================================= */
.gf-tags-wrap {
    display: flex;
    flex-wrap: wrap;
    gap: .55rem;
}

.gf-tag {
    display: inline-block;
    padding: .4rem 1.15rem;
    border: 1px solid #dcdfe3;
    border-radius: 1.5rem;
    font-size: .8125rem;
    color: #444;
    background: #fff;
    cursor: pointer;
    text-decoration: none;
    transition: all .2s ease;
    white-space: nowrap;
    user-select: none;
}

.gf-tag:hover {
    border-color: #236598;
    color: #236598;
}

.gf-tag--active {
    background: #236598;
    border-color: #236598;
    color: #fff;
}

/* =============================================================
   S4: TIN TỨC MỚI NHẤT (Latest Grid 4 Cột)
   ============================================================= */
.gf-latest-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2rem 1.35rem;
}

.gf-latest-card {
    display: block;
    text-decoration: none;
    color: inherit;
    transition: opacity .2s;
}

.gf-latest-card__thumb {
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: #f0f2f5;
    border-radius: 4px;
    margin-bottom: .65rem;
}

.gf-latest-card__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .4s ease;
}

.gf-latest-card:hover .gf-latest-card__thumb img {
    transform: scale(1.04);
}

.gf-latest-card__title {
    font-size: .8125rem;
    font-weight: 700;
    line-height: 1.35;
    color: #111;
    margin: 0 0 .35rem;
    text-transform: uppercase;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    transition: color .2s;
}

.gf-latest-card:hover .gf-latest-card__title {
    color: #236598;
}

.gf-latest-card__excerpt {
    font-size: .78125rem;
    line-height: 1.55;
    color: #666;
    margin: 0 0 .65rem;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.gf-latest-card__meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: .71875rem;
    color: #888;
    border-top: 1px solid #f4f4f4;
    padding-top: .5rem;
}

.gf-latest-card__views {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
}

/* =============================================================
   PAGINATION
   ============================================================= */
.gf-pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: .45rem;
    margin-top: 2.75rem;
}

.gf-page-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2rem;
    height: 2rem;
    padding: 0 .4rem;
    border: 1px solid #dcdfe3;
    border-radius: 3px;
    font-size: .8125rem;
    color: #555;
    text-decoration: none;
    transition: all .2s;
}

.gf-page-num:hover {
    border-color: #236598;
    color: #236598;
}

.gf-page-num--active {
    background: #236598;
    border-color: #236598;
    color: #fff;
    font-weight: 700;
}

.gf-page-dots {
    color: #999;
    padding: 0 .25rem;
}

.gf-page-next {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border: 1px solid #dcdfe3;
    border-radius: 3px;
    font-size: 1.1rem;
    color: #555;
    text-decoration: none;
    transition: all .2s;
}

.gf-page-next:hover {
    border-color: #236598;
    color: #236598;
}

/* =============================================================
   Chi tiết bài viết
   ============================================================= */
.mf-article {
    max-width: 50rem;
    margin: 0 auto;
    padding: 2rem 0;
}

.mf-article__back {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    font-size: .9375rem;
    font-weight: 500;
    color: #236598;
    text-decoration: none;
    margin-bottom: 2rem;
    transition: gap .25s;
}

.mf-article__back:hover {
    gap: .65rem;
}

.mf-article__cover {
    width: 100%;
    border-radius: 8px;
    margin-bottom: 2.5rem;
    display: block;
}

.mf-article__content {
    font-size: 1.0625rem;
    line-height: 1.85;
    color: var(--mf-body);
}

.mf-article__content p {
    margin: 0 0 1.2rem;
}

.mf-article__content img {
    max-width: 100%;
    border-radius: 8px;
    margin: 1.5rem 0;
}

/* =============================================================
   Responsive Tin tức (GreenFeed Style)
   ============================================================= */
@media screen and (max-width: 1023px) {
    .gf-featured-grid {
        grid-template-columns: 1fr;
        gap: 1.75rem;
    }

    .gf-press-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .gf-latest-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media screen and (max-width: 767px) {
    .gf-news-banner {
        min-height: 180px;
        padding-bottom: 20px;
    }

    .gf-news-banner__title {
        font-size: 1.65rem;
    }

    .gf-feat-side__thumb {
        flex: 0 0 5.5rem;
    }

    .gf-press-grid {
        grid-template-columns: 1fr;
    }

    .gf-latest-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

    .gf-feat-main__title {
        font-size: 1.0625rem;
    }
}

/* ==========================================================================
   Mega Menu & Header Dropdown Fix for MICFOOD
   ========================================================================== */
.header-menu .menu-item .dt-dropdown-menu-wrapper.mf-mega-menu {
    width: 36rem !important;
    max-width: 92vw !important;
    min-width: unset !important;
    height: auto !important;
    min-height: unset !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    padding: 1.5rem 1.75rem !important;
    border-radius: 8px !important;
    box-shadow: 0 12px 36px rgba(0, 0, 0, 0.12) !important;
    border: 1px solid #eef1f3 !important;
    background: #fff !important;
    box-sizing: border-box !important;
}

.header-menu .menu-item .dt-dropdown-menu-wrapper.mf-mega-menu:before {
    display: none !important;
}

.mf-mega-inner {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 1.75rem !important;
    width: 100% !important;
}

.mf-mega-col {
    display: flex !important;
    flex-direction: column !important;
}

.mf-mega-col:first-child {
    border-right: 1px solid #f0f2f5 !important;
    padding-right: 1.5rem !important;
}

.mf-mega-col__head {
    display: block !important;
    text-decoration: none !important;
    border-bottom: 2px solid #236598 !important;
    padding-bottom: .6rem !important;
    margin-bottom: .75rem !important;
    transition: opacity .2s !important;
}

.mf-mega-col__head:hover {
    opacity: .85 !important;
}

.mf-mega-col__tag {
    display: block !important;
    font-size: .875rem !important;
    font-weight: 800 !important;
    color: #111 !important;
    letter-spacing: .03em !important;
    text-transform: uppercase !important;
    line-height: 1.3 !important;
}

.mf-mega-col__sub {
    display: block !important;
    font-size: .75rem !important;
    font-weight: 500 !important;
    color: #777 !important;
    margin-top: .15rem !important;
    text-transform: none !important;
}

.mf-mega-col__list {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: .45rem !important;
}

.mf-mega-col__list li {
    padding: 0 !important;
    margin: 0 !important;
}

.mf-mega-col__list li a {
    display: block !important;
    font-size: .8125rem !important;
    color: #4a5568 !important;
    text-decoration: none !important;
    padding: .2rem 0 !important;
    transition: all .2s ease !important;
    font-weight: 500 !important;
    line-height: 1.4 !important;
    white-space: normal !important;
    border: none !important;
}

.mf-mega-col__list li a:hover {
    color: #236598 !important;
    transform: translateX(4px) !important;
}

@media screen and (max-width: 767px) {
    .header-menu .menu-item .dt-dropdown-menu-wrapper.mf-mega-menu {
        width: 100% !important;
        transform: none !important;
        left: 0 !important;
        box-shadow: none !important;
        padding: 1rem !important;
    }

    .mf-mega-inner {
        grid-template-columns: 1fr !important;
        gap: 1.25rem !important;
    }

    .mf-mega-col:first-child {
        border-right: none !important;
        border-bottom: 1px solid #f0f2f5 !important;
        padding-right: 0 !important;
        padding-bottom: 1rem !important;
    }
}

/* ==========================================================================
   BỘ HOẠ TIẾT LẤY TỪ HỒ SƠ NĂNG LỰC MICFOOD (resize.pdf)
   K1 Số lớn + hộp cờ · K2 Ảnh vát góc · K3 Sơ đồ hub · K4 Thẻ chấm nối
   K5 Chuỗi 6S viên thuốc · K6 Huy hiệu góc ảnh · K7 Khối sóng nước · K8 Băng tiêu đề vát
   Dùng chung cho mọi trang dựng mới theo plan iridescent-brewing-sky.
   ========================================================================== */

:root {
    --mf-blue: #1876BC;
    --mf-navy: #236598;
    --mf-green: #6CBE45;
    --mf-lime: #8FC640;
    --mf-blue-tint: #E7F6FD;
    --mf-blue-pale: #AFD9EE;
    --mf-crab: #E54F36;
    --mf-ink2: #1F2933;
}

/* ---- K1 — Số lớn + hộp cờ (kiểu "2S" trong PDF) ---- */
.mf-pdf-k1 {
    display: flex;
    align-items: stretch;
    gap: 0;
    margin-bottom: 1.5rem;
}
.mf-pdf-k1__num {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 5.5rem;
    padding: 0 .75rem;
    font-family: 'SVN-Gotham', Arial, sans-serif;
    font-weight: 800;
    font-size: 3.4rem;
    line-height: 1;
    color: var(--mf-blue);
}
.mf-pdf-k1__flag {
    position: relative;
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    background: var(--mf-lime);
    color: #fff;
    padding: 1.1rem 1.6rem 1.1rem 2.2rem;
    border-radius: 0 .6rem .6rem 0;
    font-size: .95rem;
    line-height: 1.5;
    font-weight: 600;
}
.mf-pdf-k1__flag:before {
    content: "";
    position: absolute;
    left: -1.1rem;
    top: 0;
    width: 1.2rem;
    height: 100%;
    background: var(--mf-lime);
    clip-path: polygon(100% 0, 0 50%, 100% 100%);
}

/* ---- K2 — Ảnh vát góc + caption nghiêng ---- */
.mf-pdf-k2 {
    position: relative;
    overflow: hidden;
    border-radius: 1rem;
    clip-path: polygon(0 0, 100% 0, 100% 84%, 84% 100%, 0 100%);
}
.mf-pdf-k2 img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.mf-pdf-k2__cap {
    position: absolute;
    right: -2.6rem;
    bottom: 1.1rem;
    background: var(--mf-blue);
    color: #fff;
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    padding: .35rem 3rem .35rem 1.2rem;
    transform: rotate(-8deg);
    white-space: nowrap;
}

/* ---- K3 — Sơ đồ hub (tâm tròn + vệ tinh nối đường chấm) ---- */
.mf-pdf-k3 {
    position: relative;
    display: grid;
    place-items: center;
    min-height: 22rem;
}
.mf-pdf-k3__center {
    position: relative;
    z-index: 3;
    width: 8rem;
    height: 8rem;
    border-radius: 50%;
    background: linear-gradient(160deg, var(--mf-blue), var(--mf-navy));
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 0 6px var(--mf-blue-tint);
}
.mf-pdf-k3__center img {
    width: 62%;
    height: 62%;
    object-fit: contain;
}
.mf-pdf-k3__node {
    position: absolute;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .5rem;
    width: 8.5rem;
    text-align: center;
}
.mf-pdf-k3__node-dot {
    width: 3.4rem;
    height: 3.4rem;
    border-radius: 50%;
    overflow: hidden;
    border: 3px solid #fff;
    box-shadow: 0 4px 14px rgba(24,118,188,.25);
}
.mf-pdf-k3__node-dot img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.mf-pdf-k3__node-label {
    background: #fff;
    border: 1px solid var(--mf-blue-pale);
    border-radius: .5rem;
    padding: .4rem .7rem;
    font-size: .8rem;
    font-weight: 700;
    color: var(--mf-ink2);
    box-shadow: 0 2px 8px rgba(0,0,0,.05);
}
.mf-pdf-k3__line {
    position: absolute;
    z-index: 1;
    border-top: 2px dashed var(--mf-blue-pale);
}

/* ---- K4 — Thẻ chấm nối (chấm tròn + đường kẻ dọc) ---- */
.mf-pdf-k4 {
    position: relative;
    padding-top: 1.6rem;
    margin-top: .4rem;
}
.mf-pdf-k4:before {
    content: "";
    position: absolute;
    top: 0;
    left: 1.4rem;
    width: .6rem;
    height: .6rem;
    border-radius: 50%;
    background: var(--mf-blue);
}
.mf-pdf-k4:after {
    content: "";
    position: absolute;
    top: .55rem;
    left: 1.65rem;
    width: 1px;
    height: 1rem;
    background: var(--mf-blue-pale);
}
.mf-pdf-k4__card {
    border: 1px solid var(--mf-blue-pale);
    border-radius: .75rem;
    padding: 1.25rem 1.4rem;
    background: #fff;
}
.mf-pdf-k4__card strong {
    display: block;
    color: var(--mf-blue);
    font-size: .95rem;
    margin-bottom: .35rem;
}

/* ---- K6 — Huy hiệu tròn góc ảnh ---- */
.mf-pdf-k6 {
    position: relative;
}
.mf-pdf-k6__badge {
    position: absolute;
    top: -.9rem;
    left: -.9rem;
    z-index: 2;
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    background: var(--mf-blue);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    box-shadow: 0 4px 12px rgba(24,118,188,.35);
}
.mf-pdf-k6__badge svg,
.mf-pdf-k6__badge img {
    width: 1.4rem;
    height: 1.4rem;
}

/* ---- K7 — Khối sóng nước trang trí (lấy nét chữ S của logo) ---- */
.mf-pdf-k7 {
    position: relative;
    overflow: hidden;
}
.mf-pdf-k7:before {
    content: "";
    position: absolute;
    right: -8%;
    top: -20%;
    width: 60%;
    height: 140%;
    background: radial-gradient(ellipse at center, var(--mf-blue-tint) 0%, rgba(231,246,253,0) 70%);
    pointer-events: none;
    z-index: 0;
}
.mf-pdf-k7__wave {
    position: absolute;
    z-index: 0;
    opacity: .12;
    pointer-events: none;
}

/* ---- K8 — Băng tiêu đề vát góc ---- */
.mf-pdf-k8 {
    display: inline-block;
    position: relative;
    background: var(--mf-blue);
    color: #fff;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .05em;
    padding: .6rem 1.8rem .6rem 1.3rem;
    clip-path: polygon(0 0, 100% 0, 92% 100%, 0% 100%);
}

/* ---- Responsive: gộp cột trên mobile cho K1/K3 ---- */
@media (max-width: 1023px) {
    .mf-pdf-k1__num {
        min-width: 4.2rem;
        font-size: 2.4rem;
    }
    .mf-pdf-k3 {
        min-height: auto;
        display: flex;
        flex-direction: column;
        gap: 1.25rem;
    }
    .mf-pdf-k3__node,
    .mf-pdf-k3__line {
        position: static;
        width: auto;
        flex-direction: row;
        justify-content: flex-start;
        border-top: none;
    }
    .mf-pdf-k3__line { display: none; }
}


/* ==========================================================================
   Trang /san-pham-va-dich-vu — dải sản phẩm zig-zag (P4)
   ========================================================================== */
.mf-product-row {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    gap: 3.5rem;
    align-items: center;
    padding: 3.5rem 0;
    border-bottom: 1px solid #e7ebee;
}
.mf-product-row:first-child { padding-top: 0; }
.mf-product-row:last-child { border-bottom: none; padding-bottom: 0; }

.mf-product-row--swap {
    grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
}
.mf-product-row--swap .mf-product-row__media { order: 2; }
.mf-product-row--swap .mf-product-row__content { order: 1; }

.mf-product-row__media .mf-pdf-k2 {
    aspect-ratio: 4 / 3.4;
}

.mf-product-row__title {
    font-family: 'SVN-Gotham', Arial, sans-serif;
    font-weight: 800;
    font-size: 1.7rem;
    color: var(--mf-ink2, #1F2933);
    margin-bottom: .9rem;
}
.mf-product-row__desc {
    font-size: 1rem;
    line-height: 1.7;
    color: #4a544c;
    margin-bottom: 1.3rem;
}
.mf-product-row__desc em {
    font-style: italic;
}
.mf-product-row__facts {
    list-style: none;
    margin: 0 0 1.5rem;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: .6rem;
}
.mf-product-row__facts li {
    background: var(--mf-blue-tint, #E7F6FD);
    color: var(--mf-navy, #236598);
    font-size: .82rem;
    font-weight: 600;
    padding: .45rem .9rem;
    border-radius: 2rem;
}

@media (max-width: 1023px) {
    .mf-product-row,
    .mf-product-row--swap {
        grid-template-columns: 1fr;
        gap: 1.5rem;
        padding: 2.25rem 0;
    }
    .mf-product-row--swap .mf-product-row__media,
    .mf-product-row--swap .mf-product-row__content {
        order: initial;
    }
}


/* ==========================================================================
   Trang /lien-he — tuyến cơ sở Bắc→Nam + form liên hệ (P9)
   ========================================================================== */
.mf-section-head {
    text-align: center;
    max-width: 40rem;
    margin: 0 auto 3rem;
}
.mf-section-head__eyebrow {
    color: var(--mf-blue, #1876BC);
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    font-size: .8rem;
    margin-bottom: .5rem;
}
.mf-section-head__title {
    font-family: 'SVN-Gotham', Arial, sans-serif;
    font-weight: 800;
    font-size: 2rem;
    color: var(--mf-ink2, #1F2933);
}

.mf-alert {
    margin: 0 auto 2rem;
    padding: 1rem 1.5rem;
    border-radius: .6rem;
}
.mf-alert--success {
    background: #eaf7ee;
    color: #1c7c3f;
    border: 1px solid #b9e6c6;
}

/* --- Tuyến cơ sở dọc, so le trái phải, nối bằng cột sống --- */
.mf-route {
    position: relative;
    max-width: 46rem;
    margin: 0 auto;
    padding: 0 0 0 0;
}
.mf-route__spine {
    position: absolute;
    left: 50%;
    top: 0;
    bottom: 0;
    width: 2px;
    background: repeating-linear-gradient(to bottom, var(--mf-blue-pale, #AFD9EE) 0 6px, transparent 6px 12px);
    transform: translateX(-50%);
}
.mf-route__stop {
    position: relative;
    width: calc(50% - 2rem);
    margin-bottom: 2rem;
}
.mf-route__stop--left { margin-right: auto; text-align: right; }
.mf-route__stop--right { margin-left: auto; }
.mf-route__dot {
    position: absolute;
    top: 1.4rem;
    width: 1rem;
    height: 1rem;
    border-radius: 50%;
    background: var(--mf-blue, #1876BC);
    border: 3px solid #fff;
    box-shadow: 0 0 0 2px var(--mf-blue-pale, #AFD9EE);
}
.mf-route__stop--left .mf-route__dot { right: -2.5rem; }
.mf-route__stop--right .mf-route__dot { left: -2.5rem; }
.mf-route__card {
    display: inline-block;
    text-align: left;
    width: 100%;
}
.mf-route__addr {
    display: flex;
    align-items: flex-start;
    gap: .5rem;
    font-size: .92rem;
    color: #4a544c;
    margin: .3rem 0;
}
.mf-route__addr svg { flex-shrink: 0; margin-top: .15rem; color: var(--mf-blue, #1876BC); }
.mf-route__note {
    font-size: .82rem;
    color: #8a938c;
}

@media (max-width: 1023px) {
    .mf-route__spine { left: 1.1rem; }
    .mf-route__stop,
    .mf-route__stop--left,
    .mf-route__stop--right {
        width: calc(100% - 3rem);
        margin-left: 3rem;
        margin-right: 0;
        text-align: left;
    }
    .mf-route__stop--left .mf-route__dot,
    .mf-route__stop--right .mf-route__dot {
        left: -2.4rem;
        right: auto;
    }
}

/* --- Liên hệ: cơ sở trái, gửi liên hệ phải, cùng 1 hàng --- */
.mf-contact-2col {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 5fr);
    gap: 3rem;
    align-items: start;
}
.mf-office-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-top: 1.5rem;
}
.mf-office-card {
    display: flex;
    gap: .9rem;
    background: #fff;
    border: 1px solid #eef1ee;
    border-radius: .75rem;
    padding: 1.1rem 1.25rem;
    box-shadow: 0 4px 16px rgba(24,118,188,.05);
}
.mf-office-card__dot {
    flex-shrink: 0;
    width: .65rem;
    height: .65rem;
    margin-top: .35rem;
    border-radius: 50%;
    background: var(--mf-blue, #1876BC);
}
.mf-office-card strong {
    display: block;
    color: var(--mf-ink2, #1F2933);
    margin-bottom: .2rem;
}

@media (max-width: 1023px) {
    .mf-contact-2col {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
}

/* --- Lưới liên hệ: thông tin trái, form phải --- */
.mf-contact-grid {
    display: grid;
    grid-template-columns: minmax(0, 4fr) minmax(0, 6fr);
    gap: 3rem;
    align-items: start;
}
.mf-contact-grid__list {
    list-style: none;
    margin: 1.5rem 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.mf-contact-grid__list li {
    display: flex;
    align-items: center;
    gap: .75rem;
}
.mf-contact-grid__list svg { color: var(--mf-blue, #1876BC); flex-shrink: 0; }
.mf-contact-grid__list a {
    color: var(--mf-ink2, #1F2933);
    font-weight: 600;
    text-decoration: none;
}
.mf-contact-grid__list a:hover { color: var(--mf-blue, #1876BC); }

.mf-contact-form {
    background: #fff;
    border-radius: 1rem;
    padding: 2rem;
    box-shadow: 0 8px 30px rgba(24,118,188,.08);
}
.mf-form__row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}
.mf-form__field {
    display: block;
    margin-bottom: 1rem;
}
.mf-form__field span {
    display: block;
    font-size: .85rem;
    font-weight: 600;
    color: var(--mf-ink2, #1F2933);
    margin-bottom: .4rem;
}
.mf-form__field input,
.mf-form__field textarea {
    width: 100%;
    border: 1px solid #dde3e7;
    border-radius: .5rem;
    padding: .75rem .9rem;
    font-size: .95rem;
    font-family: inherit;
    color: var(--mf-ink2, #1F2933);
}
.mf-form__field input:focus,
.mf-form__field textarea:focus {
    outline: none;
    border-color: var(--mf-blue, #1876BC);
    box-shadow: 0 0 0 3px var(--mf-blue-tint, #E7F6FD);
}

@media (max-width: 1023px) {
    .mf-contact-grid {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
    .mf-form__row {
        grid-template-columns: 1fr;
    }
}


/* ==========================================================================
   Trang /gioi-thieu — con số, 4 điểm mạnh (K1), tầm nhìn & sứ mệnh (P2)
   ========================================================================== */
.mf-section-head__desc {
    color: #6b756d;
    max-width: 42rem;
    margin: .75rem auto 0;
    font-size: 1rem;
}

.mf-numbers {
    background: var(--mf-blue-tint, #E7F6FD);
    padding: 3.5rem 0;
}
.mf-numbers__list {
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    gap: 2rem;
}
.mf-numbers__value {
    font-size: 2.6rem;
    font-weight: 800;
    color: var(--mf-blue, #1876BC);
    font-family: 'SVN-Gotham', sans-serif;
}
.mf-numbers__label {
    font-weight: 600;
    text-transform: uppercase;
    font-size: .8rem;
    letter-spacing: .04em;
    color: var(--mf-ink2, #1F2933);
    margin-top: .4rem;
}

.mf-strengths {
    display: flex;
    flex-direction: column;
    gap: 1.75rem;
    max-width: 52rem;
    margin: 0 auto;
}
.mf-strengths .strength-card:nth-child(2) { margin-left: 3rem; }
.mf-strengths .strength-card:nth-child(3) { margin-left: 6rem; }
.mf-strengths .strength-card:nth-child(4) { margin-left: 9rem; }

.mf-vision {
    background: linear-gradient(135deg, var(--mf-navy, #236598) 0%, var(--mf-blue, #1876BC) 100%);
    color: #fff;
    padding: 5.5rem 0;
}
.mf-vision__grid {
    display: grid;
    grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
    gap: 4rem;
    align-items: center;
}
.mf-vision__eyebrow {
    display: inline-block;
    background: rgba(255,255,255,.18);
    color: #d7ecff;
    font-size: .82rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    padding: .35rem 1.1rem;
    border-radius: 2rem;
    margin-bottom: 1.1rem;
}
.mf-vision__title {
    color: #fff;
    font-size: 2.3rem;
    font-weight: 800;
    margin-bottom: 1.75rem;
    line-height: 1.25;
}
.mf-vision__card {
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.15);
    border-radius: 1.1rem;
    padding: 1.6rem 1.8rem;
    margin-bottom: 1.4rem;
}
.mf-vision__card h3 {
    display: flex;
    align-items: center;
    gap: .6rem;
    color: var(--mf-lime, #8FC640);
    font-size: 1.25rem;
    font-weight: 700;
    margin-bottom: .6rem;
}
.mf-vision__dot {
    width: .6rem;
    height: .6rem;
    border-radius: 50%;
    background: var(--mf-lime, #8FC640);
    flex-shrink: 0;
}
.mf-vision__card p {
    color: #e3eefc;
    line-height: 1.75;
    font-size: 1rem;
    margin: 0;
}
.mf-vision__media {
    aspect-ratio: 4/5;
}

@media (max-width: 1023px) {
    .mf-strengths .strength-card:nth-child(2),
    .mf-strengths .strength-card:nth-child(3),
    .mf-strengths .strength-card:nth-child(4) {
        margin-left: 0;
    }
    .mf-vision__grid {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
}

/* Chuoi 6S o trang Gioi thieu co mo ta dai hon trang chu -> can chieu cao lon hon. */
#chuoi-6s.development-section {
    height: 79rem;
}
/* Chuoi 6S o trang chu cung du 6 muc — chieu cao mac dinh 67rem (site.css) cat mat
   muc S6 vi noi dung dai hon ban goc. */
#development.development-section {
    height: 79rem;
}
@media (max-width: 767px) {
    #chuoi-6s.development-section,
    #development.development-section {
        height: auto;
    }
}

/* Thanh tab 5 muc cua trang san pham (_ProductPageNav) — page-nav goc chi co icon
   cho 3 muc dau va khong wrap, can bo sung cho du 5 tab tren man hinh nho. */
.page-nav .container {
    flex-wrap: wrap;
}
.page-nav a:nth-child(4):before {
    background-image: url(../images/check.svg);
}
.page-nav a:nth-child(5):before {
    background-image: url(../images/fish.svg);
}


/* ==========================================================================
   Trang Cà Ra & Cá Sông Đà — sinh học + quy trình dòng chảy (P5/P6)
   ========================================================================== */
.mf-bio {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: 3rem;
    align-items: center;
}
.mf-bio__media {
    aspect-ratio: 1/1;
}
.mf-facts--compact {
    grid-template-columns: repeat(2, 1fr);
    margin-top: 1.5rem;
}

.mf-item__media {
    aspect-ratio: 4/3;
    margin-bottom: 1.1rem;
}
.mf-items--photo .mf-item {
    padding-bottom: 1.6rem;
}

/* --- Dòng chảy quy trình nuôi, ngang trên desktop, dọc trên mobile --- */
.mf-flow {
    display: flex;
    align-items: flex-start;
    gap: 0;
    overflow-x: auto;
    padding-bottom: 1rem;
    scrollbar-width: thin;
}
.mf-flow__step {
    position: relative;
    flex: 0 0 13.5rem;
    padding-top: 3rem;
}
.mf-flow__step:not(:last-child):after {
    content: "";
    position: absolute;
    top: 1.35rem;
    left: 2.8rem;
    width: calc(100% - 1rem);
    height: 2px;
    background: repeating-linear-gradient(to right, var(--mf-blue-pale, #AFD9EE) 0 6px, transparent 6px 12px);
    z-index: 0;
}
.mf-flow__num {
    position: absolute;
    top: 0;
    left: 0;
    width: 2.7rem;
    height: 2.7rem;
    border-radius: 50%;
    background: var(--mf-blue, #1876BC);
    color: #fff;
    font-weight: 800;
    font-size: .95rem;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1;
}
.mf-flow__card {
    margin-right: 1.5rem;
    min-height: 8.5rem;
}
.mf-flow__card p {
    font-size: .86rem;
    line-height: 1.55;
    color: #5c6660;
    margin: 0;
}

@media (max-width: 1023px) {
    .mf-bio {
        grid-template-columns: 1fr;
        gap: 1.75rem;
    }
    .mf-facts--compact {
        grid-template-columns: repeat(2, 1fr);
    }
    .mf-flow {
        flex-direction: column;
        overflow-x: visible;
    }
    .mf-flow__step {
        flex: none;
        width: 100%;
        padding-left: 3.5rem;
        padding-top: 0;
        margin-bottom: 1.5rem;
    }
    .mf-flow__num {
        top: 0;
        left: 0;
    }
    .mf-flow__step:not(:last-child):after {
        top: 2.7rem;
        left: 1.35rem;
        width: 2px;
        height: calc(100% + 0.5rem);
        background: repeating-linear-gradient(to bottom, var(--mf-blue-pale, #AFD9EE) 0 6px, transparent 6px 12px);
    }
    .mf-flow__card { margin-right: 0; min-height: auto; }
}


/* --- Banner ảnh thật (Cá Sông Đà) --- */
.mf-banner--photo {
    background: none;
    padding: 7rem 0 4.5rem;
}
.mf-banner__bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
}
.mf-banner__scrim {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(15,42,64,.35) 0%, rgba(15,42,64,.75) 100%);
    z-index: 0;
}
.mf-banner--photo .container-wide {
    position: relative;
    z-index: 1;
}

/* --- Vòng khép kín 4 khâu (Cá Sông Đà) --- */
.mf-ring {
    max-width: 44rem;
    margin: 0 auto;
    min-height: 26rem;
}
.mf-ring__center {
    background: #fff;
    box-shadow: 0 0 0 6px var(--mf-blue-tint, #E7F6FD);
    padding: 1.2rem;
}
.mf-ring__center img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.mf-ring__node {
    transform: translate(-50%, -50%);
    width: 11rem;
}
.mf-ring__node .mf-pdf-k3__node-label {
    display: flex;
    flex-direction: column;
    gap: .25rem;
    text-align: left;
}
.mf-ring__node .mf-pdf-k3__node-label strong {
    color: var(--mf-blue, #1876BC);
    font-size: .92rem;
}
.mf-ring__node .mf-pdf-k3__node-label span {
    font-size: .78rem;
    font-weight: 400;
    color: #5c6660;
    line-height: 1.4;
}

@media (max-width: 1023px) {
    .mf-ring {
        min-height: auto;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 1.25rem;
    }
    .mf-ring__center {
        position: static;
        width: 6rem;
        height: 6rem;
        align-self: center;
        margin-bottom: .5rem;
    }
    .mf-ring__node {
        position: static;
        transform: none;
        width: 100%;
    }
}


/* ==========================================================================
   Trang /gioi-thieu/hanh-trinh — đường sóng S vẽ theo cuộn trang (P3)
   ========================================================================== */
.mf-history {
    position: relative;
    max-width: 50rem;
    margin: 0 auto;
}
.mf-history__spine {
    position: absolute;
    left: 50%;
    top: 0;
    width: 6rem;
    height: 100%;
    transform: translateX(-50%);
    z-index: 0;
    pointer-events: none;
}
.mf-history__spine path {
    fill: none;
    stroke: var(--mf-blue, #1876BC);
    stroke-width: 2.2;
    stroke-linecap: round;
    opacity: .55;
}
.mf-history__list {
    list-style: none;
    margin: 0;
    padding: 0;
    position: relative;
    z-index: 1;
}
.mf-history__item {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    width: 45%;
    margin-bottom: 3.5rem;
}
.mf-history__item--left {
    margin-right: auto;
    flex-direction: row;
    text-align: right;
}
.mf-history__item--right {
    margin-left: auto;
    flex-direction: row-reverse;
    text-align: left;
}
.mf-history__media {
    flex: 0 0 6.5rem;
    aspect-ratio: 1/1;
    border-radius: 50%;
    clip-path: circle(50%);
}
.mf-history__body {
    flex: 1 1 auto;
    min-width: 0;
}
.mf-history__year {
    font-family: 'SVN-Gotham', Arial, sans-serif;
    font-weight: 800;
    font-size: 1.5rem;
    color: var(--mf-blue, #1876BC);
    margin-bottom: .3rem;
}
.mf-history__text {
    font-size: .92rem;
    line-height: 1.6;
    color: #4a544c;
    margin: 0;
}

@media (max-width: 1023px) {
    .mf-history__spine { left: 1.5rem; width: 3rem; }
    .mf-history__item,
    .mf-history__item--left,
    .mf-history__item--right {
        box-sizing: border-box;
        width: 100%;
        flex-direction: row;
        text-align: left;
        padding-left: 3.5rem;
        margin-left: 0;
        margin-right: 0;
    }
    .mf-history__media {
        flex: 0 0 4.5rem;
    }
}


/* ==========================================================================
   Trang chủ — Hợp tác quốc tế (K1) và Thị trường & phân phối (K3) — thay
   khối Đối tác/Chứng nhận cũ (P1, khối 4 và 9)
   ========================================================================== */
.mf-intl {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: 3rem;
    align-items: start;
}
.mf-intl__lead {
    position: sticky;
    top: 6rem;
}
.mf-intl__cards {
    display: flex;
    flex-direction: column;
    gap: 1.75rem;
}

.mf-market {
    max-width: 40rem;
    margin: 0 auto 3rem;
    min-height: 0;
    aspect-ratio: 1 / 1;
    width: 100%;
}
.mf-market__lines {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
}
.mf-market__lines line {
    stroke: var(--mf-blue-pale, #AFD9EE);
    stroke-width: .6;
    stroke-dasharray: 2 2;
}
.mf-market__center {
    position: relative;
    z-index: 2;
    background: #fff;
    border-radius: 50%;
    box-shadow: 0 0 0 6px var(--mf-blue-tint, #E7F6FD), 0 12px 30px rgba(24,118,188,.16);
    padding: 1.3rem;
}
.mf-market__center img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.mf-market__node {
    z-index: 2;
    transform: translate(-50%, -50%);
    width: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .5rem;
}
.mf-market__dot {
    width: .6rem;
    height: .6rem;
    border-radius: 50%;
    background: var(--mf-blue, #1876BC);
    box-shadow: 0 0 0 4px var(--mf-blue-tint, #E7F6FD);
}
.mf-market__node .mf-pdf-k3__node-label {
    white-space: nowrap;
    padding: .6rem 1.4rem;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--mf-navy, #236598);
    border-radius: 2rem;
    box-shadow: 0 6px 16px rgba(24,118,188,.1);
    transition: transform .2s, box-shadow .2s;
}
.mf-market__node .mf-pdf-k3__node-label:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 22px rgba(24,118,188,.18);
}

.mf-warehouses {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.25rem;
    max-width: 56rem;
    margin: 0 auto;
}
.mf-warehouses .mf-pdf-k4__card {
    transition: transform .2s, box-shadow .2s;
}
.mf-warehouses .mf-pdf-k4__card:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 24px rgba(24,118,188,.12);
}

@media (max-width: 1023px) {
    .mf-intl {
        grid-template-columns: 1fr;
        gap: 1.75rem;
    }
    .mf-intl__lead {
        position: static;
    }
    .mf-market {
        min-height: auto;
        aspect-ratio: auto;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 1.5rem;
    }
    .mf-market__lines {
        display: none;
    }
    .mf-market__center {
        align-self: center;
        width: 6rem;
        height: 6rem;
        position: static;
    }
    /* Duoi 1024px vong toa tia khong con cho de dat nhan quanh tam — chuyen
       thanh luoi chip 2 cot can giua, giu dang "the" thay vi liet ke doc
       tran trui. */
    .mf-market__nodes {
        position: static;
        width: 100%;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: .75rem;
        max-width: 26rem;
    }
    .mf-market__node {
        position: static;
        transform: none;
        width: 100%;
        flex-direction: row;
        justify-content: center;
        background: #fff;
        border: 1px solid var(--mf-blue-pale, #AFD9EE);
        border-radius: .75rem;
        padding: .3rem 0;
    }
    .mf-market__dot {
        display: none;
    }
    .mf-market__node .mf-pdf-k3__node-label {
        white-space: normal;
        display: inline-block;
        padding: .5rem .4rem;
        text-align: center;
    }
    .mf-warehouses {
        grid-template-columns: repeat(2, 1fr);
    }
}


/* ==========================================================================
   Trang /phat-trien-ben-vung — mạng lưới 10 tỉnh (P10)
   ========================================================================== */
.mf-province-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .9rem;
    max-width: 50rem;
    margin: 0 auto;
}
.mf-province-chip {
    background: #fff;
    border: 1px solid var(--mf-blue-pale, #AFD9EE);
    color: var(--mf-navy, #236598);
    font-weight: 600;
    font-size: .92rem;
    padding: .6rem 1.4rem;
    border-radius: 2rem;
}


/* ==========================================================================
   Trang /tin-tuc — bài nổi bật + danh sách tin dạng thẻ chấm nối (P7)
   ========================================================================== */
.mf-feature {
    display: grid;
    grid-template-columns: minmax(0, 6fr) minmax(0, 6fr);
    gap: 3rem;
    align-items: center;
    max-width: 60rem;
    margin: 0 auto;
}
.mf-feature__media {
    aspect-ratio: 4/3;
}
.mf-feature__date {
    color: var(--mf-muted, #7c857e);
    font-size: .85rem;
    margin-bottom: .8rem;
}
.mf-feature__excerpt {
    font-size: 1.02rem;
    line-height: 1.7;
    color: #3f4943;
    margin-bottom: 1.5rem;
}

.mf-news-list {
    display: flex;
    flex-direction: column;
    gap: 1.4rem;
    max-width: 52rem;
    margin: 0 auto;
}
.mf-news-item {
    display: block;
    text-decoration: none;
    color: inherit;
}
.mf-news-item__card {
    display: flex;
    align-items: center;
    gap: 1.3rem;
    transition: box-shadow .2s, transform .2s;
}
.mf-news-item:hover .mf-news-item__card {
    box-shadow: 0 .6rem 1.6rem rgba(24,118,188,.12);
    transform: translateY(-.15rem);
}
.mf-news-item__thumb {
    flex: 0 0 6.5rem;
    aspect-ratio: 1/1;
    border-radius: .6rem;
    overflow: hidden;
}
.mf-news-item__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.mf-news-item__body strong {
    display: block;
    color: var(--mf-ink2, #1F2933);
    font-size: 1rem;
    margin-bottom: .35rem;
    line-height: 1.4;
}
.mf-news-item__body p {
    font-size: .88rem;
    color: #5c6660;
    line-height: 1.55;
    margin: 0 0 .5rem;
}
.mf-news-item__meta {
    font-size: .78rem;
    color: var(--mf-blue, #1876BC);
    font-weight: 600;
}

@media (max-width: 1023px) {
    .mf-feature {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
    .mf-news-item__card {
        flex-direction: column;
        align-items: flex-start;
    }
    .mf-news-item__thumb {
        width: 100%;
        aspect-ratio: 16/9;
        flex-basis: auto;
    }
}

/* --- Chi tiết bài viết (P8) --- */
.mf-post {
    max-width: 44rem;
    margin: 0 auto;
}
.mf-post__back {
    display: inline-block;
    color: var(--mf-blue, #1876BC);
    font-weight: 600;
    font-size: .9rem;
    text-decoration: none;
    margin-bottom: 1.5rem;
}
.mf-post__meta {
    color: var(--mf-muted, #7c857e);
    font-size: .85rem;
    margin-bottom: .6rem;
}
.mf-post__title {
    font-family: 'SVN-Gotham', Arial, sans-serif;
    font-weight: 800;
    font-size: 1.9rem;
    line-height: 1.35;
    color: var(--mf-ink2, #1F2933);
    margin-bottom: 1.75rem;
}
.mf-post__hero {
    aspect-ratio: 16/9;
    margin-bottom: 2rem;
}
.mf-post__content {
    margin-bottom: 2rem;
}

/* --- Thẻ Hợp tác quốc tế có ảnh minh hoạ thật (P1 nâng cấp) --- */
.mf-intl__card {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
}
.mf-intl__thumb {
    flex: 0 0 4.5rem;
    width: 4.5rem;
    height: 4.5rem;
    border-radius: .6rem;
    overflow: hidden;
}
.mf-intl__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
@media (max-width: 1023px) {
    .mf-intl__card { flex-direction: column; }
    .mf-intl__thumb { width: 100%; height: 9rem; }
}


/* ==========================================================================
   Trang /tin-tuc — bố cục theo mẫu tham khảo: hero ảnh, nổi bật lớn+bên,
   danh mục, lưới tin mới nhất (P7 nâng cấp)
   ========================================================================== */
.mf-news-hero {
    min-height: 20rem;
    padding: 8rem 0 3rem;
    display: flex;
    align-items: flex-end;
}
.mf-news-hero__crumb {
    color: rgba(255,255,255,.8);
    font-size: .85rem;
    margin-bottom: .6rem;
}
.mf-news-hero__crumb a {
    color: rgba(255,255,255,.8);
    text-decoration: none;
}
.mf-news-hero__crumb a:hover { color: #fff; }
.mf-news-hero__crumb span:first-of-type { margin: 0 .4rem; opacity: .7; }

.mf-section-head__eyebrow--left {
    color: var(--mf-blue, #1876BC);
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    font-size: .82rem;
    margin-bottom: 1.5rem;
}

/* --- Nổi bật: lớn trái + danh sách phải --- */
.mf-feature-grid {
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: 2rem;
}
.mf-feature-main {
    display: block;
    text-decoration: none;
    color: inherit;
    border-radius: 1rem;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 .5rem 1.8rem rgba(24,118,188,.08);
}
.mf-feature-main__media {
    aspect-ratio: 16/9;
}
.mf-feature-main__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.mf-feature-main__body {
    padding: 1.5rem 1.75rem;
}
.mf-feature-main__body h2 {
    font-family: 'SVN-Gotham', Arial, sans-serif;
    font-weight: 800;
    font-size: 1.4rem;
    color: var(--mf-ink2, #1F2933);
    margin-bottom: .75rem;
    line-height: 1.4;
}
.mf-feature-main__body p {
    font-size: .92rem;
    line-height: 1.65;
    color: #5c6660;
    margin-bottom: .9rem;
}
.mf-feature-main__meta {
    font-size: .8rem;
    color: var(--mf-blue, #1876BC);
    font-weight: 600;
}

.mf-feature-side {
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
}
.mf-feature-side__item {
    display: flex;
    gap: 1rem;
    text-decoration: none;
    color: inherit;
    padding-bottom: 1.1rem;
    border-bottom: 1px solid #eef1f3;
}
.mf-feature-side__item:last-child { border-bottom: none; }
.mf-feature-side__thumb {
    flex: 0 0 5.5rem;
    aspect-ratio: 1/1;
    border-radius: .6rem;
    overflow: hidden;
}
.mf-feature-side__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.mf-feature-side__body {
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.mf-feature-side__body strong {
    font-size: .92rem;
    line-height: 1.45;
    color: var(--mf-ink2, #1F2933);
    margin-bottom: .4rem;
}
.mf-feature-side__body span {
    font-size: .78rem;
    color: #8a938c;
}

.mf-province-grid--left {
    justify-content: flex-start;
    margin: 0;
}

/* ==========================================================================
   Khoi "Thi truong & phan phoi" trang chu — dai gradient xanh dam, tai
   dung dung cong thuc gradient cua .mf-banner nhung dat giua trang thay
   vi lam banner dau trang, de khac han cac khoi anh+card trang da lam
   o noi khac (khong lap .philosophy-section/.mf-vision lan nua).
   ========================================================================== */
.mf-market-band {
    background: linear-gradient(135deg, var(--mf-green-dark) 0%, #0a7a46 55%, var(--mf-green) 100%);
    color: #fff;
    padding: 5rem 0;
    position: relative;
    overflow: hidden;
}
.mf-market-band::before {
    content: "";
    position: absolute;
    left: -10%;
    top: -30%;
    width: 45%;
    height: 160%;
    background: radial-gradient(ellipse at center, rgba(255,255,255,.08) 0%, rgba(255,255,255,0) 70%);
    pointer-events: none;
}
.mf-market-band__head {
    text-align: center;
    max-width: 40rem;
    margin: 0 auto 3.5rem;
    position: relative;
}
.mf-market-band__eyebrow {
    color: #cdeedb;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    font-size: .8rem;
    margin-bottom: .5rem;
}
.mf-market-band__title {
    font-family: 'SVN-Gotham', Arial, sans-serif;
    font-weight: 800;
    font-size: 2rem;
    color: #fff;
}
.mf-market-band__desc {
    color: rgba(255,255,255,.78);
    margin: .75rem auto 0;
    font-size: 1rem;
}
.mf-market-band__grid {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 3rem;
    max-width: 58rem;
    margin: 0 auto;
    position: relative;
}
.mf-market-band__divider {
    width: 1px;
    background: rgba(255,255,255,.2);
}
.mf-market-band__col-title {
    display: flex;
    align-items: center;
    gap: .6rem;
    font-size: 1.05rem;
    font-weight: 700;
    color: #fff;
    margin-bottom: 1.4rem;
}
.mf-market-band__col-title svg {
    color: #a8e6c1;
    flex-shrink: 0;
}
.mf-market-band__chips {
    display: flex;
    flex-wrap: wrap;
    gap: .7rem;
}
.mf-market-band__chip {
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.35);
    color: #fff;
    font-weight: 600;
    font-size: .92rem;
    padding: .55rem 1.2rem;
    border-radius: 2rem;
}
.mf-market-band__list {
    list-style: none;
    margin: 0;
    padding: 0;
}
.mf-market-band__list li {
    padding: .8rem 0;
    border-bottom: 1px solid rgba(255,255,255,.15);
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
}
.mf-market-band__list li:last-child {
    border-bottom: none;
}
.mf-market-band__list strong {
    color: #fff;
    font-weight: 700;
}
.mf-market-band__list span {
    color: rgba(255,255,255,.72);
    font-size: .88rem;
    text-align: right;
}

@media (max-width: 767px) {
    .mf-market-band__grid {
        grid-template-columns: 1fr;
        gap: 2.5rem;
    }
    .mf-market-band__divider {
        width: 100%;
        height: 1px;
    }
}

/* --- Lưới tin mới nhất --- */
.mf-latest-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
}
.mf-latest-card {
    display: block;
    text-decoration: none;
    color: inherit;
    background: #fff;
    border-radius: .85rem;
    overflow: hidden;
    box-shadow: 0 .4rem 1.4rem rgba(0,0,0,.05);
    transition: transform .2s, box-shadow .2s;
}
.mf-latest-card:hover {
    transform: translateY(-.2rem);
    box-shadow: 0 .8rem 2rem rgba(24,118,188,.12);
}
.mf-latest-card__thumb { aspect-ratio: 4/3; }
.mf-latest-card__thumb img { width: 100%; height: 100%; object-fit: cover; }
.mf-latest-card__body { padding: 1.1rem 1.2rem; }
.mf-latest-card__body strong {
    display: block;
    font-size: .95rem;
    color: var(--mf-ink2, #1F2933);
    margin-bottom: .5rem;
    line-height: 1.4;
}
.mf-latest-card__body p {
    font-size: .82rem;
    color: #5c6660;
    line-height: 1.55;
    margin-bottom: .6rem;
}
.mf-latest-card__body span {
    font-size: .76rem;
    color: var(--mf-blue, #1876BC);
    font-weight: 600;
}

.mf-news-empty {
    text-align: center;
    padding: 2rem;
    background: var(--mf-blue-tint, #E7F6FD);
    border-radius: 1rem;
}
.mf-news-empty p {
    color: #4a544c;
    margin-bottom: 1rem;
}

@media (max-width: 1023px) {
    .mf-feature-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
    .mf-latest-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (max-width: 640px) {
    .mf-latest-grid {
        grid-template-columns: 1fr;
    }
}

/* --- Sua loi template: .logo-white chi duoc an tren trang chu (.home),
   cac trang khac khong co quy tac an nen 2 logo chong len nhau. --- */
.logo-white {
    position: absolute;
    left: 0;
    top: 0;
    opacity: 0;
    pointer-events: none;
}

/* --- Khối Hợp tác quốc tế (trang chủ) dùng lại .gf-latest-card, ep 3 cot --- */
.mf-intl-grid {
    grid-template-columns: repeat(3, 1fr);
    margin-top: 2.5rem;
}
.mf-intl-grid .gf-latest-card {
    background: #fff;
    border: 1px solid #edf0f2;
    border-radius: 8px;
    padding: 1rem;
    box-shadow: 0 2px 10px rgba(0,0,0,.04);
}
@media (max-width: 1023px) {
    .mf-intl-grid { grid-template-columns: 1fr; }
}

/* --- Sua loi template: icon accordion (mui ten S1-S6) khong bi ep ve
   dung kich thuoc khung .accordion__icon (1rem), anh 60x60 goc tran ra
   de len tieu de va chu ben duoi. --- */
.accordion__icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* --- Sua loi template: .counter co height:3rem co dinh nhung khong co
   white-space:nowrap, nen gia tri dai (vd "100-350 g", "2-6 mm") tu
   xuong dong va tran khoi khung 3rem. Xay ra o chuoi 6S accordion
   (trang chu + Gioi thieu) khi du lieu MICFOOD dai hon du lieu goc. --- */
.counter-wrap {
    align-items: flex-start;
    flex-wrap: wrap;
}
.counter {
    height: auto;
    line-height: 1.15;
    white-space: nowrap;
}
@media (max-width: 380px) {
    .counter {
        font-size: 1.5rem;
    }
}

/* --- Popup cookie: doi tu thanh ngang full-width sang the nho goc phai,
   giam dien tich che noi dung ben duoi (vd muc cuoi accordion 6S). --- */
.cookie-popup {
    left: auto;
    right: 1.25rem;
    bottom: -7rem;
    transform: none;
    width: calc(100% - 2.5rem);
    max-width: 22rem;
    padding: 1.1rem 1.25rem;
}
.cookie-popup.show {
    bottom: 1.25rem;
}
@media (max-width: 640px) {
    .cookie-popup {
        right: 1rem;
        left: 1rem;
        width: auto;
        max-width: none;
    }
}

/* ==========================================================================
   P-SP: khoi rieng cho 5 trang chi tiet san pham — moi trang mot bo khoi
   khac nhau de khong lap cong thuc giao dien giua cac trang.
   .mf-why      -> CuaCaRa   (dai icon-list ngang "vi sao chon")
   .mf-crit     -> CuaGiong  (bang tieu chi xuat trai)
   .mf-strip    -> CARAMICFEED (dai dac diem ngang, gach phan cach)
   .mf-steps    -> ThuMua    (timeline ngang so thu tu lon)
   .mf-gallery  -> CaSongDa  (luoi anh trang trai)
   ========================================================================== */

/* --- Dai "vi sao chon" dang icon-list ngang (CuaCaRa) --- */
.mf-why {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 2.25rem;
}
.mf-why__item {
    text-align: center;
}
.mf-why__icon {
    width: 4.25rem;
    height: 4.25rem;
    margin: 0 auto 1rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--mf-blue-tint, #E7F6FD);
    color: var(--mf-blue, #1876BC);
    box-shadow: 0 0 0 6px rgba(24, 118, 188, .06);
}
.mf-why__item h3 {
    font-size: 1.12rem;
    font-weight: 800;
    color: var(--mf-navy, #236598);
    margin: 0 0 .5rem;
    line-height: 1.35;
}
.mf-why__item p {
    font-size: .95rem;
    line-height: 1.75;
    color: var(--mf-ink2, #1F2933);
    margin: 0;
}

/* --- Bang tieu chi xuat trai (CuaGiong) --- */
.mf-crit {
    overflow-x: auto;
}
.mf-crit table {
    width: 100%;
    min-width: 46rem;
    border-collapse: collapse;
    background: #fff;
    border-radius: 1rem;
    overflow: hidden;
    box-shadow: 0 6px 24px rgba(35, 101, 152, .08);
}
.mf-crit th,
.mf-crit td {
    text-align: left;
    padding: 1.05rem 1.35rem;
    vertical-align: top;
    border-bottom: 1px solid #E7EEF4;
    font-size: .95rem;
    line-height: 1.7;
}
.mf-crit thead th {
    background: var(--mf-navy, #236598);
    color: #fff;
    font-weight: 700;
    font-size: .9rem;
    letter-spacing: .02em;
    text-transform: uppercase;
    border-bottom: none;
}
.mf-crit tbody tr:last-child th,
.mf-crit tbody tr:last-child td {
    border-bottom: none;
}
.mf-crit tbody tr:nth-child(even) {
    background: #F7FBFE;
}
.mf-crit tbody th {
    font-weight: 800;
    color: var(--mf-navy, #236598);
    width: 22%;
}

/* --- Dai dac diem ngang, gach phan cach (CARAMICFEED) --- */
.mf-strip {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    background: #fff;
    border: 1px solid #E7EEF4;
    border-radius: 1rem;
    overflow: hidden;
    box-shadow: 0 6px 24px rgba(35, 101, 152, .07);
}
.mf-strip__cell {
    padding: 2rem 1.6rem;
    border-right: 1px solid #E7EEF4;
}
.mf-strip__cell:last-child {
    border-right: none;
}
.mf-strip__key {
    font-size: 1.55rem;
    font-weight: 800;
    color: var(--mf-blue, #1876BC);
    line-height: 1.2;
    margin-bottom: .55rem;
}
.mf-strip__cell strong {
    display: block;
    font-size: 1.02rem;
    color: var(--mf-navy, #236598);
    margin-bottom: .45rem;
}
.mf-strip__cell p {
    margin: 0;
    font-size: .92rem;
    line-height: 1.7;
    color: var(--mf-ink2, #1F2933);
}

/* --- Timeline ngang, so thu tu lon (ThuMua) --- */
.mf-steps {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1.5rem;
    position: relative;
}
.mf-steps:before {
    content: "";
    position: absolute;
    left: 6%;
    right: 6%;
    top: 2.6rem;
    height: 2px;
    background: repeating-linear-gradient(to right, var(--mf-blue-pale, #AFD9EE) 0 8px, transparent 8px 16px);
}
.mf-steps__item {
    position: relative;
    padding-top: 0;
}
.mf-steps__num {
    position: relative;
    z-index: 1;
    width: 5.2rem;
    height: 5.2rem;
    border-radius: 50%;
    background: #fff;
    border: 2px solid var(--mf-blue-pale, #AFD9EE);
    color: var(--mf-blue, #1876BC);
    font-size: 1.9rem;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.1rem;
}
.mf-steps__item h3 {
    font-size: 1.08rem;
    font-weight: 800;
    color: var(--mf-navy, #236598);
    margin: 0 0 .5rem;
    line-height: 1.4;
}
.mf-steps__item p {
    margin: 0;
    font-size: .93rem;
    line-height: 1.75;
    color: var(--mf-ink2, #1F2933);
}

/* --- Luoi anh trang trai (CaSongDa) --- */
.mf-gallery {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-auto-rows: 12rem;
    gap: 1rem;
}
.mf-gallery figure {
    position: relative;
    margin: 0;
    overflow: hidden;
    border-radius: .9rem;
}
.mf-gallery figure:nth-child(1) {
    grid-column: span 2;
    grid-row: span 2;
}
.mf-gallery figure:nth-child(6) {
    grid-column: span 2;
}
.mf-gallery img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .5s ease;
}
.mf-gallery figure:hover img {
    transform: scale(1.06);
}
.mf-gallery figcaption {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 1.6rem .9rem .8rem;
    background: linear-gradient(to top, rgba(15, 42, 66, .78), transparent);
    color: #fff;
    font-size: .88rem;
    font-weight: 600;
    line-height: 1.4;
}

@media (max-width: 1023px) {
    .mf-why {
        grid-template-columns: 1fr;
        gap: 1.75rem;
    }
    .mf-strip {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .mf-strip__cell:nth-child(2n) {
        border-right: none;
    }
    .mf-strip__cell:nth-child(-n+2) {
        border-bottom: 1px solid #E7EEF4;
    }
    .mf-steps {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .mf-steps:before {
        display: none;
    }
    .mf-gallery {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-auto-rows: 9rem;
    }
}

@media (max-width: 640px) {
    .mf-strip {
        grid-template-columns: 1fr;
    }
    .mf-strip__cell {
        border-right: none;
        border-bottom: 1px solid #E7EEF4;
    }
    .mf-strip__cell:last-child {
        border-bottom: none;
    }
    .mf-steps {
        grid-template-columns: 1fr;
    }
    .mf-gallery figure:nth-child(1),
    .mf-gallery figure:nth-child(6) {
        grid-column: span 2;
        grid-row: span 1;
    }
}