/* templates/blocks/header-main-menu/style.css — v5.4.2 (STABLE) */
/* CHANGES: 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;
  --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;

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

  /* 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-t: inherit;
  --hmn-sub-i: 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%;

  /* 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-fw-main: 500;
  --hmn-tr-main: none;
  --hmn-ls-main: normal;
  --hmn-lh-main: 1.4;

  --hmn-font-sub: inherit;
  --hmn-fs-sub: 14px;
  --hmn-fw-sub: 400;
  --hmn-tr-sub: none;
  --hmn-ls-sub: normal;
  --hmn-lh-sub: 1.4;

  width: var(--hmn-width);
  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__inner{ width:100%; box-sizing:border-box; }

/* ============================================================
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;
  font-family:var(--hmn-font-main); font-size:var(--hmn-fs-main); font-weight:var(--hmn-fw-main);
  text-transform:var(--hmn-tr-main); letter-spacing:var(--hmn-ls-main); line-height:var(--hmn-lh-main);
}
.pf-hmn__item{ position:relative; }
.pf-hmn__item a{
  display:flex; align-items:center; gap:8px; width:100%; box-sizing:border-box; position:relative;
  transition:all .2s ease; text-decoration:none !important; background:transparent !important;
  /* Đã xóa color: inherit !important; ở đây */
}
.pf-hmn__item a > span{ flex-grow:1; }

/* THÊM ĐOẠN NÀY VÀO ĐỂ 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; 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{
  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%;
}

/* --- 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:10px; width:100%;
  cursor:pointer; transition:all .2s ease;
  background-color:var(--hmn-main-bg); padding:var(--hmn-main-pad);
  border-top-width:var(--hmn-main-bw-top); border-right-width:var(--hmn-main-bw-right);
  border-bottom-width:var(--hmn-main-bw-bottom); border-left-width:var(--hmn-main-bw-left);
  border-style:var(--hmn-main-bs); border-color:var(--hmn-main-bc); border-radius:var(--hmn-main-br);
  color:var(--hmn-text-color);
  font-family:var(--hmn-font-main); font-size:var(--hmn-fs-main); font-weight:var(--hmn-fw-main);
  text-transform:var(--hmn-tr-main); letter-spacing:var(--hmn-ls-main); line-height:var(--hmn-lh-main);
}
.pf-hmn__trigger:hover, .pf-hmn.is-open .pf-hmn__trigger{
  background-color:var(--hmn-main-bg-hover); color:var(--hmn-main-color-hover); box-shadow:var(--hmn-main-shadow-hover);
}
.pf-hmn__trigger-caret{
  width:0; height:0; display:inline-block;
  border-left:6px solid transparent; border-right:6px solid transparent; border-top:6px solid var(--hmn-main-icon);
  transition:transform .2s ease;
}
.pf-hmn.is-open .pf-hmn__trigger-caret{ transform:rotate(180deg); }

.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:8px 0 !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 (Horizontal/Vertical)
============================================================ */
.hmn--layout-horizontal > .pf-hmn__inner > .pf-hmn__list > .pf-hmn__item.has-sub > a::after{
  content:''; width:0; height:0;
  border-left:6px solid transparent;
  border-right:6px solid transparent;
  border-top:6px solid var(--hmn-sub-i);
  border-bottom:none;
  transform:none;
  margin-left:6px;
}
.hmn--layout-vertical .pf-hmn__item.has-sub > a::after,
.hmn--layout-dropdown .pf-hmn__item.has-sub > a::after,
.pf-hmn__submenu .pf-hmn__item.has-sub > a::after{
  content:''; width:0; height:0;
  border-top:5px solid transparent !important;
  border-bottom:5px solid transparent !important;
  border-left:6px solid var(--hmn-sub-i) !important;
  border-right:0 !important;
  transform:none !important;
}

.hmn--layout-horizontal .pf-hmn__list > .pf-hmn__item > a,
.hmn--layout-vertical   .pf-hmn__list > .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;
}
.hmn--layout-horizontal .pf-hmn__list > .pf-hmn__item:hover > a,
.hmn--layout-horizontal .pf-hmn__list > .pf-hmn__item.pf-hmn__item--active > a,
.hmn--layout-vertical   .pf-hmn__list > .pf-hmn__item:hover > a,
.hmn--layout-vertical   .pf-hmn__list > .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;
}

/* Underline styles (main) */
.hmn--main-as-style1 .pf-hmn__list > .pf-hmn__item > a::before{
  content:''; position:absolute; left:50%; bottom:-2px;
  transform:translateX(calc(-50% + var(--hmn-main-line-align)));
  width:0; height:var(--hmn-main-line-h); background-color:var(--hmn-main-line-color);
  opacity:0; transition:width .2s ease, opacity .2s ease;
}
.hmn--main-as-style1 .pf-hmn__list > .pf-hmn__item:hover > a::before,
.hmn--main-as-style1 .pf-hmn__list > .pf-hmn__item.pf-hmn__item--active > a::before{
  width:var(--hmn-main-line-w); opacity:1;
}
.hmn--main-as-style2 .pf-hmn__list > .pf-hmn__item:hover > a,
.hmn--main-as-style2 .pf-hmn__list > .pf-hmn__item.pf-hmn__item--active > a{
  border-color:var(--hmn-main-line-color,currentColor) !important;
}

/* ============================================================
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:8px 0;
  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);
  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.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;
}

/* Underline styles (submenu) */
.hmn--sub-as-style1 .pf-hmn__submenu .pf-hmn__item > a::before{
  content:''; position:absolute; left:50%; bottom:4px;
  transform:translateX(calc(-50% + var(--hmn-sub-line-align)));
  width:0; height:var(--hmn-sub-line-h); background-color:var(--hmn-sub-line-color);
  opacity:0; transition:width .2s ease, opacity .2s ease;
}
.hmn--sub-as-style1 .pf-hmn__submenu .pf-hmn__item:hover > a::before,
.hmn--sub-as-style1 .pf-hmn__submenu .pf-hmn__item.pf-hmn__item--active > a::before{
  width:var(--hmn-sub-line-w); opacity:1;
}
.hmn--sub-as-style2 .pf-hmn__submenu .pf-hmn__item:hover > 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;
}

/* ============================================================
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)
============================================================ */
.pf-hmn__item.has-sub > a::after{
  content:''; display:block; margin-left:auto; transition:transform .2s ease;
}

.hmn-sub-icon--triangle .pf-hmn__item.has-sub > a::after{
  width:0; height:0;
  border-top:5px solid transparent; border-bottom:5px solid transparent; border-left:6px solid var(--hmn-sub-i);
}
.hmn--layout-horizontal > .pf-hmn__inner > .pf-hmn__list > .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);
  border-bottom:none;
}

.hmn-sub-icon--chevron .pf-hmn__item.has-sub > a::after{
  width:6px; height:6px; border-style:solid; border-color:var(--hmn-sub-i); border-width:0 1.5px 1.5px 0;
}
.hmn--layout-horizontal .pf-hmn__list > .pf-hmn__item.has-sub > a::after{ transform: translateY(-2px) rotate(45deg); }
.hmn--layout-vertical .pf-hmn__item.has-sub > a::after,
.hmn--layout-dropdown .pf-hmn__item.has-sub > a::after,
.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; }
.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; }

/* ============================================================
7) Utilities
============================================================ */
.pf-hmn__note{ display:none; }
@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;
}