/* ============================================================================
   madai-footer.css — Thiết kế lại GÁY DƯỚI (.footer + .box-copyright)
   Trang chủ bản nháp vantaimadai.com.vn — khung dùng chung home.php nên khối
   này hiện ở MỌI trang. File CHỈ ĐÈ CSS, KHÔNG đụng HTML/PHP — 3 cột hiện có
   (Logo+Liên hệ / TK Ngân Hàng / Facebook Mã Đại) và dòng bản quyền giữ
   nguyên cấu trúc thẻ, chỉ đổi hình thức.
   Bộ màu ĐO TỪ LOGO — dùng lại đúng biến đã khai ở madai-2026.css (:root),
   không tự đặt màu khác. Khai lại y hệt giá trị ở đây làm LƯỚI AN TOÀN
   (phòng khi thứ tự nạp CSS đổi khác đi, đằng nào giá trị cũng giống hệt):
   ============================================================================ */
.footer, .box-copyright{
  --md-xanh:#009966; --md-xanh-dam:#00875a; --md-xanh-sau:#00734d;
  --md-cam:#e8730f; --md-son:#c8392b;
}

/* --------------------------------------------------------------------------
   1) KHUNG NGOÀI — nền xanh sâu thương hiệu (không còn xám #2a363b mặc định
   của theme cũ), có vạch kim tuyến mảnh ở mép trên để nối tiếp ngôn ngữ
   "vạch gradient đỉnh thẻ" đã dùng ở madai-dichvu.css (.item:before).
   -------------------------------------------------------------------------- */
.footer{
  background:#2a363b !important;   /* giữ nguyên màu bản đang chạy — chủ chốt 01/10 */
  color:#eaf6f1 !important;
  padding:46px 0 36px !important;
  position:relative !important;
}
.footer:before{
  content:"" !important; position:absolute !important; top:0 !important; left:0 !important; right:0 !important;
  height:2px !important; background:linear-gradient(90deg,transparent,rgba(217,164,65,.55),transparent) !important;
}

/* Cột: .module nằm GIỮA .row và 3 khối .col-md-4 (không phải con trực tiếp
   của .row) — đưa .module sang flex để 3 cột cao đều, canh trên gọn gàng.
   .row/.module không cùng mang class "row" trên 1 thẻ như ca lỗi từng gặp ở
   .policy ul.list.row (madai-dichvu.css mục 1), nên an toàn khi bật flex. */
.footer .module{
  display:flex !important; flex-wrap:wrap !important; align-items:flex-start !important;
}
.footer .col-md-4{ padding-top:4px !important; }

/* --------------------------------------------------------------------------
   2) CỘT 1 — LOGO + LIÊN HỆ
   -------------------------------------------------------------------------- */
.footer .footer-logo{ margin-bottom:18px !important; }
.footer .footer-logo img{ max-height:52px !important; width:auto !important; }

.footer .contact-info ul{ margin:0 !important; padding:0 !important; list-style:none !important; }
.footer .contact-info li{
  padding:0 0 12px !important; display:flow-root !important; /* chứa float icon, không đổ cao 0 */
}
.footer .contact-info li:last-child{ padding-bottom:0 !important; }

/* Huy hiệu icon tròn — thay icon đỏ mặc định (#bc1515, lệch bộ màu thương
   hiệu) bằng khung tròn viền mảnh trong suốt, icon trắng — dùng CHUNG cho
   icon liên hệ ở cả cột 1 và cột 2 (TK Ngân Hàng) vì cùng cấu trúc .contact-icon. */
.footer .contact-icon{
  float:left !important; width:26px !important; height:26px !important; margin:1px 0 0 !important;
  border-radius:50% !important; background:rgba(255,255,255,.10) !important;
  border:1px solid rgba(255,255,255,.24) !important;
  display:flex !important; align-items:center !important; justify-content:center !important;
}
.footer .contact-icon span.fa{
  float:none !important; width:auto !important; color:#fff !important; font-size:12.5px !important;
}
.footer .contact-text{
  margin-left:36px !important; font-size:13.5px !important; line-height:1.65 !important;
  color:#dcf1ea !important;
}
.footer .contact-text span{ color:inherit !important; }

/* Dòng KHÔNG có icon (địa chỉ Trung Quốc) vẫn được base CSS cộng thêm
   margin-left:35px cho .contact-text dù thiếu .contact-icon đứng trước —
   giữ nguyên vì tạo thẳng hàng chữ với các dòng có icon, không lệch mắt. */

/* Email — tô đậm nhẹ để dễ tìm giữa các dòng địa chỉ. */
.footer .footer-widget .contact-info li:nth-last-child(2) .contact-text{
  font-weight:700 !important; color:#fff !important;
}

/* Hotline — nổi bật nhất cột 1: icon đổi màu kim, chữ trắng đậm cỡ lớn.
   ⚠️ Chữ giữ MÀU TRẮNG (không dùng kim #e8730f cho chữ) vì đo tương phản
   kim/#00734d chỉ ~3,66 — dưới ngưỡng 4,5 cho chữ thường; kim chỉ an toàn
   dùng cho mảng NHỎ (icon) hoặc viền, không dùng cho khối chữ. */
.footer .footer-widget .contact-info li:last-child{
  margin-top:10px !important; padding-top:12px !important;
  border-top:1px dashed rgba(255,255,255,.22) !important;
}
.footer .footer-widget .contact-info li:last-child .contact-icon{
  background:var(--md-cam) !important; border-color:var(--md-cam) !important;
}
.footer .footer-widget .contact-info li:last-child .contact-icon span.fa{ color:#3a2600 !important; }
.footer .footer-widget .contact-info li:last-child .contact-text,
.footer .footer-widget .contact-info li:last-child .contact-text span{
  color:#fff !important; font-size:18px !important; font-weight:800 !important; letter-spacing:.2px !important;
}

/* --------------------------------------------------------------------------
   3) TIÊU ĐỀ CỘT ("TK Ngân Hàng", "Facebook Mã Đại") — gạch chân kim tuyến,
   cùng ngôn ngữ với .title-main:after ở madai-2026.css (mục 2), chỉ đổi
   canh trái thay vì canh giữa vì đây là tiêu đề cột, không phải tiêu đề khối.
   -------------------------------------------------------------------------- */
.footer .footer-title{ margin-bottom:14px !important; }
.footer .footer-title h4{
  color:#fff !important; font-size:16px !important; font-weight:800 !important;
  text-transform:uppercase !important; letter-spacing:.3px !important; margin:0 !important;
  position:relative !important; padding-bottom:10px !important;
}
.footer .footer-title h4:after{
  content:"" !important; position:absolute !important; left:0 !important; bottom:0 !important;
  width:42px !important; height:3px !important; border-radius:2px !important;
  background:linear-gradient(90deg,var(--md-cam),transparent) !important;
}

/* --------------------------------------------------------------------------
   4) CỘT 2 — TK NGÂN HÀNG (dùng lại .contact-info/.contact-icon ở mục 2)
   -------------------------------------------------------------------------- */
.footer .footer-item .contact-text{ font-weight:600 !important; color:#fff !important; }

/* --------------------------------------------------------------------------
   5) CỘT 3 — FACEBOOK MÃ ĐẠI. Widget FB (iframe do JS SDK dựng) hoặc thẻ
   <blockquote> dự phòng khi SDK chưa kịp nạp/bị chặn — cả 2 đều bị ép
   max-width:100% để không tràn cột hẹp (~240px ở khổ máy tính bảng 768-991px).
   -------------------------------------------------------------------------- */
.footer .fb-page,
.footer .fb-page iframe,
.footer .fb-page span,
.footer .fb_iframe_widget,
.footer .fb_iframe_widget span,
.footer .fb_iframe_widget iframe{
  max-width:100% !important; width:100% !important;
}
.footer .fb-page blockquote{
  margin:0 !important; padding:14px 16px !important;
  background:rgba(255,255,255,.07) !important; border:1px solid rgba(255,255,255,.20) !important;
  border-radius:12px !important;
}
.footer .fb-page blockquote a{
  color:#fff !important; font-weight:700 !important; text-decoration:none !important;
  font-size:14px !important;
}
.footer .fb-page blockquote a:before{
  font-family:FontAwesome !important; content:"\f09a" !important; color:var(--md-cam) !important;
  margin-right:7px !important; font-weight:400 !important;
}
.footer .fb-page blockquote a:hover{ color:var(--md-cam) !important; }

/* --------------------------------------------------------------------------
   6) DÒNG BẢN QUYỀN — tách khỏi khối trên bằng đường kẻ mảnh, chữ nhỏ nhưng
   vẫn đủ tương phản (đo #bfe4d8 trên nền #00332a ≈ 8,6:1, dư xa ngưỡng 4,5).
   -------------------------------------------------------------------------- */
.box-copyright{
  background:#232e33 !important; border-top:1px solid rgba(255,255,255,.12) !important;
}
.box-copyright .copyright{
  background:transparent !important; border-top:0 !important;
  color:#bfe4d8 !important; font-size:12.5px !important; letter-spacing:.15px !important;
  padding-top:13px !important; padding-bottom:13px !important;
}

/* --------------------------------------------------------------------------
   7) MÁY TÍNH BẢNG (≤991px) — vẫn giữ 3 cột (khớp class col-sm-4 có sẵn
   trong HTML), chỉ nới khoảng cách để không sát mép.
   -------------------------------------------------------------------------- */
@media(max-width:991px){
  .footer .col-md-4{ padding-bottom:14px !important; }
}

/* --------------------------------------------------------------------------
   8) ĐIỆN THOẠI (≤767px) — HTML đã tự xuống 1 cột nhờ class col-xs-12 có
   sẵn; ở đây chỉ canh giữa tiêu đề/logo cho đẹp, còn danh sách liên hệ vẫn
   canh TRÁI bên trong khối canh-giữa (giữ nguyên bố cục icon-nổi-trái vốn
   có, tránh vỡ khi ép text-align:center đè lên phần tử float).
   -------------------------------------------------------------------------- */
@media(max-width:767px){
  .footer{ padding:36px 0 28px !important; }
  .footer .col-md-4{
    text-align:center !important; margin-bottom:30px !important; padding-bottom:0 !important;
  }
  .footer .col-md-4:last-child{ margin-bottom:6px !important; }
  .footer .footer-logo{ text-align:center !important; }
  .footer .footer-title h4:after{ left:50% !important; transform:translateX(-50%) !important; }
  .footer .contact-info ul{
    display:inline-block !important; text-align:left !important; max-width:320px !important;
  }
  .box-copyright .copyright{ font-size:12px !important; padding:12px 14px !important; line-height:1.6 !important; }
}