/* AgriConnect — Trang chủ (/).
   Khác 3 trang marketing còn lại: Trang chủ KHÔNG dùng .ac-hero 2 cột của base.css mà có hero
   tràn viền riêng (.ac-stage) dựng quanh bộ ảnh thương hiệu — ảnh banner được vẽ chừa sẵn khoảng
   trời trống bên trái để đặt chữ, nên scrim đi từ trái sang chứ không phủ đen toàn khung.

   Quy ước đặt tên trong file này:
     .ac-stage    hero tràn viền + thanh tìm nguồn
     .ac-band     dải ảnh tràn viền xen giữa các section
     .ac-issues   4 thách thức
     .ac-journey  5 bước hành trình thu mua (ảnh + thẻ dữ liệu thật)
     .ac-trust    nền tảng dữ liệu tin cậy (infographic 4 bên)
     .ac-gate     tìm nguồn ẩn danh → xin kết nối → mở thông tin liên hệ */


/* ============================================================
   HERO TRÀN VIỀN
   ============================================================ */
.ac-stage {
    position: relative;
    isolation: isolate;
    background: var(--ac-bg-mint);
}

.ac-stage__media {
    position: absolute;
    inset: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Giữ cây mầm + quả cầu dữ liệu ở mép phải khi khung bị bóp hẹp. */
    object-position: 78% 50%;
}

/* Scrim ngang: đặc ở mép trái cho chữ đọc được, tan dần trước khi chạm cụm ảnh bên phải. */
.ac-stage__scrim {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(95deg, rgba(242, 247, 242, .97) 0%, rgba(242, 247, 242, .95) 26%, rgba(242, 247, 242, .82) 42%, rgba(242, 247, 242, .35) 58%, rgba(242, 247, 242, 0) 72%);
}

.ac-stage__inner {
    position: relative;
    z-index: 2;
    padding: 84px 0 132px;
}

.ac-stage__copy {
    /* Đủ rộng để "Kiểm soát đúng chuẩn." nằm trọn một dòng ở cỡ display lớn nhất, nhưng vẫn
       kết thúc trước khi scrim tan hết (≈72% bề ngang) nên không đè lên cụm cây mầm. */
    max-width: 38rem;
}

.ac-stage__title {
    font-size: var(--ac-text-display);
    font-weight: 800;
    line-height: 1.08;
    letter-spacing: -0.03em;
    margin: 0 0 20px;
}

.ac-stage__title .ac-accent {
    color: var(--ac-primary);
}

.ac-stage__desc {
    font-size: var(--ac-text-lead);
    line-height: 1.62;
    color: var(--ac-ink-soft);
    max-width: 44ch;
    margin: 0 0 28px;
}

.ac-stage__features {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px 22px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.ac-stage__features li {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: var(--ac-text-meta);
    font-weight: 600;
    color: var(--ac-ink-soft);
}

.ac-stage__features i {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--ac-white);
    border: 1px solid var(--ac-border);
    color: var(--ac-primary-dark);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    flex-shrink: 0;
}


/* ============================================================
   THANH TÌM NGUỒN — hành động chính của trang, đè lên mép dưới hero
   ============================================================ */
.ac-finder {
    position: relative;
    z-index: 3;
    margin-top: -76px;
    margin-bottom: 8px;
    padding: 18px;
    border-radius: var(--ac-radius-lg);
    box-shadow: var(--ac-shadow-md);
}

.ac-finder__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 14px;
}

.ac-finder__title {
    font-size: 1.0625rem;
    font-weight: 700;
    margin: 0;
}

.ac-finder__count {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: var(--ac-text-meta);
    color: var(--ac-muted);
}

.ac-finder__count b {
    color: var(--ac-primary-dark);
}

.ac-finder__dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--ac-primary-light);
    flex-shrink: 0;
}

.ac-finder__row {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr)) auto;
    gap: 8px;
    align-items: stretch;
}

.ac-field {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 1px;
    border: 1px solid var(--ac-border);
    border-radius: var(--ac-radius-sm);
    background: var(--ac-white);
    padding: 7px 12px;
    min-width: 0;
}

.ac-field__label {
    font-size: 11px;
    line-height: 1.4;
    color: var(--ac-muted);
}

.ac-field__value {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    font-size: 13.5px;
    line-height: 1.35;
    font-weight: 600;
    color: var(--ac-ink);
}

.ac-field__value i {
    font-size: 9px;
    color: var(--ac-muted);
    flex-shrink: 0;
}

.ac-field--empty .ac-field__value {
    font-weight: 500;
    color: var(--ac-muted);
}

/* Nút pill bo tròn hoàn toàn mà lại kéo cao bằng ô field trông rất thô, và đá nhau với 4 ô
   bo góc vuông bên cạnh. Cho nó cùng bán kính với field để cả hàng đọc như một cụm điều khiển. */
.ac-finder__submit {
    align-self: stretch;
    border-radius: var(--ac-radius-sm);
    padding: 10px 26px;
    font-size: 14px;
}

.ac-finder__tags {
    display: flex;
    align-items: center;
    gap: 7px;
    flex-wrap: wrap;
    margin-top: 12px;
    font-size: var(--ac-text-micro);
    color: var(--ac-muted);
}

.ac-tag {
    border: 1px solid var(--ac-border);
    border-radius: var(--ac-radius-pill);
    padding: 3px 11px;
    font-size: var(--ac-text-micro);
    color: var(--ac-ink-soft);
    text-decoration: none;
    background: var(--ac-white);
}

.ac-tag:hover {
    border-color: var(--ac-primary);
    color: var(--ac-primary-dark);
}


/* ============================================================
   DẢI ẢNH TRÀN VIỀN (chuỗi giá trị / truy xuất)
   ============================================================ */
.ac-band {
    position: relative;
    isolation: isolate;
    min-height: 360px;
    display: flex;
    align-items: center;
    overflow: hidden;
}

.ac-band__media {
    position: absolute;
    inset: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ac-band__scrim {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(95deg, rgba(8, 40, 24, .92) 0%, rgba(8, 40, 24, .80) 38%, rgba(8, 40, 24, .34) 68%, rgba(8, 40, 24, .12) 100%);
}

/* ---------- Biến thể chia đôi: ảnh một nửa, chữ một nửa ----------
   Dùng khi chủ thể của ảnh nằm đúng chỗ phải đặt chữ. Không có scrim, không đè — ảnh giữ
   nguyên 100% và chữ nằm trên nền đặc nên luôn đạt tương phản, không phụ thuộc vào ảnh. */
.ac-band--split {
    display: grid;
    grid-template-columns: 1.18fr 1fr;
    align-items: stretch;
    min-height: 420px;
}

.ac-band--split .ac-band__pane {
    position: relative;
    overflow: hidden;
}

.ac-band--split .ac-band__media {
    object-position: 50% 58%;
}

.ac-band--split .ac-band__panel {
    display: flex;
    align-items: center;
    background: linear-gradient(140deg, #12603A 0%, #0B4E2C 48%, #0E2A1E 100%);
    padding: 56px clamp(24px, 4vw, 64px) 56px clamp(28px, 4vw, 56px);
}

.ac-band--split .ac-band__copy {
    max-width: 34rem;
}

/* Dải chuỗi giá trị: ảnh đã vẽ sẵn hàng 7 icon nằm ngang chính giữa, chữ đặt bên trái sẽ đâm
   thẳng vào đó. Cắt khung xuống mép dưới để hàng icon ra ngoài tầm nhìn — phần 7 chặng đã có
   thanh .ac-stages bên dưới diễn đạt bằng chữ Việt rõ hơn, nên không mất thông tin gì. */
.ac-band--chain .ac-band__media {
    object-position: 50% 100%;
}

/* Mép dưới ảnh là vạt cà phê rất sáng, scrim mặc định chưa đủ gánh chữ trắng. */
.ac-band--chain .ac-band__scrim {
    background: linear-gradient(95deg, rgba(8, 40, 24, .95) 0%, rgba(8, 40, 24, .88) 38%, rgba(8, 40, 24, .46) 68%, rgba(8, 40, 24, .18) 100%);
}

.ac-band__inner {
    position: relative;
    z-index: 2;
    width: 100%;
    padding: 64px 0;
}


.ac-band__copy {
    max-width: 40rem;
}


.ac-band .ac-eyebrow {
    color: #9BE3B6;
}

.ac-band .ac-eyebrow::before {
    background: #9BE3B6;
}


/* Phải bám thêm .ac-band cho đủ độ đặc hiệu: base.css có `.ac-page h1,h2,h3,h4 { color: ink }`
   — chọn theo kiểu thẻ nên (0,1,1), ăn đè lên một class đơn (0,1,0) và kéo tiêu đề dải ảnh về
   màu mực đen, chìm nghỉm trên nền ảnh tối. */
.ac-band .ac-band__title {
    font-size: clamp(1.5rem, 1.1rem + 1.5vw, 2.25rem);
    font-weight: 800;
    line-height: 1.2;
    color: #fff;
    margin: 0 0 12px;
}

.ac-band__desc {
    font-size: var(--ac-text-lead);
    line-height: 1.6;
    color: rgba(255, 255, 255, .84);
    margin: 0;
    max-width: 52ch;
}


/* Dải 7 chặng nằm dưới ảnh, tránh đè lên hàng icon đã vẽ sẵn trong ảnh */
.ac-stages {
    position: relative;
    z-index: 3;
    margin-top: -46px;
    margin-bottom: 8px;
    padding: 20px 10px;
    border-radius: var(--ac-radius-lg);
    box-shadow: var(--ac-shadow-md);
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 4px;
}

.ac-stages__item {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 9px;
    text-align: center;
    padding: 4px 8px;
}

/* Đường nối giữa các chặng — thay cho mũi tên rời, đỡ vụn ở màn nhỏ */
.ac-stages__item:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 21px;
    left: calc(50% + 26px);
    right: calc(-50% + 26px);
    height: 1px;
    background: var(--ac-border-strong);
}

.ac-stages__icon {
    position: relative;
    z-index: 1;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: var(--ac-primary-soft);
    color: var(--ac-primary-dark);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 17px;
    flex-shrink: 0;
}

.ac-stages__item:last-child .ac-stages__icon {
    background: var(--ac-primary);
    color: #fff;
}

.ac-stages__label {
    font-size: var(--ac-text-micro);
    font-weight: 600;
    line-height: 1.35;
    color: var(--ac-ink-soft);
}


/* ============================================================
   4 THÁCH THỨC — lưới gạch chân, không dùng thẻ card rời
   ============================================================ */
.ac-issues {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0;
    margin-top: 40px;
    border-top: 1px solid var(--ac-border-strong);
}

.ac-issues__item {
    display: flex;
    gap: 16px;
    padding: 28px 32px 28px 0;
    border-bottom: 1px solid var(--ac-border-strong);
}

.ac-issues__item:nth-child(odd) {
    border-right: 1px solid var(--ac-border-strong);
}

.ac-issues__item:nth-child(even) {
    padding-left: 32px;
    padding-right: 0;
}

.ac-issues__icon {
    width: 40px;
    height: 40px;
    border-radius: var(--ac-radius-sm);
    background: var(--ac-white);
    border: 1px solid var(--ac-border);
    color: var(--ac-primary-dark);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 17px;
    flex-shrink: 0;
}

.ac-issues__item h3 {
    font-size: var(--ac-text-h3);
    font-weight: 700;
    margin: 6px 0 6px;
}

.ac-issues__item p {
    font-size: var(--ac-text-body);
    line-height: 1.6;
    color: var(--ac-muted);
    margin: 0;
    max-width: 44ch;
}


/* ============================================================
   5 BƯỚC HÀNH TRÌNH — ảnh thật + thẻ dữ liệu sản phẩm đè lên
   ============================================================ */
.ac-journey {
    display: flex;
    flex-direction: column;
    gap: 84px;
    margin-top: 56px;
}

.ac-step {
    display: grid;
    grid-template-columns: 1.15fr 1fr;
    gap: 56px;
    align-items: center;
}

.ac-step:nth-child(even) .ac-step__media {
    order: 2;
}

.ac-step__media {
    position: relative;
    margin: 0;
}

.ac-step__photo {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 10;
    object-fit: cover;
    border-radius: var(--ac-radius-lg);
    box-shadow: var(--ac-shadow-md);
}

/* Thẻ dữ liệu nằm GỌN TRONG khung ảnh, cách mép 18px. Trước đây thẻ thò hẳn ra ngoài
   (left/bottom âm) tạo ra cạnh lởm chởm phá mất góc bo của ảnh; neo vào trong thì nó đọc như
   một lớp giao diện phủ trên ảnh chụp sản phẩm. */
.ac-step__chip {
    position: absolute;
    left: 18px;
    bottom: 18px;
    /* 282 chứ không phải 272: viền thêm cho nhãn "Xác thực" ăn mất 2px mỗi dòng, đủ để
       "Thanh long ruột đỏ" bị cắt thành "ruột …". */
    width: 282px;
    max-width: calc(100% - 36px);
    padding: 12px 14px;
    border-radius: var(--ac-radius);
    /* Kính mờ thật sự, không phải trắng đặc. Trước đây alpha .96 khiến blur(10px) gần như vô
       nghĩa nên thẻ trông như miếng sticker dán đè lên ảnh.

       Giữ chữ đọc được là nhờ ĐỘ BLUR chứ không phải độ đục: blur mạnh xoá hết chi tiết tần số
       cao của ảnh phía sau, để lại một mảng màu mượt — nền mượt thì chữ 11px có dấu mới không bị
       nhiễu ăn mất. Vì vậy hạ alpha xuống .82 nhưng nhân đôi blur, thêm saturate cho mảng nền
       khỏi xám xịt.

       Đã render thử .82 / .70 / .58 trên 3 nền khó nhất (tán lá, màn tablet, cảng) rồi chọn .70.
       Tới .58 thì chữ vẫn đọc được nhưng thẻ hút màu nền quá mạnh — ngả xanh trên ruộng, ngả nâu
       ở cảng — nên không còn đọc ra là thẻ trắng nữa, và nhãn "Xác thực" nền mint bắt đầu lẫn vào
       nền thẻ. .70 là điểm cuối còn giữ được cả hai. */
    background: rgba(252, 254, 252, .70);
    backdrop-filter: blur(26px) saturate(1.6);
    -webkit-backdrop-filter: blur(26px) saturate(1.6);
    /* Viền phải là nét MỰC mờ, không phải nét trắng. Viền trắng .85 hợp lý hồi nền thẻ còn .96
       (viền và ruột cùng tông), nhưng khi nền hạ xuống .70 và ngả theo màu ảnh thì viền trắng
       hoá ra sáng hơn cả ruột thẻ — thành một vành glow, lộ nhất ở chỗ giáp tán lá tối.

       Nét mực mờ chịu được cả hai chiều: trên nền tối nó gần như biến mất và để bóng đổ lo phần
       tạo cạnh; trên nền sáng (cảng, trời) nó lại là thứ duy nhất giữ được cạnh khi bóng đổ yếu.
       Viền trắng chỉ đúng ở nền tối, còn bỏ hẳn viền thì cạnh trên bị tan vào nền sáng. */
    border: 1px solid rgba(14, 42, 30, .12);
    box-shadow: var(--ac-shadow-md);
}

/* Bù tương phản đã mất khi nền thẻ không còn đục hoàn toàn: chữ phụ nâng từ --ac-muted
   (#5E7268) lên --ac-ink-soft (#2C4739), đường kẻ đậm hơn để không tan vào ảnh. */
.ac-step__chip .ac-data__row,
.ac-step__chip .ac-data__caption span,
.ac-step__chip .ac-hit__meta {
    color: var(--ac-ink-soft);
}

.ac-step__chip .ac-data__caption,
.ac-step__chip .ac-data__row--total,
.ac-step__chip .ac-hit + .ac-hit {
    border-color: rgba(14, 42, 30, .16);
}

/* Nền thẻ giờ ngả theo màu ảnh, mà nhãn "Xác thực" lại là mint nhạt — trên nền ruộng hai thứ
   gần như cùng tông. Thêm viền để nhãn giữ được hình dạng riêng. */
.ac-step__chip .ac-verified {
    border: 1px solid rgba(21, 122, 69, .24);
}

/* Không có blur thì alpha .82 để chữ nằm thẳng trên ảnh thô — trả về nền gần đặc. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .ac-step__chip {
        background: rgba(252, 254, 252, .96);
    }
}

.ac-step:nth-child(even) .ac-step__chip {
    left: auto;
    right: 18px;
}

.ac-step__index {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    font-size: var(--ac-text-meta);
    font-weight: 600;
    color: var(--ac-primary-dark);
    margin-bottom: 14px;
}

.ac-step__index b {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 1.5px solid var(--ac-primary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 700;
    flex-shrink: 0;
}

.ac-step__body h3 {
    font-size: clamp(1.25rem, 1.05rem + .6vw, 1.625rem);
    font-weight: 800;
    line-height: 1.22;
    margin: 0 0 12px;
}

.ac-step__body p {
    font-size: var(--ac-text-body);
    line-height: 1.65;
    color: var(--ac-muted);
    margin: 0 0 16px;
    max-width: 46ch;
}

.ac-step__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 9px;
}

.ac-step__list li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: var(--ac-text-body);
    color: var(--ac-ink-soft);
}

.ac-step__list i {
    color: var(--ac-primary);
    font-size: 12px;
    margin-top: 5px;
    flex-shrink: 0;
}


/* ---------- Thẻ dữ liệu dùng lại trong chip + các section khác ---------- */
.ac-data__caption {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    font-size: var(--ac-text-micro);
    font-weight: 700;
    color: var(--ac-ink);
    padding-bottom: 8px;
    margin-bottom: 4px;
    border-bottom: 1px solid var(--ac-border);
}

.ac-data__caption span {
    font-weight: 500;
    color: var(--ac-muted);
}

.ac-data__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 6px 0;
    font-size: var(--ac-text-micro);
    color: var(--ac-muted);
}

.ac-data__row b {
    color: var(--ac-ink);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.ac-data__row--total {
    border-top: 1px solid var(--ac-border);
    margin-top: 4px;
    padding-top: 8px;
    color: var(--ac-ink-soft);
    font-weight: 600;
}

.ac-data__row--total b {
    color: var(--ac-primary-dark);
}

.ac-bar {
    height: 5px;
    border-radius: 3px;
    background: var(--ac-bg-mint-2);
    overflow: hidden;
    margin-bottom: 4px;
}

.ac-bar span {
    display: block;
    height: 100%;
    background: var(--ac-primary);
    border-radius: 3px;
}

.ac-pass {
    color: var(--ac-primary-dark) !important;
}

/* Kết quả tìm nguồn trong chip bước 1. Tên + nhãn "Xác thực" chia nhau một dòng, phần meta
   (tỉnh · sản lượng · ngày) xuống dòng chiếm trọn bề ngang — xếp cả ba thứ trên một hàng ngang
   làm cột nào cũng bị bóp còn 2–3 chữ rồi ngắt dòng lung tung. */
.ac-hit {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 7px 0;
}

.ac-hit + .ac-hit {
    border-top: 1px solid var(--ac-border);
}

.ac-hit__thumb {
    width: 34px;
    height: 34px;
    border-radius: 8px;
    object-fit: cover;
    flex-shrink: 0;
}

.ac-hit__info {
    flex: 1;
    min-width: 0;
}

.ac-hit__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
}

.ac-hit__name {
    font-size: var(--ac-text-micro);
    font-weight: 700;
    color: var(--ac-ink);
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ac-hit__meta {
    font-size: 11px;
    color: var(--ac-muted);
    line-height: 1.35;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ac-verified {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 10.5px;
    font-weight: 700;
    color: var(--ac-primary-dark);
    background: var(--ac-primary-soft);
    border-radius: var(--ac-radius-pill);
    padding: 2px 8px;
    flex-shrink: 0;
}


/* ============================================================
   NỀN TẢNG DỮ LIỆU TIN CẬY
   ============================================================ */
/* Sơ đồ 4 bên đứng một mình bên trái, 3 cam kết xếp dọc bên phải — trước đây sơ đồ phải chia
   hàng với một ảnh chân dung rồi mới tới hàng 3 thẻ, thành ra sơ đồ bị bóp nhỏ mà chữ trong
   sơ đồ lại là thứ cần đọc được nhất ở section này. */
.ac-trust__grid {
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
    gap: 52px;
    align-items: center;
    margin-top: 44px;
}

/* Nền mint để các thẻ trắng trong sơ đồ (PNG nền trong suốt) không trôi trên nền trắng. */
.ac-trust__chart {
    margin: 0;
    padding: 26px 22px;
    background: var(--ac-bg-mint);
    border-radius: var(--ac-radius-lg);
}

.ac-trust__chart img {
    display: block;
    width: 100%;
    height: auto;
}

/* Danh sách kẻ chỉ, dùng lại đúng ngữ pháp thị giác của mục "4 điểm nghẽn" — ba thẻ card xếp
   dọc trong cột hẹp sẽ nặng nề và tranh chấp với sơ đồ bên cạnh. */
.ac-guarantees {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
}

.ac-guarantee {
    display: flex;
    gap: 16px;
    padding: 22px 0;
    border-bottom: 1px solid var(--ac-border-strong);
}

.ac-guarantee:first-child {
    padding-top: 0;
}

.ac-guarantee:last-child {
    padding-bottom: 0;
    border-bottom: none;
}

.ac-guarantee__body {
    min-width: 0;
}

.ac-guarantee__icon {
    width: 44px;
    height: 44px;
    border-radius: var(--ac-radius-sm);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 19px;
    flex-shrink: 0;
    background: var(--ac-primary-soft);
    color: var(--ac-primary-dark);
}

.ac-guarantee__icon--official {
    background: var(--ac-official-soft);
    color: var(--ac-official);
}

.ac-guarantee h3 {
    font-size: 1.0625rem;
    font-weight: 700;
    margin: 0 0 5px;
}

.ac-guarantee p {
    font-size: var(--ac-text-body);
    line-height: 1.6;
    color: var(--ac-muted);
    margin: 0;
}


/* ============================================================
   TÌM NGUỒN ẨN DANH → XIN KẾT NỐI → MỞ LIÊN HỆ
   ============================================================ */
.ac-gate {
    display: grid;
    grid-template-columns: 1fr 1.05fr;
    gap: 56px;
    align-items: center;
    margin-top: 44px;
}

.ac-gate__photo {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: var(--ac-radius-lg);
    box-shadow: var(--ac-shadow-md);
}

.ac-gate__steps {
    list-style: none;
    margin: 0;
    padding: 0;
    position: relative;
}

.ac-gate__step {
    position: relative;
    padding: 0 0 26px 52px;
}

.ac-gate__step:last-child {
    padding-bottom: 0;
}

/* Đường dọc nối 3 bước */
.ac-gate__step:not(:last-child)::before {
    content: "";
    position: absolute;
    left: 17px;
    top: 38px;
    bottom: 4px;
    width: 1px;
    background: var(--ac-border-strong);
}

.ac-gate__mark {
    position: absolute;
    left: 0;
    top: 2px;
    width: 35px;
    height: 35px;
    border-radius: 50%;
    background: var(--ac-white);
    border: 1px solid var(--ac-border-strong);
    color: var(--ac-primary-dark);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
}

.ac-gate__step:last-child .ac-gate__mark {
    background: var(--ac-primary);
    border-color: var(--ac-primary);
    color: #fff;
}

.ac-gate__step h3 {
    font-size: var(--ac-text-h3);
    font-weight: 700;
    margin: 4px 0 8px;
}

.ac-gate__step ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.ac-gate__step li {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    font-size: var(--ac-text-body);
    line-height: 1.55;
    color: var(--ac-muted);
}

.ac-gate__step li i {
    color: var(--ac-primary);
    font-size: 11px;
    margin-top: 5px;
    flex-shrink: 0;
}

.ac-gate__step li.is-off i {
    color: var(--ac-border-strong);
}


/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 991px) {
    /* Ảnh hero được vẽ dồn chủ thể sang phải — ở khổ hẹp kéo khung về giữa và
       chuyển scrim sang chiều dọc để chữ không nằm đè lên cây mầm. */
    .ac-stage__media {
        object-position: 68% 50%;
    }

    .ac-stage__scrim {
        background: linear-gradient(180deg, rgba(242, 247, 242, .96) 0%, rgba(242, 247, 242, .92) 52%, rgba(242, 247, 242, .58) 78%, rgba(242, 247, 242, .3) 100%);
    }

    .ac-stage__inner {
        padding: 56px 0 116px;
    }

    .ac-stage__copy {
        max-width: none;
    }

    .ac-finder__row {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .ac-finder__submit {
        grid-column: 1 / -1;
    }

    .ac-stages {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 12px 4px;
        margin-top: -30px;
    }

    .ac-stages__item::after {
        display: none;
    }

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

    .ac-step:nth-child(even) .ac-step__media {
        order: 0;
    }

    /* Ảnh chiếm trọn bề ngang ở khổ này nên thẻ vẫn nằm trong khung được thoải mái. */
    .ac-step__chip,
    .ac-step:nth-child(even) .ac-step__chip {
        left: 16px;
        right: auto;
        bottom: 16px;
        width: 300px;
    }

    .ac-journey {
        gap: 64px;
    }

    .ac-trust__grid {
        grid-template-columns: 1fr;
        gap: 32px;
    }

    .ac-gate {
        grid-template-columns: 1fr;
        gap: 36px;
    }

    .ac-band {
        min-height: 300px;
    }

    /* Chia đôi theo chiều ngang không còn chỗ ở khổ này — xếp ảnh trên, chữ dưới. */
    .ac-band--split {
        grid-template-columns: 1fr;
        min-height: 0;
    }

    .ac-band--split .ac-band__pane {
        min-height: 280px;
    }

    .ac-band--split .ac-band__panel {
        padding: 40px var(--ac-gutter);
    }

    .ac-band--split .ac-band__copy {
        max-width: none;
    }
}

@media (max-width: 767px) {
    .ac-stage__title {
        line-height: 1.14;
    }

    .ac-stage__features {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .ac-finder {
        padding: 18px;
        margin-top: -60px;
    }

    .ac-finder__row {
        grid-template-columns: 1fr;
    }

    .ac-stages {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        padding: 18px 8px;
    }

    .ac-issues {
        grid-template-columns: 1fr;
    }

    .ac-issues__item,
    .ac-issues__item:nth-child(even) {
        padding: 22px 0;
        border-right: none;
        padding-left: 0;
    }

    /* Dưới 768px ảnh chỉ còn ~340px ngang — thẻ phủ lên sẽ che gần hết chủ thể, nên tách
       hẳn xuống dưới ảnh. */
    .ac-step__chip,
    .ac-step:nth-child(even) .ac-step__chip {
        position: static;
        width: auto;
        max-width: none;
        margin-top: 14px;
        /* Ở đây thẻ không còn nằm trên ảnh mà trên nền mint của section — kính mờ mất tác dụng
           và chỉ làm thẻ bạc màu, nên trả về nền trắng đặc. */
        background: var(--ac-white);
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        border-color: var(--ac-border);
        box-shadow: var(--ac-shadow);
    }

    .ac-journey {
        gap: 52px;
    }

    .ac-trust__chart {
        padding: 16px 12px;
    }
}