/* ==========================================================================
   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;
    /* Rieng "height" phai khai bao tuong minh: sau khi them class "home" vao
       <body> (sua header noi), rule goc ".home .banner:before { height:10rem }"
       trong site.css (dong ~2859, ban template — gradient toi 160px dau tro
       cho de header de doc, chua bao gio kich hoat truoc do) nay cung khop
       cung pseudo-element nay va gioi han chieu cao con 160px, gay ra "vet
       cat" ro giua vung 160px dau (2 lop phu chong nhau) va phan con lai
       (chi 1 lop). inset:0 khong du de thang duoc 1 khai bao height rieng. */
    height: 100%;
    background: rgba(4, 14, 9, .18);
    z-index: 5;
    pointer-events: none;
}
#banner.banner .banner__content {
    z-index: 6;
}

/* Tang chieu cao banner de anh bot bi cat. Luu y ve hinh hoc: khung banner luon
   rong het man hinh, nen "cao them" tuc la ti le giam — khong co cach nao tang
   chieu cao ma giu nguyen ti le. site.css dat ".banner__image img
   { aspect-ratio: 1920/926 }" (~2.07) va chinh rule do quyet dinh chieu cao ca
   section. Doi sang 16/9 (~1.78): anh nguon 4:3 chi con mat ~25% chieu cao thay
   vi ~48%, ma banner van thap hon chieu cao man hinh (khac voi 4:3 = 1070px,
   cao hon ca viewport). Muon anh khong mat gi ca thi phai dat 4/3, danh doi la
   banner cao vuot man hinh. */
#banner .banner__image img {
    /* Banner cao dung bang mot man hinh. Phai bo aspect-ratio: rule goc trong
       site.css dung ti le (1920/926) de suy ra chieu cao, con o day chieu cao
       la co dinh theo viewport. Dung svh (small viewport height) thay vh de
       tren dien thoai khong bi thanh dia chi trinh duyet lam banner tran qua
       mot man. Header trong suot nam de len banner nen khong tru chieu cao. */
    aspect-ratio: auto;
    height: 80svh;
    width: 100%;
    object-fit: cover;
    /* Neo ro cua vao giua man hinh. Cach tinh voi anh hien tai
       (banner-thung-cua-thuyen.jpg, 1920x1440): khung banner rong hon ti le 4:3
       nen anh chi THUA theo chieu doc — chi so ngang khong co tac dung, chi so
       doc quyet dinh tat ca.
         anh cao 1440px, khung cao 864px  ->  thua 576px
         tam ro cua o y = 772px           ->  (772 - 864/2) / 576 = 59%
       Chi so ngang de 50% cho truong hop cua so rat hep va cao (>=768px nhung
       ti le duoi 4:3, vi du tablet dung): khi do moi co phan thua ngang, va
       tam ro cua nam san o giua anh (x = 55%). */
    object-position: 50% 59%;
    /* Theme goc chan ".banner__image img { max-height: 100vw }" o breakpoint mobile
       (site.css ~3806) va ".banner { max-height: 100vw }" (~5396) — tren dien thoai
       chieu cao banner se bang chieu rong (390px) chu khong phai mot man hinh. */
    max-height: none;
}
/* Mobile: tra chieu cao banner ve dung theme goc (site.css ~3802 va ~5396) —
   27.5rem nhung bi "max-height: 100vw" chan lai, tuc banner cao dung bang chieu
   rong man hinh, khong phai 80svh nhu desktop.
   Khung mobile luc nay gan vuong (~1.0) con anh "-mobile.jpg" la 3:4 (0.75) ->
   anh chi THUA theo chieu doc, chi so ngang cua object-position khong con tac
   dung. Vi vay ro cua duoc dua vao giua bang chinh ban cat mobile (cat quanh
   tam ro), con chi so doc quyet dinh phan nhin thay theo chieu cao.
   Cach tinh voi banner-thung-cua-thuyen-mobile.jpg (1200x1600) tren may 390px:
     cover -> anh ve 390x520, khung 390x390  ->  thua 130px
     tam ro cua o y = 260px                  ->  (260 - 195) / 130 = 65% */
@media (max-width: 767px) {
    #banner .banner__image img {
        height: 27.5rem;
        max-height: 100vw;
        object-position: 50% 65%;
    }
}
#banner.banner {
    max-height: none;
}

/* Logo header to hon mot chut so voi mac dinh (6.75rem) — ap dung moi trang. */
.logo {
    width: 10.25rem;
}

/* Header trang chu: DUNG NEN TRANG DAC, giong moi trang trong.
   Truoc day trang chu dung che do header trong suot de len anh banner, voi
   logo ban TRANG. Do bang canvas tren chinh anh banner: vung anh sau logo co
   diem sang nhat 245/255 va sau menu la 252/255 -> tuong phan cua chu trang
   tut xuong 1.66 va 1.56 (chuan WCAG AA can >= 4.5). Logo va dong
   "NGON & LANH" gan nhu bien mat tren nhung mang anh sang.
   Da go doan JS them class 'header-transparent' trong Home/Index.cshtml;
   phan CSS ghi de mau chu trang di kem cung bo luon. O day chi con doi
   position tu absolute (de len banner) ve static de anh banner bat dau
   ngay duoi header, dung nhu cac trang khac. */
.home .header-main {
    position: static;
}
/* Theme thu chieu cao header trang chu ve dung chieu cao thanh den o tren
   (style.css ~1145: ".home #dt-header { height: 2.75rem }") de hang logo
   tran ra ngoai va de len banner. Bo che do do -> header chiem dung cho
   cua no, anh banner bat dau ngay ben duoi. */
.home #dt-header {
    height: auto;
}
/* Nut tim kiem: ban goc da co san vong tron trang + icon giu nguyen mau
   toi (site.css comment het filter dao mau) — khong dao icon o day nua,
   vi truoc do dao thanh trang de tren nen trang lam icon bien mat. */

/* 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, .6);
    border-radius: 999px;
    padding: .55rem 1.35rem;
    margin: 0 0 1.5rem;
    /* Lop phu banner giam con .18 nen chu tren nen sang can them bong do +
       nen mo dam hon mot chut de van doc ro, khong phai tang do toi ca anh. */
    background: rgba(0, 0, 0, .28);
    text-shadow: 0 1px 3px rgba(0,0,0,.6);
    backdrop-filter: blur(2px);
}
#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;
    text-shadow: 0 2px 10px rgba(0,0,0,.55), 0 1px 3px rgba(0,0,0,.4);
}
#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 giữa thanh, 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;
}

/* Tu 1024px tro len: dua menu ra chinh giua thanh. Phai neo hotline tuyet doi
   ben phai — neu de no trong luong flex thi no chiem cho va day menu lech
   trai (truoc day menu nam o 97..525 trong thanh rong 97..1343).
   Chi ap tu 1024px: duoi muc do thanh khong du cho, menu va hotline se chong
   len nhau. */
@media (min-width: 1024px) {
    .top-bar .container-wide {
        position: relative;
        justify-content: center;
    }
    .top-bar .top-bar-hotline {
        position: absolute;
        right: 0;
        top: 50%;
        transform: translateY(-50%);
    }
}

.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 {
    /* 3.5rem = nhip spacing cua template (brands, development-section, philosophy):
       truoc day dung 4.5rem nen cac khoi mf-* thoang hon han khoi goc. */
    padding: 3.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;
    /* Sang hon mot nac nua so voi #0a7a46, van giu du tuong phan voi
       chu trang (uoc ~4.8:1, dat chuan AA can 4.5). */
    background: #119359;
    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;
        /* box-sizing mac dinh la content-box nen padding ngang (1.5rem moi ben)
           cong THEM vao width:100% — nut tran khoi man hinh va bi cat mat bo
           goc ben phai. */
        box-sizing: border-box;
    }
}

/* ==========================================================================
   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;
    /* Anh nen cu "/uploads/tham-khao-tam/banner-03.jpg" khong con ton tai -> da bo.
       Khoi nao dung class nay phai tu dat background-image inline (trang Tin tuc
       dang lam vay), con day chi giu lop phu gradient lam nen du phong. */
    background: linear-gradient(180deg, rgba(15, 28, 20, 0.6) 0%, rgba(10, 20, 15, 0.75) 100%);
    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: 3.5rem 0;  /* dong bo nhip spacing template */
}
.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 co du 6 muc — chieu cao mac dinh 67rem (site.css) cat mat muc S6 vi noi
   dung dai hon ban goc. Dung min-height thay vi height co dinh: chieu cao co dinh se
   lai cat S6 moi khi noi dung dai them (sua text theo brochure, hoac Google Translate
   sang tieng Anh lam chu dai hon). Panel anh la position:absolute; height:100% nen
   van phu kin khi section cao ra. */
#chuoi-6s.development-section,
#development.development-section {
    height: auto;
    min-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/fish.svg);
}
.page-nav a:nth-child(5):before {
    background-image: url(../images/check.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: stretch;
    gap: 0;
    overflow-x: auto;
    padding-bottom: 1rem;
    scrollbar-width: thin;
}
.mf-flow__step {
    position: relative;
    display: flex;
    flex-direction: column;
    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 {
    display: flex;
    flex-direction: column;
    flex: 1;
    margin-right: 1.5rem;
    min-height: 8.5rem;
}
.mf-flow__step:last-child {
    flex-basis: 12rem;
}
.mf-flow__step:last-child .mf-flow__card {
    margin-right: 0;
}
.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;
}
/* Thi truong DA xuat khau thuc te (Dai Loan) — to dam de khong bi doc nham la
   dinh huong giong 5 thi truong con lai. */
.mf-province-chip--active {
    background: var(--mf-navy, #236598);
    border-color: var(--mf-navy, #236598);
    color: #fff;
}
.mf-province-chip--active::before {
    content: "✓ ";
}


/* ==========================================================================
   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: 3.5rem 0;  /* dong bo nhip spacing template */
    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;
    /* Dung chung ban kinh voi .product-item va cac the khac (.75rem) —
       truoc day rieng khoi nay dung 8px nen lech he thong. */
    border-radius: .75rem;
    padding: 1rem;
    box-shadow: 0 2px 10px rgba(0,0,0,.04);
}
@media (max-width: 1023px) {
    .mf-intl-grid { grid-template-columns: 1fr; }
}

/* Khoi nay da chuyen sang Owl Carousel tu chay. Owl boc cac the vao
   .owl-stage-outer > .owl-stage > .owl-item, nen display:grid cua
   .gf-latest-grid se ap nham len 1 phan tu duy nhat va lam vo bo cuc —
   phai tra ve block va bo grid-template-columns. */
.mf-intl-carousel,
.mf-intl-carousel.gf-latest-grid {
    display: block;
    grid-template-columns: none;
}
/* Cac the trong cung mot khung nhin cao bang nhau cho gon mat. */
.mf-intl-carousel .owl-stage {
    display: flex;
}
.mf-intl-carousel .owl-item {
    display: flex;
}
.mf-intl-carousel .owl-item .gf-latest-card {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
}
.mf-intl-carousel .owl-dots {
    margin-top: 1.75rem;
    text-align: center;
}
.mf-intl-carousel .owl-dot span {
    width: 9px;
    height: 9px;
    margin: 0 5px;
    background: #C7D6E2;
    border-radius: 50%;
    display: inline-block;
    transition: background .25s ease, width .25s ease;
}
.mf-intl-carousel .owl-dot.active span {
    width: 26px;
    border-radius: 999px;
    background: var(--mf-blue, #1876BC);
}

/* --- 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;
}
/* Nhan luon xuong dong duoi so, khong phu thuoc do dai chu — tranh tinh
   trang nhan ngan nam canh so con nhan dai bi day xuong duoi, khong dong nhat. */
.counter-content {
    flex-basis: 100%;
}
@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;
    /* Khach phan hoi caption kho doc: gradient 2 diem cu (dam .78 -> trong suot)
       nhat qua nhanh nen dong chu tren cung nam tren vung anh sang. Keo dai vung
       phu + them diem giua, kem bong chu, de doc duoc tren moi anh. */
    padding: 2.6rem .9rem .8rem;
    background: linear-gradient(to top,
        rgba(15, 42, 66, .92) 0%,
        rgba(15, 42, 66, .72) 45%,
        rgba(15, 42, 66, .28) 75%,
        transparent 100%);
    color: #fff;
    text-shadow: 0 1px 3px rgba(0, 0, 0, .55);
    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;
    }
}

/* --- Tag danh mục trên ảnh tin tức trang chủ (bản gốc ẩn display:none) --- */
.news .article__image {
    position: relative;
}
.news .article_category {
    display: inline-block;
    position: absolute;
    top: .9rem;
    left: .9rem;
    z-index: 2;
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .03em;
    text-transform: uppercase;
    color: #fff;
    background: rgba(8, 91, 54, .82);
    border-radius: 999px;
    padding: .4rem 1rem;
}
.news .article_view.article_source {
    margin-left: 0;
}
.news .article_meta {
    display: flex;
    align-items: center;
    gap: 1.25rem;
}

/* --- Nut lien he nhanh noi goc man hinh (chi dung Facebook that, khong bia them kenh chua xac nhan) --- */
/* Cum nut lien he noi ben phai (goi / Zalo / email / Facebook), hien tren moi
   trang. Thay cho nut Facebook don le truoc day. */
.mf-float-stack {
    position: fixed;
    right: 1.5rem;
    bottom: 1.5rem;
    z-index: 999;
    display: flex;
    flex-direction: column;
    gap: .625rem;
}
.mf-float-btn {
    position: relative;
    width: 3.25rem;
    height: 3.25rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    transition: transform .15s ease;
}
.mf-float-btn:hover {
    transform: scale(1.08);
}
.mf-float-btn svg {
    width: 1.6rem;
    height: 1.6rem;
}
.mf-float-btn--call {
    background: #29a71a;
    box-shadow: 0 .5rem 1.5rem rgba(41, 167, 26, .35);
}
.mf-float-btn--zalo {
    background: #0068FF;
    box-shadow: 0 .5rem 1.5rem rgba(0, 104, 255, .35);
}
.mf-float-btn--zalo svg {
    width: 1.9rem;
    height: 1.9rem;
}
.mf-float-btn--mail {
    background: #f0a020;
    box-shadow: 0 .5rem 1.5rem rgba(240, 160, 32, .35);
}
.mf-float-btn--fb {
    background: #1877F2;
    box-shadow: 0 .5rem 1.5rem rgba(24, 119, 242, .35);
}
/* Nhan hien khi ro chuot — chi tren thiet bi co con tro that, tranh ket o
   trang thai hover sau khi cham tren dien thoai. */
.mf-float-btn__tip {
    position: absolute;
    right: calc(100% + .6rem);
    top: 50%;
    transform: translateY(-50%);
    white-space: nowrap;
    background: rgba(17, 24, 32, .92);
    color: #fff;
    font-size: .8125rem;
    line-height: 1;
    padding: .5rem .75rem;
    border-radius: .375rem;
    opacity: 0;
    visibility: hidden;
    transition: opacity .18s ease;
    pointer-events: none;
}
@media (hover: hover) and (pointer: fine) {
    .mf-float-btn:hover .mf-float-btn__tip {
        opacity: 1;
        visibility: visible;
    }
}
@media (max-width: 767px) {
    .mf-float-stack {
        right: 1rem;
        bottom: 1rem;
        gap: .5rem;
    }
    .mf-float-btn {
        width: 2.85rem;
        height: 2.85rem;
    }
    .mf-float-btn svg {
        width: 1.4rem;
        height: 1.4rem;
    }
    .mf-float-btn--zalo svg {
        width: 1.65rem;
        height: 1.65rem;
    }
}

/* --- Fix: .readmore ke thua margin-top:1rem tu post.css (thiet ke cho link
   van ban thuong), lam badge tron noi tren anh tin tuc trang chu bi tut
   xuong de vao vung chu ben duoi. Bo margin de badge nam gon trong anh. --- */
.news .readmore {
    margin: 0;
}

/* --- Fix: badge "Xem thêm" o the cuoi carousel tin tuc nam sat mep cat
   cua owl-stage-outer (chi cach <1px), bi cat mat mot phan tuy do rong
   man hinh do lam tron so cua trinh duyet. Lui vao mot chut de an toan. --- */
.news .readmore {
    right: .35rem;
}

/* --- Nut "EN" tren header kich hoat Google Translate widget, an toan bo
   UI mac dinh cua Google (banner, tooltip highlight) de giu nguyen giao
   dien MICFOOD, chi giu lai chuc nang dich noi dung. --- */
iframe.skiptranslate,
#goog-gt-tt,
.goog-te-balloon-frame {
    display: none !important;
}
body {
    top: 0 !important;
}
.goog-text-highlight {
    background: none !important;
    box-shadow: none !important;
}

/* --- Badge logo "Ca Ra MICFOOD" noi goc banner trang chu, lam noi bat
   thuong hieu theo yeu cau phan hoi khach hang (muc 1). Anh nen trang dac
   (khong co alpha that) nen dat trong khung the trang bo tron + do de
   nhin nhu 1 con dau thuong hieu, khong co du tach nen. --- */
.mf-banner-badge {
    position: absolute;
    right: 1.5rem;
    bottom: 1.5rem;
    z-index: 7;
    width: 7.5rem;
    height: auto;
    border-radius: 1rem;
    box-shadow: 0 .75rem 2rem rgba(0, 0, 0, .35);
    background: #fff;
}
@media (max-width: 767px) {
    .mf-banner-badge {
        width: 4.75rem;
        right: .85rem;
        bottom: .85rem;
        border-radius: .65rem;
        box-shadow: 0 .4rem 1rem rgba(0, 0, 0, .35);
    }
}

/* --- Nut CTA thu 2 tren banner (theo goi y phan hoi: "Tim hieu ve Cua ca ra"
   + "Lien he MICFOOD"). Class btn--outline-inverse cua theme chi dinh nghia
   trang thai hover, thieu trang thai mac dinh tren nen anh toi. --- */
#banner .mf-banner-cta2 {
    border: thin solid rgba(255, 255, 255, .85);
    color: #fff;
    background: transparent;
}

/* ==========================================================================
   Footer tren MOBILE (<=767px)
   Ban goc de nguyen bo cuc desktop: 4 muc menu flex-wrap thanh 2 cot ~176px
   tren man 390px -> chat, link xuong dong xau, va muc "TIN TUC" (khong co muc
   con) tao ra mot o trong lon canh cot "LIEN HE". Cong them nut Facebook noi
   de len dong copyright. Khach hang MICFOOD chu yeu vao tu dien thoai nen
   phan nay phai gon gang.
   ========================================================================== */
@media (max-width: 767px) {
    /* 1 cot xep chong thay vi 2 cot chat */
    .dt-footer-menu {
        flex-direction: column;
        flex-wrap: nowrap;
        gap: 0;
    }
    .dt-footer-menu > li {
        width: 100%;
        padding: .8rem 0;
        border-top: 1px solid rgba(35, 101, 152, .14);
    }
    .dt-footer-menu > li:first-child {
        border-top: 0;
        padding-top: 0;
    }

    /* Tieu de nhom: dam va to hon link de co phan cap ro rang
       (ban goc tieu de va link cung 16.4px, tieu de chi noi nho in hoa). */
    .dt-footer-menu > li > a {
        font-size: 1.0625rem;
        font-weight: 700;
        letter-spacing: .04em;
        color: var(--mf-navy, #236598);
    }
    .dt-footer-menu > li > a .caret { display: none; }

    /* Danh sach link: thu gon gian dong, tang tuong phan mau chu */
    .dt-footer-menu .dropdown-menu {
        display: block;
        margin: .4rem 0 0;
        padding: 0;
    }
    .dt-footer-menu .dropdown-menu > li {
        margin: 0;
    }
    .dt-footer-menu .dropdown-menu > li > a {
        display: block;
        padding: .3rem 0;
        font-size: .9375rem;
        line-height: 1.4;
        color: #3D4644;
    }

    /* Muc menu khong co muc con (vd "TIN TUC"): ban goc van dung nhu mot tieu de
       cot -> tren mobile se thanh mot dong tieu de lo lung khong co gi ben duoi.
       Cho no cung kieu voi cac tieu de khac nhung them mui ten de doc ra la LINK. */
    .dt-footer-menu > li:not(.menu-item-has-children) > a::after {
        content: " →";
        font-weight: 400;
    }

    /* Chua cho nut lien he noi (Facebook) khong de len dong copyright */
    /* Ban goc dat padding-bottom ~84px cho .footer-bottom; cong them khoang chua
       nut noi thi qua thua. Dat lai bang gia tri vua du de nut Facebook (~53px,
       cach day 19px) khong de len dong copyright. */
    .dt-footer-bottom,
    .footer-bottom {
        padding-bottom: 4.5rem !important;
    }

    /* Copyright: nhe va nho hon noi dung chinh */
    .dt-footer-bottom .copyright,
    .footer-bottom .copyright {
        font-size: .8125rem;
        font-weight: 400;
        opacity: .85;
    }

    /* Can le hai ben deu nhau */
    footer .container,
    .dt-footer .container {
        padding-left: 1.25rem;
        padding-right: 1.25rem;
    }
}

/* Accordion footer mobile — chi ap dung khi JS da gan class .footer-acc--on,
   de khong-JS van thay day du link (progressive enhancement). */
@media (max-width: 767px) {
    .footer-acc--on .menu-item-has-children > .dt-dropdown-menu-wrapper {
        display: grid;
        grid-template-rows: 0fr;
        transition: grid-template-rows .28s ease;
        /* Rule goc (.footer-menu > li > .dt-dropdown-menu-wrapper) dat
           align-items/justify-content: center cho layout flex. Khi doi sang
           grid, align-items:center lam o con KHONG co lai theo hang cao 0 —
           no giu nguyen chieu cao va tran ra ngoai, de len nhom menu ben duoi.
           Phai stretch lai va cat o chinh wrapper. */
        align-items: stretch;
        justify-items: stretch;
        overflow: hidden;
    }
    .footer-acc--on .menu-item-has-children.is-open > .dt-dropdown-menu-wrapper {
        grid-template-rows: 1fr;
    }
    .footer-acc--on .menu-item-has-children > .dt-dropdown-menu-wrapper > .dropdown-menu {
        overflow: hidden;
        margin: 0;
        /* Rule mobile goc cho ul padding .75rem — con lai thi panel dong van
           cao ~23px va lo mot dai chu bi cat. */
        padding: 0;
    }
    .footer-acc--on .menu-item-has-children.is-open > .dt-dropdown-menu-wrapper > .dropdown-menu {
        padding: .25rem 0 .5rem;
    }
    .footer-acc--on .menu-item-has-children.is-open > .dt-dropdown-menu-wrapper > .dropdown-menu {
        margin-top: .4rem;
    }
    /* Dau + / − bao trang thai dong-mo */
    .footer-acc--on .menu-item-has-children > a {
        display: flex;
        align-items: center;
        justify-content: space-between;
        cursor: pointer;
    }
    .footer-acc--on .menu-item-has-children > a::after {
        content: "+";
        font-size: 1.35rem;
        font-weight: 400;
        line-height: 1;
        color: var(--mf-navy, #236598);
    }
    .footer-acc--on .menu-item-has-children.is-open > a::after {
        content: "–";
    }
}

/* Nhan "Mo hinh tich hop" (.section-subtitle) trong khoi chuoi 6S tren trang
   gioi thieu. Mau goc #6C757D (xam) von danh cho nen sang, dat tren nen xanh
   #1876BC cua .development-section thi chu va vien gan nhu chim mat.
   Dung lai dung bo gia tri cua .mf-vision__eyebrow (badge "Cam ket dai han"
   trang phat trien ben vung) de 2 noi thong nhat: pill nen trang mo, khong
   vien. Chi scope trong .development-section — badge o cac section nen sang
   khac giu nguyen mau xam. */
.development-section .section-subtitle {
    background: rgba(255,255,255,.18);
    color: #d7ecff;
    border: none;
    font-size: .82rem;
    font-weight: 700;
    letter-spacing: .04em;
    padding: .35rem 1.1rem;
    border-radius: 2rem;
}

/* Khoi so lieu trong accordion (chuoi 6S trang gioi thieu, cac giai doan trang
   CARAMICFEED) chi hien khi muc duoc mo. Rule goc chi an tu muc thu 2 tro di
   (.development-item:nth-child(n+2) .accordion__content{display:none}), nen muc
   dau tien luon hien so du khong co class .active — bo .active trong markup van
   khong du. An theo trang thai thay vi theo vi tri.
   Trang chu van mo san muc dau (markup giu .active) nen khong bi anh huong. */
.development-accordions .development-item:not(.active) .accordion__content {
    display: none;
}

/* So lieu trong accordion chuoi 6S: co goc 3rem lam cac chuoi dai bi cat ngang
   khi 2 o xep canh nhau (>=1024px) — "45.000 tan" va "6 thi truong" cua S2 tran
   ra ngoai o. .counter dat white-space:nowrap nen chu bi cat thay vi xuong dong.
   Giam mot nac cho chuoi dai nhat vua khung; ap cho ca 6 muc de co chu dong nhat. */
#chuoi-6s .counter {
    font-size: 1.75rem;
    /* margin-right goc 1rem lam so lech trai trong o (cach le trai 30px, phai
       45px). Bo di va cho so chiem tron dong de text-align:center can giua that. */
    margin-right: 0;
    flex-basis: 100%;
    text-align: center;
}
#chuoi-6s .counter-content {
    text-align: center;
}

/* Tieu de khoi chuoi 6S tren nen xanh. .development-section__content da dat
   color:#fff va trang chu ke thua dung, nhung trang gioi thieu load them
   intro.css voi rule .section-title{color:#000} de len — nen chi trang nay bi
   chu den tren nen xanh. Tra lai mau trang, scope trong .development-section. */
.development-section .section-title {
    color: #fff;
}

/* Slogan banner trang chu: ep cau "Phat trien nghe nuoi cua ca ra — Dong hanh
   cung cong dong" nam tron 1 hang. Co chu goc lam cau dai xuong 3-4 dong.

   Chi ap tu 1024px tro len. Duoi muc do khung .banner__slogan von da rong hon
   man hinh (o 360px: khung 618px, trai -129px) — do la loi layout san co cua
   banner mobile — nen ep 1 hang se lam chu bi cat ca hai dau; de xuong dong
   nhu cu an toan hon.

   Khong dung container query: container-type tren .banner__slogan lam khung sap
   ve 0 (be rong cua no do noi dung quyet dinh). Dung vw theo ti le da do: khung
   = 47.9% viewport trong khoang 1024-1535px roi dung o 736px, nen min() chot
   tran 23.5px. Selector co #banner de thang rule goc "#banner .banner__slogan h2".
   strong (MICFOOD) dat 3.4em de giu nguyen co chu cu (~53px @1024, ~75px @1440). */
@media (min-width: 1024px) {
    /* Noi khung tu 46rem: co chu 1 hang ti le thuan voi be rong khung, giu
       46rem thi cau chi con ~23px. Khung rong hon van can giua trong banner. */
    #banner .banner__slogan {
        max-width: 78rem;
    }
    /* DA BO white-space:nowrap + co chu 38px o day.
       Hai gia tri nay di voi nhau: 38px la co da tinh de cau nam tron 1 hang.
       Khoi "nhip khoang cach & kieu the" ben duoi sau nay dat lai co chu 3.5rem
       (56px) nhung KHONG dat lai white-space, nen con lai mot minh nowrap:
       o 56px cau can 1689px trong khi khung chi rong 1248px -> chu khong xuong
       dong ma tran han ra ngoai man hinh, cat mat "cong dong".
       Mot hang o 56px la khong the tren man 1440 (can 1689px), nen de chu
       xuong dong. Cung an toan hon khi khach sua cau trong trang quan tri. */
    #banner .banner__slogan h2 strong {
        font-size: 2.1em;
    }
}

/* Thanh menu top-bar tren mobile: cho keo ngang duoc.
   #secondary von da co overflow-x:auto nhung cac li dat flex:0 1 auto nen chung
   CO LAI cho vua khung — khong bao gio tran, nen khong co gi de cuon; khi chat
   thi chu bi de len nhau. Dat flex:0 0 auto de cac muc giu nguyen be rong va
   tran ra, luc do overflow-x moi hoat dong.
   Kem theo min-width:0 cho 2 cap khung: thieu no, flex item khong co duoc duoi
   kich thuoc noi dung nen ca thanh day tran ra ngoai man (o 360px:
   container-wide scrollWidth 412 > 323) keo theo trang bi cuon ngang. */
.top-bar .top-bar-menu,
.top-bar .menu-top-bar-container {
    min-width: 0;
}
.top-bar #secondary {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
.top-bar #secondary::-webkit-scrollbar {
    display: none;
}
.top-bar #secondary > li {
    flex: 0 0 auto;
}
/* Nut mui ten .prev/.next (home.js chen vao duoi 1024px) dat absolute o 2 mep,
   rong 2.14rem. ul khong co padding nen chung de len chu dau/cuoi. Chua cho
   cho chung. */
@media (max-width: 1023px) {
    .top-bar #secondary {
        padding-left: 2.14rem;
        padding-right: 2.14rem;
        /* Dung gon o tung muc thay vi cat ngang mot chu khi vuot dang do. */
        scroll-snap-type: x proximity;
        scroll-padding-left: 2.14rem;
    }
    .top-bar #secondary > li {
        scroll-snap-align: start;
    }
}

/* Anh nen banner: rule "img { height: auto }" cua theme de len height:100% nen
   anh cao theo ti le goc (1440x1078) trong khung chi cao 331px — bi overflow
   cat mat phan duoi va object-fit/object-position khong con tac dung. Tang
   specificity bang selector co ten the. */
img.mf-banner__bg {
    height: 100%;
}
/* Anh banner hoi doc (2000x2117) trong khung rat rong (~4.4:1) nen bi cat
   nhieu theo chieu doc. Lay vung 50%: dia cua day dan nhat; xuong 30-40% thi
   phan lon khung la ao nguoi bung, it thay cua. */
.page-cara img.mf-banner__bg {
    object-position: center 50%;
}

/* Badge "Ca Ra MICFOOD" tren banner trang chu dat right:1.5rem — dung cho cum
   nut lien he noi moi them (cung right:1.5rem, rong 3.25rem) nen bi che. Day
   badge sang trai qua khoi vung nut. */
.mf-banner-badge {
    right: 6rem;
}
@media (max-width: 767px) {
    /* Mobile khong du cho ngang: day sang trai thi badge de len nut "Lien he
       MICFOOD". Dua han sang goc trai — vung nay trong. */
    .mf-banner-badge {
        right: auto;
        left: .85rem;
    }
}

/* Cac the noi dung tren mobile bi tran khoi man hinh, duong vien ben phai bi
   cat: chung dat width:100% nhung box-sizing la content-box nen padding cong
   THEM ra ngoai.
   - .mf-flow__step: width:100% + padding-left 3.5rem (khoi 6 giai doan)
   - .mf-pdf-k4__card: padding 1.25/1.4rem — the dung chung cho ca .mf-flow__card
     (quy trinh nuoi) lan .mf-route__card (quy trinh san xuat giong)
   Cho tat ca tinh padding vao trong be rong. */
@media (max-width: 767px) {
    .mf-flow__step,
    .mf-pdf-k4__card {
        box-sizing: border-box;
    }
}

/* Anh dai dien trong danh sach "San pham va dich vu" tren mobile: khung co ty
   le co dinh 4/3.4 nhung cac anh nguon khac ty le nhau (vuong, doc 3:4, ngang
   3:2), object-fit:cover nen anh bi cat — nang nhat la anh cua giong (mat 57%
   chieu ngang) va bao thuc an CARAMICFEED (mat phan tren duoi cua bao bi).
   Doi sang contain de thay tron san pham; nen trang lap vao phan con lai. */
@media (max-width: 767px) {
    .mf-product-row__media .mf-pdf-k2 {
        background: #fff;
    }
    .mf-product-row__media .mf-pdf-k2 img {
        object-fit: contain;
    }
}

/* Panel anh cua khoi chuoi 6S bat dau lech 50px so voi section (absolute,
   height:100% nhung containing block khong phai section) nen tran 50px xuong
   duoi, de len tieu de section ke tiep. Cat phan tran — panel la anh nen
   object-fit:cover nen khong mat noi dung. */
#development.development-section,
#chuoi-6s.development-section {
    overflow: hidden;
}

/* ==========================================================================
   Banner trang chu — de logo, chu MICFOOD va dong "NGON & LANH" noi ro hon.
   Khach phan hoi: "nhin ky moi thay logo va chu MICFOOD", "chu NGON & LANH
   phai zoom len moi thay".

   Do tren anh banner that (canvas, lay mau dung vung anh hien sau moi chu):
   - Do sang TRUNG BINH sau chu on (tuong phan 7.6-8.7 so voi chu trang).
   - Nhung diem SANG NHAT len toi 252-254 (mang troi/nuoc loa). O nhung mang
     do tuong phan tut xuong 1.53-1.57 — chu trang gan nhu bien mat. Day moi
     la nguyen nhan, khong phai chu qua nho hay lop phu qua nhat.

   Vi vay KHONG tang lop phu toan banner (khach da yeu cau giam xuong .18 va
   muon anh sang). Thay vao do dat mot vung mo cuc bo ngay sau khoi chu.
   Do lai sau khi them: tuong phan te nhat 1.53 -> 4.76, dat chuan WCAG AA.
   ========================================================================== */
#banner .banner__slogan {
    position: relative;
}
#banner .banner__slogan::before {
    content: "";
    position: absolute;
    /* Loang rong ra ngoai khoi chu de khong thay duong vien cua vung mo. */
    inset: -18% -12%;
    /* "closest-side" chu KHONG de mac dinh (farthest-corner): mac dinh thi
       hinh elip di qua GOC o, nen tai giua canh trai/phai ban kinh chuan hoa
       chi la 1/can2 = 0.707 -> mau van con khoang 27% den roi bi cat phang
       tai mep o. Ket qua la thay mot HINH CHU NHAT mo canh cung tren anh.
       closest-side cho elip cham dung canh o, mau ve 0 o moi mep nen vung mo
       loang han, khong con duong vien. */
    background: radial-gradient(ellipse closest-side at center,
        rgba(4, 14, 9, .56) 0%,
        rgba(4, 14, 9, .48) 52%,
        rgba(4, 14, 9, .22) 76%,
        rgba(4, 14, 9, 0) 100%);
    z-index: -1;
    pointer-events: none;
}

/* Dong "NGON & LANH · CHUOI GIA TRI CUA CA RA 6S" chi 12.19px — qua nho so
   voi vai tro la dong dinh vi thuong hieu. Tang co chu, gian chu va lam dam
   nen vien pill. */
#banner .banner__slogan > p {
    font-size: .9375rem;
    letter-spacing: .09em;
    background: rgba(0, 0, 0, .42);
    border-color: rgba(255, 255, 255, .75);
    padding: .6rem 1.5rem;
}

/* Badge logo chi rong 113px = 7.9% be ngang banner, lai la the TRANG nam tren
   vung anh rat sang (do sang trung binh 193/255) nen gan nhu chim vao nen.
   Phong to va them vong vien + do dam hon de tach khoi nen. */
.mf-banner-badge {
    width: 9.5rem;
    box-shadow: 0 .75rem 2rem rgba(0, 0, 0, .45),
                0 0 0 1px rgba(255, 255, 255, .9);
}

@media (max-width: 767px) {
    #banner .banner__slogan > p {
        font-size: .8125rem;
        padding: .5rem 1.15rem;
    }
    .mf-banner-badge {
        width: 5.75rem;
        box-shadow: 0 .4rem 1rem rgba(0, 0, 0, .45),
                    0 0 0 1px rgba(255, 255, 255, .9);
    }
}

/* ==========================================================================
   Banner trang chu tren MOBILE — do khoang tho va dong bo 2 nut CTA.
   Do tren may 390x844: khoi chu chiem 92% chieu cao hero (banner chi cao
   393px), tieu de tran 5 dong, hai nut CTA xep DOC va lech co nhau
   (197px vs 162px). Nhin roi va chat — dung cam giac "thieu chau chuot"
   khach phan hoi khi so voi web mau.
   ========================================================================== */
@media (max-width: 767px) {
    /* Hai nut nam cung mot hang, cung chieu cao, cung be rong toi thieu.
       Truoc day chung xuong dong va moi nut mot co. */
    #banner .banner__slogan .btns {
        flex-wrap: wrap;
        gap: .6rem;
    }
    #banner .banner__slogan .btns .btn {
        flex: 1 1 0;
        min-width: 0;
        justify-content: center;
        padding-left: .9rem;
        padding-right: .9rem;
        font-size: .75rem;
        white-space: nowrap;
    }

    /* Tieu de 25.5px tran 5 dong tren be ngang 350px. Giam co chu va noi
       gian dong ra mot chut: it dong hon nhung doc de hon, va dau tieng Viet
       khong cham dong tren. */
    #banner .banner__slogan h2 {
        font-size: 1.35rem;
        line-height: 1.32;
        margin-bottom: 1.4rem;
    }
    #banner .banner__slogan h2 strong {
        font-size: 1.9rem;
    }
}

/* ==========================================================================
   NHIP KHOANG CACH & KIEU THE — trang chu
   Khach so sanh voi web mau va nhan xet "ho chau chuot tung duong net, don
   gian nhung ti mi". Do lai nhip doc cua trang chu thi thay day la cho hong:
   dem tren/duoi cua 9 khoi dang la 8 gia tri khac nhau va nhieu khoi lech
   han tren-duoi:
     brands 66/37 · development 66/66 · product 19/56 · layers 56/150
     hop-tac 47/47 · thi-truong 94/94 · newsletter 47/66 · news 35/0
   Da kiem tra: khoang 150px duoi khoi "layers" khong che chan gi (khong co
   phan tu nao chong len), tuc la do lech chu khong phai chu y thiet ke.
   Dua ve MOT thang duy nhat -> mat nhin thay nhip deu, do la thu tao cam giac
   "ti mi" chu khong phai them hoa van.
   ========================================================================== */
#brands,
#development,
#product,
#layers,
#hop-tac-quoc-te,
#thi-truong,
#newsletter,
#news {
    padding-top: 4.5rem;
    padding-bottom: 4.5rem;
}

/* Kieu THE: trang chu dang ton tai 2 ngon ngu the khac nhau —
   .product-item (bo goc 0, khong bong) va .gf-latest-card (bo goc 8, co bong).
   Dong bo ve mot kieu de cac khoi trong nhu cung mot he thong. */
.product-item,
.gf-latest-card {
    border-radius: .75rem;
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(0, 0, 0, .04);
}

@media (max-width: 767px) {
    #brands,
    #development,
    #product,
    #layers,
    #hop-tac-quoc-te,
    #thi-truong,
    #newsletter,
    #news {
        padding-top: 3rem;
        padding-bottom: 3rem;
    }
}

/* ==========================================================================
   DONG BO CHU VOI WEB MAU (greenfeed.com.vn)
   Da mo web mau trong trinh duyet va DO truc tiep computed style o cung man
   1440px, thay vi doan qua anh chup. Ket qua: font (SVN-Gotham), co chu goc
   (15px), tieu de khoi (33.8px / 500 / den), doan van (15px / gian dong 24)
   DA TRUNG KHOP. Chi lech 3 cho duoi day.
   ========================================================================== */

/* 1. Tieu de hero: web mau 52.5px DAM 500; cua minh 36.7px DAM 700 — vua nho
      hon 30% vua nang hon, nen trong "day" chu khong thanh thoat. Dua ve dung
      thang cua web mau. */
#banner .banner__slogan h2 {
    font-size: 3.5rem;
    font-weight: 500;
    line-height: 1.22;
}
/* Ten thuong hieu truoc day 77px (gap doi phan con lai) — chenh lech qua lon
   lam vo nhip. Giu noi bat nhung vua phai. */
#banner .banner__slogan h2 strong {
    font-size: 1.25em;
    font-weight: 700;
}

/* 2. Nhan khoi ("Gioi thieu", "Hop tac quoc te"...) dang 11.3px, nho hon web
      mau (14.1px) 20% nen bi chim. */
.section-subtitle {
    font-size: .9375rem;
}

/* 3. Tieu de khoi "Hop tac quoc te" lech khoi he thong: dam 700 + mau xanh la
      (8,91,54) trong khi 5 tieu de con lai deu dam 500 + mau den. Chinh chi
      tiet lech kieu nay la thu tao cam giac "lam khong ti mi". */
#hop-tac-quoc-te .section-title {
    font-weight: 500;
    color: #000;
}

@media (max-width: 767px) {
    #banner .banner__slogan h2 {
        font-size: 1.35rem;
    }
    #banner .banner__slogan h2 strong {
        font-size: 1.4em;
    }
}

/* Logo khong can giua theo chieu doc tren dien thoai: cach mep tren 9px nhung
   cach mep duoi 13px, trong khi cum tien ich ben phai can dung 16/16.
   HAI nguyen nhan cong lai:
   1. Anh logo la phan tu INLINE nen khung .logo cao hon anh 3px (khoang trong
      duong co so). Dat display:block de khung om sat anh.
   2. Theme co rule ".logo { transform: translateY(-0.125rem) }" o breakpoint
      <=1023px (style.css ~4085) — day logo len ~1.8px. Phep bu nay duoc canh
      cho logo goc chi rong 4.875rem; logo hien tai da 10.25rem nen no thanh
      sai lech. Go bo o pham vi tuong ung. */
.logo img {
    display: block;
}
@media screen and (max-width: 1023px) {
    .logo {
        transform: none;
    }
}

/* ==========================================================================
   NET CHU TREN BANNER — bo bong chu
   Khach nhan xet chu cua web mau "deu net hon". Do ca hai ben:
     - Cung ho font SVN-Gotham, ca hai deu co face that cho 400/500/700
       (document.fonts.check tra ve true) -> KHONG phai loi dam gia.
     - Khac biet duy nhat: tieu de hero cua web mau co "text-shadow: none",
       con cua minh la "0 2px 10px rgba(0,0,0,.55)" + "0 1px 3px".
   Bong nhoe ban kinh 10px vien quanh tung net chu chinh la thu lam chu trong
   mem va khong deu net.
   Truoc day bong duoc them vi lop phu banner chi con .18 — nhung gio da co
   lop mo cuc bo (radial) ngay sau khoi chu, do lai tuong phan te nhat la 5.21
   (chuan WCAG AA can >= 3.0 cho chu lon), tuc bong khong con can thiet.
   ========================================================================== */
#banner .banner__slogan h2,
#banner .banner__slogan h2 strong,
#banner .banner__slogan > p {
    text-shadow: none;
}

/* ==========================================================================
   MOBILE: BO HEADER DINH (sticky) — hoc theo web mau
   Do hanh vi cua greenfeed.com.vn o man 390px: header cua ho "position:
   static", cuon la troi di luon cung trang (top xuong -600, -1400), logo giu
   nguyen 71x44, khong filter/transform.
   Ben minh: khi cuon, theme them class sticky-header-down -> .dt-header-wrapper
   chuyen sang "position: fixed", nen tu trong suot thanh TRANG va truot ra
   truot vao. Chinh hieu ung do la cai khach thay logo "bien doi".
   Tra ve dang tinh o pham vi <=1023px cho giong web mau.
   ========================================================================== */
@media screen and (max-width: 1023px) {
    .sticky-header #dt-header .dt-header-wrapper,
    .sticky-header-down #dt-header .dt-header-wrapper,
    body:not(.sticky-header).sticky-header-down #dt-header .dt-header-wrapper {
        /* Theme dat "position: fixed !important" (style.css ~1440) nen o day
           buoc phai dung !important moi go duoc. */
        position: static !important;
        top: auto !important;
        background: transparent;
        box-shadow: none;
        transform: none !important;
    }
    /* Theme an thanh den khi header dinh — khong con dinh thi giu nguyen. */
    .sticky-header #dt-header .top-bar,
    .sticky-header-down #dt-header .top-bar {
        display: block;
    }
    /* Logo khong doi kich thuoc/hieu ung khi cuon. */
    .sticky-header-down #dt-header .dt-header-wrapper .header-main,
    .sticky-header #dt-header .header-main {
        padding: .7rem 0;
    }
    .logo,
    .logo img {
        transition: none;
    }
}

/* Logo tren dien thoai dang rong 149px = 38% be ngang man 390px — qua lon.
   Web mau (greenfeed) de logo 71px = 18%. Logo cua minh la dai NGANG
   (ti le 3.53) con cua ho gon hon nen khong lay y nguyen 18%, nhung 38% thi
   chiem qua nhieu dau trang. Dua ve ~27%. */
@media (max-width: 767px) {
    .logo {
        width: 7.25rem;
    }
}

/* Gian cach tieu de "San pham va Dich vu" voi hang the ben duoi: mac dinh
   template (va ca greenfeed) la 45px, theo yeu cau noi rong them mot nac.
   Dat tren chinh .products-carousel chu khong phai margin-bottom cua
   .section-title-wrapper: carousel da co margin-top 45px nen hai margin se
   COLLAPSE, lay gia tri lon hon — them vao wrapper se khong co tac dung. */
#product .products-carousel {
    margin-top: 4.5rem;
}

/* Bo vien khung the tin trong khoi "Bao chi noi ve MICFOOD" tren trang chu.
   Vien 1px #d9d9d9 den tu .article-box (post.css) — class nay con dung o trang
   Tin tuc va cac khoi bai lien quan, nen chi scope trong #news de khong anh
   huong nhung noi khac. */
#news .article-box {
    border: none;
}

/* Mui ten trong nut tron .readmore (goc phai duoi anh tin): icon goc duoc
   nhuom xanh la bang mot chuoi filter, dat tren nen xanh #1876BC nen toi va
   kho nhin. Doi sang trang: brightness(0) bien icon thanh den tuyen, invert(1)
   lat lai thanh trang. */
#news .readmore img {
    filter: brightness(0) invert(1);
}

/* The nho khoi bao chi bi cat cut chu. Hai nguyen nhan:
   - .bc-content de min-width:auto nen flex item khong co duoc duoi kich thuoc
     noi dung, phinh 12px ra ngoai the.
   - .bc-date dat white-space:nowrap kem overflow:visible nen chuoi dai
     ("Dai PT-TH Ha Noi · 25-10-2025") tran ra va bi cat ngang giua chu.
   Khoa min-width va cat bang dau ba cham thay vi de chu cut. */
#news .bc-content,
#news .bc-meta {
    min-width: 0;
}
#news .bc-date {
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Nut Zalo o footer ve bang chu (khong co file logo trong du an). Nut tron co
   padding 9.75px nen o chu chi con 16px — "Zalo" 4 ky tu khong doc duoc. Bo
   padding rieng cho nut nay de chu dung het be rong; kich thuoc o tron van
   giu nguyen 36px nhu hai nut kia. */
.socials a.social-item--zalo {
    padding: 0;
}
.socials a.social-item--zalo svg {
    width: 1.9rem;
    height: 1.05rem;
}

/* Markup trang chu gio dung dung cau truc .bc-logo > .bc-source nhu trang Tin
   tuc nen an chung style trong post.css. Chi can them mot dieu: ten nguon o
   trang chu dai hon (vd "Dai PT-TH Ha Noi" xuong 2 dong) nen ep ngay co lai
   va bi cat thanh "25-10-2...". Khoa ngay khong co de luon hien du. */
#news .bc-date {
    flex: 0 0 auto;
}

/* Icon lich trong dong ngay cua the tin:
   - Anh co margin-bottom 3.75px, ma .article_date la flex align-items:center
     nen margin do day icon lech len 1px so voi chu. Bo margin duoi.
   - Icon goc 11px, nho hon ca co chu ngay (13.125px). Nang len 14px cho can
     voi chu. */
#news .article-item .article_meta .article_date img {
    margin-bottom: 0;
    /* Phai dung !important: rule goc ".article-item .article_meta img" dat
       height .75rem !important nen khong the ghi de bang specificity thuong. */
    height: .9rem !important;
    width: auto !important;
    /* Can giua theo hop chu thi tam trung nhau (lech 0px) nhung nhin van thay
       icon cao hon: chuoi ngay toan chu so, khong co phan tho xuong nhu "g/y"
       nen net chu nam cao trong hop, tam NET thap hon tam HOP. Day icon xuong
       1px cho khop thi giac.
       Dung transform chu khong phai position:relative + top — co rule khac ep
       anh ve position:static nen "top" khong co tac dung. */
    transform: translateY(1px) !important;
}

/* Dai nen trang cua header tren trang chu (.home .header-main:before) von rong
   hon container 4rem, bo goc .75rem va co vien quanh — nhin nhu mot hop noi,
   ho hai ben va bo tron o hai mep. Cho keo het be ngang man hinh, bo goc va
   bo vien trai/phai; chi giu vien duoi de tach voi noi dung. */
.home .header-main:before {
    width: 100vw;
    border-radius: 0;
    border-left: 0;
    border-right: 0;
    border-top: 0;
}

/* ==========================================================================
   PILL NHAN HERO — theo dung web mau
   Do computed style pill "CHUOI THUC PHAM LANH TU TRANG TRAI DEN BAN AN" cua
   greenfeed o man 1440px va so voi pill "CHUOI GIA TRI CUA CA RA 6S":
                    web mau        cua minh (truoc)
     co chu         11.25px        14.06px
     do dam         400            500
     gian chu       0              1.27px
     nen            TRONG SUOT     den 42%
     vien           trang DAC      trang 75%
     dem            3.75 / 11.25   9 / 22.5
     backdrop       khong          blur(2px)
   Pill cua ho manh va tinh hon han. Bo nen dac + backdrop blur, thu nho chu
   va dem lai cho giong.
   An toan ve do doc: da do lai sau khi bo nen pill — tuong phan te nhat van
   5.2 (chu nho can >= 4.5) nho lop mo cuc bo sau khoi chu.
   ========================================================================== */
#banner .banner__slogan > p {
    font-size: .75rem;
    font-weight: 400;
    letter-spacing: normal;
    background: transparent;
    border-color: #fff;
    padding: .25rem .75rem;
    backdrop-filter: none;
}

@media (max-width: 767px) {
    #banner .banner__slogan > p {
        font-size: .6875rem;
        padding: .22rem .7rem;
    }
}

/* ==========================================================================
   THANH TREN CUNG — theo dung web mau
   Do ca hai o 1440px va 390px:
     cao 41/31px, nen rgb(36,33,33), co chu 12.19/10.93px, muc dang chon dam
     700 mau thuong hieu, cac muc con lai trang 400, menu can giua, mobile
     cuon ngang  ->  TAT CA DA KHOP SAN.
   Con lai 2 khac biet:
   1. Theme chen 2 nut mui ten .prev/.next vao thanh menu mobile, phai chua
      31px dem moi ben cho chung. Web mau khong co nut nao — chi cuon tu
      nhien, muc dau nam sat le 20px. Bo nut + bo dem de hien duoc nhieu muc
      hon trong cung be ngang.
   2. Hotline dung co chu rieng (13.13px desktop / 11.84px mobile) trong khi
      menu la 12.19/10.93px — lech ngay trong cung mot thanh. Dua ve cung co.
   ========================================================================== */
.top-bar-hotline a {
    font-size: .8125rem;
    letter-spacing: normal;
}

@media screen and (max-width: 1023px) {
    .top-bar #secondary {
        padding-left: 0;
        padding-right: 0;
        scroll-padding-left: 0;
    }
    .top-bar .prev,
    .top-bar .next {
        display: none !important;
    }
    /* Sau khi bo hotline, menu rong 350px con 3 muc can 354px — thieu dung
       4px la phai cuon. Thu dem ngang moi muc tu 21.85px xuong 19px de ca ba
       muc hien du, khong phai cuon. */
    .top-bar #secondary > li > a {
        padding-left: 1.3rem;
        padding-right: 1.3rem;
    }
    .top-bar-hotline a {
        font-size: .7292rem;
    }
}