/* VIET TRADE — tối ưu điện thoại & máy tính bảng.
   Nạp sau cùng. Nguyên tắc: không tràn ngang, ô nhập ≥ 16px (iOS không tự phóng to),
   vùng chạm ≥ 40px, điều hướng chính bằng thanh dưới đáy màn hình. */

.search-btn, .bnav, .nav-m { display: none; }
/* cột lưới được phép co hẹp hơn nội dung (ô nhập, bảng) — tránh tràn ngang */
.grid > *, .form-grid > *, .form-grid-3 > *, .kpis > *, .field { min-width: 0; }
.inbox .back { display: none; }

/* Thiết bị cảm ứng: vùng chạm lớn hơn */
@media (pointer: coarse) {
  .btn { min-height: 40px; }
  .btn.sm { min-height: 36px; padding: 0 12px; }
  .chip { height: 36px; }
  .seg button { padding: 8px 12px; }
  .tabs button { padding: 13px 14px; }
  .icon-btn { width: 40px; height: 40px; }
}

/* ── Máy tính bảng ── */
@media (max-width: 1080px) {
  .wrap { padding: 0 20px; }
  .co-head > div:last-child { text-align: left; }
  .co-head .hero-quote, .co-head .chips { justify-content: flex-start !important; }
}

/* ── Điện thoại ── */
@media (max-width: 860px) {
  html { -webkit-tap-highlight-color: transparent; }
  body { padding-bottom: calc(64px + env(safe-area-inset-bottom)); }
  .wrap { padding: 0 16px; }

  /* Header: logo | tìm kiếm | tài khoản | menu */
  .top .wrap { height: 56px; gap: 4px; }
  .brand { font-size: 16px; gap: 8px; margin-right: auto; }
  .brand small { display: none; }
  .search { display: none; position: absolute; left: 0; right: 0; top: 56px; padding: 8px 16px 10px; background: var(--bg); border-bottom: 1px solid var(--line); box-shadow: var(--shadow); max-width: none; z-index: 2; }
  .top.searching .search { display: block; }
  .search svg { left: 29px; top: 19px; }
  .search-pop { top: 52px; left: 16px; right: 16px; max-height: 60vh; }
  .search-btn { display: grid; }
  #themeBtn { display: none; }
  .menu-btn { display: grid; margin-left: 0; }
  .acct { margin-left: 0 !important; gap: 6px; }
  .acct .btn { height: 36px; min-height: 36px; padding: 0 12px; }
  .acct a[href="#/dang-ky"], .acct #logoutBtn, .acct .acct-role { display: none; }
  .acct-chip { padding: 4px; }

  /* Menu trượt xuống, kèm mục tài khoản & giao diện */
  .nav { top: 56px; max-height: calc(100vh - 56px - 64px); overflow-y: auto; padding: 6px 12px 14px; gap: 0; }
  .nav a { padding: 13px 10px; border-radius: 8px; font-size: 15px; }
  .nav-m { display: block; border-top: 1px solid var(--line); margin-top: 6px; padding-top: 6px; }
  .nav-m a, .nav-m button { display: flex; width: 100%; align-items: center; justify-content: space-between; padding: 13px 10px; border: 0; background: none; border-radius: 8px; font-size: 15px; color: var(--ink-2); cursor: pointer; text-align: left; }
  .nav-m a:hover, .nav-m button:hover { background: var(--bg-3); }
  .nav-m .who { padding: 10px; font-size: 13px; color: var(--ink-3); }

  /* Dải chỉ số & ghi chú gọn hơn */
  .tape-item { padding: 8px 14px; font-size: 12.5px; }
  .demo-note { font-size: 11.5px; padding: 5px 0; }
  .demo-note .wrap { padding-top: 0; padding-bottom: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

  /* Thanh điều hướng dưới đáy */
  .bnav { display: grid; grid-template-columns: repeat(5, 1fr); position: fixed; left: 0; right: 0; bottom: 0; z-index: 35;
    background: var(--bg); border-top: 1px solid var(--line); padding-bottom: env(safe-area-inset-bottom); }
  .bnav a { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; height: 60px; font-size: 11px; font-weight: 500; color: var(--ink-3); }
  .bnav a svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
  .bnav a.on { color: var(--ink); font-weight: 600; }
  .bnav a.on::before { content: ""; position: absolute; top: 0; left: 30%; right: 30%; height: 2px; background: var(--ink); border-radius: 0 0 2px 2px; }
  .bnav .dot[hidden] { display: none; }
  .bnav .dot { position: absolute; top: 7px; left: calc(50% + 6px); min-width: 8px; width: 8px; height: 8px; padding: 0; }
  .toast { bottom: calc(76px + env(safe-area-inset-bottom)); }

  /* Ô nhập ≥ 16px để iOS không phóng to */
  input, select, textarea, .input, .search input, .ai-box textarea, .mini-search .input { font-size: 16px !important; }
  .input, select.input { height: 44px; }
  .mini-search .input { height: 40px; }

  /* Bố cục chung */
  main { padding: 20px 0 40px; }
  .page-head { margin-bottom: 16px; }
  .page-head > .chips, .page-head > div:last-child:not(:first-child) { width: 100%; }
  .page-head .chips { flex-wrap: wrap; overflow: visible; }
  .page-head .chips .btn { flex: 1 1 auto; }
  .section { margin-top: 28px; }
  .section-head { flex-wrap: wrap; }
  .card-head { flex-wrap: wrap; }
  .filters > * { flex: 1 1 auto; }
  .filters .input { width: 100% !important; }
  .filters .seg { margin-left: 0 !important; width: 100%; }
  .filters .seg button { flex: 1; }
  .mini-search { width: 100%; min-width: 0 !important; }
  .mini-search .input { flex: 1; min-width: 0; }

  /* Thanh tab cuộn ngang: mờ dần mép phải để báo còn nội dung */
  .tabs { -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent); mask-image: linear-gradient(90deg, #000 85%, transparent); scroll-snap-type: x proximity; }
  .tabs button { scroll-snap-align: start; }
  .tab-link { padding: 13px 10px; }
  .chips { overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none; padding-bottom: 2px; }
  .chips::-webkit-scrollbar { display: none; }
  .type-pick, .chips.wrap { flex-wrap: wrap; }

  /* Bảng: cuộn ngang trong khung, có bóng báo hiệu */
  .tbl-wrap { -webkit-overflow-scrolling: touch; background: linear-gradient(90deg, var(--bg) 30%, transparent) left / 24px 100% no-repeat local, linear-gradient(270deg, var(--bg) 30%, transparent) right / 24px 100% no-repeat local, radial-gradient(farthest-side at 0 50%, rgba(0,0,0,.12), transparent) left / 10px 100% no-repeat scroll, radial-gradient(farthest-side at 100% 50%, rgba(0,0,0,.12), transparent) right / 10px 100% no-repeat scroll; }
  .tbl th, .tbl td { padding: 10px 10px; }
  .tbl .name b, .tbl .name span { max-width: 200px; }

  /* Trang doanh nghiệp mẫu */
  .co-head { gap: 14px; }
  .co-id { align-items: flex-start; }
  .co-logo { width: 48px; height: 48px; font-size: 13px; }
  .co-id h1 { font-size: 21px; }
  .co-head > div:last-child { width: 100%; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; }
  .co-head > div:last-child .chips { margin-top: 0 !important; }
  .score-box { flex-wrap: wrap; }

  /* CRM: cột bắt dính khi vuốt */
  .kanban { grid-template-columns: repeat(4, 84%); scroll-snap-type: x mandatory; gap: 10px; margin: 0 -16px; padding: 0 16px 8px; }
  .kcol { scroll-snap-align: start; min-height: 200px; }

  /* Ngăn chi tiết toàn màn hình */
  .drawer { width: 100%; }
  .drawer-h { padding: 14px 16px; }
  .drawer-b { padding: 14px 16px 30px; }
  .drawer-f { padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); }
  .drawer-f > span[style] { margin-left: 0 !important; width: 100%; }
  .drawer-f .btn { flex: 1; }
  .modal { padding: 18px; }

  /* Hộp thư: chọn hội thoại → khung chat chiếm toàn bộ, có nút quay lại */
  .inbox { height: auto; grid-template-columns: 1fr; }
  /* hội thoại đang mở: phủ toàn màn hình giữa header và thanh đáy, như ứng dụng nhắn tin */
  .inbox.open .chat { position: fixed; top: 56px; left: 0; right: 0; bottom: calc(60px + env(safe-area-inset-bottom)); z-index: 34; background: var(--bg); height: auto; }
  .inbox.open .chat-f { padding-bottom: 10px; }
  .inbox-list { max-height: none; border: 0; }
  .inbox .chat { display: none; height: auto; }
  .inbox.open .inbox-list { display: none; }
  .inbox.open .chat { display: flex; }
  .inbox .back { display: inline-flex; margin-right: 8px; }
  .chat-h { display: flex; align-items: center; }
  .msg { max-width: 88%; }

  /* Sản phẩm */
  .pcards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .pcard .bd { padding: 10px; }
  .pcard .bd b { font-size: 13.5px; }
  .pcard .bd .meta .badge:nth-child(n+2) { display: none; }
  .pcard .ph .tag { font-size: 10px; left: 6px; top: 6px; }
  .gallery .thumbs { flex-wrap: nowrap; overflow-x: auto; }

  /* Biểu đồ & khối số liệu */
  .hero-quote .big { font-size: 34px; }
  .kpi { padding: 12px 14px; }
  .kpi .sub { display: block; }
  .heat { height: 560px; }
  .steps .step { padding: 10px; }
  .match { padding: 14px; gap: 12px; }
  .examples { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; }
  .examples button { flex: 0 0 78%; }
  .form-sec { padding: 14px; }
  .form-grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .specs-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 40px; }
  .kv { grid-template-columns: 1fr; gap: 2px; }
  .kv dt { margin-top: 8px; }

  /* Chân trang gọn */
  footer { padding: 24px 0 28px; }
  footer .wrap { grid-template-columns: 1fr 1fr; gap: 18px; }
  footer .wrap > div:first-child, footer .wrap > div:last-child { grid-column: 1 / -1; }
}

@media (max-width: 560px) {
  .form-grid, .form-grid-3 { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 380px) {
  .brand > span:last-child { display: none; }
  .pcards { grid-template-columns: 1fr 1fr; }
  .bnav a { font-size: 10px; }
}