/* =====================================================
   ORELI FOOTER TOP
===================================================== */

.oreli-footer-top{
  background:#eaeaeaf2;
  padding:56px 0 40px;
  border-top:1px solid #eee;
}

.services_nav_footer{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:40px;
}

.footer-column h3{
  font-size:15px;
  font-weight:700;
  color:#7a1b5b;
  margin-bottom:14px;
  text-transform:uppercase;
}

.footer-column ul{
  list-style:none;
  padding:0;
  margin:0;
}

.footer-column li{
  margin-bottom:8px;
}

.footer-column a{
  color:#555;
  font-size:14px;
  text-decoration:none;
  transition:all .25s ease;
}

.footer-column a:hover{
  color:#c2185b;
  padding-left:4px;
}


/* =====================================================
   FOOTER BOTTOM
===================================================== */

.oreli-footer-bottom{
  background:linear-gradient(135deg,#8e0e5a 0%, #c2185b 100%);
  color:#fff;
  padding:48px 0 24px;
}

.oreli-footer-bottom__grid{
  display:grid;
  grid-template-columns:1.2fr 1fr 1fr;
  gap:40px;
  align-items:flex-start;
}

.oreli-footer-logo{
  max-width:140px;
  margin-bottom:14px;
}

.oreli-footer-about p{
  font-size:14px;
  line-height:1.7;
  opacity:.95;
}

/* middle posts */

.oreli-footer-posts h4,
.oreli-footer-contact h4{
  font-size:16px;
  font-weight:700;
  margin-bottom:14px;
}

.oreli-footer-posts ul{
  list-style:none;
  padding:0;
  margin:0;
}

.oreli-footer-posts li{
  margin-bottom:10px;
}

.oreli-footer-posts a{
  color:#fff;
  text-decoration:none;
  font-size:14px;
  opacity:.9;
  transition:.2s;
}

.oreli-footer-posts a:hover{
  opacity:1;
  text-decoration:underline;
}

/* contact */

.oreli-footer-contact p{
  margin:6px 0;
  font-size:14px;
  opacity:.95;
}

/* copyright */

.oreli-copyright{
  margin-top:28px;
  padding-top:16px;
  border-top:1px solid rgba(255,255,255,.25);
  text-align:center;
  font-size:13px;
  opacity:.85;
}

/* =====================================================
   FLOATING BUTTONS
===================================================== */

.backToTop{
  position:fixed;
  right:22px;
  bottom:120px;
  width:44px;
  height:44px;
  border-radius:50%;
  background:#c2185b;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  z-index:999;
  box-shadow:0 6px 16px rgba(0,0,0,.2);
}

.backToTop svg{
  fill:#fff;
}

.hotline_mobile{
  position:fixed;
  left:18px;
  bottom:22px;
  width:54px;
  height:54px;
  border-radius:50%;
  background:#e53935;
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:999;
  box-shadow:0 8px 20px rgba(0,0,0,.25);
}

.hotline_mobile svg{
  fill:#fff;
}

/* zalo */

.oreli-zalo-float{
  position:fixed;
  right:22px;
  bottom:60px;
  z-index:999;
}

.zalo-pulse{
  position:absolute;
  inset:0;
  border-radius:50%;
  background:rgba(0,132,255,.25);
  animation:zaloPulse 1.8s infinite;
}

@keyframes zaloPulse{
  0%{transform:scale(1);opacity:.6}
  70%{transform:scale(1.6);opacity:0}
  100%{opacity:0}
}

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

@media (max-width: 991px){

  .services_nav_footer{
    grid-template-columns:repeat(2,1fr);
    gap:28px;
  }

  .oreli-footer-bottom__grid{
    grid-template-columns:1fr;
    gap:28px;
  }

}

@media (max-width: 575px){

  .services_nav_footer{
    grid-template-columns:1fr;
  }

  .oreli-footer-top{
    padding:40px 0 30px;
  }

}
/* ========================================
   FLOAT BASE
======================================== */

.backToTop,
.hotline_mobile,
.oreli-zalo-float{
  position: fixed;
  z-index: 999;
}

/* ========================================
   DESKTOP (>= 992px)
======================================== */

@media (min-width: 992px){

  /* ẨN hotline */
  .hotline_mobile{
    display:none !important;
  }

  /* Back to top */
  .backToTop{
    right:22px;
    bottom:30px;
  }

  /* Zalo nằm TRÊN backtotop */
  .oreli-zalo-float{
    right:22px;
    bottom:90px; /* ⭐ nằm trên */
  }
}

/* ========================================
   MOBILE (< 992px)
======================================== */

@media (max-width: 991px){

  /* Hotline bên trái */
  .hotline_mobile{
    left:16px;
    bottom:20px;
    display:flex;
  }

  /* Zalo nằm trên hotline */
  .oreli-zalo-float{
    left:16px;
    right:auto;
    bottom:84px; /* ⭐ nằm trên hotline */
  }

  /* Back to top bên phải */
  .backToTop{
    right:16px;
    bottom:20px;
  }
}

/* ========================================
   SIZE CHUẨN ORELI
======================================== */

.backToTop{
  width:44px;
  height:44px;
  border-radius:50%;
  background:#c2185b;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 6px 16px rgba(0,0,0,.2);
}

.hotline_mobile{
  width:56px;
  height:56px;
  border-radius:50%;
  background:#e53935;
  align-items:center;
  justify-content:center;
  box-shadow:0 8px 20px rgba(0,0,0,.25);
}

.oreli-zalo-float img{
  width:56px;
  height:56px;
  display:block;
}

/* pulse giữ nguyên */

.zalo-pulse{
  position:absolute;
  inset:0;
  border-radius:50%;
  background:rgba(0,132,255,.25);
  animation:zaloPulse 1.8s infinite;
}

@keyframes zaloPulse{
  0%{transform:scale(1);opacity:.6}
  70%{transform:scale(1.6);opacity:0}
  100%{opacity:0}
}
/* =====================================================
   ORELI FLOATING ANIMATIONS PRO
===================================================== */

/* ---------- HOTLINE RING ---------- */

.hotline_mobile{
  animation: oreliPhoneShake 2.6s ease-in-out infinite;
  transform-origin: center;
}

@keyframes oreliPhoneShake{
  0%{transform:rotate(0)}
  5%{transform:rotate(-12deg)}
  10%{transform:rotate(12deg)}
  15%{transform:rotate(-10deg)}
  20%{transform:rotate(10deg)}
  25%{transform:rotate(-6deg)}
  30%{transform:rotate(0)}
  100%{transform:rotate(0)}
}

/* ---------- HOTLINE PULSE RING ---------- */

.hotline_mobile::after{
  content:"";
  position:absolute;
  inset:-6px;
  border-radius:50%;
  border:2px solid rgba(229,57,53,.35);
  animation: oreliPhonePulse 2.6s ease-out infinite;
}

@keyframes oreliPhonePulse{
  0%{transform:scale(.9);opacity:.8}
  70%{transform:scale(1.5);opacity:0}
  100%{opacity:0}
}

/* ---------- ZALO FLOAT ---------- */

.oreli-zalo-float{
  animation: oreliZaloFloat 3.2s ease-in-out infinite;
}

@keyframes oreliZaloFloat{
  0%{transform:translateY(0)}
  50%{transform:translateY(-6px)}
  100%{transform:translateY(0)}
}

/* ---------- ZALO PULSE UPGRADE ---------- */

.zalo-pulse{
  animation: oreliZaloPulse 2s infinite;
}

@keyframes oreliZaloPulse{
  0%{transform:scale(1);opacity:.6}
  70%{transform:scale(1.8);opacity:0}
  100%{opacity:0}
}

/* ---------- BACK TO TOP HOVER ---------- */

.backToTop{
  transition: all .25s ease;
}

.backToTop:hover{
  transform: translateY(-4px);
  box-shadow:0 10px 26px rgba(0,0,0,.28);
}

/* ---------- MOBILE PERFORMANCE SAFE ---------- */

@media (prefers-reduced-motion: reduce){
  .hotline_mobile,
  .oreli-zalo-float,
  .zalo-pulse{
    animation:none !important;
  }
}
.oreli-footer-main{
  background:#f3f6fa;
  padding:48px 0 32px;
}
.oreli-footer-bottom{
  background:linear-gradient(90deg,#8b2c8f,#c2185b);
  color:#fff;
  padding:14px 0;
  text-align:center;
  font-size:14px;
}
/* ===== FIX màu column kết quả ===== */
.oreli-footer-main .oreli-footer-posts a{
  color:#333;
  opacity:1;
}

.oreli-footer-main .oreli-footer-posts a:hover{
  color:#8b2c8f;
}
.oreli-footer-main .oreli-footer-posts h4{
  color:#111;
  margin-bottom:12px;
  font-weight:600;
}


/* ===== FOOTER MAIN (tối hơn top) ===== */
.oreli-footer-main{
  background:#f7f7f7; /* ⭐ khuyên dùng */
  color:#333;
  padding:48px 0 32px;
}

/* text trong main */
.oreli-footer-main a{
  color:#333;
  opacity:.9;
}

.oreli-footer-main a:hover{
  opacity:1;
}

/* ===== FOOTER BOTTOM ===== */
.oreli-footer-bottom{
  background:linear-gradient(90deg,#880063,#880063);
  color:#fff;
}
/* ================================
   ORELI FOOTER BOTTOM — SLIM FIX
   ================================ */

/* Thanh tím mỏng lại */
.oreli-footer-bottom{
  padding:8px 0;
  font-size:13px;
  line-height:1.3;
  display:flex;
  align-items:center;
  min-height:auto;
}

/* Bỏ khoảng đệm thừa trong container */
.oreli-footer-bottom .oreli-container{
  padding-top:0 !important;
  padding-bottom:0 !important;
}

/* Copyright gọn */
.oreli-copyright{
  margin:0;
  line-height:1.3;
  font-size:13px;
  text-align:center;
}

/* (tuỳ chọn) đường line trên cho premium */
.oreli-footer-bottom{
  border-top:1px solid rgba(255,255,255,.15);
}
/* ===== HOTLINE ICON FIX ===== */
.hotline_mobile svg,
.hotline_mobile i{
  width:24px;
  height:24px;
  fill:#fff;
  color:#fff;
  display:block;
}
.backToTop{
position:fixed;
right:20px;
bottom:20px;
width:56px;
height:56px;
background:#880063;
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
cursor:pointer;

opacity:0;
visibility:hidden;

transition:all .3s ease;
z-index:9999;
}

.backToTop.show{
opacity:1;
visibility:visible;
}

/* mobile */
@media (max-width:768px){

.backToTop{
width:36px;
height:36px;
right:16px;
bottom:25px;
}

.backToTop svg{
width:20px;
height:20px;
}

}