/* Lớp sửa mobile cho bản Codex — import_mockup.py chép ra /assets/mobile.css và nạp SAU mọi <style>.
   Bản gốc đã có breakpoint 760px nhưng giữ bố cục desktop ở vài chỗ (thẻ demo 2 cột, banner AI DN).
   Dùng !important chỉ ở chỗ bản gốc có selector body[data-page] nặng hơn. */

/* Font: phone không có Cambria/Segoe/Inter; Georgia thiếu dấu chồng tiếng Việt (ắ, ầ) */
.detail-web-copy{font-family:Cambria,"Noto Serif",serif}

/* Dòng chữ ký trên ảnh hero: chữ trắng + bóng mờ để nổi trên nền ảnh sáng */
.ecosystem-signature{color:#fff;font-family:Cambria,"Noto Serif",serif;font-style:italic;
  text-shadow:0 1px 2px rgba(6,52,48,.55),0 2px 14px rgba(6,52,48,.45)}
.ecosystem-signature::after{border-bottom-color:#fff;filter:drop-shadow(0 1px 2px rgba(6,52,48,.55))}

/* Ô sơ đồ: mô tả dài cho màn rộng, bản ngắn chỉ hiện trên mobile (≤760px) */
.map-node .desc-short{display:none}

/* Photo Studio chuyển xuống thẻ nhỏ: cột "Bộ sưu tập mẫu" ép ảnh chính còn ~35px → ẩn cột mẫu */
body[data-page] .mini .detail-photo-editor{grid-template-columns:30px minmax(0,1fr)}
.mini .detail-templates{display:none}
.mini .detail-photo-copy{font-size:14px;max-width:75%}
.mini .detail-photo-copy small{font-size:8px;margin-top:6px}

/* Affiliate "Gợi ý ứng dụng": đủ 12 app, 6 cột × 2 hàng (bỏ cột "Xem tất cả" 175px của mockup) */
.aff-product-grid{grid-template-columns:repeat(6,minmax(0,1fr))}
.aff-product{min-height:66px}
.aff-product>svg{display:none}
@media (max-width:1150px){.aff-product-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (max-width:850px){.aff-product-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:560px){.aff-product-grid{grid-template-columns:1fr 1fr}.aff-product{min-height:56px}}

/* Chat demo: AI gõ câu hỏi vào ô nhập rồi "bấm" gửi (import_mockup.py thêm class .pressed) */
.apps-grid .send{transition:transform .15s,filter .15s}
.apps-grid .send.pressed{transform:scale(.86);filter:brightness(1.15)}
/* nút "xem kết quả" luôn giữ chỗ, chỉ ẩn/hiện → mỗi lượt chat không làm thẻ nhảy */
.apps-grid .chat-action{display:block;visibility:hidden}
.apps-grid .chat-action.visible{visibility:visible}

@media (max-width:760px){
  /* ---------- Header: hiện Đăng nhập, vùng bấm ≥44px ---------- */
  .nav{gap:8px 10px}
  .nav-actions{display:flex;align-items:center;gap:8px;margin-left:auto}
  .nav .affiliate{min-height:44px;font-size:12px;padding:0 12px}
  .nav-actions .login{display:inline-flex!important;align-items:center;justify-content:center;
    min-height:44px;padding:0 14px;font-size:13px}
  .nav-links{gap:4px;justify-content:space-between;font-size:14px}
  .nav-links a{display:inline-flex;align-items:center;min-height:44px;padding:0 6px}
  .nav-links .active{border-bottom-width:3px}

  /* ---------- Banner AI Doanh nghiệp: nút "Khám phá ứng dụng" cuộn xuống phần demo (JS đổi chữ + href) ---------- */
  body .manager{flex-wrap:wrap;padding:16px 14px;gap:12px}
  body .manager-title{flex:1 1 0;min-width:0}
  body .manager-title strong{font-size:19px;white-space:nowrap}
  body .manager-title small{font-size:12px;line-height:1.45}
  .manager .btn{flex:1 1 100%;justify-content:center;min-height:44px;font-size:14px}
  .manager .btn .icon{transform:rotate(90deg)}

  /* ---------- Bản đồ 12 ứng dụng: gọn — tiêu đề 1 dòng, ô thấp, mô tả ngắn 1 dòng ---------- */
  body[data-page="ecosystem"] .map{padding-top:10px}
  body[data-page="ecosystem"] .native-map-panel{padding-top:4px}
  body[data-page] .section-head p{font-size:14px;line-height:1.55}
  /* rule ecosystem của mockup ghi đè margin auto → tiêu đề lệch trái */
  body[data-page] .native-map-panel h2{margin:0 auto 12px;max-width:none;white-space:nowrap;
    font-size:clamp(17px,5.6vw,24px);letter-spacing:-.5px}
  body[data-page] .native-map{grid-template-rows:162px auto auto;grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  body[data-page] .map-group{min-width:0}
  body[data-page] .map-node{min-height:0;padding:8px 10px;margin-top:6px;border-radius:14px}
  body[data-page] .map-node-heading{gap:8px}
  body[data-page] .map-node-heading .node-icon{width:28px;height:28px}
  body[data-page] .map-node-heading strong{font-size:14px}
  body[data-page] .map-node>small{margin:3px 0 0;font-size:11px;line-height:1.35;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .map-node .desc-long{display:none}
  .map-node .desc-short{display:inline}
  .map-hub .hub-inner{width:150px;height:150px;padding:0 12px}
  .map-hub .hub-inner small{font-size:10.5px;line-height:1.45}

  /* ---------- Thẻ demo ứng dụng: xếp dọc (màn hình trên, trợ lý AI dưới) ---------- */
  body[data-page] .apps-grid .card-split{display:flex!important;flex-direction:column;
    height:auto!important;min-height:0!important;gap:0!important;padding:0 10px 12px!important}
  .apps-grid .workspace{height:230px;flex:none;border-radius:10px 10px 0 0}
  .apps-grid .assistant{border-left:1px solid #dfede6;border-top:0;border-radius:0 0 10px 10px;
    padding:12px!important}
  .apps-grid .assistant-head{font-size:14px!important;gap:6px}
  .apps-grid .assistant-head .icon{width:18px;height:18px}
  .apps-grid .assistant-state{font-size:12px}
  /* giữ chỗ cho 2 tin nhắn để demo chạy không làm nhảy trang */
  .apps-grid .conversation{min-height:132px;gap:8px}
  .apps-grid .bubble{font-size:13px!important;line-height:1.5;padding:8px 10px!important}
  .apps-grid .chat-action{min-height:44px;font-size:13px!important;margin:10px 0 0}
  .apps-grid .composer{min-height:44px;padding:4px 4px 4px 8px}
  /* 16px để iOS không tự phóng to khi chạm ô nhập */
  .apps-grid .composer input{font-size:16px!important}
  .apps-grid .composer .send{width:36px;height:36px}
  .card-detail{min-width:44px;min-height:44px}

  /* ---------- Footer: link dễ chạm ---------- */
  .footer-links{flex-wrap:wrap;gap:0 18px}
  .footer-links a{display:inline-flex;align-items:center;min-height:44px;font-size:14px}
  footer small{font-size:12px}
}

/* Điện thoại ≤420px: logo + 2 nút phải nằm 1 hàng → bỏ icon Affiliate, thu padding */
@media (max-width:420px){
  .nav .affiliate .icon{display:none}
  .nav .affiliate{padding:0 10px}
  .nav-actions{gap:6px}
  .nav-actions .login{padding:0 12px}
}

/* 320–360px (iPhone SE 1, Android nhỏ): chữ menu không gãy dòng, thu logo + nút */
@media (max-width:360px){
  .nav .brand{font-size:17px;gap:6px}
  .nav .brand svg{width:24px;height:24px}
  .nav .affiliate{font-size:11px;padding:0 8px}
  .nav-actions .login{font-size:12px;padding:0 10px}
  .nav-links{font-size:13px}
  .nav-links a{white-space:nowrap;padding:0 2px}
  /* ô sơ đồ hẹp ~140px: thu icon + chữ để tên app 1 dòng */
  body[data-page] .map-group{padding-left:6px;padding-right:6px}
  body[data-page] .map-group h3{font-size:11px}
  body[data-page] .map-node{padding:7px 8px}
  body[data-page] .map-node-heading{gap:6px}
  body[data-page] .map-node-heading .node-icon{width:24px;height:24px}
  body[data-page] .map-node-heading strong{font-size:12.5px;letter-spacing:-.3px}
  body[data-page] .map-node>small{font-size:10px}
}

/* Tablet dọc 761–900px (iPad 768/810/820): bố cục desktop của mockup bị ép chật
   → dùng sơ đồ lưới 2 cột như mobile, xếp dọc thẻ demo, menu không gãy chữ */
@media (min-width:761px) and (max-width:900px){
  .nav{gap:12px}
  .nav-links{gap:14px;font-size:13px}
  .nav-links a{white-space:nowrap}
  .nav .affiliate,.nav-actions .login{white-space:nowrap;padding-left:12px;padding-right:12px}
  .nav .affiliate .icon{display:none}
  .manager-features{display:none}
  .manager-title{flex:1;min-width:0}

  body[data-page] .native-map{display:grid;grid-template-columns:1fr 1fr;
    grid-template-rows:200px auto auto;gap:18px 14px;min-height:0}
  body[data-page] .map-hub{grid-column:1 / 3;grid-row:1;transform:none}
  .map-hub .hub-inner{width:180px;height:180px}
  .map-hub .hub-inner strong{font-size:18px}
  .map-hub .hub-inner small{font-size:11.5px}
  body[data-page] .map-group.left{grid-column:1}
  body[data-page] .map-group.right{grid-column:2}
  body[data-page] .map-group.top{grid-row:2}
  body[data-page] .map-group.bottom{grid-row:3}
  .map-rings,.native-map .connections{display:none}
  body[data-page] .map-group.left .map-node{flex-direction:row}

  body[data-page] .apps-grid .card-split{display:flex!important;flex-direction:column;
    height:auto!important;min-height:0!important;gap:0!important}
  .apps-grid .workspace{height:240px;flex:none;border-radius:10px 10px 0 0}
  .apps-grid .assistant{border-left:1px solid #dfede6;border-top:0;border-radius:0 0 10px 10px;padding:12px!important}
  .apps-grid .conversation{min-height:132px}
  .apps-grid .bubble{font-size:13px!important;line-height:1.5}
  .apps-grid .chat-action{min-height:40px;font-size:13px!important}
  .apps-grid .composer input{font-size:14px!important}
  .footer-links a{white-space:nowrap}
}