/* Enmusubi v2 — lớp tối ưu di động dùng chung (audit web-uxui 30/09/2026).
   Nạp SAU css trang. Mọi trang viết style inline nên phải dùng !important,
   giống quy ước sẵn có trong assets/css/pages/*.css. Chỉ tác động <= 767px. */

@media (max-width:767px){

  /* 1. Tràn ngang: thẻ "Dự kiến" nổi ở band Fukuoka (Thượng đỉnh, Tinh hoa)
        tuyệt đối + right:24px đẩy trang rộng 438px ở máy 390px. */
  [data-r="bandcard"]{
    position:relative !important; right:auto !important; bottom:auto !important;
    width:auto !important; max-width:100% !important; margin-top:28px !important;
  }

  /* 2. Chữ: thang chữ gốc là thang in A5 (body 13.5px) — quá nhỏ trên điện thoại. */
  :root{ --fs-body:15px; --fs-body-sm:13px; --fs-caption:12px; --fs-eyebrow:11px; }
  p[style*="font-size: 12px"], p[style*="font-size: 12.5px"],
  p[style*="font-size: 13px"], p[style*="font-size: 13.5px"],
  p[style*="font-size: 14px"], p[style*="font-size: 14.5px"],
  li[style*="font-size: 13px"], li[style*="font-size: 13.5px"], li[style*="font-size: 14px"],
  div[style*="font-size: 13.5px"], span[style*="font-size: 13.5px"]{
    font-size:15px !important; line-height:1.6 !important;
  }
  div[style*="font-size: 12px"]:not([style*="uppercase"]),
  span[style*="font-size: 12px"]:not([style*="uppercase"]),
  div[style*="font-size: 12.5px"]:not([style*="uppercase"]),
  span[style*="font-size: 12.5px"]:not([style*="uppercase"]),
  div[style*="font-size: 13px"]:not([style*="uppercase"]),
  span[style*="font-size: 13px"]:not([style*="uppercase"]){
    font-size:14px !important;
  }
  /* nhãn in hoa (eyebrow) 10–11px -> tối thiểu 11.5px */
  [style*="font-size: 10px"][style*="uppercase"],
  [style*="font-size: 10.5px"][style*="uppercase"],
  [style*="font-size: 11px"][style*="uppercase"]{ font-size:12px !important; }
  [style*="font-size: 10px"]:not([style*="uppercase"]),
  [style*="font-size: 10.5px"]:not([style*="uppercase"]),
  [style*="font-size: 11px"]:not([style*="uppercase"]){ font-size:12.5px !important; }

  /* 3. Ô nhập < 16px khiến iPhone tự phóng to khi chạm vào. */
  input, select, textarea{ font-size:16px !important; }

  /* 4. Vùng chạm >= 44px */
  a.scpg{ display:inline-flex !important; align-items:center; min-height:44px; overflow-wrap:anywhere; }
  a.scpf{ width:44px !important; height:44px !important; }
  nav[aria-label] a, [data-r="crumb"] a{ display:inline-flex; align-items:center; min-height:44px; }
  a[style*="border-bottom"][style*="font-weight"]{ display:inline-flex !important; align-items:center; min-height:44px; }
  [data-r="drawer"] a{ min-height:48px; display:flex !important; align-items:center; }
  /* chấm điều hướng carousel (9px) — nới vùng bấm bằng lớp vô hình */
  button:empty:not([style*="position: absolute"]):not([style*="position: fixed"]){ position:relative; }
  button:empty::after{ content:""; position:absolute; inset:-14px -6px; }

  /* breadcrumb (a chỉ có color + text-decoration + border-bottom:none) */
  a[style^="color:"][style*="border-bottom: none"]{ display:inline-flex !important; align-items:center; min-height:44px; white-space:nowrap; }
  :has(> a[style^="color:"][style*="border-bottom: none"]){ flex-wrap:wrap !important; row-gap:0 !important; }
  /* link chữ in hoa kiểu "Hỏi về gói này —", "Tìm hiểu", "Khám phá hệ sinh thái" */
  a[style*="display: inline-flex"][style*="uppercase"]{ min-height:44px; }
  /* danh sách lĩnh vực ở cột bên (linh-vuc/*) */
  a[class$="-h5"], :has(> a[class$="-h5"]) > a{ display:flex !important; align-items:center; min-height:44px; }

  /* 1b. Khung nội dung width:100% + padding nhưng box-sizing mặc định (content-box)
         -> rộng 100% + 48px (band Fukuoka ở Thượng đỉnh/Tinh hoa). */
  div[style*="width: 100%"][style*="padding"]{ box-sizing:border-box !important; }

  /* 5. Máy hẹp 320–360px: cột chân trang không cắt chữ */
  [data-r="ftcols"]{ grid-template-columns:repeat(2,minmax(0,1fr)) !important; }
}

@media (max-width:360px){
  [data-r="ftcols"]{ grid-template-columns:minmax(0,1fr) !important; }
}