/* ============================================================
   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; }
}

/* ============================================================
   Feedback 3 (mục 16): footer nền màu thương hiệu #011abd để tách vùng hẳn.
   Đảo toàn bộ chữ/viền/input/social sang tông sáng cho đọc được trên nền tối.
   ============================================================ */
footer{
  /* aurora tối: deep navy + vệt sáng brand (xanh/tím/magenta) — tách biệt mà vẫn sang, không phẳng */
  background:
    radial-gradient(46% 92% at 12% 0%,  rgba(13,153,250,.20), transparent 62%),
    radial-gradient(42% 100% at 88% 4%, rgba(122,77,240,.18), transparent 60%),
    radial-gradient(52% 80% at 62% 100%, rgba(233,20,239,.10), transparent 60%),
    linear-gradient(180deg,#0a0e24 0%,#080a1c 100%);
  color:#fff;
}
footer .foot-logo img{ filter:brightness(0) invert(1); }  /* logo navy -> trắng cho nền tối */
footer .foot-rule{ background:linear-gradient(90deg,#35e9da,#0d99fa,#e914ef); }
footer .foot-intro{ color:rgba(255,255,255,.72); }
footer .fcol-nav, footer .fcol-contact{ border-left-color:rgba(255,255,255,.18); }
footer .fnav-grid a{ color:#fff; }
footer .fnav-grid a:hover{ color:#35e9da; }
footer .fnav-grid .fcta{ background:rgba(255,255,255,.14); color:#fff; }
footer .fnav-grid .fcta:hover{ background:#ff7639; color:#fff; }
footer h5{ color:rgba(255,255,255,.6); }
footer .fcol-contact p{ color:rgba(255,255,255,.72); }
footer .fcol-contact a{ color:#fff; }
footer .fcol-contact a:hover{ color:#35e9da; }
footer .foot-nl input{ background:rgba(255,255,255,.1); border-color:rgba(255,255,255,.25); color:#fff; }
footer .foot-nl input::placeholder{ color:rgba(255,255,255,.55); }
footer .socials a{ background:rgba(255,255,255,.12); color:#fff; }
footer .socials a:hover{ background:linear-gradient(135deg,#e914ef,#0d99fa); color:#fff; }
footer .foot-b{ border-top-color:rgba(255,255,255,.18); color:rgba(255,255,255,.6); }
footer .foot-b .lang b{ color:rgba(255,255,255,.8); }
footer .foot-b a{ color:rgba(255,255,255,.8); }

/* ============================================================
   Feedback 3: ĐỒNG BỘ style CTA "Sẵn sàng..." trên MỌI trang.
   Gom 3 kiểu (.cta-band / .cta-white / .gp-cta) về cùng 1 dải band brand.
   (footer.css nạp sau CSS trang nên override được.)
   ============================================================ */
.gp-cta-sec{ padding:clamp(40px,5vw,72px) 0 clamp(56px,7vw,96px); }
.cta-band,
.cta-white > .wrap,
.gp-cta{
  position:relative; overflow:hidden; text-align:center;
  max-width:1160px; margin-inline:auto;
  padding:clamp(44px,5.5vw,78px) clamp(24px,4vw,60px) !important;
  border-radius:clamp(22px,3vw,34px) !important;
  background:linear-gradient(135deg, rgba(19,126,232,.10), rgba(122,77,240,.12)) !important;
  border:1px solid rgba(20,23,51,.08) !important;
  box-shadow:0 24px 60px -34px rgba(31,38,90,.4) !important;
}
.cta-band h2,
.cta-white h2,
.gp-cta h2{
  font-size:clamp(26px,3.2vw,44px) !important; font-weight:300 !important;
  letter-spacing:-.03em !important; line-height:1.08 !important; color:var(--ink) !important; margin:0;
}
.cta-band .eyebrow,
.cta-white .eyebrow,
.gp-cta .eyebrow{ justify-content:center; }
/* hàng nút đều canh giữa, cách heading đều nhau */
.cta-band .cta-row,
.gp-cta .gp-cta-row{ display:flex; gap:12px; justify-content:center; flex-wrap:wrap; margin-top:28px; }

/* ===== Địa chỉ 2 văn phòng + MST =====
   Feedback 5 (mục 4) đưa khối này vào footer; Feedback 6 (mục 4) chuyển nó từ cột LIÊN HỆ
   sang cột TRÁI (.fcol-brand) vì cột phải quá tải còn cột trái trống.
   Selector viết ở mức .foot-legal để không phụ thuộc cột nào chứa nó. */
.foot-legal{ display:flex; flex-direction:column; gap:6px; }
.foot-legal p{ font-size:13.5px; color:var(--tx-mut); line-height:1.7; margin:0; }
.foot-legal .foot-addr{ display:flex; flex-direction:column; gap:2px; }
.foot-legal .foot-addr-label{ font-weight:600; color:var(--ink); }
.foot-legal .foot-addr-line{ padding-left:2px; }
footer .foot-legal p{ color:rgba(255,255,255,.72); }
footer .foot-legal .foot-addr-label{ color:#fff; }