/* ============================================================
   TechTide — Footer (Adobe-style)
   Nội dung chỉnh ở WP admin → Appearance → Menus
   (Footer Menu = cột, Social Menu = icon, Legal Menu = Privacy/Terms)
   Hiệu ứng lộ logo nằm trong assets/js/footer.js
   Build chuẩn MacBook ~1440 / iMac ~2240, co giãn mượt.
   ============================================================ */

/* ---- biến cỡ logo lớn (sửa nhanh khi xem trực tiếp) ---- */
:root{
  --tt-bigmark-w: 110%;                         /* >100% để logo tràn sát mép (MacBook). iMac bị trần --tt-bigmark-max chặn lại */
  --tt-bigmark-max: var(--tt-bar-maxw, 1904px); /* trần = đúng bề rộng pill (iMac) */
  --tt-bigmark-maxh: 46vh;                      /* cao tối đa vùng lộ */
}

/* ---------- Footer trên (nền đen) ---------- */
.tt-footer{ background:#000; color:#fff; }
.tt-footer__inner{
  width:100%; max-width:var(--tt-bar-maxw, 1904px); margin-inline:auto;   /* rộng tối đa = pill (iMac) */
  padding: clamp(3.5rem,6vw,6rem) clamp(1.5rem,5vw,6rem) clamp(2.5rem,3vw,3.5rem);
}

/* 5 cột */
.tt-footer__cols{
  display:grid;
  grid-template-columns:repeat(5, minmax(0,1fr));
  gap: clamp(1.5rem,2.5vw,2.75rem);
}
.tt-fcol__title{
  font-family:var(--tt-font-display);
  font-size:1rem; font-weight:700; color:#fff;
  margin:0 0 1.15rem; line-height:1.3;
}
.tt-fcol__list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.72rem; }
.tt-fcol__link{
  color:rgba(255,255,255,.6); font-size:.875rem; line-height:1.4;
  text-decoration:none; overflow-wrap:break-word; transition:color .18s ease;
}
.tt-fcol__link:hover{ color:#fff; }

/* thanh dưới: copyright + legal (trái) · social (phải) */
.tt-footer__bar{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
  gap:1rem 1.5rem;
  margin-top: clamp(2.5rem,5vw,4rem);
  padding-top:1.5rem;
  border-top:1px solid rgba(255,255,255,.14);
}
.tt-footer__legalwrap{ display:flex; flex-wrap:wrap; align-items:center; gap:.5rem 1.5rem; }
.tt-footer__copy{ color:rgba(255,255,255,.6); font-size:.8rem; letter-spacing:.02em; }
.tt-legal{ list-style:none; display:flex; flex-wrap:wrap; gap:.5rem 1.5rem; margin:0; padding:0; }
.tt-legal__link{ color:rgba(255,255,255,.6); font-size:.8rem; text-decoration:none; transition:color .18s ease; }
.tt-legal__link:hover{ color:#fff; }

/* icon mạng xã hội */
.tt-social{ list-style:none; display:flex; align-items:center; gap:1.15rem; margin:0; padding:0; }
.tt-social__link{ color:rgba(255,255,255,.8); display:inline-flex; transition:color .18s ease, transform .18s ease; }
.tt-social__link:hover{ color:#fff; transform:translateY(-1px); }
.tt-social__link svg{ width:20px; height:20px; display:block; fill:currentColor; }

/* focus ring (a11y) */
.tt-fcol__link:focus-visible, .tt-legal__link:focus-visible, .tt-social__link:focus-visible{
  outline:2px solid var(--tt-accent); outline-offset:3px; border-radius:3px;
}

/* ---------- Logo lớn (nền đen, sát mép); JS lo phần lộ ra ---------- */
.tt-bigmark{
  background:#000; overflow:hidden; pointer-events:none;
  max-height:var(--tt-bigmark-maxh);
  display:flex; justify-content:center; align-items:flex-end; line-height:0;
}
.tt-bigmark__img{
  width:var(--tt-bigmark-w); max-width:var(--tt-bigmark-max);
  height:auto; display:block; will-change:clip-path, transform;
}

/* ---------- Responsive ---------- */
/* iMac/màn lớn: thu lề 2 bên về đúng padding của pill → cột rộng bằng pill */
@media (min-width:1600px){
  .tt-footer__inner{ padding-left:var(--tt-bar-pad, 28px); padding-right:var(--tt-bar-pad, 28px); }
}
@media (max-width:1024px){
  .tt-footer__cols{ grid-template-columns:repeat(2,1fr); gap:2rem 1.5rem; }
}
@media (max-width:560px){
  .tt-footer__cols{ grid-template-columns:1fr; gap:1.75rem; }
  .tt-footer__bar{ flex-direction:column; align-items:flex-start; gap:1.25rem; }
}