/* ========== SGDIEN Contact Footer (Frontend) ========== */
/* Version: 2.8.3 (safe-area + polish + show-both) */

/* Tokens */
:root{
  --sgcf-bar-h: 65px;
  --sgcf-safe: env(safe-area-inset-bottom, 0px);
}

/* ------------------ Mobile footer bar ------------------ */
/* Ẩn mặc định trên PC, chỉ hiện <= 850px (trừ khi có override khác) */
#sangiaodienptvn-contact-footer-outer {
  position: fixed;
  left: 0; right: 0;
  width: 100%;
  z-index: 100 !important;
  bottom: 0;
  padding-bottom: var(--sgcf-safe);
  display: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
}

#sangiaodienptvn-contact-footer:after {
  content: "";
  position: absolute;
  pointer-events: none; /* background-image sẽ được thêm bằng PHP */
  background-color: unset;
  background-position: center top;
  background-repeat: no-repeat;
  background-size: 100%;
  box-shadow: unset;
  height: calc(var(--sgcf-bar-h) + var(--sgcf-safe));
  width: 100%;
  margin-left: 0;
  margin-bottom: 0;
  left: 0;
  bottom: 0;
  z-index: -1;
}

#sangiaodienptvn-contact-footer {
  border-bottom: 15px solid #fff;
  display: flex;
  max-width: 1200px;
  margin: auto;
  position: relative;
  padding-top: 5px;
}

#sangiaodienptvn-contact-footer > a {
  position: relative;
  display: block;
  width: 25%;
  text-align: center;
  padding: 11px 0 0 0;
  color: #313131;
  text-decoration: none;
  touch-action: manipulation;
}

#sangiaodienptvn-contact-footer > span { display: block; width: 30px; }
#sangiaodienptvn-contact-footer span { display: block; }

.sangiaodienptvn-contact-footer-btn-label {
  padding: 0 2px;
  font-size: 11px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: bold;
}

#sangiaodienptvn-contact-footer > a img {
  height: 30px;
  width: 30px;
}

#azt-contact-footer-btn-center {
  position: relative;
  background: transparent !important;
}

#sangiaodienptvn-contact-footer-btn-center .sangiaodienptvn-contact-footer-btn-label {
  position: absolute;
  left: 50%;
  bottom: 2px;
  transform: translateX(-50%);
}

#sangiaodienptvn-contact-footer-btn-center .sangiaodienptvn-contact-footer-btn-label > span {
  padding: 0 8px;
  background-image: linear-gradient(92.83deg, #0E68C8 0, #02A4A5 100%);
  border-radius: 30px;
  color: #fff;
  display: inline-block;
}

.sangiaodienptvn-contact-footer-btn-center-icon {
  left: 50%;
  position: absolute;
  transform: translateX(-50%);
  background-image: linear-gradient(92.83deg, #f90000 0, #950099 100%);
  width: 50px;
  height: 50px;
  border-radius: 50%;
  top: -28px;
  text-align: center;
  box-shadow: rgb(0 0 0 / 15%) 0 -3px 10px 0px;
  border: 2px solid #fff;
  will-change: transform;
}

.sangiaodienptvn-contact-footer-btn-center-icon img {
  max-width: 20px;
  height: auto !important;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.phone-vr-circle-fill {
  width: 50px;
  height: 50px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  box-shadow: 0 0 0 0 #0E68C8;
  border: 2px solid transparent;
  transition: all .5s;
  animation: zoom 1.3s infinite;
  will-change: box-shadow, transform;
}

@keyframes zoom {
  0% {}
  70% { box-shadow: 0 0 0 15px transparent }
  100% { box-shadow: 0 0 0 0 transparent }
}

/* Hiện thanh mobile khi <= 850px */
@media only screen and (max-width: 850px) {
  #sangiaodienptvn-contact-footer-outer { display: block; }
}

/* Chặn cứng thanh mobile trên desktop (>= 851px), kể cả khi CSS khác cố bật */
@media (min-width: 851px) {
  #sangiaodienptvn-contact-footer-outer { display: none !important; }
}

/* ------------------ VIP Desktop Floating Buttons (PC) ------------------ */
.phucnguyentvpsangiaodien-contact {
  position: fixed;
  bottom: 20px;
  /* KHÔNG đặt left/right mặc định để tránh dính về trái */
  left: auto;
  right: auto;
  z-index: 99999;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Ẩn mọi khối VIP không phải khối plugin (#sgdien-vip-pc) */
.phucnguyentvpsangiaodien-contact:not(#sgdien-vip-pc) {
  display: none !important;
}

.phucnguyentvpsangiaodien-chat-zalo,
.phucnguyentvpsangiaodien-chat-face,
.phucnguyentvpsangiaodien-hotline {
  border: none;
  background: rgba(209, 200, 193, 0.8);
  cursor: pointer;
  transition: transform 0.3s;
  border-radius: 50%;
  overflow: hidden;
  padding: 5px;
  margin-bottom: 10px;
  width: 60px;
  height: 60px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  box-shadow: 0 6px 18px rgba(0,0,0,.15);
  touch-action: manipulation;
}

.phucnguyentvpsangiaodien-chat-zalo:hover,
.phucnguyentvpsangiaodien-chat-face:hover,
.phucnguyentvpsangiaodien-hotline:hover {
  transform: scale(1.1);
}

.phucnguyentvpsangiaodien-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  transition: transform 0.3s;
  display: block;
}

.phucnguyentvpsangiaodien-chat-zalo:hover .phucnguyentvpsangiaodien-icon,
.phucnguyentvpsangiaodien-chat-face:hover .phucnguyentvpsangiaodien-icon,
.phucnguyentvpsangiaodien-hotline:hover .phucnguyentvpsangiaodien-icon {
  transform: scale(1.1);
}

/* Ẩn cụm VIP trên mobile (<= 850px) để không đè lên thanh mobile */
@media (max-width: 850px) {
  .phucnguyentvpsangiaodien-contact { display: none; }
}

/* Vị trí cho cụm VIP (PC) – chỉ áp dụng cho khối plugin */
#sgdien-vip-pc.vip-pos-left  { left: 20px !important;  right: auto !important; }
#sgdien-vip-pc.vip-pos-right { right: 20px !important; left:  auto !important; }

/* ------------------ VIP Bubble (PC – PRO) ------------------ */
#sgdien-vip-bubble {
  position: fixed;
  bottom: calc(20% + var(--sgcf-safe)); /* tôn trọng safe-area */
  z-index: 100000;
  display: flex;
  flex-direction: column;
  gap: 12px;
  pointer-events: auto;

  /* Biến dùng chung, PHP sẽ đổ inline từ options */
  --sgb-color: rgba(14,104,200,.65);
  --sgb-speed: 1.6s;
  --sgb-bg: rgba(255,255,255,.98);   /* NEW: màu nền nút (có thể override từ admin) */
}

#sgdien-vip-bubble.vip-bubble-right { right: 20px; left: auto; }
#sgdien-vip-bubble.vip-bubble-left  { left: 20px;  right: auto; }

.sgdien-bubble-btn {
  position: relative;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: var(--sgb-bg, rgba(255,255,255,.98));
  box-shadow: 0 8px 22px rgba(0,0,0,.18);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  overflow: visible;
  transition: transform .25s ease, box-shadow .25s ease;
  will-change: transform;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.sgdien-bubble-btn:hover {
  transform: translateY(-2px) scale(1.06);
  box-shadow: 0 10px 26px rgba(0,0,0,.22);
}

.sgdien-bubble-btn img {
  width: 32px;
  height: 32px;
  display: block;
  animation: sgdien-wiggle calc(var(--sgb-speed, 1.6s) * 1.5) ease-in-out infinite;
  transform-origin: 50% 50%;
  will-change: transform;
}

/* “Bong bóng” toả ra – mặc định (đồng thời cho tất cả nút) */
.sgdien-bubble-pulse {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  box-shadow: 0 0 0 0 var(--sgb-color, rgba(14,104,200,.65));
  animation: sgdien-pulse var(--sgb-speed, 1.6s) ease-out infinite;
  pointer-events: none;
}

/* Ép mọi hiệu ứng chạy ĐỒNG THỜI, không delay từng nút */
#sgdien-vip-bubble .sgdien-bubble-btn .sgdien-bubble-pulse,
#sgdien-vip-bubble .sgdien-bubble-btn .sgdien-bubble-pulse::before,
#sgdien-vip-bubble .sgdien-bubble-btn .sgdien-bubble-pulse::after,
#sgdien-vip-bubble .sgdien-bubble-btn img {
  animation-delay: 0s !important;
}

/* Ẩn VIP Bubble trên mobile (mặc định) */
@media (max-width: 850px) {
  #sgdien-vip-bubble { display: none; }
}

/* ------------------ Animations (base) ------------------ */
@keyframes sgdien-pulse {
  0%   { box-shadow: 0 0 0 0   var(--sgb-color, rgba(14,104,200,.65)); opacity: .96; }
  70%  { box-shadow: 0 0 0 24px rgba(14,104,200,0);                     opacity: .32; }
  100% { box-shadow: 0 0 0 0   rgba(14,104,200,0);                      opacity: 0; }
}

@keyframes sgdien-wiggle {
  0%,100% { transform: rotate(0) translateY(0); }
  10% { transform: rotate(-6deg); }
  20% { transform: rotate(6deg); }
  30% { transform: rotate(-3deg); }
  40% { transform: rotate(3deg); }
  50% { transform: rotate(0) translateY(-1.5px); }
  60% { transform: rotate(0); }
}

/* Giảm hiệu ứng nếu người dùng bật “reduce motion” */
@media (prefers-reduced-motion: reduce) {
  .sgdien-bubble-btn img,
  .sgdien-bubble-pulse,
  .phone-vr-circle-fill {
    animation: none !important;
  }
}

/* =========================================================
   HIỆU ỨNG TÙY CHỌN: default / glow / rings / orbit / vr
   (áp dụng khi #sgdien-vip-bubble có class .sgdien-effect-*)
   ========================================================= */

/* --- DEFAULT: dùng base ở trên --- */
#sgdien-vip-bubble.sgdien-effect-default .sgdien-bubble-btn img {}

/* --- GLOW: vầng sáng mượt quanh nút --- */
#sgdien-vip-bubble.sgdien-effect-glow .sgdien-bubble-btn::after {
  content: "";
  position: absolute;
  inset: -8px;
  border-radius: 50%;
  pointer-events: none;
  box-shadow:
    0 0 24px var(--sgb-color, rgba(14,104,200,.35)),
    0 0 48px rgba(0,0,0,.10);
  animation: sgdien-glow calc(var(--sgb-speed, 1.6s) * 1.1) ease-in-out infinite;
}
@keyframes sgdien-glow {
  0%,100% { opacity: .9; transform: scale(1); }
  50%     { opacity: .6; transform: scale(1.04); }
}

/* --- RINGS: 2 vòng ripple chạy song song (dày hơn) --- */
#sgdien-vip-bubble.sgdien-effect-rings .sgdien-bubble-btn .sgdien-bubble-pulse {
  box-shadow: 0 0 0 0 var(--sgb-color, rgba(14,104,200,.70));
  animation: sgdien-pulse var(--sgb-speed, 1.6s) ease-out infinite;
}
#sgdien-vip-bubble.sgdien-effect-rings .sgdien-bubble-btn .sgdien-bubble-pulse::before,
#sgdien-vip-bubble.sgdien-effect-rings .sgdien-bubble-btn .sgdien-bubble-pulse::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  box-shadow: 0 0 0 0 var(--sgb-color, rgba(14,104,200,.55));
  animation: sgdien-pulse var(--sgb-speed, 1.6s) ease-out infinite;
}
#sgdien-vip-bubble.sgdien-effect-rings .sgdien-bubble-btn .sgdien-bubble-pulse::before { inset: -6px; }
#sgdien-vip-bubble.sgdien-effect-rings .sgdien-bubble-btn .sgdien-bubble-pulse::after  { inset: -12px; }

/* --- ORBIT: quỹ đạo chấm quay quanh nút --- */
#sgdien-vip-bubble.sgdien-effect-orbit .sgdien-bubble-btn::before {
  content: "";
  position: absolute;
  inset: -12px;
  border-radius: 50%;
  border: 2px dashed rgba(0,0,0,.06);
  box-shadow:
    0 -28px 0 -26px var(--sgb-color, rgba(14,104,200,.65)),
    28px 0 0 -26px var(--sgb-color, rgba(14,104,200,.55)),
    0 28px 0 -26px var(--sgb-color, rgba(14,104,200,.45)),
    -28px 0 0 -26px var(--sgb-color, rgba(14,104,200,.35));
  animation: sgdien-orbit var(--sgb-speed, 1.6s) linear infinite;
  pointer-events: none;
}
@keyframes sgdien-orbit {
  0%   { transform: rotate(0deg)   scale(1); }
  50%  { transform: rotate(180deg) scale(1.02); }
  100% { transform: rotate(360deg) scale(1); }
}

/* --- VR: khung to + 3 ripple --- */
#sgdien-vip-bubble.sgdien-effect-vr .sgdien-bubble-btn {
  width: 60px;
  height: 60px;
  box-shadow: 0 10px 28px rgba(0,0,0,.22);
}
#sgdien-vip-bubble.sgdien-effect-vr .sgdien-bubble-btn img {
  width: 36px;
  height: 36px;
  animation: sgdien-wiggle calc(var(--sgb-speed, 1.6s) * 1.4) ease-in-out infinite;
}
#sgdien-vip-bubble.sgdien-effect-vr .sgdien-bubble-btn .sgdien-bubble-pulse {
  box-shadow: 0 0 0 0 var(--sgb-color, rgba(14,104,200,.75));
  animation: sgdien-vr-pulse var(--sgb-speed, 1.6s) ease-out infinite;
}
#sgdien-vip-bubble.sgdien-effect-vr .sgdien-bubble-btn .sgdien-bubble-pulse::before {
  content: "";
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  box-shadow: 0 0 0 0 var(--sgb-color, rgba(14,104,200,.65));
  animation: sgdien-vr-pulse var(--sgb-speed, 1.6s) ease-out infinite;
}
#sgdien-vip-bubble.sgdien-effect-vr .sgdien-bubble-btn .sgdien-bubble-pulse::after {
  content: "";
  position: absolute;
  inset: -12px;
  border-radius: 50%;
  box-shadow: 0 0 0 0 var(--sgb-color, rgba(14,104,200,.55));
  animation: sgdien-vr-pulse var(--sgb-speed, 1.6s) ease-out infinite;
}
#sgdien-vip-bubble.sgdien-effect-vr .sgdien-bubble-btn::after {
  content: "";
  position: absolute;
  inset: -10px;
  border-radius: 50%;
  box-shadow:
    0 0 24px var(--sgb-color, rgba(14,104,200,.40)),
    0 0 48px rgba(0,0,0,.10);
  animation: sgdien-glow calc(var(--sgb-speed, 1.6s) * 1.1) ease-in-out infinite;
  pointer-events: none;
}
@keyframes sgdien-vr-pulse {
  0%   { box-shadow: 0 0 0 0   var(--sgb-color, rgba(14,104,200,.75)); opacity: .95; }
  70%  { box-shadow: 0 0 0 24px rgba(14,104,200,0);                     opacity: .32; }
  100% { box-shadow: 0 0 0 0   rgba(14,104,200,0);                      opacity: 0; }
}

/* =========================================================
   HIỂN THỊ ĐỒNG THỜI (PC + Mobile)
   - Thanh mobile CHỈ hiển thị trên mobile.
   - Khi bật show-both: Cho phép VIP Bubble hiển thị cả trên mobile.
   ========================================================= */

/* Mặc định không ép thanh mobile xuất hiện trên PC – giữ @media ở trên */

/* Khi body có .sgdien-cf-show-both: bật VIP Bubble cả trên mobile
   và đẩy nó lên trên thanh mobile để không đè nút */
@media (max-width: 850px){
  body.sgdien-cf-show-both #sgdien-vip-bubble{
    display: flex !important;
    bottom: calc(var(--sgcf-bar-h) + 18px + var(--sgcf-safe));
  }
}

/* Nhẹ nhàng fix overlap nếu trang có footer sticky khác */
@supports (padding: max(0px)){
  #sangiaodienptvn-contact-footer-outer{
    padding-bottom: max(var(--sgcf-safe), 0px);
  }
}

/* Focus-visible để accessibility tốt hơn */
#sangiaodienptvn-contact-footer a:focus-visible,
#sgdien-vip-bubble a:focus-visible{
  outline: 2px solid rgba(14,104,200,.6);
  outline-offset: 2px;
  border-radius: 12px;
}

/* Giảm va chạm style theme */
#sangiaodienptvn-contact-footer a,
#sgdien-vip-bubble a{
  color: inherit; text-decoration: none;
}