/* ==========================================================================
   GIAO DIỆN MOBILE (≤ 640px)
   --------------------------------------------------------------------------
   Nạp SAU cùng nên không cần !important để ghi đè.
   Nguyên tắc:
     1. Không phần tử nào được tràn khỏi bề rộng màn hình.
     2. Bảng dữ liệu xếp DỌC (nhãn trên, giá trị dưới) thay vì 2 cột bị bóp.
     3. Mọi vùng chạm tối thiểu 44x44px (chuẩn Apple HIG / Material).
     4. Cỡ chữ tối thiểu 12px; ô nhập liệu 16px để iOS không tự phóng to.
     5. Chừa chỗ cho thanh điều hướng đáy + vùng an toàn máy có tai thỏ.
   ========================================================================== */

@media (max-width: 640px) {

/* ==========================================================================
   0. NỀN TẢNG
   ========================================================================== */
:root {
    --tabbar-h: 58px;
}

body {
    /* chừa chỗ cho thanh tab đáy + vùng an toàn iPhone */
    padding-bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom, 0px));
}

/* Khung giả lập desktop không còn ý nghĩa trên điện thoại; đệm 24px mỗi bên
   của nó đang ăn mất 48px bề rộng nội dung. Ép về 0. */
body.v7-liquid-glass .simulator-wrapper,
.simulator-wrapper {
    padding: 0 !important;
    margin: 0 !important;
}

/* Chặn mọi thứ tràn ngang ở gốc */
.app-body,
.app-section,
.hero-section {
    max-width: 100%;
    overflow-x: clip;
}

/* ==========================================================================
   1. HEADER GỌN LẠI  (81px -> 56px)
   ========================================================================== */
.app-header {
    height: 56px;
    min-height: 56px;
    padding: 0 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.app-logo img {
    height: 34px !important;   /* ghi đè inline style trong index.html */
    max-height: 34px !important;
    width: auto !important;
}

.app-nav {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

/* nút đổi giao diện: đủ lớn để chạm.
   Cần độ ưu tiên cao hơn body.v7-liquid-glass .theme-toggle (đang ép width 40px) */
body.v7-liquid-glass .app-nav .theme-toggle,
.app-nav .theme-toggle {
    width: 44px;
    height: 44px;
    padding: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* "Đăng nhập" đang bị bóp còn 0x0 -> ẩn hẳn cho có chủ đích,
   chỉ giữ nút chính để không vỡ hàng */
.app-nav .btn-header:not(.btn-header-primary) {
    display: none;
}

.app-nav .btn-header-primary {
    height: 44px;
    min-height: 44px;
    padding: 0 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;       /* không cho chữ vỡ 2 dòng */
    font-size: 13px;
    line-height: 1;
    flex-shrink: 0;
}

/* ==========================================================================
   2. SỬA TRÀN KHUNG Ở KHỐI XÁC THỰC  (lỗi nặng nhất: tràn 42px trái + 43px phải)
   ========================================================================== */
.verify-banner-main-top {
    display: flex;             /* bỏ grid 0.9fr/1.3fr của desktop */
    flex-direction: column;
    align-items: center;
    gap: 16px;
    padding: 18px 16px;
    width: 100%;
}

.verify-body-left-shield-block {
    width: 100%;
    display: flex;
    flex-direction: row;       /* khiên + sao nằm ngang cho đỡ tốn chiều cao */
    align-items: center;
    justify-content: center;
    gap: 14px;
    margin: 0;
    padding: 0;
    transform: none;           /* huỷ mọi dịch chuyển gây tràn của desktop */
}

.verify-body-left-shield-block .trust-shield {
    margin: 0;
    transform: none;
    flex-shrink: 0;
}

.shield-rating-box {
    margin: 0;
    transform: none;
}

/* 4 chỉ số: bỏ cột cố định 150px 150px (=344px, tràn màn 375px) */
.verify-col-metrics {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px 12px;
    width: 100%;
    padding: 0;
    margin: 0;
}

.verify-metric-item {
    min-width: 0;              /* cho phép co lại, chặn tràn grid */
}

.verify-metric-item .metric-val,
.verify-metric-item .metric-num {
    font-size: 20px;
    line-height: 1.15;
    word-break: break-word;
}

.verify-metric-item .metric-text,
.verify-metric-item .metric-label {
    font-size: 12px;
    line-height: 1.3;
}

.verify-banner-header-text {
    font-size: 13px;
    line-height: 1.45;
}

/* ==========================================================================
   3. MÃ TRUY XUẤT — đang bị cắt mất đuôi
   ========================================================================== */
.trace-code-bar,
.sub-bar-code-group {
    flex-wrap: wrap;
    gap: 6px 8px;
    width: 100%;
    min-width: 0;
}

.code-label {
    font-size: 12px;
    white-space: nowrap;
}

.code-val {
    font-size: 12px;
    word-break: break-all;     /* cho phép xuống dòng giữa mã, không cắt mất */
    min-width: 0;
    flex: 1 1 100%;
}

.qr-scan-count {
    font-size: 12px;
}

/* ==========================================================================
   4. BẢNG DỮ LIỆU: XẾP DỌC THAY VÌ 2 CỘT BỊ BÓP
   Trước: nhãn 140px + giá trị ~160px -> giá trị vỡ 3-5 dòng.
   Sau  : nhãn một dòng, giá trị một dòng, dùng trọn bề rộng.
   ========================================================================== */
.event-field-row {
    flex-direction: column;
    gap: 1px;
    margin-top: 8px;
}

.event-field-key {
    min-width: 0;
    font-size: 11.5px;
    line-height: 1.3;
}

.event-field-val {
    font-size: 13px;
    line-height: 1.4;
    word-break: break-word;
}

/* Đầu thẻ sự kiện: cột thời gian đang ăn ~120px làm tiêu đề bị bóp vỡ 2 dòng.
   Trên mobile cho thời gian xuống dưới, tiêu đề dùng trọn bề rộng. */
.event-head-row {
    flex-direction: column;
    gap: 2px;
}

.event-head-time {
    font-size: 12px;
    order: -1;                 /* thời gian lên trên, như dòng ngày của bài đăng */
    color: #64748b;
}

.event-head-title {
    font-size: 15px;
    line-height: 1.3;
}

.event-head-actor {
    font-size: 12.5px;
    line-height: 1.35;
}

/* chân thẻ: "Blockchain Verified" + link chứng chỉ hay vỡ dòng khi đứng cạnh nhau */
.event-foot-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
}

/* các lưới nhãn/giá trị khác cũng xếp dọc */
.roadmap-fields-grid,
.drawer-field-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
}

/* ==========================================================================
   5. VÙNG CHẠM TỐI THIỂU 44px
   ========================================================================== */
.btn-trace-more,
.supply-view-btn,
.trace-tab-btn,
.dish-card,
.sc-detail-close {
    min-height: 44px;
}

.sc-detail-close {
    min-width: 44px;
}

/* liên kết "Xem chứng chỉ điện tử" lặp lại nhiều lần trong timeline */
.roadmap-event-card a[href],
.event-cert-link {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
}

/* mũi tên chuyển ảnh chứng nhận (28x28) và hàng lọc sao đánh giá (cao 16px) */
/* styles.css đặt width/height 28px, mobile-first.css đặt flex-basis 28px.
   Phải đè cả ba thuộc tính mới đủ 44x44. */
.cert-arrow-btn {
    flex: 0 0 44px !important;
    width: 44px !important;
    height: 44px !important;
}

.rating-bar-row {
    min-height: 44px;
    align-items: center;
    gap: 10px;
}

/* nhãn "5 ★" có width:24px inline — với cỡ chữ 12px sẽ vỡ 2 dòng */
.rating-bar-label {
    width: auto !important;
    min-width: 34px;
    white-space: nowrap;
    flex-shrink: 0;
}

.rating-bar-count {
    min-width: 38px;
    text-align: right;
    flex-shrink: 0;
}

/* nút chọn số sao khi gửi đánh giá (16x19 -> khó chạm trúng) */
.star-picker-btn {
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
}

/* nút Thích / Trả lời dưới mỗi đánh giá (đang cao 14px) */
.fb-action-btn {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    padding: 0 6px;
}

/* dải mã truy xuất */
.verify-code-pill-bar {
    min-height: 44px;
    align-items: center;
}

/* huy hiệu chứng thư trong quy trình chế biến (86x33, 149x37) + link nhỏ */
.w3c-vc-badge,
.onchain-pill {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
}

.recipe-step-card a[href] {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
}

/* ô nhập captcha có width:76px + padding nhỏ viết inline -> 76x30 */
/* mobile-first.css ép height:30px !important cho ô này -> phải đè bằng !important */
.captcha-question-box,
#review-form-captcha {
    min-height: 44px !important;
    height: 44px !important;
}

#review-form-captcha {
    width: 92px !important;
    padding: 8px 10px !important;
    font-size: 16px !important;      /* chặn iOS tự phóng to trang */
}

/* nốt các huy hiệu/pill nhỏ đã xác định được */
.stage-badge,
.recipe-step-code-badge,
.w3c-vc-badge,
.pill-hash,
.onchain-pill {
    font-size: 11.5px;
}

/* nút phóng to/thu nhỏ bản đồ Leaflet mặc định chỉ 30x30 */
.leaflet-control-zoom a {
    width: 44px !important;
    height: 44px !important;
    line-height: 44px !important;
    font-size: 20px !important;
}

/* nốt các vùng chạm còn 30-42px */
.form-input,
.captcha-input {
    min-height: 44px;
}

.btn-close-drawer,
.btn-copy-code {
    min-width: 44px;
    min-height: 44px;
}

.responsive-hash-box {
    min-height: 44px;
    align-items: center;
}

/* ==========================================================================
   6. CỠ CHỮ AN TOÀN
   ========================================================================== */
/* Cần bám đúng selector gốc để thắng độ ưu tiên
   (vd .code-pill-left .code-label = 0,2,0 > .code-label = 0,1,0). */
.verify-body-left-shield-block .trust-shield-label,
.trust-shield-label,
.journey-step-attp,
.blockchain-hash,
.qr-scan-count,
.code-pill-left .code-label,
.code-pill-left .code-val,
.code-label,
.code-val,
.event-fields-container strong,
.event-fields-container span,
.journey-step-meta,
.recipe-meta-label,
.recipe-meta-val,
.cert-vertical-meta,
.cert-vertical-meta strong {
    font-size: 12px;
}

/* Mục Đánh giá: nhiều nhãn đang 8-11px, quá nhỏ để đọc trên điện thoại.
   (Không đụng con dấu chứng nhận 6px - đó là hình trang trí mô phỏng giấy tờ.) */
.average-score-label,
.rating-bar-label,
.rating-bar-count,
.review-stars,
.fb-comment-date,
.fb-like-count,
.form-label,
.field-label,
.event-foot-verified,
.event-cert-link,
.gotrace-drawer-close {
    font-size: 12px;
}

/* vùng chạm còn sót */
.gotrace-drawer-close {
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

input.form-input,
input[type="text"],
input[type="email"],
input[type="number"] {
    min-height: 44px;
}

/* Nốt các nhãn nhỏ còn lại đã nhận diện được nội dung cụ thể:
   "Thích" (nút tương tác), "Nguyên liệu"/"Verified" (nhãn thẻ), "★★★★★",
   "Powered by", "Blockchain:", dòng bản quyền. */
.fb-action-btn span,
.dish-ing-name,
.graph-node-verified,
.app-footer,
.app-footer div,
.review-stars span,
.rating-stars-container span,
.tech-spec-label,
.tech-spec-row strong {
    font-size: 12px !important;
}

/* SÀN KHẢ ĐỌC — dùng !important có chủ đích.
   Đây là ràng buộc khả dụng (không chữ nào dưới 12px trên điện thoại), không
   phải trang trí; nó PHẢI thắng mọi quy tắc cụ thể hơn của desktop.
   Loại trừ: con dấu/giấy chứng nhận mô phỏng - cố tình nhỏ để giống giấy tờ. */
:is(
    .review-stars, .fb-comment-date, .fb-like-count, .form-label, .field-label,
    .average-score-label, .rating-bar-label, .rating-bar-count,
    .event-cert-link, .event-foot-verified,     .journey-step-meta, .recipe-meta-label, .recipe-meta-val
):not(.cert-seal *) {
    font-size: 12px !important;
}

/* Thẻ "Sơ đồ tổng quan" vốn thiết kế cho mật độ desktop (9-10.5px).
   Trên điện thoại mỗi hàng chỉ 1-2 thẻ nên có thừa chỗ để phóng chữ. */
.sc-tree-card {
    flex: 1 1 100%;
    max-width: 100%;
    padding: 12px 14px;
}

.sc-tree-card-stage { font-size: 12px; }
.sc-tree-card-title { font-size: 14px; }
.sc-tree-card-actor { font-size: 12px; }
.sc-tree-card-time  { font-size: 12px; }
.sc-tree-card-check { font-size: 13px; }

/* iOS tự phóng to trang khi chạm vào ô nhập có cỡ chữ < 16px */
input,
textarea,
select {
    font-size: 16px;
}

/* ==========================================================================
   7. THANH ĐIỀU HƯỚNG ĐÁY
   ========================================================================== */
.mobile-tabbar {
    display: flex;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 95;               /* dưới drawer chi tiết (z=90 -> nâng ở dưới) */
    height: calc(var(--tabbar-h) + env(safe-area-inset-bottom, 0px));
    padding-bottom: env(safe-area-inset-bottom, 0px);
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: saturate(1.6) blur(14px);
    -webkit-backdrop-filter: saturate(1.6) blur(14px);
    border-top: 1px solid rgba(15, 23, 42, 0.09);
    box-shadow: 0 -2px 16px rgba(15, 23, 42, 0.06);
}

body[data-theme="dark"] .mobile-tabbar {
    background: rgba(17, 28, 51, 0.94);
    border-top-color: rgba(255, 255, 255, 0.10);
}

.mobile-tab {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    padding: 6px 2px;
    text-decoration: none;
    color: #64748b;
    -webkit-tap-highlight-color: transparent;
    transition: color 0.18s ease;
}

.mobile-tab svg {
    width: 21px;
    height: 21px;
    flex-shrink: 0;
    transition: transform 0.18s ease;
}

.mobile-tab span {
    font-size: 10.5px;
    font-weight: 500;
    line-height: 1.1;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

.mobile-tab.is-active {
    color: #2062ff;
}

.mobile-tab.is-active svg {
    transform: translateY(-1px) scale(1.06);
}

body[data-theme="dark"] .mobile-tab { color: #94a3b8; }
body[data-theme="dark"] .mobile-tab.is-active { color: #38bdf8; }

/* Panel chi tiết sơ đồ phải nằm TRÊN thanh tab, không bị che */
/* Bottom-sheet trong supply-chain-views.css đặt bottom:0 !important -> bị thanh
   tab che mất phần đáy. Đẩy lên đúng bằng chiều cao thanh tab. */
.sc-detail-panel.sc-detail-drawer {
    bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom, 0px)) !important;
    max-height: calc(75vh - var(--tabbar-h)) !important;
    z-index: 96;
}

/* Thông báo nhỏ (toast) đang ở bottom:24px -> bị thanh tab che */
.toast-notification {
    bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom, 0px) + 14px);
    z-index: 97;
}

/* Ngăn kéo sự kiện cũng vậy */
.detail-drawer {
    padding-bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom, 0px));
}


/* ==========================================================================
   8. QUY TRÌNH CHẾ BIẾN — LÀM LẠI CHO MOBILE
   --------------------------------------------------------------------------
   Vấn đề cũ: bố cục desktop bị bóp -> 104 phần tử tràn khỏi màn hình.
     - Trục thời gian bên trái ăn 107px (cột ngày 75px + cột mốc 32px),
       nội dung chỉ còn ~120px.
     - Lưới thông tin dùng minmax(240px, 1fr) trong khung ~250px -> tràn.
     - Bảng nguyên liệu 7 CỘT, không cách nào vừa 375px.
   Cách làm mới: bỏ trục dọc, thẻ dùng trọn bề rộng, ngày giờ đưa lên đầu thẻ,
   bảng chuyển thành từng khối nhãn/giá trị xếp dọc.
   ========================================================================== */

/* --- 8.1 Bỏ trục thời gian bên trái, thẻ chiếm trọn bề rộng --- */
.recipe-step-row {
    display: block;            /* bỏ grid 75px 32px 1fr */
    padding-right: 0;
    padding-top: 0;
    margin-bottom: 14px;
}

.recipe-step-time-col,
.recipe-step-marker-wrap {
    display: none;             /* ngày giờ đã hiện trong đầu thẻ (8.2) */
}

.recipe-step-card-wrap {
    padding-left: 0;
    min-width: 0;
}

.recipe-step-card {
    padding: 14px;
    border-radius: 14px;
}

/* --- 8.2 Đầu thẻ: số thứ tự + ngày giờ + tiêu đề xếp dọc --- */
.recipe-step-header {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
}

.recipe-step-title-wrap {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    width: 100%;
    min-width: 0;
}

.recipe-step-title-text {
    font-size: 15px;
    line-height: 1.3;
    word-break: break-word;
}

.recipe-step-code-badge {
    font-size: 11px;
    align-self: flex-start;
}

/* mốc thời gian tự chèn lại vào đầu thẻ bằng thuộc tính data-when (đặt ở JS) */
.recipe-step-card[data-when]::before {
    content: attr(data-when);
    display: block;
    font-size: 12px;
    font-weight: 500;
    color: #64748b;
    margin-bottom: 6px;
}

body[data-theme="dark"] .recipe-step-card[data-when]::before { color: #94a3b8; }

/* --- 8.3 Lưới thông tin: 1 cột --- */
.recipe-meta-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
}

.recipe-meta-item { min-width: 0; }

.recipe-meta-label {
    font-size: 11.5px;
    line-height: 1.3;
}

.recipe-meta-val {
    font-size: 13.5px;
    line-height: 1.4;
    word-break: break-word;
}

/* --- 8.4 Bảng nguyên liệu 7 cột -> từng khối xếp dọc --- */
.recipe-ingredients-table-wrap { overflow: visible; }

.recipe-ingredients-table,
.recipe-ingredients-table tbody,
.recipe-ingredients-table tr,
.recipe-ingredients-table td {
    display: block;
    width: 100%;
}

.recipe-ingredients-table thead { display: none; }   /* nhãn nằm ở data-label */

.recipe-ingredients-table tr {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 12px 14px;
    margin-bottom: 10px;
}

body[data-theme="dark"] .recipe-ingredients-table tr {
    background: #0f172a;
    border-color: #334155;
}

.recipe-ingredients-table td {
    border: 0;
    padding: 6px 0;
    text-align: left;
}

.recipe-ingredients-table td + td {
    border-top: 1px dashed #e2e8f0;
}

body[data-theme="dark"] .recipe-ingredients-table td + td { border-top-color: #334155; }

.recipe-ingredients-table td::before {
    content: attr(data-label);
    display: block;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    color: #94a3b8;
    margin-bottom: 2px;
}

.recipe-ingredients-table td {
    font-size: 13px;
    line-height: 1.4;
    word-break: break-word;
}

/* --- 8.5 Dải chứng thư: cho xuống dòng giữa các huy hiệu, KHÔNG cắt giữa từ --- */
.recipe-step-card .onchain-pill,
.recipe-step-card .w3c-vc-badge {
    max-width: 100%;
    white-space: nowrap;       /* "On-Chain" từng bị bẻ thành "On-Ch / ain" */
}

/* riêng mã hash thì cho phép bẻ, vì nó là chuỗi ký tự dài không có dấu cách */
.recipe-step-card .pill-hash {
    max-width: 100%;
    word-break: break-all;
    white-space: normal;
}

/* hàng chứa các huy hiệu tự xuống dòng khi hết chỗ */
.recipe-step-card .recipe-step-badges,
.recipe-step-card .w3c-vc-row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.recipe-shopee-timeline { padding-left: 0; }

/* đường kẻ dọc của trục cũ (left:91px) giờ mồ côi vì đã bỏ cột thời gian */
.recipe-shopee-timeline::before { display: none; }

/* dải phân cách giai đoạn cũng thụt theo trục cũ */
.roadmap-stage-divider-row { padding-left: 0; }

/* ==========================================================================
   8.6 KHOẢNG ĐỆM (SPACING) — GIẢM LỒNG GHÉP
   --------------------------------------------------------------------------
   Các lớp lồng nhau đang ăn hết bề rộng:
     375 -> section (đệm 14) 351 -> thẻ (đệm 22) 321 -> canvas 275
   Trên màn 375px, đệm 22px mỗi bên là quá phí. Giảm đều để nội dung rộng hơn
   ~50px, đủ cho thẻ mắt xích từ 119px lên ~150px.
   ========================================================================== */
/* mobile-first.css đang ép `padding: 20px 14px !important` với độ ưu tiên
   body.v7-liquid-glass .app-section -> phải bám đúng selector đó mới đè được.
   Cùng lúc giảm đệm .app-body (đang 12px !important) để lấy thêm bề rộng. */
body.v7-liquid-glass .app-section,
body.v7-liquid-glass #reviews.app-section,
.app-section {
    padding: 16px 10px !important;
}

body.v7-liquid-glass .app-body,
.app-body {
    padding: 12px 8px 28px !important;
}

.supply-chain-graph-card,
.sc-view-card,
.recipe-process-card {
    padding: 12px;
    border-radius: 14px;
}

.graph-card-header,
.sc-view-head {
    padding-bottom: 10px;
    margin-bottom: 10px;
    gap: 8px;
}

.section-header { margin-bottom: 12px; }

.trace-segmented-tabs { margin-bottom: 12px; }

.supply-chain-view-mode-bar {
    padding: 8px 10px;
    margin-bottom: 12px;
    gap: 8px;
}

.supply-view-mode-buttons {
    display: grid;                 /* 3 nút xếp lưới thay vì tràn 1 hàng */
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
    width: 100%;
}

.supply-view-btn {
    padding: 8px 6px;
    font-size: 12px;
    justify-content: center;
    text-align: center;
    line-height: 1.2;
}

.supply-view-btn svg { display: none; }   /* nhường chỗ cho chữ */

/* ==========================================================================
   9. SƠ ĐỒ CHUỖI CUNG ỨNG — THU GỌN THẺ MẮT XÍCH
   --------------------------------------------------------------------------
   Trước: mỗi thẻ 270x252px, 10 mắt xích = 2.948px = 3,6 màn hình cuộn.
   Sau  : thẻ gọn ~150px rộng -> 2 thẻ/hàng, tổng chỉ còn ~1 màn hình.
   Lợi thêm: các mắt xích song song cùng đổ vào một bước sẽ nằm CẠNH NHAU
   trên cùng hàng, nhìn ra chỗ hợp lưu dễ hơn hẳn so với xếp dọc 1 cột.
   ========================================================================== */
.sc-flow-flat-cards {
    row-gap: 46px;
    column-gap: 28px;
}

.sc-flow-node {
    flex: 1 1 calc(50% - 14px);
    min-width: 0;
    max-width: none;
}

.graph-node-stage-header { margin-bottom: 6px; }

.graph-node-stage-pill {
    font-size: 10px;
    padding: 3px 8px;
    letter-spacing: 0.2px;
}

.graph-node-box {
    padding: 10px;
    gap: 5px;
    border-radius: 12px;
    border-width: 1px;
}

.graph-node-icon-bg {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    margin-bottom: 0;
}

.graph-node-icon-bg svg { width: 15px; height: 15px; }

.graph-node-title {
    font-size: 13px;
    line-height: 1.3;
}

.graph-node-batch-pill {
    padding: 2px 6px;
    font-size: 11px;
    margin: 0;
}

.graph-node-subtitle { display: none; }   /* dòng mô tả dài nhất — xem chi tiết khi chạm */

.graph-node-footer {
    padding-top: 6px;
    gap: 4px;
    flex-wrap: wrap;
}

.graph-node-time { font-size: 11px; padding: 2px 6px; }
.graph-node-verified { font-size: 11px; }

/* Nhãn trên mũi tên: khe giữa 2 thẻ chỉ 34px nên nhãn bị cắt và ĐÈ LÊN NHAU
   khi hai mắt xích cùng đổ vào một bước. Ẩn đi — mũi tên đã đủ diễn đạt luồng,
   chạm vào thẻ sẽ thấy chi tiết. */
.sc-flow-link-label { display: none; }

/* Mã lô dài (LOT-LIVE-20260714-001) vỡ 3 dòng làm các thẻ so le chiều cao.
   Cắt bớt bằng dấu ba chấm, giữ mọi thẻ đều nhau. */
.graph-node-batch-pill {
    max-width: 100%;
    min-width: 0;
}

.graph-node-batch-pill .batch-code {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}

/* các thẻ trong cùng hàng cao bằng nhau cho ngay ngắn */
.sc-flow-node .graph-node-box { height: 100%; }


} /* hết @media (max-width: 640px) */

/* Thanh tab chỉ dành cho mobile — ẩn ở màn lớn hơn */
@media (min-width: 641px) {
    .mobile-tabbar { display: none; }
}