/*
  style.css — Metop Digital
  CSS riêng của site (ngoài các class tiện ích của Tailwind, nạp qua CDN
  trong <head> mỗi trang). Sửa màu, font, khoảng cách... thì sửa ở đây —
  sửa một lần, mọi trang dùng chung đều đổi theo.

  Xem thêm quy ước thiết kế đầy đủ ở DESIGN.md.
*/

:root {
  --font-base: "Inter", Arial, Helvetica, sans-serif;
  --brand: #0085fc;        /* xanh trong chữ "metop" */
  --brand-dark: #0b6fd4;
  --brand-accent: #f57c21; /* cam của vệt swoosh */
  --ink: #0f1f38;          /* nền tối của footer */
}

html, body, button, input, select, textarea { font-family: var(--font-base); }
body { -webkit-font-smoothing: antialiased; }
html { scroll-behavior: smooth; }

/* Chừa chỗ cho header dính khi nhảy tới mục bằng link #... */
section[id] { scroll-margin-top: 104px; }

/* Logo thương hiệu — đổi file ảnh ở đây nếu có bản logo mới */
.brand-logo {
  background-image: url("../images/logo-metop.jpg");
  background-repeat: no-repeat;
  background-position: left center;
  background-size: contain;
  display: block;
}
.brand-logo--light { background-image: url("../images/logo-metop-light.png"); }
.brand-logo--sm { height: 46px; width: 154px; }
.brand-logo--md { height: 42px; width: 141px; }

/* Mục đang xem được làm nổi trên thanh menu */
.nav-active { color: #0085fc; background: rgb(240 249 255 / .9); }
#mobile-menu .nav-active { color: #0085fc; background: #f0f9ff; }
@media (prefers-reduced-motion: no-preference) {
  .nav-active { transition: color .2s, background-color .2s; }
}

/* Mega menu mở bằng hover trên desktop, bằng focus cho bàn phím */
.has-menu > .menu-panel { opacity: 0; visibility: hidden; transform: translateY(8px); }
.has-menu:hover > .menu-panel,
.has-menu:focus-within > .menu-panel { opacity: 1; visibility: visible; transform: translateY(0); }
.has-menu:hover > button,
.has-menu:focus-within > button { color: #0085fc; background: rgb(240 249 255 / .9); }

/* Header đổ bóng nhẹ khi trang đã cuộn (class .is-scrolled do js/site.js gắn) */
#site-header .header-bar { transition: box-shadow .25s ease, background-color .25s ease; }
#site-header.is-scrolled .header-bar { box-shadow: 0 6px 24px rgb(15 23 42 / .07); }