/* ==========================================================================
   MR.VŨ — Footer: 4 cột giới thiệu + tiêu đề "Hệ thống showroom" + văn
   phòng quốc tế

   PHIÊN BẢN AN TOÀN (viết lại sau 4 lần vỡ khung) — KHÔNG đổi display,
   width, float của bất kỳ khối nào. CSS gốc dùng:
     .footer-top .widget{width:25%; float:left}   → GIỮ NGUYÊN
     .footer-bot .widget{width:100%; float:left}  → GIỮ NGUYÊN (vốn dĩ đã
       xếp CHỒNG DỌC trong bản gốc, không phải 3 cột cạnh nhau — thử ép
       thành Grid 3 cột ở bản trước chính là nguyên nhân gây vỡ nhiều lần)
   Chỉ thêm: màu sắc, cỡ chữ, khoảng cách bên trong, viền, bo góc — không
   có thuộc tính nào ảnh hưởng tới cách trình duyệt tính toán vị trí/chiều
   rộng của từng khối.

   Đã sửa trước lỗi .wp-caption (WordPress tự thêm style="width:XXXpx"
   viết thẳng vào HTML cho ảnh có chú thích) — nguyên nhân đã xác nhận gây
   vỡ Grid ở bản trước. Dù bản này không dùng Grid nữa, vẫn giữ lại rule
   phòng ngừa vì ảnh 260px cố định có thể vẫn làm cột 25% trông lệch nếu
   không giới hạn.
   ========================================================================== */

:root{
  --fi-ox:#660000; --fi-ox-tint:#fbeceb;
  --fi-ink:#1f1b18; --fi-body:#4e463c; --fi-muted:#7a7166; --fi-faint:#a89f93;
  --fi-paper:#fff; --fi-sand:#efe9df; --fi-line:#e3ddd4; --fi-line-2:#c8c0b4;
  --fi-r-md:12px; --fi-sh-sm:0 2px 8px rgba(31,27,24,.06);
}

/* ══════════════════ FOOTER-1 — 4 cột giới thiệu ══════════════════ */
/* KHÔNG đụng .footer-top .widget{width;float} — giữ nguyên cơ chế gốc.
   Chỉ giảm padding-top một chút cho gọn (không phải width nên an toàn). */
.footer-top .widget{padding-top:0 !important}

.footer-top .footer-title{
  font-size:12.5px !important; font-weight:800 !important; color:var(--fi-ox) !important;
  letter-spacing:.05em; text-transform:uppercase;
  padding-bottom:8px; border-bottom:2px solid var(--fi-ox-tint);
  margin-bottom:12px !important;
}

.footer-top .widget p{font-size:13px; color:var(--fi-muted); line-height:1.65}
.footer-top .widget ul{list-style:none; margin:0; padding:0}
.footer-top .widget ul li{border-bottom:1px solid var(--fi-line); padding:8px 0}
.footer-top .widget ul li:first-child{padding-top:0}
.footer-top .widget ul li:last-child{border-bottom:0; padding-bottom:0}
.footer-top .widget ul a{font-size:13px; color:var(--fi-body); transition:color .15s ease}
.footer-top .widget ul a:hover{color:var(--fi-ox)}

/* Dòng địa chỉ/email/hotline — giữ nguyên padding-left:30px gốc (chỗ cho
   icon ảnh tuyệt đối định vị), chỉ giảm cỡ chữ/khoảng cách. */
.footer-top .infomation .item{font-size:12.5px !important; margin-bottom:8px; line-height:1.55}
.footer-top .infomation .item:last-child{margin-bottom:0}

/* Icon mạng xã hội/huy hiệu xác thực (Youtube/TikTok/"Đã thông báo Bộ
   Công Thương"/DMCA) — ảnh gốc tải lên kích thước khác nhau tự nhiên (có
   cái vài chục px, có cái vài trăm px), không đồng đều. Lần trước tôi
   đoán nhầm tên class (.apps_ft/.socials_ft — không khớp HTML thật nên
   không có tác dụng). Lần này nhắm theo VỊ TRÍ cột thứ 3 ("Thông tin liên
   hệ" — đúng thứ tự cố định: 1 Giới thiệu, 2 Hỗ trợ, 3 Liên hệ, 4 Văn
   phòng) thay vì đoán tên class — cách này chắc chắn khớp bất kể tên
   class thật là gì. CHỈ áp cho cột thứ 3, không đụng ảnh văn phòng trụ sở
   ở cột thứ 4. */
.footer-top .widget:nth-child(3) img{
  max-height:26px !important; width:auto !important; max-width:80px !important;
  display:inline-block !important; vertical-align:middle;
}

.footer-top .apps_ft img,
.footer-top .socials_ft img{height:24px !important}

/* Ảnh trong widget "Văn phòng trụ sở" — bo góc, giới hạn không tràn cột */
.footer-top .widget img{border-radius:var(--fi-r-md); max-width:100% !important; height:auto !important}
/* THỦ PHẠM ĐÃ XÁC NHẬN (DevTools): WordPress tự thêm style="width:260px"
   viết thẳng vào HTML cho khung bọc ảnh có chú thích — CSS bên ngoài có
   !important vẫn thắng được inline không có !important. */
.footer-top .widget .wp-caption{width:100% !important; max-width:100% !important}

/* ══════════════════ FOOTER-LOCAL — chỉ tiêu đề "Hệ thống showroom" ══════════════════ */
/* Lớn hơn 4 cột phía trên (đây là tiêu đề của 1 khối LỚN, không phải 1
   cột nhỏ) — giữ đúng thứ bậc. KHÔNG đụng nội dung bên dưới tiêu đề. */
.footer-local .head-local .footer-title{
  font-size:12.5px !important; font-weight:800 !important; color:var(--fi-ox) !important;
  letter-spacing:.05em; text-transform:uppercase;
}

/* ══════════════════ FOOTER-2 — Văn phòng quốc tế ══════════════════ */
/* KHÔNG đụng .footer-bot .widget{width;float} — giữ nguyên xếp CHỒNG DỌC
   như bản gốc (đây vốn dĩ không phải layout 3 cột). Chỉ thêm khung thẻ
   (viền/bo góc/nền/khoảng cách) cho từng khối trông gọn gàng hơn — không
   đổi width/float nên không có rủi ro vỡ dòng. */
.footer-bot .widget{
  box-sizing:border-box !important;
  /* Đổi từ border THẬT sang outline+box-shadow — outline KHÔNG tính vào
     kích thước ô (border thì có, dù đã box-sizing:border-box vẫn có thể
     lệch nếu 1 rule nào đó khác ghi đè box-sizing). Cách này loại bỏ
     HOÀN TOÀN khả năng tràn bất kể box-sizing có thắng hay không. */
  background:var(--fi-paper) !important; border:0 !important;
  outline:1px solid var(--fi-line); outline-offset:-1px;
  border-radius:var(--fi-r-md) !important; box-shadow:var(--fi-sh-sm);
  padding:16px 18px !important; margin-bottom:14px !important;
}
.footer-bot .widget:last-child{margin-bottom:0 !important}

.footer-bot .footer-title{
  font-size:12.5px !important; font-weight:800 !important; color:var(--fi-ox) !important;
  letter-spacing:.04em; text-transform:uppercase; margin-bottom:8px !important;
}
.footer-bot .widget p,
.footer-bot .widget div{font-size:12.5px !important; color:var(--fi-body); line-height:1.55}
.footer-bot .widget img{margin:0 6px 0 0 !important; vertical-align:middle}