/* Menu Danh mục — panel tra cứu kỹ thuật cho desktop và mobile. */
.skm-demo-header__inside { position: relative; }
.skm-demo-menu-wrap { position: relative; z-index: 30; }
.skm-demo-menu { min-height: 42px; display: inline-flex; align-items: center; gap: 8px; padding: 0 13px; border: 0; background: var(--demo-blue); color: #fff; font: 700 11px "Be Vietnam Pro", sans-serif; white-space: nowrap; }
.skm-demo-menu:hover, .skm-demo-menu:focus-visible, .skm-demo-menu.is-open { background: #0b43a7; outline: none; }
.skm-demo-menu b { font-size: 15px; line-height: 1; }
.skm-demo-mega { position: absolute; left: 0; top: calc(100% + 9px); width: min(842px, calc(100vw - 48px)); display: grid; grid-template-columns: 1fr 1.12fr 1fr .98fr; gap: 0; padding: 16px; background: #fff; border: 1px solid #d9e3f1; box-shadow: 0 22px 44px rgba(12, 36, 78, .2); opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(-7px); transform-origin: 20px 0; transition: opacity .18s ease, transform .18s cubic-bezier(.23,1,.32,1), visibility .18s; }
.skm-demo-menu-wrap.is-open .skm-demo-mega { opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0); }
.skm-demo-mega__group { min-width: 0; padding: 4px 15px 10px; border-left: 1px solid #e8eef6; }
.skm-demo-mega__group:first-child { border-left: 0; }
.skm-demo-mega__group p { margin: 0 0 10px; color: var(--demo-blue); font: 700 9px "Space Grotesk",sans-serif; letter-spacing: .8px; }
.skm-demo-mega__group a { display: block; padding: 7px 0; color: #41546f; font: 600 11px/1.25 "Be Vietnam Pro",sans-serif; }
.skm-demo-mega__group a:hover, .skm-demo-mega__group a:focus-visible { color: var(--demo-orange); outline: none; }
.skm-demo-mega__note { display: flex; flex-direction: column; justify-content: space-between; margin-left: 4px; padding: 15px; background: #edf4ff; border-left: 4px solid var(--demo-orange); }
.skm-demo-mega__note b { color: #193967; font: 700 15px/1.05 "Space Grotesk",sans-serif; }
.skm-demo-mega__note span { margin: 8px 0 16px; color: #61738d; font-size: 10px; line-height: 1.5; }
.skm-demo-mega__note a { width: max-content; color: var(--demo-blue); font-size: 10px; font-weight: 700; }
@media (hover: hover) and (min-width: 761px) { .skm-demo-menu-wrap:hover .skm-demo-mega { opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0); } }
/* Cầu nối 9px giữ trạng thái hover khi con trỏ đi từ nút Danh mục xuống panel xổ. */
@media (hover: hover) and (min-width: 761px) { .skm-demo-menu-wrap::after { content: ""; position: absolute; z-index: 1; left: 0; top: 100%; width: 100%; height: 9px; } }
@media (max-width: 760px) { .skm-demo-menu { min-height: 38px; padding: 0 10px; font-size: 10px; }.skm-demo-menu-wrap { position: static; }.skm-demo-mega { left: 0; top: calc(100% + 8px); width: 100%; grid-template-columns: 1fr 1fr; padding: 11px; max-height: min(520px, calc(100vh - 100px)); overflow-y: auto; }.skm-demo-mega__group { padding: 8px 10px; }.skm-demo-mega__group:nth-child(3) { border-left: 0; border-top: 1px solid #e8eef6; }.skm-demo-mega__note { grid-column: 2; grid-row: 2; margin: 0; }.skm-demo-mega__note span { font-size: 9px; margin: 7px 0 11px; } }