/* ============================================================
   ExitLag – footer re-coded locally (scoped to footer area)
   Chỉ ảnh hưởng .cta / .footer--contact / #footer,
   không đụng tới các section Elementor phía trên.
   ============================================================ */

/* Font chỉ đặt trên container để CON KẾ THỪA — không dùng `*`,
   nếu không selector `#footer *` (có ID, specificity cao) sẽ đè luôn
   font của Font Awesome khiến icon không hiện glyph. */
.cta, .footer--contact, #footer {
  font-family: 'Roboto', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
}
.cta *, .footer--contact *, #footer * { box-sizing: border-box; }

/* ẩn các modal ẩn của theme lộ ra dưới footer (login, generate password…)
   — chỉ nhắm modal là sibling SAU #footer, không đụng popup Elementor phía trên */
#footer ~ .modal { display: none !important; }

/* widget tạo mật khẩu của template (nằm trong cây Elementor) — mặc định ẩn */
#modalGeneratePassword { display: none !important; }

/* dropdown (vd chọn ngôn ngữ ở footer) — mặc định ẩn như Bootstrap,
   chỉ hiện khi có class .show. Tránh việc list ngôn ngữ bị xổ hết ra. */
.cta .dropdown-menu,
.footer--contact .dropdown-menu,
#footer .dropdown-menu { display: none; }
.cta .dropdown-menu.show,
.footer--contact .dropdown-menu.show,
#footer .dropdown-menu.show { display: block; }
/* nút chọn ngôn ngữ trông gọn gàng */
#footer .select_language.dropdown-toggle,
.footer--contact .select_language.dropdown-toggle {
  display: inline-flex; align-items: center; gap: .4rem;
  color: #b7b7bf; text-decoration: none; cursor: pointer;
}
.cta .container,
.footer--contact .container,
#footer .container {
  width: 100%;
  max-width: 1140px;
  margin-inline: auto;
  padding-inline: 16px;
}

/* shared buttons */
.cta .btn, .footer--contact .btn, #footer .btn {
  display: inline-flex; align-items: center; justify-content: center;
  text-decoration: none; cursor: pointer; transition: .2s ease;
}
.btn-secondary {
  background: #e4322b; color: #fff; text-transform: uppercase;
  padding: .8rem 2.75rem; border-radius: 8px; font-weight: 600; border: none;
}
.btn-secondary:hover { background: #c62822; color: #fff; }

/* ---------- CTA: "Take your connection to the next level" ---------- */
.cta { position: relative; overflow: hidden; padding: 64px 0; text-align: center; background: #0a0a0c; }
.cta .col-md-7 { max-width: 640px; margin: 0 auto; padding: 0; }
.cta h2 { color: #fff; text-transform: uppercase; font-weight: 400; line-height: 1.15;
          font-size: clamp(1.8rem, 4.2vw, 2.75rem); margin: 0 0 1.5rem; }
.cta .fw-600 { font-weight: 700; color: #e4322b; }
.cta .actions { padding-top: 1rem; }
.cta .bg { position: absolute; inset: 0; z-index: 0; display: flex; align-items: center;
           justify-content: center; opacity: .12; pointer-events: none; }
.cta .bg img { max-height: 90%; }
.cta .container { position: relative; z-index: 1; }

/* ---------- Contact block: Support / For business / Discord ---------- */
.footer--contact { background: #0e0e10; padding: 48px 0; color: #c9c9cf; }
.footer--contact-list { display: flex; gap: 40px; }
@media (min-width: 768px) {
  .footer--contact-list { flex-direction: row; justify-content: space-between; text-align: left; }
}
@media (max-width: 767px) {
  .footer--contact-list { flex-direction: column; align-items: center; text-align: center; }
}
.footer--title { color: #fff; font-size: 1.15rem; font-weight: 600; margin: 0 0 .4rem; }
.footer--text  { margin: 0 0 1rem; color: #9a9aa2; }
.footer--link-area { display: inline-flex; align-items: center; gap: .5rem; }
.footer--link { background: none; border: none; padding: 0; color: #e4322b;
                font-weight: 600; cursor: pointer; text-decoration: none; font-size: 1rem; }
.footer--link:hover { text-decoration: underline; }
.footer--link-area svg path { stroke: #e4322b; }

/* ---------- Main footer: logo + menu columns + social ---------- */
#footer { background: #0a0a0c; color: #c9c9cf; padding: 56px 0 32px; }

#footer .row { display: flex; }
#footer .row.flex-md-row { gap: 32px; }
@media (min-width: 768px) {
  #footer .row.justify-content-md-between { flex-direction: row; justify-content: space-between; }
  #footer .row.align-items-center { align-items: center; }
}
@media (max-width: 767px) {
  #footer .row.flex-column { flex-direction: column; }
  #footer .footer_menu { text-align: center; align-items: center; }
}
#footer .row.justify-content-between { justify-content: space-between; }
#footer .row.align-items-center { align-items: center; }

#footer .footer_menu { display: flex; flex-direction: column; }
#footer .footer_menu > a img { max-width: 150px; height: auto; }

#footer h5 { color: #fff; font-weight: 400; text-transform: uppercase;
             font-size: 1rem; letter-spacing: .02em; margin: 0 0 1rem; }

#footer .menu { list-style: none; margin: 0; padding: 0; }
#footer .menu .menu-item { margin: 0 0 .6rem; }
#footer .menu-item-children { color: #b7b7bf; text-decoration: none; font-size: .95rem; transition: color .15s; }
#footer .menu-item-children:hover { color: #fff; }

#footer hr { border: 0; border-top: 1px solid rgba(255,255,255,.12); margin: 2rem 0; }
#footer .pt-3 { padding-top: 1rem; }
#footer .col-md-auto { flex: 0 0 auto; }

/* social icon buttons */
#footer .exl-footer__social { display: flex; gap: .5rem; flex-wrap: wrap; }
#footer .btn-icon { width: 38px; height: 38px; border-radius: 50%;
                    background: rgba(255,255,255,.08); color: #fff; font-size: 1rem; }
#footer .btn-icon:hover { background: #e4322b; color: #fff; }

/* generic footer links fallback */
#footer a { color: #b7b7bf; text-decoration: none; }
#footer a:hover { color: #fff; }

/* ---------- responsive show/hide utilities (scoped) ---------- */
#footer .d-none { display: none; }
@media (min-width: 768px) {
  #footer .d-md-block { display: block; }
  #footer .d-md-none  { display: none; }
}
@media (max-width: 767px) {
  #footer .d-md-none  { display: block; }
}