/* HIBO V1.14.55 — SOCIAL CLEAN
   Same SVG/icons and links as V1.14.54.
   Cleaner Sapo-like UI: subtle depth, restrained gradients, lighter hover. */

/* Footer social buttons */
.hibo-footer-socials.hibo-social-3d{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  align-items:center;
}

.hibo-footer-socials.hibo-social-3d .hibo-social-btn{
  --social1:#667085;
  --social2:#475467;
  display:inline-flex;
  align-items:center;
  gap:8px;
  min-height:40px;
  padding:6px 13px 6px 7px;
  border:1px solid #e4e7ec;
  border-radius:12px;
  background:#fff;
  color:#344054;
  font-size:13px;
  font-weight:600;
  line-height:1;
  text-decoration:none;
  box-shadow:0 2px 6px rgba(16,24,40,.06);
  transform:translateY(0);
  transition:
    transform .16s ease,
    box-shadow .16s ease,
    border-color .16s ease,
    color .16s ease,
    background .16s ease;
}

.hibo-footer-socials.hibo-social-3d .hibo-social-btn::before{
  content:none!important;
}

.hibo-footer-socials.hibo-social-3d .hibo-social-btn:hover{
  transform:translateY(-1px);
  border-color:color-mix(in srgb,var(--social1) 35%,#e4e7ec);
  background:#fcfcfd;
  color:var(--social2);
  box-shadow:0 4px 10px rgba(16,24,40,.08);
}

.hibo-footer-socials.hibo-social-3d .hibo-social-btn:active{
  transform:translateY(0);
  box-shadow:0 1px 3px rgba(16,24,40,.06);
}

.hibo-social-icon{
  display:grid;
  place-items:center;
  width:29px;
  height:29px;
  flex:0 0 29px;
  border-radius:9px;
  color:#fff;
  background:var(--social1);
  box-shadow:0 2px 5px color-mix(in srgb,var(--social1) 18%,transparent);
}

.hibo-social-icon::before{
  content:none!important;
}

.hibo-social-icon svg{
  width:16px;
  height:16px;
  fill:currentColor;
  stroke:none;
}

.hibo-social-icon svg .play,
.hibo-social-icon svg .mark{
  fill:#fff;
}

.hibo-social-btn.is-facebook{--social1:#1877f2;--social2:#145fc2}
.hibo-social-btn.is-youtube{--social1:#ff0000;--social2:#cc0000}
.hibo-social-btn.is-shopee{--social1:#ee4d2d;--social2:#d93f22}
.hibo-social-btn.is-lazada{--social1:#5f32ea;--social2:#4724b8}
.hibo-social-btn.is-instagram{--social1:#d946ef;--social2:#a21caf}
.hibo-social-btn.is-twitter{--social1:#222;--social2:#000}

/* Floating contact dock — restrained depth, no glossy highlight */
@media (min-width:576px){
  .contact-dock{
    gap:9px!important;
    right:18px!important;
    bottom:22px!important;
  }

  .contact-dock a{
    display:grid!important;
    place-items:center;
    width:52px!important;
    min-width:52px!important;
    height:52px!important;
    padding:0!important;
    border:1px solid rgba(255,255,255,.22);
    border-radius:50%!important;
    color:#fff!important;
    font-size:0!important;
    box-shadow:
      0 5px 12px rgba(16,24,40,.18),
      0 1px 3px rgba(16,24,40,.12)!important;
    overflow:hidden;
    transform:translateY(0);
    transition:
      transform .16s ease,
      box-shadow .16s ease,
      filter .16s ease;
  }

  .contact-dock a::before{
    content:none!important;
  }

  .contact-dock a:hover{
    transform:translateY(-2px);
    filter:saturate(1.03);
    box-shadow:
      0 7px 15px rgba(16,24,40,.20),
      0 2px 4px rgba(16,24,40,.12)!important;
  }

  .contact-dock a:active{
    transform:translateY(0);
    box-shadow:0 3px 7px rgba(16,24,40,.16)!important;
  }

  .contact-dock a svg,
  .contact-dock-zalo-mark{
    width:23px;
    height:23px;
    color:#fff;
    fill:currentColor;
    stroke:currentColor;
    stroke-width:1.7;
  }

  .contact-dock a svg .mark{
    fill:#fff;
    stroke:none;
  }

  .contact-dock-zalo-mark{
    display:grid;
    place-items:center;
    font-size:19px;
    font-weight:800;
    line-height:1;
  }

  .contact-dock-phone{background:#c90000!important}
  .contact-dock-zalo{background:#0b84ee!important}
  .contact-dock-facebook{background:#1877f2!important}
  .contact-dock-map{background:#475467!important}

  .contact-dock a > span:last-child{
    display:none!important;
  }
}

@media (max-width:575px){
  .hibo-footer-socials.hibo-social-3d{
    gap:8px;
  }

  .hibo-footer-socials.hibo-social-3d .hibo-social-btn{
    min-height:37px;
    padding:5px 10px 5px 6px;
    border-radius:11px;
    font-size:12px;
  }

  .hibo-social-icon{
    width:27px;
    height:27px;
    flex-basis:27px;
    border-radius:8px;
  }

  .hibo-social-icon svg{
    width:15px;
    height:15px;
  }
}