/* =====================================================================
   GIAO DIỆN MÁY TÍNH kiểu trang các trường đại học:
   dải xanh mỏng trên cùng (thông báo + liên kết nhanh) → thanh tiêu đề nền trắng (logo, tên, menu, nút tìm đỏ)
   → trang con: dải ảnh nền rộng hết khung, nội dung là khối trắng đè lên mép dưới, tiêu đề gạch chân, thanh đề mục đỏ.
   Điện thoại (≤ 760px) giữ nguyên giao diện cũ.
   ===================================================================== */
.utilbar, .mainnav, .tb-search, .page-band { display: none; }

@media (min-width: 761px) {
  :root { --pro-navy: #0f2a5f; --pro-blue: #1f4fb5; --pro-red: #c4161c; --pro-line: #e3e9f2; }
  body.hs .announce { display: none; }

  /* ---- dải xanh trên cùng ---- */
  .utilbar { display: block; position: relative; z-index: 61; background: var(--pro-blue); color: #fff; }
  .ub-in { max-width: 1240px; margin: 0 auto; padding: 0 24px; height: 42px; display: flex; align-items: center; gap: 28px; }
  .ub-ann { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; font-size: .84rem; opacity: .9; }
  .ub-ann span { display: inline-block; padding-left: 100%; animation: marquee 34s linear infinite; }
  .ub-ann:hover span { animation-play-state: paused; }
  .ub-links { display: flex; gap: 30px; flex: none; }
  .ub-links a { color: #fff; text-decoration: none; font-size: .8rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; opacity: .95; }
  .ub-links a:hover { opacity: 1; text-decoration: underline; text-underline-offset: 4px; }

  /* ---- thanh tiêu đề trắng ---- */
  body.hs .topbar { position: sticky; top: 0; z-index: 60; margin: 0; height: 92px; padding: 0 max(24px, calc((100vw - 1240px) / 2 + 24px)); gap: 18px;
    background: #fff; color: var(--pro-navy); border-bottom: 1px solid var(--pro-line); box-shadow: 0 6px 22px -12px rgba(15, 42, 95, .35); }
  .topbar .brand { color: var(--pro-navy); gap: 14px; flex: none; }
  .topbar .brand .logo { width: 56px; height: 56px; border-radius: 14px; border: 0; box-shadow: 0 4px 12px rgba(15, 42, 95, .18); }
  .topbar .brand b { font-size: 1.2rem; font-weight: 900; color: var(--pro-navy); letter-spacing: -.01em; }
  .topbar .brand small { font-size: .82rem; font-weight: 800; color: var(--pro-red); -webkit-text-fill-color: var(--pro-red); background: none; text-shadow: none; filter: none; animation: none; opacity: 1; letter-spacing: .05em; max-width: none; margin-top: 3px; }
  .topbar .brand b { -webkit-text-fill-color: var(--pro-navy); background: none; text-shadow: none; }
  .topbar .tb-back, .topbar .tb-title { display: none; }

  .mainnav { display: flex; align-items: stretch; height: 100%; gap: 26px; margin-left: auto; }
  .mainnav a { display: flex; align-items: center; color: var(--pro-navy); text-decoration: none; font-weight: 700; font-size: 1rem; white-space: nowrap;
    border-bottom: 4px solid transparent; border-top: 4px solid transparent; transition: color .15s, border-color .15s; }
  .mainnav a:hover { color: var(--pro-blue); }
  .mainnav a.on { color: var(--pro-blue); border-bottom-color: var(--pro-red); }

  .topbar .me { gap: 8px; flex: none; }
  .topbar .me .home-btn, .topbar .me .quiz-btn, .topbar .me .acct-page, .topbar .me .hide-sm, .topbar .me a[href="#/tra-cuu"] { display: none; }
  .topbar .glass-btn { background: #f1f5fb; color: var(--pro-navy); border: 1px solid #d8e1ef; backdrop-filter: none; -webkit-backdrop-filter: none; }
  .topbar .glass-btn:hover { background: #e6edf8; }
  /* chuông thông báo trùng với mục "Thông báo" trên menu → ẩn; số thông báo mới hiện cạnh mục menu */
  .topbar .me .bell { display: none; }
  .mainnav a .nb { margin-left: 6px; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--pro-red); color: #fff; font-size: .72rem; font-weight: 800; display: inline-grid; place-items: center; position: static; }
  .mainnav a .nb[hidden] { display: none; }
  .tb-search { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 6px; background: var(--pro-red); color: #fff; flex: none; box-shadow: 0 6px 16px -6px rgba(196, 22, 28, .6); }
  .tb-search:hover { background: #a91217; }

  /* ---- trang con: dải nền + khối trắng ---- */
  body.hs:not([data-page="home"])::before { background: #eef2f7; }
  body.hs:not([data-page="home"]) .particles { display: none; }
  .page-band { display: block; height: clamp(252px, 26.4vw, 408px); position: relative; overflow: hidden;
    background: linear-gradient(180deg, rgba(8, 30, 80, .55) 0%, rgba(8, 30, 80, .15) 45%, rgba(8, 30, 80, .05) 100%), url("band-hoc-sinh.jpg") center 45% / cover no-repeat, #0a2f7a; }
  .pb-in { max-width: 1240px; margin: 0 auto; padding: 34px 24px 0; }
  .pb-crumb { display: flex; gap: 10px; align-items: center; color: #fff; font-size: .9rem; }
  .pb-crumb a { color: #dbe7ff; text-decoration: none; font-weight: 600; }
  .pb-crumb a:hover { color: #fff; text-decoration: underline; }
  .pb-crumb span { opacity: .55; }
  .pb-crumb b { color: #fff; }

  body.hs:not([data-page="home"]) .page { position: relative; z-index: 2; max-width: 1192px; margin: -70px auto 48px; padding: 46px 56px 54px;
    background: #fff; border-radius: 6px; box-shadow: 0 24px 60px -28px rgba(15, 42, 95, .45); }
  body.hs:not([data-page="home"]) .page .backrow { display: none; }
  body.hs:not([data-page="home"]) .page-head { color: var(--pro-navy); margin: 0 0 26px; }
  body.hs:not([data-page="home"]) .page-head h1 { font-size: 2.2rem; text-shadow: none; color: var(--pro-navy); }
  body.hs:not([data-page="home"]) .page-head h1::after { content: ""; display: block; width: 86px; height: 4px; margin-top: 16px; background: var(--pro-blue); border-radius: 2px; }
  body.hs:not([data-page="home"]) .page-head p { color: #475569; opacity: 1; margin-top: 12px; }
  /* khối nội dung cấp 1 nằm phẳng trong khối trắng, ngăn bằng đường kẻ */
  body.hs:not([data-page="home"]) .page > .panel { background: transparent; box-shadow: none; border: 0; padding: 0; border-radius: 0; }
  body.hs:not([data-page="home"]) .page > .panel + .panel { margin-top: 30px; padding-top: 30px; border-top: 1px solid var(--pro-line); }
  /* tiêu đề mục → thanh đề mục đỏ chữ trắng */
  body.hs:not([data-page="home"]) .page > .panel > h2, body.hs:not([data-page="home"]) .page > form.panel > h2 {
    background: var(--pro-red); color: #fff; text-align: center; font-size: 1.3rem; font-weight: 800; padding: 15px 18px; border-radius: 4px; margin: 6px 0 18px; }
  body.hs:not([data-page="home"]) .page > .panel > h2 + .muted, body.hs:not([data-page="home"]) .page > .panel > h2 + p { text-align: center; }
  body.hs:not([data-page="home"]) .page .sec-title h2 { color: var(--pro-navy); text-shadow: none; }
  body.hs:not([data-page="home"]) .page .sec-title p { color: #475569; opacity: 1; }
  body.hs:not([data-page="home"]) .wizard-steps { max-width: 520px; margin: 0 auto 26px; }
  body.hs:not([data-page="home"]) .foot { color: #475569; opacity: 1; }
  body.hs:not([data-page="home"]) .foot a { color: var(--pro-blue); }
}

/* màn hình máy tính nhỏ: gọn menu */
@media (min-width: 761px) and (max-width: 1280px) {
  .mainnav { gap: 18px; }
  .mainnav a { font-size: .93rem; }
  .mainnav a[data-nav="nhom"] { display: none; }
  .topbar .brand b { font-size: 1.05rem; }
  .topbar .brand small { font-size: .72rem; }
}
@media (min-width: 761px) and (max-width: 1060px) {
  .mainnav a[data-nav="notice"], .mainnav a[data-nav="career"] { display: none; }
  .ub-links { gap: 18px; }
  .ub-links a:nth-child(2) { display: none; }
  body.hs:not([data-page="home"]) .page { padding: 32px 28px 40px; margin-left: 16px; margin-right: 16px; }
}

/* trường tiểu học: biểu tượng xanh lá */
.school .av.th { background: linear-gradient(135deg, #22c55e, #059669); }