/* ═══════════════════════════════════════════════════════════════════════════════════════════════
   GIAO DIỆN CHUNG (07/10/2026) — phối màu theo mẫu khách gửi: trắng · navy · xanh dương.
   deploy/gan-menu.py gắn tệp này vào MỌI trang, SAU menu.css và CSS riêng của trang, nên chỉ cần
   đổi biến màu ở :root là cả website đổi theo; các chỗ trang tự viết mã màu cứng được ghi đè bên dưới.
   Muốn quay về màu kem cũ: bỏ dòng gắn giao-dien.css trong gan-menu.py rồi build lại.
   ═══════════════════════════════════════════════════════════════════════════════════════════════ */
:root{
  --navy:#0B2A5B; --navy-dam:#071B3D; --navy-nhat:#123A78;
  --xanh:#1F6FEB; --xanh-dam:#1557C0; --xanh-nhat:#E8F0FD;
  --paper:#FFFFFF; --paper-2:#F3F6FA;
  --ink:#0E1B2E; --ink-soft:#56627A;
  --line:#DCE3EE; --line-soft:#E8EDF4;
  --gold:var(--xanh); --gold-ink:var(--xanh-dam);
  --oliu:var(--navy); --slogan-nau:var(--navy); --slogan-oliu:var(--xanh-dam);
  --rule:rgba(11,42,91,.06);
}
body{background:var(--paper); color:var(--ink)}
::selection{background:var(--xanh); color:#fff}
.progress{background:var(--xanh) !important}

/* ── Nút ── */
.btn{background:var(--xanh); color:#fff; border-radius:999px}
.btn:hover{background:var(--xanh-dam) !important; color:#fff}
.btn--vien, .btn--line{background:transparent; color:var(--navy); border:1px solid var(--navy)}
.btn--vien:hover, .btn--line:hover{background:var(--navy) !important; color:#fff}
.btn--sang{background:transparent; color:#fff; border:1px solid rgba(255,255,255,.45)}
.btn--sang:hover{background:rgba(255,255,255,.12) !important}

/* ── Header: nền navy, chữ trắng (mọi trang). Trang chủ: trong suốt khi ở đầu trang, nằm đè lên banner ── */
.nav{background:var(--navy) !important; color:#fff; border-bottom:1px solid rgba(255,255,255,.08) !important;
  backdrop-filter:none; -webkit-backdrop-filter:none; transition:background .4s ease, padding .4s ease}
.nav[data-phu]:not(.is-solid){background:linear-gradient(180deg, rgba(4,16,40,.78) 0%, rgba(4,16,40,.55) 60%, rgba(4,16,40,.3) 100%) !important;
  border-bottom-color:transparent !important}
.nav[data-phu].is-solid{background:rgba(11,42,91,.97) !important; box-shadow:0 10px 30px -18px rgba(4,16,40,.6)}
.nav .brand b{color:#fff}
.nav__tel{color:#fff}
.nav__tel span{color:rgba(255,255,255,.62) !important}
.nav .nn{background:transparent; border-color:rgba(255,255,255,.3)}
.nav .nn a{color:rgba(255,255,255,.72)}
.nav .nn a:hover{color:#fff}
.nav .nn a.on{background:#fff; color:var(--navy)}
.nav .btn{background:var(--xanh); color:#fff}
.nav .mmbtn{color:#fff}
@media (min-width:1100px){
  .nav .mm{border-top-color:rgba(255,255,255,.12)}
  .nav .mm__tab{color:rgba(255,255,255,.9)}
  .nav .mm__tab:hover, .nav .mm__tab[aria-expanded="true"]{color:#fff}
  /* vạch xanh phía TRÊN mục đang rê / đang mở, như mẫu */
  .nav .mm__tab::after{top:-1px; bottom:auto; height:3px; background:var(--xanh)}
  .nav .mm__vach{top:-1px; bottom:auto; height:3px; background:var(--xanh)}   /* vạch trượt: trên mục, màu xanh */
  .nav .mm__tim, .nav .mm__dn{border-left-color:rgba(255,255,255,.14)}
  .nav .mm__tim{color:#fff}
  .nav .mm__tim input{color:#fff}
  .nav .mm__tim input::placeholder{color:rgba(255,255,255,.55)}
  .nav .mm__dn a, .nav .mm__dx{color:rgba(255,255,255,.9)}
  .nav .mm__dn a:hover, .nav .mm__dx:hover{color:#fff}
  /* bảng menu xổ xuống: nền trắng, vạch xanh trên cùng */
  .nav .mm__nen{border-top:3px solid var(--xanh)}   /* nền chung của bảng menu (menu.css) */
}
.mm{--mm-paper:#fff; --mm-ink:var(--ink); --mm-soft:var(--ink-soft); --mm-line:var(--line-soft); --mm-gold:var(--xanh-dam)}
.mm2__nb, .mm2__nhom:hover{background:var(--paper-2) !important}
.mm2__nb{box-shadow:0 0 0 100vmax var(--paper-2) !important}

/* ── Popup báo giá ── */
.bgp{--bgp-paper:#fff; --bgp-ink:var(--ink); --bgp-soft:var(--ink-soft); --bgp-line:var(--line); --bgp-oliu:var(--xanh); --bgp-gold:var(--xanh)}
.bgp__gui{background:var(--xanh) !important; color:#fff !important; border-radius:999px}
.bgp__gui:hover{background:var(--xanh-dam) !important}

/* ── Khối tối (Liên hệ, chân trang) ── */
.contact{background:var(--navy) !important}
.contact .eyebrow{color:#7FB0FF !important}
.foot{background:var(--navy-dam) !important}
.contact .btn, .contact button[type="submit"]{background:var(--xanh); color:#fff}

/* ── Chữ nhấn ── */
.eyebrow{color:var(--xanh-dam)}

/* ── Bỏ vạch kẻ dọc kiểu tạp chí cũ: giao diện mới phẳng, sạch như mẫu ── */
.rules{display:none !important}
/* các khối xen kẽ trắng / xám xanh rất nhạt */
.about, .offer, .news{background:#fff}
.tech{background:var(--paper-2)}
.about, .offer, .news, .tech, .cats{border-top:0 !important}

/* ═════ PHÔNG & MÀU CHỮ theo web mẫu (07/10/2026) ═════
   Phông: Plus Jakarta Sans (gần phông web mẫu thứ hai khách gửi, đủ dấu tiếng Việt; Poppins không có dấu tiếng Việt).
   Tiêu đề: đậm, navy, viết thường (không IN HOA) · thân bài: xám · nhãn nhỏ: IN HOA, xanh, đậm. */
:root{--tieu-de:#0B2FA0; --chu-than:#282828; --font-slogan:"Plus Jakarta Sans", system-ui, sans-serif}
body *:not(code):not(pre):not(kbd):not(samp){font-family:"Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif !important}
body{font-family:"Plus Jakarta Sans", system-ui, sans-serif; color:var(--ink)}

/* tiêu đề khối */
.t-sec, main h2, .bai h2, .than h2{color:var(--tieu-de); font-weight:700 !important; letter-spacing:-.01em !important; text-transform:none !important}
.t-sec .cap{text-transform:none}
main h3, .than h3{color:var(--tieu-de); font-weight:600}
main h1:not(.t-hero){color:var(--tieu-de); font-weight:700; letter-spacing:-.015em}
.contact h2, .contact .t-sec, .cats h2, .cats .t-sec{color:#fff !important}

/* thân bài: xám, đậm hơn bản cũ (300 → 400) cho dễ đọc */
.t-body, .t-sub, main p, .than li{color:var(--chu-than) !important}
/* ngoại lệ: chữ trên nền tối / trên banner giữ màu sáng */
.hero__giua p{color:rgba(255,255,255,.82) !important}
.cats p, .cats .t-body, .contact p, .contact .t-body{color:rgba(255,255,255,.72) !important}
.t-body, .about p, .offer p, .tech p, .news p, .card p, .post p, .kenh__o p, .cat p, .than p, .than li{font-weight:400 !important}

/* nhãn nhỏ phía trên tiêu đề: IN HOA, xanh, đậm */
.eyebrow{color:var(--xanh) !important; font-weight:600 !important; letter-spacing:.14em !important}
.cats .eyebrow, .contact .eyebrow{color:#7FB0FF !important}

/* menu */
.nav .mm__tab{font-weight:500; letter-spacing:0}
.nav .brand b{font-weight:600; letter-spacing:.12em}
.btn{font-weight:600; letter-spacing:.04em}