@charset "UTF-8";
.breadcrumbs svg {
  fill: var(--mainColor);
  vertical-align: -2px; }

.breadcrumbs .inner {
  z-index: 1; }

.breadcrumbs .breadcrumb {
  background-color: var(--lightLeftColBackground); }
  .breadcrumbs .breadcrumb .slash-divider svg {
    stroke: var(--textColor);
    vertical-align: 0px; }
  .breadcrumbs .breadcrumb a, .breadcrumbs .breadcrumb span {
    color: #fff; }

.breadcrumbs.sticky {
  position: sticky;
  top: 50px;
  z-index: 8;
  background: #fff;
  width: calc(100% + 20px);
  margin-left: -10px;
  padding: 5px 0; }

@media (min-width: 1025px) {
  .m-container-noindex {
    --padding-inline-start: 8%;
    --padding-inline-end: 8%;
    --padding-block-start: 4%;
    --padding-block-end: 8%; } }

@media (max-width: 1024px) {
  .m-container-noindex {
    --padding-inline-start: 10%;
    --padding-inline-end: 10%;
    --padding-block-end: 10%; } }

/*=========================================*/
.total-products {
  font-size: 1.5vw; }
  @media (max-width: 1024px) {
    .total-products {
      font-size: 1.7vw; } }
  @media (max-width: 767px) {
    .total-products {
      font-size: 15px; } }

.title-head {
  font-size: 1.8vw; }
  @media (max-width: 1024px) {
    .title-head {
      font-size: 1.7vw; } }
  @media (max-width: 767px) {
    .title-head {
      font-size: 15px; } }

ul.share-buttons {
  list-style: none;
  padding: 0; }
  ul.share-buttons li {
    display: inline-block; }
  ul.share-buttons .sr-only {
    position: absolute;
    clip: rect(1px 1px 1px 1px);
    clip: rect(1px, 1px, 1px, 1px);
    padding: 0;
    border: 0;
    height: 1px;
    width: 1px;
    overflow: hidden; }
  ul.share-buttons img {
    width: 32px; }
  ul.share-buttons a:hover {
    transform: translateY(-5px); }

expandable-content > .expandable-content {
  overflow: hidden;
  transition: 0.3s ease-in-out;
  position: relative; }

expandable-content.scrollable:after {
  position: absolute;
  width: 100%;
  height: 100px;
  bottom: 0 !important;
  left: 0;
  background: linear-gradient(#ffffff00, #fff);
  opacity: 1;
  visibility: visible;
  transtion: all 0.3s ease;
  z-index: 1; }

expandable-content.scrollable > button {
  font-size: 18px;
  color: var(--mainColor);
  transition: all 0.4s;
  z-index: 2; }
  expandable-content.scrollable > button svg {
    fill: var(--mainColor);
    transition: all 0.4s; }
  expandable-content.scrollable > button:hover {
    color: #fff; }
    expandable-content.scrollable > button:hover svg {
      fill: #fff; }

expandable-content[data-expand="true"] {
  padding-bottom: 40px; }
  expandable-content[data-expand="true"]:after {
    opacity: 0;
    visibility: hidden; }
  expandable-content[data-expand="true"] > div {
    max-height: none !important; }
  expandable-content[data-expand="true"] > button svg {
    transform: rotate(-90deg); }

expandable-content .expandable-content-toggle {
  visibility: visited; }
  expandable-content .expandable-content-toggle.hidden {
    opacity: 0;
    pointer-events: none;
    visibility: hidden; }

drop-box [data-content] {
  overflow: hidden;
  transition: max-height 0.3s ease;
  max-height: 0; }

drop-box [data-content].active {
  /* Class active chỉ phục vụ cho toggle class nếu cần, còn hiệu ứng là do max-height JS điều khiển */ }

drop-box [data-open] {
  cursor: pointer; }
  drop-box [data-open] svg {
    width: 14px;
    height: 14px;
    fill: #fff;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    transition: 0.4s ease; }
  drop-box [data-open].active svg {
    transform: translateY(-50%) rotate(180deg); }