/* ==========================================================================
   Mega menu PA2 (Figma 6813:9235 "Phương án 2 (CHỐT)", frames 6813:9237 / 9434 / 9661 / 9888) + level-2 dropdowns
   (Figma "Menu thả xuống" 3746:10253).
   Panel 1440 wide, 4px under the bar, white, radius 20, padding 20/24, gap 16, shadow 0 16 40 rgba(41,20,77,.16), no border.
   Title row: group 700 24/33.6 Tím 700 + "Xem tất cả N dịch vụ →" 600 14/19.6. Cards: gap 8, border Tím 200, r14, padding 12/16,
   name 600 15/21 + → 14/19.6, subtext 13/18.2; 4 per row (342 wide), 5 per row (272 wide) when the group has 5 services.
   ========================================================================== */
@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:calc(100% + 4px);transform:translateX(-50%);z-index:30;
    width:min(1440px,calc(100vw - 40px));box-sizing:border-box;display:flex;flex-direction:column;gap:16px;padding:20px 24px;
    background:#fff;border-radius:20px;box-shadow:0 16px 40px rgba(41,20,77,.16);
    text-transform:none;letter-spacing:0;text-align:left;
    visibility:hidden;opacity:0;transition:none}   /* closes at once when the pointer leaves (owner 31/10); the 8px bridge below covers the gap */
  #header .nav > li.ohio-mega:hover > .ohio-mega-panel,
  #header .nav > li.ohio-mega:has(:focus-visible) > .ohio-mega-panel,   /* keyboard only: a mouse click must not keep it open */
  #header .nav > li.ohio-mega.current-dropdown > .ohio-mega-panel,
  #header .nav > li.ohio-mega.ohio-mega--open > .ohio-mega-panel{visibility:visible;opacity:1;z-index:31;transition:opacity .12s ease 0s,visibility 0s linear 0s}
  /* hover bridge between the nav and the panel (4px gap) */
  .ohio-mega-panel::before{content:"";position:absolute;left:0;right:0;top:-8px;height:8px;visibility:inherit;pointer-events:auto}

  .ohio-mega-panel__head{display:flex;align-items:center;justify-content:space-between;gap:24px}
  .ohio-mega-panel__title{font:700 24px/33.6px var(--font-base);color:var(--ohio-purple-700);text-transform:lowercase}   /* menu labels are typed in capitals; Figma shows sentence case */
  .ohio-mega-panel__title::first-letter{text-transform:uppercase}
  .ohio-mega-panel__all{flex:0 0 auto;font:600 14px/19.6px var(--font-base);color:var(--ohio-purple-700)!important;text-decoration:none;white-space:nowrap}
  .ohio-mega-panel__all:hover{text-decoration:underline}

  .ohio-mega-panel__list{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin:0;padding:0;list-style:none}
  .ohio-mega-panel__list--5{grid-template-columns:repeat(5,minmax(0,1fr))}
  .ohio-mega-panel__list li{display:flex;margin:0;list-style:none}
  .ohio-mega-panel__list li > .ohio-mega-card{flex:1 1 auto}   /* cards fill their cell: equal heights, no ragged rows */
  .ohio-mega-card{display:flex;flex-direction:column;gap:2px;box-sizing:border-box;padding:12px 16px;
    border:1px solid var(--ohio-purple-200);border-radius:14px;background:#fff;text-decoration:none;transition:border-color .15s,background .15s}
  .ohio-mega-card:is(:hover,:focus-visible,[aria-current="page"]){border-color:var(--ohio-purple-400);background:var(--ohio-purple-50)}
  .ohio-mega-card__row{display:flex;align-items:flex-start;justify-content:space-between;gap:8px}
  .ohio-mega-card__arrow{flex:0 0 auto;font:500 14px/19.6px var(--font-base);color:var(--ohio-purple-700)}
  /* Figma 4823:21971 / PA2: service-card title 15/21, subtext 13/18.2. The global body-type layer otherwise enlarges the
     subtext to 16/24. */
  html body.ohio-hh #wrapper #header .ohio-mega-card__name{font:600 15px/21px var(--font-base)!important;color:#2a1f3d}
  html body.ohio-hh #wrapper #header .ohio-mega-card__desc{font:400 13px/18.2px var(--font-base)!important;color:#6e6382!important}

  /* ---- 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:var(--ohio-shadow-floating)}
  #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}
  /* Level-1 cards close at once when the pointer leaves (owner 31/10, replaces the 16/10 close delays); the bridges below keep
     the pointer on the open item while it crosses the gap or the empty area towards a flyout. */
  #header .header-bottom .nav > li:not(.ohio-mega) > .nav-dropdown{transition:none}
  #header .header-bottom .nav > li:not(.ohio-mega):hover > .nav-dropdown,
  #header .header-bottom .nav > li:not(.ohio-mega):has(:focus-visible) > .nav-dropdown{visibility:visible;opacity:1;transition:opacity .12s ease 0s,visibility 0s linear 0s}   /* :focus-visible = keyboard only, a mouse click must not keep it open */
  /* hover bridge over the 18px gap; Flatsome hides .nav-dropdown::after (visibility:hidden); inherit = active only while the card is shown */
  #header .header-bottom .nav > li:not(.ohio-mega) > .nav-dropdown::after{content:"";position:absolute;left:0;right:0;top:-18px;height:18px;
    visibility:inherit;pointer-events:auto}
  /* last item (e.g. "OHIO TV"): card opens to the LEFT from the item's right edge so it stays on screen, caret measured from
     the right so it sits under the item, not under the previous one (owner 15/10). !important: Flatsome sets an inline left. */
  #header .header-bottom .nav > li:last-child:not(.ohio-mega) > .nav-dropdown{left:auto!important;right:-16px!important}
  #header .header-bottom .nav > li:last-child:not(.ohio-mega) > .nav-dropdown::before{left:auto;right:37px}
  #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 */
  /* Open-state sources3507:6136,3746:10498,3746:10620: white text; orange3px nav-bottom underline. */
  #header .header-bottom .nav > li:is(:hover,:has(:focus-visible)) > 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 var(--fs-menu)/var(--lh-menu) var(--font-base)!important;letter-spacing:0;text-transform:none!important;
    color:var(--ohio-neutral-700)!important;white-space:nowrap;background:none}
  #header .header-bottom .nav .nav-dropdown li.menu-item:is(:hover,:has(:focus-visible),.current-menu-item,.current-menu-ancestor) > a,
  #header .header-bottom .nav .nav-dropdown li.menu-item > a:is(:hover,:focus-visible,[aria-current="page"]){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}
  /* Flyouts (owner 31/10, replaces the 14/10 0.4s close delay): the whole menu hides at once when the pointer leaves the bar
     item (override rule below). Inside the open card a flyout keeps its 0.4s grace, so a diagonal move to its last entry that
     crosses a sibling row still lands on it; a sibling's flyout opens only after the pointer rests 0.15s. Guard: scripts/menu-hover-test.mjs. */
  #header .header-bottom .nav > li:not(:hover):not(:has(:focus-visible)) .nav-column{visibility:hidden!important;opacity:0!important;transition:none!important}
  #header .header-bottom .nav-dropdown .nav-column{display:block;visibility:hidden;opacity:0;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:var(--ohio-shadow-floating);
    transition:opacity .12s ease .28s,visibility 0s linear .4s;--b:70px;   /* grace only while the pointer is still inside the open card (row to row); leaving the whole item hides it at once, see the override below */
    pointer-events:auto;transform:none}   /* ohio-legacy-customizer.css sets pointer-events:none + translateX(8px) when not hovered,
                                             which made the closing flyout (and its bridge) ignore the pointer */
  /* Hover bridge (Flatsome sets display:none on this pseudo): a 160px strip left of the flyout covering
     (1) the 28px between the card's rows and the flyout and (2) the empty area UNDER the level-1 card, so a diagonal move
     towards the last entry stays on the open item. It never covers the card itself (rows stay clickable, nothing
     "sticks"): --b = card bottom measured from the flyout top = 18 + 40 (row) + 42 per row below + 12 padding. */
  #header .header-bottom .nav-dropdown .nav-column::before{content:"";display:block!important;position:absolute;left:-160px;top:0;bottom:0;width:160px;
    clip-path:polygon(132px 18px,100% 18px,100% 100%,0 100%,0 var(--b),132px var(--b))}
  #header .header-bottom .nav-dropdown > li:nth-last-child(2) > .nav-column{--b:112px}
  #header .header-bottom .nav-dropdown > li:nth-last-child(3) > .nav-column{--b:154px}
  #header .header-bottom .nav-dropdown > li:nth-last-child(4) > .nav-column{--b:196px}
  #header .header-bottom .nav-dropdown > li:nth-last-child(5) > .nav-column{--b:238px}
  #header .header-bottom .nav-dropdown > li:nth-last-child(6) > .nav-column{--b:280px}
  #header .header-bottom .nav-dropdown > li:nth-last-child(7) > .nav-column{--b:322px}
  #header .header-bottom .nav-dropdown .nav-dropdown-col:hover > .nav-column,
  #header .header-bottom .nav-dropdown .nav-dropdown-col:has(:focus-visible) > .nav-column{visibility:visible;opacity:1;z-index:3;
    transition:opacity .12s ease .15s,visibility 0s linear .15s}
  /* a scroll closes every open card / panel / flyout until the pointer moves again (js/ohio-menu-scroll-close.js, owner 31/10) */
  html.ohio-menu-scrolled #header .header-bottom .nav > li > :is(.ohio-mega-panel,.nav-dropdown),
  html.ohio-menu-scrolled #header .header-bottom .nav .nav-column{visibility:hidden!important;opacity:0!important;transition:none!important}
  /* pointer on another bar item: every other card / panel closes at once, whatever its delay (owner 16/10, Screenshot_58;
     guard scripts/menu-hover-test.mjs case E) */
  #header .header-bottom .nav:has(> li:hover) > li:not(:hover) > .nav-dropdown,
  #header .header-bottom .nav:has(> li:hover) > li:not(:hover) > .ohio-mega-panel{visibility:hidden!important;opacity:0!important;transition:none!important}
  /* 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{padding:16px}
  .ohio-mega-panel__list,.ohio-mega-panel__list--5{grid-template-columns:repeat(3,minmax(0,1fr))}
}