/* ==========================================================================
   Mega menu (Figma 3423:5507) + level-2 dropdowns (Figma "Menu thả xuống" 3746:10253)
   Panel 1440 wide: padding 28, gap 32, white, border #ECEAF0, radius 24.
   Intro 320 Tím 100 r18 pad 28 · cards 336×71 border Tím 200 r14 pad 14/18 · CTA 280 Tím 700 r18.
   ========================================================================== */
@media (min-width:850px){
  #header .header-bottom .container{position:relative}
  #header .header-bottom .nav > li.ohio-mega{position:static}
  #header .header-bottom .nav > li.ohio-mega > .nav-dropdown{display:none!important}   /* children render inside the panel */

  .ohio-mega-panel{position:absolute;left:50%;top:100%;transform:translate(-50%,8px);z-index:30;
    width:min(1440px,calc(100vw - 40px));box-sizing:border-box;display:none;gap:32px;padding:28px;
    background:#fff;border:1px solid var(--ohio-neutral-100);border-radius:24px;box-shadow:0 24px 60px rgba(36,19,58,.16);
    text-transform:none;letter-spacing:0;text-align:left}
  #header .nav > li.ohio-mega:hover > .ohio-mega-panel,
  #header .nav > li.ohio-mega:focus-within > .ohio-mega-panel,
  #header .nav > li.ohio-mega.current-dropdown > .ohio-mega-panel,
  #header .nav > li.ohio-mega.ohio-mega--open > .ohio-mega-panel{display:flex}
  /* hover bridge between the nav and the panel */
  .ohio-mega-panel::before{content:"";position:absolute;left:0;right:0;top:-12px;height:12px}

  .ohio-mega-panel__intro{flex:0 0 320px;box-sizing:border-box;display:flex;flex-direction:column;gap:12px;padding:28px;
    background:var(--ohio-purple-100);border-radius:18px}
  .ohio-mega-panel__eyebrow{font:600 11px/15px var(--ohio-font-body);letter-spacing:.1em;text-transform:uppercase;color:#6E6382}
  .ohio-mega-panel__title{font:700 24px/34px var(--ohio-font-body);color:var(--ohio-purple-700)}
  .ohio-mega-panel__desc{font:400 14px/20px var(--ohio-font-body);color:#6E6382}
  .ohio-mega-panel__all{margin-top:8px;font:600 14px/20px var(--ohio-font-body);color:var(--ohio-purple-700)!important;text-decoration:none}
  .ohio-mega-panel__all:hover{text-decoration:underline}

  .ohio-mega-panel__list{flex:1 1 auto;display:grid;grid-template-columns:repeat(2,minmax(0,336px));gap:8px;align-content:start;
    margin:0;padding:0;list-style:none}
  .ohio-mega-panel__list li{margin:0;list-style:none}
  .ohio-mega-card{position:relative;display:flex;flex-direction:column;gap:2px;box-sizing:border-box;min-height:71px;padding:14px 44px 14px 18px;
    border:1px solid var(--ohio-purple-200);border-radius:14px;background:#fff;text-decoration:none;transition:border-color .15s,background .15s}
  .ohio-mega-card:hover{border-color:var(--ohio-purple-400);background:var(--ohio-purple-50)}
  .ohio-mega-card__name{font:600 15px/21px var(--ohio-font-body);color:var(--ohio-purple-900)}
  .ohio-mega-card__desc{font:400 13px/18px var(--ohio-font-body);color:var(--ohio-neutral-500)}
  .ohio-mega-card__arrow{position:absolute;right:18px;top:14px;font:400 15px/21px var(--ohio-font-body);color:var(--ohio-purple-700)}

  .ohio-mega-panel__cta{flex:0 0 280px;box-sizing:border-box;display:flex;flex-direction:column;gap:10px;padding:26px 24px 24px;
    background:var(--ohio-purple-700);border-radius:18px;color:#fff}
  .ohio-mega-panel__cta-title{font:600 18px/25px var(--ohio-font-body);color:#fff}
  .ohio-mega-panel__cta-text{font:400 13px/18px var(--ohio-font-body);color:rgba(255,255,255,.85)}
  .ohio-mega-panel__cta-label{margin-top:6px;font:600 11px/15px var(--ohio-font-body);letter-spacing:.08em;text-transform:uppercase;color:#F1A91D}
  .ohio-mega-panel__cta-phone{font:700 26px/36px var(--ohio-font-body);color:#fff!important;text-decoration:none;white-space:nowrap}
  #header .ohio-mega-panel__cta .ohio-btn{height:45px;margin-top:2px;font-size:15px!important;color:#fff!important;box-shadow:0 6px 16px rgba(246,145,28,.3)}
  #header .ohio-mega-panel__cta .ohio-btn::after{content:none}

  /* ---- dropdowns: Về chúng tôi, Câu chuyện khách hàng, OHIO TV — Figma "Menu thả xuống" 3746:10253 + "Cấp 2" 3750:10590
     (demo 3746:10264). Card 260 wide, radius 16, padding 12/10, shadow 0 12 16 rgba(36,18,59,.16), 16px left of the item,
     18px under the nav bar; orange caret (13.9×9, apex 40px from the card's left) 6px under the bar. Items: BVP 500 15/20
     #422666, padding 10/12, radius 8, gap 2; a parent item has a 12px chevron (#948DA3) and turns Cam/CTA while open.
     Level 2 opens to the right (8px gap), 220 wide, shadow 0 12 32. Open item: 3px orange bar under it; page dims 35%. ---- */
  #header .header-bottom .nav > li:not(.ohio-mega) > .nav-dropdown{left:-16px;top:calc(100% + 18px);min-width:260px;width:max-content;max-width:360px;
    margin:0;padding:12px 10px;border:0;border-radius:16px;background:#fff;box-shadow:0 12px 16px rgba(36,18,59,.16)}
  #header .header-bottom .nav > li:not(.ohio-mega) > .nav-dropdown::before{content:"";position:absolute;left:33px;top:-12px;width:0;height:0;
    border-left:7px solid transparent;border-right:7px solid transparent;border-bottom:9px solid #f6911c}
  #header .header-bottom .nav > li:not(.ohio-mega) > .nav-dropdown::after{content:"";position:absolute;left:0;right:0;top:-18px;height:18px}   /* hover bridge */
  #header .header-bottom .nav > li.has-dropdown::before,
  #header .header-bottom .nav > li.has-dropdown::after{display:none!important}   /* Flatsome's white arrow; ours is orange */
  #header .header-bottom .nav > li.has-dropdown:hover > a,#header .header-bottom .nav > li.has-dropdown:focus-within > a{box-shadow:inset 0 -3px 0 #f6911c!important}
  #header .header-bottom .nav-dropdown li{position:relative;margin:0 0 2px;border:0;padding:0}
  #header .header-bottom .nav-dropdown li:last-child{margin-bottom:0}
  #header .header-bottom .nav-dropdown li > a{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:0;
    padding:10px 12px;border:0;border-radius:8px;font:500 15px/20px var(--ohio-font-body)!important;letter-spacing:0;text-transform:none!important;
    color:#422666!important;white-space:nowrap;background:none}
  #header .header-bottom .nav .nav-dropdown li.menu-item:hover > a,#header .header-bottom .nav .nav-dropdown li.menu-item > a:hover{color:#f6911c!important;background:none}
  #header .header-bottom .nav-dropdown li.menu-item-has-children > a::after{content:"";flex:0 0 12px;height:12px;
    background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M4.5 2.5 8 6 4.5 9.5' fill='none' stroke='%23948DA3' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/12px no-repeat}
  #header .header-bottom .nav-dropdown li.menu-item-has-children:hover > a::after{
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M4.5 2.5 8 6 4.5 9.5' fill='none' stroke='%23F6911C' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
  /* level 2 flyout (Flatsome prints it as an inline .nav-column) */
  #header .header-bottom .nav-dropdown .nav-dropdown-col{display:block;width:auto;min-width:0;padding:0}
  #header .header-bottom .nav-dropdown .nav-column{display:none;position:absolute;left:calc(100% + 18px);top:-18px;z-index:2;min-width:220px;width:max-content;
    margin:0;padding:12px 10px;border-radius:16px;background:#fff;box-shadow:0 12px 32px rgba(36,18,59,.16)}
  #header .header-bottom .nav-dropdown .nav-column::before{content:"";position:absolute;left:-18px;top:0;bottom:0;width:18px}   /* hover bridge */
  #header .header-bottom .nav-dropdown .nav-dropdown-col:hover > .nav-column,
  #header .header-bottom .nav-dropdown .nav-dropdown-col:focus-within > .nav-column{display:block}
  /* page dims while a dropdown or mega panel is open */
  body:has(#header .header-bottom .nav > li.has-dropdown:hover) #main{position:relative}
  body:has(#header .header-bottom .nav > li.has-dropdown:hover) #main::before{content:"";position:absolute;inset:0;z-index:25;
    background:rgba(36,18,59,.35);pointer-events:none}
}
@media (min-width:850px) and (max-width:1199px){
  .ohio-mega-panel{gap:16px;padding:16px}
  .ohio-mega-panel__intro{flex-basis:240px;padding:20px}
  .ohio-mega-panel__cta{flex-basis:220px;padding:20px}
  .ohio-mega-panel__list{grid-template-columns:minmax(0,1fr)}
}