/* Sải Cánh Express — Mega menu "Tuyến quốc gia" + "Công cụ" (v4.33.0, kế thừa GHDNN Express). Xem inc/mega-menu-sce.php.
   Chỉ desktop (≥ 992px, cùng mốc theme cha đổi sang menu di động); dưới mốc đó dùng drawer (#sce-mobile-drawer). */

/* Mũi tên ▾ cạnh tên mục có bảng mega */
nav[id^="main-nav"] > ul.menu > li.sce-has-mega > a::after{
  content:""; width:7px; height:7px; margin:-3px 0 0 2px; flex:none;
  border-right:1.75px solid currentColor; border-bottom:1.75px solid currentColor;
  transform:rotate(45deg); transition:transform .2s ease; color:var(--sce-ink-soft);
}
nav[id^="main-nav"] > ul.menu > li.sce-has-mega:hover > a::after,
nav[id^="main-nav"] > ul.menu > li.sce-has-mega.is-open > a::after{ transform:rotate(-135deg); margin-top:3px; }
/* Mục có bảng mega: ẩn menu con thường (tránh 2 lớp chồng nhau) */
nav[id^="main-nav"] > ul.menu > li.sce-has-mega > ul.sub-menu{ display:none !important; }

.sce-mega{
  position:absolute; top:100%; left:50%; z-index:9990;
  width:min(var(--mega-w,760px), calc(100vw - 32px));
  transform:translate(calc(-50% + var(--mega-shift,0px)), 8px);
  padding-top:10px; /* cầu nối vô hình: rê chuột từ mục xuống bảng không bị đóng */
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .16s ease, transform .16s ease, visibility 0s linear .16s;
  text-align:left;
}
.sce-mega--tools,.sce-mega--cards{ --mega-w:600px; }
.sce-mega--wide{ --mega-w:840px; } /* v4.38.0 — bảng "cards" > 4 mục: 3 cột */
.sce-mega--wide .sce-mega__tools{ grid-template-columns:repeat(3,minmax(0,1fr)); }
nav[id^="main-nav"] li.sce-has-mega:hover > .sce-mega,
nav[id^="main-nav"] li.sce-has-mega:focus-within > .sce-mega,
nav[id^="main-nav"] li.sce-has-mega.is-open > .sce-mega{
  opacity:1; visibility:visible; pointer-events:auto;
  transform:translate(calc(-50% + var(--mega-shift,0px)), 0);
  transition:opacity .16s ease, transform .16s ease, visibility 0s;
}
nav[id^="main-nav"] li.sce-has-mega.is-closed > .sce-mega{ opacity:0; visibility:hidden; pointer-events:none; }
.sce-mega__routes,.sce-mega__tools{
  display:grid; gap:2px; padding:10px;
  background:var(--sce-white); border:1px solid var(--sce-line); border-bottom:0;
  border-radius:16px 16px 0 0; box-shadow:0 12px 32px -8px rgba(16,24,40,.18);
}
.sce-mega__routes{ grid-template-columns:repeat(3,minmax(0,1fr)); }
.sce-mega__tools{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:4px; padding:12px; }
.sce-mega__route,.sce-mega__tool{
  display:flex; align-items:center; gap:12px; padding:10px 12px; border-radius:10px;
  color:var(--sce-ink) !important; text-decoration:none !important; transition:background-color .15s ease;
}
.sce-mega__tool{ align-items:flex-start; padding:12px; }
.sce-mega__route:hover,.sce-mega__tool:hover,.sce-mega__route:focus-visible,.sce-mega__tool:focus-visible{ background:var(--sce-bg); outline:none; }
.sce-mega__route:focus-visible,.sce-mega__tool:focus-visible{ box-shadow:inset 0 0 0 2px var(--sce-red); }
.sce-mega__txt{ display:flex; flex-direction:column; min-width:0; }
.sce-mega__name{ font:600 14.5px/1.3 var(--sce-font-body,'Inter',sans-serif); color:var(--sce-ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sce-mega__sub{ font:400 12.5px/1.4 var(--sce-font-body,'Inter',sans-serif); color:var(--sce-ink-soft); margin-top:2px; }
.sce-mega__tool .sce-mega__name{ white-space:normal; }
.sce-mega__route:hover .sce-mega__name,.sce-mega__tool:hover .sce-mega__name{ color:var(--sce-red); }
.sce-mega__ic{ display:grid; place-items:center; flex:none; width:40px; height:40px; border-radius:10px; border:1px solid var(--sce-line); background:var(--sce-white); color:var(--sce-ink); box-shadow:0 1px 2px rgba(16,24,40,.05); }
.sce-mega__ic .sce-icon{ width:20px; height:20px; }
.sce-mega__tool:hover .sce-mega__ic{ color:var(--sce-red); border-color:rgba(214,0,0,.3); }
.sce-mega__foot{
  display:flex; justify-content:space-between; align-items:center; gap:12px; padding:12px 20px;
  background:var(--sce-bg); border:1px solid var(--sce-line); border-top:1px solid var(--sce-line);
  border-radius:0 0 16px 16px; box-shadow:0 12px 32px -8px rgba(16,24,40,.18);
  font:400 13.5px/1.4 var(--sce-font-body,'Inter',sans-serif); color:var(--sce-ink-soft);
}
.sce-mega__foot a{ display:inline-flex; align-items:center; gap:6px; font-weight:600; color:var(--sce-red) !important; text-decoration:none !important; white-space:nowrap; }
.sce-mega__foot a .sce-icon{ width:16px; height:16px; transition:transform .2s ease; }
.sce-mega__foot a:hover .sce-icon{ transform:translateX(3px); }

/* Cờ tròn (flag-icons) + mã dự phòng */
.sce-flag{ display:inline-block; flex:none; border-radius:50%; object-fit:cover; background:var(--sce-bg); box-shadow:0 0 0 1px rgba(16,24,40,.12); }
.sce-flag--neutral{ display:inline-grid; place-items:center; color:var(--sce-ink-soft); }
.sce-flag--neutral .sce-icon{ width:70%; height:70%; }
.sce-mega__route .sce-flag{ transition:transform .25s ease; }
.sce-mega__route:hover .sce-flag{ transform:scale(1.08); }
.sce-mega__cc{ display:inline-grid; place-items:center; flex:none; min-width:28px; height:24px; padding:0 5px; border-radius:6px; background:var(--sce-red-soft); color:var(--sce-red); font:700 11px/1 var(--sce-font-mono,'IBM Plex Mono',monospace); letter-spacing:.04em; }

@media (max-width:991px){ .sce-mega{ display:none !important; } nav[id^="main-nav"] > ul.menu > li.sce-has-mega > a::after{ display:none; } }
@media (prefers-reduced-motion:reduce){ .sce-mega,.sce-mega__foot a .sce-icon,.sce-mega__route .sce-flag{ transition:none; } }

/* Drawer di động: danh sách gọn dưới mục mega */
.sce-drawer-sub{ list-style:none; margin:2px 0 8px 14px !important; padding:0 0 0 12px !important; border-left:2px solid var(--sce-line); display:grid; gap:2px; }
.sce-drawer-sub--routes{ grid-template-columns:repeat(2,minmax(0,1fr)); }
.sce-drawer-sub li{ margin:0 !important; }
.sce-drawer-sub a{ display:flex; align-items:center; gap:8px; min-height:40px; padding:6px 8px; border-radius:8px; color:var(--sce-ink) !important; font-size:14px; font-weight:500; text-decoration:none !important; }
.sce-drawer-sub a:hover{ background:var(--sce-red-soft); }
.sce-drawer-sub a > span:last-child{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sce-drawer-sub .sce-icon{ width:18px; height:18px; flex:none; color:var(--sce-ink-soft); }

/* Giao diện tối */
html[data-theme="dark"] .sce-flag{ box-shadow:0 0 0 1px rgba(255,255,255,.2); }

/* v4.40.0 — cờ cỡ lớn dùng chung cho thẻ tuyến (trang chủ, tuyến liên quan, thẻ pillar trong bài) — cùng bộ cờ tròn của menu */
.sce-flag--lg{ flex:none; box-shadow:0 0 0 1px rgba(16,24,40,.12), 0 0 0 4px var(--sce-white), 0 4px 10px -4px rgba(16,24,40,.25); }
.sce-pillar-card__flag{ display:inline-block; margin:0 0 12px; line-height:0; }
.hp-marquee .sce-flag{ width:20px; height:20px; }