/* CN11 CONTACT + HEADER PRO
   Behaviour ported from TAII06; moving-site labels/palette retained. */

/* Desktop: let the complete logo render first, then navigation. */
@media (min-width:1190px){
  .cn-contact-header .txs-vf-shell{max-width:1280px!important;width:calc(100% - 32px)!important;padding:0!important;gap:18px!important}
  .cn-contact-header .txs-vf-left{display:flex!important;align-items:center!important;gap:24px!important;flex:1 1 auto!important;min-width:0!important;max-width:none!important}
  .cn-contact-header .txs-vf-brand{width:auto!important;max-width:none!important;flex:0 0 auto!important;overflow:visible!important}
  .cn-contact-header .txs-vf-logo-box{width:auto!important;max-width:var(--txs-vf-logo-width-pc,240px)!important;height:48px!important;overflow:visible!important;flex:0 0 auto!important}
  .cn-contact-header .txs-vf-logo-img{width:auto!important;max-width:var(--txs-vf-logo-width-pc,240px)!important;height:100%!important;max-height:48px!important;object-fit:contain!important;object-position:left center!important}
  .cn-contact-header .txs-vf-logo-text{width:max-content!important;max-width:none!important;white-space:nowrap!important;overflow:visible!important;font-size:var(--txs-vf-logo-text-size,17px)!important}
  .cn-contact-header .txs-vf-desktop-menu{flex:1 1 auto!important;min-width:0!important}
  .cn-contact-header .txs-vf-right{flex:0 0 auto!important;margin-left:auto!important;gap:10px!important}
  .cn-contact-header .txs-vf-hotline{min-height:42px!important;height:42px!important;padding:0 14px!important;border-radius:9px!important;font-size:14px!important;font-weight:750!important}
  .cn-contact-header .txs-vf-hotline-1{background:#1675ad!important;color:#fff!important}
  .cn-contact-header .txs-vf-hotline-1:hover{background:#0f6aa8!important}
  .cn-contact-header .txs-vf-hotline-2{background:#18a957!important;color:#fff!important}
  .cn-contact-header .txs-vf-hotline-2:hover{background:#128846!important}
}

/* Mobile/tablet: logo gets a fixed reserved rail; two phone boxes stay fixed.
   11-digit numbers receive extra phone width by shrinking only the logo rail. */
@media (max-width:991px){
  .cn-contact-header .txs-vf-shell{width:100%!important;max-width:none!important;height:72px!important;min-height:72px!important;padding:0 10px!important;gap:6px!important;box-sizing:border-box!important;overflow:hidden!important}
  .cn-contact-header .txs-vf-left{flex:0 0 min(var(--txs-vf-logo-width-mobile,126px),112px)!important;width:min(var(--txs-vf-logo-width-mobile,126px),112px)!important;max-width:min(var(--txs-vf-logo-width-mobile,126px),112px)!important;min-width:0!important;overflow:hidden!important;position:relative!important;z-index:2!important}
  .cn-contact-header.txs-vf-header--long-phone .txs-vf-left{flex-basis:min(var(--txs-vf-logo-width-mobile,126px),88px)!important;width:min(var(--txs-vf-logo-width-mobile,126px),88px)!important;max-width:min(var(--txs-vf-logo-width-mobile,126px),88px)!important}
  .cn-contact-header .txs-vf-brand,.cn-contact-header .txs-vf-logo-box{width:100%!important;max-width:100%!important;height:38px!important;overflow:hidden!important}
  .cn-contact-header .txs-vf-logo-img{width:100%!important;max-width:100%!important;height:100%!important;max-height:38px!important;object-fit:contain!important;object-position:left center!important}
  .cn-contact-header .txs-vf-logo-text{display:block!important;width:100%!important;max-width:100%!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:clip!important;font-size:clamp(12px,var(--txs-vf-logo-text-size,17px),17px)!important;line-height:38px!important}
  .cn-contact-header .txs-vf-desktop-menu{display:none!important}
  .cn-contact-header .txs-vf-right{flex:1 1 auto!important;min-width:0!important;margin-left:auto!important;display:flex!important;align-items:center!important;justify-content:flex-end!important;gap:5px!important;padding:0!important;position:relative!important;z-index:3!important}
  .cn-contact-header .txs-vf-hotline{flex:0 0 101px!important;width:101px!important;min-width:101px!important;max-width:101px!important;height:38px!important;min-height:38px!important;padding:0 5px!important;border-radius:9px!important;gap:4px!important;background:#2d86c1!important;color:#fff!important;font-size:12px!important;font-weight:700!important;font-variant-numeric:tabular-nums!important;letter-spacing:-.18px!important;overflow:hidden!important}
  .cn-contact-header.txs-vf-header--long-phone .txs-vf-hotline{flex-basis:108px!important;width:108px!important;min-width:108px!important;max-width:108px!important;font-size:11.5px!important;letter-spacing:-.3px!important}
  .cn-contact-header .txs-vf-hotline:hover{background:#1675ad!important;color:#fff!important}
  .cn-contact-header .txs-vf-hotline-desktop-text{display:none!important}
  .cn-contact-header .txs-vf-hotline-mobile-text{display:block!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:clip!important}
  .cn-contact-header .txs-vf-hotline-icon{display:inline-flex!important;width:14px!important;height:14px!important;flex:0 0 14px!important}
  .cn-contact-header .txs-vf-hotline-icon svg{width:14px!important;height:14px!important}
  .cn-contact-header .txs-vf-menu-toggle{display:inline-flex!important;flex:0 0 38px!important;width:38px!important;min-width:38px!important;height:38px!important;min-height:38px!important;padding:6px!important}
  .cn-contact-header .txs-vf-mobile-panel{top:72px!important}
}
@media (max-width:430px){
  .cn-contact-header .txs-vf-shell{padding-left:7px!important;padding-right:7px!important;gap:4px!important}
  .cn-contact-header .txs-vf-left{flex-basis:min(var(--txs-vf-logo-width-mobile,126px),88px)!important;width:min(var(--txs-vf-logo-width-mobile,126px),88px)!important;max-width:min(var(--txs-vf-logo-width-mobile,126px),88px)!important}
  .cn-contact-header.txs-vf-header--long-phone .txs-vf-left{flex-basis:70px!important;width:70px!important;max-width:70px!important}
  .cn-contact-header .txs-vf-hotline{flex-basis:94px!important;width:94px!important;min-width:94px!important;max-width:94px!important;font-size:11px!important;padding:0 4px!important}
  .cn-contact-header.txs-vf-header--long-phone .txs-vf-hotline{flex-basis:100px!important;width:100px!important;min-width:100px!important;max-width:100px!important;font-size:10.5px!important}
  .cn-contact-header .txs-vf-hotline-icon{width:12px!important;height:12px!important;flex-basis:12px!important}
  .cn-contact-header .txs-vf-hotline-icon svg{width:12px!important;height:12px!important}
  .cn-contact-header .txs-vf-menu-toggle{flex-basis:36px!important;width:36px!important;min-width:36px!important;height:36px!important;min-height:36px!important}
}
@media (max-width:365px){
  .cn-contact-header .txs-vf-left{flex-basis:64px!important;width:64px!important;max-width:64px!important}
  .cn-contact-header.txs-vf-header--long-phone .txs-vf-left{flex-basis:52px!important;width:52px!important;max-width:52px!important}
  .cn-contact-header .txs-vf-hotline{flex-basis:87px!important;width:87px!important;min-width:87px!important;max-width:87px!important;font-size:10px!important;gap:2px!important}
  .cn-contact-header.txs-vf-header--long-phone .txs-vf-hotline{flex-basis:92px!important;width:92px!important;min-width:92px!important;max-width:92px!important;font-size:9.6px!important}
  .cn-contact-header .txs-vf-hotline-icon{display:none!important}
}

/* PC vertical quick contact – keep TAII06 behavior: enabled channels remain visible even before URL is configured. */
@media (min-width:601px){
  .menupcmxh{position:fixed!important;right:12px!important;bottom:10px!important;top:auto!important;transform:scale(.9)!important;transform-origin:right bottom!important;z-index:99998!important}
  .menupcmxh ul{padding:16px 9px!important;background:#fff!important;border:1px solid #e6edf3!important;border-radius:12px!important;box-shadow:0 5px 20px rgba(15,34,54,.14)!important}
  .menupcmxh a,.menupcmxh button{width:70px!important}
  .menupcmxh .icon-wrap,.menupcmxh .icon-wrap img{width:40px!important;height:40px!important}
  .menupcmxh .txt{color:#111!important;font-size:13px!important;font-weight:600!important}
}

/* TAII06-style mobile bottom tool bar. */
@media (max-width:600px){
  body.txs-body,body.taxi-service-site{padding-bottom:78px!important}
  .txs-vf-mobile-contact{display:block!important;position:fixed!important;left:0!important;right:0!important;bottom:0!important;height:72px!important;background:rgba(255,255,255,.98)!important;border-top:1px solid #e5e7eb!important;box-shadow:0 -5px 18px rgba(15,34,54,.12)!important;z-index:99999!important;padding:6px 3px 4px!important;backdrop-filter:blur(8px)!important}
  .txs-vf-mobile-contact-inner{display:flex!important;align-items:flex-start!important;justify-content:space-between!important;height:100%!important;max-width:600px!important;margin:0 auto!important}
  .txs-vf-mobile-contact-item{position:relative!important;flex:1 1 20%!important;min-width:0!important;height:62px!important;padding:0 1px!important;border:0!important;background:transparent!important;text-decoration:none!important;display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:flex-start!important;gap:4px!important;color:#4b5563!important}
  .txs-vf-mobile-contact-item>span:last-child{font-size:11px!important;line-height:1.15!important;font-weight:500!important;color:#4b5563!important;white-space:nowrap!important;margin-top:1px!important}
  .txs-vf-mobile-contact-icon{width:34px!important;height:34px!important;display:flex!important;align-items:center!important;justify-content:center!important;flex:0 0 34px!important;border-radius:50%!important}
  .txs-vf-mobile-contact-icon img{display:block!important;width:100%!important;height:100%!important;object-fit:contain!important;border-radius:50%!important}
  .txs-vf-mobile-call-main{z-index:2!important}
  .txs-vf-mobile-call-main .txs-vf-mobile-call-circle{width:64px!important;height:64px!important;flex:0 0 64px!important;margin-top:-28px!important;background:#18b718!important;border:2px solid #fff!important;box-shadow:0 8px 18px rgba(22,163,74,.35)!important}
  .txs-vf-mobile-call-main .txs-vf-mobile-call-circle img{animation:txs-vf-ring 1.2s ease-in-out infinite!important}
  .txs-vf-mobile-call-main>span:last-child{margin-top:-1px!important;color:#374151!important}
  .txs-vf-mobile-contact-person{width:38px!important;height:38px!important;flex-basis:38px!important;background:#fff!important;border:3px solid #e8f1fb!important;box-shadow:0 2px 7px rgba(53,127,189,.14)!important}
}


/* =========================================================
   CN12 FIX V2 — desktop natural logo width + reliable SVG contact icons
   ========================================================= */
@media (min-width:1190px){
  .cn-contact-header .txs-vf-shell{
    display:flex!important;
    align-items:center!important;
    max-width:1280px!important;
    width:calc(100% - 32px)!important;
  }
  .cn-contact-header .txs-vf-left{
    display:flex!important;
    align-items:center!important;
    flex:1 1 auto!important;
    max-width:none!important;
    min-width:0!important;
    gap:28px!important;
  }
  .cn-contact-header .txs-vf-brand{
    display:inline-flex!important;
    flex:0 0 auto!important;
    width:max-content!important;
    min-width:max-content!important;
    max-width:none!important;
    overflow:visible!important;
  }
  .cn-contact-header .txs-vf-logo-box{
    display:inline-flex!important;
    width:max-content!important;
    min-width:max-content!important;
    max-width:none!important;
    height:48px!important;
    overflow:visible!important;
  }
  .cn-contact-header .txs-vf-logo-text{
    display:flex!important;
    width:max-content!important;
    min-width:max-content!important;
    max-width:none!important;
    white-space:nowrap!important;
    overflow:visible!important;
    text-overflow:clip!important;
  }
  .cn-contact-header .txs-vf-logo-img{
    display:block!important;
    width:auto!important;
    max-width:none!important;
    height:48px!important;
    max-height:48px!important;
    object-fit:contain!important;
    object-position:left center!important;
  }
  .cn-contact-header .txs-vf-desktop-menu{
    flex:0 1 auto!important;
    min-width:0!important;
    max-width:none!important;
    overflow:visible!important;
  }
  .cn-contact-header .txs-vf-right{margin-left:auto!important;flex:0 0 auto!important}
}

/* =========================================================
   CN13 FINAL CONTACT SYNC — match Taxi Long Xuyen assets/scale
   ========================================================= */

/* Header phone icons: always white on blue/green hotline buttons. */
.cn-contact-header .txs-vf-hotline-icon,
.cn-contact-header .txs-vf-hotline-icon svg,
.cn-contact-header .txs-vf-hotline-icon svg path{
  color:#fff!important;
  fill:#fff!important;
  stroke:#fff!important;
  filter:none!important;
  opacity:1!important;
}

/* Desktop vertical contact: use original PNG artwork exactly as supplied. */
@media (min-width:601px){
  .menupcmxh{
    position:fixed!important;right:12px!important;bottom:10px!important;top:auto!important;
    transform:scale(.9)!important;transform-origin:right bottom!important;z-index:99998!important;
  }
  .menupcmxh ul{
    padding:16px 9px!important;background:#fff!important;border-radius:12px!important;
    box-shadow:0 2px 12px rgba(0,0,0,.12)!important;
  }
  .menupcmxh a,.menupcmxh button{width:70px!important}
  .menupcmxh .icon-wrap{
    width:40px!important;height:40px!important;display:flex!important;align-items:center!important;
    justify-content:center!important;border-radius:50%!important;background:transparent!important;
    border:0!important;overflow:visible!important;
  }
  .menupcmxh .icon-wrap img{
    display:block!important;width:40px!important;height:40px!important;object-fit:contain!important;
    padding:0!important;margin:0!important;filter:none!important;opacity:1!important;border-radius:0!important;
  }
  .menupcmxh .txt{font-size:13px!important;line-height:1.2!important;color:#000!important;font-weight:600!important}
}

/* Mobile bottom contact bar: dimensions copied from Taxi Long Xuyen.
   Important: remove palette padding/filter so the 64px phone artwork uses the full circle. */
@media (max-width:600px){
  body.txs-body,body.taxi-service-site{padding-bottom:78px!important}
  .txs-vf-mobile-contact{
    display:block!important;position:fixed!important;left:0!important;right:0!important;bottom:0!important;
    height:72px!important;background:rgba(255,255,255,.97)!important;border-top:1px solid #e5e7eb!important;
    box-shadow:0 -4px 16px rgba(15,23,42,.10)!important;z-index:99999!important;
    padding:6px 3px 4px!important;backdrop-filter:blur(8px)!important;
  }
  .txs-vf-mobile-contact-inner{display:flex!important;align-items:flex-start!important;justify-content:space-between!important;height:100%!important;max-width:600px!important;margin:0 auto!important}
  .txs-vf-mobile-contact-item{
    position:relative!important;flex:1 1 20%!important;min-width:0!important;height:62px!important;padding:0 1px!important;
    border:0!important;background:transparent!important;text-decoration:none!important;display:flex!important;
    flex-direction:column!important;align-items:center!important;justify-content:flex-start!important;gap:4px!important;
    color:#4b5563!important;font-family:inherit!important;cursor:pointer!important;
  }
  .txs-vf-mobile-contact-item>span:last-child{font-size:11px!important;line-height:1.15!important;font-weight:500!important;color:#4b5563!important;white-space:nowrap!important;margin-top:1px!important}
  .txs-vf-mobile-contact-icon{
    width:34px!important;height:34px!important;display:flex!important;align-items:center!important;justify-content:center!important;
    flex:0 0 34px!important;border-radius:50%!important;background:transparent!important;border:0!important;box-shadow:none!important;
    overflow:visible!important;padding:0!important;
  }
  .txs-vf-mobile-contact-icon img{
    display:block!important;width:100%!important;height:100%!important;object-fit:contain!important;border-radius:50%!important;
    padding:0!important;margin:0!important;filter:none!important;opacity:1!important;background:transparent!important;
  }
  .txs-vf-mobile-call-main{z-index:2!important}
  .txs-vf-mobile-call-main .txs-vf-mobile-call-circle{
    width:64px!important;height:64px!important;flex:0 0 64px!important;margin-top:-28px!important;
    background:transparent!important;border:2px solid #fff!important;border-radius:50%!important;
    box-shadow:0 8px 18px rgba(22,163,74,.35)!important;padding:0!important;overflow:visible!important;
  }
  .txs-vf-mobile-call-main .txs-vf-mobile-call-circle img{
    display:block!important;width:64px!important;height:64px!important;max-width:none!important;max-height:none!important;
    padding:0!important;margin:0!important;filter:none!important;object-fit:contain!important;border-radius:50%!important;
    animation:txs-vf-ring 1.2s ease-in-out infinite!important;
  }
  .txs-vf-mobile-call-main>span:last-child{margin-top:-1px!important;color:#374151!important}
  .txs-vf-mobile-contact-person{
    width:38px!important;height:38px!important;flex-basis:38px!important;background:transparent!important;
    border:0!important;box-shadow:none!important;padding:0!important;
  }

  /* Contact sheet uses original icons without palette recoloring. */
  .txs-vf-mobile-sheet-list a img,
  .txs-vf-mobile-phone-pop-card>a[href^="tel:"] img{
    filter:none!important;padding:0!important;background:transparent!important;border-radius:50%!important;
    object-fit:contain!important;opacity:1!important;
  }
}