@charset "UTF-8";
.main-collection {
  padding: 30px 0;
  padding-top: 0 !important; }
  @media (max-width: 767px) {
    .main-collection {
      padding: 15px 0; } }
  .main-collection .main-collection-breadcrumb {
    padding: 100px 0;
    margin-bottom: 30px;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center; }
    @media (max-width: 1200px) {
      .main-collection .main-collection-breadcrumb {
        padding: 90px 0;
        margin-bottom: 28px; } }
    @media (max-width: 1024px) {
      .main-collection .main-collection-breadcrumb {
        padding: 80px 0;
        margin-bottom: 26px; } }
    @media (max-width: 991px) {
      .main-collection .main-collection-breadcrumb {
        padding: 70px 0;
        margin-bottom: 24px; } }
    @media (max-width: 767px) {
      .main-collection .main-collection-breadcrumb {
        padding: 60px 0;
        margin-bottom: 22px; } }
    @media (max-width: 480px) {
      .main-collection .main-collection-breadcrumb {
        padding: 50px 0;
        margin-bottom: 20px; } }
    @media (max-width: 360px) {
      .main-collection .main-collection-breadcrumb {
        padding: 40px 0;
        margin-bottom: 15px; } }
    .main-collection .main-collection-breadcrumb .section-title-all {
      width: 50%; }
      @media (max-width: 991px) {
        .main-collection .main-collection-breadcrumb .section-title-all {
          width: 100%; } }
  .main-collection .main-collection-wrap {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: flex-start; }
    .main-collection .main-collection-wrap .shop-filter-choose {
      display: none;
      margin-bottom: 15px; }
      .main-collection .main-collection-wrap .shop-filter-choose label {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        align-items: center;
        font-weight: bold; }
        .main-collection .main-collection-wrap .shop-filter-choose label button {
          background: transparent;
          border: none;
          outline: none;
          padding: 0;
          box-shadow: 0;
          font-size: .85rem;
          color: #aaa;
          font-weight: normal; }
      .main-collection .main-collection-wrap .shop-filter-choose ul {
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-start;
        align-items: flex-start;
        gap: 5px;
        margin: 0;
        padding: 0;
        list-style: none;
        margin-top: 10px; }
        .main-collection .main-collection-wrap .shop-filter-choose ul li {
          background: var(--color_main);
          border-radius: var(--border_radius);
          padding: 2.5px 5px;
          color: var(--color2);
          font-size: .9rem;
          cursor: pointer; }
          .main-collection .main-collection-wrap .shop-filter-choose ul li i {
            margin-left: 5px;
            font-size: .8rem; }
            .main-collection .main-collection-wrap .shop-filter-choose ul li i:before {
              content: 'x'; }
    .main-collection .main-collection-wrap.vertical .main-collection-left {
      width: 20%;
      padding-right: 25px;
      position: sticky;
      top: 10px; }
      @media (max-width: 991px) {
        .main-collection .main-collection-wrap.vertical .main-collection-left {
          width: 100%;
          position: relative;
          top: 0;
          padding-right: 0; } }
      .main-collection .main-collection-wrap.vertical .main-collection-left .shop-filter-wrap .shop-filter:not(:last-child) {
        margin-bottom: 15px;
        padding-bottom: 15px;
        border-bottom: 1px solid #ccc; }
        @media (max-width: 991px) {
          .main-collection .main-collection-wrap.vertical .main-collection-left .shop-filter-wrap .shop-filter:not(:last-child):not(:last-child) {
            margin-bottom: 10px;
            padding-bottom: 10px; } }
      .main-collection .main-collection-wrap.vertical .main-collection-left .shop-filter-wrap .shop-filter h3 {
        height: 30px;
        line-height: 30px;
        margin-bottom: 15px;
        font-weight: bold;
        margin-right: 10px;
        font-size: 1rem;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        align-items: center; }
        @media (max-width: 991px) {
          .main-collection .main-collection-wrap.vertical .main-collection-left .shop-filter-wrap .shop-filter h3 {
            margin: 0; } }
        .main-collection .main-collection-wrap.vertical .main-collection-left .shop-filter-wrap .shop-filter h3:after {
          content: '›';
          line-height: 1;
          transform: rotate(90deg);
          font-size: 25px;
          display: none; }
      .main-collection .main-collection-wrap.vertical .main-collection-left .shop-filter-wrap .shop-filter .shop-filter-list {
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-start;
        align-items: flex-start;
        max-height: 250px;
        overflow-y: auto; }
        @media (max-width: 991px) {
          .main-collection .main-collection-wrap.vertical .main-collection-left .shop-filter-wrap .shop-filter .shop-filter-list {
            margin-top: 10px; } }
        .main-collection .main-collection-wrap.vertical .main-collection-left .shop-filter-wrap .shop-filter .shop-filter-list::-webkit-scrollbar {
          width: 3px; }
        .main-collection .main-collection-wrap.vertical .main-collection-left .shop-filter-wrap .shop-filter .shop-filter-list::-webkit-scrollbar-track {
          background: var(--color_bg_item); }
        .main-collection .main-collection-wrap.vertical .main-collection-left .shop-filter-wrap .shop-filter .shop-filter-list::-webkit-scrollbar-thumb {
          background: var(--color_main); }
        @media (max-width: 991px) {
          .main-collection .main-collection-wrap.vertical .main-collection-left .shop-filter-wrap .shop-filter .shop-filter-list {
            display: none; } }
        .main-collection .main-collection-wrap.vertical .main-collection-left .shop-filter-wrap .shop-filter .shop-filter-list .shop-filter-item {
          width: 100%;
          cursor: pointer;
          display: flex;
          flex-wrap: wrap;
          justify-content: flex-start;
          align-items: center; }
          .main-collection .main-collection-wrap.vertical .main-collection-left .shop-filter-wrap .shop-filter .shop-filter-list .shop-filter-item:not(:last-child) {
            margin-bottom: 10px; }
          .main-collection .main-collection-wrap.vertical .main-collection-left .shop-filter-wrap .shop-filter .shop-filter-list .shop-filter-item.color {
            width: calc(100%/5);
            float: left; }
            .main-collection .main-collection-wrap.vertical .main-collection-left .shop-filter-wrap .shop-filter .shop-filter-list .shop-filter-item.color.den label:after {
              color: var(--color2); }
            .main-collection .main-collection-wrap.vertical .main-collection-left .shop-filter-wrap .shop-filter .shop-filter-list .shop-filter-item.color input {
              display: none; }
            .main-collection .main-collection-wrap.vertical .main-collection-left .shop-filter-wrap .shop-filter .shop-filter-list .shop-filter-item.color input:checked + label:after {
              display: block; }
            .main-collection .main-collection-wrap.vertical .main-collection-left .shop-filter-wrap .shop-filter .shop-filter-list .shop-filter-item.color label {
              width: 30px;
              height: 30px;
              border-radius: 2.5px;
              font-size: 0;
              border: 1px solid #DbDbDb;
              margin-left: 0;
              position: relative; }
              .main-collection .main-collection-wrap.vertical .main-collection-left .shop-filter-wrap .shop-filter .shop-filter-list .shop-filter-item.color label:after {
                content: '✔';
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
                font-size: 20px;
                display: none; }
          .main-collection .main-collection-wrap.vertical .main-collection-left .shop-filter-wrap .shop-filter .shop-filter-list .shop-filter-item input {
            margin: 0; }
          .main-collection .main-collection-wrap.vertical .main-collection-left .shop-filter-wrap .shop-filter .shop-filter-list .shop-filter-item label {
            padding-left: 15px;
            margin-bottom: 0;
            cursor: pointer;
            font-size: .9rem; }
    .main-collection .main-collection-wrap.vertical .main-collection-right {
      width: 80%; }
      .main-collection .main-collection-wrap.vertical .main-collection-right.full-width {
        width: 100%; }
      @media (max-width: 1024px) {
        .main-collection .main-collection-wrap.vertical .main-collection-right {
          width: 100%; } }
    .main-collection .main-collection-wrap.horizontal .main-collection-left {
      width: 100%; }
      .main-collection .main-collection-wrap.horizontal .main-collection-left .shop-filter-wrap {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        align-items: flex-start; }
        .main-collection .main-collection-wrap.horizontal .main-collection-left .shop-filter-wrap .shop-filter-choose {
          width: 100%; }
        .main-collection .main-collection-wrap.horizontal .main-collection-left .shop-filter-wrap .shop-filter {
          width: calc((100%/5) - 10px);
          position: relative;
          margin-bottom: 15px;
          background: #FFF; }
          .main-collection .main-collection-wrap.horizontal .main-collection-left .shop-filter-wrap .shop-filter.active {
            z-index: 99; }
            .main-collection .main-collection-wrap.horizontal .main-collection-left .shop-filter-wrap .shop-filter.active h3:after {
              content: 'x'; }
            .main-collection .main-collection-wrap.horizontal .main-collection-left .shop-filter-wrap .shop-filter.active .shop-filter-list {
              opacity: 1;
              visibility: visible;
              transform: none; }
          .main-collection .main-collection-wrap.horizontal .main-collection-left .shop-filter-wrap .shop-filter h3 {
            font-size: 1rem;
            height: 30px;
            line-height: 30px;
            padding: 0 10px;
            border: 1px solid #DbDbDb;
            margin: 0;
            cursor: pointer;
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            align-items: center; }
            @media (max-width: 991px) {
              .main-collection .main-collection-wrap.horizontal .main-collection-left .shop-filter-wrap .shop-filter h3 {
                margin: 0; } }
            .main-collection .main-collection-wrap.horizontal .main-collection-left .shop-filter-wrap .shop-filter h3:after {
              content: '›';
              line-height: 1;
              transition: all .5s; }
            .main-collection .main-collection-wrap.horizontal .main-collection-left .shop-filter-wrap .shop-filter h3 span {
              display: none; }
          .main-collection .main-collection-wrap.horizontal .main-collection-left .shop-filter-wrap .shop-filter .shop-filter-list {
            position: absolute;
            left: 0;
            right: 0;
            background: #FFF;
            z-index: 99;
            padding: 10px;
            box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.1);
            opacity: 0;
            visibility: hidden;
            transform: scaleY(0);
            transform-origin: top;
            transition: all .5s; }
            .main-collection .main-collection-wrap.horizontal .main-collection-left .shop-filter-wrap .shop-filter .shop-filter-list .shop-filter-item {
              display: flex;
              flex-wrap: wrap;
              justify-content: flex-start;
              align-items: center;
              cursor: pointer; }
              .main-collection .main-collection-wrap.horizontal .main-collection-left .shop-filter-wrap .shop-filter .shop-filter-list .shop-filter-item:not(:last-child) {
                margin-bottom: 10px; }
              .main-collection .main-collection-wrap.horizontal .main-collection-left .shop-filter-wrap .shop-filter .shop-filter-list .shop-filter-item.color {
                width: calc(100%/5);
                float: left; }
                .main-collection .main-collection-wrap.horizontal .main-collection-left .shop-filter-wrap .shop-filter .shop-filter-list .shop-filter-item.color.den label:after {
                  color: var(--color2); }
                .main-collection .main-collection-wrap.horizontal .main-collection-left .shop-filter-wrap .shop-filter .shop-filter-list .shop-filter-item.color input {
                  display: none; }
                .main-collection .main-collection-wrap.horizontal .main-collection-left .shop-filter-wrap .shop-filter .shop-filter-list .shop-filter-item.color input:checked + label:after {
                  display: block; }
                .main-collection .main-collection-wrap.horizontal .main-collection-left .shop-filter-wrap .shop-filter .shop-filter-list .shop-filter-item.color label {
                  width: 30px;
                  height: 30px;
                  border-radius: 2.5px;
                  font-size: 0;
                  border: 1px solid #DbDbDb;
                  margin-left: 0;
                  position: relative; }
                  .main-collection .main-collection-wrap.horizontal .main-collection-left .shop-filter-wrap .shop-filter .shop-filter-list .shop-filter-item.color label:after {
                    content: '✔';
                    position: absolute;
                    top: 50%;
                    left: 50%;
                    transform: translate(-50%, -50%);
                    font-size: 20px;
                    display: none; }
              .main-collection .main-collection-wrap.horizontal .main-collection-left .shop-filter-wrap .shop-filter .shop-filter-list .shop-filter-item input {
                margin: 0; }
              .main-collection .main-collection-wrap.horizontal .main-collection-left .shop-filter-wrap .shop-filter .shop-filter-list .shop-filter-item label {
                margin: 0;
                padding-left: 10px; }
    .main-collection .main-collection-wrap.horizontal .main-collection-right {
      width: 100%; }
    .main-collection .main-collection-wrap .main-collection-head {
      width: 100%;
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 15px; }
      .main-collection .main-collection-wrap .main-collection-head .shop-sort-style {
        margin: 0;
        padding: 0;
        list-style: none;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: center; }
        .main-collection .main-collection-wrap .main-collection-head .shop-sort-style strong {
          margin: 0;
          font-weight: bold;
          margin-right: 10px;
          font-size: 1rem; }
          @media (max-width: 767px) {
            .main-collection .main-collection-wrap .main-collection-head .shop-sort-style strong {
              display: none; } }
        .main-collection .main-collection-wrap .main-collection-head .shop-sort-style .shop-sort-item[data-show] {
          position: relative;
          border: 1px solid gainsboro;
          width: 25px;
          height: 30px;
          position: relative;
          cursor: pointer;
          padding: 0;
          display: inline-block;
          text-align: center;
          font-size: 0;
          vertical-align: middle;
          z-index: 1;
          margin: 0 2.5px;
          border-radius: var(--border_radius); }
          .main-collection .main-collection-wrap .main-collection-head .shop-sort-style .shop-sort-item[data-show]:before {
            background: gainsboro;
            content: "";
            top: 10px;
            position: absolute;
            left: 7px;
            width: 8px;
            height: 8px;
            border-radius: var(--border_radius);
            z-index: 1;
            transition: all .4s linear; }
          .main-collection .main-collection-wrap .main-collection-head .shop-sort-style .shop-sort-item[data-show]:after {
            content: "";
            position: absolute;
            width: 0;
            top: 0;
            bottom: 0;
            z-index: 0;
            background-color: var(--color_main);
            transition: all .4s linear;
            border-radius: var(--border_radius); }
          .main-collection .main-collection-wrap .main-collection-head .shop-sort-style .shop-sort-item[data-show].active:after {
            width: 100%; }
          .main-collection .main-collection-wrap .main-collection-head .shop-sort-style .shop-sort-item[data-show].active:before {
            background: #FFF; }
          .main-collection .main-collection-wrap .main-collection-head .shop-sort-style .shop-sort-item[data-show].active[data-show="two"]:before {
            box-shadow: 13px 0 #FFF; }
          .main-collection .main-collection-wrap .main-collection-head .shop-sort-style .shop-sort-item[data-show].active[data-show="three"]:before {
            box-shadow: 13px 0 #FFF, 26px 0 #FFF; }
          .main-collection .main-collection-wrap .main-collection-head .shop-sort-style .shop-sort-item[data-show].active[data-show="four"]:before {
            box-shadow: 13px 0 #FFF, 26px 0 #FFF, 39px 0 #FFF; }
          .main-collection .main-collection-wrap .main-collection-head .shop-sort-style .shop-sort-item[data-show][data-show="one"]:before {
            left: 7.5px; }
          .main-collection .main-collection-wrap .main-collection-head .shop-sort-style .shop-sort-item[data-show][data-show="one"]:after {
            right: 0; }
          .main-collection .main-collection-wrap .main-collection-head .shop-sort-style .shop-sort-item[data-show][data-show="two"] {
            width: 38px;
            display: none;
            /*@media(max-width: 1024px){ display: block; }*/ }
            .main-collection .main-collection-wrap .main-collection-head .shop-sort-style .shop-sort-item[data-show][data-show="two"]:before {
              box-shadow: 13px 0 #dcdcdc; }
            .main-collection .main-collection-wrap .main-collection-head .shop-sort-style .shop-sort-item[data-show][data-show="two"]:after {
              left: 0; }
          .main-collection .main-collection-wrap .main-collection-head .shop-sort-style .shop-sort-item[data-show][data-show="three"] {
            width: 50px; }
            .main-collection .main-collection-wrap .main-collection-head .shop-sort-style .shop-sort-item[data-show][data-show="three"]:before {
              box-shadow: 13px 0 #dcdcdc, 26px 0 #dcdcdc; }
            .main-collection .main-collection-wrap .main-collection-head .shop-sort-style .shop-sort-item[data-show][data-show="three"]:after {
              right: 0; }
            .main-collection .main-collection-wrap .main-collection-head .shop-sort-style .shop-sort-item[data-show][data-show="three"].left_zero:after {
              left: 0;
              right: initial; }
            @media (max-width: 1024px) {
              .main-collection .main-collection-wrap .main-collection-head .shop-sort-style .shop-sort-item[data-show][data-show="three"] {
                display: none; } }
          .main-collection .main-collection-wrap .main-collection-head .shop-sort-style .shop-sort-item[data-show][data-show="four"] {
            width: 62px; }
            .main-collection .main-collection-wrap .main-collection-head .shop-sort-style .shop-sort-item[data-show][data-show="four"]:before {
              box-shadow: 13px 0 #dcdcdc, 26px 0 #dcdcdc, 39px 0 #dcdcdc; }
            .main-collection .main-collection-wrap .main-collection-head .shop-sort-style .shop-sort-item[data-show][data-show="four"]:after {
              left: 0; }
            @media (max-width: 1024px) {
              .main-collection .main-collection-wrap .main-collection-head .shop-sort-style .shop-sort-item[data-show][data-show="four"] {
                display: none; } }
        .main-collection .main-collection-wrap .main-collection-head .shop-sort-style .shop-filter-mobile-btn {
          display: none; }
          @media (max-width: 1024px) {
            .main-collection .main-collection-wrap .main-collection-head .shop-sort-style .shop-filter-mobile-btn {
              display: block; } }
          .main-collection .main-collection-wrap .main-collection-head .shop-sort-style .shop-filter-mobile-btn button {
            background: transparent;
            border: none;
            outline: none;
            padding: 0;
            box-shadow: 0;
            width: 25px;
            height: 30px;
            border: 1px solid #DbDbDb;
            margin-right: 5px; }
            .main-collection .main-collection-wrap .main-collection-head .shop-sort-style .shop-filter-mobile-btn button svg {
              width: 20px;
              height: 25px; }
      .main-collection .main-collection-wrap .main-collection-head .shop-sort-by label {
        margin: 0;
        font-weight: bold;
        margin-right: 10px;
        font-size: 1rem; }
        @media (max-width: 767px) {
          .main-collection .main-collection-wrap .main-collection-head .shop-sort-by label {
            display: none; } }
      .main-collection .main-collection-wrap .main-collection-head .shop-sort-by select {
        background: transparent;
        border: none;
        outline: none;
        padding: 0;
        box-shadow: 0;
        padding: 0 20px 0 10px;
        border: 1px solid #DbDbDb;
        height: 30px;
        line-height: 30px;
        border-radius: var(--border_radius); }
        @media (max-width: 1024px) {
          .main-collection .main-collection-wrap .main-collection-head .shop-sort-by select {
            color: #000; } }
    .main-collection .main-collection-wrap .main-collection-data {
      display: flex;
      flex-wrap: wrap;
      justify-content: flex-start;
      align-items: flex-start; }
      @media (max-width: 767px) {
        .main-collection .main-collection-wrap .main-collection-data {
          margin-left: -5px;
          margin-right: -5px; } }
      @media (min-width: 767px) {
        .main-collection .main-collection-wrap .main-collection-data {
          margin-left: -10px;
          margin-right: -10px; } }
      .main-collection .main-collection-wrap .main-collection-data > p {
        width: 100%;
        text-align: center; }
        @media (max-width: 767px) {
          .main-collection .main-collection-wrap .main-collection-data > p {
            padding-left: 5px;
            padding-right: 5px; } }
        @media (min-width: 767px) {
          .main-collection .main-collection-wrap .main-collection-data > p {
            padding-left: 10px;
            padding-right: 10px; } }
      .main-collection .main-collection-wrap .main-collection-data.one .product-item {
        width: 100%; }
        .main-collection .main-collection-wrap .main-collection-data.one .product-item .product-item-wrap {
          display: flex;
          flex-wrap: wrap;
          justify-content: flex-start;
          align-items: flex-start; }
          .main-collection .main-collection-wrap .main-collection-data.one .product-item .product-item-wrap .product-item-image {
            width: 30%; }
          .main-collection .main-collection-wrap .main-collection-data.one .product-item .product-item-wrap .product-item-detail {
            width: 70%;
            padding-left: 30px;
            margin-top: 0; }
            .main-collection .main-collection-wrap .main-collection-data.one .product-item .product-item-wrap .product-item-detail .product-item-detail-name {
              margin-top: 0;
              height: auto;
              -webkit-line-clamp: initial; }
              .main-collection .main-collection-wrap .main-collection-data.one .product-item .product-item-wrap .product-item-detail .product-item-detail-name a {
                font-size: 1.25rem;
                line-height: 1.25rem; }
      .main-collection .main-collection-wrap .main-collection-data.two .product-item {
        width: calc(100%/2); }
      .main-collection .main-collection-wrap .main-collection-data.three .product-item {
        width: calc(100%/3); }
        @media (max-width: 767px) {
          .main-collection .main-collection-wrap .main-collection-data.three .product-item {
            width: calc(100%/2); } }
        @media (max-width: 480px) {
          .main-collection .main-collection-wrap .main-collection-data.three .product-item {
            width: calc(100%/2); } }
      .main-collection .main-collection-wrap .main-collection-data.four .product-item {
        width: calc(100%/4); }
        @media (min-width: 768px) and (max-width: 992px) {
          .main-collection .main-collection-wrap .main-collection-data.four .product-item {
            width: calc(100%/3); } }
        @media (max-width: 767px) {
          .main-collection .main-collection-wrap .main-collection-data.four .product-item {
            width: calc(100%/2); } }
      .main-collection .main-collection-wrap .main-collection-data .shop-pagination {
        width: 100%;
        text-align: center;
        margin: 0 auto; }

/* Responsize for 2 styles */
@media (max-width: 1024px) {
  .main-collection .main-collection-wrap.horizontal .main-collection-left .shop-filter-wrap.shop-filter-mobile, .main-collection .main-collection-wrap.vertical .main-collection-left .shop-filter-wrap.shop-filter-mobile {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    background: #FFF;
    z-index: 99;
    width: 320px;
    padding: 10px;
    align-content: flex-start;
    height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    opacity: 0;
    visibility: hidden;
    transform: translateX(-100%);
    transition: all .5s; } }
  @media (max-width: 1024px) and (max-width: 991px) {
    .main-collection .main-collection-wrap.horizontal .main-collection-left .shop-filter-wrap.shop-filter-mobile, .main-collection .main-collection-wrap.vertical .main-collection-left .shop-filter-wrap.shop-filter-mobile {
      z-index: 101; } }

@media (max-width: 1024px) {
    .main-collection .main-collection-wrap.horizontal .main-collection-left .shop-filter-wrap.shop-filter-mobile .shop-filter, .main-collection .main-collection-wrap.vertical .main-collection-left .shop-filter-wrap.shop-filter-mobile .shop-filter {
      width: 100%; }
      .main-collection .main-collection-wrap.horizontal .main-collection-left .shop-filter-wrap.shop-filter-mobile .shop-filter:not(:last-child, :last-child), .main-collection .main-collection-wrap.vertical .main-collection-left .shop-filter-wrap.shop-filter-mobile .shop-filter:not(:last-child, :last-child) {
        margin-bottom: 10px;
        padding-bottom: 10px;
        border-bottom: 1px solid #DbDbDb; }
      .main-collection .main-collection-wrap.horizontal .main-collection-left .shop-filter-wrap.shop-filter-mobile .shop-filter.active h3:after, .main-collection .main-collection-wrap.vertical .main-collection-left .shop-filter-wrap.shop-filter-mobile .shop-filter.active h3:after {
        content: "x"; }
      .main-collection .main-collection-wrap.horizontal .main-collection-left .shop-filter-wrap.shop-filter-mobile .shop-filter h3, .main-collection .main-collection-wrap.vertical .main-collection-left .shop-filter-wrap.shop-filter-mobile .shop-filter h3 {
        height: initial;
        line-height: initial;
        margin-bottom: 0;
        font-weight: bold;
        margin-right: 0;
        font-size: 1rem;
        border: none;
        padding: 0; }
        .main-collection .main-collection-wrap.horizontal .main-collection-left .shop-filter-wrap.shop-filter-mobile .shop-filter h3:after, .main-collection .main-collection-wrap.vertical .main-collection-left .shop-filter-wrap.shop-filter-mobile .shop-filter h3:after {
          display: block;
          font-size: 20px;
          transform: rotate(0); }
      .main-collection .main-collection-wrap.horizontal .main-collection-left .shop-filter-wrap.shop-filter-mobile .shop-filter .shop-filter-list, .main-collection .main-collection-wrap.vertical .main-collection-left .shop-filter-wrap.shop-filter-mobile .shop-filter .shop-filter-list {
        position: relative;
        top: initial;
        left: initial;
        right: initial;
        border: none;
        padding: 0;
        box-shadow: none;
        opacity: 1;
        visibility: visible;
        transform: none;
        transform-origin: initial;
        transition: none;
        margin-top: 15px;
        display: none; } }

/* =========================================================
   COLLECTION UI CLEAN
   Ghi chú:
   - Giữ nguyên style hiện tại của collection
   - Gồm: filter UI + collection hero + SEO intro box
   - Đã bỏ phần CSS trùng / dễ đè nhau
   - Từ khóa dễ tìm:
     COLLECTION UI CLEAN
     COLLECTION HERO / BANNER TEXT
     COLLECTION SEO INTRO BOX
   ========================================================= */
/* =========================
   FILTER UI TỐI ƯU
   ========================= */
.main-collection .main-collection-head {
  margin-bottom: 16px; }

.main-collection .main-collection-head .shop-sort-style,
.main-collection .main-collection-head .shop-sort-by {
  gap: 8px; }

.main-collection .main-collection-head .shop-sort-by label {
  white-space: nowrap; }

.main-collection-wrap.horizontal .main-collection-left {
  margin-bottom: 16px; }

.main-collection-wrap.horizontal .shop-filter-wrap {
  gap: 12px; }

.main-collection-wrap.horizontal .shop-filter {
  border-radius: 6px; }

.main-collection-wrap.horizontal .shop-filter h3 {
  min-height: 42px;
  padding: 0 14px;
  border: 1px solid #ddd;
  border-radius: 6px;
  background: #fff;
  font-size: 15px;
  font-weight: 600;
  transition: border-color .25s ease, box-shadow .25s ease; }

.main-collection-wrap.horizontal .shop-filter h3:hover {
  border-color: #cfcfcf;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05); }

.main-collection-wrap.horizontal .shop-filter.active h3 {
  border-color: #cfcfcf;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06); }

.main-collection-wrap.horizontal .shop-filter .shop-filter-list {
  border: 1px solid #ececec;
  border-radius: 6px;
  background: #fff;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.06); }

/* Riêng filter "Loại cây" hiển thị ngang nhiều cột */
.main-collection-wrap.horizontal .shop-filter[data-type="variant1"] .shop-filter-list {
  display: grid;
  grid-template-columns: repeat(6, minmax(150px, 1fr));
  gap: 12px 24px;
  width: 1080px;
  max-width: 1080px;
  padding: 14px 18px;
  box-sizing: border-box; }

.main-collection-wrap.horizontal .shop-filter[data-type="variant1"] .shop-filter-item {
  margin: 0;
  min-width: 0; }

.main-collection-wrap.horizontal .shop-filter[data-type="variant1"] .shop-filter-item label {
  display: inline-block;
  padding-left: 10px;
  margin: 0;
  white-space: nowrap;
  line-height: 1.45;
  font-size: 14px;
  color: #444; }

/* Các filter còn lại vẫn dọc */
.main-collection-wrap.horizontal .shop-filter:not([data-type="variant1"]) .shop-filter-list {
  width: 260px;
  max-width: 260px;
  padding: 12px 16px;
  box-sizing: border-box; }

.main-collection-wrap.horizontal .shop-filter:not([data-type="variant1"]) .shop-filter-item {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 0 0 10px; }

.main-collection-wrap.horizontal .shop-filter:not([data-type="variant1"]) .shop-filter-item:last-child {
  margin-bottom: 0; }

.main-collection-wrap.horizontal .shop-filter:not([data-type="variant1"]) .shop-filter-item input[type="checkbox"] {
  flex: 0 0 auto;
  margin-top: 3px; }

.main-collection-wrap.horizontal .shop-filter:not([data-type="variant1"]) .shop-filter-item label {
  display: block;
  margin: 0;
  padding-left: 0;
  white-space: normal;
  line-height: 1.5;
  font-size: 14px;
  color: #444; }

/* Filter dọc */
.main-collection-wrap.vertical .main-collection-left .shop-filter-wrap .shop-filter h3 {
  font-size: 15px; }

.main-collection-wrap.vertical .main-collection-left .shop-filter-wrap .shop-filter .shop-filter-list .shop-filter-item label {
  font-size: 14px;
  line-height: 1.45;
  color: #444; }

/* =========================
   COLLECTION HERO / BANNER TEXT
   ========================= */
.main-collection-breadcrumb {
  position: relative;
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  min-height: 280px;
  display: flex;
  align-items: center;
  overflow: hidden;
  margin-bottom: 18px; }

.main-collection-breadcrumb .container {
  width: 100%;
  position: relative;
  z-index: 2; }

.collection-hero-content {
  max-width: 560px;
  padding: 18px 0;
  position: relative;
  z-index: 2; }

.collection-hero-title {
  margin: 0;
  font-size: 46px;
  line-height: 1.18;
  font-weight: 600;
  letter-spacing: -0.4px;
  color: #6f4b32;
  word-break: break-word; }

.collection-hero-line {
  width: 140px;
  height: 1px;
  margin: 18px 0;
  background: rgba(111, 75, 50, 0.22); }

.collection-hero-breadcrumb {
  font-size: 16px;
  line-height: 1.6; }

.collection-hero-breadcrumb .breadcrumb-shop,
.collection-hero-breadcrumb .breadcrumb-shop ul,
.collection-hero-breadcrumb .breadcrumb-shop ol {
  margin: 0;
  padding: 0;
  background: transparent; }

.collection-hero-breadcrumb .breadcrumb-shop li,
.collection-hero-breadcrumb .breadcrumb-shop a,
.collection-hero-breadcrumb .breadcrumb-shop span {
  font-size: 16px; }

/* =========================================================
   COLLECTION BANNER - THU HẸP KHOẢNG CÁCH DÒNG
   Ghi chú:
   1) Đổi màu H1:
      .collection-hero-title { color: ... }

   2) Đổi màu breadcrumb:
      .collection-hero-breadcrumb ... { color: ... }

   3) Đổi màu mô tả:
      .collection-seo-intro-text { color: ... }

   4) Đổi số dòng mô tả:
      -webkit-line-clamp
      max-height

   5) Đổi khoảng cách:
      - H1: line-height
      - line dưới H1: margin
      - breadcrumb: line-height
      - mô tả: line-height + margin-top
   ========================================================= */
/* =========================
   DESKTOP
   ========================= */
.collection-hero-content {
  max-width: 720px;
  /* <-- ĐỔI ĐỘ RỘNG KHUNG TEXT PC Ở ĐÂY */
  padding: 0;
  background: transparent;
  border: none;
  border-radius: 0;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none; }

.collection-hero-title {
  font-size: 50px;
  line-height: 1.05;
  /* <-- THU HẸP KHOẢNG CÁCH DÒNG H1 Ở ĐÂY */
  letter-spacing: -0.6px;
  color: #5c7c21;
  /* <-- ĐỔI MÀU H1 Ở ĐÂY */
  margin: 0; }

.collection-hero-line {
  width: 110px;
  height: 1px;
  margin: 12px 0 12px;
  /* <-- THU HẸP KHOẢNG CÁCH TRÊN/DƯỚI LINE */
  background: rgba(92, 124, 33, 0.18); }

.collection-hero-breadcrumb,
.collection-hero-breadcrumb .breadcrumb-shop li,
.collection-hero-breadcrumb .breadcrumb-shop a,
.collection-hero-breadcrumb .breadcrumb-shop span {
  font-size: 18px;
  line-height: 1.05;
  /* <-- THU HẸP KHOẢNG CÁCH DÒNG BREADCRUMB */
  color: #7F8B6B !important;
  /* <-- ĐỔI MÀU BREADCRUMB Ở ĐÂY */ }

.collection-seo-intro-wrap {
  margin: 10px 0 0;
  /* <-- GIẢM KHOẢNG CÁCH GIỮA BREADCRUMB VÀ MÔ TẢ */
  max-width: 760px;
  width: 100%; }

.collection-seo-intro {
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important; }

.collection-seo-intro-text {
  font-size: 14px;
  line-height: 1.4;
  /* <-- THU HẸP KHOẢNG CÁCH DÒNG MÔ TẢ */
  color: rgba(111, 123, 94, 0.82) !important;
  /* <-- ĐỔI MÀU CHỮ MÔ TẢ Ở ĐÂY */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  /* <-- SỐ DÒNG PC Ở ĐÂY */
  overflow: hidden;
  max-height: calc(1.4em * 3);
  /* <-- ĐỔI CÙNG line-height và số dòng */
  word-break: break-word; }

/* =========================
   TABLET LỚN
   ========================= */
@media (max-width: 1024px) {
  .main-collection-wrap.horizontal .shop-filter[data-type="variant1"] .shop-filter-list {
    width: 100%;
    max-width: 100%;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px 14px;
    padding: 12px 14px; } }

/* =========================
   TABLET
   ========================= */
@media (max-width: 991px) {
  .main-collection-breadcrumb {
    min-height: 250px;
    padding: 28px 0;
    background-position: center center !important;
    background-size: cover !important; }
  .collection-hero-content {
    max-width: 460px;
    padding: 22px 22px 20px;
    background: rgba(255, 255, 255, 0.56);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.62);
    border-radius: 18px;
    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.06); }
  .collection-hero-title {
    font-size: 34px;
    line-height: 1.12;
    /* <-- THU HẸP KHOẢNG CÁCH DÒNG H1 TABLET */
    letter-spacing: -0.3px;
    color: #5c7c21; }
  .collection-hero-line {
    width: 78px;
    height: 2px;
    margin: 12px 0 12px;
    background: rgba(92, 124, 33, 0.18); }
  .collection-hero-breadcrumb,
  .collection-hero-breadcrumb .breadcrumb-shop li,
  .collection-hero-breadcrumb .breadcrumb-shop a,
  .collection-hero-breadcrumb .breadcrumb-shop span {
    font-size: 14px;
    line-height: 1.4;
    color: #6d7f59; }
  .collection-seo-intro-wrap {
    margin: 12px 0 0; }
  .collection-seo-intro-text {
    font-size: 15px;
    line-height: 1.55;
    /* <-- THU HẸP KHOẢNG CÁCH DÒNG TABLET */
    color: #4f4a43;
    -webkit-line-clamp: 2;
    max-height: calc(1.55em * 2); } }

/* =========================
   MOBILE
   ========================= */
@media (max-width: 767px) {
  .main-collection .main-collection-head {
    margin-bottom: 12px; }
  .main-collection-breadcrumb {
    min-height: 270px;
    padding: 18px 0;
    background-position: center center !important;
    background-size: cover !important; }
  .collection-hero-content {
    max-width: 300px;
    padding: 18px 16px 16px;
    background: rgba(255, 255, 255, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.62);
    border-radius: 18px;
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.06);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px); }
  .collection-hero-title {
    font-size: 27px;
    line-height: 1.15;
    /* <-- THU HẸP KHOẢNG CÁCH DÒNG H1 MOBILE */
    letter-spacing: -0.2px;
    color: #5c7c21; }
  .collection-hero-line {
    width: 62px;
    height: 2px;
    margin: 10px 0 10px;
    background: rgba(92, 124, 33, 0.18); }
  .collection-hero-breadcrumb,
  .collection-hero-breadcrumb .breadcrumb-shop li,
  .collection-hero-breadcrumb .breadcrumb-shop a,
  .collection-hero-breadcrumb .breadcrumb-shop span {
    font-size: 13px;
    line-height: 1.4;
    color: #6d7f59; }
  .collection-seo-intro-wrap {
    margin: 10px 0 0; }
  .collection-seo-intro-text {
    font-size: 14px;
    line-height: 1.5;
    /* <-- THU HẸP KHOẢNG CÁCH DÒNG MÔ TẢ MOBILE */
    color: #4f4a43;
    -webkit-line-clamp: 2;
    max-height: calc(1.5em * 2); } }

/* =========================
   MOBILE NHỎ
   ========================= */
@media (max-width: 479px) {
  .main-collection-breadcrumb {
    min-height: 250px;
    padding: 16px 0; }
  .collection-hero-content {
    max-width: 285px;
    padding: 16px 14px 14px;
    border-radius: 16px; }
  .collection-hero-title {
    font-size: 24px;
    line-height: 1.16; }
  .collection-hero-line {
    width: 54px;
    margin: 8px 0 8px; }
  .collection-hero-breadcrumb,
  .collection-hero-breadcrumb .breadcrumb-shop li,
  .collection-hero-breadcrumb .breadcrumb-shop a,
  .collection-hero-breadcrumb .breadcrumb-shop span {
    font-size: 12px;
    line-height: 1.35; }
  .collection-seo-intro-text {
    font-size: 13px;
    line-height: 1.48;
    -webkit-line-clamp: 2;
    max-height: calc(1.48em * 2); } }

/* =========================================================
   COLLECTION SEO BOTTOM
   - Full chiều ngang
   - Không bo góc
   - Preview 3 dòng
   - Nút Xem thêm ở trên
   - Nút Thu gọn ở cuối khi mở
   ========================================================= */
.collection-seo-bottom-section {
  margin-top: 34px;
  padding: 34px 0 38px;
  background: #fcfbf9;
  /* <-- đổi màu nền */
  border-top: 1px solid #e7e2dc;
  border-bottom: 1px solid #e7e2dc; }

.collection-seo-bottom-box {
  width: 100%; }

/* ===== HEAD ===== */
.collection-seo-bottom-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 14px;
  padding-bottom: 14px;
  border-bottom: 1px solid #e1dbd4; }

.collection-seo-bottom-title {
  margin: 0;
  font-size: 24px;
  line-height: 1.35;
  font-weight: 700;
  color: #3f5e4b;
  letter-spacing: -0.2px; }

/* ===== TOGGLE BUTTON ===== */
.collection-seo-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px;
  background: transparent;
  border: 1px solid #d7d0c8;
  color: #3f5e4b;
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  transition: all .25s ease;
  flex-shrink: 0; }

.collection-seo-toggle:hover {
  background: #ece8e2;
  border-color: #cbc2b8; }

.collection-seo-toggle-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform .3s ease; }

/* nút trên xoay khi mở */
.collection-seo-bottom-box.is-open .collection-seo-toggle-top .collection-seo-toggle-icon {
  transform: rotate(180deg); }

/* ===== CONTENT WRAP ===== */
.collection-seo-bottom-content-wrap {
  position: relative;
  overflow: hidden; }

/* =========================================================
   CHỖ NÀY SAU NÀY BẠN SỬA SỐ DÒNG PREVIEW
   - 3 dòng: -webkit-line-clamp: 3;
   - 2 dòng: -webkit-line-clamp: 2;
   ========================================================= */
.collection-seo-bottom-content-wrap.is-collapsed .collection-seo-bottom-content {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  /* <-- sửa chỗ này nếu muốn 2 hoặc 3 dòng */
  -webkit-box-orient: vertical;
  overflow: hidden; }

.collection-seo-bottom-content-wrap.is-expanded .collection-seo-bottom-content {
  display: block;
  overflow: visible; }

/* ===== FADE ===== */
.collection-seo-bottom-fade {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 36px;
  background: linear-gradient(to bottom, rgba(250, 248, 245, 0), #faf8f5);
  /* <-- màu làm mờ khung */
  pointer-events: none;
  opacity: 1;
  transition: opacity .25s ease; }

.collection-seo-bottom-box.is-open .collection-seo-bottom-fade {
  opacity: 0; }

/* ===== CONTENT ===== */
.collection-seo-bottom-content {
  font-size: 15px;
  /* <-- size chữ nội dung */
  line-height: 1.9;
  color: #5f5a54;
  max-width: 100%; }

.collection-seo-bottom-content h2,
.collection-seo-bottom-content h3 {
  margin: 0 0 12px;
  font-size: 18px;
  /* <-- size h2, h3 nội dung */
  line-height: 1.45;
  font-weight: 700;
  color: #3f5e4b; }

.collection-seo-bottom-content p {
  margin: 0 0 14px; }

.collection-seo-bottom-content p:last-child {
  margin-bottom: 0; }

.collection-seo-bottom-content strong {
  font-weight: 700;
  color: #3f5e4b; }

.collection-seo-bottom-content a {
  color: #3f5e4b;
  text-decoration: underline;
  text-underline-offset: 2px; }

/* ===== ACTIONS BOTTOM ===== */
.collection-seo-bottom-actions {
  display: none;
  padding-top: 18px;
  margin-top: 18px;
  border-top: 1px solid #e1dbd4;
  justify-content: center; }

.collection-seo-bottom-box.is-open .collection-seo-bottom-actions {
  display: flex; }

/* khi mở thì ẩn nút trên */
.collection-seo-bottom-box.is-open .collection-seo-toggle-top {
  display: none; }

/* ===== MOBILE ===== */
@media (max-width: 767px) {
  .collection-seo-bottom-section {
    margin-top: 24px;
    padding: 24px 0 28px; }
  .collection-seo-bottom-head {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 12px;
    padding-bottom: 12px; }
  .collection-seo-bottom-title {
    font-size: 21px;
    line-height: 1.4; }
  .collection-seo-toggle {
    padding: 8px 14px;
    font-size: 13px; }
  .collection-seo-bottom-content-wrap.is-collapsed .collection-seo-bottom-content {
    -webkit-line-clamp: 3;
    /* <-- mobile muốn 2 dòng thì sửa chỗ này */ }
  .collection-seo-bottom-content {
    font-size: 14px;
    /* <-- mobile size nội dung */
    line-height: 1.8; }
  .collection-seo-bottom-content h2,
  .collection-seo-bottom-content h3 {
    font-size: 16px;
    /* <-- mobile size h2, h3 */
    margin-bottom: 10px; }
  .collection-seo-bottom-fade {
    height: 30px; }
  .collection-seo-bottom-actions {
    padding-top: 14px;
    margin-top: 14px; } }

/* ===== COLLECTION USP | START ===== */
.collection-usp-wrap {
  margin: 18px 0 24px; }

.collection-usp {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  border: 1px dashed #9fbc8f;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.72);
  overflow: hidden; }

.collection-usp__item {
  position: relative;
  padding: 14px 18px 14px 44px;
  font-size: 14px;
  line-height: 1.6;
  color: #5f5a53;
  border-right: 1px dashed rgba(159, 188, 143, 0.7); }

.collection-usp__item:last-child {
  border-right: none; }

.collection-usp__item:before {
  content: "✓";
  position: absolute;
  top: 50%;
  left: 16px;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #e7efe3;
  color: #6f8a68;
  font-size: 12px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1; }

/* ===== TABLET: 2 CỘT ===== */
@media (max-width: 991px) {
  .collection-usp {
    grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .collection-usp__item {
    border-right: 1px dashed rgba(159, 188, 143, 0.7);
    border-bottom: 1px dashed rgba(159, 188, 143, 0.7); }
  .collection-usp__item:nth-child(2n) {
    border-right: none; }
  .collection-usp__item:nth-last-child(-n+2) {
    border-bottom: none; } }

/* ===== MOBILE: CHỈ HIỆN 2 USP ĐẦU ===== */
@media (max-width: 767px) {
  .collection-usp-wrap {
    margin: 14px 0 18px; }
  .collection-usp {
    grid-template-columns: 1fr; }
  .collection-usp__item {
    padding: 12px 14px 12px 40px;
    font-size: 13px;
    line-height: 1.55;
    border-right: none;
    border-bottom: 1px dashed rgba(159, 188, 143, 0.7);
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden; }
  .collection-usp__item:nth-child(3),
  .collection-usp__item:nth-child(4) {
    display: none; }
  .collection-usp__item:nth-child(2) {
    border-bottom: none; }
  .collection-usp__item:before {
    top: 50%;
    left: 14px;
    transform: translateY(-50%);
    width: 16px;
    height: 16px;
    font-size: 11px; } }

/* ===== COLLECTION USP | END ===== */