.cfcdc-header-controls,
.cfcdc-account-menu,
.cfcdc-cart-button {
  --cfcdc-account-green: var(--cfcdc-color-brand);
  --cfcdc-account-accent: var(--cfcdc-color-accent);
  --cfcdc-account-surface: var(--cfcdc-color-surface);
  --cfcdc-account-border: var(--cfcdc-color-border);
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--cfcdc-account-green);
  font-family: var(--e-global-typography-secondary-font-family, inherit);
}

.cfcdc-header-controls {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  width: auto;
  max-width: 100%;
}

.cfcdc-header-controls__account,
.cfcdc-header-controls__cart {
  display: flex;
  align-items: center;
  min-width: 0;
}

.cfcdc-cart-button__label {
  display: none;
}

.cfcdc-account-menu *,
.cfcdc-account-menu *::before,
.cfcdc-account-menu *::after,
.cfcdc-cart-button,
.cfcdc-cart-button::before,
.cfcdc-cart-button::after {
  box-sizing: border-box;
}

.cfcdc-account-menu__dashboard-link {
  display: inline-flex;
  align-items: center;
  min-width: 0;
  max-width: 170px;
  min-height: 42px;
  gap: 8px;
  margin: 0;
  padding: 4px 8px 4px 4px;
  border: 1px solid transparent;
  border-radius: 999px;
  background: transparent;
  box-shadow: none;
  color: inherit;
  font: inherit;
  text-align: left;
  text-decoration: none;
}

/* Win over Elementor's kit-wide button rule without affecting its buttons. */
body[class*='elementor-kit-']
  .cfcdc-account-menu
  a.cfcdc-account-menu__dashboard-link {
  display: inline-flex;
  align-items: center;
  min-width: 0;
  min-height: 42px;
  gap: 8px;
  margin: 0;
  padding: 4px 8px 4px 4px;
  border: 1px solid transparent;
  border-radius: 999px;
  background: transparent;
  box-shadow: none;
  color: inherit;
  font: inherit;
  line-height: 1.2;
}

.cfcdc-account-menu__dashboard-link:hover {
  border-color: var(--cfcdc-account-border);
  background: rgba(255, 255, 255, 0.58);
  color: var(--cfcdc-account-green);
}

.cfcdc-account-menu__dashboard-link:focus-visible,
.cfcdc-account-menu__trigger:focus-visible,
.cfcdc-cart-button:focus-visible,
.cfcdc-account-menu__dropdown a:focus-visible {
  outline: 3px solid rgba(170, 207, 78, 0.42);
  outline-offset: 2px;
}

.cfcdc-account-menu__avatar,
.cfcdc-account-menu__summary-avatar {
  display: block;
  border: 2px solid var(--cfcdc-account-accent);
  border-radius: 50%;
  object-fit: cover;
}

.cfcdc-account-menu__avatar {
  width: 34px;
  height: 34px;
}

body[class*='elementor-kit-']
  .cfcdc-account-menu
  img.cfcdc-account-menu__avatar,
body[class*='elementor-kit-']
  .cfcdc-account-menu
  img.cfcdc-account-menu__summary-avatar {
  max-width: none;
  margin: 0;
}

.cfcdc-account-menu__name {
  overflow: hidden;
  max-width: 10ch;
  color: inherit;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cfcdc-account-menu__trigger {
  display: inline-grid;
  width: 28px;
  height: 42px;
  margin: 0 0 0 -12px;
  padding: 0;
  place-items: center;
  border: 0;
  border-radius: 999px;
  background: transparent;
  box-shadow: none;
  color: inherit;
  cursor: pointer;
  font: inherit;
}

body[class*='elementor-kit-']
  .cfcdc-account-menu
  button.cfcdc-account-menu__trigger {
  display: inline-grid;
  width: 28px;
  height: 42px;
  min-height: 42px;
  margin: 0 0 0 -12px;
  padding: 0;
  place-items: center;
  border: 0;
  border-radius: 999px;
  background: transparent;
  box-shadow: none;
  color: inherit;
  line-height: 1;
}

.cfcdc-account-menu__trigger:hover,
.cfcdc-account-menu.is-open .cfcdc-account-menu__trigger {
  background: rgba(255, 255, 255, 0.58);
}
.cfcdc-account-menu__trigger > .lni {
  flex: 0 0 auto;
  font-size: 12px;
  transition: transform 0.18s ease;
}
.cfcdc-account-menu.is-open .cfcdc-account-menu__trigger > .lni {
  transform: rotate(180deg);
}

.cfcdc-cart-button {
  position: relative;
  display: inline-grid;
  width: 38px;
  height: 38px;
  place-items: center;
  border: 1px solid var(--cfcdc-account-border);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.58);
  box-shadow: none;
  color: var(--cfcdc-account-green);
  text-decoration: none;
}

body[class*='elementor-kit-'] a.cfcdc-cart-button {
  display: inline-grid;
  width: 38px;
  height: 38px;
  min-height: 38px;
  margin: 0;
  padding: 0;
  place-items: center;
  border: 1px solid var(--cfcdc-account-border);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.58);
  box-shadow: none;
  color: var(--cfcdc-account-green);
  line-height: 1;
  text-decoration: none;
}

.cfcdc-cart-button:hover {
  border-color: var(--cfcdc-account-accent);
  background: #fff;
  color: var(--cfcdc-account-green);
}
.cfcdc-cart-button > .lni {
  font-size: 18px;
  line-height: 1;
}

.cfcdc-cart-button__icon {
  position: relative;
  display: inline-grid;
  flex: 0 0 auto;
  place-items: center;
  min-width: 20px;
  min-height: 20px;
}

.cfcdc-cart-button__icon .cfcdc-cart-button__count {
  position: absolute;
  top: -6px;
  right: -7px;
  margin: 0;
}

body[class*='elementor-kit-'] .cfcdc-cart-button > .lni {
  display: block;
  font-size: 18px;
  line-height: 1;
}

.cfcdc-cart-button__count {
  position: absolute;
  top: -5px;
  right: -6px;
  display: grid;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  place-items: center;
  border: 2px solid var(--cfcdc-account-surface);
  border-radius: 999px;
  background: var(--cfcdc-account-accent);
  color: #1f3a22;
  font-size: 10px;
  font-weight: 800;
  line-height: 1;
}

.cfcdc-cart-button__count.is-empty {
  display: none;
}

.cfcdc-account-menu__dropdown {
  position: absolute;
  z-index: 1000;
  top: calc(100% + 12px);
  right: 0;
  width: min(310px, calc(100vw - 32px));
  overflow: hidden;
  border: 1px solid var(--cfcdc-account-border);
  border-radius: 16px;
  background: var(--cfcdc-account-surface);
  box-shadow: 0 18px 42px rgba(19, 52, 25, 0.2);
}

.cfcdc-account-menu__summary {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px;
  border-bottom: 1px solid var(--cfcdc-account-border);
  color: inherit;
  text-decoration: none;
}
.cfcdc-account-menu__summary:hover {
  background: rgba(170, 207, 78, 0.12);
}

.cfcdc-account-menu__summary-avatar {
  width: 42px;
  height: 42px;
}
.cfcdc-account-menu__summary span {
  display: grid;
  min-width: 0;
  gap: 3px;
}
.cfcdc-account-menu__summary strong {
  overflow: hidden;
  color: var(--cfcdc-account-green);
  font-size: 14px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cfcdc-account-menu__summary small {
  overflow: hidden;
  color: #708072;
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cfcdc-account-menu__links,
.cfcdc-account-menu__footer {
  padding: 8px;
}
.cfcdc-account-menu__footer {
  border-top: 1px solid var(--cfcdc-account-border);
}

.cfcdc-account-menu__dropdown a {
  display: flex;
  align-items: center;
  min-height: 42px;
  gap: 11px;
  padding: 10px 11px;
  border-radius: 9px;
  color: var(--cfcdc-color-brand);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.25;
  text-decoration: none;
}

.cfcdc-account-menu__dropdown a:hover {
  background: rgba(170, 207, 78, 0.16);
  color: #254b28;
}
.cfcdc-account-menu__dropdown a i {
  width: 18px;
  color: #699329;
  font-size: 17px;
  text-align: center;
}
.cfcdc-account-menu__dropdown a .lni-comments::before {
  content: '\e0c5';
}
.cfcdc-account-menu__dropdown a .cfcdc-account-menu__message-count {
  display: grid;
  min-width: 18px;
  height: 18px;
  margin-left: auto;
  padding: 0 5px;
  place-items: center;
  border: 2px solid var(--cfcdc-account-surface);
  border-radius: 999px;
  background: #c44832;
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  line-height: 1;
}
.cfcdc-account-menu__dropdown a .cfcdc-account-menu__message-count.is-empty {
  display: none;
}
.cfcdc-account-menu__footer a {
  color: #8c3d38;
}
.cfcdc-account-menu__footer a i {
  color: inherit;
}

@media (max-width: 850px) {
  /* Keep the account component in the normal drawer flow. It must not force
     Blocksy's Header Text element to occupy an entire mobile row. */
  .ct-panel-content .ct-header-text:has(.cfcdc-header-controls),
  .ct-panel-content .ct-header-text:has(.cfcdc-account-menu) {
    flex: 0 1 auto;
    width: auto;
    max-width: 100%;
  }

  /* Blocksy Free reuses one HTML element in the mobile drawer. The unified
     shell owns the responsive layout so the cart can never become part of
     the account dropdown. */
  .cfcdc-header-controls {
    display: flex;
    width: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }

  .cfcdc-header-controls__account,
  .cfcdc-header-controls__cart {
    width: 100%;
  }

  .cfcdc-header-controls__cart {
    justify-content: flex-start;
  }

  .cfcdc-header-controls .cfcdc-cart-button,
  body[class*='elementor-kit-'] .cfcdc-header-controls a.cfcdc-cart-button {
    display: inline-flex;
    width: auto;
    min-width: 124px;
    height: 42px;
    min-height: 42px;
    gap: 8px;
    padding: 0 14px;
    place-items: center;
    justify-content: center;
    border-radius: 999px;
    line-height: 1;
  }

  .cfcdc-header-controls .cfcdc-cart-button__label {
    display: inline;
    color: inherit;
    font-size:20px;
    line-height: 1;
  }

  .cfcdc-header-controls .cfcdc-cart-button > .lni {
    display: inline-block;
    flex: 0 0 auto;
  }

  /* Mobile drawer: keep account identity in the menu flow and expand the
     submenu directly beneath it. Never turn this into a fixed popup. */
  .cfcdc-account-menu {
    display: grid;
    width: 100%;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0;
    align-items: center;
  }

  .cfcdc-account-menu__dashboard-link {
    max-width: none;
  }
  .cfcdc-account-menu__trigger {
    margin-left: 0;
  }

  .cfcdc-account-menu__dropdown {
    position: static;
    width: 100%;
    margin-top: 8px;
    grid-column: 1 / -1;
    border-radius: 12px;
    box-shadow: none;
  }

  /* The identity is already visible in the trigger row; avoid showing it a
     second time before the inline submenu. */
  .cfcdc-account-menu .cfcdc-account-menu__summary,
  body[class*='elementor-kit-']
    .cfcdc-account-menu
    .cfcdc-account-menu__summary {
    display: none !important;
  }

  .cfcdc-account-menu__links,
  .cfcdc-account-menu__footer {
    padding: 6px;
  }

  .cfcdc-account-menu__dropdown a {
    min-height: 44px;
  }
}

/* Blocksy can open its mobile off-canvas while the CSS viewport is wider
   than 850px (custom header breakpoints, desktop preview, or browser zoom).
   Scope the same mobile structure to the drawer itself so it is deterministic
   whenever this component is rendered inside the mobile panel. */
.ct-panel-content .ct-header-text:has(.cfcdc-header-controls) {
  flex: 0 1 auto;
  width: auto;
  max-width: 100%;
}

.ct-panel .cfcdc-header-controls {
  display: flex;
  width: 100%;
  flex-direction: column;
  align-items: stretch;
  gap: 12px;
}

.ct-panel .cfcdc-header-controls__cart {
  order: -1;
  width: 100%;
  justify-content: flex-start;
}

.ct-panel .cfcdc-header-controls__account {
  order: 1;
  width: 100%;
}

.ct-panel .cfcdc-account-menu {
  display: grid;
  width: 100%;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0;
  align-items: center;
}

.ct-panel .cfcdc-account-menu__dashboard-link {
  max-width: none;
}
.ct-panel .cfcdc-account-menu__trigger {
  margin-left: 0;
}

.ct-panel .cfcdc-account-menu__dropdown {
  position: static;
  width: 100%;
  margin-top: 8px;
  grid-column: 1 / -1;
  border-radius: 12px;
  box-shadow: none;
}

.ct-panel .cfcdc-account-menu .cfcdc-account-menu__summary {
  display: none !important;
}
.ct-panel .cfcdc-account-menu__links,
.ct-panel .cfcdc-account-menu__footer {
  padding: 6px;
}
.ct-panel .cfcdc-account-menu__dropdown a {
  min-height: 44px;
}

/* The cart is a navigation row in the mobile drawer. Only its icon receives
   a background; the row itself stays transparent and borderless. */
.ct-panel .cfcdc-header-controls .cfcdc-cart-button,
body[class*='elementor-kit-']
  .ct-panel
  .cfcdc-header-controls
  a.cfcdc-cart-button {
  display: inline-flex;
  width: 100%;
  min-width: 240px;
  height: 44px;
  min-height: 44px;
  gap: 10px;
  padding: 6px 11px;
  align-items: center;
  justify-content: space-between;
  border: 0;
  border-radius: 9px;
  background: transparent;
  box-shadow: none;
  color: var(--cfcdc-account-green);
  line-height: 1.25;
  text-decoration: none;
}

.ct-panel .cfcdc-header-controls .cfcdc-cart-button:hover,
.ct-panel .cfcdc-header-controls .cfcdc-cart-button:focus-visible {
  background: rgba(170, 207, 78, 0.16);
  color: #254b28;
}
/* Set lại margin cho nav menu blosy */
#offcanvas .mobile-menu[data-id='mobile-menu'] {
  margin: 0;
}
#offcanvas .cfcdc-account-menu__dashboard-link {
  padding: 0;
  min-width: 240px;
}
#offcanvas .ct-panel .cfcdc-account-menu__dropdown {
  min-width: 240px;
}
.mobile-menu[data-id='mobile-menu'] + .ct-header-text .cfcdc-cart-button {
  padding: 0 !important;
}
.ct-panel .cfcdc-header-controls .cfcdc-cart-button__label {
  display: inline;
  color: inherit;
  font-size: 20px;
  line-height: 1.25;
  font-family: 'Itim', sans-serif;
}

.ct-panel .cfcdc-header-controls .cfcdc-cart-button__icon {
  position: relative;
  display: inline-grid;
  width: 30px;
  height: 30px;
  flex: 0 0 30px;
  order: 2;
  place-items: center;
}

.ct-panel .cfcdc-header-controls .cfcdc-cart-button__icon > .lni {
  display: grid;
  width: 30px;
  height: 30px;
  place-items: center;
  border: 1px solid var(--cfcdc-account-border);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.72);
  color: var(--cfcdc-account-green);
  font-size: 16px;
  line-height: 1;
}

.ct-panel .cfcdc-header-controls .cfcdc-cart-button__count {
  position: absolute;
  z-index: 1;
  top: -6px;
  right: -7px;
  order: initial;
  margin: 0;
  pointer-events: none;
}

/* The badge belongs to the icon, not to the navigation row. This prevents
   the count from changing the row width or pushing the account control. */
.cfcdc-cart-button__icon .cfcdc-cart-button__count {
  position: absolute;
  top: -6px;
  right: -7px;
  margin: 0;
}