@media (max-width: 549px) {
  .giapha-wrap { margin: 1rem 0; padding: 0; }
  body.theme-flatsome .giapha-wrap { margin: 1rem 0; padding: 0; max-width: 100%; }
  .giapha-toolbar { padding: 0 6px .85rem; align-items: center; text-align: center; }
  .giapha-toolbar > div:first-child { width: 100%; }
  .giapha-eyebrow { font-size: .62rem; letter-spacing: .14em; }
  .giapha-toolbar h2 { font-size: 1.45rem; color: var(--giapha-accent); }
  .giapha-tools { align-self: center; margin-top: .15rem; }
  .giapha-tools .button { min-width: 42px; height: 40px; border-radius: 999px; font-size: 1rem; background: #fff; }
  .giapha-canvas { padding: 2rem 1rem 3rem; border-radius: 12px; border: 2px solid rgba(155, 107, 61, .22); border: 2px solid color-mix(in srgb, var(--giapha-accent) 22%, white); box-shadow: 0 7px 24px rgba(93, 60, 31, .1); -webkit-overflow-scrolling: touch; }
  .giapha-tree { min-width: 720px; user-select: none; -webkit-user-select: none; }
  .giapha-canvas { cursor: grab; }
  .giapha-canvas:active { cursor: grabbing; }
  .giapha-card { min-width: 178px; max-width: 205px; padding: .72rem; border-left-width: 5px; border-radius: 10px; box-shadow: 0 5px 14px rgba(61,43,28,.12); }
  .giapha-card__avatar { width: 44px; height: 44px; flex-basis: 44px; }
  .giapha-card h3 { font-size: .84rem; }
  .giapha-card__dates, .giapha-card__branch, .giapha-card__extra { font-size: .68rem; }
  .giapha-card__extra { color: var(--giapha-accent); margin-top: .15rem; }
  .giapha-legend { justify-content: center; gap: .7rem; padding: .8rem 4px; font-size: .7rem; text-align: center; }
  .giapha-legend span:last-child { flex-basis: 100%; color: var(--giapha-accent); }
  .giapha-modal__box { padding: 1.7rem 1.25rem 1.35rem; border-radius: 14px; }
  .giapha-modal__body h3 { font-size: 1.2rem; }
}

/* Nếu Flatsome đặt shortcode trong .row / .col, giữ không gian cuộn đúng */
@media (max-width: 549px) {
  .row .giapha-wrap, .col .giapha-wrap { max-width: none; }
  .giapha-wrap .giapha-canvas::-webkit-scrollbar { height: 8px; }
  .giapha-wrap .giapha-canvas::-webkit-scrollbar-thumb { background: var(--giapha-accent); border-radius: 99px; }
}

/* Điều khiển sơ đồ trên mobile */
@media (max-width: 549px) {
  .giapha-toolbar { gap: .55rem; }
  .giapha-toolbar > div:first-child { order: 1; }
  .giapha-tree-stats { order: 2; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); width: 100%; gap: .3rem; }
  .giapha-tree-stats__item { min-width: 0; padding: .35rem .25rem; text-align: center; }
  .giapha-tree-stats__item b { font-size: .6rem; }
  .giapha-tree-stats__item strong { font-size: .76rem; }
  .giapha-tree-search { order: 3; width: 100%; flex-basis: 100%; grid-template-columns: minmax(0, 1fr) 40px; gap: .35rem; }
  .giapha-tree-search__name, .giapha-tree-search__generation { min-height: 44px; font-size: .82rem; }
  .giapha-tree-search__clear { width: 40px; height: 40px; }
  .giapha-tree-search__status { min-height: 1rem; padding-left: .15rem; font-size: .7rem; }
  .giapha-tools { order: 4; display: grid; grid-template-columns: minmax(70px, 72px) repeat(5, minmax(42px, 1fr)); width: 100%; gap: .35rem; }
  .giapha-tools .button, .giapha-tools .giapha-tree-search__generation { width: 100%; min-width: 0; height: 42px; padding: 0 .2rem; }
  .giapha-canvas { padding: 1.15rem .55rem 2rem; overscroll-behavior: contain; }
  .giapha-card.is-search-match { box-shadow: 0 0 0 2px rgba(142, 202, 230, .42); }
}

/* Menu Đời ngang trên hàng công cụ Flatsome mobile */
@media (max-width: 549px) {
  .giapha-tools .giapha-generation-menu { grid-column: 1 / -1; display: flex; width: 100%; flex-wrap: wrap; justify-content: center; gap: .35rem; }
  .giapha-tools .giapha-generation-button { min-width: 58px; height: 40px; flex: 0 0 auto; padding: 0 .55rem; }
}