/* ══════════════════════════════════════════════════════════════
   HỆ THIẾT KẾ — Cổng thông tin doanh nghiệp xã Bình Mỹ
   Lấy thẳng từ logo: xanh trời (chuyển đổi số, mạch điện tử) +
   cam (nông nghiệp, lúa, cây trái) + sao vàng.
   Ngôn ngữ: "mạch nối" — các nút sáng nối nhau bằng nét mảnh,
   như bo mạch trong logo. Tech gặp đồng ruộng.
   ══════════════════════════════════════════════════════════════ */

:root{
  /* — Xanh: mạch số — */
  --xanh-sang:  #00B4F0;   /* cyan sáng — điểm nhấn, nét mạch */
  --xanh:       #0098E0;   /* xanh chính */
  --xanh-sau:   #0068B8;   /* xanh sâu — gradient, chữ xanh */
  --xanh-950:   #06284A;   /* gần navy — nav, chân trang, chữ đậm */
  --xanh-mo:    #E4F4FD;   /* nền vùng xanh nhạt */
  --xanh-vien:  #BFE6F8;

  /* — Cam: nông nghiệp, hành động — */
  --cam:        #F58A00;   /* cam logo */
  --cam-sang:   #FF9E1F;
  --cam-sau:    #D9760A;   /* cam đủ tương phản làm CHỮ (4.6:1) */
  --cam-mo:     #FFF1DE;
  --cam-vien:   #FAD9AC;

  /* — Sao vàng: chỉ trang trí, tiết chế — */
  --vang:       #FFC22E;

  /* — Trung tính lạnh — */
  --nen:        #F4F9FD;   /* nền trang */
  --nen-2:      #EAF2F9;
  --trang:      #FFFFFF;
  --muc:        #0E2233;   /* chữ chính — 15:1 */
  --muc-2:      #4A5D6E;   /* chữ phụ — 7.6:1 */
  --muc-3:      #7A8B99;   /* nhãn nhỏ — 4.6:1 */
  --ke:         #DCE7F0;
  --ke-dam:     #C2D3E0;

  /* — Trạng thái — */
  --ok:         #0E7C4A;
  --ok-nen:     #DEF7EA;
  --canh:       #B26A00;
  --canh-nen:   #FFF2DA;

  /* — Chữ: Be Vietnam Pro xuyên suốt — */
  --hien: 'Be Vietnam Pro', system-ui, -apple-system, sans-serif;
  --than: 'Be Vietnam Pro', system-ui, -apple-system, sans-serif;
  /* nhãn/mã/số vẫn Be Vietnam Pro, chỉ đổi cách trình bày (in hoa + giãn) */
  --mono: 'Be Vietnam Pro', system-ui, -apple-system, sans-serif;

  /* — Nhịp — */
  --r: 12px; --r-nho: 8px; --r-lon: 22px;
  --bong: 0 1px 2px rgba(14,34,51,.05), 0 10px 30px -14px rgba(6,40,74,.22);
  --bong-noi: 0 2px 6px rgba(14,34,51,.07), 0 26px 56px -22px rgba(0,104,184,.34);
  --vien-sang: 0 0 0 1px rgba(0,180,240,.4), 0 0 24px -4px rgba(0,180,240,.5);

  /* — Chuyển động — */
  --ra: cubic-bezier(.22,1,.36,1);
  --nay: cubic-bezier(.34,1.56,.64,1);
  --gr-xanh: linear-gradient(135deg, var(--xanh-sang), var(--xanh-sau));
  --gr-cam:  linear-gradient(135deg, var(--cam-sang), var(--cam-sau));
}

*{ box-sizing: border-box; }
[hidden]{ display: none !important; }   /* thuộc tính hidden luôn thắng display của lớp */
html{ scroll-behavior: smooth; }
body{
  margin: 0; background: var(--nen); color: var(--muc);
  font-family: var(--than); font-size: 16.5px; line-height: 1.7;
  letter-spacing: -.003em;
  -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
p{ line-height: 1.72; }
h1,h2,h3{
  font-family: var(--hien); font-weight: 800; letter-spacing: -.022em;
  line-height: 1.16; margin: 0; text-wrap: balance;
}
h1{ line-height: 1.1; }
a{ color: var(--xanh-sau); text-decoration: none; }

/* Nhãn kỹ thuật số — dùng mono, in hoa, giãn: chất "bo mạch" */
.mi{
  font-family: var(--mono); font-weight: 600; font-size: 12px;
  letter-spacing: .18em; text-transform: uppercase; color: var(--xanh-sau);
  display: inline-flex; align-items: center; gap: 9px;
}
.mi::before{
  content: ""; width: 22px; height: 2px; border-radius: 2px;
  background: var(--gr-xanh);
}
.so{ font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; }

::selection{ background: var(--xanh-sang); color: #fff; }
:focus-visible{ outline: 3px solid var(--xanh); outline-offset: 3px; border-radius: 4px; }

/* Vệt sáng nền — hai quầng xanh/cam rất nhạt trôi chậm, gợi "mạch sống" */
body::before{
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(50vw 44vw at 8% -6%, rgba(0,180,240,.14), transparent 60%),
    radial-gradient(46vw 40vw at 104% 12%, rgba(245,138,0,.10), transparent 58%);
}

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  *,*::before,*::after{ animation-duration:.001ms !important; transition-duration:.001ms !important; }
}