:root {
  --cropro-moon: #ed1c24;
  --cropro-sun: #fff200;
  --cropro-red: #af1422;
  --cropro-red-deep: #78101d;
  --cropro-cream: #fff9dc;
  --cropro-blush: #fff0ed;
  --cropro-ink: #302326;
  --shop-color-main: var(--cropro-red);
  --shop-color-text: var(--cropro-ink);
  --shop-color-title: var(--cropro-ink);
  --shop-color-hover: var(--cropro-red-deep);
  --shop-color-button: var(--cropro-red);
  --shop-color-border: #ead9d4;
  --topbar-bg: var(--cropro-red);
  --topbar-color-text: #fff;
  --home-category-bg-1: var(--cropro-cream);
  --home-category-bg-2: var(--cropro-blush);
  --home-category-bg-3: var(--cropro-cream);
  --home-category-bg-4: var(--cropro-blush);
  --home-category-bg-5: var(--cropro-cream);
  --home-collection2-bg: var(--cropro-cream);
  --home-collection2-title: var(--cropro-red);
  --home-collection3-bg: var(--cropro-blush);
  --home-coupon-bg: var(--cropro-cream);
  --home-coupon-border: #efdca0;
  --footer-bg-color-1: var(--cropro-red);
  --footer-bg-color-2: var(--cropro-red-deep);
  --footer-bg-color-copyright: var(--cropro-red-deep);
  --footer-color-hover: var(--cropro-sun);
  --btn-color-style01: var(--cropro-red);
  --btn-color-style02: var(--cropro-red);
  --btn-color-style03: var(--cropro-red);
  --btn-color-style04: var(--cropro-red);
  --btn-hover-color-style01: var(--cropro-red-deep);
  --btn-hover-color-style02: var(--cropro-red-deep);
  --btn-hover-color-style03: var(--cropro-red-deep);
  --btn-hover-color-style04: var(--cropro-red-deep);
}

.topbar-slideText {
  background: #fff;
  color: var(--cropro-ink);
}

.mainHeader {
  border-bottom: 2px solid var(--cropro-sun);
}

.mainHeader .menuList-main > li > a:hover,
.mainHeader .menuList-main > li.active > a {
  color: var(--cropro-red);
}

.mainHeader .header-wrap-logo .logoimg {
  object-fit: contain;
}

.breadcrumb-shop,
.section-home-intro {
  background-color: var(--cropro-cream);
}

.section-home-intro .home-intro--titles h2 {
  color: var(--cropro-red);
}

.mainFooter {
  border-top: 4px solid var(--cropro-sun);
}

.mainFooter > a[href="/sitemap/"] {
  background: var(--cropro-red-deep);
  color: #fff !important;
}

.mainFooter > a[href="/sitemap/"]:hover {
  color: var(--cropro-sun) !important;
}

:where(a, button, input, select, textarea):focus-visible {
  outline: 2px solid var(--cropro-red);
  outline-offset: 3px;
}

.mainFooter :focus-visible,
.topbar :focus-visible {
  outline-color: var(--cropro-sun);
}

body.cropro-simple {
  background: var(--cropro-cream);
  color: var(--cropro-ink);
}

.cropro-simple h1,
.cropro-simple a {
  color: var(--cropro-red);
}

.cropro-simple button {
  border: 1px solid var(--cropro-red);
  background: var(--cropro-red);
  color: #fff;
}

/* Homepage packaging displays */
#homepage-slider .cropro-slide {
  display: grid;
  grid-template-columns: minmax(240px, 30%) minmax(0, 1fr);
  min-height: clamp(265px, 25vw, 460px);
  background: #fff7e3;
  color: var(--cropro-ink);
  text-decoration: none;
}

#homepage-slider .cropro-slide--offset {
  background: #fff0e9;
}

#homepage-slider .cropro-slide--tui-giay {
  background: #fff8d6;
}

#homepage-slider .cropro-slide-copy {
  align-self: center;
  padding: 38px 12px 48px clamp(26px, 6vw, 104px);
}

#homepage-slider .cropro-slide-copy h2 {
  color: var(--cropro-red-deep);
  font-size: clamp(32px, 4.3vw, 70px);
  line-height: 1.04;
  letter-spacing: -.045em;
  margin-bottom: 16px;
}

#homepage-slider .cropro-slide-copy p {
  font-size: clamp(13px, 1.2vw, 18px);
  margin: 0 0 24px;
}

#homepage-slider .cropro-slide-action {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 11px 17px;
  background: var(--cropro-red);
  color: #fff;
  font-weight: 700;
}

#homepage-slider .cropro-slide:hover .cropro-slide-action {
  background: var(--cropro-red-deep);
}

#homepage-slider .cropro-slide img {
  width: 100%;
  height: auto;
  align-self: center;
  object-fit: contain;
}

@media (max-width: 767px) {
  #homepage-slider .cropro-slide {
    grid-template-columns: minmax(0, 1fr);
  }

  #homepage-slider .cropro-slide-copy {
    padding: 25px 24px 16px;
  }

  #homepage-slider .cropro-slide-copy p {
    margin-bottom: 14px;
  }

  #homepage-slider .cropro-slide img {
    height: auto;
  }
}


@media (max-width: 991px) {
  .actionToolbar_mobile.toolbar_style_2 .toolbar-item {
    flex: 1 1 50%;
    max-width: 50%;
  }

  .actionToolbar_mobile.toolbar_style_2 .toolbar-item-zalo .toolbar-item--boxlink {
    background: var(--cropro-cream);
    color: var(--cropro-red-deep);
  }

  .actionToolbar_mobile.toolbar_style_2 .toolbar-item-phone .toolbar-item--boxlink {
    background: var(--cropro-red);
    color: #fff;
  }

  .actionToolbar_mobile.toolbar_style_2 .toolbar-item--boxlink .box-text {
    color: inherit;
  }

  .actionToolbar_mobile.toolbar_style_2 .toolbar-item-zalo circle {
    fill: var(--cropro-red);
  }
}