/* =========================================================
   P77 — XE GHEP MOBILE CONTACT: ONE GLOBAL SOURCE OF TRUTH
   Reference: approved Money Page 5-action dock.
   Scope: mobile only, Xe Ghép vertical only.

   Why this layer exists:
   - Older page bundles contain duplicated P75/P76 mobile-contact rules.
   - /bang-gia also sets `contain: layout paint`, which clips the raised Call circle.
   - Different routes selected PNG / sprite / WebP icon renderers.
   This file is loaded LAST on every Xe Ghép frontend layout and neutralizes
   page-specific conflicts without changing desktop contact UI.
   ========================================================= */

@keyframes xg-p77-call-shake{
  0%,78%,100%{transform:rotate(0deg)}
  81%{transform:rotate(-11deg)}
  84%{transform:rotate(10deg)}
  87%{transform:rotate(-8deg)}
  90%{transform:rotate(7deg)}
  93%{transform:rotate(-4deg)}
  96%{transform:rotate(3deg)}
}

@media(max-width:600px){
  body.xe-ghep-service-site{
    padding-bottom:calc(72px + env(safe-area-inset-bottom,0px))!important;
  }

  body.xe-ghep-service-site .txs-vf-mobile-contact{
    display:block!important;
    position:fixed!important;
    inset:auto 0 0 0!important;
    z-index:10020!important;
    width:100%!important;
    height:calc(66px + env(safe-area-inset-bottom,0px))!important;
    min-height:0!important;
    padding:0 4px env(safe-area-inset-bottom,0px)!important;
    border:0!important;
    border-top:1px solid #e5ebf0!important;
    border-radius:0!important;
    background:#fff!important;
    box-shadow:0 -5px 18px rgba(15,47,82,.10)!important;
    overflow:visible!important;
    contain:none!important;
    clip:auto!important;
    clip-path:none!important;
    transform:none!important;
    backdrop-filter:none!important;
    -webkit-backdrop-filter:none!important;
  }

  body.xe-ghep-service-site .txs-vf-mobile-contact-inner{
    display:grid!important;
    grid-template-columns:repeat(5,minmax(0,1fr))!important;
    align-items:start!important;
    gap:0!important;
    width:min(100%,560px)!important;
    height:66px!important;
    min-height:66px!important;
    margin:0 auto!important;
    padding:0!important;
    overflow:visible!important;
    contain:none!important;
    clip:auto!important;
    clip-path:none!important;
  }

  body.xe-ghep-service-site .txs-vf-mobile-contact .txs-vf-mobile-contact-item,
  body.xe-ghep-service-site .txs-vf-mobile-contact .txs-vf-mobile-call-main:not(.is-disabled),
  body.xe-ghep-service-site .txs-vf-mobile-contact .txs-vf-mobile-zalo-main:not(.is-disabled){
    display:flex!important;
    position:relative!important;
    flex-direction:column!important;
    align-items:center!important;
    justify-content:flex-start!important;
    gap:2px!important;
    width:100%!important;
    min-width:0!important;
    height:66px!important;
    min-height:66px!important;
    margin:0!important;
    padding:5px 1px 2px!important;
    border:0!important;
    border-radius:0!important;
    background:transparent!important;
    box-shadow:none!important;
    color:#263746!important;
    text-decoration:none!important;
    transform:none!important;
    overflow:visible!important;
    -webkit-appearance:none!important;
    appearance:none!important;
  }

  body.xe-ghep-service-site .txs-vf-mobile-contact .txs-vf-mobile-contact-item.is-disabled,
  body.xe-ghep-service-site .txs-vf-mobile-contact .is-disabled{
    opacity:.38!important;
    pointer-events:none!important;
  }

  body.xe-ghep-service-site .txs-vf-mobile-contact .txs-vf-mobile-contact-icon,
  body.xe-ghep-service-site .txs-vf-mobile-contact .txs-vf-mobile-zalo-main:not(.is-disabled) .txs-vf-mobile-contact-icon{
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    width:38px!important;
    height:38px!important;
    flex:0 0 38px!important;
    margin:0!important;
    padding:0!important;
    border:0!important;
    border-radius:50%!important;
    background:transparent!important;
    box-shadow:none!important;
    overflow:visible!important;
  }

  /* P77 always selects the local 128x128 WebP icon partial for Xe Ghép. */
  body.xe-ghep-service-site .txs-vf-mobile-contact .taxi-contact-brand-icon{
    display:block!important;
    width:38px!important;
    height:38px!important;
    max-width:38px!important;
    flex:0 0 38px!important;
    object-fit:contain!important;
    border-radius:50%!important;
    animation:none!important;
    transform:none!important;
  }

  body.xe-ghep-service-site .txs-vf-mobile-contact .txs-vf-mobile-contact-item>span:last-child,
  body.xe-ghep-service-site .txs-vf-mobile-contact .txs-vf-mobile-call-main:not(.is-disabled)>span:last-child,
  body.xe-ghep-service-site .txs-vf-mobile-contact .txs-vf-mobile-zalo-main:not(.is-disabled)>span:last-child{
    display:block!important;
    max-width:100%!important;
    margin:1px 0 0!important;
    color:#263746!important;
    font-size:10px!important;
    line-height:1.05!important;
    font-weight:700!important;
    letter-spacing:-.08px!important;
    white-space:nowrap!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
  }

  body.xe-ghep-service-site .txs-vf-mobile-contact .txs-vf-mobile-call-main:not(.is-disabled){
    z-index:4!important;
    padding-top:0!important;
  }

  body.xe-ghep-service-site .txs-vf-mobile-contact .txs-vf-mobile-call-main:not(.is-disabled) .txs-vf-mobile-call-circle{
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    width:64px!important;
    height:64px!important;
    flex:0 0 64px!important;
    margin:-22px 0 -1px!important;
    padding:0!important;
    border:3px solid #fff!important;
    border-radius:50%!important;
    background:#fff!important;
    box-shadow:0 7px 18px rgba(22,163,74,.28),0 0 0 1px rgba(22,163,74,.08)!important;
    overflow:visible!important;
    contain:none!important;
    transform-origin:50% 50%!important;
    animation:xg-p77-call-shake 3.3s ease-in-out infinite!important;
    will-change:transform;
  }

  body.xe-ghep-service-site .txs-vf-mobile-contact .txs-vf-mobile-call-main:not(.is-disabled) .txs-vf-mobile-call-circle .taxi-contact-brand-icon{
    width:64px!important;
    height:64px!important;
    max-width:64px!important;
    flex:0 0 64px!important;
    border-radius:50%!important;
  }

  body.xe-ghep-service-site .txs-vf-mobile-contact .txs-vf-mobile-call-main:not(.is-disabled)>span:last-child{
    margin-top:0!important;
    color:#137d39!important;
    font-size:10px!important;
    font-weight:800!important;
  }

  /* Keep overlays above the dock and away from the iOS safe area. */
  body.xe-ghep-service-site .txs-vf-mobile-sheet{
    bottom:calc(74px + env(safe-area-inset-bottom,0px))!important;
    z-index:10030!important;
  }
  body.xe-ghep-service-site .txs-vf-mobile-sheet-backdrop{z-index:10025!important}
  body.xe-ghep-service-site .txs-vf-mobile-phone-pop{z-index:10031!important}

  /* One mobile contact system only. Desktop floating rail remains untouched. */
  body.xe-ghep-service-site .xgp-mobile-bar,
  body.xe-ghep-service-site .menupcmxh{
    display:none!important;
  }
}

@media(max-width:365px){
  body.xe-ghep-service-site .txs-vf-mobile-contact .txs-vf-mobile-contact-icon,
  body.xe-ghep-service-site .txs-vf-mobile-contact .txs-vf-mobile-contact-icon .taxi-contact-brand-icon{
    width:34px!important;
    height:34px!important;
    max-width:34px!important;
    flex-basis:34px!important;
  }
  body.xe-ghep-service-site .txs-vf-mobile-contact .txs-vf-mobile-call-main:not(.is-disabled) .txs-vf-mobile-call-circle,
  body.xe-ghep-service-site .txs-vf-mobile-contact .txs-vf-mobile-call-main:not(.is-disabled) .txs-vf-mobile-call-circle .taxi-contact-brand-icon{
    width:60px!important;
    height:60px!important;
    max-width:60px!important;
    flex-basis:60px!important;
  }
  body.xe-ghep-service-site .txs-vf-mobile-contact .txs-vf-mobile-contact-item>span:last-child,
  body.xe-ghep-service-site .txs-vf-mobile-contact .txs-vf-mobile-call-main:not(.is-disabled)>span:last-child{
    font-size:9px!important;
  }
}

@media(prefers-reduced-motion:reduce){
  body.xe-ghep-service-site .txs-vf-mobile-contact .txs-vf-mobile-call-main .txs-vf-mobile-call-circle{
    animation:none!important;
  }
}