/* ══════════════════════════════════════════════════════════════════════
   BAT AI — KHUNG THƯƠNG HIỆU DÙNG CHUNG (bat-brand.css)
   Header + Footer đồng bộ cho cả 4 trang: Trang chủ · ERP · Công trường
   Online · OCR.

   Bộ nhận diện v2.1 — KHÔNG tự gõ mã màu mới:
     Đỏ Quốc kỳ  #DA251D   (màu chính)
     Đỏ đậm      #B01B14   (trạng thái hover)
     Nền đỏ nhạt #FDECEA
     Vàng Sao    #FFCD00   (chỉ dùng cho ngôi sao / điểm nhấn rất nhỏ)
     Mực         #17181B   ·  Chữ thường #4C5157  ·  Chữ phụ #878C92
     Viền        #E8E6E0   ·  Nền trắng #FFFFFF

   File này được nạp CUỐI CÙNG trong <head> của mỗi trang để ghi đè
   phần header/footer cũ của từng trang. Muốn đổi menu hay logo cho cả
   website: sửa file này + khối <header>/<footer> trong 4 file index.html.

   Kiểu header khai báo trên thẻ <html>:
     <html data-header="noi">  header cố định, đè lên phần đầu trang
                               (dùng cho trang mở đầu bằng hero tối).
     không khai báo            header dính theo cuộn, chiếm chỗ bình thường.
   ══════════════════════════════════════════════════════════════════════ */

/* ─── HEADER ─────────────────────────────────────────────────────────── */
.hd{
  position:sticky;top:0;left:0;right:0;z-index:1000;
  background:rgba(255,255,255,.97);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  border-bottom:1px solid #E8E6E0;
  font-family:'Be Vietnam Pro',system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif;
  color:#17181B;
  transition:box-shadow .25s ease;
}
html[data-header="noi"] .hd{position:fixed}
.hd.on,.hd.scrolled{box-shadow:0 8px 28px rgba(20,20,25,.08)}
.hd .hd__in{
  max-width:1180px;margin:0 auto;padding:0 24px;
  display:flex;align-items:center;gap:26px;height:72px;
}

/* Logo — file gốc assets/logo/bat-ai-logo.svg của bộ nhận diện v2.1.
   Đổi logo sau này: ghi đè đúng file đó, giữ nguyên tên. */
.hd .logo{display:flex;flex-direction:column;align-items:flex-start;line-height:1;text-decoration:none;flex:none}
.hd .logo__img{display:block;height:30px;width:auto;flex:none}
.hd .logo__tag{font-size:.56rem;font-weight:700;letter-spacing:.243em;color:#DA251D;margin-top:7px;white-space:nowrap}

/* Menu chính */
.hd .hd__nav{margin-left:auto}
.hd .hd__nav>ul{display:flex;align-items:center;gap:4px;list-style:none;margin:0;padding:0}
.hd .hd__nav li{list-style:none}
.hd .hd__nav a{
  display:block;text-decoration:none;font-size:.92rem;font-weight:600;
  color:#4C5157;padding:10px 13px;border-radius:8px;transition:.18s;
}
.hd .hd__nav a:hover{color:#DA251D;background:#FDECEA}
.hd .hd__nav>ul>li>a[aria-current="page"],
.hd .hd__nav>ul>li>a.active{color:#DA251D}

/* Menu con "Sản phẩm" */
.hd .has-sub{position:relative}
.hd .has-sub>a::after{content:'▾';font-size:.7em;margin-left:6px;color:#878C92}
.hd .sub{
  position:absolute;top:calc(100% + 10px);left:50%;transform:translateX(-50%) translateY(6px);
  width:min(72vw,540px);display:grid;grid-template-columns:1fr 1fr;gap:6px;
  background:#fff;border:1px solid #E8E6E0;border-radius:14px;
  box-shadow:0 20px 48px rgba(20,20,25,.14);padding:10px;list-style:none;margin:0;
  opacity:0;visibility:hidden;transition:opacity .18s ease,transform .18s ease,visibility .18s;
}
.hd .sub::before{content:'';position:absolute;left:0;right:0;top:-14px;height:14px}
.hd .has-sub:hover .sub,.hd .has-sub:focus-within .sub{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}
.hd .sub a{
  display:flex;align-items:flex-start;gap:10px;padding:11px 12px;border-radius:10px;
  font-weight:500;border:1px solid transparent;
}
.hd .sub a:hover,.hd .sub a:focus-visible{background:#FDECEA;border-color:#F0D8D6}
.hd .sub a[aria-current="page"]{background:#FDECEA;border-color:#F0D8D6}
.hd .sub__ico{
  width:34px;height:34px;border-radius:9px;flex:none;background:#FDECEA;color:#DA251D;
  display:grid;place-items:center;
}
.hd .sub__ico svg{width:18px;height:18px}
.hd .sub a b{display:block;font-weight:700;color:#17181B;font-size:.88rem;line-height:1.3}
.hd .sub a small{color:#878C92;font-size:.74rem;line-height:1.3}

/* Chuyển ngôn ngữ VI / EN */
.hd .lang{display:flex;gap:2px;border:1px solid #E8E6E0;border-radius:8px;padding:3px;flex:none;background:transparent}
.hd .lang button{border:0;background:none;font:inherit;font-size:.78rem;font-weight:700;padding:4px 9px;border-radius:6px;color:#878C92;cursor:pointer;transition:.18s;line-height:1.4}
.hd .lang button:hover:not(.act){color:#DA251D}
.hd .lang .act,.hd .lang button.active{background:#DA251D;color:#fff}

/* Nút hành động chính */
.hd .hd__cta{
  flex:none;display:inline-flex;align-items:center;gap:9px;border-radius:10px;
  padding:13px 24px;font-weight:700;font-size:.95rem;border:1.5px solid transparent;
  background:#DA251D;color:#fff;text-decoration:none;transition:all .2s ease;white-space:nowrap;
}
.hd .hd__cta:hover{background:#B01B14;transform:translateY(-1px);color:#fff}

/* Nút menu di động */
.hd .burger{
  display:none;flex:none;width:44px;height:44px;border:1px solid #E8E6E0;
  border-radius:10px;background:#fff;place-items:center;font-size:1.15rem;color:#17181B;cursor:pointer;
}
.hd .only-m{display:none}

/* ─── FOOTER — nền trắng, logo đỏ, đồng bộ với header ────────────────
   Brandkit v2.1: nền mặc định của mọi ấn phẩm là TRẮNG; đỏ dùng cho logo
   và các điểm nhấn nhỏ (vạch kẻ, dải chân trang); vàng chỉ cho ngôi sao. */
.ft{
  background:#FFFFFF;color:#4C5157;padding-top:64px;
  border-top:3px solid #DA251D;
  font-family:'Be Vietnam Pro',system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif;
  font-size:16px;line-height:1.6;
}
.ft .container{max-width:1180px;margin:0 auto;padding:0 24px}
.ft .ft__grid{display:grid;grid-template-columns:1.7fr 1fr 1fr 1.35fr;gap:38px}
.ft .logo{display:flex;flex-direction:column;align-items:flex-start;line-height:1;text-decoration:none;flex:none}
/* filter:none — gỡ quầng sáng đỏ vốn dùng cho chân trang nền tối */
.ft .logo__img{display:block;height:30px;width:auto;flex:none;filter:none}
.ft .logo__tag{font-size:.56rem;font-weight:700;letter-spacing:.243em;color:#DA251D;margin-top:7px;white-space:nowrap}
.ft .ft__blurb{font-size:.9rem;color:#4C5157;line-height:1.8;margin-top:16px;max-width:330px}
.ft h4{color:#17181B;font-size:.92rem;font-weight:700;letter-spacing:.05em;margin:0 0 16px}
.ft .ft__col a{display:block;text-decoration:none;color:#4C5157;font-size:.9rem;padding:5px 0;transition:.15s}
.ft .ft__col a:hover{color:#DA251D}
.ft .ft__col p{font-size:.88rem;line-height:1.8;color:#878C92;margin:0}
.ft .ft__bar{
  border-top:1px solid #E8E6E0;margin-top:44px;padding:22px 0;
  display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;
  font-size:.82rem;color:#878C92;
}
.ft .ft__bar .star{color:#FFCD00}

/* ─── Responsive ─────────────────────────────────────────────────────── */
@media(max-width:980px){
  .hd .burger{display:grid}
  .hd .hd__cta,.hd .lang{display:none}
  .hd .only-m{display:block}
  .hd .hd__nav{
    position:fixed;left:0;right:0;top:72px;background:#fff;
    border-bottom:1px solid #E8E6E0;box-shadow:0 24px 40px rgba(20,20,25,.12);
    padding:14px 22px 24px;display:none;max-height:calc(100vh - 72px);overflow:auto;
  }
  body.nav-open .hd .hd__nav{display:block}
  .hd .hd__nav>ul{flex-direction:column;align-items:stretch;gap:2px}
  .hd .hd__nav a{padding:12px 10px}
  .hd .has-sub>a::after{content:''}
  .hd .sub{
    position:static;box-shadow:none;border:0;padding:0 0 6px 10px;width:auto;
    grid-template-columns:1fr;transform:none;
    opacity:1;visibility:visible;transition:none;
  }
  .hd .sub::before{content:none}
  .hd .only-m .hd__cta{display:inline-flex;justify-content:center;width:100%;margin-top:10px}
  .ft .ft__grid{grid-template-columns:1fr 1fr}
}
@media(max-width:640px){
  .ft .ft__grid{grid-template-columns:1fr;gap:30px}
}
@media(prefers-reduced-motion:reduce){
  .hd,.hd *{transition:none!important}
}