/* ===================================================================
   Nam Hà Highfarm — CSS TRANG CHỦ (chỉ Default.aspx nạp)

   Bố cục theo docs/Home-page.png. Tiền tố `hm-` cho mọi class ở đây để không
   đụng tên với design system dùng chung (base · layout · components · pages).

   NGOẠI LỆ: các ô nhập của form RFQ dùng bộ `.rfq-*` và nút dùng `.btn-solid` /
   `.btn-ghost` — cả hai nằm ở components.css vì TRANG LIÊN HỆ dùng chung. Sửa hình thức
   ô nhập hay nút thì sửa bên đó; chép lại vào đây là hai trang lệch nhau ngay lần sau.

   Ba điều đã cân nhắc khi viết file này:

   1. Không hard-code mã màu — dùng biến ở tokens.css. Ngoại lệ duy nhất là các
      lớp phủ rgba() dựng từ màu chủ đạo: CSS thuần không nội suy alpha vào biến
      hex được, nên giá trị RGB của --c-primary-darker (#0b3220) và --c-ink
      (#183029) xuất hiện thành số ở vài chỗ. Đổi bảng màu thì phải rà lại.

   2. Sửa file này xong PHẢI tăng ?v=N ở Default.aspx, không thì trình duyệt vẫn
      dùng bản cũ.

   3. Nhịp bố cục luân phiên. Không section nào lặp lại khuôn của section liền trước,
      và không có hai section nào dùng chung một khuôn thẻ:

         hero tràn ảnh → dải icon → split 2 cột (ảnh trái) → lưới 4 thẻ dọc →
         split 2 cột (ảnh phải) → BĂNG ẢNH KÉO NGANG nền tối (thẻ dọc 3/4, chữ đè ảnh) →
         bảng mùa vụ → SPLIT LỆCH + thẻ NẰM NGANG (chứng nhận) → split thẻ tối + form →
         BĂNG THẺ TIN KÉO NGANG nền sáng (ảnh trên, chữ dưới).

      Hai băng kéo ngang không nằm liền nhau (cách nhau ba section) và khuôn thẻ khác hẳn
      nhau — vùng trồng là thẻ dọc chữ đè ảnh trên nền tối, tin tức là thẻ ảnh-trên-chữ-dưới
      trên nền sáng. Thêm băng kéo ngang thứ ba thì phải xem lại cả nhịp này.

      Nền cũng luân phiên: tối → trắng → trắng → be → trắng → XANH ĐẬM → be → XANH NHẠT →
      trắng → be. Thêm section mới thì phải kiểm lại cả hai chuỗi này, không thì trang
      trôi thành một dãy lưới thẻ giống hệt nhau.
   =================================================================== */

/* ============================================== KHUÔN CHUNG ======== */
.hm-title-center {
    font-family: var(--font-display);
    font-size: var(--fs-h2);
    font-weight: 700;
    color: var(--c-primary);
    text-align: center;
    margin: 0 0 12px;
    text-transform: capitalize;
}

.hm-sub-center {
    max-width: 62ch;
    margin: 0 auto 40px;
    text-align: center;
    color: var(--c-body);
}

/* Cấp chữ "statement" — giữa hero và h2. Không có cấp này thì thang chữ nhảy
   thẳng từ hero xuống h2 và phần giữa trang đọc rất phẳng. */
.hm-statement {
    font-family: var(--font-display);
    font-size: 32px;
    font-weight: 700;
    line-height: 1.22;
    color: var(--c-primary);
    margin: 0 0 16px;
    text-transform: capitalize;
    margin-top: 10px;
}

/* .btn-solid / .btn-ghost đã chuyển sang components.css (trang liên hệ dùng chung). */

/* Chỉ hiện với trình đọc màn hình. Bảng mùa vụ dùng để đọc được ô màu. */
.sr-only {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ============================================== 1. HERO ============ */
.hm-hero {padding: 5px 0 0;}
.hm-hero-shell .swiper-wrapper{border-radius: 20px;overflow: hidden;}
.hm-hero-shell {
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.hm-hero-slide {
    position: relative;
    min-height: 700px;
    display: flex;
    align-items: center;
    background: var(--c-primary-dark) center/cover no-repeat;
    height: 70vh;
}

/* Lớp phủ tối dần từ trái: chữ nằm ở 42% bên trái của ảnh (xem
   docs/brand/website-hero-slides/manifest.md). */
.hm-hero-veil {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(11, 50, 32, .88) 0%, rgba(11, 50, 32, .62) 42%, rgba(11, 50, 32, .12) 100%);
}

.hm-hero-inner {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 640px;
    padding: 50px 0;
}

.hm-hero-title {
    font-family: var(--font-display);
    font-size: 42px;
    font-weight: 700;
    line-height: 60px;
    text-transform: uppercase;
    color: var(--c-white);
    margin: 0 0 20px;
}

.hm-hero-lead {
    font-size: var(--fs-lead);
    line-height: 1.7;
    color: rgba(255, 255, 255, .9);
    margin: 0 0 30px;
}

.hm-hero-cta { display: flex; flex-wrap: wrap; gap: 14px; }

/* Chấm trang: Swiper mặc định đặt .swiper-pagination position:absolute qua selector
   `.swiper-horizontal > .swiper-pagination-bullets`. Muốn đổi phải viết ĐÚNG selector
   đó, nếu không luật ở đây thua độ ưu tiên và chấm trang nhảy về mặc định. */
.hm-hero-shell.swiper-horizontal > .swiper-pagination-bullets {/* bottom: -28px; */}
.hm-hero-shell .swiper-pagination-bullet {
    width: 10px;
    height: 10px;
    background: rgba(255, 255, 255, .55);
    opacity: 1;
    transition: width var(--t-fast), background var(--t-fast);
    border-radius: 50%;
}
.hm-hero-shell .swiper-pagination-bullet-active {
    width: 30px;
    border-radius: var(--radius-pill);
    background: var(--c-accent);
}

/* ============================================== 2. BA CAM KẾT ====== */
.hm-pledge { padding: clamp(36px, 4vw, 52px) 0 0; }

.hm-pledge-grid {
    display: grid;
    gap: 28px 36px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.hm-pledge-item { display: flex; gap: 18px; align-items: flex-start; }

.hm-pledge-icon {
    flex: 0 0 80px;
    width: 80px;
    height: 80px;
    padding: 10px;
    border-radius: 50%;
    background: var(--c-primary-mist);
    object-fit: contain;
}
/* Bản dự phòng khi mục con chưa có ảnh icon (RenderItemIcon trả về thẻ <i>) */
i.hm-pledge-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.75rem;
    color: var(--c-primary);
}

/* Thẻ là <h2> (xem RenderCommitments): dải cam kết không có tiêu đề section phía trên nên
   ba cam kết là khối cấp cao nhất. Cỡ chữ đặt ở đây, không lấy mặc định của <h2>. */
.hm-pledge-text h2 {
    font-family: var(--font-display);
    font-size: 16px;
    font-weight: 700;
    color: var(--c-primary);
    margin: 4px 0 8px;
}
.hm-pledge-text p {margin: 0;font-size: var(--fs-small);line-height: 1.5;color: var(--c-body);}

/* ============================================== 3. GIỚI THIỆU ====== */
.hm-about { padding: var(--sp-section) 0; }

.hm-about-grid {
    display: grid;
    gap: 50px;
    grid-template-columns: 1fr 1fr;
    align-items: center;
}

/* Hai ảnh lồng nhau. Ảnh phụ lấy từ ContentBlocks.SecondaryImageUrl; bỏ trống thì
   .has-pair không được thêm và ảnh chính chiếm trọn cột — bố cục vẫn đứng. */
.hm-about-media { position: relative; }
.hm-about-img-a,
.hm-about-img-b {
    display: block;
    width: 100%;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
    object-fit: cover;
}
.hm-about-img-a {}

.hm-about-media.has-pair {display: grid;grid-template-columns: 1fr 1fr;gap: 10px;}
.hm-about-media.has-pair .hm-about-img-a {width: 100%;}
.hm-about-media.has-pair .hm-about-img-b {margin-top: 49px;}

.hm-about-desc {margin-bottom: 20px;}
.hm-about-desc p {margin: 0 0 14px;line-height: 26px;color: var(--c-body);font-size: 16px;text-align: justify;}
.hm-about-desc p:last-child { margin-bottom: 0; }

.hm-value-list {display: grid;gap: 15px;margin-bottom: 32px;}
.hm-value { display: flex; gap: 18px; align-items: flex-start; }

.hm-value-icon {
    flex: 0 0 80px;
    width: 80px;
    height: 80px;
    object-fit: contain;
}
i.hm-value-icon {
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 1.5rem; color: var(--c-primary-soft);
}
.hm-value h3 {
    font-family: var(--font-display);
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--c-primary);
    margin: 2px 0 6px;
}
.hm-value p { margin: 0; font-size: var(--fs-small); line-height: 1.7; color: var(--c-body); }

/* ============================================== 4. NHÓM SẢN PHẨM === */
.hm-groups {
    padding: var(--sp-section) 0;
    background: var(--c-bg-soft);
}

.hm-group-grid {
    display: grid;
    gap: 26px;
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.hm-group-card {
    display: flex;
    flex-direction: column;
    background: var(--c-white);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    transition: transform var(--t), box-shadow var(--t);
}
.hm-group-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }

.hm-group-thumb { display: block; aspect-ratio: 4 / 3; overflow: hidden; }
.hm-group-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--t); }
.hm-group-card:hover .hm-group-thumb img { transform: scale(1.05); }

.hm-group-body { padding: 20px 22px 24px; display: flex; flex-direction: column; flex: 1 1 auto; }
.hm-group-body h3 {
    font-family: var(--font-display);
    font-size: 1.0625rem;
    font-weight: 700;
    margin: 0 0 10px;
}
.hm-group-body h3 a { color: var(--c-primary); }
.hm-group-body h3 a:hover { color: var(--c-primary-soft); }
.hm-group-body p {
    margin: 0 0 18px;
    font-size: var(--fs-small);
    line-height: 1.5;
    color: var(--c-body);
    flex: 1 1 auto;
}

.hm-group-link {
    align-self: flex-start;
    font-size: var(--fs-small);
    font-weight: 600;
    color: var(--c-primary);
    border-bottom: 1px solid currentColor;
    padding-bottom: 2px;
}
.hm-group-link:hover { color: var(--c-accent-dark); }

/* ============================================== 5. VÙNG NGUYÊN LIỆU  */
.hm-source { padding: var(--sp-section) 0; }

.hm-source-grid {
    display: grid;
    gap: 56px;
    grid-template-columns: 1fr 1.1fr;
    align-items: center;
}

.hm-source-lead {margin: 0 0 34px;color: var(--c-body);line-height: 1.75;font-size: 14px;line-height: 20px;}

.hm-criteria { display: grid; gap: 26px; }
.hm-criterion { display: flex; gap: 20px; align-items: flex-start; }

/* Ô icon vuông nền vàng nhạt — điểm khác biệt so với icon tròn ở section 2,
   để hai dải icon không đọc như cùng một khuôn. */
.hm-criterion-icon {
    flex: 0 0 80px;
    width: 80px;
    height: 80px;
    padding: 5px;
    border-radius: var(--radius-lg);
    background: var(--c-accent-soft);
    object-fit: contain;
}
i.hm-criterion-icon {
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 1.5rem; color: var(--c-accent-dark);
}

.hm-criterion h3 {
    font-family: var(--font-display);
    font-size: 1.0625rem;
    font-weight: 700;
    color: var(--c-primary);
    margin: 0px 0 6px;
}
.hm-criterion p {margin: 0;font-size: var(--fs-small);line-height: 1.5;color: var(--c-body);}

.hm-source-media img {
    display: block;
    width: 100%;
    aspect-ratio: 1 /1;
    object-fit: cover;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
}

/* ======================================== 5b. CÁC VÙNG TRỒNG ======== */
/* Băng ảnh kéo ngang, MỖI THẺ LÀ MỘT BÀI VIẾT của danh mục "Vùng nguyên liệu".
   Khuôn cố ý khác hai lưới thẻ đã có (nhóm sản phẩm, tin tức): thẻ DỌC 3/4, chữ ĐÈ lên ảnh,
   nền tối, thẻ kế tiếp ló ra ở mép để người xem biết còn kéo được.
   Markup do Default.aspx.cs → RenderRegions() sinh — đọc hàm đó trước khi đổi selector. */
.hm-region {
    padding: var(--sp-section) 0;
    background-color: var(--c-primary-darker);
    /* Vệt sáng chéo rất nhẹ để mảng tối không phẳng lì. Giá trị RGB lấy từ --c-primary-soft
       (#2f7d4c) vì CSS thuần không nội suy alpha vào biến hex được. */
    background-image: linear-gradient(128deg, rgba(47, 125, 76, .38) 0%, rgba(47, 125, 76, 0) 58%);
}

.hm-region-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 32px;
    margin-bottom: var(--sp-block);
}
.hm-region-heading { max-width: 60ch; }
.kicker-light { color: var(--c-accent); }
.hm-statement-light { color: var(--c-white); }
.hm-region-lead {
    margin: 0;
    color: rgba(255, 255, 255, .76);
    line-height: 1.75;
}

.hm-region-tools {
    display: flex;
    align-items: center;
    gap: 22px;
    flex: 0 0 auto;
    padding-bottom: 4px;
}
.hm-region-all {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-weight: 600;
    font-size: var(--fs-small);
    color: var(--c-accent);
    white-space: nowrap;
    display: none;
}
.hm-region-all:hover { color: var(--c-white); }

.hm-region-nav { display: flex; gap: 10px; }
/* Nút của Swiper mặc định là mũi tên ::after cỡ lớn, định vị tuyệt đối giữa slider.
   Ở đây nút nằm trên hàng tiêu đề nên phải gỡ hết định vị mặc định đó. */
.hm-region-btn {
    position: static;
    width: 40px;
    height: 40px;
    margin: 0;
    padding: 10px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, .34);
    background: transparent;
    color: var(--c-white);
    transition: background var(--t-fast), border-color var(--t-fast), color var(--t-fast);
}
.hm-region-btn::after {
    font-size: 15px;
    font-weight: 700;
}
.hm-region-btn:hover {
    background: var(--c-accent);
    border-color: var(--c-accent);
    color: var(--c-primary-darker);
}
.hm-region-btn.swiper-button-disabled { opacity: .32; cursor: default; }

/* components.css cho MỌI .js-swiper padding ngang 30px để chừa chỗ cho bóng đổ khi thẻ
   nâng lên. Băng này không có hiệu ứng nâng, và 30px đó đẩy thẻ lệch khỏi lề của tiêu đề
   ngay bên trên — bỏ đi cho hai khối thẳng lề nhau. */
.hm-region-rail { padding: 0; overflow: hidden; }

.hm-region-card {
    position: relative;
    display: block;
    aspect-ratio: 3 / 4;
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: rgba(255, 255, 255, .06);
}
.hm-region-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .5s var(--ease);
}
.hm-region-card:hover .hm-region-img { transform: scale(1.06); }

.hm-region-noimg {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    color: rgba(255, 255, 255, .3);
}

/* Lớp phủ đáy: chữ trắng phải đọc được trên MỌI ảnh, kể cả ảnh sáng. Giá trị RGB lấy từ
   --c-primary-darker (#0b3220). */
.hm-region-veil {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg,
        rgba(11, 50, 32, 0) 30%,
        rgba(11, 50, 32, .55) 58%,
        rgba(11, 50, 32, .92) 100%);
    bottom: -1px;
}

.hm-region-body {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 22px 22px 20px;
    color: var(--c-white);
}
/* <h3> và <p> thật -> phải gỡ margin mặc định của trình duyệt, nếu không khoảng cách
   trong thẻ do margin quyết định chứ không phải `gap` của .hm-region-body. */
.hm-region-name {
    font-family: var(--font-display);
    font-size: 1.1875rem;
    font-weight: 700;
    line-height: 1.3;
    margin: 0;
    color: var(--c-white);
}
.hm-region-desc {
    margin: 0;
    font-size: var(--fs-small);
    line-height: 1.6;
    color: rgba(255, 255, 255, .82);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.hm-region-go {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    margin-top: 6px;
    border-radius: 50%;
    background: var(--c-accent);
    color: var(--c-primary-darker);
    font-size: .8125rem;
    transition: transform var(--t-fast);
}
.hm-region-card:hover .hm-region-go { transform: translateX(5px); }

/* ============================================== 6. LỊCH MÙA VỤ ===== */
.hm-season {
    position: relative;
    padding: var(--sp-section) 0;
    background: var(--c-bg-soft) center/cover no-repeat;
}
/* Ảnh nền chỉ là vân mờ — chữ trong bảng phải đọc được nên phủ lớp sáng lên trên. */
.hm-season::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(247, 248, 244, .9);
}
.hm-season > .container { position: relative; z-index: 1; }

/* Bảng 13 cột trên điện thoại phải cuộn ngang TRONG khung, không đẩy cả trang.

   `overflow-x: auto` MỘT MÌNH KHÔNG ĐỦ ở đây — đã đo trên thiết bị 375px: bảng
   (min-width 760px) vẫn thoát ra ngoài và làm `documentElement.scrollWidth` lên 726,
   tức là cả trang cuộn ngang. Thêm `contain: paint` thì về đúng 375.
   Đo lại bằng: documentElement.scrollWidth phải BẰNG clientWidth ở mọi bề rộng. */
.hm-season-scroll {
    overflow-x: auto;
    contain: paint;
    padding-bottom: 6px;
}

.hm-season-table {
    width: 100%;
    min-width: 760px;
    border-collapse: separate;
    border-spacing: 0;
}

.hm-season-table th,
.hm-season-table td { padding: 0; }

/* Ô tháng ở hàng tiêu đề */
.hm-season-month { width: calc((100% - 220px) / 12); padding: 0 3px 14px; }
.hm-season-month span {
    display: block;
    padding: 9px 4px;
    border-radius: 15px 15px 0 0;
    background: var(--c-primary);
    color: var(--c-white);
    font-size: .75rem;
    font-weight: 600;
    text-align: center;
    white-space: nowrap;
    border: 1px solid;
    padding-left: 10px;
    padding-right: 10px;
}

/* Cột tên mặt hàng.
   base.css đặt `img { display: block }` cho toàn site, nên ảnh mặt hàng bị xuống dòng
   riêng và đẩy tên xuống dưới. Dùng flex ở ô thay vì trông chờ vào inline-block. */
.hm-season-name {
    width: 220px;
    text-align: left;
    font-weight: 600;
    padding: 10px 16px 10px 0;
    border-bottom: 1px solid var(--c-line);
    vertical-align: middle;
}
thead .hm-season-name { border-bottom: 0; }
/* display:flex đặt thẳng lên <th> sẽ đưa ô ra khỏi bố cục bảng và cột lệch khỏi hàng
   tiêu đề tháng. Bọc nội dung trong một <span> rồi flex cái span đó. */
.hm-season-name-inner {display: flex;align-items: center;gap: 12px;min-height: 62px;margin-right: 10px;}
.hm-season-name a {color: var(--c-ink);font-size: 14px;white-space: nowrap;}
.hm-season-name a:hover { color: var(--c-primary); }
.hm-season-pic {
    flex: 0 0 40px;
    width: 40px; height: 40px;
    object-fit: contain;
}

/* Ô tháng: cả hàng ghép lại thành một thanh ngang liền mạch */
.hm-season-cell {
    border-bottom: 1px solid var(--c-line);
    vertical-align: middle;
}
.hm-season-cell::after {
    content: "";
    display: block;
    height: 14px;
    background: transparent;
}
.hm-season-cell.is-supply::after { background: var(--c-line); }
.hm-season-cell.is-peak::after { background: var(--c-accent); }

/* Bo tròn hai đầu thanh: ô có màu mà ô liền trước/sau không có màu */
.hm-season-cell.is-supply:first-of-type::after,
.hm-season-cell.is-peak:first-of-type::after,
.hm-season-cell.is-off + .hm-season-cell.is-supply::after,
.hm-season-cell.is-off + .hm-season-cell.is-peak::after { border-radius: var(--radius-pill) 0 0 var(--radius-pill); }
.hm-season-cell.is-supply:last-child::after,
.hm-season-cell.is-peak:last-child::after { border-radius: 0 var(--radius-pill) var(--radius-pill) 0; }
.hm-season-cell.is-supply:has(+ .hm-season-cell.is-off)::after,
.hm-season-cell.is-peak:has(+ .hm-season-cell.is-off)::after { border-radius: 0 var(--radius-pill) var(--radius-pill) 0; }

.hm-season-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 32px;
    margin-top: 26px;
    font-size: var(--fs-small);
    color: var(--c-body);
}
.hm-season-legend span { display: inline-flex; align-items: center; gap: 10px; }
.hm-key {width: 30px;height: 14px;border-radius: var(--radius-pill);display: inline-block;}
.hm-key.is-supply { background: var(--c-line); }
.hm-key.is-peak { background: var(--c-accent); }

.hm-season-note {
    margin: 16px 0 0;
    font-size: var(--fs-small);
    color: var(--c-muted);
    max-width: 100%;
}

/* ======================================== 6b. CHỨNG NHẬN =========== */
/* Split LỆCH: cột dẫn hẹp bên trái (dính khi cuộn) + danh sách hồ sơ bên phải.
   Thẻ ở đây NẰM NGANG (ảnh giấy tờ trái — dữ kiện phải), là khuôn duy nhất kiểu này trên
   trang chủ; mọi lưới thẻ khác đều ảnh-trên-chữ-dưới. Cố ý, xem ghi chú nhịp bố cục ở đầu file.
   Markup do Default.aspx.cs → RenderCertificates() sinh. */
.hm-cert {
    padding: var(--sp-section) 0;
    background: var(--c-primary-mist);
}

.hm-cert-grid {
    display: grid;
    grid-template-columns: minmax(0, 4.2fr) minmax(0, 7.8fr);
    gap: clamp(32px, 4vw, 56px);
    align-items: start;
}

.hm-cert-intro {
    /* Dính lại khi danh sách hồ sơ cuộn qua — cột trái ngắn hơn cột phải khá nhiều. */
    position: sticky;
    top: calc(var(--header-h) + 24px);
}
.hm-cert-lead {margin: 0 0 20px;color: var(--c-body);line-height: 24px;font-size: 14px;}

.hm-cert-count {
    display: flex;
    align-items: baseline;
    gap: 12px;
    margin: 0 0 26px;
    padding-top: 20px;
    border-top: 1px solid var(--c-line);
    align-items: center;
}
.hm-cert-count strong {
    font-family: var(--font-display);
    font-size: 2.5rem;
    line-height: 1;
    font-weight: 700;
    color: var(--c-accent);
}
.hm-cert-count span {
    font-size: var(--fs-small);
    color: var(--c-muted);
    max-width: 16ch;
}

.hm-cert-list { display: grid; gap: 18px; }

.hm-cert-row {
    display: grid;
    grid-template-columns: 135px minmax(0, 1fr);
    gap: 20px;
    padding: 10px;
    background: var(--c-white);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    transition: transform var(--t), box-shadow var(--t);
}
.hm-cert-row:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
/* Mục chưa có ảnh: cột ảnh biến mất, phần chữ chiếm cả dòng thay vì để ô trống. */
.hm-cert-row:not(:has(.hm-cert-doc)) { grid-template-columns: minmax(0, 1fr); }

/* Ô ảnh giấy tờ: viền mảnh + bóng nhẹ cho ra dáng tờ giấy, cắt từ MÉP TRÊN để phần
   tiêu đề của chứng nhận luôn nhìn thấy. */
.hm-cert-doc {
    position: relative;
    display: block;
    aspect-ratio: 3 / 4;
    border-radius: var(--radius);
    overflow: hidden;
    border: 1px solid var(--c-line);
    background: var(--c-bg-soft);
    box-shadow: var(--shadow-sm);
}
.hm-cert-doc img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
}
.hm-cert-zoom {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    /* RGB của --c-primary-darker (#0b3220) — CSS thuần không nội suy alpha vào biến hex. */
    background: rgba(11, 50, 32, .55);
    color: var(--c-white);
    font-size: 1.125rem;
    opacity: 0;
    transition: opacity var(--t-fast);
}
.hm-cert-doc:hover .hm-cert-zoom,
.hm-cert-doc:focus-visible .hm-cert-zoom { opacity: 1; }

.hm-cert-body { min-width: 0; }
.hm-cert-name {
    font-family: var(--font-display);
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.3;
    color: var(--c-primary);
    margin: 0 0 4px;
    font-family: "Inter", sans-serif;
}
.hm-cert-sub {
    margin: 0 0 5px;
    font-size: var(--fs-small);
    line-height: 1.6;
    color: var(--c-muted);
    font-family: "Inter", sans-serif;
}

/* Bảng dữ kiện: nhãn nhỏ in hoa ở trên, giá trị ở dưới. Dùng <dl> thật chứ không phải div —
   "Số hiệu / 2506158.FMS.CN25" là cặp thuật ngữ–định nghĩa, trình đọc màn hình cần cặp đó. */
.hm-cert-facts {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px 20px;
    margin: 0;
    padding-top: 14px;
    border-top: 1px solid var(--c-line-soft);
    font-family: "Inter", sans-serif;
}
.hm-cert-fact { min-width: 0; }
.hm-cert-fact:last-child{display:none}
.hm-cert-fact dt {
    font-size: var(--fs-kicker);
    font-weight: 700;
    text-transform: uppercase;
    color: var(--c-muted);
    margin-bottom: 3px;
    white-space: nowrap;
}
.hm-cert-fact dd {
    margin: 0;
    font-size: 14px;
    line-height: 1.5;
    color: var(--c-ink);
    font-weight: 600;
}

/* ============================================== 7+8. QUY TRÌNH + RFQ */
.hm-flow { padding: var(--sp-section) 0; }

.hm-flow-grid {
    display: grid;
    gap: 56px;
    grid-template-columns: 1fr 1.05fr;
    align-items: start;
}
/* Thiếu một trong hai khối -> khối còn lại chiếm cả hàng */
.hm-flow-grid.is-single { grid-template-columns: 1fr; }

/* ---- Thẻ tối "Quy trình 5 bước" ---- */
.hm-process {
    position: relative;
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: var(--c-primary-darker) center/cover no-repeat;
    padding: clamp(32px, 4vw, 48px);
    height: 100%;
    background-position: center bottom;
}
.hm-process-veil {
    position: absolute;
    inset: 0;
    /* background: linear-gradient(180deg, rgba(11, 50, 32, .93) 0%, rgba(11, 50, 32, .82) 100%); */
}
.hm-process-inner { position: relative; z-index: 1; }

.hm-process-title {
    font-family: var(--font-display);
    font-size: var(--fs-statement);
    font-weight: 700;
    line-height: 1.25;
    color: var(--c-white);
    margin: 45px 0 45px;
}

.hm-steps { list-style: none; margin: 0; padding: 0; }

/* Đường nối dọc giữa các số thứ tự: vẽ bằng ::before của <li>, không phải phần tử
   thật, nên thêm/bớt bước trong Admin là đường nối tự dài ra hoặc ngắn lại. */
.hm-step {
    position: relative;
    display: flex;
    align-items: center;
    gap: 18px;
    padding-bottom: 30px;
}
.hm-step:last-child { padding-bottom: 0; }
.hm-step:not(:last-child)::before {
    content: "";
    position: absolute;
    left: 23px;
    top: 59px;
    bottom: -15px;
    width: 1px;
    background: rgb(255 255 255);
}

.hm-step-no {
    flex: 0 0 48px;
    width: 48px;
    height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--c-accent);
    color: var(--c-primary-darker);
    font-weight: 700;
    font-size: .9375rem;
    z-index: 1;
    border: 2px solid #fff;
    font-family: "Inter", sans-serif;
}

/* Vạch ngang nối số với thẻ trắng */
.hm-step-card {
    position: relative;
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    gap: 14px;
    margin-left: 24px;
    padding: 10px 22px;
    background: var(--c-white);
    border-radius: var(--radius);
}
.hm-step-card::before {
    content: "";
    position: absolute;
    left: -42px;
    top: 50%;
    width: 45px;
    height: 1px;
    background: rgb(255 255 255);
}

.hm-step-icon {width: 50px;height: 50px;object-fit: contain;flex: 0 0 26px;}
i.hm-step-icon {
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 1.125rem; color: var(--c-primary);
}
.hm-step-name {font-weight: 600;color: var(--c-ink);font-size: 18px;}

/* ---- Form yêu cầu báo giá ---- */
.hm-rfq-title {
    font-family: var(--font-display);
    font-size: var(--fs-statement);
    font-weight: 700;
    line-height: 1.25;
    color: var(--c-primary);
    margin: 0 0 14px;
}
.hm-rfq-lead {margin: 0 0 20px;color: var(--c-body);line-height: 1.7;}
/* Các ô nhập của form này dùng bộ .rfq-* DÙNG CHUNG ở components.css — trang liên hệ
   dùng lại đúng bộ đó. Sửa hình thức ô nhập thì sửa ở components.css, đừng chép lại đây. */
.hm-rfq-msg { margin: 16px 0 0; font-size: var(--fs-small); }
.hm-rfq-msg.is-ok { color: var(--c-success); }
.hm-rfq-msg.is-error { color: var(--c-danger); }

/* ============================================== 9. TIN TỨC ========= */
.hm-news { padding: 0 0 var(--sp-section); }

.hm-news-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 30px;
}
.hm-news-head .hm-statement { margin: 0; }

.hm-news-tools {
    display: flex;
    align-items: center;
    gap: 22px;
    flex: 0 0 auto;
}

.hm-news-all {
    font-size: var(--fs-small);
    font-weight: 600;
    color: var(--c-primary);
    border-bottom: 1px solid currentColor;
    padding-bottom: 2px;
    white-space: nowrap;
}
.hm-news-all:hover { color: var(--c-accent-dark); }

/* Nút điều hướng của băng tin. Giống .hm-region-btn nhưng section này nền SÁNG nên
   giữ nguyên nút trắng viền xám của components.css, chỉ gỡ định vị tuyệt đối mặc định
   của Swiper (mũi tên to đè giữa slider) để nút đứng được trên hàng tiêu đề. */
.hm-news-nav { display: flex; gap: 10px; }
.hm-news-btn {
    position: static;
    width: 40px;
    height: 40px;
    margin: 0;
    padding: 10px;
}
.hm-news-btn::after { font-size: 15px; font-weight: 700; }
.hm-news-btn.swiper-button-disabled { opacity: .32; cursor: default; }

/* components.css cho MỌI .js-swiper padding ngang 30px để chừa chỗ cho bóng đổ khi thẻ
   nâng lên. Thẻ tin không có hiệu ứng nâng, và 30px đó đẩy băng lệch khỏi lề của tiêu đề
   ngay bên trên — bỏ đi cho hai khối thẳng lề nhau (giống .hm-region-rail). */
.hm-news-rail { padding: 0; overflow: hidden; }
/* .news-card cao 100%: cho slide cao bằng nhau thì thẻ trong slide mới kéo dài theo,
   nếu không thẻ ít chữ sẽ thấp hơn và hàng nút "Xem chi tiết" so le. */
.hm-news-rail .swiper-slide { height: auto; }

/* Thẻ tin dùng bộ .news-card* DÙNG CHUNG ở components.css — trang danh sách, trang chi tiết
   và trang tìm kiếm dùng đúng bộ đó. Ở đây chỉ còn phần LƯỚI phía trên.

   ĐỪNG đè lại .news-card* trong file này: trước 31/08/2026 nó bị đè ở đây nên cùng một thẻ
   trông khác nhau giữa trang chủ và trang con, không có lỗi nào báo ra. Muốn đổi hình thức
   thẻ thì sửa ở components.css. */

/* ============================================== RESPONSIVE ========= */
@media (max-width: 1199.98px) {
    .hm-group-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 991.98px) {
    .hm-pledge-grid { grid-template-columns: 1fr; gap: 22px; }
    .hm-about-grid,
    .hm-source-grid,
    .hm-cert-grid,
    .hm-flow-grid { grid-template-columns: 1fr; gap: 36px; }
    /* Một cột thì không còn gì để dính vào — bỏ sticky, nếu không cột dẫn kẹt lại
       giữa màn hình khi cuộn qua danh sách hồ sơ. */
    .hm-cert-intro { position: static; }
    /* Ảnh xuống dưới chữ ở section vùng nguyên liệu, giữ thứ tự đọc chữ trước */
    .hm-source-media { order: 2; }
    .hm-hero-inner { max-width: none; }
}

@media (max-width: 767.98px) {
    /* Đầu section vùng trồng: chữ và cụm nút xếp dọc, nút dồn sang trái cho thẳng lề. */
    .hm-region-head { flex-direction: column; align-items: flex-start; gap: 20px; }
    .hm-region-tools { padding-bottom: 0; }
    /* Thẻ chứng nhận: ảnh giấy tờ lên trên, thu nhỏ lại để không chiếm hết màn hình. */
    .hm-cert-row {/* grid-template-columns: 1fr; */gap: 10px;}
    .hm-cert-doc { width: 108px; }
    .hm-cert-facts {grid-template-columns: 1fr;gap: 6px;padding-top: 3px;}
    .hm-about-media.has-pair { padding-bottom: 0; }
    .hm-about-media.has-pair .hm-about-img-a {width: 100%;height: 300px;}
    /* Ảnh phụ chồng lên nhau ở màn hình hẹp thì che mất ảnh chính -> xếp dọc */
    .hm-about-media.has-pair .hm-about-img-b {
        position: static;
        width: 100%;
        margin-top: 16px;
        border: 0;
        height: 300px;
    }
    .hm-group-grid { grid-template-columns: 1fr; }
    /* Băng tin: tiêu đề và cụm công cụ xếp dọc, giống đầu section vùng trồng ở trên. */
    .hm-news-head { flex-direction: column; align-items: flex-start; gap: 14px; }
    .hm-hero-slide {min-height: 460px;height: auto;}
}