/* =========================================================
   GOLDEN BAKERY - FLOATING CONTACT PREMIUM
========================================================= */

:root{
  --gb-burgundy: #7b1422;
  --gb-burgundy-dark: #5b0d17;
  --gb-gold: #c9973f;
  --gb-gold-light: #e7c77e;
  --gb-cream: #fffaf1;
  --gb-brown: #382319;
}


/* WRAPPER */
.golden-floating-contact{
  position: fixed !important;
  right: 22px !important;
  bottom: 95px !important;
  z-index: 999999 !important;

  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;

  gap: 11px !important;
}


/* BUTTON */
.golden-floating-contact .golden-contact-btn{
  position: relative !important;

  width: 58px !important;
  height: 58px !important;

  min-width: 58px !important;
  min-height: 58px !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  padding: 0 !important;
  margin: 0 !important;

  border-radius: 50% !important;

  background: var(--gb-cream) !important;

  border: 1px solid rgba(201,151,63,.55) !important;

  color: var(--gb-burgundy) !important;

  text-decoration: none !important;

  overflow: visible !important;

  isolation: isolate;

  box-shadow:
    0 6px 18px rgba(56,35,25,.12),
    0 2px 5px rgba(56,35,25,.06),
    inset 0 0 0 2px rgba(255,255,255,.8) !important;

  transition:
    transform .3s cubic-bezier(.2,.8,.2,1),
    background .3s ease,
    color .3s ease,
    border-color .3s ease,
    box-shadow .3s ease !important;
}


/* =========================================================
   VÒNG GOLD NGOÀI
========================================================= */

.golden-floating-contact .golden-contact-btn::before{
  content: "" !important;

  position: absolute !important;

  inset: -5px !important;

  border-radius: inherit !important;

  padding: 1px;

  background:
    conic-gradient(
      from 0deg,
      transparent 0deg,
      transparent 70deg,
      var(--gb-gold-light) 115deg,
      var(--gb-gold) 160deg,
      transparent 215deg,
      transparent 360deg
    );

  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);

  -webkit-mask-composite: xor;
  mask-composite: exclude;

  opacity: .45;

  pointer-events: none !important;

  transition:
    opacity .3s ease,
    transform .55s ease !important;
}


/* =========================================================
   GLOW NGOÀI
========================================================= */

.golden-floating-contact .golden-contact-btn::after{
  content: "" !important;

  position: absolute !important;

  inset: -10px !important;

  border-radius: 50% !important;

  background:
    radial-gradient(
      circle,
      rgba(201,151,63,.16) 0%,
      rgba(123,20,34,.07) 42%,
      transparent 70%
    );

  opacity: 0;

  transform: scale(.82);

  z-index: -1;

  pointer-events: none !important;

  transition:
    opacity .35s ease,
    transform .35s ease !important;
}


/* =========================================================
   HOVER
========================================================= */

.golden-floating-contact .golden-contact-btn:hover{
  background:
    linear-gradient(
      145deg,
      #861827 0%,
      var(--gb-burgundy-dark) 100%
    ) !important;

  color: #fff !important;

  border-color: var(--gb-gold) !important;

  transform:
    translateY(-3px)
    scale(1.04) !important;

  box-shadow:
    0 12px 28px rgba(123,20,34,.23),
    0 4px 10px rgba(56,35,25,.10),
    inset 0 0 0 2px rgba(255,255,255,.08) !important;
}


/* vòng chạy khi hover */
.golden-floating-contact .golden-contact-btn:hover::before{
  opacity: 1;

  transform: rotate(180deg) scale(1.04);
}


/* glow mở ra */
.golden-floating-contact .golden-contact-btn:hover::after{
  opacity: 1;

  transform: scale(1.12);
}


/* =========================================================
   SVG ICON
========================================================= */

.golden-floating-contact svg{
  position: relative;

  z-index: 2;

  width: 21px !important;
  height: 21px !important;

  fill: currentColor !important;

  color: inherit !important;

  transition:
    transform .3s cubic-bezier(.2,.8,.2,1),
    filter .3s ease !important;
}


.golden-floating-contact .golden-contact-btn:hover svg{
  transform:
    scale(1.12)
    rotate(-4deg) !important;

  filter:
    drop-shadow(0 1px 3px rgba(255,255,255,.18));
}


/* =========================================================
   ZALO
========================================================= */

.golden-floating-contact .golden-zalo-text{
  position: relative;

  z-index: 2;

  font-size: 11px !important;
  line-height: 1 !important;

  font-weight: 700 !important;

  letter-spacing: -.1px !important;

  color: inherit !important;

  transition:
    transform .3s ease,
    color .3s ease !important;
}


.golden-floating-contact
.golden-contact-zalo:hover
.golden-zalo-text{
  transform: scale(1.08);

  color: #fff !important;
}


/* =========================================================
   TOOLTIP
========================================================= */

.golden-floating-contact .golden-contact-tooltip{
  position: absolute !important;

  right: calc(100% + 14px) !important;
  top: 50% !important;

  transform:
    translateY(-50%)
    translateX(8px) !important;

  padding: 8px 12px !important;

  border-radius: 8px !important;

  background:
    linear-gradient(
      135deg,
      var(--gb-burgundy),
      var(--gb-burgundy-dark)
    ) !important;

  color: #fff !important;

  border:
    1px solid rgba(201,151,63,.35) !important;

  font-size: 12px !important;
  line-height: 1 !important;

  font-weight: 600 !important;

  white-space: nowrap !important;

  opacity: 0 !important;
  visibility: hidden !important;

  pointer-events: none !important;

  box-shadow:
    0 7px 20px rgba(56,35,25,.16) !important;

  transition:
    opacity .22s ease,
    visibility .22s ease,
    transform .22s ease !important;
}


/* arrow tooltip */
.golden-floating-contact .golden-contact-tooltip::after{
  content: "" !important;

  position: absolute !important;

  left: 100% !important;
  top: 50% !important;

  transform: translateY(-50%) !important;

  border-top: 5px solid transparent !important;
  border-bottom: 5px solid transparent !important;
  border-left: 5px solid var(--gb-burgundy-dark) !important;
}


/* show tooltip */
.golden-floating-contact
.golden-contact-btn:hover
.golden-contact-tooltip{

  opacity: 1 !important;
  visibility: visible !important;

  transform:
    translateY(-50%)
    translateX(0) !important;
}


/* =========================================================
   PULSE NHẸ CHO PHONE
========================================================= */

@keyframes gbPhonePulse{

  0%{
    box-shadow:
      0 0 0 0 rgba(201,151,63,.26);
  }

  70%{
    box-shadow:
      0 0 0 10px rgba(201,151,63,0);
  }

  100%{
    box-shadow:
      0 0 0 0 rgba(201,151,63,0);
  }

}


.golden-floating-contact
.golden-contact-phone{
  animation:
    gbPhonePulse 3.2s ease-out infinite;
}


/* hover thì bỏ pulse để không bị rối */
.golden-floating-contact
.golden-contact-phone:hover{
  animation: none;
}


/* =========================================================
   MOBILE - GOLDEN BAKERY BOTTOM CONTACT BAR
========================================================= */

@media (max-width: 767px){

  html body .golden-floating-contact{
    position: fixed !important;

    left: 50% !important;
    right: auto !important;

    bottom: 12px !important;
    top: auto !important;

    transform: translateX(-50%) !important;

    width: calc(100% - 28px) !important;
    max-width: 390px !important;

    height: 64px !important;

    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;

    align-items: stretch !important;

    gap: 0 !important;

    padding: 0 !important;
    margin: 0 !important;

    background: rgba(255, 250, 241, .98) !important;

    border: 1px solid rgba(201, 151, 63, .34) !important;

    border-radius: 20px !important;

    box-shadow:
      0 12px 30px rgba(56, 35, 25, .18),
      0 3px 8px rgba(56, 35, 25, .08) !important;

    overflow: hidden !important;

    z-index: 999999 !important;

    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
  }


  /* EACH BUTTON */
  html body .golden-floating-contact > .golden-contact-btn{

    position: relative !important;

    width: 100% !important;
    height: 64px !important;

    min-width: 0 !important;
    max-width: none !important;

    display: flex !important;

    flex-direction: column !important;

    align-items: center !important;
    justify-content: center !important;

    gap: 5px !important;

    padding: 7px 3px !important;
    margin: 0 !important;

    border: 0 !important;
    border-radius: 0 !important;

    background: transparent !important;

    color: #7b1422 !important;

    box-shadow: none !important;

    text-decoration: none !important;

    overflow: hidden !important;

    transform: none !important;
  }


  /* DIVIDER */
  html body .golden-floating-contact > .golden-contact-btn:not(:last-child){
    border-right: 1px solid rgba(123,20,34,.12) !important;
  }


  /* REMOVE DESKTOP RINGS */
  html body .golden-floating-contact
  .golden-contact-btn::before,
  html body .golden-floating-contact
  .golden-contact-btn::after{

    display: none !important;
    content: none !important;
  }


  /* ICON */
  html body .golden-floating-contact
  .golden-contact-btn svg{

    display: block !important;

    width: 19px !important;
    height: 19px !important;

    min-width: 19px !important;

    margin: 0 !important;

    fill: currentColor !important;

    color: #7b1422 !important;

    transform: none !important;
  }


  /* ZALO ICON TEXT */
  html body .golden-floating-contact
  .golden-zalo-text{

    display: flex !important;

    align-items: center !important;
    justify-content: center !important;

    height: 19px !important;

    margin: 0 !important;

    font-size: 10px !important;
    line-height: 19px !important;

    font-weight: 700 !important;

    color: #7b1422 !important;
  }


  /* HIDE TOOLTIP COMPLETELY ON MOBILE */
  html body .golden-floating-contact
  .golden-contact-tooltip{

    display: none !important;
  }


  /* =====================================================
     MOBILE LABELS
  ===================================================== */

  html body .golden-floating-contact
  .golden-contact-btn::marker{
    display: none !important;
  }


  /* tạo label bằng pseudo element riêng */
  html body .golden-floating-contact
  .golden-contact-btn{

    font-size: 0 !important;
  }


  html body .golden-floating-contact
  .golden-contact-phone::after{

    content: "HOTLINE" !important;

    display: block !important;

    position: static !important;

    font-size: 10px !important;
    line-height: 1 !important;

    font-weight: 700 !important;

    letter-spacing: .1px !important;

    color: #7b1422 !important;
  }


  html body .golden-floating-contact
  .golden-contact-zalo::after{

    content: "ZALO" !important;

    display: block !important;

    position: static !important;

    font-size: 10px !important;
    line-height: 1 !important;

    font-weight: 700 !important;

    letter-spacing: .1px !important;

    color: #7b1422 !important;
  }


  html body .golden-floating-contact
  .golden-contact-messenger::after{

    content: "MESSENGER" !important;

    display: block !important;

    position: static !important;

    font-size: 10px !important;
    line-height: 1 !important;

    font-weight: 700 !important;

    letter-spacing: .05px !important;

    color: #7b1422 !important;
  }


  /* TAP EFFECT */
  html body .golden-floating-contact
  .golden-contact-btn:active{

    background:
      rgba(123,20,34,.06) !important;
  }


  /* tránh hover desktop ảnh hưởng mobile */
  html body .golden-floating-contact
  .golden-contact-btn:hover{

    transform: none !important;

    background:
      rgba(123,20,34,.035) !important;

    color: #7b1422 !important;
  }


  html body .golden-floating-contact
  .golden-contact-btn:hover svg,

  html body .golden-floating-contact
  .golden-contact-zalo:hover
  .golden-zalo-text{

    color: #7b1422 !important;

    transform: none !important;
  }


  /* REMOVE PHONE PULSE */
  html body .golden-floating-contact
  .golden-contact-phone{

    animation: none !important;
  }


  /* chừa đáy page */
  html body{
    padding-bottom: 82px !important;
  }

}

/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce){

  .golden-floating-contact *,
  .golden-floating-contact *::before,
  .golden-floating-contact *::after{

    animation: none !important;

    transition:
      opacity .15s ease,
      background-color .15s ease,
      color .15s ease !important;
  }

}