/* ============================================================
   FOOTER dùng chung — TRÍCH NGUYÊN VĂN từ index.html (nguồn chuẩn theo
   DESIGN-SYSTEM.md), gồm cả các rule footer trong media query.

   Bản tĩnh KHÔNG nhất quán: 8 trang (index, ve-chung-toi, các trang danh sách)
   dùng footer 3 cột mới (.fcol-brand/.fcol-nav/.fcol-contact), còn 36 trang chi
   tiết vẫn là footer 4 cột cũ (.fcol-links/.fcol-addr/.fcol-social) — footer đã
   được làm lại nhưng chưa cập nhật hết trang cũ.

   WordPress chỉ có MỘT footer.php, nên CSS footer mới phải nạp cho MỌI trang;
   nếu không, 36 trang chi tiết có markup mới mà thiếu CSS -> footer vỡ
   (cao 1379px thay vì 525px).
   ============================================================ */

/* ============================================================ FOOTER (3 cột: brand · nav+CTA · liên hệ+form) */
footer{ margin-top:clamp(40px,5vw,80px); background:rgba(20,23,51,.035); }
.foot-inner{ padding:0 clamp(20px,11.5vw,160px) clamp(22px,2.4vw,34px); }
.foot-rule{ height:3px; background:var(--red); margin-bottom:clamp(26px,3vw,40px); }
.foot-top{ display:grid; grid-template-columns:1.15fr 1.35fr 1fr; align-items:start; gap:clamp(28px,3vw,56px); }
.foot-top .fcol{ min-width:0; }
.fcol-brand{ display:flex; flex-direction:column; gap:16px; }
.foot-logo{ display:inline-block; }
.foot-logo img{ height:44px; width:auto; display:block; }
.foot-intro{ font-size:13.5px; line-height:1.7; color:var(--tx-mut); max-width:340px; font-weight:500; }
.fcol-nav{ padding-left:clamp(0px,1.4vw,28px); border-left:1px solid rgba(20,23,51,.14); }
.fnav-grid{ list-style:none; display:grid; grid-template-columns:1fr 1fr; grid-template-rows:repeat(4, 46px); grid-auto-flow:column; column-gap:44px; row-gap:0; margin:0; padding:0; align-items:center; }
.fnav-grid li{ list-style:none; display:flex; align-items:center; }
.fnav-grid a{ font-size:14.5px; color:var(--ink); font-weight:600; transition:color .2s; }
.fnav-grid a:hover{ color:var(--purple); }
.fnav-grid .fcta{ display:inline-flex; align-items:center; padding:9px 18px; border-radius:999px;
  background:rgba(250,49,99,.10); color:var(--red); font-weight:700; font-size:13.5px; width:fit-content; }
.fnav-grid .fcta:hover{ background:var(--red); color:#fff; }
.fcol-contact{ padding-left:clamp(0px,1.4vw,28px); border-left:1px solid rgba(20,23,51,.14); display:flex; flex-direction:column; gap:18px; }
footer h5{ font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--tx-faint); margin-bottom:12px; font-weight:700; }
.fcol-contact .fblock{ display:flex; flex-direction:column; gap:6px; }
.fcol-contact p{ font-size:13.5px; color:var(--tx-mut); line-height:1.8; margin:0; }
.fcol-contact a{ color:var(--ink); font-weight:600; transition:color .2s; }
.fcol-contact a:hover{ color:var(--purple); }
.foot-nl{ display:flex; gap:8px; margin-top:10px; max-width:320px; }
.foot-nl input{ flex:1; min-width:0; font-family:inherit; font-size:13px; padding:11px 15px; border-radius:999px;
  border:1px solid var(--g-brd-2); background:rgba(255,255,255,.7); color:var(--ink); outline:none; }
.foot-nl input::placeholder{ color:var(--tx-faint); }
.foot-nl .btn{ padding:10px 18px; }
.socials{ display:flex; gap:10px; margin-top:4px; }
.socials a{ width:36px; height:36px; border-radius:50%; display:grid; place-items:center; background:rgba(20,23,51,.06);
  color:var(--tx-mut); transition:background .25s, color .25s, transform .3s var(--e); }
.socials a:hover{ background:linear-gradient(135deg,var(--purple),var(--blue)); color:#fff; transform:translateY(-3px); }
.socials a svg{ width:16px; height:16px; }
.foot-b{ display:flex; justify-content:space-between; align-items:center; gap:18px; flex-wrap:wrap;
  margin-top:clamp(26px,2.6vw,38px); padding-top:20px; border-top:1px solid rgba(20,23,51,.1); font-size:12.5px; color:var(--tx-faint); }
.foot-b .lang b{ color:var(--tx-mut); }

@media (max-width:1080px){
  .foot-top{ grid-template-columns:1fr 1fr; gap:32px 40px; }
  .fcol-nav, .fcol-contact{ border-left:none; padding-left:0; }
  .fcol-brand{ grid-column:1 / -1; }
}

@media (max-width:620px){
  .foot-top{ grid-template-columns:1fr; }
}