/* ==========================================================================
   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));
}

/* 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) */
.cert-arrow-btn {
    width: 44px;
    height: 44px;
    flex-shrink: 0;
}

.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;
}

/* 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,
.category-header-count,
.dish-card .dish-badge,
.dish-badge,
.ingredients-count-badge,
.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,
.dish-card .dish-badge,
.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;
}

/* 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, .dish-badge,
    .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));
}

} /* 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; }
}