/* MayAI — site.css
   Sinh tự động từ bộ thiết kế design_handoff_mayai_website.
   Giá trị màu/cỡ chữ giữ nguyên bản thiết kế; phần :hover dịch từ
   thuộc tính style-hover, phần @media hợp nhất luật của cả 7 trang. */

html { scroll-behavior: smooth; }
body { margin: 0; font-family: 'Be Vietnam Pro', Arial, sans-serif; color: #211F1C; background: #FAF8F4; -webkit-font-smoothing: antialiased; }
a { color: #9A610B; text-decoration: none; }
a:hover { color: #B9760F; }
* { box-sizing: border-box; }
@keyframes maPulse { 0%,100% { opacity: 1; } 50% { opacity: 0.35; } }
@keyframes maBlink { 0%,49% { opacity: 1; } 50%,100% { opacity: 0; } }
@keyframes maRow { 0% { opacity: 0; transform: translateY(8px); } 12% { opacity: 1; transform: translateY(0); } 88% { opacity: 1; } 100% { opacity: 1; } }
@keyframes maScan { 0% { transform: translateX(-100%); } 100% { transform: translateX(340%); } }

img { max-width: 100%; }
input, select, button, textarea { font-family: inherit; }
:focus-visible { outline: 2px solid #B9760F; outline-offset: 2px; }

/* ---- sơ đồ động ở khối Uy tín (trang chủ) và Giới thiệu ---- */
/* Thay ảnh tĩnh proof-brands.png. Bốn chấm amber chạy từ lõi ra bốn
   nhánh, tới nơi thì viền ô sáng lên — vòng lặp 8 giây. */
.ma-hub { font-family: 'Be Vietnam Pro', Arial, sans-serif; }
.ma-hub-dot { opacity: 0; }
.ma-hub-bar { opacity: .35; }
.ma-hub-live { animation: maPulse 1.8s infinite; }
.ma-hd1 { animation: maHubA 8s linear infinite; }
.ma-hd2 { animation: maHubB 8s linear infinite .5s; }
.ma-hd3 { animation: maHubC 8s linear infinite 1s; }
.ma-hd4 { animation: maHubD 8s linear infinite 1.5s; }
.ma-hb1 .ma-hub-bar { animation: maHubBar 8s ease-in-out infinite 1.6s; }
.ma-hb2 .ma-hub-bar { animation: maHubBar 8s ease-in-out infinite 2.1s; }
.ma-hb3 .ma-hub-bar { animation: maHubBar 8s ease-in-out infinite 2.6s; }
.ma-hb4 .ma-hub-bar { animation: maHubBar 8s ease-in-out infinite 3.1s; }
.ma-hb1 rect:first-child { animation: maHubEdge 8s ease-in-out infinite 1.6s; }
.ma-hb2 rect:first-child { animation: maHubEdge 8s ease-in-out infinite 2.1s; }
.ma-hb3 rect:first-child { animation: maHubEdge 8s ease-in-out infinite 2.6s; }
.ma-hb4 rect:first-child { animation: maHubEdge 8s ease-in-out infinite 3.1s; }
@keyframes maHubA { 0% { opacity: 0; transform: translate(0,0); } 4% { opacity: 1; }
  20% { opacity: 1; transform: translate(-107px,-64px); } 26% { opacity: 0; transform: translate(-107px,-64px); }
  100% { opacity: 0; transform: translate(-107px,-64px); } }
@keyframes maHubB { 0% { opacity: 0; transform: translate(0,0); } 4% { opacity: 1; }
  20% { opacity: 1; transform: translate(97px,-64px); } 26% { opacity: 0; transform: translate(97px,-64px); }
  100% { opacity: 0; transform: translate(97px,-64px); } }
@keyframes maHubC { 0% { opacity: 0; transform: translate(0,0); } 4% { opacity: 1; }
  20% { opacity: 1; transform: translate(-107px,60px); } 26% { opacity: 0; transform: translate(-107px,60px); }
  100% { opacity: 0; transform: translate(-107px,60px); } }
@keyframes maHubD { 0% { opacity: 0; transform: translate(0,0); } 4% { opacity: 1; }
  20% { opacity: 1; transform: translate(97px,60px); } 26% { opacity: 0; transform: translate(97px,60px); }
  100% { opacity: 0; transform: translate(97px,60px); } }
@keyframes maHubBar { 0%,2% { opacity: .35; } 8%,20% { opacity: 1; } 30%,100% { opacity: .35; } }
@keyframes maHubEdge { 0%,2% { stroke: #E6E2DC; } 8%,20% { stroke: #E49B27; } 30%,100% { stroke: #E6E2DC; } }

/* ---- hover (dịch từ style-hover trong bản thiết kế) ---- */
.mah1:hover { background: #B9760F; color: #FFFFFF; }
.mah2:hover { color: #B9760F; }
.mah3:hover { background: #FFFFFF; }
.mah4:hover { border-color: #E49B27; color: #E49B27; }
.mah5:hover { color: #E49B27; }
.mah6:hover { background: #FBF1DE; color: #B9760F; }

/* ---- menu cho màn hình hẹp (bản thiết kế để mở, xem README) ---- */
/* Từ 861px trở lên hai thành phần này ẩn hoàn toàn, giao diện giữ nguyên. */
.ma-burger { display: none; }
.ma-mobmenu { display: none; }

/* ---- responsive: hợp nhất luật của cả 7 trang (breakpoint 860px) ---- */
@media (max-width: 860px) {
  .ma-grid2, .ma-grid3, .ma-grid4 { grid-template-columns: 1fr !important; }
  .ma-nav { display: none !important; }
  .ma-side { display: none !important; }
  .ma-wrap { grid-template-columns: 1fr !important; }
  .ma-h1 { font-size: 36px !important; }
  .ma-h1-sub { font-size: 34px !important; }
  .ma-cta { margin-left: auto; padding: 10px 14px !important; font-size: 14px !important; }
  header > div { gap: 12px !important; padding-left: 16px !important; padding-right: 16px !important; }
  .ma-minw { min-width: 0 !important; }
  .ma-burger { display: inline-flex; align-items: center; justify-content: center;
    width: 44px; height: 44px; flex: none;
    background: transparent; border: 1px solid #E6E2DC; border-radius: 8px; cursor: pointer; }
  .ma-mobmenu { display: flex; flex-direction: column;
    background: rgba(250,248,244,0.98); border-bottom: 1px solid #E6E2DC;
    padding: 4px 24px 12px; position: sticky; top: 62px; z-index: 49; }
  .ma-mobmenu[hidden] { display: none; }
  .ma-moblink { padding: 13px 0; font-size: 16px; font-weight: 500;
    color: #4A4744; border-bottom: 1px solid #E6E2DC; }
  .ma-moblink:last-child { border-bottom: 0; }
}
@media (min-width: 861px) and (max-width: 1000px) {
  .ma-grid4 { grid-template-columns: repeat(2, minmax(0,1fr)) !important; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; }
  html { scroll-behavior: auto; }
}