/* templates/blocks/header-main-menu/style.css — v5.8.2 (INDICATOR HOVER/ACTIVE COLOR + SUBMENU STATE FIX) */
/* CHANGES:
 * - 4.1.1.5: Header Main Menu horizontal wrap guard for footer/mobile/tablet.
 * - Tách biến text color cho phần tử General để không bị đè với main item.
 */

/* ============================================================
1) Scope & CSS Variables
============================================================ */
.pf-hmn{
  --hmn-z: 1000;

  --hmn-width: 100%;
  --hmn-bg: transparent;
  --hmn-text-color: inherit; /* MỚI: Tách text color */
  --hmn-padding: 0;
  --hmn-margin: 0;

  --hmn-gap: 22px;

  /* Optional menu header */
  --hmn-header-color: inherit;
  --hmn-header-bg: transparent;
  --hmn-header-padding: 10px 14px;
  --hmn-header-margin: 0 0 8px;
  --hmn-header-radius: 6px;
  --hmn-header-font: var(--hmn-font-main);
  --hmn-header-fs: 16px;
  --hmn-header-fs-tablet: var(--hmn-header-fs);
  --hmn-header-fs-mobile: var(--hmn-header-fs-tablet);
  --hmn-header-fw: 700;
  --hmn-header-style: normal;
  --hmn-header-tr: uppercase;
  --hmn-header-ls: normal;
  --hmn-header-lh: 1.3;
  --hmn-header-align: left;
  --hmn-header-border-bottom: 0px;
  --hmn-header-border-color: transparent;

  --hmn-sub-gap: 10px;
  --hmn-flyout-gap: 6px;

  /* Main (cấp 1) */
  --hmn-main-color: inherit;
  --hmn-main-icon: currentColor;
  --hmn-main-bg: transparent;
  --hmn-main-bg-hover: transparent;
  --hmn-main-color-hover: inherit;
  --hmn-main-pad: 12px 16px;
  --hmn-main-bw-top: 0px;
  --hmn-main-bw-right: 0px;
  --hmn-main-bw-bottom: 1px;
  --hmn-main-bw-left: 0px;
  --hmn-main-bs: solid;
  --hmn-main-bc: transparent;
  --hmn-main-br: 6px;
  --hmn-main-shadow-hover: none;


  /* Dropdown trigger — independent, legacy-safe fallback */
  --hmn-trigger-font: var(--hmn-font-main);
  --hmn-trigger-fs: var(--hmn-fs-main);
  --hmn-trigger-fs-tablet: var(--hmn-trigger-fs);
  --hmn-trigger-fs-mobile: var(--hmn-trigger-fs-tablet);
  --hmn-trigger-fw: var(--hmn-fw-main);
  --hmn-trigger-style: normal;
  --hmn-trigger-tr: var(--hmn-tr-main);
  --hmn-trigger-ls: var(--hmn-ls-main);
  --hmn-trigger-lh: var(--hmn-lh-main);
  --hmn-trigger-decoration: none;
  --hmn-trigger-text-align: left;
  --hmn-trigger-color: var(--hmn-text-color);
  --hmn-trigger-color-hover: var(--hmn-main-color-hover);
  --hmn-trigger-bg: var(--hmn-main-bg);
  --hmn-trigger-bg-hover: var(--hmn-main-bg-hover);
  --hmn-trigger-pad: var(--hmn-main-pad);
  --hmn-trigger-pad-tablet: var(--hmn-trigger-pad);
  --hmn-trigger-pad-mobile: var(--hmn-trigger-pad-tablet);
  --hmn-trigger-min-h: 0px;
  --hmn-trigger-bw-top: var(--hmn-main-bw-top);
  --hmn-trigger-bw-right: var(--hmn-main-bw-right);
  --hmn-trigger-bw-bottom: var(--hmn-main-bw-bottom);
  --hmn-trigger-bw-left: var(--hmn-main-bw-left);
  --hmn-trigger-bs: var(--hmn-main-bs);
  --hmn-trigger-bc: var(--hmn-main-bc);
  --hmn-trigger-bc-hover: var(--hmn-trigger-bc);
  --hmn-trigger-br: var(--hmn-main-br);
  --hmn-trigger-shadow: none;
  --hmn-trigger-shadow-hover: var(--hmn-main-shadow-hover);
  --hmn-trigger-caret-size: 6px;
  --hmn-trigger-caret-gap: 10px;
  --hmn-trigger-caret-color: var(--hmn-main-icon);
  --hmn-trigger-caret-hover: var(--hmn-trigger-caret-color);

  /* Main underline/border active */
  --hmn-main-line-color: currentColor;
  --hmn-main-line-w: 100%;
  --hmn-main-line-h: 2px;
  --hmn-main-line-align: 0%;
  --hmn-main-line-offset: 0px;

  /* Sub container + items */
  --hmn-sub-bg: #fff;
  --hmn-sub-w: auto;
  --hmn-sub-bw-top: 0px;
  --hmn-sub-bw-right: 0px;
  --hmn-sub-bw-bottom: 0px;
  --hmn-sub-bw-left: 0px;
  --hmn-sub-bc: rgba(0,0,0,.08);
  --hmn-sub-bs: solid;
  --hmn-sub-br: 8px;
  --hmn-sub-panel-pad: 0;

  --hmn-sub-t: inherit;
  --hmn-sub-i: currentColor;
  --hmn-sub-i-hover: currentColor;
  --hmn-sub-pad: 10px 14px;
  --hmn-sub-item-margin: 0;
  --hmn-sub-br-item: 6px;
  --hmn-sub-bg-hover: rgba(0,0,0,0.04);
  --hmn-sub-color-hover: inherit;
  --hmn-sub-shadow-hover: none;

  /* Sub underline/border hover */
  --hmn-sub-line-color: currentColor;
  --hmn-sub-line-w: 100%;
  --hmn-sub-line-h: 1px;
  --hmn-sub-line-align: 0%;
  --hmn-sub-line-offset: 0px;

  /* Submenu item separator */
  --hmn-sub-item-sep-w: 0px;
  --hmn-sub-item-sep-style: solid;
  --hmn-sub-item-sep-color: transparent;

  /* Fonts */
  --hmn-font-main: inherit;
  --hmn-fs-main: 14px;
  --hmn-fs-main-tablet: var(--hmn-fs-main);
  --hmn-fs-main-mobile: var(--hmn-fs-main-tablet);
  --hmn-fw-main: 500;
  --hmn-style-main: normal;
  --hmn-tr-main: none;
  --hmn-ls-main: normal;
  --hmn-lh-main: 1.4;

  --hmn-font-sub: inherit;
  --hmn-fs-sub: 14px;
  --hmn-fs-sub-tablet: var(--hmn-fs-sub);
  --hmn-fs-sub-mobile: var(--hmn-fs-sub-tablet);
  --hmn-fw-sub: 400;
  --hmn-style-sub: normal;
  --hmn-tr-sub: none;
  --hmn-ls-sub: normal;
  --hmn-lh-sub: 1.4;

  /* Menu-item icons: root / submenu have independent sizing & states */
  --hmn-main-item-icon-size: 16px;
  --hmn-main-item-icon-box: 22px;
  --hmn-main-item-icon-gap: 8px;
  --hmn-main-item-icon-color: currentColor;
  --hmn-main-item-icon-hover: currentColor;
  --hmn-main-item-icon-active: currentColor;
  --hmn-main-item-icon-bg: transparent;
  --hmn-main-item-icon-hover-bg: transparent;
  --hmn-main-item-icon-active-bg: transparent;
  --hmn-main-item-icon-radius: 4px;

  --hmn-sub-item-icon-size: 15px;
  --hmn-sub-item-icon-box: 20px;
  --hmn-sub-item-icon-gap: 8px;
  --hmn-sub-item-icon-color: currentColor;
  --hmn-sub-item-icon-hover: currentColor;
  --hmn-sub-item-icon-active: currentColor;
  --hmn-sub-item-icon-bg: transparent;
  --hmn-sub-item-icon-hover-bg: transparent;
  --hmn-sub-item-icon-active-bg: transparent;
  --hmn-sub-item-icon-radius: 4px;

  --hmn-item-badge-bg: #ef4444;
  --hmn-badge-text: #fff;
  --hmn-badge-fs: 10px;
  --hmn-badge-fw: 700;
  --hmn-badge-radius: 999px;
  --hmn-badge-pad: 3px 7px;

  width: var(--hmn-width);
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
  color: var(--hmn-text-color); /* FIX: Dùng biến text-color mới */
  background-color: var(--hmn-bg);
  padding: var(--hmn-padding);
  margin: var(--hmn-margin);
}
.pf-hmn,
.pf-hmn *{ box-sizing:border-box; }
.pf-hmn__inner{ width:100%; max-width:100%; min-width:0; box-sizing:border-box; overflow:visible; }
.pf-hmn__menu-header{
  display:block; width:100%; min-width:0; box-sizing:border-box;
  color:var(--hmn-header-color); background:var(--hmn-header-bg);
  padding:var(--hmn-header-padding); margin:var(--hmn-header-margin);
  border-radius:var(--hmn-header-radius);
  border-bottom:var(--hmn-header-border-bottom) solid var(--hmn-header-border-color);
  font-family:var(--hmn-header-font); font-size:var(--hmn-header-fs); font-weight:var(--hmn-header-fw); font-style:var(--hmn-header-style);
  text-transform:var(--hmn-header-tr); letter-spacing:var(--hmn-header-ls); line-height:var(--hmn-header-lh);
  text-align:var(--hmn-header-align); overflow-wrap:anywhere;
}

/* ============================================================
2) Layout Modes & Trigger
============================================================ */
.pf-hmn.hmn--display-inline{
  width:var(--hmn-width,auto);
  display:inline-flex;
  vertical-align:middle;
}
.pf-hmn.hmn--display-inline.hmn--valign-top{    align-self:start;  align-self:flex-start; }
.pf-hmn.hmn--display-inline.hmn--valign-middle{ align-self:center; }
.pf-hmn.hmn--display-inline.hmn--valign-bottom{ align-self:end;    align-self:flex-end; }

.pf-hmn__list{
  display:flex; align-items:center; margin:0; padding:0; list-style:none;
  max-width:100%; min-width:0;
  font-family:var(--hmn-font-main); font-size:var(--hmn-fs-main); font-weight:var(--hmn-fw-main); font-style:var(--hmn-style-main);
  text-transform:var(--hmn-tr-main); letter-spacing:var(--hmn-ls-main); line-height:var(--hmn-lh-main);
}
.pf-hmn__item{ position:relative; min-width:0; max-width:100%; }
.pf-hmn__item a{
  display:flex; align-items:center; gap:8px; width:100%; max-width:100%; min-width:0; box-sizing:border-box; position:relative;
  white-space:normal; overflow-wrap:break-word; word-break:normal;
  transition:all .2s ease; text-decoration:none !important; background:transparent;
  /* Đã xóa color: inherit !important; ở đây */
}
.pf-hmn__item a > span{ min-width:0; max-width:100%; overflow-wrap:break-word; }
.pf-hmn__item-leading{display:inline-flex;align-items:center;min-width:0;flex:1 1 auto;}
.pf-hmn__item-label{min-width:0;overflow-wrap:break-word;}
.pf-hmn__item-icon{display:inline-flex;align-items:center;justify-content:center;line-height:1;transition:color .2s ease,background-color .2s ease,border-color .2s ease,transform .2s ease;overflow:hidden;}
.pf-hmn__item-icon i,.pf-hmn__item-icon .material-symbols-rounded,.pf-hmn__item-icon ion-icon{font-size:inherit;line-height:1;display:block;}
.pf-hmn__item-icon .material-symbols-rounded{font-variation-settings:'FILL' 0,'wght' 500,'GRAD' 0,'opsz' 24;}
.pf-hmn__item-icon img,.pf-hmn__item-icon svg,.pf-hmn__item-svg{display:block;max-width:100%;max-height:100%;object-fit:contain;}
.pf-hmn__item-icon svg{fill:currentColor;}
.pf-hmn__item-icon .pf-hmn__fa-svg{display:block;width:1em;height:1em;fill:currentColor;stroke:none;overflow:visible;}

/* Root / level 1 icon styling */
.pf-hmn__list[data-depth="1"] > .pf-hmn__item > a .pf-hmn__item-leading{gap:var(--hmn-main-item-icon-gap);}
.pf-hmn__list[data-depth="1"] > .pf-hmn__item > a .pf-hmn__item-icon{
  flex:0 0 var(--hmn-main-item-icon-box);width:var(--hmn-main-item-icon-box);height:var(--hmn-main-item-icon-box);
  font-size:var(--hmn-main-item-icon-size);color:var(--pf-menu-item-icon-color,var(--hmn-main-item-icon-color));
  background:var(--hmn-main-item-icon-bg);border-radius:var(--hmn-main-item-icon-radius);
}
.pf-hmn__list[data-depth="1"] > .pf-hmn__item > a .pf-hmn__item-icon img,
.pf-hmn__list[data-depth="1"] > .pf-hmn__item > a .pf-hmn__item-icon svg{width:var(--hmn-main-item-icon-size);height:var(--hmn-main-item-icon-size);}
.pf-hmn__list[data-depth="1"] > .pf-hmn__item:hover > a .pf-hmn__item-icon{color:var(--hmn-main-item-icon-hover,var(--pf-menu-item-icon-color,var(--hmn-main-item-icon-color)));background:var(--hmn-main-item-icon-hover-bg);}
.pf-hmn__list[data-depth="1"] > .pf-hmn__item.pf-hmn__item--active > a .pf-hmn__item-icon{color:var(--hmn-main-item-icon-active,var(--hmn-main-item-icon-hover));background:var(--hmn-main-item-icon-active-bg);}

/* Submenu icon styling */
.pf-hmn__submenu .pf-hmn__item > a .pf-hmn__item-leading{gap:var(--hmn-sub-item-icon-gap);}
.pf-hmn__submenu .pf-hmn__item > a .pf-hmn__item-icon{
  flex:0 0 var(--hmn-sub-item-icon-box);width:var(--hmn-sub-item-icon-box);height:var(--hmn-sub-item-icon-box);
  font-size:var(--hmn-sub-item-icon-size);color:var(--pf-menu-item-icon-color,var(--hmn-sub-item-icon-color));
  background:var(--hmn-sub-item-icon-bg);border-radius:var(--hmn-sub-item-icon-radius);
}
.pf-hmn__submenu .pf-hmn__item > a .pf-hmn__item-icon img,
.pf-hmn__submenu .pf-hmn__item > a .pf-hmn__item-icon svg{width:var(--hmn-sub-item-icon-size);height:var(--hmn-sub-item-icon-size);}
.pf-hmn__submenu .pf-hmn__item:hover > a .pf-hmn__item-icon{color:var(--hmn-sub-item-icon-hover,var(--pf-menu-item-icon-color,var(--hmn-sub-item-icon-color)));background:var(--hmn-sub-item-icon-hover-bg);}
.pf-hmn__submenu .pf-hmn__item.pf-hmn__item--active > a .pf-hmn__item-icon{color:var(--hmn-sub-item-icon-active,var(--hmn-sub-item-icon-hover));background:var(--hmn-sub-item-icon-active-bg);}

.pf-hmn__item-badge{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;padding:var(--hmn-badge-pad);border-radius:var(--hmn-badge-radius);background:var(--pf-menu-item-badge-bg,var(--hmn-item-badge-bg));color:var(--hmn-badge-text);font-size:var(--hmn-badge-fs);font-weight:var(--hmn-badge-fw);line-height:1;white-space:nowrap;}
.pf-hmn.hmn--hide-item-icons .pf-hmn__item-icon{display:none!important;}
.pf-hmn.hmn--hide-badges .pf-hmn__item-badge{display:none!important;}

/* Submenu master toggle */
.pf-hmn.hmn--submenu-disabled .pf-hmn__submenu{display:none!important;visibility:hidden!important;opacity:0!important;pointer-events:none!important;}
.pf-hmn.hmn--submenu-disabled .pf-hmn__item.has-sub > a::after{display:none!important;}

/* Menu cấp 1 nhận màu main */
.pf-hmn__list[data-depth="1"] > .pf-hmn__item > a {
  color: var(--hmn-main-color) !important;
}

/* --- Layout: Horizontal --- */
.hmn--layout-horizontal > .pf-hmn__inner > .pf-hmn__list{
  flex-direction:row; flex-wrap:wrap; gap:var(--hmn-gap); justify-content:flex-start;
}
.hmn--layout-horizontal.hmn--center > .pf-hmn__inner > .pf-hmn__list{ justify-content:center; }
.hmn--layout-horizontal.hmn--right  > .pf-hmn__inner > .pf-hmn__list{ justify-content:flex-end; }
.hmn--layout-horizontal > .pf-hmn__inner > .pf-hmn__list > .pf-hmn__item{
  flex:0 1 auto;
  max-width:100%;
  padding-bottom:var(--hmn-sub-gap);
  margin-bottom:calc(-1 * var(--hmn-sub-gap));
}

/* --- Layout: Vertical --- */
.hmn--layout-vertical > .pf-hmn__inner > .pf-hmn__list{
  flex-direction:column; align-items:stretch; gap:var(--hmn-gap);
}
.hmn--layout-vertical > .pf-hmn__inner > .pf-hmn__list > .pf-hmn__item{
  padding-right:var(--hmn-sub-gap);
  margin-right:calc(-1 * var(--hmn-sub-gap));
  width:100%;
}

/* Footer/mobile horizontal menu overflow guard.
   Header Main Menu may be reused in footer; long menu labels must wrap instead of
   expanding page width on mobile/tablet. */
@media (max-width: 991.98px){
  .hmn--layout-horizontal > .pf-hmn__inner > .pf-hmn__list{
    width:100%;
    max-width:100%;
    min-width:0;
    justify-content:flex-start;
  }
  .hmn--layout-horizontal > .pf-hmn__inner > .pf-hmn__list > .pf-hmn__item{
    flex:0 1 auto;
    min-width:0;
    max-width:100%;
  }
  .hmn--layout-horizontal > .pf-hmn__inner > .pf-hmn__list > .pf-hmn__item > a{
    max-width:100%;
    white-space:normal;
    overflow-wrap:break-word;
  }
}
@media (max-width: 575.98px){
  .hmn--layout-horizontal > .pf-hmn__inner > .pf-hmn__list{
    row-gap:calc(var(--hmn-gap) * .5);
  }
}

/* --- Layout: Dropdown (Trigger) --- */
.hmn--layout-dropdown{ display:inline-block; width:var(--hmn-width,auto); }

.pf-hmn__trigger{
  display:flex; align-items:center; justify-content:space-between; gap:var(--hmn-trigger-caret-gap); width:100%; min-height:var(--hmn-trigger-min-h);
  cursor:pointer; transition:background-color .2s ease,color .2s ease,border-color .2s ease,box-shadow .2s ease;
  background-color:var(--hmn-trigger-bg); padding:var(--hmn-trigger-pad); box-shadow:var(--hmn-trigger-shadow);
  border-top-width:var(--hmn-trigger-bw-top); border-right-width:var(--hmn-trigger-bw-right);
  border-bottom-width:var(--hmn-trigger-bw-bottom); border-left-width:var(--hmn-trigger-bw-left);
  border-style:var(--hmn-trigger-bs); border-color:var(--hmn-trigger-bc); border-radius:var(--hmn-trigger-br);
  color:var(--hmn-trigger-color);
  font-family:var(--hmn-trigger-font); font-size:var(--hmn-trigger-fs); font-weight:var(--hmn-trigger-fw); font-style:var(--hmn-trigger-style);
  text-transform:var(--hmn-trigger-tr); letter-spacing:var(--hmn-trigger-ls); line-height:var(--hmn-trigger-lh); text-decoration:var(--hmn-trigger-decoration);
}
.pf-hmn__trigger-text{flex:1 1 auto;min-width:0;text-align:var(--hmn-trigger-text-align);overflow-wrap:anywhere;}
.pf-hmn__trigger:hover, .pf-hmn.is-open .pf-hmn__trigger{
  background-color:var(--hmn-trigger-bg-hover); color:var(--hmn-trigger-color-hover); border-color:var(--hmn-trigger-bc-hover); box-shadow:var(--hmn-trigger-shadow-hover);
}
.pf-hmn__trigger-caret{display:inline-block;flex:0 0 auto;color:var(--hmn-trigger-caret-color);transition:transform .2s ease,color .2s ease;}
.pf-hmn__trigger:hover .pf-hmn__trigger-caret,.pf-hmn.is-open .pf-hmn__trigger-caret{color:var(--hmn-trigger-caret-hover);}
.pf-hmn.hmn-trigger-caret-left .pf-hmn__trigger-caret{order:-1;}
.pf-hmn.hmn-trigger-caret-hidden .pf-hmn__trigger-caret,.pf-hmn.hmn-trigger-caret-none .pf-hmn__trigger-caret{display:none!important;}
.pf-hmn.hmn-trigger-caret-triangle .pf-hmn__trigger-caret{width:0;height:0;border-left:var(--hmn-trigger-caret-size) solid transparent;border-right:var(--hmn-trigger-caret-size) solid transparent;border-top:var(--hmn-trigger-caret-size) solid currentColor;}
.pf-hmn.hmn-trigger-caret-triangle.is-open .pf-hmn__trigger-caret{transform:rotate(180deg);}
.pf-hmn.hmn-trigger-caret-chevron .pf-hmn__trigger-caret{width:var(--hmn-trigger-caret-size);height:var(--hmn-trigger-caret-size);border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg) translateY(-15%);}
.pf-hmn.hmn-trigger-caret-chevron.is-open .pf-hmn__trigger-caret{transform:rotate(225deg) translate(-10%,-10%);}
.pf-hmn.hmn-trigger-caret-plus-minus .pf-hmn__trigger-caret{width:calc(var(--hmn-trigger-caret-size) * 2);height:calc(var(--hmn-trigger-caret-size) * 2);position:relative;}
.pf-hmn.hmn-trigger-caret-plus-minus .pf-hmn__trigger-caret::before,.pf-hmn.hmn-trigger-caret-plus-minus .pf-hmn__trigger-caret::after{content:'';position:absolute;left:50%;top:50%;width:100%;height:2px;background:currentColor;border-radius:2px;transform:translate(-50%,-50%);}
.pf-hmn.hmn-trigger-caret-plus-minus .pf-hmn__trigger-caret::after{transform:translate(-50%,-50%) rotate(90deg);transition:transform .2s ease,opacity .2s ease;}
.pf-hmn.hmn-trigger-caret-plus-minus.is-open .pf-hmn__trigger-caret::after{opacity:0;transform:translate(-50%,-50%) rotate(0deg);}

.hmn--layout-dropdown .pf-hmn__inner{
  position:absolute !important; top:100% !important; left:0 !important; z-index:var(--hmn-z);
  width:100%;
  min-width:100%;
  box-sizing:border-box;
  background-color:var(--hmn-sub-bg);
  border:none !important;
  border-radius:var(--hmn-sub-br);
  box-shadow:0 8px 24px rgba(0,0,0,0.12);
  visibility: hidden;
  opacity: 0;
  transition: visibility 0s 0.2s, opacity 0.2s ease;
}
.hmn--layout-dropdown .pf-hmn__list{
  flex-direction:column !important; align-items:stretch !important;
  padding:var(--hmn-sub-panel-pad) !important; gap:0 !important;
}
.hmn--layout-dropdown .pf-hmn__item{ padding:0; margin:var(--hmn-sub-item-margin); }
.hmn--layout-dropdown .pf-hmn__list > .pf-hmn__item > a{
  padding:var(--hmn-sub-pad) !important; border-radius:0 !important;
  border-bottom-width: var(--hmn-sub-item-sep-w, 0) !important;
  border-bottom-style: var(--hmn-sub-item-sep-style, solid) !important;
  border-bottom-color: var(--hmn-sub-item-sep-color, transparent) !important;
}
.hmn--layout-dropdown .pf-hmn__list > .pf-hmn__item:last-child > a{ border-bottom-width:0 !important; }

/* Hiển thị panel khi click (luôn hoạt động) */
.hmn--layout-dropdown.hmn--trigger-click.is-open > .pf-hmn__inner{
  visibility: visible;
  opacity: 1;
  transition: opacity 0.2s ease;
}

/* ============================================================
3) Main Item Styles (Level 1 — all layouts, including Dropdown)
============================================================ */
/* Main controls are level-1 controls. Keep them bound to data-depth=1 so
   submenu items never inherit the wrong hover/background state. */
.pf-hmn > .pf-hmn__inner > .pf-hmn__list[data-depth="1"] > .pf-hmn__item > a{
  background-color:var(--hmn-main-bg) !important;
  padding:var(--hmn-main-pad) !important;
  border-top-width:var(--hmn-main-bw-top) !important;
  border-right-width:var(--hmn-main-bw-right) !important;
  border-bottom-width:var(--hmn-main-bw-bottom) !important;
  border-left-width:var(--hmn-main-bw-left) !important;
  border-style:var(--hmn-main-bs) !important;
  border-color:var(--hmn-main-bc) !important;
  border-radius:var(--hmn-main-br) !important;
}
.pf-hmn > .pf-hmn__inner > .pf-hmn__list[data-depth="1"] > .pf-hmn__item:hover > a,
.pf-hmn > .pf-hmn__inner > .pf-hmn__list[data-depth="1"] > .pf-hmn__item:focus-within > a,
.pf-hmn > .pf-hmn__inner > .pf-hmn__list[data-depth="1"] > .pf-hmn__item.pf-hmn__item--active > a{
  color:var(--hmn-main-color-hover) !important;
  background-color:var(--hmn-main-bg-hover) !important;
  box-shadow:var(--hmn-main-shadow-hover) !important;
}

/* Dropdown root keeps compact/list-like geometry, but state colors above remain
   Main Menu controls. This fixes Main hover/active being ignored in dropdown. */
.hmn--layout-dropdown > .pf-hmn__inner > .pf-hmn__list[data-depth="1"] > .pf-hmn__item > a{
  padding:var(--hmn-sub-pad) !important;
  border-radius:var(--hmn-sub-br-item) !important;
  border-bottom-width:var(--hmn-sub-item-sep-w, 0) !important;
  border-bottom-style:var(--hmn-sub-item-sep-style, solid) !important;
  border-bottom-color:var(--hmn-sub-item-sep-color, transparent) !important;
}
.hmn--layout-dropdown > .pf-hmn__inner > .pf-hmn__list[data-depth="1"] > .pf-hmn__item:last-child > a{
  border-bottom-width:0 !important;
}

/* Bordered interaction style */
.hmn--main-as-style2 > .pf-hmn__inner > .pf-hmn__list[data-depth="1"] > .pf-hmn__item:hover > a,
.hmn--main-as-style2 > .pf-hmn__inner > .pf-hmn__list[data-depth="1"] > .pf-hmn__item:focus-within > a,
.hmn--main-as-style2 > .pf-hmn__inner > .pf-hmn__list[data-depth="1"] > .pf-hmn__item.pf-hmn__item--active > a{
  border-color:var(--hmn-main-line-color,currentColor) !important;
}

/* Independent bottom line. It can be combined with Background/Text hover. */
.hmn--main-line-hover > .pf-hmn__inner > .pf-hmn__list[data-depth="1"] > .pf-hmn__item > a::before,
.hmn--main-line-active > .pf-hmn__inner > .pf-hmn__list[data-depth="1"] > .pf-hmn__item > a::before,
.hmn--main-line-both > .pf-hmn__inner > .pf-hmn__list[data-depth="1"] > .pf-hmn__item > a::before,
.hmn--main-line-always > .pf-hmn__inner > .pf-hmn__list[data-depth="1"] > .pf-hmn__item > a::before{
  content:'';
  position:absolute;
  left:50%;
  bottom:var(--hmn-main-line-offset);
  transform:translateX(calc(-50% + var(--hmn-main-line-align)));
  width:0;
  height:var(--hmn-main-line-h);
  background-color:var(--hmn-main-line-color);
  border-radius:999px;
  opacity:0;
  pointer-events:none;
  transition:width .2s ease,opacity .2s ease,background-color .2s ease;
}
.hmn--main-line-hover > .pf-hmn__inner > .pf-hmn__list[data-depth="1"] > .pf-hmn__item:hover > a::before,
.hmn--main-line-hover > .pf-hmn__inner > .pf-hmn__list[data-depth="1"] > .pf-hmn__item:focus-within > a::before,
.hmn--main-line-both > .pf-hmn__inner > .pf-hmn__list[data-depth="1"] > .pf-hmn__item:hover > a::before,
.hmn--main-line-both > .pf-hmn__inner > .pf-hmn__list[data-depth="1"] > .pf-hmn__item:focus-within > a::before,
.hmn--main-line-active > .pf-hmn__inner > .pf-hmn__list[data-depth="1"] > .pf-hmn__item.pf-hmn__item--active > a::before,
.hmn--main-line-both > .pf-hmn__inner > .pf-hmn__list[data-depth="1"] > .pf-hmn__item.pf-hmn__item--active > a::before,
.hmn--main-line-always > .pf-hmn__inner > .pf-hmn__list[data-depth="1"] > .pf-hmn__item > a::before{
  width:var(--hmn-main-line-w);
  opacity:1;
}

/* ============================================================
4) Submenu Panel & Items (cấp 2+)
============================================================ */
.pf-hmn__submenu{
  position:absolute; margin:0;
  background:var(--hmn-sub-bg);
  border-top-width: var(--hmn-sub-bw-top);
  border-right-width: var(--hmn-sub-bw-right);
  border-bottom-width: var(--hmn-sub-bw-bottom);
  border-left-width: var(--hmn-sub-bw-left);
  border-style: var(--hmn-sub-bs, solid);
  border-color: var(--hmn-sub-bc);
  border-radius:var(--hmn-sub-br);
  width: var(--hmn-sub-w, auto);
  box-sizing: border-box;
  padding:var(--hmn-sub-panel-pad);
  list-style:none; z-index:var(--hmn-z);
  font-family:var(--hmn-font-sub); font-size:var(--hmn-fs-sub); font-weight:var(--hmn-fw-sub); font-style:var(--hmn-style-sub);
  text-transform:var(--hmn-tr-sub); letter-spacing:var(--hmn-ls-sub); line-height:var(--hmn-lh-sub);
  box-shadow:0 8px 24px rgba(0,0,0,.08);
  margin-left: var(--hmn-flyout-gap);
  visibility: hidden;
  opacity: 0;
  transition: visibility 0s 0.2s, opacity 0.2s ease;
  will-change: transform, opacity;
}

/* Định vị theo layout + depth */
.hmn--layout-horizontal .pf-hmn__submenu[data-depth="2"],
.hmn--layout-horizontal .pf-hmn__submenu.pf-hmn__submenu--l2{
  left:0; top:100%;
}
.hmn--layout-horizontal .pf-hmn__submenu .pf-hmn__submenu{
  top:0; left:100%;
}
.hmn--layout-vertical .pf-hmn__submenu,
.hmn--layout-dropdown .pf-hmn__submenu{
  top:0; left:100%;
}

/* Vùng đệm chống "đứt hover" khi bay phải */
.pf-hmn__submenu::before{
  content:''; position:absolute; left:calc(-1 * var(--hmn-flyout-gap)); top:0; bottom:0;
  width:var(--hmn-flyout-gap);
}

.pf-hmn__submenu > li{
  position:relative; padding:0; margin:var(--hmn-sub-item-margin); width:auto;
}
.pf-hmn__submenu > li > a{
  padding:var(--hmn-sub-pad) !important; border-radius:var(--hmn-sub-br-item) !important;
  color:var(--hmn-sub-t) !important;
  border-bottom-width: var(--hmn-sub-item-sep-w, 0);
  border-bottom-style: var(--hmn-sub-item-sep-style, solid);
  border-bottom-color: var(--hmn-sub-item-sep-color, transparent);
}
.pf-hmn__submenu > li:last-child > a{ border-bottom-width: 0; }

.pf-hmn__submenu > .pf-hmn__item:hover > a,
.pf-hmn__submenu > .pf-hmn__item:focus-within > a,
.pf-hmn__submenu > .pf-hmn__item.pf-hmn__item--active > a{
  color:var(--hmn-sub-color-hover) !important;
  background-color:var(--hmn-sub-bg-hover) !important;
  box-shadow:var(--hmn-sub-shadow-hover) !important;
}

/* Bordered interaction style */
.hmn--sub-as-style2 .pf-hmn__submenu > .pf-hmn__item:hover > a,
.hmn--sub-as-style2 .pf-hmn__submenu > .pf-hmn__item:focus-within > a,
.hmn--sub-as-style2 .pf-hmn__submenu > .pf-hmn__item.pf-hmn__item--active > a{
  border-color:var(--hmn-sub-line-color,currentColor) !important;
}

/* Independent submenu bottom line */
.hmn--sub-line-hover .pf-hmn__submenu > .pf-hmn__item > a::before,
.hmn--sub-line-active .pf-hmn__submenu > .pf-hmn__item > a::before,
.hmn--sub-line-both .pf-hmn__submenu > .pf-hmn__item > a::before,
.hmn--sub-line-always .pf-hmn__submenu > .pf-hmn__item > a::before{
  content:'';
  position:absolute;
  left:50%;
  bottom:var(--hmn-sub-line-offset);
  transform:translateX(calc(-50% + var(--hmn-sub-line-align)));
  width:0;
  height:var(--hmn-sub-line-h);
  background-color:var(--hmn-sub-line-color);
  border-radius:999px;
  opacity:0;
  pointer-events:none;
  transition:width .2s ease,opacity .2s ease,background-color .2s ease;
}
.hmn--sub-line-hover .pf-hmn__submenu > .pf-hmn__item:hover > a::before,
.hmn--sub-line-hover .pf-hmn__submenu > .pf-hmn__item:focus-within > a::before,
.hmn--sub-line-both .pf-hmn__submenu > .pf-hmn__item:hover > a::before,
.hmn--sub-line-both .pf-hmn__submenu > .pf-hmn__item:focus-within > a::before,
.hmn--sub-line-active .pf-hmn__submenu > .pf-hmn__item.pf-hmn__item--active > a::before,
.hmn--sub-line-both .pf-hmn__submenu > .pf-hmn__item.pf-hmn__item--active > a::before,
.hmn--sub-line-always .pf-hmn__submenu > .pf-hmn__item > a::before{
  width:var(--hmn-sub-line-w);
  opacity:1;
}

/* ============================================================
5) Hover/Focus Interactions & Mobile Optimizations
============================================================ */
@media (hover: hover) {
  .pf-hmn__item:hover > .pf-hmn__submenu {
    visibility: visible;
    opacity: 1;
    transition: opacity 0.2s ease;
  }
  .hmn--layout-dropdown:not(.hmn--trigger-click):hover > .pf-hmn__inner {
    visibility: visible;
    opacity: 1;
    transition: opacity 0.2s ease;
  }
}

.pf-hmn__item:focus-within > .pf-hmn__submenu{
  visibility: visible;
  opacity: 1;
}

/* ============================================================
6) Indicators (triangle / chevron / plus-minus / none)
   v5.8.2: direction is scoped by indicator type; indicator state color is independent. Triangle must never
   inherit chevron rotation; dropdown/vertical/flyout point right, while
   horizontal level-1 points down.
============================================================ */
.pf-hmn__item.has-sub > a::after{
  content:''; display:block; flex:0 0 auto; margin-left:auto; transition:transform .2s ease; transform-origin:center;
}

/* Triangle: default/right for vertical, dropdown and nested flyouts. */
.hmn-sub-icon--triangle .pf-hmn__item.has-sub > a::after{
  width:0; height:0; transform:none !important;
  border-top:5px solid transparent; border-bottom:5px solid transparent; border-left:6px solid var(--hmn-sub-i-current,var(--hmn-sub-i)); border-right:0;
}
/* Horizontal root uses a down triangle. Nested submenu stays right-pointing. */
.hmn-sub-icon--triangle.hmn--layout-horizontal > .pf-hmn__inner > .pf-hmn__list[data-depth="1"] > .pf-hmn__item.has-sub > a::after{
  border-left:6px solid transparent; border-right:6px solid transparent; border-top:6px solid var(--hmn-sub-i-current,var(--hmn-sub-i)); border-bottom:0;
}
.hmn-sub-icon--triangle .pf-hmn__submenu .pf-hmn__item.has-sub > a::after{
  border-top:5px solid transparent; border-bottom:5px solid transparent; border-left:6px solid var(--hmn-sub-i-current,var(--hmn-sub-i)); border-right:0;
}

/* Chevron: rotate only chevrons, never triangles. */
.hmn-sub-icon--chevron .pf-hmn__item.has-sub > a::after{
  width:6px; height:6px; border-style:solid; border-color:var(--hmn-sub-i-current,var(--hmn-sub-i)); border-width:0 1.5px 1.5px 0;
}
.hmn-sub-icon--chevron.hmn--layout-horizontal > .pf-hmn__inner > .pf-hmn__list[data-depth="1"] > .pf-hmn__item.has-sub > a::after{
  transform:translateY(-2px) rotate(45deg);
}
.hmn-sub-icon--chevron.hmn--layout-vertical .pf-hmn__item.has-sub > a::after,
.hmn-sub-icon--chevron.hmn--layout-dropdown .pf-hmn__item.has-sub > a::after,
.hmn-sub-icon--chevron .pf-hmn__submenu .pf-hmn__item.has-sub > a::after{
  transform:rotate(-45deg);
}

.hmn-sub-icon--plus-minus .pf-hmn__item.has-sub > a::after{ content:'+'; width:auto; height:auto; font-size:1.1em; border:none; transform:none !important; color:var(--hmn-sub-i-current,var(--hmn-sub-i)); }
.hmn-sub-icon--plus-minus .pf-hmn__item.has-sub:hover > a::after{ content:'−'; }
.hmn-sub-icon--none .pf-hmn__item.has-sub > a::after{ display:none; }


/* Indicator normal / hover / active-open state.
   Keep it independent from submenu text color, while falling back to the
   submenu hover text color for backwards compatibility when unset. */
.pf-hmn__item.has-sub:hover > a::after,
.pf-hmn__item.has-sub:focus-within > a::after,
.pf-hmn__item.has-sub.is-open > a::after,
.pf-hmn__item.has-sub.pf-hmn__item--active > a::after,
.pf-hmn__item.has-sub > a[aria-expanded="true"]::after{
  --hmn-sub-i-current:var(--hmn-sub-i-hover,var(--hmn-sub-color-hover,var(--hmn-sub-i)));
}


/* ============================================================
7) Utilities
============================================================ */
.pf-hmn__note{ display:none; }

/* v5.8.2 Responsive typography & trigger spacing */
@media (max-width: 991.98px){
  .pf-hmn__menu-header{font-size:var(--hmn-header-fs-tablet);}
  .pf-hmn__list[data-depth="1"]{font-size:var(--hmn-fs-main-tablet);}
  .pf-hmn__submenu{font-size:var(--hmn-fs-sub-tablet);}
  .pf-hmn__trigger{font-size:var(--hmn-trigger-fs-tablet);padding:var(--hmn-trigger-pad-tablet);}
}
@media (max-width: 575.98px){
  .pf-hmn__menu-header{font-size:var(--hmn-header-fs-mobile);}
  .pf-hmn__list[data-depth="1"]{font-size:var(--hmn-fs-main-mobile);}
  .pf-hmn__submenu{font-size:var(--hmn-fs-sub-mobile);}
  .pf-hmn__trigger{font-size:var(--hmn-trigger-fs-mobile);padding:var(--hmn-trigger-pad-mobile);}
}
@media (prefers-reduced-motion: reduce){
  .pf-hmn *{ transition:none !important; animation:none !important; }
}

.pf-hmn:not(.hmn--display-inline),
.pf-hmn.hmn--layout-dropdown {
  position: relative;
}

/* ============================================================
8) Flip & Overflow-Fix (NEW)
============================================================ */
.pf-hmn .pf-hmn__submenu.pf-hmn--flip{
  left:auto !important;
  right:100% !important;
  margin-left:0 !important;
  margin-right:var(--hmn-flyout-gap) !important;
}

.pf-hmn.hmn--overflowfix .pf-hmn__submenu{
  transform: translateX(-200vw);
}

@media (hover: hover){
  .pf-hmn.hmn--overflowfix .pf-hmn__item:hover > .pf-hmn__submenu,
  .pf-hmn.hmn--overflowfix .pf-hmn__submenu .pf-hmn__item:hover > .pf-hmn__submenu{
    transform:none;
  }
}

.pf-hmn.hmn--overflowfix .pf-hmn__item:focus-within > .pf-hmn__submenu{
  transform:none;
}

.pf-hmn.hmn--overflowfix .pf-hmn__item.is-touch-open > .pf-hmn__submenu{
  transform:none;
}