/* ==========================================================================
   footer.css - 3 phan: dai "Back to top" (blue), dai footer chinh (navy),
   dong copyright 2 mau. Trang single KHONG co dai Back to top (SPEC muc 5).
   ========================================================================== */

/* ---------- Dai "Back to top" ---------- */
.ec-backtotop {
  background-color: var(--ec-blue);
  color: var(--ec-on-blue);
}

.ec-backtotop__link {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--ec-space-2);
  padding: var(--ec-space-3) var(--ec-gutter);
  color: var(--ec-on-blue);
  font-family: var(--ec-font-ui);
  font-size: var(--ec-fs-foot);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  transition: background-color var(--ec-dur-fast) var(--ec-ease);
}

.ec-backtotop__link:hover {
  background-color: var(--ec-navy);
  color: var(--ec-on-navy);
  text-decoration: none;
}

/* Mui nhon "^" - trang tri, luon di kem aria-hidden trong markup */
.ec-backtotop__arrow {
  display: inline-block;
  font-size: var(--ec-fs-md);
  line-height: 1;
}

/* ---------- Dai footer chinh ---------- */
.ec-footer {
  background-color: var(--ec-navy);
  color: var(--ec-on-navy);
}

.ec-footer__main {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--ec-space-4);
  padding-block: var(--ec-space-6);
}

.ec-footer a {
  color: var(--ec-on-navy);
}

.ec-footer a:hover {
  color: var(--ec-green); /* green tren navy = 8.9:1, dat chuan */
}

/* Menu footer */
.ec-footer__nav-list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ec-space-2) var(--ec-space-4);
  margin: 0;
  padding: 0;
  list-style: none;
  font-family: var(--ec-font-ui);
  font-size: var(--ec-fs-foot);
}

.ec-footer__nav-link {
  font-family: var(--ec-font-ui);
  font-size: var(--ec-fs-foot);
}

/* Cot giua: 4 icon social - dung lai .ec-social tu header.css */
.ec-footer__social {
  display: flex;
  justify-content: center;
}

/* Khoi ben phai (lien he) */
.ec-footer__contact {
  font-family: var(--ec-font-ui);
  font-size: var(--ec-fs-foot);
}

/* Bien the cot doc cho widget Link row */
.ec-footer__nav-list--column {
  flex-direction: column;
  align-items: flex-start;
}

/* ---------- Widget trong footer (vung ec-footer-links / ec-footer-copyright) ----------
   .ec-footer__main la flex space-between: widget phai la flex item truc tiep de
   giu dung cach dan hang nhu ban hardcode. */
.ec-footer__main > .ec-links-widget,
.ec-footer__main > .ec-text-widget {
  display: flex;
  align-items: center;
}

.ec-footer__main .ec-text-widget__body {
  font-family: var(--ec-font-ui);
  font-size: var(--ec-fs-foot);
}

/* ---------- Dong copyright 2 mau ---------- */
.ec-footer__copyright {
  padding-block: var(--ec-space-4);
  border-top: var(--ec-rule-width) solid var(--ec-border-on-navy);
  color: var(--ec-on-navy);
  font-family: var(--ec-font-ui);
  font-size: var(--ec-fs-foot);
  text-align: center;
}

/* "Edu-Circular" trong copyright: font Comic, 2 mau, chu dau to hon */
.ec-footer__brand {
  font-family: var(--ec-font-logo);
  font-size: var(--ec-fs-foot-logo);
  font-weight: 700;
}

.ec-footer__brand .ec-brand__edu { color: var(--ec-on-navy); }

.ec-footer__brand .ec-brand__circular { color: var(--ec-green); }

.ec-footer__brand .ec-brand__cap {
  font-size: var(--ec-fs-foot-logo-cap);
}

/* Logo dang anh trong dong copyright: nho hon header, can theo dong chu */
.ec-footer__brand--image {
  display: inline-block;
  vertical-align: middle;
}

.ec-footer__brand-image {
  display: inline-block;
  width: auto;
  height: var(--ec-logo-height-foot, 24px);
  max-width: 160px;
  object-fit: contain;
  vertical-align: middle;
}

/* Widget Text thay dong copyright: ke thua can giua tu .ec-footer__copyright */
.ec-footer__copyright .ec-text-widget__body + .ec-text-widget__body {
  margin-top: var(--ec-space-2);
}

/* Tuy chon canh le cua widget Text, ghi de mac dinh cua vung chua no */
.ec-text-widget__body--left { text-align: left; }
.ec-text-widget__body--center { text-align: center; }
.ec-text-widget__body--right { text-align: right; }

/* ==========================================================================
   Responsive footer
   ========================================================================== */
@media (max-width: 767px) {
  .ec-footer__main {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--ec-space-5);
  }

  .ec-footer__nav-list {
    justify-content: center;
  }
}