/**
 * gcp-menu-style.css (v2 — menu phân tầng 2 cấp)
 * Đóng khung trong .gcp-menu-wrap, không ảnh hưởng menu gốc Flatsome hay phần khác của theme.
 * Dùng chung bảng màu với trang Giá Cà Phê Hôm Nay để đồng bộ giao diện.
 */

.gcp-menu-wrap{
  --ink:#16240d;
  --bazan:#256c0d;
  --bazan-dark:#123c07;
  --cream:#f1f4e9;
  --cream-2:#e4ecd6;
  --paper:#fffef7;
  --line:rgba(22,36,13,.14);

  font-family:'Be Vietnam Pro',sans-serif;
  position:relative;
  z-index:200;
}
.gcp-menu-wrap, .gcp-menu-wrap *{box-sizing:border-box;}
.gcp-menu-wrap a{text-decoration:none; color:inherit;}
.gcp-menu-wrap button{font-family:inherit; cursor:pointer;}

/* ---------- Desktop: thanh ngang + dropdown ---------- */
.gcp-menu-bar{
  display:flex;
  align-items:center;
  gap:2px;
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:999px;
  padding:6px;
  max-width:max-content;
  margin:0 auto;
}

.gcp-menu-node{position:relative;}

.gcp-menu-item{
  display:flex;
  align-items:center;
  gap:8px;
  padding:9px 16px;
  border:none;
  background:none;
  border-radius:999px;
  color:var(--ink);
  font-size:.88rem;
  font-weight:600;
  white-space:nowrap;
}
.gcp-menu-item svg{flex-shrink:0; stroke:var(--bazan);}
.gcp-menu-node:hover > .gcp-menu-item, .gcp-menu-item.is-active{background:var(--cream-2);}

.gcp-menu-caret{stroke:var(--bazan); transition:transform .15s ease;}
.gcp-menu-node:hover .gcp-menu-caret{transform:rotate(180deg);}

.gcp-submenu{
  display:none;
  position:absolute;
  top:100%;
  left:0;
  padding-top:10px; /* "cầu nối" vô hình để chuột đi từ nút cha xuống submenu không bị rớt khỏi vùng hover */
  min-width:220px;
}
.gcp-menu-node:hover .gcp-submenu,
.gcp-menu-node:focus-within .gcp-submenu{display:block;}

.gcp-submenu-inner{
  background:var(--paper);
  border:1px dashed var(--bazan-dark);
  border-radius:12px;
  padding:8px;
  box-shadow:0 6px 20px rgba(43,27,18,.08);
}

.gcp-submenu-grouped{display:flex; gap:4px;}
.gcp-submenu-group{min-width:190px;}
.gcp-submenu-group + .gcp-submenu-group{border-left:1px dashed var(--line); padding-left:8px; margin-left:4px;}
.gcp-submenu-group-label{
  font-family:'IBM Plex Mono',monospace;
  font-size:.66rem;
  font-weight:700;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--bazan);
  padding:6px 12px 4px;
}

.gcp-submenu-inner a{
  display:block;
  padding:9px 12px;
  border-radius:8px;
  font-size:.86rem;
  font-weight:500;
  color:var(--ink);
  border-bottom:1px dashed var(--line);
  white-space:nowrap;              /* không xuống dòng giữa tên mục */
}
.gcp-submenu-inner a:last-child{border-bottom:none;}
.gcp-submenu-inner a:hover{background:var(--cream-2); color:var(--bazan-dark);}

/* ---------- Mobile: hamburger + accordion xổ xuống theo từng mục cha ---------- */
.gcp-menu-toggle{
  display:none;
  align-items:center;
  gap:6px;
  background:var(--paper);
  border:1px dashed var(--bazan-dark);
  border-radius:9px;
  padding:8px 12px;
  font-weight:700;
  font-size:.8rem;
  color:var(--ink);
  width:auto;
}
.gcp-menu-toggle svg{stroke:var(--bazan); width:16px; height:16px;}

@media (max-width:860px){
  .gcp-menu-toggle{display:flex;}

  .gcp-menu-bar{
    display:block;
    max-height:0;
    overflow:hidden;
    opacity:0;
    max-width:none;
    width:min(320px, 90vw);
    position:absolute;
    top:100%;
    left:0;
    background:var(--paper);
    border:1.5px solid var(--bazan-dark);
    border-radius:16px;
    padding:0;
    margin-top:0;
    box-shadow:0 10px 30px rgba(43,27,18,.14);
    transition:max-height .28s ease, opacity .2s ease, margin-top .28s ease;
    z-index:210;
  }
  .gcp-menu-wrap.is-open .gcp-menu-bar{
    display:block;
    max-height:80vh;
    overflow-y:auto;
    opacity:1;
    margin-top:10px;
    padding:6px;
  }

  .gcp-menu-node{border-bottom:1px dashed var(--line);}
  .gcp-menu-node:last-child{border-bottom:none;}

  .gcp-menu-item{
    justify-content:flex-start;
    border-radius:10px;
    padding:14px 14px;
    width:100%;
    font-size:.95rem;
  }
  .gcp-menu-caret{margin-left:auto; transform:none; flex-shrink:0;}
  .gcp-menu-node.is-expanded > .gcp-menu-item{
    background:var(--cream-2);
    color:var(--bazan-dark);
  }
  .gcp-menu-node.is-expanded .gcp-menu-caret{transform:rotate(180deg);}

  .gcp-submenu{
    display:block;
    position:static;
    padding-top:0;
    min-width:0;
    max-height:0;
    overflow:hidden;
    transition:max-height .22s ease;
  }
  .gcp-menu-node.is-expanded .gcp-submenu{max-height:600px;}

  .gcp-submenu-inner{
    box-shadow:none;
    border:none;
    border-radius:0;
    padding:4px 0 8px 16px;
    background:var(--cream);
    margin:0 6px;
  }
  .gcp-submenu-inner a{
    padding:12px 14px;
    border-bottom:1px dashed var(--line);
    font-size:.9rem;
    border-radius:8px;
  }
  .gcp-submenu-inner a:active{background:var(--cream-2);} /* phản hồi rõ khi chạm trên mobile */

  .gcp-submenu-grouped{flex-direction:column; gap:4px;}
  .gcp-submenu-group + .gcp-submenu-group{border-left:none; padding-left:0; margin-left:0; border-top:1px dashed var(--line); padding-top:8px; margin-top:4px;}
  .gcp-submenu-group-label{padding:8px 14px 4px;}
}

/* Khoá cuộn trang khi menu mobile đang mở, tránh vừa cuộn menu vừa cuộn trang gây rối */
body.gcp-menu-locked{overflow:hidden;}