@import url("https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");

@import url("https://fonts.cdnfonts.com/css/helvetica-neue-55");

@import url(./../css/bootstrap-select.min.css);

:root {

  --white: #ffffff;

  --black: #000000;

  --text: #909090;

  --text-2: #505050;

  --text-3: #333333;

  --text-4: #40484E;

  --text-5: #2C3135;

  --text-7: #FDFEFE;

  --gray: #333e48;

  --gray-2: #73787d;

  --gray-4: #e1e1e1;

  --gray-5: #ebebeb;

  --gray-6: #f5f5f5;

  --primary: #c21d2e;

  --secondary: #004ec3;

  --third: #FCB500;

  --third-2: #FFE604;

  --third-3: #FFDC00;

  --third-4: #FFDF8B;

  --line: #e1e1e1;

  --line-2: #ececec;

  --line-3: #4f4f4f;

  --line-4: #BFC6CC;

  --bg: #fafafa;

  --bg-2: #F8F8F8;

  --bg-3: #F6F6F6;

  --price: #FFEAB6;

}



/*---------- Reset css styles ----------- */

html,

body,

div,

span,

applet,

object,

iframe,

h1,

h2,

h3,

h4,

h5,

h6,

p,

blockquote,

pre,

a,

abbr,

acronym,

address,

big,

cite,

code,

del,

dfn,

em,

img,

ins,

kbd,

q,

s,

samp,

small,

strike,

strong,

sub,

sup,

tt,

var,

b,

u,

i,

center,

dl,

dt,

dd,

ol,

ul,

li,

fieldset,

form,

label,

legend,

table,

caption,

tbody,

tfoot,

thead,

tr,

th,

td,

article,

aside,

canvas,

details,

embed,

figure,

figcaption,

footer,

header,

hgroup,

menu,

nav,

output,

ruby,

section,

summary,

time,

mark,

audio,

video {

  margin: 0;

  padding: 0;

  border: 0;

  outline: 0;

  font-size: 100%;

  font: inherit;

  vertical-align: baseline;

  font-family: inherit;

  font-size: 100%;

  font-style: inherit;

  font-weight: inherit;

}



article,

aside,

details,

figcaption,

figure,

footer,

header,

hgroup,

menu,

nav,

section {

  display: block;

}



/* Elements

-------------------------------------------------------------- */

html {

  margin-right: 0 !important;

  scroll-behavior: smooth;

}



* {

  margin: 0;

  padding: 0;

  box-sizing: border-box;

}



body {

  font-family: "Inter", serif;

  font-size: 15px;

  line-height: 24px;

  font-weight: 400;

  background-color: var(--white);

  font-style: normal;

  color: var(--gray);

  overflow-x: hidden;

}

body::-webkit-scrollbar {

  width: 3px;

}

body::-webkit-scrollbar-thumb {

  background-color: var(--primary);

  border-radius: 5px;

  cursor: grab;

}

body.no-scroll {

  overflow: hidden;

}



img {

  max-width: 100%;

  height: auto;

  transform: scale(1);

  vertical-align: middle;

  -ms-interpolation-mode: bicubic;

}



.row {

  margin-right: -15px;

  margin-left: -15px;

}

.row > * {

  padding-left: 15px;

  padding-right: 15px;

}



ul,

li {

  list-style-type: none;

  margin-bottom: 0;

  padding-left: 0;

  list-style: none;

}



.container {

  max-width: 1520px;

  padding-right: 15px;

  padding-left: 15px;

}



.container-full {

  width: 100%;

  max-width: 100%;

  margin: 0 auto;

  padding: 0px 15px;

}



svg path {

  -webkit-transition: all 0.3s ease-in-out;

  -moz-transition: all 0.3s ease-in-out;

  -ms-transition: all 0.3s ease-in-out;

  -o-transition: all 0.3s ease-in-out;

  transition: all 0.3s ease-in-out;

}



textarea {

  resize: none;

}



select {

  outline: 0;

}



/* Placeholder color */

::-webkit-input-placeholder {

  color: var(--text-3);

}



:-moz-placeholder {

  color: var(--text-3);

}



::-moz-placeholder {

  color: var(--text-3);

  opacity: 1;

}



button:focus-within,

button:focus-visible,

button:focus {

  outline: none;

}



/* Since FF19 lowers the opacity of the placeholder by default */

:-ms-input-placeholder {

  color: var(--secondary-2);

}



/* Typography

-------------------------------------------------------------- */

.h1,

.h2,

.h3,

.h4,

.h5,

.h6,

h1,

h2,

h3,

h4,

h5,

h6 {

  font-family: "Inter", serif;

  text-rendering: optimizeLegibility;

  color: var(--grey-1);

  font-weight: 500;

  margin-bottom: 0;

}



h1,

.h1 {

  font-size: 60px;

  line-height: 80px;

}



h2,

.h2 {

  font-size: 50px;

  line-height: 61px;

}



h3,

.h3 {

  font-size: 40px;

  line-height: 60px;

}



h4,

.h4 {

  font-size: 30px;

  line-height: 36px;

}



h5,

.main-title,

.title-normal {

  font-size: 22px;

  line-height: 25px;

}



h6,

.product-title {

  font-size: 18px;

  line-height: 24px;

}



.main-title-2 {

  font-size: 25px;

  line-height: 38px;

}



.main-title-3 {

  font-size: 24px;

  line-height: 33px;

}



.product-title-2 {

  font-size: 18px;

  line-height: 27px;

}



.price-text {

  font-size: 20px;

  line-height: 22px;

}



.price-text-2 {

  font-size: 19px;

  line-height: 29px;

}



.title-sidebar {

  font-size: 16px;

  line-height: 18px;

}



.title-sidebar-2 {

  font-size: 16px;

  line-height: 24px;

}



.body-md-2 {

  font-size: 14px;

  line-height: 22px;

}



.body-text-3 {

  font-size: 14px;

  line-height: 20px;

}



.body-small {

  font-size: 13px;

  line-height: 25px;

}



.caption {

  font-size: 12px;

  line-height: 22px;

}



.small-text {

  font-size: 10px;

  line-height: 15px;

}



.font-main {

  font-family: "Inter", serif;

}



.font-2 {

  font-family: "Poppins", serif;

}



.font-3 {

  font-family: "MADE Outer";

}



.font-4 {

  font-family: "UTM Banque";

}



.font-5 {

  font-family: "Helvetica Neue", sans-serif;

}



b,

strong {

  font-weight: bolder;

}



video {

  width: 100%;

  height: 100%;

  object-fit: cover;

}



.text-main {

  color: var(--gray) !important;

}



.text-main-2 {

  color: var(--gray-2);

}



.text-main-4 {

  color: var(--gray-4) !important;

}



.text-cl-1 {

  color: var(--text);

}



.text-cl-2 {

  color: var(--text-2);

}



.text-cl-3 {

  color: var(--text-3);

}



.text-cl-4 {

  color: var(--text-4);

}



.text-cl-5 {

  color: var(--text-5);

}



.text-cl-7 {

  color: var(--text-7);

}



.text-primary {

  color: var(--primary) !important;

}



.text-secondary {

  color: var(--secondary) !important;

}



.text-third {

  color: var(--third) !important;

}



.text-third-2 {

  color: var(--third-2) !important;

}



.text-third-3 {

  color: var(--third-3) !important;

}



.text-third-4 {

  color: var(--third-4) !important;

}



.text-price {

  color: var(--price) !important;

}



a {

  -webkit-transition: all 0.3s ease-in-out;

  -moz-transition: all 0.3s ease-in-out;

  -ms-transition: all 0.3s ease-in-out;

  -o-transition: all 0.3s ease-in-out;

  transition: all 0.3s ease-in-out;

  text-decoration: none;

  cursor: pointer;

  display: inline-block;

  color: var(--gray);

}

a:focus, a:hover {

  -webkit-transition: all 0.3s ease-in-out;

  -moz-transition: all 0.3s ease-in-out;

  -ms-transition: all 0.3s ease-in-out;

  -o-transition: all 0.3s ease-in-out;

  transition: all 0.3s ease-in-out;

  text-decoration: none;

  outline: 0;

}



.link {

  -webkit-transition: all 0.3s ease-in-out;

  -moz-transition: all 0.3s ease-in-out;

  -ms-transition: all 0.3s ease-in-out;

  -o-transition: all 0.3s ease-in-out;

  transition: all 0.3s ease-in-out;

}

.link:hover {

  color: var(--primary) !important;

}



.link-svg svg,

.link-svg path {

  -webkit-transition: all 0.3s ease-in-out;

  -moz-transition: all 0.3s ease-in-out;

  -ms-transition: all 0.3s ease-in-out;

  -o-transition: all 0.3s ease-in-out;

  transition: all 0.3s ease-in-out;

}

.link-svg:hover svg,

.link-svg:hover path {

  stroke: var(--primary);

}



.link-fill svg,

.link-fill path {

  -webkit-transition: all 0.3s ease-in-out;

  -moz-transition: all 0.3s ease-in-out;

  -ms-transition: all 0.3s ease-in-out;

  -o-transition: all 0.3s ease-in-out;

  transition: all 0.3s ease-in-out;

  stroke: unset !important;

}

.link-fill:hover path {

  fill: var(--primary);

}



.link-svg-fill svg,

.link-svg-fill path {

  -webkit-transition: all 0.3s ease-in-out;

  -moz-transition: all 0.3s ease-in-out;

  -ms-transition: all 0.3s ease-in-out;

  -o-transition: all 0.3s ease-in-out;

  transition: all 0.3s ease-in-out;

}

.link-svg-fill:hover path {

  stroke: var(--primary);

  fill: var(--primary);

}



.link-secondary {

  -webkit-transition: all 0.3s ease-in-out;

  -moz-transition: all 0.3s ease-in-out;

  -ms-transition: all 0.3s ease-in-out;

  -o-transition: all 0.3s ease-in-out;

  transition: all 0.3s ease-in-out;

}

.link-secondary:hover {

  color: var(--secondary) !important;

}



.link-main {

  -webkit-transition: all 0.3s ease-in-out;

  -moz-transition: all 0.3s ease-in-out;

  -ms-transition: all 0.3s ease-in-out;

  -o-transition: all 0.3s ease-in-out;

  transition: all 0.3s ease-in-out;

}

.link-main:hover {

  color: var(--gray) !important;

}



.line {

  border: 1px solid var(--line);

}



.line-2 {

  border: 1px solid var(--line-2);

}



.line-bt {

  border-bottom: 1px solid var(--gray-5) !important;

}



.line-tp {

  border-top: 1px solid var(--gray-5) !important;

}



.gap-36 {

  gap: 36px;

}



.gap-12 {

  gap: 12px !important;

}



.gap-30 {

  gap: 30px;

}



.gap-10 {

  gap: 10px !important;

}



.gap-8 {

  gap: 8px !important;

}



.px_15 {

  padding-left: 15px;

  padding-right: 15px;

}



.py-4 {

  padding-top: 4px !important;

  padding-bottom: 4px !important;

}



.pt-24 {

  padding-top: 24px;

}



.box-center {

  position: absolute;

  top: 50% !important;

  left: 50% !important;

  transform: translate(-50%, -50%) !important;

}



[data-grid=grid-1] {

  display: grid;

  gap: 30px;

  grid-template-columns: 1fr;

}



[data-grid=grid-2] {

  display: grid;

  gap: 30px;

  grid-template-columns: 1fr 1fr;

}



[data-grid=grid-3] {

  display: grid;

  gap: 30px;

  grid-template-columns: repeat(3, 1fr);

}



[data-grid=grid-4] {

  display: grid;

  gap: 30px;

  grid-template-columns: repeat(4, 1fr);

}



[data-grid=grid-5] {

  display: grid;

  gap: 30px;

  grid-template-columns: repeat(5, 1fr);

}



[data-grid=grid-6] {

  display: grid;

  gap: 30px;

  grid-template-columns: repeat(6, 1fr);

}



[data-grid=grid-7] {

  display: grid;

  gap: 30px;

  grid-template-columns: repeat(7, 1fr);

}



.tf-row-flex {

  display: flex;

  flex-direction: row;

  column-gap: 30px;

  row-gap: 30px;

}



.tf-grid-layout {

  display: grid;

  column-gap: 30px;

  row-gap: 30px;

}

.tf-grid-layout.tf-col-2 {

  grid-template-columns: 1fr 1fr;

}

.tf-grid-layout.tf-col-3 {

  grid-template-columns: repeat(3, 1fr);

}

.tf-grid-layout.tf-col-4 {

  grid-template-columns: repeat(4, 1fr);

}

.tf-grid-layout.tf-col-5 {

  grid-template-columns: repeat(5, 1fr);

}

.tf-grid-layout.tf-col-6 {

  grid-template-columns: repeat(6, 1fr);

}

.tf-grid-layout.tf-col-7 {

  grid-template-columns: repeat(7, 1fr);

}

.tf-grid-layout .wg-pagination {

  grid-column: 1/-1;

  width: 100%;

}

.tf-grid-layout .wd-load {

  grid-column: 1/-1;

}



.cursor-not-allowed {

  cursor: not-allowed;

}



.cursor-auto {

  cursor: auto;

}



.text-highlight {

  -webkit-text-stroke: 1px #000;

  color: transparent !important;

  flex-direction: row-reverse;

}



.text-line-clamp-1 {

  -webkit-line-clamp: 1;

  -webkit-box-orient: vertical;

  display: -webkit-box;

  overflow: hidden;

}



.text-line-clamp-2 {

  -webkit-line-clamp: 2;

  -webkit-box-orient: vertical;

  display: -webkit-box;

  overflow: hidden;

}



.text-line-clamp-3 {

  -webkit-line-clamp: 3;

  -webkit-box-orient: vertical;

  display: -webkit-box;

  overflow: hidden;

}



.text-line-clamp-4 {

  -webkit-line-clamp: 4;

  -webkit-box-orient: vertical;

  display: -webkit-box;

  overflow: hidden;

}



.aspect-ratio-1 {

  aspect-ratio: 1/1;

}



.aspect-ratio-0 {

  aspect-ratio: 0 !important;

}



.initial-child-container {

  flex: 0 0 auto;

  display: flex;

  min-width: auto;

  flex-direction: row;

  align-items: center;

}



.line-top-container {

  position: relative;

}

.line-top-container::before {

  position: absolute;

  content: "";

  top: 0;

  left: 50%;

  background-color: var(--line);

  height: 1px;

  width: 100%;

  max-width: 1320px;

  transform: translateX(-50%);

}



.line-bottom-container {

  position: relative;

}

.line-bottom-container::after {

  position: absolute;

  content: "";

  bottom: 0;

  left: 50%;

  background-color: var(--line);

  height: 1px;

  width: 100%;

  max-width: 1320px;

  transform: translateX(-50%);

}



#scroll-top {

  position: fixed;

  display: block;

  width: 48px;

  height: 48px;

  line-height: 50px;

  border-radius: 4px;

  z-index: 1;

  border-radius: 50%;

  opacity: 0;

  visibility: hidden;

  cursor: pointer;

  overflow: hidden;

  z-index: 100;

  background-color: var(--dark);

  border: 0;

  bottom: 92px;

  right: 20px;

  padding: 0;

  display: flex;

  align-items: center;

  justify-content: center;

  -webkit-transition: all 0.3s ease-in-out;

  -moz-transition: all 0.3s ease-in-out;

  -ms-transition: all 0.3s ease-in-out;

  -o-transition: all 0.3s ease-in-out;

  transition: all 0.3s ease-in-out;

}

#scroll-top.show {

  opacity: 1;

  visibility: visible;

}

#scroll-top.type-1 {

  bottom: 140px;

}

#scroll-top:hover {

  transform: translateY(-5px);

  background-color: var(--primary);

}



/* Preload 

------------------------------------------- */

.preload-container {

  display: flex;

  position: relative;

  width: 100%;

  height: 100%;

  background: #ffffff;

  position: fixed;

  top: 0;

  bottom: 0;

  right: 0;

  left: 0;

  z-index: 99999999999;

  align-items: center;

  justify-content: center;

  overflow: hidden;

}



.spinner {

  width: 60px;

  height: 60px;

  border: 3px solid transparent;

  border-top: 3px solid var(--gray);

  border-radius: 100%;

  position: absolute;

  top: 0;

  bottom: 0;

  left: 0;

  right: 0;

  margin: auto;

  animation: spin 1s infinite linear;

}



@keyframes spin {

  from {

    transform: rotate(0deg);

  }

  to {

    transform: rotate(360deg);

  }

}

.tf-overlay {

  position: absolute;

  top: 0;

  left: 0;

  right: 0;

  bottom: 0;

}



.fs-8 {

  font-size: 8px !important;

}



.fs-10 {

  font-size: 10px !important;

}



.fs-12 {

  font-size: 12px !important;

}



.fs-14 {

  font-size: 14px !important;

}



.fs-16 {

  font-size: 16px !important;

}



.fs-20 {

  font-size: 20px !important;

}



.fs-24 {

  font-size: 24px !important;

}



.fs-26 {

  font-size: 26px !important;

}



.fs-28 {

  font-size: 28px !important;

}



.fs-42 {

  font-size: 42px !important;

}



.lh-19 {

  line-height: 19px !important;

}



.lh-20 {

  line-height: 20px !important;

}



.lh-24 {

  line-height: 24px !important;

}



.lh-26 {

  line-height: 26px !important;

}



.lh-12 {

  line-height: 12px !important;

}



.lh-16 {

  line-height: 16px !important;

}



.radius-16 {

  border-radius: 16px !important;

}



.radius-8 {

  border-radius: 8px !important;

}



.relative {

  position: relative !important;

}



.absolute {

  position: absolute;

}



#goTop {

  position: fixed;

  padding: 0;

  bottom: 90px;

  right: 40px;

  width: 38px;

  height: 38px;

  background: var(--white);

  color: black;

  font-size: 20px;

  text-align: center;

  line-height: 50px;

  cursor: pointer;

  border: none;

  border-radius: 3px;

  opacity: 0;

  visibility: hidden;

  transition: opacity 0.3s ease;

  box-shadow: 0px 4px 20px 0px rgba(0, 0, 0, 0.1019607843);

  z-index: 1000;

  display: flex;

  align-items: center;

  justify-content: center;

}

#goTop .border-progress {

  position: absolute;

  top: -1px;

  left: -1px;

  width: calc(100% + 2px);

  height: calc(100% + 2px);

  border-radius: 3px;

  border: 1px solid #000000;

  mask-image: conic-gradient(#000000 var(--progress-angle, 0deg), transparent 0);

  -webkit-mask-image: conic-gradient(#000000 var(--progress-angle, 0deg), transparent 0);

  content: "";

  z-index: 1;

  -webkit-transition: all 0.3s ease-in-out;

  -moz-transition: all 0.3s ease-in-out;

  -ms-transition: all 0.3s ease-in-out;

  -o-transition: all 0.3s ease-in-out;

  transition: all 0.3s ease-in-out;

}

#goTop.show {

  opacity: 1;

  visibility: visible;

}

#goTop .icon {

  font-size: 12px;

  -webkit-transition: all 0.3s ease-in-out;

  -moz-transition: all 0.3s ease-in-out;

  -ms-transition: all 0.3s ease-in-out;

  -o-transition: all 0.3s ease-in-out;

  transition: all 0.3s ease-in-out;

}

#goTop .icon-arrow-right {

  transform: rotate(-90deg);

}



.simpleParallax {

  height: 100%;

  width: 100%;

}

.simpleParallax img {

  height: 100%;

  width: 100%;

  object-fit: cover;

}



.bg-3 {

  background-color: var(--bg-3) !important;

}



.bg-line {

  background-color: var(--line);

}



.bg-line-3 {

  background-color: var(--line-3);

}



.bg-gray {

  background-color: var(--gray) !important;

}



.bg-gray-2 {

  background-color: var(--gray-2) !important;

}



.bg-gray-5 {

  background-color: var(--gray-5) !important;

}



.bg-primary {

  background-color: var(--primary) !important;

}



.br-line {

  display: inline-flex;

  width: 100%;

  height: 1px;

}

.br-line.type-vertical {

  height: 16px;

  width: 1px;

}

.br-line.type-vertical.h23 {

  height: 23px;

}



.tf-sp-1 {

  padding-top: 20px;

  padding-bottom: 50px;

}



.tf-sp-2 {

  padding-top: 50px;

  padding-bottom: 50px;

}



.tf-sp-3 {

  padding-top: 20px;

  padding-bottom: 20px;

}



.tf-sp-4 {

  padding-top: 40px;

  padding-bottom: 40px;

}



.tf-sp-5 {

  padding-top: 30px;

  padding-bottom: 30px;

}



.tf-sp-6 {

  padding-top: 100px;

  padding-bottom: 100px;

}



.tf-sp-7 {

  padding-top: 30px;

  padding-bottom: 50px;

}



.progress {

  height: 6px;

  border-radius: 999px;

}

.progress .progress-bar {

  border-radius: 999px;

  background-color: var(--primary);

}

.progress.style-2 {

  height: 9px;

  border-radius: 50px;

}

.progress.style-2 .progress-bar {

  border-radius: 50px;

}

.progress.style-3 {

  height: 12px;

  border-radius: 8px;

}

.progress.style-3 .progress-bar {

  border-radius: 8px;

}



.sticky-top {

  z-index: 50;

  top: 15px;

}



.cs-pointer {

  cursor: pointer;

}



.z-4 {

  z-index: 4;

}



.z-5 {

  z-index: 5;

}



.z-6 {

  z-index: 6;

}



.aspect-unset {

  aspect-ratio: unset !important;

}



.w-max-content {

  width: max-content !important;

}



.fw-1 {

  font-weight: 100;

}



.fw-2 {

  font-weight: 200;

}



.fw-3 {

  font-weight: 300 !important;

}



.fw-8 {

  font-weight: 800;

}



.fw-9 {

  font-weight: 900;

}



.mb-20 {

  margin-bottom: 20px !important;

}



.mb-14 {

  margin-bottom: 14px !important;

}



.mb-6 {

  margin-bottom: 6px !important;

}



.mw-unset {

  max-width: unset !important;

}



.flat-container {

  max-width: 1490px;

  width: 100%;

  margin: auto;

  padding: 15px;

  border-radius: 8px;

}



.m-h-300 {

  min-height: 300px;

}



.letter-sp-s1 {

  letter-spacing: 10.8px;

}



.pb-8 {

  padding-bottom: 8px !important;

}



.pst-unset {

  position: unset !important;

}



.text-delivered {

  color: #008a00;

}



.text-on-the-way {

  color: #ff4848;

}



/*------------ Components ---------------- */

/*------------ header ---------------- */

.tf-topbar {

  padding: 5px 0px;

}



.topbar-left {

  display: flex;

  align-items: center;

  justify-content: center;

  gap: 0px 40px;

  flex-wrap: wrap;

}



.topbar-right {

  display: flex;

  align-items: center;

  justify-content: flex-end;

  gap: 28px;

}

.topbar-right > li:not(:last-child) {

  padding-right: 28px;

  position: relative;

}

.topbar-right > li:not(:last-child)::after {

  content: "";

  position: absolute;

  right: 0;

  top: 50%;

  transform: translateY(-50%);

  width: 1px;

  height: 16px;

  background-color: var(--gray-2);

}



header {

  position: sticky;

  position: -webkit-sticky;

  left: 0;

  right: 0;

  -webkit-transition: all 0.3s ease-in-out;

  -moz-transition: all 0.3s ease-in-out;

  -ms-transition: all 0.3s ease-in-out;

  -o-transition: all 0.3s ease-in-out;

  transition: all 0.3s ease-in-out;

  z-index: 888;

  background-color: var(--white);

}

header:not(.style-2, .style-3, .style-4, .style-5) {

  border-bottom: 1px solid var(--gray-5);

}

header.header-type-stc {

  box-shadow: 0px 4px 10px #ececec;

}

.tf-header .logo-site {

  max-width: 185px;

  width: 100%;

}

.tf-header .nav-icon {

  display: flex;

  justify-content: flex-end;

  gap: 20px;

}

.tf-header .nav-icon.style-2 {

  gap: 17px;

}

.tf-header .nav-icon.style-2 li .infor {

  display: flex;

  flex-direction: column;

  gap: 4px;

}

.tf-header .nav-icon.style-2 li > a {

  position: relative;

  padding-top: 8px;

  padding-right: 6px;

}

.tf-header .nav-icon.style-2 li > a i,

.tf-header .nav-icon.style-2 li > a svg {

  -webkit-transition: all 0.3s ease-in-out;

  -moz-transition: all 0.3s ease-in-out;

  -ms-transition: all 0.3s ease-in-out;

  -o-transition: all 0.3s ease-in-out;

  transition: all 0.3s ease-in-out;

}

.tf-header .nav-icon.style-2 li > a:hover path {

  stroke: var(--primary);

}

.tf-header .nav-icon.style-2 li > a:hover i {

  color: var(--primary);

}

.tf-header .nav-icon.style-3 {

  gap: 20px;

}

.tf-header .nav-icon.style-3 li:not(:last-child) {

  padding-right: 20px;

  border-right: 1px solid var(--gray-5);

}

.tf-header .nav-icon.style-3 .nav-icon-item {

  display: flex;

  align-items: center;

  flex-direction: row;

  gap: 14px;

}

.tf-header .nav-icon.style-3 .nav-icon-item .infor {

  display: flex;

  flex-direction: column;

  gap: 3px;

}

.tf-header .nav-icon.style-3 .nav-icon-item .icon {

  padding-top: 6px;

  padding-right: 17px;

}

.tf-header .nav-icon.style-3 .nav-icon-item .count-box {

  width: 26px;

  height: 26px;

  font-size: 14px;

  line-height: 22px;

}

.tf-header .nav-icon.style-3 .nav-icon-item i {

  font-size: 34px;

}

.tf-header .nav-icon.style-3 .nav-icon-item i,

.tf-header .nav-icon.style-3 .nav-icon-item svg,

.tf-header .nav-icon.style-3 .nav-icon-item .number-item {

  -webkit-transition: all 0.3s ease-in-out;

  -moz-transition: all 0.3s ease-in-out;

  -ms-transition: all 0.3s ease-in-out;

  -o-transition: all 0.3s ease-in-out;

  transition: all 0.3s ease-in-out;

}

.tf-header .nav-icon.style-3 .nav-icon-item:hover .number-item {

  color: var(--primary);

}

.tf-header .nav-icon.style-3 .nav-icon-item:hover svg path {

  stroke: var(--primary);

}

.tf-header .nav-icon.style-3 .nav-icon-item:hover i {

  color: var(--primary);

}

.tf-header .nav-icon.style-4 a {

  position: relative;

  color: var(--white);

  display: flex;

  align-items: center;

  gap: 4px;

}

.tf-header .nav-icon.style-4 .count-box {

  position: unset;

  background-color: var(--white);

  color: var(--gray);

  width: 20px;

  height: 20px;

  font-weight: 400;

  font-size: 13px;

  line-height: 25px;

}

.tf-header .nav-icon .count-box {

  position: absolute;

  display: flex;

  align-items: center;

  justify-content: center;

  background-color: var(--primary);

  border-radius: 50%;

  color: var(--white);

  font-weight: 600;

  font-size: 10px;

  line-height: 15px;

  width: 18px;

  height: 18px;

  top: 0;

  right: 0;

}

.tf-header .nav-icon .count-box.style-default {

  background-color: unset;

  border-radius: 0;

  display: unset;

  color: var(--white);

  width: unset;

  height: unset;

}

.tf-header .nav-icon-item {

  display: flex;

  text-align: center;

  flex-direction: column;

}

.tf-header .nav-icon-item .icon {

  font-size: 26px;

}

.tf-header .nav-icon-item .icon.icon-user {

  font-size: 28px;

}

.tf-header .hover-shopcart {

  position: relative;

}

.tf-header .hover-shopcart:hover .dropdown-shopcart {

  opacity: 1;

  visibility: visible;

  transform: translateY(0px);

  pointer-events: all;

}

.tf-header .hover-shopcart:hover .progress-bar {

  width: 70%;

}

.tf-header .hover-shopcart .dropdown-shopcart {

  pointer-events: none;

  opacity: 0;

  visibility: hidden;

  transform: translateY(10px);

  position: absolute;

  min-width: 414px;

  right: 0;

  top: 100%;

  box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.0509803922);

  padding: 30px;

  border-radius: 8px;

  background-color: var(--white);

  display: flex;

  flex-direction: column;

  gap: 20px;

  -webkit-transition: all 0.3s ease-in-out;

  -moz-transition: all 0.3s ease-in-out;

  -ms-transition: all 0.3s ease-in-out;

  -o-transition: all 0.3s ease-in-out;

  transition: all 0.3s ease-in-out;

}

.tf-header .hover-shopcart .subtotal {

  display: flex;

  align-items: center;

  justify-content: space-between;

}

.tf-header .hover-shopcart .box-btn {

  display: flex;

  gap: 10px;

}

.tf-header .hover-shopcart .box-btn > * {

  width: 100%;

}

.tf-header .inner-header {

  padding: 10px 0px;

}

.tf-header.style-2 .header-center {

  display: flex;

  gap: 20px;

}

.tf-header.style-2 .btn-open-nav {

  font-size: 20px;

}

.tf-header.style-3 .header-center {

  display: flex;

  flex-direction: column;

  gap: 4px;

  justify-content: center;

}

.tf-header.style-3 .inner-header {

  padding: 19px 0px;

  position: relative;

  z-index: 2;

}

.tf-header.style-3 .header-bottom {

  position: relative;

}

.tf-header.style-3 .header-bottom::before {

  content: "";

  position: absolute;

  height: 100%;

  width: 40%;

  background-color: var(--gray);

  z-index: 0;

}

.tf-header.style-3 .header-bottom.bg-gray::before {

  background-color: var(--primary);

}

.tf-header.style-3 .header-bottom.bg-gray .nav-category-wrap {

  background-color: var(--primary);

}

.tf-header.style-3 .header-bottom.bg-gray .nav-category-wrap::after {

  border-left: 10px solid var(--primary);

  background-color: var(--gray);

}

.tf-header.style-3 .header-bottom.bg-gray .nav-title:hover i,

.tf-header.style-3 .header-bottom.bg-gray .nav-title:hover .title {

  color: var(--secondary);

}

.tf-header.style-3 .header-bottom.bg-gray .nav-title.active i,

.tf-header.style-3 .header-bottom.bg-gray .nav-title.active .title {

  color: var(--secondary) !important;

}

.tf-header.style-3 .header-bottom.bg-gray .box-navigation .item-link:hover {

  color: var(--primary);

}

.tf-header.style-3 .header-bottom.type-bg-gray {

  background-color: var(--gray);

}

.tf-header.style-4 .inner-header {

  position: relative;

  z-index: 2;

}

.tf-header.style-4 .header-bottom {

  position: relative;

  z-index: 1;

}

.tf-header.style-4 .header-left {

  display: flex;

  align-items: center;

  gap: 0px 40px;

  flex-wrap: wrap;

}

.tf-header.style-5 .inner-header {

  padding: 12px 0px;

}

.tf-header.style-5 .header-center {

  position: relative;

  z-index: 1;

}

.tf-header.style-5 .header-right {

  position: relative;

  z-index: 2;

}



.header-center {

  display: flex;

  align-items: center;

  height: 100%;

}



.header-bt-left {

  display: flex;

  align-items: center;

  gap: 20px;

}



.header-bt-right {

  display: flex;

  align-items: center;

  gap: 8px;

}



.header-inner-bottom {

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 15px;

}



.nav-category-wrap {

  position: relative;

}

.nav-category-wrap.style-white .nav-title i {

  color: var(--white);

}

.nav-category-wrap.style-white h6 {

  color: var(--white);

}

.nav-category-wrap .nav-title {

  display: flex;

  align-items: center;

  gap: 8px;

  cursor: pointer;

}

.nav-category-wrap .nav-title.hover-gray.active i,

.nav-category-wrap .nav-title.hover-gray.active .title {

  color: var(--gray) !important;

}

.nav-category-wrap .nav-title.hover-gray:hover i,

.nav-category-wrap .nav-title.hover-gray:hover .title {

  color: var(--gray);

}

.nav-category-wrap .nav-title i {

  position: relative;

  -webkit-transition: all 0.3s ease-in-out;

  -moz-transition: all 0.3s ease-in-out;

  -ms-transition: all 0.3s ease-in-out;

  -o-transition: all 0.3s ease-in-out;

  transition: all 0.3s ease-in-out;

  top: -1px;

}

.nav-category-wrap .nav-title.active i {

  color: var(--primary) !important;

}

.nav-category-wrap .nav-title.active .title {

  color: var(--primary) !important;

}

.nav-category-wrap .nav-title .title {

  -webkit-transition: all 0.3s ease-in-out;

  -moz-transition: all 0.3s ease-in-out;

  -ms-transition: all 0.3s ease-in-out;

  -o-transition: all 0.3s ease-in-out;

  transition: all 0.3s ease-in-out;

  line-height: 50px;

}

.nav-category-wrap .nav-title:hover i {

  color: var(--primary);

}

.nav-category-wrap .nav-title:hover .title {

  color: var(--primary);

}

.nav-category-wrap.style-2 {

  background-color: var(--gray);

}

.nav-category-wrap.style-2::after {

  content: "";

  width: 0;

  height: 0;

  border-top: 25px solid transparent;

  border-bottom: 25px solid transparent;

  border-left: 10px solid var(--gray);

  right: -9px;

  top: 0;

  position: absolute;

}

.nav-category-wrap.style-2 .nav-title {

  padding-right: 48px;

}

.nav-category-wrap.style-2 .nav-title i,

.nav-category-wrap.style-2 .nav-title .title {

  color: var(--white);

}

.nav-category-wrap.style-2 .nav-title:hover i,

.nav-category-wrap.style-2 .nav-title:hover .title {

  color: var(--primary);

}



.category-menu {

  position: absolute;

  top: 100%;

  left: 0;

  width: 100%;

  min-width: 285px;

  z-index: 99;

  background: #fff;

  border: 1px solid #ebebeb;

  width: calc(100% - 35px);

  transform: translateY(10px);

  -webkit-transition: all 0.3s ease-in-out;

  -moz-transition: all 0.3s ease-in-out;

  -ms-transition: all 0.3s ease-in-out;

  -o-transition: all 0.3s ease-in-out;

  transition: all 0.3s ease-in-out;

  opacity: 0;

  visibility: hidden;

}

.category-menu.active {

  opacity: 1;

  visibility: visible;

  transform: translateX(0px);

}

.category-menu ul {

  margin: 0;

  padding: 0 15px;

}

.category-menu ul li {

  box-shadow: inset 0px -1px 0px #ececec;

}

.category-menu ul a {

  height: 100%;

  display: flex;

  align-items: center;

  text-decoration: none;

  width: 100%;

  gap: 6px;

  font-size: 14px;

  line-height: 20px;

  padding-top: 10px;

  padding-bottom: 10px;

}

.category-menu ul a svg path {

  -webkit-transition: all 0.3s ease-in-out;

  -moz-transition: all 0.3s ease-in-out;

  -ms-transition: all 0.3s ease-in-out;

  -o-transition: all 0.3s ease-in-out;

  transition: all 0.3s ease-in-out;

}

.category-menu ul a:hover {

  padding-left: 10px;

  color: var(--primary);

}

.category-menu ul a:hover svg path {

  stroke: var(--primary);

}



.box-navigation.style-white .item-link {

  color: var(--white);

}

.box-navigation.style-white .item-link:hover {

  color: var(--gray);

}

.box-navigation.style-white .item-link.has-icon .icon {

  background-color: var(--white);

}

.box-navigation.style-white .item-link.has-icon .icon i {

  color: var(--primary);

}

.box-navigation.style-white .item-link.has-icon:hover .icon {

  background-color: var(--gray);

}

.box-navigation .box-nav-menu {

  display: flex;

  align-items: center;

  gap: 20px;

}

.box-navigation .item-link {

  line-height: 50px;

}

.box-navigation .item-link.has-icon {

  display: flex;

  align-items: center;

  justify-content: center;

  gap: 6px;

}

.box-navigation .item-link.has-icon .icon {

  -webkit-transition: all 0.3s ease-in-out;

  -moz-transition: all 0.3s ease-in-out;

  -ms-transition: all 0.3s ease-in-out;

  -o-transition: all 0.3s ease-in-out;

  transition: all 0.3s ease-in-out;

  width: 20px;

  height: 20px;

  display: flex;

  align-items: center;

  justify-content: center;

  border-radius: 50%;

  background-color: var(--primary);

  color: var(--white);

}

.box-navigation .item-link.has-icon .icon i {

  font-size: 12px;

}

.box-navigation.style-2 .menu-item:not(:last-child) .item-link {

  position: relative;

  padding-right: 20px;

}

.box-navigation.style-2 .menu-item:not(:last-child) .item-link::after {

  content: "";

  position: absolute;

  right: 0px;

  top: 50%;

  width: 1px;

  height: 16px;

  transform: translateY(-50%);

  background-color: var(--gray-2);

}



.mobile-button {

  position: relative;

  width: 26px;

  height: 26px;

  background-color: transparent;

  cursor: pointer;

  display: block;

}

.mobile-button span {

  position: absolute;

  width: 100%;

  height: 2px;

  left: 0;

  top: 12px;

  background-color: var(--primary);

  border-radius: 10px;

}

.mobile-button::before {

  content: "";

  position: absolute;

  top: 5px;

  height: 2px;

  width: 100%;

  left: 0;

  background-color: var(--primary);

  border-radius: 10px;

}

.mobile-button::after {

  content: "";

  position: absolute;

  bottom: 5px;

  height: 2px;

  width: 100%;

  left: 0;

  background-color: var(--primary);

  border-radius: 10px;

}



.support-wrap {

  display: flex;

  align-items: center;

  gap: 8px;

}



.delivery-progress {

  display: grid;

  gap: 10px;

}

.delivery-progress .progress-bar {

  -webkit-transition: all 0.5s ease-in-out;

  -moz-transition: all 0.5s ease-in-out;

  -ms-transition: all 0.5s ease-in-out;

  -o-transition: all 0.5s ease-in-out;

  transition: all 0.5s ease-in-out;

  width: 0%;

  transition-delay: 0.1s;

}

.delivery-progress p {

  display: flex;

  align-items: center;

  gap: 8px;

}



/* Start Open Nav Mobile */

.canvas-mb {

  border: unset !important;

}

.canvas-mb .tab-pane:not(.active) .collapse {

  display: none;

}

.canvas-mb .logo-site {

  position: absolute;

  top: 20px;

  left: 20px;

  z-index: 100;

  max-width: 100px;

}

.canvas-mb .mb-body {

  padding-right: 20px;

  padding-left: 20px;

  padding-bottom: 20px;

  border-bottom: 1px solid var(--line);

  overscroll-behavior-y: contain;

  overflow-y: auto;

  display: flex;

  flex-direction: column;

  justify-content: space-between;

}

.canvas-mb .mb-body::-webkit-scrollbar-thumb {

  background-color: var(--primary);

  border-radius: 5px;

}

.canvas-mb .mb-body::-webkit-scrollbar {

  width: 3px;

}

.canvas-mb .mb-bottom {

  padding-right: 15px;

  padding-left: 15px;

}

.canvas-mb .mb-bottom .btn-select {

  padding: 10px 0px;

}

.canvas-mb .btn-close-mb {

  position: absolute;

  right: 20px;

  top: 20px;

  cursor: pointer;

  color: var(--black);

  z-index: 100;

}

.canvas-mb .mb-canvas-content {

  padding-top: 70px;

  min-width: 100%;

  max-width: min(90%, 320px);

  grid-auto-rows: minmax(0, 1fr) auto;

  isolation: isolate;

  height: 100%;

  width: 100%;

  display: grid;

  align-content: start;

}



.nav-ul-mb {

  margin-bottom: 30px;

}

.nav-ul-mb .sub-nav-menu {

  padding-left: 10px;

  margin-bottom: 15px;

}

.nav-ul-mb .sub-nav-menu.sub-menu-level-2 {

  margin-bottom: 5px;

}

.nav-ul-mb .btn-open-sub {

  position: relative;

  width: 20px;

  height: 30px;

  display: inline-flex;

  align-items: center;

  justify-content: center;

}

.nav-ul-mb .btn-open-sub:after, .nav-ul-mb .btn-open-sub::before {

  content: "";

  position: absolute;

  z-index: 1;

  top: 0;

  bottom: 0;

  left: 0;

  right: 0;

  background-color: var(--black);

  transition: 0.4s ease 0.1s;

  margin: auto;

}

.nav-ul-mb .btn-open-sub::before {

  width: 2px;

  height: 12px;

}

.nav-ul-mb .btn-open-sub::after {

  width: 12px;

  height: 2px;

}

.nav-ul-mb .nav-mb-item {

  padding: 2px 0px;

}

.nav-ul-mb .nav-mb-item:not(:last-child) {

  border-bottom: 1px solid var(--line);

}

.nav-ul-mb .nav-mb-item .mb-menu-link {

  min-height: 40px;

  font-weight: 600;

  font-size: 14px;

  line-height: 40px;

  color: var(--black);

  display: flex;

  align-items: center;

  justify-content: space-between;

}

.nav-ul-mb .nav-mb-item .mb-menu-link:not(.collapsed) .btn-open-sub::before {

  transform: rotate(90deg);

}

.nav-ul-mb .nav-mb-item.active .mb-menu-link {

  color: var(--primary);

}

.nav-ul-mb .nav-mb-item.active .mb-menu-link .btn-open-sub::after, .nav-ul-mb .nav-mb-item.active .mb-menu-link .btn-open-sub::before {

  background-color: var(--primary);

}

.nav-ul-mb .nav-mb-item.active .sub-nav-link.active {

  color: var(--primary);

}

.nav-ul-mb .nav-mb-item.active .sub-nav-link.active .btn-open-sub::after, .nav-ul-mb .nav-mb-item.active .sub-nav-link.active .btn-open-sub::before {

  background-color: var(--primary);

}

.nav-ul-mb .sub-nav-link {

  display: flex;

  align-items: center;

  justify-content: space-between;

  min-height: 32px;

  line-height: 32px;

  font-size: 14px;

  font-weight: 500;

  color: var(--dark);

}

.nav-ul-mb .sub-nav-link:not(.collapsed) .btn-open-sub::before {

  transform: rotate(90deg);

}

.nav-ul-mb .sub-nav-link .btn-open-sub::after, .nav-ul-mb .sub-nav-link .btn-open-sub::before {

  background-color: var(--black);

}



/* -- End Open Nav Mobile -- */

.tf-nav-menu .title {

  display: flex;

  align-items: center;

  gap: 8px;

  padding: 13px 18px;

  background-color: var(--primary);

  color: var(--white);

  border-radius: 10px 10px 0px 0px;

  overflow: hidden;

}

.tf-nav-menu .menu-category-list {

  border: 1px solid var(--gray-5);

  border-top: unset;

  border-radius: 0px 0px 10px 10px;

  position: relative;

}

.tf-nav-menu .menu-item {

  position: relative;

}

.tf-nav-menu .sub-menu-container {

  position: absolute;

  top: 0;

  left: 100%;

  width: max-content;

  box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.0509803922);

  border: 1px solid var(--gray-5);

  border-radius: 10px;

  pointer-events: none;

  opacity: 0;

  visibility: hidden;

  -webkit-transition: all 0.3s ease-in-out;

  -moz-transition: all 0.3s ease-in-out;

  -ms-transition: all 0.3s ease-in-out;

  -o-transition: all 0.3s ease-in-out;

  transition: all 0.3s ease-in-out;

  transform: translateY(10px);

  z-index: 1;

  background-color: var(--white);

}

.tf-nav-menu .sub-menu-list {

  padding: 30px;

  display: flex;

  flex-direction: column;

  gap: 20px;

}

.tf-nav-menu .sub-menu-list .sub-menu-item {

  display: inline-flex;

}

.tf-nav-menu .item-link {

  padding: 0px 18px;

  position: relative;

  display: flex;

}

.tf-nav-menu .item-link > span {

  padding: 15px 0px 14px;

  display: flex;

  gap: 6px;

  align-items: center;

  width: 100%;

  position: relative;

}

.tf-nav-menu .item-link > span::after {

  content: "";

  position: absolute;

  width: 0%;

  height: 1px;

  bottom: 0;

  left: auto;

  right: 0;

  background-color: var(--primary);

  -webkit-transition: all 0.3s ease-in-out;

  -moz-transition: all 0.3s ease-in-out;

  -ms-transition: all 0.3s ease-in-out;

  -o-transition: all 0.3s ease-in-out;

  transition: all 0.3s ease-in-out;

}

.tf-nav-menu .item-link::after {

  content: "\e919";

  position: absolute;

  font-family: "icomoon";

  right: 18px;

  top: 50%;

  transform: translateY(-50%);

}

.tf-nav-menu .menu-item .icon {

  font-size: 20px;

}

.tf-nav-menu .menu-item:not(:last-child) .item-link > span {

  border-bottom: 1px solid var(--line-2);

}

.tf-nav-menu .menu-item:hover .item-link {

  color: var(--primary);

}

.tf-nav-menu .menu-item:hover .item-link svg path {

  stroke: var(--primary);

}

.tf-nav-menu .menu-item:hover .item-link > span::after {

  width: 100%;

  left: 0;

  right: auto;

}

.tf-nav-menu .menu-item:hover .sub-menu-container {

  transform: translateY(0px);

  opacity: 1;

  visibility: visible;

  pointer-events: all;

}



.main-nav-menu .nav-list {

  display: flex;

  align-items: center;

  gap: 30px;

}

.main-nav-menu .item-link {

  display: flex;

  align-items: center;

  gap: 3px;

  line-height: 50px;

  color: var(--text-2);

  position: relative;

}

.main-nav-menu .item-link i {

  -webkit-transition: all 0.3s ease-in-out;

  -moz-transition: all 0.3s ease-in-out;

  -ms-transition: all 0.3s ease-in-out;

  -o-transition: all 0.3s ease-in-out;

  transition: all 0.3s ease-in-out;

  color: var(--text-2);

}

.main-nav-menu .item-link::after {

  content: "";

  position: absolute;

  left: 0;

  bottom: 0;

  width: 100%;

  height: 1px;

  background-color: var(--primary);

  transform: scale(0);

  -webkit-transition: all 0.3s ease-in-out;

  -moz-transition: all 0.3s ease-in-out;

  -ms-transition: all 0.3s ease-in-out;

  -o-transition: all 0.3s ease-in-out;

  transition: all 0.3s ease-in-out;

}

.main-nav-menu .item-link::before {

  content: "";

  position: absolute;

  width: 100%;

  top: 50%;

  left: 50%;

  transform: translate(-50%, -50%);

  height: calc(100% + 0px);

  width: calc(100% + 60px);

  display: none;

}

.main-nav-menu .sub-menu-container {

  position: absolute;

  background-color: var(--white);

  z-index: 999;

  top: 100%;

  left: 0;

  border-radius: 5px;

  box-shadow: 0px 4px 9px 0px rgba(0, 64, 193, 0.2);

  transform: translateY(10px);

  -webkit-transition: all 0.3s ease-in-out;

  -moz-transition: all 0.3s ease-in-out;

  -ms-transition: all 0.3s ease-in-out;

  -o-transition: all 0.3s ease-in-out;

  transition: all 0.3s ease-in-out;

  opacity: 0;

  visibility: hidden;

  pointer-events: none;

  padding: 5px 0px;

}

.main-nav-menu .sub-menu-container.mega-menu {

  padding: 30px;

}

.main-nav-menu .sub-menu-container.mega-menu.mega-home {

  padding-top: 32px;

  padding-bottom: 36px;

}

.main-nav-menu .sub-menu-list {

  min-width: 200px;

}

.main-nav-menu .sub-menu-list li:not(:last-child) a span {

  border-bottom: 1px solid var(--gray-5);

}

.main-nav-menu .sub-menu-list li a {

  padding: 0px 20px;

  display: block;

}

.main-nav-menu .sub-menu-list li a span {

  padding: 10px 0px;

  display: block;

  position: relative;

}

.main-nav-menu .sub-menu-list li.active a {

  color: var(--primary);

}

.main-nav-menu .nav-item {

  position: relative;

}

.main-nav-menu .nav-item:hover .item-link {

  color: var(--primary);

}

.main-nav-menu .nav-item:hover .item-link .icon {

  transform: rotate(180deg);

  color: var(--primary);

}

.main-nav-menu .nav-item:hover .item-link::after {

  transform: scale(1);

}

.main-nav-menu .nav-item:hover .item-link::before {

  display: block;

}

.main-nav-menu .nav-item:hover .sub-menu-container {

  transform: translateY(0px);

  opacity: 1;

  visibility: visible;

  pointer-events: all;

}

.main-nav-menu .nav-item.active .item-link {

  color: var(--primary);

}

.main-nav-menu .nav-item.active .item-link .icon {

  color: var(--primary);

}

.main-nav-menu.style-white .item-link {

  color: var(--white);

}

.main-nav-menu.style-white .item-link .icon {

  color: var(--white);

}

.main-nav-menu.style-white .item-link::after {

  background-color: var(--black);

}

.main-nav-menu.style-white .nav-item:hover .item-link, .main-nav-menu.style-white .nav-item.active .item-link {

  color: var(--black);

}

.main-nav-menu.style-white .nav-item:hover .item-link .icon, .main-nav-menu.style-white .nav-item.active .item-link .icon {

  color: var(--black);

}

.main-nav-menu.style-white-2 .item-link {

  color: var(--white);

}

.main-nav-menu.style-white-2 .item-link .icon {

  color: var(--white);

}

.main-nav-menu.style-white-2 .item-link::after {

  background-color: var(--primary);

}



.mega-menu {

  width: auto;

  overflow: auto;

}

.mega-menu .view-all-demo {

  margin-top: 28px;

}

.mega-menu.mega-home {

  max-width: unset;

  width: 100%;

}

.mega-menu.here {

  opacity: 1 !important;

  visibility: visible !important;

  pointer-events: all !important;

}

.mega-menu .wrapper-sub-menu {

  max-width: 1490px;

  margin: auto;

}



.row-demo {

  display: grid;

  grid-template-columns: repeat(6, 1fr);

  gap: 20px;

  overflow-y: auto;

  padding-right: 15px;

  margin-right: -15px;

}

.row-demo::-webkit-scrollbar {

  width: 5px;

}

.row-demo::-webkit-scrollbar-thumb {

  background-color: var(--primary);

  border-radius: 5px;

}

.row-demo .demo-item {

  border-radius: 8px;

  background-color: #f7f7f7;

  padding: 8px 8px 0px;

  border: solid 1px var(--gray-4);

  transition: border 0.4s;

  margin-bottom: 1px;

  display: inline-flex;

  position: relative;

}

.row-demo .demo-item > a {

  display: flex;

  flex-direction: column;

}

.row-demo .demo-item .demo-name {

  font-size: 14px;

  line-height: 42px;

  display: block;

  text-wrap: nowrap;

  text-overflow: ellipsis;

  overflow: hidden;

  text-align: center;

  font-weight: 600;

  -webkit-transition: all 0.3s ease-in-out;

  -moz-transition: all 0.3s ease-in-out;

  -ms-transition: all 0.3s ease-in-out;

  -o-transition: all 0.3s ease-in-out;

  transition: all 0.3s ease-in-out;

  color: var(--text-main);

}

.row-demo .demo-item:hover, .row-demo .demo-item.active {

  border-color: var(--primary);

}

.row-demo .demo-item:hover .demo-name, .row-demo .demo-item.active .demo-name {

  color: var(--primary);

}



.demo-label {

  position: absolute;

  top: 9px;

  right: 7px;

  gap: 5px;

  display: flex;

}

.demo-label span {

  font-size: 10px;

  line-height: 19px;

  padding: 0 8px;

  background-color: rgb(131, 183, 53);

  color: var(--white);

  border-radius: 3px;

  display: flex;

  align-items: center;

  justify-content: center;

}

.demo-label .demo-new {

  background-color: rgb(72, 212, 187);

}

.demo-label .demo-hot {

  background-color: rgb(252, 87, 50);

}



.wrapper-sub-menu {

  display: flex;

  gap: 30px;

}



.mega-menu-item {

  min-width: 140px;

}

.mega-menu-item .menu-heading {

  font-weight: 600;

  padding-bottom: 10px;

  margin-bottom: 15px;

  border-bottom: 1px solid var(--gray-4);

}

.mega-menu-item .menu-list li:not(:last-child) {

  margin-bottom: 10px;

}

.mega-menu-item .menu-list li.active a {

  color: var(--primary);

}



.bottom-bar-language {

  display: flex;

  align-items: center;

}

.bottom-bar-language > * {

  width: 100%;

  display: flex;

  justify-content: center;

}

.bottom-bar-language .tf-curs {

  border-right: 1px solid var(--gray-4);

}

.bottom-bar-language .tf-lans .filter-option-inner-inner {

  padding: 8px 20px;

}

.bottom-bar-language .tf-lans .dropdown-menu {

  padding: 7px 5px !important;

}



.bar-lang .image-select .dropdown-toggle::after {

  content: "\e918";

  right: -4px !important;

}

.bar-lang .image-select .filter-option-inner-inner {

  padding: 4px 10px;

}

.bar-lang.type-2 .tf-curs {

  min-width: 95px;

}



.tf-lans .dropdown-menu {

  padding: 10px 5px;

}



.tf-curs .inner {

  display: flex;

  align-items: center;

  justify-content: center;

  flex-direction: column;

}

.tf-curs .dropdown-menu {

  border-radius: 8px;

}

.tf-curs .dropdown-menu a .text img {

  border-radius: 50%;

  width: 20px !important;

}

.tf-curs .dropdown-menu li:not(:last-child) {

  margin-bottom: 5px;

}



/*------------ footer ---------------- */

.tf-footer .ft-body-inner {

  background-color: var(--bg);

  padding: 50px 0px;

}



.ft-inner {

  display: flex;

  gap: 30px;

}

.ft-inner .ft-logo {

  display: flex;

  flex-direction: column;

  gap: 15px;

  flex-shrink: 0;

}



.method-list {

  display: flex;

  gap: 20px;

}



.ft-link-wrap {

  gap: 30px;

}

.ft-link-wrap .footer-col-block {

  display: flex;

  flex-direction: column;

  gap: 15px;

}

.ft-link-wrap .ft-menu-list {

  display: grid;

  gap: 12px;

}

.ft-link-wrap .ft-contact-list li {

  display: flex;

  gap: 15px;

  align-items: start;

}

.ft-link-wrap .ft-contact-list .icon {

  display: block;

  position: relative;

  padding-right: 8px;

}

.ft-link-wrap .ft-contact-list .icon::after {

  content: "";

  position: absolute;

  right: 0;

  height: 16px;

  width: 1px;

  background-color: var(--line-3);

  top: 50%;

  transform: translateY(-50%);

  opacity: 0.2;

}



.ft-body-center .ft-center {

  padding: 18px 0px;

  gap: 15px;

  display: flex;

  align-items: center;

  justify-content: center;

  flex-wrap: wrap;

}

.ft-body-center .ft-center .form-newsletter {

  max-width: 566px;

  width: 100%;

}

.ft-body-center .ft-center .form-newsletter fieldset {

  width: 100%;

}

.ft-body-center .ft-center .form-newsletter input {

  width: 100%;

}

.ft-body-center .notice {

  display: flex;

  align-items: center;

  justify-content: center;

  text-align: center;

  gap: 10px 30px;

  flex-wrap: wrap;

}

.ft-body-center .notice span {

  display: flex;

  align-items: center;

  gap: 10px;

}



.ft-bottom {

  padding: 50px 0px;

  display: grid;

  gap: 12px;

}

.ft-bottom .ft-menu-list-2 {

  display: flex;

  align-items: center;

  justify-content: center;

  flex-wrap: wrap;

  gap: 10px 30px;

}



.social-list {

  display: flex;

  justify-content: center;

  gap: 10px;

}

.social-list a {

  width: 35px;

  height: 35px;

  display: flex;

  align-items: center;

  justify-content: center;

  border-radius: 50%;

  border: 1px solid var(--gray-5);

  background-color: var(--white);

}

.social-list a:hover {

  background-color: var(--primary);

  border-color: var(--primary);

  color: var(--white);

}

.social-list.style-2 {

  gap: 10px;

}

.social-list.style-2 a {

  width: 36px;

  height: 36px;

}



/*------------ tabs ---------------- */

.flat-animate-tab .tab-content {

  position: relative;

}

.flat-animate-tab .tab-pane {

  display: block;

  pointer-events: none;

  opacity: 0;

  visibility: hidden;

  position: absolute;

  z-index: 1;

  top: 0;

  left: 0;

  right: 0;

  -webkit-transform: translateY(30px);

  -ms-transform: translateY(30px);

  transform: translateY(30px);

  transition-timing-function: ease-in;

  transition-duration: 0.2s;

}

.flat-animate-tab .tab-pane.active {

  pointer-events: auto;

  opacity: 1;

  visibility: visible;

  position: relative;

  z-index: 2;

  -webkit-transform: none;

  -ms-transform: none;

  transform: none;

  transition-timing-function: ease-out;

  transition-duration: 0.3s;

  transition-delay: 0.3s;

}

.flat-animate-tab .flat-title-tab-default .menu-tab-line {

  display: flex;

  align-items: center;

  gap: 30px;

}

.flat-animate-tab .flat-title-tab-default .tab-link.active {

  color: var(--primary);

}



.flat-title-tab-nav-mobile {

  margin-bottom: 20px;

}

.flat-title-tab-nav-mobile .menu-tab-line {

  display: flex;

  align-items: center;

  gap: 5px;

  border-radius: 999px;

  border: 1px solid var(--line);

  padding: 7px 10px;

}

.flat-title-tab-nav-mobile .nav-tab-item {

  text-align: center;

  width: 100%;

}

.flat-title-tab-nav-mobile .nav-tab-item a.active {

  color: var(--primary);

}



.flat-title-tab-product-des {

  border-radius: 6px;

  border: 1px solid var(--gray-5);

}

.flat-title-tab-product-des .flat-title-tab {

  background-color: var(--gray-6);

}

.flat-title-tab-product-des .menu-tab-line {

  padding: 13px 18px;

  display: flex;

  gap: 30px;

  align-items: center;

  white-space: nowrap;

  overflow: auto;

}

.flat-title-tab-product-des .menu-tab-line .tab-link:hover {

  color: var(--secondary);

}

.flat-title-tab-product-des .menu-tab-line .tab-link.active {

  color: var(--secondary);

}

.flat-title-tab-product-des .tab-main {

  padding: 30px;

}

.flat-title-tab-product-des .box-total-btn {

  display: flex;

  flex-direction: column;

  gap: 10px;

  max-width: 200px;

  width: 100%;

}

.flat-title-tab-product-des .card-usually {

  max-width: 251px;

  width: 100%;

}



.list-feature > li {

  display: flex;

  align-items: center;

  gap: 20px;

}

.list-feature > li:not(:last-child) {

  padding-bottom: 4px;

  border-bottom: 1px solid var(--gray-5);

  margin-bottom: 4px;

}

.list-feature .name-feature {

  font-weight: 600;

  font-size: 14px;

  line-height: 22px;

  max-width: 236px;

  width: 100%;

  flex-grow: 2;

}

.list-feature .property {

  font-weight: 400;

  font-size: 14px;

  line-height: 20px;

  width: 100%;

  flex-grow: 1;

}



.tab-usually {

  display: flex;

  gap: 20px 30px;

  align-items: center;

  flex-wrap: wrap;

}



.tab-des {

  display: flex;

  flex-direction: column;

  gap: 30px;

  /*align-items: center;*/

}



.tab-review {

  display: flex;

  flex-wrap: wrap;

  gap: 30px;

}

.tab-review .tab-rating-wrap {

  width: 100%;

}

.tab-review .tab-review-wrap {

  width: 100%;

}

.tab-review .add-comment-wrap h5 {

  margin-bottom: 30px;

}

.tab-review.style-2 {

  gap: 30px;

}

.tab-review.style-2 .tab-rating-wrap {

  flex-wrap: wrap;

  padding-bottom: 30px;

  border-radius: unset;

  border-bottom: 1px solid var(--gray-5);

}

.tab-review.style-2 .tab-review-wrap {

  display: flex;

  flex-direction: column;

  align-items: start;

  gap: 30px 40px;

}



.tab-rating-wrap {

  display: flex;

  flex-direction: column;

  gap: 30px;

}



.rating-progress-list {

  display: grid;

  gap: 10px;

}

.rating-progress-list p {

  flex-grow: 1;

}

.rating-progress-list li {

  display: flex;

  align-items: center;

  gap: 10px;

}

.rating-progress-list .rating-progress {

  width: 100%;

}



.rating-filter-wrap .title-sidebar {

  margin-bottom: 12px;

}



.rating-filter-list {

  display: flex;

  gap: 8px;

  flex-wrap: wrap;

}

.rating-filter-list a {

  padding: 5px 20px;

  border-radius: 18px;

  background-color: var(--gray-6);

}

.rating-filter-list a:hover, .rating-filter-list a.active {

  background-color: var(--primary);

  color: var(--white);

}



.flat-title-tab-faq .tf-title {

  position: relative;

  padding-bottom: 28px;

  margin-bottom: 30px;

}

.flat-title-tab-faq .tf-title::after {

  content: "";

  bottom: 0;

  left: 0;

  position: absolute;

  max-width: 123px;

  width: 100%;

  height: 2px;

  background-color: var(--primary);

}

.flat-title-tab-faq .menu-tab-line {

  display: grid;

  gap: 16px;

}

.flat-title-tab-faq .tab-link.active, .flat-title-tab-faq .tab-link:hover {

  font-weight: 600;

  color: var(--primary);

}



/*------------ button ---------------- */

.tf-btn {

  font-weight: 600;

  font-size: 15px;

  line-height: 24px;

  text-align: center;

  padding: 10px 16px;

  border-radius: 8px;

  background-color: var(--primary);

  display: flex;

  align-items: center;

  justify-content: center;

  gap: 10px;

  -webkit-transition: all 0.3s ease-in-out;

  -moz-transition: all 0.3s ease-in-out;

  -ms-transition: all 0.3s ease-in-out;

  -o-transition: all 0.3s ease-in-out;

  transition: all 0.3s ease-in-out;

}

.tf-btn:hover {

  background-color: var(--gray);

}

.tf-btn.hover-2:hover {

  background-color: var(--secondary) !important;

}

.tf-btn.btn-line {

  background-color: unset;

  border: 1px solid var(--gray-4);

  padding-top: 9px;

  padding-bottom: 9px;

}

.tf-btn.btn-line:hover {

  background-color: var(--gray);

  color: var(--white);

}

.tf-btn.btn-line-white {

  background-color: unset;

  border: 2px solid var(--white);

  color: var(--white);

  padding-top: 8px;

  padding-bottom: 8px;

}

.tf-btn.btn-line-white:hover {

  background-color: var(--primary);

  color: var(--white) !important;

  border-color: var(--primary);

}

.tf-btn.btn-gray {

  background-color: var(--gray);

}

.tf-btn.btn-gray:hover {

  background-color: var(--primary);

}

.tf-btn.btn-gray-2 {

  background-color: var(--gray-4);

  color: var(--gray-2);

}

.tf-btn.btn-gray-2:hover {

  background-color: var(--primary);

  color: var(--white);

}

.tf-btn.style-2 {

  gap: 6px;

  padding: 6px 12px;

  border: 1px solid rgba(255, 255, 255, 0.1019607843);

  background: rgba(255, 255, 255, 0.1019607843);

  border-radius: 100px;

}

.tf-btn.style-2:hover {

  background-color: var(--primary);

  color: var(--white);

}

.tf-btn.style-3 {

  display: inline-flex;

  border-radius: 100px;

  background-color: var(--secondary);

  color: var(--white);

  padding: 7px 15px 7px;

}

.tf-btn.btn-large {

  padding: 12px 32px 11px;

}

.tf-btn.btn-large-2 {

  padding: 10px 83.5px;

}

.tf-btn.btn-large-3 {

  padding: 14px 30px;

}

.tf-btn.btn-large-4 {

  padding: 14px 20px;

}

.tf-btn.btn-small {

  padding: 5px 19px;

}



.hover-shine {

  position: relative;

  overflow: hidden;

}

.hover-shine::after {

  content: "";

  position: absolute;

  width: 200%;

  height: 0%;

  left: 50%;

  top: 50%;

  background-color: rgba(255, 255, 255, 0.5);

  transform: translate(-50%, -50%) rotate(-45deg);

  z-index: 1;

  transition: all 0.6s ease;

}

.hover-shine:hover {

  background-color: var(--primary);

}

.hover-shine:hover::after {

  height: 350%;

  background-color: transparent;

}

.hover-shine:not(:hover)::after {

  transition: none;

}



.btn-direc {

  display: flex;

  gap: 20px;

}

.btn-direc .icon {

  display: flex;

  align-items: center;

  justify-content: center;

  flex-shrink: 0;

  border-radius: 50%;

  width: 60px;

  height: 60px;

  border: 1px solid var(--gray-5);

  color: var(--gray);

  -webkit-transition: all 0.3s ease-in-out;

  -moz-transition: all 0.3s ease-in-out;

  -ms-transition: all 0.3s ease-in-out;

  -o-transition: all 0.3s ease-in-out;

  transition: all 0.3s ease-in-out;

}

.btn-direc:hover {

  color: var(--primary);

}

.btn-direc:hover .icon {

  border-color: var(--primary);

  color: var(--primary);

}



.tf-btn-icon {

  display: flex;

  align-items: center;

  gap: 5px;

  font-weight: 600;

  font-size: 14px;

  line-height: 17px;

  color: var(--black);

}

.tf-btn-icon i {

  -webkit-transition: all 0.3s ease-in-out;

  -moz-transition: all 0.3s ease-in-out;

  -ms-transition: all 0.3s ease-in-out;

  -o-transition: all 0.3s ease-in-out;

  transition: all 0.3s ease-in-out;

  color: var(--black);

}

.tf-btn-icon svg path {

  -webkit-transition: all 0.3s ease-in-out;

  -moz-transition: all 0.3s ease-in-out;

  -ms-transition: all 0.3s ease-in-out;

  -o-transition: all 0.3s ease-in-out;

  transition: all 0.3s ease-in-out;

}

.tf-btn-icon.style-white {

  color: var(--white);

}

.tf-btn-icon.style-white i {

  color: var(--white);

}

.tf-btn-icon:hover {

  color: var(--primary);

}

.tf-btn-icon:hover i {

  animation: link-icon 0.3s linear;

  color: var(--primary);

}

.tf-btn-icon.type-2 {

  font-weight: 600;

  font-size: 20px;

  line-height: 25px;

}

.tf-btn-icon.type-2 i {

  font-size: 16px;

}

.tf-btn-icon.style-2 {

  gap: 4px;

  color: var(--secondary);

}

.tf-btn-icon.style-2 i {

  color: var(--primary);

}

.tf-btn-icon.style-2:hover {

  color: var(--primary);

}

.tf-btn-icon.style-2:hover svg path {

  stroke: var(--primary);

}

.tf-btn-icon.style-2.type-black {

  color: var(--black);

}

.tf-btn-icon.style-2.type-black:hover {

  color: var(--primary);

}



.hover-link-icon:hover .link-icon {

  animation: link-icon 0.3s linear;

}



@keyframes link-icon {

  0% {

    transform: translateX(0);

    opacity: 1;

  }

  49% {

    transform: translateX(10px);

    opacity: 0;

  }

  50% {

    transform: translateX(-10px);

    opacity: 0;

  }

  100% {

    transform: translateX(0);

    opacity: 1;

  }

}

.tf-btn-filter {

  display: flex;

  align-items: center;

  gap: 6px;

  padding: 5px 12px;

  border: 1px solid var(--gray-5);

  border-radius: 1000px;

  -webkit-transition: all 0.3s ease-in-out;

  -moz-transition: all 0.3s ease-in-out;

  -ms-transition: all 0.3s ease-in-out;

  -o-transition: all 0.3s ease-in-out;

  transition: all 0.3s ease-in-out;

}

.tf-btn-filter svg path {

  -webkit-transition: all 0.3s ease-in-out;

  -moz-transition: all 0.3s ease-in-out;

  -ms-transition: all 0.3s ease-in-out;

  -o-transition: all 0.3s ease-in-out;

  transition: all 0.3s ease-in-out;

}

.tf-btn-filter:hover {

  background-color: var(--primary);

  color: var(--white);

}

.tf-btn-filter:hover svg {

  fill: var(--white);

}

.tf-btn-filter:hover svg path {

  stroke: var(--white);

}



/*------------ form ---------------- */

form {

  position: relative;

  z-index: 30;

}

form textarea,

form input[type=text],

form input[type=password],

form input[type=datetime],

form input[type=datetime-local],

form input[type=date],

form input[type=month],

form input[type=time],

form input[type=week],

form input[type=number],

form input[type=email],

form input[type=url],

form input[type=search],

form input[type=tel],

form input[type=color] {

  outline: 0;

  -webkit-box-shadow: none;

  -moz-box-shadow: none;

  box-shadow: none;

  width: 100%;

  font-weight: 400;

  font-size: 14px;

  line-height: 20px;

  border-radius: 10px;

  color: var(--black);

  overflow: hidden;

  border: 1px solid var(--gray-4);

  padding: 12px 10px 12px 14px;

  -webkit-transition: all 0.3s ease-in-out;

  -moz-transition: all 0.3s ease-in-out;

  -ms-transition: all 0.3s ease-in-out;

  -o-transition: all 0.3s ease-in-out;

  transition: all 0.3s ease-in-out;

}

form textarea::placeholder,

form input[type=text]::placeholder,

form input[type=password]::placeholder,

form input[type=datetime]::placeholder,

form input[type=datetime-local]::placeholder,

form input[type=date]::placeholder,

form input[type=month]::placeholder,

form input[type=time]::placeholder,

form input[type=week]::placeholder,

form input[type=number]::placeholder,

form input[type=email]::placeholder,

form input[type=url]::placeholder,

form input[type=search]::placeholder,

form input[type=tel]::placeholder,

form input[type=color]::placeholder {

  font-weight: 400;

  font-size: 14px;

  line-height: 20px;

  color: var(--gray-2);

}

form textarea:focus,

form input[type=text]:focus,

form input[type=password]:focus,

form input[type=datetime]:focus,

form input[type=datetime-local]:focus,

form input[type=date]:focus,

form input[type=month]:focus,

form input[type=time]:focus,

form input[type=week]:focus,

form input[type=number]:focus,

form input[type=email]:focus,

form input[type=url]:focus,

form input[type=search]:focus,

form input[type=tel]:focus,

form input[type=color]:focus {

  border-color: var(--primary);

}

form textarea:hover,

form input[type=text]:hover,

form input[type=password]:hover,

form input[type=datetime]:hover,

form input[type=datetime-local]:hover,

form input[type=date]:hover,

form input[type=month]:hover,

form input[type=time]:hover,

form input[type=week]:hover,

form input[type=number]:hover,

form input[type=email]:hover,

form input[type=url]:hover,

form input[type=search]:hover,

form input[type=tel]:hover,

form input[type=color]:hover {

  border-color: var(--primary);

}

form textarea.type-fs-2,

form input[type=text].type-fs-2,

form input[type=password].type-fs-2,

form input[type=datetime].type-fs-2,

form input[type=datetime-local].type-fs-2,

form input[type=date].type-fs-2,

form input[type=month].type-fs-2,

form input[type=time].type-fs-2,

form input[type=week].type-fs-2,

form input[type=number].type-fs-2,

form input[type=email].type-fs-2,

form input[type=url].type-fs-2,

form input[type=search].type-fs-2,

form input[type=tel].type-fs-2,

form input[type=color].type-fs-2 {

  font-size: 13px;

  line-height: 25px;

}

form textarea.type-fs-2::placeholder,

form input[type=text].type-fs-2::placeholder,

form input[type=password].type-fs-2::placeholder,

form input[type=datetime].type-fs-2::placeholder,

form input[type=datetime-local].type-fs-2::placeholder,

form input[type=date].type-fs-2::placeholder,

form input[type=month].type-fs-2::placeholder,

form input[type=time].type-fs-2::placeholder,

form input[type=week].type-fs-2::placeholder,

form input[type=number].type-fs-2::placeholder,

form input[type=email].type-fs-2::placeholder,

form input[type=url].type-fs-2::placeholder,

form input[type=search].type-fs-2::placeholder,

form input[type=tel].type-fs-2::placeholder,

form input[type=color].type-fs-2::placeholder {

  font-size: 13px;

  line-height: 25px;

}

form textarea.def,

form input[type=text].def,

form input[type=password].def,

form input[type=datetime].def,

form input[type=datetime-local].def,

form input[type=date].def,

form input[type=month].def,

form input[type=time].def,

form input[type=week].def,

form input[type=number].def,

form input[type=email].def,

form input[type=url].def,

form input[type=search].def,

form input[type=tel].def,

form input[type=color].def {

  padding: 11px 10px 11px 14px;

}

form button,

form input[type=button],

form input[type=reset],

form input[type=submit] {

  background-color: transparent;

  overflow: hidden;

  padding: 0;

}

form textarea {

  height: 124px;

}

form .cols {

  display: flex;

  gap: 20px;

}

form .cols > * {

  width: 100%;

}

form .cols.gap-17 {

  gap: 17px;

}

form .tf-select {

  position: relative;

}

form .tf-select select {

  appearance: unset;

  border: unset;

  width: 100%;

  padding: 11px 24px;

  border-radius: 8px;

  font-weight: 400;

  font-size: 14px;

  line-height: 20px;

  border: 1px solid var(--gray-4);

  -webkit-transition: all 0.3s ease-in-out;

  -moz-transition: all 0.3s ease-in-out;

  -ms-transition: all 0.3s ease-in-out;

  -o-transition: all 0.3s ease-in-out;

  transition: all 0.3s ease-in-out;

  cursor: pointer;

}

form .tf-select select:hover, form .tf-select select:focus {

  border-color: var(--primary);

}

form .tf-select::after {

  position: absolute;

  content: "\e918";

  font-family: "icomoon";

  font-size: 14px;

  right: 15px;

  top: 50%;

  transform: translateY(-50%);

  color: var(--gray-2);

}

form.def {

  display: grid;

  gap: 20px;

}

form.def fieldset label {

  font-weight: 600;

  font-size: 14px;

  line-height: 22px;

  margin-bottom: 6px;

}

form.def textarea {

  height: 130px;

}



button {

  -webkit-transition: all 0.3s ease-in-out;

  -moz-transition: all 0.3s ease-in-out;

  -ms-transition: all 0.3s ease-in-out;

  -o-transition: all 0.3s ease-in-out;

  transition: all 0.3s ease-in-out;

  border: unset;

}



.form-search-product {

  border: 2px solid var(--primary);

  border-radius: 100px;

  display: flex;

  gap: 15px;

  align-items: center;

  max-width: 760px;

  width: 100%;

  padding: 0px 22px;

  position: relative;

}

.form-search-product fieldset {

  max-width: 500px;

  width: 100%;

}

.form-search-product fieldset input {

  border: unset;

  border-radius: unset;

  padding: 8px 0px;

  font-size: 13px;

  line-height: 25px;

}

.form-search-product fieldset input::placeholder {

  font-size: 13px;

  line-height: 25px;

}

.form-search-product .btn-submit-form {

  position: absolute;

  width: 35px;

  height: 35px;

  border-radius: 50%;

  background-color: var(--primary);

  border: unset;

  color: var(--white);

  right: 5px;

  display: flex;

  align-items: center;

  justify-content: center;

}

.form-search-product .btn-submit-form:hover {

  background-color: var(--gray);

}

.form-search-product.style-2 {

  border: 1px solid var(--gray-4);

  -webkit-transition: all 0.3s ease-in-out;

  -moz-transition: all 0.3s ease-in-out;

  -ms-transition: all 0.3s ease-in-out;

  -o-transition: all 0.3s ease-in-out;

  transition: all 0.3s ease-in-out;

  max-width: 716px;

}

.form-search-product.style-2:hover {

  border-color: var(--primary);

}

.form-search-product.style-2 input {

  padding: 9px 0px;

}

.form-search-product.style-3 {

  border: 1px solid var(--gray-4);

  -webkit-transition: all 0.3s ease-in-out;

  -moz-transition: all 0.3s ease-in-out;

  -ms-transition: all 0.3s ease-in-out;

  -o-transition: all 0.3s ease-in-out;

  transition: all 0.3s ease-in-out;

  max-width: 760px;

  width: 100%;

}

.form-search-product.style-3:hover {

  border-color: var(--primary);

}

.form-search-product.style-3 input {

  padding: 9px 0px;

}



.form-log {

  display: grid;

  gap: 18px;

}

.form-log .form-content {

  display: grid;

  gap: 16px;

}

.form-log fieldset label {

  margin-bottom: 6px;

}



.form-search {

  position: relative;

}

.form-search .button-submit {

  display: flex;

  align-items: center;

  position: absolute;

  right: 15px;

  top: 50%;

  transform: translateY(-50%);

}

.form-search .button-submit i {

  color: var(--black);

  font-size: 20px;

  -webkit-transition: all 0.3s ease-in-out;

  -moz-transition: all 0.3s ease-in-out;

  -ms-transition: all 0.3s ease-in-out;

  -o-transition: all 0.3s ease-in-out;

  transition: all 0.3s ease-in-out;

}

.form-search .button-submit:hover i {

  color: var(--primary);

}



.form-search-2 {

  position: relative;

  max-width: 331px;

  width: 100%;

}

.form-search-2 fieldset input {

  border-radius: unset;

  border-color: transparent;

  background-color: transparent;

  color: var(--white);

  padding-right: 80px;

}

.form-search-2 fieldset input::placeholder {

  color: var(--white);

}

.form-search-2 fieldset input:focus {

  border-color: var(--white);

}

.form-search-2 fieldset input:hover {

  border-color: var(--white);

}

.form-search-2 .box-btn {

  position: absolute;

  right: 5px;

  top: 50%;

  transform: translateY(-50%);

}

.form-search-2 .box-btn button {

  display: flex;

  align-items: center;

  gap: 6px;

  color: var(--white);

}

.form-search-2 .box-btn button:hover {

  color: var(--gray);

}



.form-search-3 fieldset input {

  padding: 13px 40px 13px 14px;

}

.form-search-3 .button-submit {

  display: flex;

  align-items: center;

  position: absolute;

  right: 15px;

  top: 50%;

  transform: translateY(-50%);

}

.form-search-3 .button-submit i {

  color: var(--black);

  font-size: 20px;

  -webkit-transition: all 0.3s ease-in-out;

  -moz-transition: all 0.3s ease-in-out;

  -ms-transition: all 0.3s ease-in-out;

  -o-transition: all 0.3s ease-in-out;

  transition: all 0.3s ease-in-out;

}

.form-search-3 .button-submit:hover i {

  color: var(--primary);

}



.form-newsletter .subscribe-content {

  display: flex;

  gap: 12px;

  align-items: center;

}

.form-newsletter .subscribe-content input {

  border-radius: 1000px;

  padding: 10px 22px;

  border: unset;

}

.form-newsletter .subscribe-button {

  border-radius: 1000px;

}



.form-add-comment {

  display: grid;

  gap: 16px;

}

.form-add-comment fieldset {

  display: flex;

  flex-direction: column;

  gap: 10px 20px;

}

.form-add-comment label {

  font-size: 14px;

  line-height: 20px;

}

.form-add-comment .btn-submit {

  margin: auto;

}



.checkbox-item-wrap {

  position: relative;

  display: flex;

  align-items: center;

}

.checkbox-item-wrap label {

  cursor: pointer;

  position: relative;

  height: 24px;

  width: 24px;

}

.checkbox-item-wrap label .checkbox-item {

  position: absolute;

  opacity: 0;

  left: 0;

  top: 50%;

  border-radius: 50%;

  transform: translate(0, -50%);

}

.checkbox-item-wrap label .checkbox-item:checked ~ .btn-checkbox:after {

  display: flex;

  justify-content: center;

  align-items: center;

}

.checkbox-item-wrap label .checkbox-item:checked ~ .btn-radio:after {

  display: block;

}

.checkbox-item-wrap .btn-checkbox {

  position: absolute;

  left: 0;

  top: 50%;

  transform: translateY(-50%);

  border-radius: 4px;

  width: 100%;

  height: 100%;

  background-color: var(--white);

  border: 1px solid var(--gray-4);

}

.checkbox-item-wrap .btn-checkbox:after {

  font-family: "icomoon";

  position: absolute;

  content: "\e934";

  color: var(--gray);

  border-radius: 4px;

  font-size: 20px;

  top: 0px;

  left: 0px;

  right: 0px;

  bottom: 0px;

  background-color: var(--white);

  display: none;

}



.form-checkout-contact {

  display: flex;

  flex-direction: column;

  gap: 6px;

}



.radio-item {

  display: flex;

  align-items: center;

  gap: 5px;

}

.radio-item .tf-check-rounded {

  width: 20px;

  height: 20px;

  border-radius: 6px;

  border: 1px solid var(--gray-4);

  appearance: unset;

  position: relative;

  display: flex;

  align-items: center;

  justify-content: center;

}

.radio-item .tf-check-rounded::after {

  content: "\e934";

  font-family: "icomoon";

  position: absolute;

  display: none;

}

.radio-item .tf-check-rounded:checked::after {

  display: block;

}



.tf-check {

  position: relative;

  background: transparent;

  cursor: pointer;

  outline: 0;

  -webkit-appearance: none;

  width: 16px;

  height: 16px;

  min-width: 16px;

  border: 1px solid var(--gray-4);

  display: inline-flex;

  justify-content: center;

  align-items: center;

  border-radius: 2px;

}

.tf-check:checked {

  border-color: var(--primary);

}

.tf-check:checked::before {

  opacity: 1;

  transform: scale(1);

}

.tf-check::before {

  width: 10px;

  height: 10px;

  font-weight: 500;

  content: "";

  position: absolute;

  background-color: var(--primary);

  border-radius: 1px;

  opacity: 0;

  transform: scale(0);

  -webkit-transition: all 0.3s ease-in-out;

  -moz-transition: all 0.3s ease-in-out;

  -ms-transition: all 0.3s ease-in-out;

  -o-transition: all 0.3s ease-in-out;

  transition: all 0.3s ease-in-out;

}



.form-filter-price {

  display: flex;

  gap: 12px;

  align-items: center;

}

.form-filter-price fieldset input {

  box-shadow: 2px 2px 2px 0px rgba(0, 0, 0, 0.1019607843) inset;

  border: 1px solid #E1E1E1;

  font-weight: 400;

  font-size: 14px;

  line-height: 20px;

  padding: 9px;

  border-radius: 3px;

}

.form-filter-price .cols {

  gap: 12px;

  align-items: center;

}

.form-filter-price .br-line {

  width: 6px;

  height: 2px;

  background-color: var(--gray-4);

}

.form-filter-price .btn-filter-price {

  border: 1px solid var(--gray-4);

  border-radius: 3px;

  padding: 6px 18px;

}



.tf-dropdown-sort .icon {

  font-size: 14px;

}

.tf-dropdown-sort .btn-select {

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 4px;

}

.tf-dropdown-sort .btn-select {

  text-wrap: nowrap;

  overflow: hidden;

  text-overflow: ellipsis;

}

.tf-dropdown-sort .dropdown-menu {

  border: 1px solid var(--gray-5);

  min-width: 204px;

  padding: 15px 5px;

  border-radius: 0;

  max-height: 68vh;

  isolation: isolate;

  overscroll-behavior-y: contain;

  overflow-y: auto;

}

.tf-dropdown-sort .dropdown-menu::-webkit-scrollbar {

  width: 5px;

}

.tf-dropdown-sort .dropdown-menu::-webkit-scrollbar-thumb {

  border-radius: 4px;

}

.tf-dropdown-sort .select-item {

  position: relative;

  font-size: 14px;

  font-weight: 500;

  color: var(--secondary);

  padding: 0 15px;

  line-height: 30px;

  width: 100%;

  -webkit-transition: all 0.3s ease-in-out;

  -moz-transition: all 0.3s ease-in-out;

  -ms-transition: all 0.3s ease-in-out;

  -o-transition: all 0.3s ease-in-out;

  transition: all 0.3s ease-in-out;

}

.tf-dropdown-sort .select-item.active {

  background-color: var(--gray-4);

  color: var(--black);

  padding: 0 15px !important;

  border: 0 !important;

}

.tf-dropdown-sort .select-item:hover {

  background-color: var(--gray-4);

  color: var(--black);

}

.tf-dropdown-sort:hover {

  border-color: var(--black);

}



.wd-form-address {

  padding: 32px;

  border: 1px solid var(--gray-4);

  border-radius: 16px;

}

.wd-form-address .form-content {

  display: grid;

  gap: 15px;

  margin-bottom: 20px;

}

.wd-form-address .form-content fieldset label {

  margin-bottom: 6px;

}

.wd-form-address .box-btn {

  display: flex;

  gap: 15px;

}



.tf-cart-checkbox {

  display: flex;

  align-items: center;

  gap: 10px;

}



.show-form-address,

.edit-form-address {

  display: none;

}



.edit-form-address {

  margin-top: 24px;

}



input[type=number]::-webkit-inner-spin-button,

input[type=number]::-webkit-outer-spin-button {

  -webkit-appearance: none !important;

  margin: 0;

}



.form-account-details .form-content {

  display: grid;

  gap: 20px;

}



/*------------ drop down ---------------- */

.select-category .dropdown_product_cat {

  display: none;

}

.select-category .close-option {

  cursor: pointer;

  -webkit-transition: all 0.3s ease-in-out;

  -moz-transition: all 0.3s ease-in-out;

  -ms-transition: all 0.3s ease-in-out;

  -o-transition: all 0.3s ease-in-out;

  transition: all 0.3s ease-in-out;

}

.select-category .close-option:hover {

  color: var(--primary);

}

.select-category .select-options {

  overflow-y: auto;

  display: none;

  position: absolute;

  top: -3px;

  right: -3px;

  left: -3px;

  z-index: 999;

  margin: 0;

  padding: 20px;

  list-style: none;

  border-radius: 8px;

  background: #FFF;

  box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.05);

  min-width: 200px;

}

.select-category .select-options li {

  display: inline-block;

  width: 32.88%;

  color: var(--gray);

  margin: 0;

  font-size: 13px;

  font-style: normal;

  font-weight: 500;

  padding: 8px 10px;

  position: relative;

  cursor: pointer;

  -webkit-transition: all 0.3s ease-in-out;

  -moz-transition: all 0.3s ease-in-out;

  -ms-transition: all 0.3s ease-in-out;

  -o-transition: all 0.3s ease-in-out;

  transition: all 0.3s ease-in-out;

  white-space: nowrap;

  overflow: hidden;

  text-overflow: ellipsis;

}

.select-category .select-options li:hover {

  color: var(--primary);

}

.select-category .header-select-option {

  display: flex;

  align-items: center;

  justify-content: space-between;

  font-size: 15px;

  font-weight: 500;

  padding-bottom: 20px;

  border-bottom: 1px solid #ededed;

  margin-bottom: 8px;

}



.tf-select-custom {

  display: block;

  cursor: pointer;

  width: 108px;

  white-space: nowrap;

  overflow: hidden;

  text-overflow: ellipsis;

  padding-right: 15px;

  font-size: 13px;

  line-height: 25px;

  color: var(--text-2);

  position: relative;

  font-weight: 600;

}

.tf-select-custom::after {

  content: "\e918";

  position: absolute;

  font-family: "icomoon";

  right: 0;

  top: 50%;

  transform: translateY(-50%);

}



.select-color {

  border: 1px solid var(--gray-4);

  padding: 11px 10px;

  border-radius: 8px;

  min-width: 216px;

  appearance: none;

  position: relative;

  font-weight: 400;

  font-size: 14px;

  line-height: 20px;

  cursor: pointer;

}



/*------------ carousel ---------------- */

.container-swiper {

  max-width: 542px;

  width: 100%;

  margin: auto;

}



.sw-dot-default {

  display: flex;

  gap: 10px;

  margin-top: 20px;

}

.sw-dot-default .swiper-pagination-bullet {

  width: 10px;

  height: 10px;

  display: flex;

  align-items: center;

  justify-content: center;

  -webkit-transition: all 0.3s ease-in-out;

  -moz-transition: all 0.3s ease-in-out;

  -ms-transition: all 0.3s ease-in-out;

  -o-transition: all 0.3s ease-in-out;

  transition: all 0.3s ease-in-out;

  background-color: var(--gray-4);

  position: relative;

  border-radius: 100px;

  opacity: 1;

  margin: 0 !important;

}

.sw-dot-default .swiper-pagination-bullet-active {

  width: 24px;

  background-color: var(--primary);

}



.swiper-pagination-lock {

  margin-top: 0px;

}



.box-btn-slide {

  display: flex;

  align-items: center;

  gap: 7px;

}



.nav-swiper {

  position: relative;

  color: var(--gray);

  width: unset;

  height: unset;

  top: unset;

  right: unset;

  bottom: unset;

  left: unset;

  margin-top: unset;

  -webkit-transition: all 0.3s ease-in-out;

  -moz-transition: all 0.3s ease-in-out;

  -ms-transition: all 0.3s ease-in-out;

  -o-transition: all 0.3s ease-in-out;

  transition: all 0.3s ease-in-out;

}

.nav-swiper:hover {

  color: var(--primary);

}

.nav-swiper.swiper-button-disabled {

  color: var(--gray-2);

}

.nav-swiper::after {

  font-size: 12px;

  content: none;

}



.box-btn-slide-item.hover-sw {

  position: relative;

}

.box-btn-slide-item.hover-sw svg {

  -webkit-transition: all 0.3s ease-in-out;

  -moz-transition: all 0.3s ease-in-out;

  -ms-transition: all 0.3s ease-in-out;

  -o-transition: all 0.3s ease-in-out;

  transition: all 0.3s ease-in-out;

}

.box-btn-slide-item.hover-sw svg rect {

  -webkit-transition: all 0.3s ease-in-out;

  -moz-transition: all 0.3s ease-in-out;

  -ms-transition: all 0.3s ease-in-out;

  -o-transition: all 0.3s ease-in-out;

  transition: all 0.3s ease-in-out;

}

.box-btn-slide-item.hover-sw .nav-swiper {

  max-width: 50px;

  width: 100%;

  position: absolute;

  top: 50%;

  transform: translateY(-50%);

  display: none;

}

.box-btn-slide-item.hover-sw .nav-swiper:hover svg rect {

  fill: var(--primary);

}

.box-btn-slide-item.hover-sw .swiper-button-prev {

  right: 100%;

}

.box-btn-slide-item.hover-sw .swiper-button-next {

  left: 100%;

}



.box-btn-slide-2 {

  position: relative;

}

.box-btn-slide-2.sw-nav-effect .nav-swiper {

  width: 45px;

  height: 45px;

  display: flex;

  align-items: center;

  justify-content: center;

  box-shadow: 0px 4px 16px 0px rgba(0, 0, 0, 0.0784313725);

  background-color: var(--white);

  border-radius: 50%;

  position: absolute;

  top: 50%;

  transform: translateY(-50%);

}

.box-btn-slide-2.sw-nav-effect .nav-swiper i {

  font-size: 18px;

}

.box-btn-slide-2.sw-nav-effect .nav-swiper.nav-prev-products-2 {

  left: 15px;

}

.box-btn-slide-2.sw-nav-effect .nav-swiper.nav-next-products-2 {

  right: 15px;

}



.nav-swiper-2 {

  width: 40px;

  height: 40px;

  border-radius: 50%;

  background-color: var(--white);

  color: var(--black);

  position: absolute;

  top: 50%;

  border: 1px solid var(--gray-4);

  -webkit-transition: all 0.3s ease-in-out;

  -moz-transition: all 0.3s ease-in-out;

  -ms-transition: all 0.3s ease-in-out;

  -o-transition: all 0.3s ease-in-out;

  transition: all 0.3s ease-in-out;

}

.nav-swiper-2::after {

  font-size: 15px;

}

.nav-swiper-2.swiper-button-prev {

  left: 5px;

}

.nav-swiper-2.swiper-button-next {

  right: 5px;

}

.nav-swiper-2:hover {

  background-color: var(--primary);

  border-color: var(--primary);

  color: var(--white);

}



/*------------ pop up ---------------- */

.modal::-webkit-scrollbar {

  width: 3px;

}

.modal::-webkit-scrollbar-thumb {

  background-color: var(--secondary);

  border-radius: 5px;

}



.offcanvas-backdrop {

  z-index: 2000;

  background-color: rgba(0, 0, 0, 0.6);

}



.offcanvas {

  z-index: 2001;

}



.modal-log .modal-log-wrap {

  padding: 30px;

  display: grid;

  gap: 30px;

}

.modal-log .modal-content .icon-close {

  position: absolute;

  top: 15px;

  right: 15px;

  cursor: pointer;

  -webkit-transition: all 0.3s ease-in-out;

  -moz-transition: all 0.3s ease-in-out;

  -ms-transition: all 0.3s ease-in-out;

  -o-transition: all 0.3s ease-in-out;

  transition: all 0.3s ease-in-out;

}

.modal-log .modal-content .icon-close:hover {

  color: var(--primary);

}

.modal-log .orther-log {

  position: relative;

}

.modal-log .orther-log .br-line {

  position: absolute;

  left: 0;

  right: 0;

  top: 50%;

  transform: translateY(-50%);

}

.modal-log .orther-log p {

  display: inline-block;

  padding: 0px 10px;

  background-color: var(--white);

  position: relative;

  z-index: 5;

}

.modal-log .list-log {

  display: flex;

  gap: 10px;

}

.modal-log .list-log > * {

  width: 100%;

}



.canvas-sidebar .canvas-header {

  display: flex;

  align-items: center;

  justify-content: space-between;

  padding: 15px;

  padding-bottom: 10px;

  position: relative;

  text-transform: capitalize;

  font-size: 20px;

  line-height: 30px;

  font-weight: 500;

  color: var(--dark);

}

.canvas-sidebar .canvas-header .icon-close-popup {

  font-size: 12px;

  height: 32px;

  width: 32px;

  display: flex;

  justify-content: end;

  align-items: center;

  cursor: pointer;

}

.canvas-sidebar .canvas-header::after {

  position: absolute;

  content: "";

  bottom: 0;

  left: 15px;

  right: 15px;

  height: 1px;

  background-color: var(--line);

}

.canvas-sidebar .canvas-body {

  overscroll-behavior-y: contain;

  overflow-y: auto;

  height: 100vh;

  padding: 15px 20px;

  background-color: var(--white);

  max-width: unset;

}

.canvas-sidebar .canvas-body::-webkit-scrollbar {

  width: 3px;

}

.canvas-sidebar .canvas-body::-webkit-scrollbar-thumb {

  background-color: var(--primary);

  border-radius: 5px;

  cursor: grab;

}



.gridLayout-wrapper {

  position: relative;

  min-height: 300px;

}

.gridLayout-wrapper.loading::after {

  content: "";

  position: absolute;

  top: 10%;

  left: 50%;

  width: 40px;

  height: 40px;

  border: 3px solid rgba(0, 0, 0, 0.2);

  border-top-color: #000;

  border-radius: 50%;

  animation: spin 0.3s linear infinite;

  transform: translate(-50%, -50%);

  z-index: 10000;

}



.canvas-filter-product {

  background-color: var(--white);

}

.canvas-filter-product .canvas-header {

  display: flex;

  align-items: center;

  justify-content: space-between;

  padding: 15px;

  padding-bottom: 10px;

  position: relative;

  text-transform: capitalize;

  font-size: 20px;

  line-height: 30px;

  font-weight: 500;

  box-shadow: 0px -5px 18px 5px rgba(64, 72, 87, 0.1490196078);

}

.canvas-filter-product .canvas-wrapper {

  padding: 0;

  isolation: isolate;

  height: 100%;

  width: 100%;

  max-height: none;

  display: grid;

  grid-auto-rows: auto minmax(0, 1fr) auto;

  align-content: start;

}

.canvas-filter-product .canvas-body {

  height: unset;

}

.canvas-filter-product .canvas-bottom {

  box-shadow: 0px 5px 18px 5px rgba(64, 72, 87, 0.1490196078);

  padding: 15px;

  background-color: var(--white);

}



.popup-style {

  z-index: 3000;

  border: 0;

}

.popup-style .popup-wrapper {

  padding: 0;

  isolation: isolate;

  height: 100%;

  width: 100%;

  max-height: none;

  display: grid;

  grid-auto-rows: auto minmax(0, 1fr) auto;

  align-content: start;

}

.popup-style .icon-close-popup {

  cursor: pointer;

}

.popup-style .popup-header {

  display: flex;

  align-items: center;

  justify-content: space-between;

  padding-top: 30px;

  padding-bottom: 20px;

  margin: 0px 20px;

  border-bottom: 1px solid var(--gray-4);

}

.popup-style .popup-body {

  overscroll-behavior-y: contain;

  overflow-y: auto;

  padding: 20px;

}

.popup-style .popup-body::-webkit-scrollbar {

  width: 3px;

}

.popup-style .popup-body::-webkit-scrollbar-thumb {

  background-color: var(--primary);

  border-radius: 5px;

  cursor: grab;

}

.popup-style .popup-footer {

  padding: 20px 20px 30px 20px;

}



.popup-shopping-cart .popup-footer {

  box-shadow: 0px 5px 13px 5px rgba(64, 72, 87, 0.1490196078);

  display: grid;

  gap: 15px;

}

.popup-shopping-cart .cart-total {

  display: flex;

  align-items: center;

  justify-content: space-between;

}

.popup-shopping-cart .box-btn {

  display: flex;

  gap: 10px;

  width: 100%;

}

.popup-shopping-cart .box-btn > * {

  width: 100%;

}

.popup-shopping-cart .card-product {

  flex-direction: row !important;

}

.popup-shopping-cart .card-product .card-product-wrapper {

  max-width: 122px !important;

  flex-shrink: 0;

}



.minicart-empty {

  padding: 15px;

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;

  gap: 30px;

}



.modal-def .icon-close-popup {

  position: absolute;

  right: 0px;

  top: 0px;

  cursor: pointer;

  z-index: 5;

  padding: 10px;

}

.modal-def .modal-content {

  border-radius: 8px;

  overflow: hidden;

}



.modal-quick-view .modal-dialog {

  max-width: 1200px;

  padding-left: 15px;

  padding-right: 15px;

  margin-left: auto;

  margin-right: auto;

}

.modal-quick-view .modal-content {

  display: flex;

}

.modal-quick-view .quickview-image {

  padding: 15px;

}

.modal-quick-view .quickview-info-wrap {

  flex: 0 0 auto;

  max-width: 100%;

  flex-grow: 1;

  position: relative;

  margin: 0;

}

.modal-quick-view .quickview-info-inner {

  display: flex;

  flex-direction: column;

  gap: 20px;

  padding: 15px;

}

.modal-quick-view .quickview-info-inner::-webkit-scrollbar {

  width: 3px;

}

.modal-quick-view .quickview-info-inner::-webkit-scrollbar-thumb {

  background-color: var(--primary);

  border-radius: 5px;

}

.modal-quick-view .box-quantity-wrap {

  display: flex;

  gap: 20px;

  align-items: center;

}

.modal-quick-view .info-short-decs .title-decs {

  margin-bottom: 10px;

}

.modal-quick-view .info-short-decs > ul li {

  position: relative;

  padding-left: 13px;

}

.modal-quick-view .info-short-decs > ul li::after {

  content: "";

  left: 0;

  top: 9px;

  position: absolute;

  width: 5px;

  height: 5px;

  border-radius: 50%;

  background-color: var(--black);

}

.modal-quick-view .info-short-decs > ul li:not(:last-child) {

  margin-bottom: 5px;

}



.tf-single-slide .item {

  aspect-ratio: 450/560;

}

.tf-single-slide .item img {

  width: 100%;

  height: 100%;

  object-fit: cover;

}



.offcanvas-compare {

  z-index: 2001;

  height: auto !important;

  overflow: auto;

}

.offcanvas-compare .icon-close-popup {

  position: absolute;

  top: 24px;

  right: 24px;

  font-size: 16px;

  width: 40px;

  height: 40px;

  display: flex;

  align-items: center;

  justify-content: center;

  background-color: #f7f7f7;

  border-radius: 50%;

  cursor: pointer;

}

.offcanvas-compare .tf-compare-list {

  display: flex;

  align-items: center;

  gap: 40px;

  padding: 24px 0px;

}

.offcanvas-compare .tf-compare-wrap {

  display: flex;

  align-items: center;

  flex-grow: 1;

  overflow: auto hidden;

  gap: 48px;

  padding: 24px 0;

  margin: -24px 0;

  padding-right: 20px;

  margin-right: -20px;

}

.offcanvas-compare .tf-compare-wrap::-webkit-scrollbar {

  height: 3px;

}

.offcanvas-compare .tf-compare-wrap::-webkit-scrollbar-thumb {

  background-color: var(--primary);

  border-radius: 3px;

}

.offcanvas-compare .tf-compare-buttons {

  display: flex;

  align-items: center;

  justify-content: end;

  width: 220px;

  flex-shrink: 0;

}

.offcanvas-compare .tf-compare-item {

  width: 263px;

  flex-shrink: 0;

  position: relative;

  padding: 11px;

  border-radius: 12px;

  border: 1px solid var(--gray-4);

  display: flex;

  align-items: center;

  gap: 16px;

}

.offcanvas-compare .tf-compare-item .image {

  aspect-ratio: 92/123;

  flex-shrink: 0;

  border-radius: 8px;

  overflow: hidden;

  max-width: 92px;

  width: 100%;

}

.offcanvas-compare .tf-compare-item .image img {

  height: 100%;

  width: 100%;

  object-fit: cover;

}

.offcanvas-compare .tf-compare-item .icon-close {

  position: absolute;

  top: 0;

  right: 0;

  transform: translate(50%, -50%);

  display: flex;

  align-items: center;

  justify-content: center;

  width: 32px;

  height: 32px;

  background-color: var(--primary);

  border-radius: 50%;

  font-size: 12px;

  color: var(--white);

  z-index: 5;

  cursor: pointer;

  -webkit-transition: all 0.3s ease-in-out;

  -moz-transition: all 0.3s ease-in-out;

  -ms-transition: all 0.3s ease-in-out;

  -o-transition: all 0.3s ease-in-out;

  transition: all 0.3s ease-in-out;

}

.offcanvas-compare .tf-compare-item .icon-close:hover {

  background-color: var(--gray-2);

}

.offcanvas-compare .tf-compare-item > .btns-repeat {

  position: absolute;

  top: 50%;

  right: -32px;

  transform: translateY(-50%);

  display: flex;

  cursor: pointer;

}

.offcanvas-compare .tf-compare-item .content {

  display: grid;

  gap: 15px;

}

.offcanvas-compare .tf-compare-item:last-child > .btns-repeat {

  display: none;

}

.offcanvas-compare .tf-compare-btn {

  display: grid;

  gap: 15px;

}

.offcanvas-compare .tf-compapre-button-clear-all {

  cursor: pointer;

}



.modal-newleter .modal-dialog {

  transform: unset !important;

}

.modal-newleter .modal-content {

  padding: 20px;

  display: grid;

  gap: 20px;

}

.modal-newleter .heading {

  display: grid;

  gap: 15px;

}

.modal-newleter .form-sub {

  display: grid;

  gap: 15px;

}



.modalDemo .modal-dialog {

  max-width: 1540px;

  margin-top: 8px;

  margin-bottom: 8px;

  height: calc(100vh - 16px);

}

.modalDemo .modal-content {

  padding: 0 50px 40px;

  background-color: var(--white);

  width: 100%;

  border-radius: 20px;

  margin: 0 15px;

  max-height: calc(100vh - 60px);

  border: 0;

  cursor: default;

  overflow: hidden;

}

.modalDemo .demo-title {

  margin-top: 50px;

  margin-bottom: 44px;

}

.modalDemo .icon-close-popup {

  position: absolute;

  top: 18px;

  right: 18px;

}

.modalDemo .demo-menu-list {

  padding: 0 32px;

  overscroll-behavior-y: contain;

  overflow-y: auto;

  height: max-content;

}

.modalDemo .row-demo {

  grid-template-columns: repeat(5, 1fr);

}



/*------------ box icon ---------------- */

.box-icon {

  display: flex;

  align-items: center;

  justify-content: center;

  -webkit-transition: all 0.3s ease-in-out;

  -moz-transition: all 0.3s ease-in-out;

  -ms-transition: all 0.3s ease-in-out;

  -o-transition: all 0.3s ease-in-out;

  transition: all 0.3s ease-in-out;

  cursor: pointer;

}



.tf-icon-box {

  border-radius: 8px;

  border: 1px solid var(--gray-5);

  padding: 19px 20px;

  display: flex;

  gap: 20px;

}

.tf-icon-box .icon-box {

  transition-duration: 0.5s;

}

.tf-icon-box .icon-box i {

  font-size: 30px;

}

.tf-icon-box .content {

  display: grid;

  gap: 3px;

}

.tf-icon-box:hover .icon-box {

  transform: scale(1.2);

  transition-timing-function: cubic-bezier(0.47, 2.02, 0.31, -0.36);

}



/*------------ hover ---------------- */

.hover-img .img-style {

  overflow: hidden;

}

.hover-img .img-style > img {

  width: 100%;

  height: 100%;

  object-fit: cover;

  -webkit-transition: opacity 0.5s ease, transform 2s cubic-bezier(0, 0, 0.44, 1.18);

  transition: opacity 0.5s ease, transform 2s cubic-bezier(0, 0, 0.44, 1.18);

}

.hover-img .img-style-2 {

  overflow: hidden;

}

.hover-img .img-style-2 > img {

  width: 100%;

  height: 100%;

  object-fit: cover;

  transition: transform 1.5s cubic-bezier(0, 0, 0.44, 1.18);

}

.hover-img:hover .img-style > img {

  -webkit-transform: scale(1.06);

  transform: scale(1.06);

}

.hover-img:hover .img-style-2 > img {

  -webkit-transform: scale(1.1);

  transform: scale(1.1);

}

.hover-img .img-style2 {

  overflow: hidden;

  border-radius: 10px;

}

.hover-img .img-style2 .img-hv {

  width: 100%;

  object-fit: cover;

  -webkit-transition: all 1s cubic-bezier(0.3, 1, 0.35, 1) 0s;

  transition: all 1s cubic-bezier(0.3, 1, 0.35, 1) 0s;

  transition: transform 500ms ease;

}



.shine-item {

  position: relative;

  overflow: hidden;

}

.shine-item.hv-shine-2::after {

  transform: translate(-50%, -50%);

  transition: all 1s ease;

}

.shine-item::after {

  content: "";

  position: absolute;

  width: 200%;

  height: 0%;

  left: 50%;

  top: 50%;

  background-color: rgba(255, 255, 255, 0.5);

  transform: translate(-50%, -50%) rotate(-45deg);

  z-index: 1;

  transition: all 0.6s ease;

}

.shine-item:hover::after {

  height: 350%;

  background-color: transparent;

}

.shine-item:not(:hover)::after {

  transition: none;

}



.hover-tooltip {

  position: relative;

}

.hover-tooltip .tooltip {

  pointer-events: none;

  position: absolute;

  white-space: nowrap;

  padding: 0px 8.5px;

  height: 25px;

  border-radius: 2px;

  bottom: calc(100% + 8px);

  transform: translateY(8px);

  opacity: 0;

  visibility: hidden;

  color: var(--white);

  max-width: 250px;

  width: max-content;

  background-color: var(--black);

  transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s cubic-bezier(0.71, 1.7, 0.77, 1.24), -webkit-transform 0.3s cubic-bezier(0.71, 1.7, 0.77, 1.24);

  z-index: 100;

  font-size: 12px;

  line-height: 22px;

}

.hover-tooltip .tooltip::before {

  content: "";

  left: 50%;

  transform: translateX(-50%) rotate(45deg);

  top: 20px;

  position: absolute;

  background: var(--black);

  width: 8px;

  height: 8px;

  z-index: -1;

}

.hover-tooltip:hover .tooltip {

  opacity: 1;

  visibility: visible;

  transform: none;

  transition-delay: 0.1s;

}

.hover-tooltip.tooltip-bot .tooltip {

  top: calc(100% + 8px);

  bottom: auto;

}

.hover-tooltip.tooltip-bot .tooltip::before {

  top: -2px;

}

.hover-tooltip.tooltip-left .tooltip {

  right: 100%;

  bottom: auto;

  transform: translateX(0px);

}

.hover-tooltip.tooltip-left .tooltip::before {

  top: 50%;

  left: auto;

  transform: translateY(-50%) rotate(45deg);

  right: -4px;

}

.hover-tooltip.tooltip-left:hover .tooltip {

  transform: translateX(-8px);

}

.hover-tooltip.tooltip-right .tooltip {

  left: 100%;

  bottom: auto;

  transform: translateX(0px);

}

.hover-tooltip.tooltip-right .tooltip::before {

  top: 50%;

  right: auto;

  transform: translateY(-50%) rotate(45deg);

  left: -4px;

}

.hover-tooltip.tooltip-right:hover .tooltip {

  transform: translateX(8px);

}



.hover-overlay {

  position: relative;

}

.hover-overlay::before {

  position: absolute;

  z-index: 2;

  content: "";

  width: 100%;

  height: 100%;

  background-color: rgba(0, 0, 0, 0.1);

  top: 0;

  left: 0;

  transition: 0.4s ease 0.1s;

  opacity: 0;

  visibility: hidden;

}

.hover-overlay:hover::before {

  opacity: 1;

  visibility: visible;

}



.hover-overlay-2 .img-hv-overlay {

  position: relative;

}

.hover-overlay-2 .img-hv-overlay::before {

  content: "";

  position: absolute;

  width: 50%;

  left: 0;

  top: 0;

  height: 0%;

  background-color: var(--black);

  opacity: 0.1;

  z-index: 2;

  -webkit-transition: all 0.3s ease-in-out;

  -moz-transition: all 0.3s ease-in-out;

  -ms-transition: all 0.3s ease-in-out;

  -o-transition: all 0.3s ease-in-out;

  transition: all 0.3s ease-in-out;

}

.hover-overlay-2 .img-hv-overlay::after {

  content: "";

  position: absolute;

  width: 50%;

  right: 0;

  bottom: 0;

  height: 0%;

  background-color: var(--black);

  opacity: 0.1;

  z-index: 2;

  -webkit-transition: all 0.3s ease-in-out;

  -moz-transition: all 0.3s ease-in-out;

  -ms-transition: all 0.3s ease-in-out;

  -o-transition: all 0.3s ease-in-out;

  transition: all 0.3s ease-in-out;

}

.hover-overlay-2:hover .img-hv-overlay::before {

  height: 100%;

}

.hover-overlay-2:hover .img-hv-overlay::after {

  height: 100%;

  transition-delay: 0.2s;

}



/*------------ product ---------------- */

.card-product {

  display: flex;

  flex-direction: column;

  gap: 20px;

}

.card-product .card-product-wrapper {

  aspect-ratio: 1;

  position: relative;

  border-radius: 3px;

  overflow: hidden;

  z-index: 20;

}

.card-product .card-product-wrapper img {

  display: block;

  height: 100%;

  width: 100%;

  object-fit: cover;

  object-position: center;

  transition-duration: 700ms;

}

.card-product .card-product-wrapper:hover .product-img .img-product {

  opacity: 0;

}

.card-product .card-product-wrapper:hover .product-img .img-hover {

  display: block;

  z-index: 1;

  opacity: 1;

  -webkit-transform: scale(1.05);

  transform: scale(1.05);

}

.card-product .card-product-wrapper.img-small {

  max-width: 74px !important;

}

.card-product .product-img {

  display: flex;

  width: 100%;

  height: 100%;

  position: relative;

  align-items: stretch;

}

.card-product .product-img .img-hover {

  position: absolute;

  inset: 0;

  opacity: 0;

}

.card-product .list-product-btn {

  position: absolute;

  display: flex;

  align-items: center;

  justify-content: center;

  flex-direction: column;

  gap: 8px;

  top: 8px;

  right: 8px;

  z-index: 6;

}

.card-product .name-product {

  -webkit-line-clamp: 2;

  -webkit-box-orient: vertical;

  display: -webkit-box;

  overflow: hidden;

}

.card-product .box-icon {

  width: 35px;

  height: 35px;

  border-radius: 3px;

  background-color: var(--white);

  color: var(--black);

  position: relative;

  border-radius: 50%;

  box-shadow: 0px 4px 16px 0px rgba(0, 0, 0, 0.0784313725);

}

.card-product .box-icon .icon {

  font-size: 14px;

}

.card-product .box-icon svg {

  width: 18px;

}

.card-product .box-icon svg path {

  -webkit-transition: all 0.4s ease-in-out;

  -moz-transition: all 0.4s ease-in-out;

  -ms-transition: all 0.4s ease-in-out;

  -o-transition: all 0.4s ease-in-out;

  transition: all 0.4s ease-in-out;

}

.card-product .box-icon:hover {

  background-color: var(--black) !important;

  color: var(--white);

  border-color: var(--black);

}

.card-product .card-product-info {

  display: grid;

  gap: 20px;

}

.card-product .card-product-info .box-title {

  display: grid;

  gap: 10px;

}

.card-product .card-product-info .box-infor-detail {

  display: grid;

  gap: 10px;

}

.card-product .card-product-info .star-review {

  align-items: center;

  gap: 10px;

}

.card-product .product-progress-sale {

  display: grid;

  gap: 4px;

}

.card-product .group-btn {

  position: relative;

  display: grid;

  gap: 10px;

}

.card-product .group-btn .price-wrap {

  -webkit-transition: all 0.3s ease-in-out;

  -moz-transition: all 0.3s ease-in-out;

  -ms-transition: all 0.3s ease-in-out;

  -o-transition: all 0.3s ease-in-out;

  transition: all 0.3s ease-in-out;

  opacity: 1;

  visibility: visible;

  transform: translateY(0%);

}

.card-product .group-btn .list-product-btn {

  position: relative;

  z-index: 21;

  top: 0;

  left: 0;

  right: 0;

  bottom: 0;

  justify-content: flex-start;

  gap: 10px;

  transform: unset;

  -webkit-transition: all 0.3s ease-in-out;

  -moz-transition: all 0.3s ease-in-out;

  -ms-transition: all 0.3s ease-in-out;

  -o-transition: all 0.3s ease-in-out;

  transition: all 0.3s ease-in-out;

}

.card-product .group-btn .list-product-btn li {

  transform: unset;

  opacity: 1;

  visibility: visible;

}

.card-product.style-small {

  gap: 14px;

}

.card-product.style-small .card-product-info .box-title {

  gap: 8px;

}

.card-product.style-img-border .card-product-wrapper {

  border: 1px solid var(--gray-5);

  padding: 15px;

}

.card-product.style-border {

  border-radius: 8px;

  border: 1px solid var(--gray-5);

  padding: 15px;

}

.card-product.style-row .card-product-info {

  max-width: 621px;

  width: 100%;

}

.card-product.style-row .card-product-btn {

  display: flex;

  justify-content: center;

  gap: 14px;

  flex-direction: column;

  width: 100%;

  position: relative;

}

.card-product.style-row .card-product-btn .box-btn {

  display: flex;

  gap: 20px;

  align-items: center;

}

.card-product.style-row.row-small {

  align-items: center;

}

.card-product.style-row.row-small .card-product-info {

  max-width: 735px;

}

.card-product.style-row.row-small-2 {

  gap: 12px;

  flex-direction: row;

}

.card-product.style-row.row-small-2 .card-product-wrapper {

  max-width: 122px;

}

.card-product.style-row.row-small-2 .price-wrap {

  flex-direction: column;

  gap: 2px 10px;

  margin-top: 0px;

  align-items: start;

  max-width: max-content;

}

.card-product.style-row.type-row-3 .card-product-wrapper {

  max-width: unset;

}

.card-product.style-3 {

  background-color: var(--white);

  padding: 10px;

  border-radius: 8px;

  gap: 16px !important;

}

.card-product.style-3 .price-wrap {

  flex-direction: column;

  gap: 2px 10px;

  margin-top: 0px;

  align-items: start;

  max-width: max-content;

}

.card-product.style-3 .card-product-wrapper {

  max-width: 208px;

}

.card-product.style-4 {

  background-color: var(--white);

  padding: 16px;

}



.list-product-btn.style-2 {

  top: -10px !important;

}

.list-product-btn.style-2 .box-icon {

  width: 30px;

  height: 30px;

}

.list-product-btn.style-2 .box-icon .icon {

  font-size: 11px;

}

.list-product-btn.style-2 .tooltip {

  padding: 0px 6px;

  height: 20px;

  bottom: calc(100% + 6px);

  font-size: 11px;

  line-height: 22px;

}

.list-product-btn.style-2 .tooltip::before {

  top: 16px;

}



.countdown-box .countdown__timer {

  display: flex;

  justify-content: center;

  gap: 12px;

}

.countdown-box .countdown__item {

  display: flex;

  flex-direction: column;

  align-items: center;

  gap: 2px;

}

.countdown-box .countdown__value {

  font-weight: 500;

  font-size: 14px;

  line-height: 19px;

  display: flex;

  align-items: center;

  justify-content: center;

  width: 40px;

  height: 40px;

  background-color: var(--gray-5);

  border-radius: 50%;

}

.countdown-box .countdown__label {

  font-weight: 400;

  font-size: 12px;

  line-height: 22px;

}



.countdown-box-2 {

  display: flex;

  align-items: center;

  justify-content: center;

}

.countdown-box-2 .js-countdown {

  background-color: var(--white);

  width: max-content;

  padding: 10px 15px;

  border-radius: 8px;

}

.countdown-box-2 .countdown__timer {

  display: flex;

  justify-content: center;

  gap: 21px;

}

.countdown-box-2 .countdown__item {

  display: flex;

  flex-direction: column;

  align-items: center;

  min-width: 50px;

}

.countdown-box-2 .countdown__item:not(:last-child) {

  position: relative;

}

.countdown-box-2 .countdown__item:not(:last-child)::after {

  content: "";

  position: absolute;

  height: 40px;

  width: 1px;

  background-color: var(--gray-5);

  right: -10px;

  top: 50%;

  transform: translateY(-50%);

}

.countdown-box-2 .countdown__value {

  font-size: 40px;

  line-height: 40px;

}

.countdown-box-2 .countdown__label {

  font-weight: 600;

  font-size: 14px;

  line-height: 22px;

}



.box-sale-tag {

  font-weight: 600;

  font-size: 13px;

  line-height: 23px;

  padding: 0px 5.5px;

  color: var(--white);

  display: inline-flex;

  border-radius: 3px;

  background-color: var(--primary);

  margin-left: 5px;

  position: relative;

}

.box-sale-tag::before {

  content: "";

  position: absolute;

  border-radius: 2px;

  left: -3px;

  top: 50%;

  transform: translateY(-50%) rotate(45deg);

  width: 8px;

  height: 8px;

  background-color: var(--primary);

  z-index: 0;

}



.list-color-product {

  display: flex;

  flex-wrap: wrap;

  gap: 3px;

  align-items: center;

}

.list-color-product .list-color-item {

  width: 20px;

  height: 20px;

  border: 1px solid transparent;

  background-color: transparent;

  -webkit-transition: all 0.4s ease-in-out;

  -moz-transition: all 0.4s ease-in-out;

  -ms-transition: all 0.4s ease-in-out;

  -o-transition: all 0.4s ease-in-out;

  transition: all 0.4s ease-in-out;

  border-radius: 50%;

  cursor: pointer;

  display: flex;

  align-items: center;

  justify-content: center;

  position: relative;

}

.list-color-product .list-color-item .swatch-value {

  width: 100%;

  height: 100%;

  border: 2px solid var(--white);

  display: inline-block;

  border-radius: 50%;

  -webkit-transition: all 0.3s ease-in-out;

  -moz-transition: all 0.3s ease-in-out;

  -ms-transition: all 0.3s ease-in-out;

  -o-transition: all 0.3s ease-in-out;

  transition: all 0.3s ease-in-out;

}

.list-color-product .list-color-item img {

  visibility: hidden;

  width: 18px;

  height: 18px;

  position: absolute;

}

.list-color-product .list-color-item.line {

  border: 1px solid transparent !important;

}

.list-color-product .list-color-item.line .swatch-value {

  position: relative;

}

.list-color-product .list-color-item.line .swatch-value::before {

  content: "";

  position: absolute;

  width: 100%;

  height: 100%;

  border: 1px solid var(--rgba-black-3);

  top: 0;

  left: 0;

  z-index: 1;

  border-radius: 50%;

  -webkit-transition: all 0.3s ease-in-out;

  -moz-transition: all 0.3s ease-in-out;

  -ms-transition: all 0.3s ease-in-out;

  -o-transition: all 0.3s ease-in-out;

  transition: all 0.3s ease-in-out;

}

.list-color-product .list-color-item.active, .list-color-product .list-color-item:hover {

  border-color: var(--black) !important;

}

.list-color-product .list-color-item.active .swatch-value, .list-color-product .list-color-item:hover .swatch-value {

  border-color: var(--white);

}

.list-color-product .list-color-item.active .swatch-value::before, .list-color-product .list-color-item:hover .swatch-value::before {

  border-color: var(--line);

}



.list-computer-memory {

  display: flex;

  gap: 6px;

}

.list-computer-memory li {

  padding: 3px 7px 3px 8px;

  border-radius: 3px;

  border: 1px solid var(--gray-4);

}



.list-infor-fearture {

  display: grid;

  gap: 2px;

}

.list-infor-fearture li {

  display: flex;

  align-items: center;

}

.list-infor-fearture .name-feature {

  flex-grow: 2;

  max-width: 119px;

  width: 100%;

}

.list-infor-fearture .property {

  flex-grow: 1;

  width: 100%;

}



.card-usually {

  display: flex;

  flex-direction: column;

  gap: 20px;

}

.card-usually .content {

  display: flex;

  align-items: start;

  gap: 12px;

}

.card-usually .box-name {

  display: grid;

  gap: 10px;

}

.card-usually .prd-name {

  -webkit-line-clamp: 3;

  -webkit-box-orient: vertical;

  display: -webkit-box;

  overflow: hidden;

}



.stagger-wrap .stagger-item {

  transition: 0.3s ease-in-out;

  transform: scale(0.5) rotate(90deg) skew(15deg);

  opacity: 0;

}

.stagger-wrap .stagger-item.stagger-finished {

  transform: scale(1) rotate(0deg) skew(0deg);

  opacity: 1;

}



.slider-scroll,

.thumbs-slider {

  display: flex;

  gap: 20px;

}



.tf-product-media-thumbs {

  width: 80px;

  flex-shrink: 0;

  max-height: 652;

}

.tf-product-media-thumbs .swiper-slide {

  height: max-content;

  width: auto;

}

.tf-product-media-thumbs .swiper-slide .item {

  position: relative;

  height: 100%;

  max-height: 80px;

  max-width: 80px;

}

.tf-product-media-thumbs .swiper-slide .item img {

  border-radius: 4px;

  width: 100%;

  height: 100%;

  object-fit: cover;

}

.tf-product-media-thumbs .swiper-slide .item::after {

  position: absolute;

  content: "";

  top: 0;

  right: 0;

  left: 0;

  bottom: 0;

  border: 1px solid var(--gray-5);

  -webkit-transition: all 0.3s ease-in-out;

  -moz-transition: all 0.3s ease-in-out;

  -ms-transition: all 0.3s ease-in-out;

  -o-transition: all 0.3s ease-in-out;

  transition: all 0.3s ease-in-out;

  border-radius: 4px;

}

.tf-product-media-thumbs .swiper-slide.swiper-slide-thumb-active .item::after {

  border-color: var(--main);

}



.tf-product-media-main {

  width: calc(100% - 100px);

}

.tf-product-media-main .item {

  display: flex;

  width: 100%;

  height: 100%;

  border-radius: 12px;

  overflow: hidden;

  max-height: 687px;

}

.tf-product-media-main .item img {

  width: 100%;

  height: 100%;

  object-fit: cover;

}



.thumbs-default .thumbs-slider {

  flex-direction: column;

}

.thumbs-default .thumbs-slider .tf-product-media-thumbs {

  order: 1;

  width: 100%;

}

.thumbs-default .thumbs-slider .tf-product-media-thumbs .swiper-slide {

  width: auto;

}

.thumbs-default .thumbs-slider .tf-product-media-main {

  width: 100%;

}



.thumbs-left .thumbs-slider {

  flex-direction: column;

}

.thumbs-left .tf-product-media-main {

  width: 100%;

}

.thumbs-left .tf-product-media-thumbs {

  width: 100%;

}



.price-wrap {

  display: flex;

  align-items: center;

  gap: 5px 12px;

  flex-wrap: wrap;

}



.old-price {

  position: relative;

  display: inline-flex;

}

.old-price::before {

  content: "";

  position: absolute;

  left: 0;

  top: 50%;

  transform: translateY(-50%);

  width: 100%;

  height: 1px;

  background-color: var(--gray-2);

}

.old-price.style-white {

  color: var(--white);

}

.old-price.style-white::before {

  background-color: var(--white);

}



.tf-product-info-list {

  display: flex;

  gap: 30px;

  align-items: start;

  flex-wrap: wrap;

}

.tf-product-info-list .product-info-price {

  display: flex;

  gap: 10px;

  align-items: end;

}

.tf-product-info-list .product-info-price .old-price {

  padding-bottom: 4px;

}

.tf-product-info-list .tf-product-info-content {

  display: flex;

  flex-direction: column;

  gap: 20px;

}

.tf-product-info-list .tf-product-info-content > *:not(:last-child) {

  padding-bottom: 20px;

  border-bottom: 1px solid var(--gray-5);

}

.tf-product-info-list .tf-product-info-content .infor-bottom {

  display: grid;

  gap: 10px;

}

.tf-product-info-list .product-fearture-list {

  display: flex;

  flex-direction: column;

  gap: 4px;

}

.tf-product-info-list .product-fearture-list li {

  display: flex;

  align-items: center;

  gap: 20px;

}

.tf-product-info-list .product-fearture-list li p {

  width: 72px;

}

.tf-product-info-list .product-about-list {

  display: grid;

  gap: 10px;

}

.tf-product-info-list .product-about-list p {

  padding-left: 16px;

  position: relative;

}

.tf-product-info-list .product-about-list p::before {

  content: "";

  position: absolute;

  left: 0;

  top: 8px;

  width: 4px;

  height: 4px;

  right: 4px;

  border-radius: 50%;

  background-color: var(--gray-2);

}

.tf-product-info-list .product-box-btn {

  display: grid;

  gap: 10px;

}

.tf-product-info-list.style-2 .tf-product-info-choose-option {

  border: unset;

  padding: 0;

  max-width: unset;

  flex-direction: row;

  align-items: center;

  flex-wrap: wrap;

  gap: 10px 15px;

}

.tf-product-info-list.style-2 .tf-product-info-choose-option .title {

  margin-bottom: 0px;

}

.tf-product-info-list.style-2 .tf-product-info-choose-option > * {

  display: flex;

  align-items: center;

  gap: 12px;

}

.tf-product-info-list.style-2 .tf-product-info-choose-option .select-color {

  min-width: 175px;

}

.tf-product-info-list.style-2 .infor-center {

  gap: 9px;

}

.tf-product-info-list.style-2 .product-delivery {

  align-items: center;

  display: flex;

  gap: 0px 14px;

  flex-wrap: wrap;

}

.tf-product-info-list.style-2 .shipping-to {

  display: flex;

  align-items: center;

  gap: 8px;

}



.product-info-rate-wrap {

  display: flex;

  align-items: center;

  gap: 0px 16px;

  flex-wrap: wrap;

}

.product-info-rate-wrap > li:not(:last-child) {

  padding-right: 16px;

  position: relative;

}

.product-info-rate-wrap > li:not(:last-child)::after {

  content: "";

  position: absolute;

  right: 0;

  top: 50%;

  transform: translateY(-50%);

  width: 1px;

  height: 14px;

  background-color: var(--gray-4);

}



.star-review {

  display: flex;

  align-items: center;

  gap: 7px;

}



.list-star {

  display: flex;

  align-items: center;

  gap: 3px;

}

.list-star > li {

  display: flex;

  align-items: center;

}

.list-star i {

  color: #FCB500;

}



.wg-quantity {

  display: flex;

  align-items: center;

  overflow: hidden;

  gap: 2px;

  width: max-content;

}

.wg-quantity .quantity-product {

  width: 30px;

  height: 30px;

  padding: 0;

  border: 0;

  text-align: center;

  font-weight: 700;

  font-size: 16px;

  line-height: 18px;

  color: var(--primary);

  pointer-events: none;

}

.wg-quantity .btn-quantity {

  width: 30px;

  height: 30px;

  border-radius: 50%;

  padding: 0;

  display: flex;

  align-items: center;

  justify-content: center;

  font-size: 16px;

  color: var(--gray);

  cursor: pointer;

  border: 1px solid var(--line-4);

  -webkit-transition: all 0.3s ease-in-out;

  -moz-transition: all 0.3s ease-in-out;

  -ms-transition: all 0.3s ease-in-out;

  -o-transition: all 0.3s ease-in-out;

  transition: all 0.3s ease-in-out;

}

.wg-quantity .btn-quantity:hover {

  color: var(--primary);

}



.tf-product-info-content .infor-heading,

.tf-product-info-content .infor-bottom,

.tf-product-info-content .infor-center {

  display: grid;

  gap: 10px;

}



.tf-product-info-choose-option {

  padding: 20px;

  display: flex;

  flex-direction: column;

  gap: 18px;

  border-radius: 6px;

  border: 1px solid var(--gray-4);

  width: 100%;

}

.tf-product-info-choose-option .product-delivery {

  display: grid;

  gap: 10px;

}

.tf-product-info-choose-option .title {

  margin-bottom: 12px;

}

.tf-product-info-choose-option .shipping-to {

  display: flex;

  align-items: center;

  gap: 8px;

}

.tf-product-info-choose-option .product-detail .caption {

  margin-bottom: 4px;

}

.tf-product-info-choose-option .product-detail .body-text-3 {

  display: grid;

  gap: 8px;

}



.tf-select-color {

  position: relative;

  width: max-content;

}

.tf-select-color::after {

  content: "\e918";

  position: absolute;

  font-family: "icomoon";

  right: 10px;

  top: 50%;

  transform: translateY(-50%);

  color: var(--gray);

}



.rating-percent {

  width: max-content;

}

.rating-percent .rate-percent {

  font-weight: 700;

  font-size: 70px;

  line-height: 70px;

  color: var(--primary);

  margin-bottom: 9px;

}

.rating-percent .rate-percent span {

  font-weight: 400;

  font-size: 40px;

  line-height: 48px;

  color: var(--gray-4);

}

.rating-percent .list-star {

  margin-bottom: 3px;

}



.review-list > li:not(:last-child) {

  padding-bottom: 20px;

  margin-bottom: 20px;

  border-bottom: 1px solid var(--gray-5);

}



.box-review {

  display: flex;

  gap: 14px;

  align-items: start;

}

.box-review .avt {

  max-width: 50px;

  border-radius: 50%;

  overflow: hidden;

  flex-shrink: 0;

}

.box-review .author-wrap .name {

  margin-bottom: 2px;

}

.box-review .review-content {

  display: grid;

  gap: 18px;

}

.box-review .verified {

  margin-bottom: 5px;

  display: flex;

  align-items: center;

  gap: 0px 10px;

  flex-wrap: wrap;

}

.box-review .verified > li:not(:last-child) {

  padding-right: 10px;

  position: relative;

}

.box-review .verified > li:not(:last-child)::after {

  content: "";

  position: absolute;

  width: 1px;

  height: 14px;

  right: 0;

  top: 50%;

  transform: translateY(-50%);

  background-color: var(--gray-4);

}



.flat-product-des-list {

  display: grid;

  gap: 30px;

}

.flat-product-des-list.style-2 .flat-title-tab-product-des {

  border: unset;

  display: grid;

  gap: 30px;

}

.flat-product-des-list.style-2 .flat-title-tab-product-des:not(:last-child) {

  padding-bottom: 30px;

  border-bottom: 1px solid var(--gray-5);

}

.flat-product-des-list.style-2 .tab-main {

  padding: 0;

}

.flat-product-des-list.bg-white {

  padding: 15px;

  border-radius: 8px;

}



.tf-product-info-wrap.bg-white,

.tf-product-media-wrap.bg-white {

  border-radius: 8px;

  padding: 15px;

}



.product-thumb-slider {

  display: flex;

  flex-direction: column;

  gap: 10px;

}

.product-thumb-slider .tf-product-view-main {

  width: 100%;

}

.product-thumb-slider .tf-product-view-thumbs {

  order: 1;

  width: 100%;

}

.product-thumb-slider .tf-product-view-thumbs .swiper-slide {

  width: auto;

}

.product-thumb-slider.thumbs-right .tf-product-view-main .tf-image-view {

  aspect-ratio: 571/321;

  max-width: 571px;

}

.product-thumb-slider.thumbs-right .tf-product-view-thumbs .swiper-slide .item {

  max-width: 69px;

  max-height: 69px;

  overflow: hidden;

  aspect-ratio: 1;

}

.product-thumb-slider.thumbs-right.type-right-3 {

  gap: 20px;

}

.product-thumb-slider.thumbs-right.type-right-3 .tf-product-view-main .tf-image-view {

  aspect-ratio: 506/386;

  max-width: 506px;

}



.tf-product-view-main .tf-image-view {

  aspect-ratio: 300/260;

  border-radius: 5px;

  overflow: hidden;

}



.tf-product-view-thumbs .swiper-slide .item {

  position: relative;

  height: 100%;

  max-width: 52px;

  max-height: 50px;

  overflow: hidden;

  cursor: pointer;

}

.tf-product-view-thumbs .swiper-slide .item img {

  border-radius: 3px;

  width: 100%;

  height: 100%;

  object-fit: contain;

}

.tf-product-view-thumbs .swiper-slide .item::after {

  position: absolute;

  content: "";

  top: 0;

  right: 0;

  left: 0;

  bottom: 0;

  border: 1px solid var(--gray-5);

  -webkit-transition: all 0.3s ease-in-out;

  -moz-transition: all 0.3s ease-in-out;

  -ms-transition: all 0.3s ease-in-out;

  -o-transition: all 0.3s ease-in-out;

  transition: all 0.3s ease-in-out;

  border-radius: 3px;

}

.tf-product-view-thumbs .swiper-slide.swiper-slide-thumb-active .item::after {

  border-color: var(--black);

}



.product-list-wrap > li:not(:last-child) {

  margin-bottom: 20px;

  padding-bottom: 20px;

  border-bottom: 1px solid var(--gray-5);

}



.tf-grid-product-item {

  width: 100%;

}



.sw-cls {

  margin-top: 10px;

}

.sw-cls .swiper-slide {

  height: auto;

}

.sw-cls .swiper-slide > * {

  height: 100%;

  max-height: 250px;

}

.sw-cls .img-item {

  max-width: 200px;

}



.tf-product-view-content {

  display: flex;

  gap: 20px;

}

.tf-product-view-content .sidebar-filter {

  max-width: 284px;

  width: 100%;

}

.tf-product-view-content .content-area {

  width: 100%;

}



.tf-control-view {

  display: flex;

  align-items: center;

  gap: 10px;

}

.tf-control-view .tf-control-sort {

  display: flex;

  align-items: center;

  gap: 6px;

}

.tf-control-view .type-sort-quatity {

  min-width: 160px;

}

.tf-control-view .type-sort-by {

  min-width: 204px;

}

.tf-control-view .tf-sort {

  padding: 9px;

  border-radius: 3px;

  border: 1px solid var(--gray-5);

  display: flex;

  cursor: pointer;

  -webkit-transition: all 0.3s ease-in-out;

  -moz-transition: all 0.3s ease-in-out;

  -ms-transition: all 0.3s ease-in-out;

  -o-transition: all 0.3s ease-in-out;

  transition: all 0.3s ease-in-out;

  color: var(--black);

}

.tf-control-view .tf-sort .btn-select {

  display: flex;

  align-items: center;

  gap: 6px;

}

.tf-control-view .tf-sort:hover {

  color: var(--primary);

  border-color: var(--primary);

}

.tf-control-view .tf-sort i {

  font-size: 24px;

}



.tf-shop-control {

  display: flex;

  justify-content: space-between;

  align-items: center;

  padding-bottom: 21px;

  border-bottom: 1px solid var(--gray-5);

  margin-bottom: 30px;

}



.tf-control-layout {

  display: flex;

  align-items: center;

  gap: 10px;

}

.tf-control-layout li a {

  padding: 9px;

  border-radius: 3px;

  border: 1px solid var(--gray-5);

  display: flex;

  cursor: pointer;

  -webkit-transition: all 0.3s ease-in-out;

  -moz-transition: all 0.3s ease-in-out;

  -ms-transition: all 0.3s ease-in-out;

  -o-transition: all 0.3s ease-in-out;

  transition: all 0.3s ease-in-out;

  color: var(--black);

}

.tf-control-layout li a:hover, .tf-control-layout li a.active {

  color: var(--primary);

  border-color: var(--primary);

}

.tf-control-layout li i {

  font-size: 24px;

}



.tf-dropdown-sort .btn-select {

  display: flex;

  align-items: center;

  gap: 6px;

}



.flat-grid-product.layout-tabgrid-1 .card-product .card-product-btn, .flat-grid-product.layout-tabgrid-2 .card-product .card-product-btn {

  display: none;

}

.flat-grid-product.layout-tabgrid-2 .card-product .box-infor-detail {

  display: none;

}

.flat-grid-product.layout-tablist-1, .flat-grid-product.layout-tablist-2 {

  grid-template-columns: unset !important;

}

.flat-grid-product.layout-tablist-1 .card-product .card-product-btn, .flat-grid-product.layout-tablist-2 .card-product .card-product-btn {

  display: flex;

}

.flat-grid-product.layout-tablist-1 .card-product .list-product-btn, .flat-grid-product.layout-tablist-2 .card-product .list-product-btn {

  display: none;

}

.flat-grid-product.layout-tablist-1 .box-infor-detail .tf-btn-icon {

  display: none;

}

.flat-grid-product.layout-tablist-2 {

  grid-template-columns: unset !important;

}

.flat-grid-product.layout-tablist-2 .card-product .card-product-btn {

  display: flex;

}

.flat-grid-product.layout-tablist-2 .card-product .box-infor-detail > *:not(.star-review) {

  display: none;

}

.flat-grid-product.layout-tablist-2 .card-product .card-product-info {

  gap: 10px;

}

.flat-grid-product.layout-tablist-2 .card-product .box-title {

  gap: 8px;

}



.tf-order-detail {

  display: grid;

  gap: 30px;

}

.tf-order-detail .order-notice {

  display: flex;

  align-items: center;

  box-shadow: 5px 6px 30px 0px rgba(0, 0, 0, 0.1);

  margin-bottom: 10px;

}

.tf-order-detail .order-notice p {

  padding-left: 20px;

}

.tf-order-detail .order-notice .icon {

  height: 60px;

  width: 60px;

  display: flex;

  align-items: center;

  justify-content: center;

  background-color: var(--primary);

}

.tf-order-detail .order-overview-list li:not(:last-child) {

  margin-bottom: 10px;

}

.tf-order-detail .order-detail-wrap {

  display: grid;

  gap: 15px;

}



.tf-table-order-detail {

  border: 1px solid #e0e0e0;

  table-layout: fixed;

  width: 100%;

}

.tf-table-order-detail td,

.tf-table-order-detail th {

  border: 1px solid #e0e0e0;

  padding: 8px 12px;

  text-align: left;

  vertical-align: middle;

}



.billing-info {

  padding: 8px 15px;

  border: 1px solid #e0e0e0;

}



.tf-table-wishlist {

  border: 1px solid #e0e0e0;

  width: 100%;

  overflow-x: auto;

}

.tf-table-wishlist thead {

  white-space: nowrap;

}

.tf-table-wishlist td,

.tf-table-wishlist th {

  border: 1px solid #e0e0e0;

  padding: 8px 12px;

  text-align: left;

  vertical-align: middle;

}

.tf-table-wishlist tfoot td {

  padding: 12px 12px;

}



.tf-table-wishlist .wishlist-item_remove {

  width: 20px;

  text-align: center;

}

.tf-table-wishlist .wishlist-item_image {

  width: 100px;

  min-width: 100px;

}

.tf-table-wishlist .wishlist-item_action {

  white-space: nowrap;

}



.tf-table-compare {

  border-collapse: collapse;

  width: 100%;

}

.tf-table-compare td,

.tf-table-compare th {

  border: 1px solid #e0e0e0;

  padding: 8px 12px;

  text-align: left;

  vertical-align: middle;

}

.tf-table-compare tr:nth-child(odd) {

  background-color: #f7f7f7;

}



.tf-table-compare .compare-item_info {

  display: flex;

  gap: 10px;

  align-items: center;

  justify-content: space-between;

}

.tf-table-compare .tf-compare-image .image {

  display: flex;

  justify-content: center;

}

.tf-table-compare .tf-compare-image .image img {

  max-width: 250px;

  width: 100%;

  height: 100%;

  object-fit: cover;

}



.tf-compare {

  overflow-x: auto;

}

.tf-compare::-webkit-scrollbar {

  height: 3px;

}

.tf-compare::-webkit-scrollbar-thumb {

  background-color: var(--gray-2);

  border-radius: 3px;

}



.tf-compare-col {

  min-width: 220px;

  max-width: 350px;

}

.tf-compare-col:first-child {

  min-width: 150px;

}



.table_def {

  border-collapse: collapse;

  width: 100%;

  table-layout: fixed;

}

.table_def thead {

  white-space: nowrap;

}

.table_def td,

.table_def th {

  border: 1px solid #e0e0e0;

  padding: 8px 12px;

  vertical-align: middle;

}

.table_def tfoot td {

  padding: 12px 12px;

}



.tf-order_history-table {

  text-align: center;

  overflow: auto;

}

.tf-order_history-table table {

  min-width: 700px;

  width: 100%;

}

.tf-order_history-table tr {

  border: 1px solid #e0e0e0;

}

.tf-order_history-table tr > *:first-child {

  text-align: left;

}

.tf-order_history-table tr th,

.tf-order_history-table tr td {

  border: unset;

}



.tf-order_history-table th,

.tf-order_history-table td {

  padding: 10px 15px;

}



.account-address .btn-add-address {

  margin-bottom: 42px;

}



.account-address-item {

  border-radius: 16px;

  border: 1px solid var(--gray-4);

}

.account-address-item .title {

  padding: 15px;

  border-bottom: 1px solid var(--gray-4);

}

.account-address-item .info-detail {

  padding: 15px;

  display: grid;

  gap: 24px;

}

.account-address-item .box-infor {

  display: grid;

  gap: 12px;

}

.account-address-item .box-btn {

  display: flex;

  gap: 12px;

}

.account-address-item.editing {

  background-color: #fafafa;

}



.account-details {

  display: grid;

  gap: 30px;

}



/*------------ blog ---------------- */

.news-item {

  /* display: grid; */

  gap: 20px;

}

.news-item .entry_meta {

  display: flex;

  align-items: center;

  gap: 14px;

}

.news-item .entry_meta > * {

  display: flex;

  align-items: center;

  gap: 4px;

}

.news-item .entry_tag {

  padding: 4px 10px;

  border-radius: 3px;

  background-color: var(--white);

  position: absolute;

  bottom: 4px;

  left: 6px;

}

.news-item .content {

  display: grid;

  gap: 10px;

}

.news-item .entry_infor_news {

  display: grid;

  gap: 14px;

}

.news-item.style-large {

  gap: 30px;

}

.news-item.style-row {

  display: flex;

  align-items: start;

}

.news-item.style-row .entry_image {

  width: 40%;

}

.news-item.style-row .content {

  width: 65%;

}



.wg-pagination {

  display: flex;

  align-items: center;

  justify-content: center;

  padding-top: 15px;

  border-top: 1px solid var(--gray-5);

}

.wg-pagination li {

  display: flex;

  align-items: center;

  justify-content: center;

  width: 40px;

  height: 40px;

}

.wg-pagination li i {

  font-size: 20px;

}

.wg-pagination li.active > * {

  color: var(--primary);

}



.blog-sidebar {

  max-width: 284px;

  width: 100%;

  display: flex;

  flex-direction: column;

  gap: 24px;

}

.blog-sidebar .sidebar-item {

  display: grid;

  gap: 16px;

}

.blog-sidebar .sidebar-item.style-2 {

  border-radius: 8px 8px 10px 10px;

  border: 1px solid var(--gray-5);

  gap: 0px;

}

.blog-sidebar .sidebar-item.style-2 .sb-title {

  padding: 13px 18px;

  background-color: var(--gray-6);

}

.blog-sidebar .sidebar-item.style-2 .sb-content {

  padding: 0px 18px;

}

.blog-sidebar .sidebar-item:not(.style-2) .sb-title {

  font-size: 16px;

  line-height: 18px;

}

.blog-sidebar .sidebar-item.has-line-bt {

  padding-bottom: 24px;

  border-bottom: 1px solid var(--gray-5);

}

.blog-sidebar .sb-category a {

  display: flex;

  align-items: center;

  justify-content: space-between;

  padding: 15px 0px;

}

.blog-sidebar .sb-category a i {

  font-size: 10px;

}

.blog-sidebar .sb-category li:not(:last-child) a {

  border-bottom: 1px solid var(--line-2);

  padding: 15px 0px 14px;

}

.blog-sidebar .sb-recent {

  display: flex;

  flex-direction: column;

  gap: 18px;

}

.blog-sidebar .sb-recent li {

  display: flex;

  gap: 10px;

  align-items: start;

}

.blog-sidebar .sb-recent li .image {

  max-width: 112px;

  width: 100%;

  flex-shrink: 0;

}

.blog-sidebar .sb-recent li:not(:last-child) {

  padding-bottom: 19px;

  border-bottom: 1px solid var(--gray-5);

}

.blog-sidebar .sb-recent li .date {

  display: flex;

  align-items: center;

  gap: 4px;

}

.blog-sidebar .sb-tags {

  display: flex;

  flex-wrap: wrap;

  gap: 8px;

}

.blog-sidebar .sb-tags a {

  padding: 9px 15px;

  border-radius: 999px;

  border: 1px solid var(--gray-5);

  -webkit-transition: all 0.3s ease-in-out;

  -moz-transition: all 0.3s ease-in-out;

  -ms-transition: all 0.3s ease-in-out;

  -o-transition: all 0.3s ease-in-out;

  transition: all 0.3s ease-in-out;

}

.blog-sidebar .sb-tags a:hover {

  background-color: var(--gray);

  border-color: var(--gray);

  color: var(--white);

}



.btn-sidebar-mb {

  position: fixed;

  top: 30%;

  left: 0;

  z-index: 50;

}

.btn-sidebar-mb button {

  width: 40px;

  height: 40px;

  border: 1px solid var(--black);

  background-color: var(--black);

  color: var(--white);

  display: flex;

  justify-content: center;

  align-items: center;

}

.btn-sidebar-mb button i {

  font-size: 20px;

}

.btn-sidebar-mb button:hover {

  background-color: var(--white);

  color: var(--black);

}

.btn-sidebar-mb.right {

  left: unset;

  right: 0;

  transform: rotate(180deg);

}



.s-blog-list .blog-list-content {

  display: flex;

  flex-direction: column;

  gap: 30px;

}

.s-blog-list .blog-list-content > .news-item:not(:first-of-type):not(:last-of-type) {

  padding-bottom: 30px;

  border-bottom: 1px solid var(--gray-5);

}

.s-blog-list .blog-sidebar {

  flex-shrink: 0;

}



.s-blog-detail {

  display: flex;

  align-items: start;

  gap: 40px;

}

.s-blog-detail .box-direction {

  display: flex;

  flex-direction: column;

  gap: 96px;

  max-width: 268px;

  width: 100%;

}

.s-blog-detail .box-direction.sticky {

  position: sticky;

  top: 25%;

}

.s-blog-detail .box-direction .bottom {

  display: flex;

  flex-direction: column;

  gap: 10px;

}

.s-blog-detail .content-blog {

  display: grid;

  gap: 30px;

}

.s-blog-detail .content-blog .main-content {

  display: grid;

  gap: 20px;

}

.s-blog-detail .content-blog .box-title {

  display: grid;

  gap: 12px;

}

.s-blog-detail .main-preview {

  padding-top: 50px;

  border-top: 1px solid var(--gray-5);

  display: grid;

  gap: 50px;

}

.s-blog-detail .main-preview > * {

  display: flex;

  flex-direction: column;

  gap: 30px;

}

.s-blog-detail .entry_meta {

  display: flex;

  align-items: center;

  gap: 14px;

}

.s-blog-detail .entry_meta > * {

  display: flex;

  align-items: center;

  gap: 4px;

}

.s-blog-detail .entry_image img {

  width: 100%;

  object-fit: cover;

}

.s-blog-detail .entry_image.has-sub {

  display: grid;

  gap: 8px;

  text-align: center;

}



.comment-wrap .author-wrap {

  display: flex;

  align-items: start;

  gap: 14px;

}

.comment-wrap .author-wrap .wrap {

  display: grid;

  gap: 20px;

}

.comment-wrap .author-wrap .rep-comment .author-wrap {

  padding-top: 20px;

  border-top: 1px solid var(--gray-5);

}

.comment-wrap .entry_meta {

  display: grid;

  gap: 2px;

}

.comment-wrap .avt {

  max-width: 50px;

  border-radius: 50%;

  overflow: hidden;

  flex-shrink: 0;

}

.comment-wrap .box-comment {

  display: grid;

  gap: 10px;

}

.comment-wrap .comment-list {

  display: grid;

  gap: 40px;

}

.comment-wrap .comment-list .author-wrap:not(:last-child) {

  padding-bottom: 40px;

  border-bottom: 1px solid var(--gray-5);

}



/*------------ accordion ---------------- */

.widget-accordion .accordion-title {

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 20px;

  padding: 6px 50px 6px 0px;

  font-weight: 600;

  cursor: pointer;

}

.widget-accordion .accordion-title .icon {

  -webkit-transition: all 0.3s ease-in-out;

  -moz-transition: all 0.3s ease-in-out;

  -ms-transition: all 0.3s ease-in-out;

  -o-transition: all 0.3s ease-in-out;

  transition: all 0.3s ease-in-out;

}

.widget-accordion .accordion-title:not(.collapsed) .icon {

  background-color: var(--primary);

}

.widget-accordion .accordion-title:not(.collapsed) .icon::before {

  transform: rotate(90deg);

  opacity: 0;

}

.widget-accordion .accordion-title:not(.collapsed) .icon::after {

  background-color: var(--white);

}

.widget-accordion .accordion-body {

  padding: 10px 0px 30px;

}



.faq-item {

  display: grid;

  gap: 30px;

}



.faq-wrap .widget-accordion:not(:last-child) .accordion-title.collapsed {

  padding-bottom: 16px;

  border-bottom: 1px solid var(--gray-5);

  margin-bottom: 10px;

}

.faq-wrap .accordion-title {

  position: relative;

  -webkit-transition: all 0.3s ease-in-out;

  -moz-transition: all 0.3s ease-in-out;

  -ms-transition: all 0.3s ease-in-out;

  -o-transition: all 0.3s ease-in-out;

  transition: all 0.3s ease-in-out;

  border-color: var(--white);

}

.faq-wrap .accordion-title .title-sidebar {

  -webkit-transition: all 0.3s ease-in-out;

  -moz-transition: all 0.3s ease-in-out;

  -ms-transition: all 0.3s ease-in-out;

  -o-transition: all 0.3s ease-in-out;

  transition: all 0.3s ease-in-out;

}

.faq-wrap .accordion-title:not(.collapsed) .title-sidebar {

  color: var(--primary);

}

.faq-wrap .accordion-title .icon {

  width: 34px;

  height: 34px;

  border-radius: 50%;

  background-color: var(--gray-6);

  display: flex;

  align-items: center;

  justify-content: center;

  position: absolute;

  top: -2px;

  right: -2px;

}

.faq-wrap .accordion-title .icon::after {

  -webkit-transition: all 0.3s ease-in-out;

  -moz-transition: all 0.3s ease-in-out;

  -ms-transition: all 0.3s ease-in-out;

  -o-transition: all 0.3s ease-in-out;

  transition: all 0.3s ease-in-out;

  content: "";

  position: absolute;

  width: 11.25px;

  height: 2px;

  border-radius: 1px;

  background-color: var(--gray);

}

.faq-wrap .accordion-title .icon::before {

  -webkit-transition: all 0.3s ease-in-out;

  -moz-transition: all 0.3s ease-in-out;

  -ms-transition: all 0.3s ease-in-out;

  -o-transition: all 0.3s ease-in-out;

  transition: all 0.3s ease-in-out;

  content: "";

  position: absolute;

  height: 11.25px;

  width: 2px;

  border-radius: 1px;

  background-color: var(--gray);

}

.faq-wrap .accordion-body {

  display: flex;

  gap: 10px;

  align-items: start;

}

.faq-wrap .accordion-body i {

  font-size: 30px;

}



/*------------ zoom ---------------- */

.tf-zoom-main {

  position: sticky;

  top: 30px;

  z-index: 50;

}

.tf-zoom-main .drift-zoom-pane {

  top: 0;

  left: 0;

  height: 520px;

  max-width: 520px;

  width: 100%;

  background: #fff;

  -webkit-transform: translate3d(0, 0, 0);

  box-shadow: 0 1px 5px rgba(127, 127, 127, 0.0196078431), 0 5px 18px rgba(127, 127, 127, 0.2);

  z-index: 3;

  border-radius: 8px;

}



.drift-bounding-box.drift-open {

  background: rgba(255, 255, 255, 0.2509803922);

  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.4) inset;

  z-index: 5000;

}



.drift-zoom-pane {

  z-index: 5000;

}



.section-image-zoom .other-image-zoom {

  -webkit-transition: all 0.3s ease-in-out;

  -moz-transition: all 0.3s ease-in-out;

  -ms-transition: all 0.3s ease-in-out;

  -o-transition: all 0.3s ease-in-out;

  transition: all 0.3s ease-in-out;

}

.section-image-zoom.zoom-active .other-image-zoom {

  opacity: 0.3;

}



.pswp__bg {

  background: var(--white);

}



.pswp__icn {

  fill: rgb(34, 34, 34);

  color: var(--white);

}

.pswp__icn .pswp__icn-shadow {

  stroke: var(--white);

  stroke-width: 1px;

  fill: none;

}



.pswp__counter {

  color: #222;

  text-shadow: 1px 1px 3px #ffffff;

}



.tf-model-viewer {

  width: 100%;

  height: 100%;

  position: relative;

}

.tf-model-viewer model-viewer {

  display: block;

  position: relative;

  z-index: 5;

  width: 100%;

  height: 100%;

}

.tf-model-viewer model-viewer.disabled {

  pointer-events: none;

}

.tf-model-viewer.active model-viewer {

  pointer-events: all;

}

.tf-model-viewer.active .wrap-btn-viewer {

  display: none;

}



/*------------ shop ---------------- */

.noUi-target,

.noUi-target * {

  -webkit-touch-callout: none;

  -webkit-tap-highlight-color: transparent;

  -webkit-user-select: none;

  -ms-touch-action: none;

  touch-action: none;

  -ms-user-select: none;

  -moz-user-select: none;

  user-select: none;

  -moz-box-sizing: border-box;

  box-sizing: border-box;

}



.noUi-target {

  position: relative;

  direction: ltr;

}



.noUi-base,

.noUi-connects {

  width: 100%;

  height: 100%;

  position: relative;

  z-index: 1;

}



.noUi-connects {

  overflow: hidden;

  z-index: 0;

}



.noUi-connect,

.noUi-origin {

  will-change: transform;

  position: absolute;

  z-index: 1;

  top: 0;

  left: 0;

  height: 100%;

  width: 100%;

  -ms-transform-origin: 0 0;

  -webkit-transform-origin: 0 0;

  transform-origin: 0 0;

}



html:not([dir=rtl]) .noUi-horizontal .noUi-origin {

  left: auto;

  right: 0;

}



.noUi-vertical .noUi-origin {

  width: 0;

}



.noUi-horizontal .noUi-origin {

  height: 0;

}



.noUi-handle {

  position: absolute;

}



.noUi-state-tap .noUi-connect,

.noUi-state-tap .noUi-origin {

  -webkit-transition: transform 0.3s;

  transition: transform 0.3s;

}



.noUi-state-drag * {

  cursor: inherit !important;

}



.noUi-horizontal {

  height: 18px;

}



.noUi-horizontal .noUi-handle {

  width: 34px;

  height: 28px;

  left: -17px;

  top: -6px;

}



.noUi-vertical {

  width: 18px;

}



.noUi-vertical .noUi-handle {

  width: 28px;

  height: 34px;

  left: -6px;

  top: -17px;

}



html:not([dir=rtl]) .noUi-horizontal .noUi-handle {

  right: -17px;

  left: auto;

}



.noUi-draggable {

  cursor: ew-resize;

}



.noUi-vertical .noUi-draggable {

  cursor: ns-resize;

}



.noUi-handle:after {

  left: 17px;

}



.noUi-vertical .noUi-handle:after,

.noUi-vertical .noUi-handle:before {

  width: 14px;

  height: 1px;

  left: 6px;

  top: 14px;

}



.noUi-vertical .noUi-handle:after {

  top: 17px;

}



[disabled] .noUi-connect {

  background: #b8b8b8;

}



[disabled] .noUi-handle,

[disabled].noUi-handle,

[disabled].noUi-target {

  cursor: not-allowed;

}



.noUi-pips,

.noUi-pips * {

  -moz-box-sizing: border-box;

  box-sizing: border-box;

}



.noUi-pips {

  position: absolute;

  color: #999;

}



.noUi-value {

  position: absolute;

  white-space: nowrap;

  text-align: center;

}



.noUi-value-sub {

  color: #ccc;

  font-size: 10px;

}



.noUi-marker {

  position: absolute;

  background: #ccc;

}



.noUi-marker-sub {

  background: #aaa;

}



.noUi-marker-large {

  background: #aaa;

}



.noUi-pips-horizontal {

  padding: 10px 0;

  height: 80px;

  top: 100%;

  left: 0;

  width: 100%;

}



.noUi-value-horizontal {

  -webkit-transform: translate(-50%, 50%);

  transform: translate(-50%, 50%);

}



.noUi-rtl .noUi-value-horizontal {

  -webkit-transform: translate(50%, 50%);

  transform: translate(50%, 50%);

}



.noUi-marker-horizontal.noUi-marker {

  margin-left: -1px;

  width: 2px;

  height: 5px;

}



.noUi-marker-horizontal.noUi-marker-sub {

  height: 10px;

}



.noUi-marker-horizontal.noUi-marker-large {

  height: 15px;

}



.noUi-pips-vertical {

  padding: 0 10px;

  height: 100%;

  top: 0;

  left: 100%;

}



.noUi-value-vertical {

  -webkit-transform: translate(0, -50%);

  transform: translate(0, -50%, 0);

  padding-left: 25px;

}



.noUi-rtl .noUi-value-vertical {

  -webkit-transform: translate(0, 50%);

  transform: translate(0, 50%);

}



.noUi-marker-vertical.noUi-marker {

  width: 5px;

  height: 2px;

  margin-top: -1px;

}



.noUi-marker-vertical.noUi-marker-sub {

  width: 10px;

}



.noUi-marker-vertical.noUi-marker-large {

  width: 15px;

}



.noUi-tooltip {

  display: block;

  position: absolute;

  border: 1px solid #d9d9d9;

  border-radius: 3px;

  background: #fff;

  color: #000;

  padding: 5px;

  text-align: center;

  white-space: nowrap;

}



.noUi-horizontal .noUi-tooltip {

  -webkit-transform: translate(-50%, 0);

  transform: translate(-50%, 0);

  left: 50%;

  bottom: 120%;

}



.noUi-vertical .noUi-tooltip {

  -webkit-transform: translate(0, -50%);

  transform: translate(0, -50%);

  top: 50%;

  right: 120%;

}



.noUi-horizontal {

  height: 4px;

}



.noUi-target {

  border: 0;

}



.noUi-base .noUi-connects {

  border-radius: 999px;

  background-color: var(--gray-5);

}



.noUi-connect {

  background-color: var(--black);

}



.noUi-horizontal .noUi-handle,

.noUi-vertical .noUi-handle {

  height: 16px;

  width: 16px;

  border-radius: 50px;

  border: 2px solid var(--black);

  background-color: var(--gray-4);

  box-shadow: unset;

  cursor: pointer;

  -webkit-transition: all 0.3s ease-in-out;

  -moz-transition: all 0.3s ease-in-out;

  -ms-transition: all 0.3s ease-in-out;

  -o-transition: all 0.3s ease-in-out;

  transition: all 0.3s ease-in-out;

}

.noUi-horizontal .noUi-handle::before, .noUi-horizontal .noUi-handle::after,

.noUi-vertical .noUi-handle::before,

.noUi-vertical .noUi-handle::after {

  content: none;

}

.noUi-horizontal .noUi-handle.noUi-active,

.noUi-vertical .noUi-handle.noUi-active {

  height: 20px;

  width: 20px;

  top: -8px;

}



html:not([dir=rtl]) .noUi-horizontal .noUi-handle {

  right: -8px;

}



.tf-table-page-cart {

  border-spacing: 0;

  border-collapse: collapse;

  width: 1024px;

}

.tf-table-page-cart thead {

  border-top: 1px solid var(--gray-5);

  border-bottom: 1px solid var(--gray-5);

}

.tf-table-page-cart th {

  font-weight: 600;

  font-size: 18px;

  line-height: 24px;

  padding: 20px 0px;

}

.tf-table-page-cart th:first-child {

  padding: 20px 0px 20px 25px;

}

.tf-table-page-cart th:last-child {

  padding: 20px 25px 20px 0px;

}

.tf-table-page-cart tr > * {

  width: 200px;

}

.tf-table-page-cart tr > *:first-child {

  width: 400px;

}

.tf-table-page-cart tr > *:last-child {

  width: 100px;

}

.tf-table-page-cart .tf-cart-item_product {

  display: flex;

  gap: 12px;

}

.tf-table-page-cart .img-box {

  max-width: 80px;

  /*height: 80px;*/

  width: 100%;

}

.tf-table-page-cart .cart-info {

  display: flex;

  flex-direction: column;

  gap: 6px;

}

.tf-table-page-cart .variant-box {

  display: flex;

  align-items: center;

}

.tf-table-page-cart .tf-select {

  position: relative;

}

.tf-table-page-cart .tf-select select {

  font-weight: 400;

  font-size: 14px;

  line-height: 20px;

  color: var(--gray-2);

  border: unset;

  appearance: none;

  cursor: pointer;

  padding: 0px 4px 0px 2px;

}

.tf-table-page-cart .tf-select::after {

  position: absolute;

}

.tf-table-page-cart .remove {

  cursor: pointer;

}

.tf-table-page-cart .tf-cart-item {

  border-bottom: 1px solid var(--gray-5);

}

.tf-table-page-cart .tf-cart-item td {

  padding-right: 25px;

}

.tf-table-page-cart .tf-cart-item td:first-child, .tf-table-page-cart .tf-cart-item td:last-child {

  padding: 25px;

}



.ip-discount-code {

  max-width: 466px;

  width: 100%;

  position: relative;

}

.ip-discount-code input {

  border-radius: 8px !important;

}

.ip-discount-code .tf-btn {

  position: absolute;

  top: 0;

  right: 0;

  bottom: 0;

  padding: 10px 31.5px;

  border-radius: 0px 8px 8px 0px;

}

.ip-discount-code.style-2 {

  display: flex;

  gap: 6px;

}

.ip-discount-code.style-2 .tf-btn {

  position: relative;

  border-radius: 8px;

  width: 100%;

  max-width: 122px;

}



.tf-checkout-wrap {

  display: flex;

  align-items: start;

  gap: 30px;

  flex-wrap: wrap;

}

.tf-checkout-wrap .page-checkout {

  width: 100%;

}



.payment-box {

  display: grid;

  gap: 20px;

  margin-bottom: 40px;

}



.payment-choose-card .payment-header {

  width: 100%;

  cursor: pointer;

  margin-bottom: 10px;

  -webkit-transition: all 0.3s ease-in-out;

  -moz-transition: all 0.3s ease-in-out;

  -ms-transition: all 0.3s ease-in-out;

  -o-transition: all 0.3s ease-in-out;

  transition: all 0.3s ease-in-out;

}

.payment-choose-card .payment-header.collapsed {

  margin-bottom: 0px;

}

.payment-choose-card .payment-header.collapsed .select-payment::after {

  transform: translateY(-50%) rotate(0deg);

}

.payment-choose-card .title {

  margin-bottom: 6px;

  display: block;

}

.payment-choose-card .select-payment {

  display: block;

  padding: 11px 14px;

  border-radius: 8px;

  border: 1px solid var(--gray-4);

  width: 100%;

  position: relative;

  -webkit-transition: all 0.3s ease-in-out;

  -moz-transition: all 0.3s ease-in-out;

  -ms-transition: all 0.3s ease-in-out;

  -o-transition: all 0.3s ease-in-out;

  transition: all 0.3s ease-in-out;

}

.payment-choose-card .select-payment::after {

  position: absolute;

  content: "\e918";

  font-family: "icomoon";

  color: var(--gray-2);

  font-size: 16px;

  right: 14px;

  top: 50%;

  transform: translateY(-50%) rotate(180deg);

  -webkit-transition: all 0.3s ease-in-out;

  -moz-transition: all 0.3s ease-in-out;

  -ms-transition: all 0.3s ease-in-out;

  -o-transition: all 0.3s ease-in-out;

  transition: all 0.3s ease-in-out;

}

.payment-choose-card .select-payment:hover {

  border-color: var(--primary);

}

.payment-choose-card input[type=number]::-webkit-outer-spin-button,

.payment-choose-card input[type=number]::-webkit-inner-spin-button {

  -webkit-appearance: none !important;

  margin: 0;

}

.payment-choose-card .payment-body {

  display: grid;

  gap: 20px;

  padding: 30px;

  box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.0509803922);

}



.flat-sidebar-checkout {

  width: 100%;

  position: sticky;

  top: 90px;

  padding: 15px;

  box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.0509803922);

  background-color: var(--white);

}

.flat-sidebar-checkout .sub-type {

  margin-bottom: 6px;

}

.flat-sidebar-checkout .sidebar-checkout-content {

  display: grid;

  gap: 20px;

}

.flat-sidebar-checkout .list-product {

  display: grid;

  gap: 20px;

}

.flat-sidebar-checkout .item-product {

  display: flex;

  align-items: start;

  gap: 12px;

}

.flat-sidebar-checkout .item-product .img-product {

  max-width: 122px;

  width: 100%;

}

.flat-sidebar-checkout .item-product .content-box {

  display: grid;

  gap: 10px;

}

.flat-sidebar-checkout .sec-total-price li {

  border-top: 1px solid var(--gray-5);

  display: flex;

  align-items: center;

  justify-content: space-between;

  padding: 10px 0px;

}

.flat-sidebar-checkout .sec-total-price li:last-child {

  padding-bottom: 0px;

}



.facet-categories {

  border-radius: 10px;

  border: 1px solid var(--gray-5);

  margin-bottom: 24px;

}

.facet-categories .title {

  padding: 13px 18px;

  background-color: var(--gray-6);

}

.facet-categories ul {

  padding: 0px 18px;

}

.facet-categories ul a {

  font-weight: 400;

  font-size: 14px;

  line-height: 20px;

  display: flex;

  align-items: center;

  justify-content: space-between;

  padding: 15px 0px;

  position: relative;

}

.facet-categories ul a::after {

  content: "";

  position: absolute;

  bottom: 0;

  left: auto;

  right: 0;

  width: 0%;

  height: 1px;

  -webkit-transition: all 0.3s ease-in-out;

  -moz-transition: all 0.3s ease-in-out;

  -ms-transition: all 0.3s ease-in-out;

  -o-transition: all 0.3s ease-in-out;

  transition: all 0.3s ease-in-out;

  background-color: var(--primary);

}

.facet-categories ul a:hover, .facet-categories ul a.active {

  color: var(--primary);

}

.facet-categories ul li:not(:last-child) a {

  border-bottom: 1px solid var(--gray-5-2);

}

.facet-categories ul li:not(:last-child) a:hover::after, .facet-categories ul li:not(:last-child) a.active::after {

  width: 100%;

  left: 0;

  right: auto;

}



.btn-loadmore {

  cursor: pointer;

  display: flex;

  align-items: center;

  gap: 6px;

  color: var(--secondary);

  -webkit-transition: all 0.3s ease-in-out;

  -moz-transition: all 0.3s ease-in-out;

  -ms-transition: all 0.3s ease-in-out;

  -o-transition: all 0.3s ease-in-out;

  transition: all 0.3s ease-in-out;

  margin-top: 16px;

}

.btn-loadmore:hover {

  color: var(--primary);

}



.widget-facet .facet-title {

  margin-bottom: 16px;

}

.widget-facet .box-fieldset-item {

  display: grid;

  gap: 10px;

}

.widget-facet .fieldset-item {

  display: flex;

  align-items: center;

  gap: 10px;

}

.widget-facet:not(:last-child) {

  margin-bottom: 24px;

  padding-bottom: 24px;

  border-bottom: 1px solid var(--gray-5);

}



.facet-price .box-fieldset-item {

  margin-bottom: 10px;

}

.facet-price input[type=number]::-webkit-outer-spin-button,

.facet-price input[type=number]::-webkit-inner-spin-button {

  -webkit-appearance: none !important;

  margin: 0;

}



.facet-vote .fieldset-item label {

  display: flex;

  gap: 8px;

  align-items: center;

}



.meta-filter-shop {

  display: flex;

  gap: 12px;

  flex-wrap: wrap;

  align-items: center;

  margin-bottom: 30px;

}

.meta-filter-shop .count-text {

  font-size: 12px;

  line-height: 22px;

  color: var(--text);

  padding-right: 12px;

  position: relative;

}

.meta-filter-shop .count-text::after {

  position: absolute;

  top: 4px;

  bottom: 4px;

  right: 0;

  width: 1px;

  display: block;

  content: "";

  background-color: #d9d9d9;

}

.meta-filter-shop .count-text .count {

  color: var(--black);

  display: inline-block;

  margin-right: 2px;

}

.meta-filter-shop #applied-filters {

  display: flex;

  align-items: center;

  gap: 8px;

  flex-wrap: wrap;

}

.meta-filter-shop .filter-tag {

  font-size: 14px;

  line-height: 22px;

  display: flex;

  align-items: center;

  gap: 6px;

  padding: 4px 12px;

  border: 1px solid var(--gray-5);

  border-radius: 1000px;

  -webkit-transition: all 0.3s ease-in-out;

  -moz-transition: all 0.3s ease-in-out;

  -ms-transition: all 0.3s ease-in-out;

  -o-transition: all 0.3s ease-in-out;

  transition: all 0.3s ease-in-out;

  cursor: pointer;

}

.meta-filter-shop .filter-tag .remove-tag {

  font-size: 12px;

  width: 20px;

  height: 20px;

  display: flex;

  align-items: center;

  justify-content: center;

}

.meta-filter-shop .filter-tag:hover {

  border-color: var(--black);

}

.meta-filter-shop .color-tag {

  gap: 8px;

}

.meta-filter-shop .color-tag .color {

  width: 20px;

  height: 20px;

  display: block;

  border-radius: 1000px;

}

.meta-filter-shop .remove-all-filters {

  padding: 4px 12px;

  border: 1px solid var(--black);

  border-radius: 99px;

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 8px;

  background-color: var(--black);

  color: var(--white);

}

.meta-filter-shop .remove-all-filters .icon {

  font-size: 12px;

}

.meta-filter-shop .remove-all-filters:hover {

  background-color: transparent;

  color: var(--black);

}



.overlay-filter {

  position: fixed;

  top: 0;

  left: 0;

  z-index: 2000;

  width: 100vw;

  height: 100vh;

  background-color: rgba(0, 0, 0, 0.4);

  opacity: 0;

  visibility: hidden;

  -webkit-transition: all 0.3s ease-in-out;

  -moz-transition: all 0.3s ease-in-out;

  -ms-transition: all 0.3s ease-in-out;

  -o-transition: all 0.3s ease-in-out;

  transition: all 0.3s ease-in-out;

}

.overlay-filter.show {

  opacity: 1;

  visibility: visible;

}



/*------------ nice select ---------------- */

.image-select > .dropdown-menu {

  width: auto !important;

}

.image-select.style-default {

  width: unset !important;

  display: flex;

}

.image-select.style-default > select {

  display: none !important;

}

.image-select.style-default > .dropdown-toggle {

  padding: 0;

  background-color: transparent !important;

  border: 0 !important;

  outline: none !important;

  color: var(--main);

}

.image-select.style-default > .dropdown-toggle::after {

  border: 0;

  position: absolute;

  right: 0;

  font-family: "icomoon";

  font-size: 12px;

  color: var(--main);

}

.image-select.style-default .filter-option-inner-inner {

  display: flex;

  align-items: center;

  justify-content: start;

  gap: 8px;

  font-weight: 400;

  font-size: 14px;

  line-height: 22px;

}

.image-select.style-default .filter-option-inner-inner img {

  width: 34px;

  height: 34px;

  object-fit: cover;

  border-radius: 50%;

  padding: 3px;

  border: 1px solid var(--gray-4);

}

.image-select.style-default > .dropdown-menu {

  overflow: unset !important;

  margin-top: 5px !important;

  margin-bottom: 5px !important;

  padding: 5px;

  border-radius: 0;

  border: 0;

  background-color: var(--white);

  box-shadow: rgba(0, 0, 0, 0.2) 0px 0px 18px 0px;

}

.image-select.style-default > .dropdown-menu li:not(:last-child) {

  padding-bottom: 5px !important;

}

.image-select.style-default > .dropdown-menu .inner {

  position: relative;

}

.image-select.style-default > .dropdown-menu a {

  padding: 0 !important;

}

.image-select.style-default > .dropdown-menu a .text {

  display: flex;

  align-items: center;

  justify-content: center;

  gap: 5px;

  font-weight: 400;

  font-size: 14px;

  line-height: 16px;

}

.image-select.style-default > .dropdown-menu a .text img {

  width: 30px;

}

.image-select.style-default > .dropdown-menu a:hover, .image-select.style-default > .dropdown-menu a:active, .image-select.style-default > .dropdown-menu a.active {

  color: var(--primary) !important;

  background-color: unset !important;

}

.image-select.style-default > .dropdown-menu::after {

  position: absolute;

  content: "";

  width: 16px;

  height: 16px;

  transform: translate(-50%, -50%) rotate(45deg);

  background-color: var(--white);

  top: 0;

  left: 50%;

  z-index: 2;

}

.image-select.style-default > .dropdown-menu[data-popper-placement=top-start]::after {

  display: none;

}

.image-select.style-default > .dropdown-menu[data-popper-placement=top-start]::before {

  position: absolute;

  content: "";

  width: 16px;

  height: 16px;

  transform: translate(-50%, 50%) rotate(45deg);

  background-color: var(--white);

  bottom: 0%;

  left: 50%;

  z-index: 2;

}

.image-select.type-languages > .dropdown-menu {

  width: 96px !important;

}

.image-select.type-2 > .dropdown-menu {

  width: 120px !important;

  margin-left: calc(50% - 60px) !important;

  margin-top: 10px !important;

  padding: 10px 15px;

}

.image-select.type-2 > .dropdown-menu li:not(:last-child) {

  padding-bottom: 10px !important;

}

.image-select.type-2 > .dropdown-menu li a .text {

  justify-content: start;

  gap: 8px;

}

.image-select.type-2 > .dropdown-menu li a .text img {

  width: 25px;

  height: 25px;

  border-radius: 50%;

}

.image-select.type-2 .filter-option-inner-inner {

  gap: 0 !important;

  width: 34px;

}



.tf-cur {

  display: flex;

  align-items: center;

  gap: 28px;

}

.tf-cur .tf-cur-item {

  display: flex;

  align-items: center;

  gap: 5px;

}

.tf-cur .select-default {

  border: unset;

}

.tf-cur .select-default option {

  font-weight: 600;

  font-size: 13px;

  line-height: 25px;

}



.tf-my-dropdown {

  border-radius: 3px;

  border: 1px solid var(--gray-5);

  min-width: 160px;

  z-index: 100;

  padding: 9px;

}

.tf-my-dropdown i {

  font-size: 20px;

}

.tf-my-dropdown .btn-select {

  display: flex;

  align-items: center;

  gap: 6px;

  height: 100%;

}

.tf-my-dropdown:hover {

  border-color: var(--primary);

  color: var(--primary);

}

.tf-my-dropdown::after {

  display: none;

}

.tf-my-dropdown .list {

  border: 1px solid var(--gray-5);

  min-width: 160px;

  padding: 15px 5px;

  border-radius: 0;

  max-height: 68vh;

  isolation: isolate;

  overscroll-behavior-y: contain;

  overflow-y: auto;

  transform: unset;

  transition: unset;

  box-shadow: unset;

}

.tf-my-dropdown .list .option {

  padding: 0 15px;

  line-height: 30px;

  min-height: unset;

  color: var(--secondary);

  -webkit-transition: all 0.3s ease-in-out;

  -moz-transition: all 0.3s ease-in-out;

  -ms-transition: all 0.3s ease-in-out;

  -o-transition: all 0.3s ease-in-out;

  transition: all 0.3s ease-in-out;

  font-weight: 500;

}

.tf-my-dropdown .list .option:hover, .tf-my-dropdown .list .option.selected {

  background-color: var(--gray-4);

  color: var(--black);

}

.tf-my-dropdown.tf-control-sort {

  min-width: 204px;

}

.tf-my-dropdown.tf-control-sort .list {

  min-width: 204px;

}



/*------------ sections ---------------- */

.breakcrumbs {

  display: flex;

  align-items: center;

  gap: 0px 10px;

  flex-wrap: wrap;

}

.breakcrumbs i {

  font-size: 10px;

}



.s-breakcrumbs-page {

  padding-top: 20px;

  padding-bottom: 50px;

}



.flat-title {

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 20px;

  padding-bottom: 10px;

  margin-bottom: 30px;

  border-bottom: 1px solid var(--gray-5);

}



.flat-title-has-icon {

  display: flex;

  align-items: center;

  gap: 9px;

}

.flat-title-has-icon .icon {

  width: 30px;

  height: 30px;

  border-radius: 50%;

  background-color: var(--primary);

  color: var(--white);

  display: flex;

  align-items: center;

  justify-content: center;

}

.flat-title-has-icon .icon i {

  font-size: 20px;

}



.flat-title-2 {

  display: flex;

  flex-wrap: wrap;

  justify-content: space-between;

  align-items: end;

  gap: 20px;

  margin-bottom: 30px;

}

.flat-title-2 .box-title {

  display: grid;

  gap: 10px;

}



.parallax-image {

  height: 410px;

}



.s-search-faq {

  position: relative;

}

.s-search-faq .parallax-image {

  height: 350px;

}

.s-search-faq .content {

  display: grid;

  gap: 10px;

}

.s-search-faq .box-title {

  display: grid;

  gap: 30px;

}

.s-search-faq .wrap {

  position: absolute;

  width: 100%;

  top: 50%;

  transform: translateY(-50%);

  left: 0;

  z-index: 2;

}

.s-search-faq .form-search-3 {

  max-width: 540px;

  width: 100%;

  margin-left: auto;

  margin-right: auto;

}



.s-faq {

  display: flex;

  align-items: start;

  gap: 30px;

  flex-wrap: wrap;

}

.s-faq .flat-title-tab-faq {

  width: 100%;

}

.s-faq .wrap {

  width: 100%;

}



.s-shoping-cart .cart-bottom {

  display: flex;

  align-items: center;

  justify-content: space-between;

  padding: 18px 24px;

  flex-wrap: wrap;

  border-bottom: 1px solid var(--gray-5);

  gap: 15px;

}

.s-shoping-cart .box-btn {

  display: flex;

  align-items: center;

  justify-content: flex-end;

  gap: 10px;

  flex-wrap: wrap;

}

.s-shoping-cart .box-btn .tf-btn {

  width: 100%;

}

.s-shoping-cart .form-discount {

  margin-bottom: 20px;

}



.tf-checkout-wrap .page-checkout {

  display: grid;

  gap: 40px;

}

.tf-checkout-wrap .title {

  margin-bottom: 20px;

}

.tf-checkout-wrap .title.has-account {

  max-width: 702px;

  width: 100%;

  display: flex;

  align-items: center;

  justify-content: space-between;

}



.s-track-order .parallax-image {

  height: 585px;

  border-radius: 8px;

  overflow: hidden;

}

.s-track-order .content {

  position: relative;

}

.s-track-order .wrap {

  display: grid;

  gap: 20px;

  padding: 15px;

  border-radius: 8px;

  background-color: var(--white);

  position: absolute;

  top: 50%;

  transform: translateY(-50%);

  left: 15px;

  right: 15px;

}

.s-track-order .box-title {

  display: grid;

  gap: 10px;

}

.s-track-order .form-trackorder {

  gap: 18px;

}

.s-track-order .form-trackorder fieldset label {

  margin-bottom: 5px;

}



.box-sale-wrap {

  position: absolute;

  top: 15px;

  left: 15px;

  border-radius: 50%;

  background-color: var(--primary);

  width: 50px;

  height: 50px;

  display: flex;

  align-items: center;

  justify-content: center;

  flex-direction: column;

}

.box-sale-wrap p {

  color: var(--white);

  font-weight: 700;

  text-align: center;

  text-transform: uppercase;

  font-family: "Poppins", serif;

}

.box-sale-wrap.pst-default {

  top: 15px;

  left: 15px;

}

.box-sale-wrap.type-2 {

  width: 56px;

  height: 56px;

}

.box-sale-wrap.type-3 {

  width: 100px;

  height: 100px;

}

.box-sale-wrap.relative {

  top: unset;

  left: unset;

  right: unset;

  bottom: unset;

}

.box-sale-wrap.style-2 {

  border-radius: 8px;

  top: unset;

  bottom: 0;

  left: 0;

  width: 100px;

}



.cls-category .img-box {

  border-radius: 8px;

}

.cls-category.style-abs {

  position: relative;

}

.cls-category.style-abs .content {

  position: absolute;

  left: 15px;

  bottom: 20px;

  display: grid;

  gap: 10px;

}

.cls-category.style-abs.abs-2 .content {

  left: 15px;

  right: 15px;

  bottom: 15px;

}

.cls-category.style-abs.abs-2 .box-btn .tf-btn {

  max-width: 148px;

  width: 100%;

}



.has-bg-img {

  background-repeat: no-repeat;

  background-size: cover;

}



.banner-image-product {

  padding: 60px 0px;

  display: flex;

  align-items: center;

  justify-content: center;

  gap: 30px;

}

.banner-image-product .content {

  display: grid;

  gap: 10px;

}

.banner-image-product .content .box-title {

  display: grid;

  gap: 15px;

}

.banner-image-product.style-abs {

  position: relative;

  border-radius: 8px;

  overflow: hidden;

}

.banner-image-product.style-abs > * {

  width: 100%;

}

.banner-image-product.style-abs .img-box {

  min-height: 300px;

}

.banner-image-product.style-abs .content {

  position: absolute;

  top: 50%;

  transform: translateY(-50%);

  left: 15px;

  right: 15px;

}

.banner-image-product.style-abs.type-abs-2 .content {

  gap: 15px;

}

.banner-image-product.style-abs.type-abs-2 .box-title {

  gap: 19px;

}

.banner-image-product.style-abs.type-abs-2 img {

  min-height: 300px;

}

.banner-image-product.style-abs.type-abs-2 .box-btn {

  display: flex;

  align-items: center;

  gap: 15px;

  flex-wrap: wrap;

}

.banner-image-product.style-abs.type-abs-2 .box-btn .price {

  display: flex;

  align-items: start;

}

.banner-image-product.style-abs.type-abs-2 .box-btn .price span {

  font-size: 15px;

  line-height: 30px;

}



.banner-image-product-2 {

  padding: 20px 0px;

  position: relative;

}

.banner-image-product-2 .inner {

  display: flex;

  align-items: center;

  gap: 30px;

  position: relative;

}

.banner-image-product-2 .item-banner {

  padding: 50px 30px;

  border-radius: 8px;

}

.banner-image-product-2 .item-image {

  position: absolute;

  top: 50%;

  transform: translateY(-50%);

  right: 2%;

}

.banner-image-product-2 .item-image.item-2 {

  right: 30%;

}

.banner-image-product-2.type-sp-2 {

  padding: 14px 0px;

}

.banner-image-product-2.type-sp-2 .inner {

  gap: 15px;

}

.banner-image-product-2.type-sp-2 .item-banner {

  padding: 51px 23px;

}



.banner-image-product-3 {

  position: relative;

  width: 100%;

}

.banner-image-product-3 .wrap {

  position: relative;

}

.banner-image-product-3 .image {

  display: inline-flex;

  border-radius: 8px;

  overflow: hidden;

}

.banner-image-product-3 .img-item {

  position: absolute;

  top: 0;

  right: 15px;

  bottom: 20%;

  left: 50%;

}

.banner-image-product-3 .box-title {

  display: grid;

  gap: 7px;

}

.banner-image-product-3 .content {

  position: absolute;

  bottom: 12px;

  left: 26px;

  right: 26px;

  display: grid;

  gap: 11px;

}

.banner-image-product-3.style-2 .content {

  gap: 24px;

  top: 50px;

  bottom: 80px;

}



.wg-cls {

  position: relative;

}

.wg-cls.type-abs .content {

  position: absolute;

  left: 50%;

  top: 50%;

  transform: translateY(-50%);

  right: 5px;

}



.s-banner-wrapper {

  display: flex;

  gap: 20px;

  flex-wrap: wrap;

}

.s-banner-wrapper .wrap-item-1 {

  width: 100%;

}

.s-banner-wrapper .wrap-item-2 {

  width: 100%;

}

.s-banner-wrapper .wrap-item-2 .img-box {

  height: 100%;

}

.s-banner-wrapper .wrap-item-3 {

  display: flex;

  flex-direction: column;

  gap: 20px;

  width: 100%;

}

.s-banner-wrapper .wrap-item-3 > * {

  width: 100%;

}



.grid-cls {

  display: grid;

  gap: 30px;

}

.grid-cls .grid-item1 {

  grid-area: aa;

}

.grid-cls .grid-item2 {

  grid-area: bb;

}

.grid-cls .grid-item3 {

  grid-area: cc;

}

.grid-cls .grid-item4 {

  grid-area: dd;

}

.grid-cls .grid-item5 {

  grid-area: ee;

}

.grid-cls .grid-item6 {

  grid-area: ff;

}

.grid-cls .grid-item7 {

  grid-area: gg;

}

.grid-cls.grid-cls-v2 {

  display: flex;

  flex-direction: column;

  gap: 10px;

}

.grid-cls.grid-cls-v3 {

  display: flex;

  flex-direction: column;

  gap: 20px;

}

.grid-cls.grid-cls-v4 {

  display: flex;

  flex-direction: column;

  gap: 20px;

}

.grid-cls.grid-cls-v5 {

  display: unset;

}



.banner-product {

  display: flex;

  align-items: center;

  gap: 20px 50px;

  padding: 50px 0px;

  flex-wrap: wrap;

}

.banner-product .product-wrap {

  display: flex;

  align-items: center;

  gap: 15px;

  width: 100%;

  flex-wrap: wrap-reverse;

}

.banner-product .box-title {

  display: grid;

  gap: 16px;

}

.banner-product .info-product {

  display: grid;

  gap: 8px;

}

.banner-product .other-item {

  display: flex;

  gap: 20px;

  flex-direction: column;

}

.banner-product .other-item .card-product {

  padding: 10px;

}

.banner-product .other-item .card-product .card-product-wrapper {

  max-width: 144px;

}

.banner-product.style-2 .product-wrap {

  gap: 15px 0px;

}

.banner-product.style-2 .product-wrap .item-product {

  margin-top: -74px;

  margin-bottom: -98px;

  pointer-events: none;

}

.banner-product.style-2 .info-product .name {

  font-size: 47px;

  line-height: 48px;

}

.banner-product.style-3 {

  justify-content: space-between;

  gap: 30px;

}

.banner-product.style-3 .other-item {

  gap: 10px;

}

.banner-product.style-3 .product-wrap {

  flex-direction: column;

  align-items: start;

  gap: 15px;

  width: auto;

}

.banner-product.style-3 .content {

  display: grid;

  gap: 15px;

}



.banner-product-2 {

  position: relative;

}

.banner-product-2 .image img {

  height: 100%;

  object-fit: cover;

}

.banner-product-2 .content {

  position: absolute;

  top: 15px;

  bottom: 15px;

  left: 15px;

  right: 15px;

  display: flex;

  flex-direction: column;

  justify-content: space-between;

}

.banner-product-2 .box-bottom {

  display: grid;

  gap: 9px;

}

.banner-product-2 .box-price {

  display: flex;

  gap: 2px;

}

.banner-product-2 .box-price .text {

  padding-top: 7px;

}



.banner-product-2 .content {

  top: 30px;

  bottom: 30px;

  left: 30px;

  right: 30px;

}



.slider-wrap {

  display: flex;

  gap: 30px;

  align-items: start;

  flex-wrap: wrap;

}

.slider-wrap.style-2 {

  align-items: unset;

}



.cls-product {

  border-radius: 8px;

}



.cls-product {

  display: flex;

  align-items: center;

  gap: 15px;

  padding: 15px;

}

.cls-product .content {

  display: grid;

  gap: 15px;

}

.cls-product .box-title {

  display: grid;

  gap: 5px;

}

.cls-product.style-2 .content {

  gap: 12px;

}

.cls-product.style-2 .box-price > p {

  display: flex;

  align-items: start;

  gap: 6px;

}

.cls-product.style-2 .box-price > p .text {

  padding-top: 10px;

}



.banner-slide-product {

  display: flex;

  align-items: center;

  justify-content: center;

  flex-wrap: wrap;

  gap: 20px;

  padding: 20px 40px;

  border-radius: 8px;

  width: 100%;

}

.banner-slide-product .image {

  display: inline-flex;

  max-width: 397px;

  width: 100%;

}

.banner-slide-product .content {

  display: grid;

  gap: 15px;

}

.banner-slide-product .content .br-line {

  max-width: 368px;

  width: 100%;

  background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, #FFFFFF 53.13%, rgba(255, 255, 255, 0) 100%);

}

.banner-slide-product .property-list {

  display: flex;

  gap: 30px;

}

.banner-slide-product .property-list li {

  display: grid;

  position: relative;

  gap: 10px;

}

.banner-slide-product .property-list li:not(:last-child)::after {

  content: "";

  position: absolute;

  right: -14px;

  top: 0;

  bottom: 0;

  width: 1px;

  background: linear-gradient(0deg, rgba(255, 255, 255, 0) 0%, #FFFFFF 53.13%, rgba(255, 255, 255, 0) 100%);

}

.banner-slide-product .property-list .box-infor {

  display: grid;

  gap: 6px;

}



.slide-wrap-2 {

  display: flex;

  gap: 20px;

  flex-wrap: wrap;

}

.slide-wrap-2 .wrap {

  display: flex;

  flex-direction: column;

  gap: 20px;

  width: 100%;

}

.slide-wrap-2 .wrap .cls-product {

  width: 100%;

}



.wg-cls-2 {

  display: flex;

  flex-direction: column;

  align-items: center;

  gap: 10px;

  padding: 13px 10px;

  text-align: center;

}

.wg-cls-2 .image {

  position: relative;

  max-width: 74px;

  width: 100%;

}

.wg-cls-2 .tf-overlay {

  border-radius: 50%;

  background-color: #F3F3F3;

}



.slider-category .swiper-slide {

  height: auto;

}

.slider-category .swiper-slide > * {

  height: 100%;

}

.slider-category .swiper-slide:first-child .wg-cls-2 {

  border-left: 1px solid var(--gray-5);

}

.slider-category .swiper-slide .wg-cls-2 {

  border: 1px solid var(--gray-5);

  border-left: unset;

}



.tf-brand {

  padding: 25px 0px;

  gap: 30px;

}

.tf-brand.type-sp-2 {

  padding: 38px 0px;

}



.brand-item {

  -webkit-transition: all 0.3s ease-in-out;

  -moz-transition: all 0.3s ease-in-out;

  -ms-transition: all 0.3s ease-in-out;

  -o-transition: all 0.3s ease-in-out;

  transition: all 0.3s ease-in-out;

  opacity: 1;

}

.brand-item:hover {

  opacity: 0.5;

}



.brand-list {

  display: grid;

  grid-template-columns: repeat(2, 1fr);

}

.brand-list li {

  aspect-ratio: 133/80;

  padding-top: 8px;

  padding-bottom: 8px;

  border-bottom: 1px solid var(--gray-6);

}

.brand-list li:nth-child(1) {

  padding-top: 0;

  padding-left: 0px;

}

.brand-list li:nth-child(2) {

  padding-top: 0;

  padding-right: 0px;

}

.brand-list li:nth-child(odd) {

  padding-right: 10px;

  border-right: 1px solid var(--gray-6);

}

.brand-list li:nth-child(even) {

  padding-left: 8px;

}

.brand-list li:nth-last-child(1) {

  padding-right: 0;

  padding-bottom: 0px;

  border-bottom: unset;

}

.brand-list li:nth-last-child(2) {

  padding-left: 0;

  padding-bottom: 0px;

  border-bottom: unset;

}

.brand-list img {

  width: 100%;

  object-fit: cover;

}



.s-banner .content-banner {

  display: grid;

  gap: 10px;

  padding: 50px 0px;

}

.s-banner.style-2 .content-banner {

  margin-bottom: 30px;

  display: flex;

  flex-direction: column;

  justify-content: center;

}

.s-banner:not(.style-2) .card-product {

  box-shadow: 0px 9px 30px 0px rgba(0, 0, 0, 0.0784313725);

}



.banner-countdown {

  display: flex;

  align-items: center;

  justify-content: center;

  padding: 50px 0px;

  flex-wrap: wrap;

}

.banner-countdown .content {

  display: grid;

  gap: 30px;

}

.banner-countdown .box-title {

  display: grid;

  gap: 12px;

}

.banner-countdown .bottom {

  display: grid;

  gap: 10px;

}



.main-page {

  max-width: 1570px;

  margin: auto;

}



.tf-grid-product {

  display: flex;

  flex-wrap: wrap;

  gap: 30px;

}



.wg-404 h1 {

  font-size: 100px;

  line-height: 100px;

  margin-bottom: 15px;

}

.wg-404 .notice {

  margin-bottom: 30px;

}



.wg-map {

  padding-bottom: 167px;

  position: relative;

}

.wg-map .bottom {

  display: flex;

  align-items: end;

  position: absolute;

  bottom: 0;

  left: 15px;

  z-index: 5;

  pointer-events: none;

}

.wg-map .contact-wrap {

  padding: 30px;

  border-radius: 8px;

  box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.1019607843);

  background-color: var(--white);

  display: grid;

  gap: 30px;

  pointer-events: all;

}

.wg-map .contact-wrap .box-title {

  display: grid;

  gap: 10px;

}

.wg-map .contact-info {

  padding: 15px;

  display: grid;

  gap: 20px;

  pointer-events: all;

}

.wg-map .info-list {

  display: flex;

  align-items: start;

  gap: 5px 15px;

  flex-wrap: wrap;

}

.wg-map .info-list li {

  display: flex;

  align-items: start;

  gap: 15px;

}

.wg-map .info-list li .icon {

  font-size: 16px;

  margin-top: 4px;

  padding-right: 8px;

  border-right: 1px solid #4F4F4F;

  display: flex;

}

.wg-map .form-contact {

  flex-direction: column;

  display: flex;

  gap: 18px;

}

.wg-map .form-contact fieldset input {

  padding: 11px 10px 11px 14px;

}



.checkout-status .checkout-wrap {

  display: flex;

  position: relative;

  max-width: 1200px;

  width: 100%;

  margin: 0px auto;

}

.checkout-status .checkout-bar {

  display: block;

  width: 100%;

  height: 4px;

  border-radius: 999px;

  background-color: var(--gray-5);

  position: absolute;

  top: 22px;

  left: 0;

  z-index: 0;

}

.checkout-status .checkout-bar::after {

  content: "";

  position: absolute;

  height: 4px;

  left: 0;

  top: 0;

  background-color: var(--primary);

  border-radius: 999px;

}

.checkout-status .checkout-bar.first::after {

  width: 16.6666666667%;

}

.checkout-status .checkout-bar.next::after {

  width: 50%;

}

.checkout-status .checkout-bar.end::after {

  width: 100%;

}

.checkout-status .icon {

  display: flex;

  align-items: center;

  justify-content: center;

  border-radius: 50%;

  background-color: var(--primary);

  width: 48px;

  height: 48px;

  color: var(--white);

}

.checkout-status .icon i {

  font-size: 24px;

}

.checkout-status .step-payment {

  display: flex;

  flex-direction: column;

  gap: 15px;

  align-items: center;

  width: 33.3333333333%;

  position: relative;

  z-index: 2;

  text-align: center;

}

.checkout-status .step-payment .icon {

  position: relative;

  z-index: 2;

}



.tf-cart-sold {

  margin-bottom: 16px;

}



.wg-testimonial {

  display: flex;

  align-items: start;

  gap: 20px;

  padding: 15px;

  box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.0509803922);

  background-color: var(--white);

  border-radius: 8px;

}

.wg-testimonial .entry_image {

  width: 50px;

  height: 50px;

  border-radius: 50%;

  overflow: hidden;

  flex-shrink: 0;

}

.wg-testimonial .entry_meta {

  display: flex;

  align-items: center;

  gap: 10px;

}

.wg-testimonial .entry_meta .br-line {

  height: 14px;

  width: 1px;

  background-color: var(--gray-4);

}

.wg-testimonial .content {

  display: grid;

  gap: 18px;

}

.wg-testimonial .box-title .entry_name {

  margin-bottom: 2px;

}

.wg-testimonial .box-title .entry_meta {

  margin-bottom: 6px;

}

.wg-testimonial .list-star i {

  font-size: 14px;

}



.wg-testimonial {

  padding: 30px;

}



.file-delete .remove {

  cursor: pointer;

}



.my-account-nav {

  display: flex;

  flex-direction: column;

  gap: 10px;

  position: sticky;

  top: 0;

}

.my-account-nav .my-account-nav-item {

  display: flex;

  width: 100%;

  border: 1px solid var(--gray-4);

  padding: 15px 20px;

  border-radius: 3px;

  font-size: 16px;

  font-weight: 500;

  line-height: 20px;

  position: relative;

}

.my-account-nav .my-account-nav-item:hover, .my-account-nav .my-account-nav-item.active {

  background-color: var(--gray-5);

  color: var(--primary);

  border-color: var(--gray-5);

}



.parallax-style {

  border-radius: 8px;

  overflow: hidden;

  height: 300px;

}



.entry-privary {

  display: grid;

  gap: 30px;

}

.entry-privary .wrap {

  display: grid;

  gap: 20px;

}

.entry-privary .wrap .text-list {

  display: grid;

  gap: 10px;

}



/*-------------- Responsive ----------------- */

/* Media Queries

-------------------------------------------------------------- */

@media (min-width: 426px) {

  .banner-product .info-product .tag-new {

    font-weight: 300;

    font-size: 16px;

    line-height: 19px;

    letter-spacing: 11.2px;

  }

  .banner-product .info-product .name {

    font-weight: 100;

    font-size: 58px;

    line-height: 71px;

  }

  .banner-product .box-price .start {

    font-weight: 300;

    font-size: 21px;

    line-height: 25px;

  }

  .banner-product .box-price .price {

    font-weight: 700;

    font-size: 73px;

    line-height: 88px;

  }

}

@media (min-width: 576px) {

  .modal-newleter .modal-content {

    padding: 40px;

  }

  .modal-newleter .icon-close-popup {

    right: 10px;

    top: 10px;

  }

  .w-sm-auto {

    width: auto !important;

  }

  .sw-banner .card-product .card-product-wrapper {

    max-width: 192px !important;

  }

  .product-thumb-slider.thumbs-right {

    flex-direction: unset;

    gap: 30px;

    align-items: start;

  }

  .product-thumb-slider.thumbs-right .tf-product-view-thumbs {

    width: 69px;

  }

  .product-thumb-slider.thumbs-right.type-right-2 {

    gap: 20px;

  }

  .product-thumb-slider.thumbs-right.type-right-2 .tf-product-view-main .tf-image-view {

    aspect-ratio: 471/337;

    max-width: 471px;

  }

  .card-product.style-thums-2 .card-product-info {

    display: flex;

    align-items: start;

  }

  .card-product.style-thums-2 .box-infor-detail {

    max-width: 268px;

    width: 100%;

  }

  .card-product.style-thums-2 .name-product {

    -webkit-line-clamp: 1;

  }

  .card-product.style-row.type-row-3 {

    gap: 12px !important;

    align-items: center;

  }

  .card-product.style-row.type-row-3 .card-product-wrapper {

    max-width: 144px;

  }

  .card-product.style-row.row-small .card-product-wrapper {

    max-width: 160px !important;

  }

  .s-shoping-cart .box-btn .tf-btn {

    max-width: 219px;

  }

  .form-add-comment {

    max-width: 384px;

    width: 100%;

  }

  .form-add-comment fieldset {

    display: flex;

    flex-direction: row;

    align-items: center;

    justify-content: space-between;

  }

  .form-add-comment fieldset.align-items-sm-start label {

    padding-top: 10px;

  }

  .form-add-comment input,

  .form-add-comment textarea {

    padding: 9px 10px !important;

    max-width: 294px;

    width: 100%;

  }

  .form-add-comment .btn-submit {

    margin-left: 90px;

  }

  .tf-grid-layout.sm-col-2 {

    grid-template-columns: 1fr 1fr;

  }

  .tf-grid-layout.sm-col-3 {

    grid-template-columns: repeat(3, 1fr);

  }

  .tf-grid-layout.sm-col-4 {

    grid-template-columns: repeat(4, 1fr);

  }

  .tf-grid-layout.sm-col-5 {

    grid-template-columns: repeat(5, 1fr);

  }

  .tf-grid-layout.sm-col-6 {

    grid-template-columns: repeat(6, 1fr);

  }

  .tf-grid-layout.sm-col-7 {

    grid-template-columns: repeat(7, 1fr);

  }

  .news-item .entry_infor_news h6 a {

    -webkit-line-clamp: 2;

    -webkit-box-orient: vertical;

    display: -webkit-box;

    overflow: hidden;

  }

  .news-item .entry_infor_news .subs {

    -webkit-line-clamp: 3;

    -webkit-box-orient: vertical;

    display: -webkit-box;

    overflow: hidden;

  }

}

@media (min-width: 768px) {

  .s-faq {

    gap: 60px;

    flex-wrap: nowrap;

  }

  .s-faq .wrap {

    padding-left: 38px;

    border-left: 1px solid var(--gray-5);

  }

  .s-faq .flat-title-tab-faq {

    max-width: 254px;

  }

  .tf-compare-col {

    min-width: 280px;

  }

  .tf-compare-col:first-child {

    min-width: 280px;

  }

  .modal-quick-view .quickview-image {

    padding: 20px 0px 20px 20px;

    width: 43%;

  }

  .modal-quick-view .quickview-info-wrap {

    width: 57%;

  }

  .modal-quick-view .quickview-info-inner {

    position: absolute;

    inset: 0;

    overflow-y: auto;

    padding: 24px;

  }

  .countdown-box-2 .countdown__timer {

    gap: 41px;

  }

  .countdown-box-2 .countdown__item:not(:last-child)::after {

    right: -20px;

  }

  .banner-product.style-3 .product-wrap {

    gap: 40px;

  }

  .banner-product.style-3 .content {

    gap: 21px;

  }

  .grid-cls {

    display: grid;

    grid-template-areas: "bb bb" "bb bb" "aa cc";

    grid-template-columns: 1fr 1fr;

  }

  .grid-cls.grid-cls-v2 {

    display: grid;

    grid-template-columns: calc(50% - 5px) calc(50% - 5px);

    grid-template-areas: "aa bb" "cc bb" "dd ee";

  }

  .grid-cls.grid-cls-v2.type-2 {

    grid-template-areas: "aa bb" "cc bb" "dd ee" "ff gg";

  }

  .grid-cls.grid-cls-v3 {

    grid-template-columns: calc(67% - 15px) calc(33% - 15px);

    grid-template-areas: "bb cc";

  }

  .grid-cls.grid-cls-v4 {

    display: grid;

    grid-template-columns: 1fr 1fr 1fr;

    grid-template-areas: "bb bb aa" "bb bb cc";

  }

  .slide-wrap-2 .wrap {

    flex-direction: row;

  }

  .s-banner-wrapper .wrap-item-3 {

    flex-direction: row;

  }

  .tf-grid-product-item {

    width: calc(50% - 15px);

  }

  .card-product.style-row {

    flex-direction: row;

    align-items: start;

  }

  .card-product.style-row .card-product-wrapper {

    height: 100%;

    max-width: 274px;

    width: 100%;

  }

  .card-product.style-row .card-product-btn {

    max-width: 200px;

    margin-left: 20px;

    height: 100%;

  }

  .card-product.style-row .card-product-btn::after {

    position: absolute;

    content: "";

    left: -20px;

    top: 0;

    bottom: 0;

    width: 1px;

    height: 100%;

    background-color: var(--gray-5);

  }

  .card-product.style-row.type-row-2 {

    gap: 20px;

    flex-direction: column;

  }

  .card-product.style-row.type-row-2 .box-infor-detail {

    gap: 30px;

  }

  .card-product.style-row.type-row-2 .card-product-wrapper {

    max-width: unset;

  }

  .card-product.style-row.type-row-2 .countdown-box {

    display: flex;

    gap: 5px 20px;

    justify-content: space-between;

    flex-wrap: wrap;

  }

  .card-product.style-row.type-row-2 .countdown-box .js-countdown {

    max-width: 268px;

    width: 100%;

  }

  .tf-product-info-wrap {

    height: 100%;

  }

  .tf-product-info-wrap .tf-product-info-list {

    height: 100%;

  }

  .thumbs-slider {

    max-width: 652px;

  }

  .canvas-sidebar {

    max-width: 406px;

  }

  .canvas-sidebar .canvas-header {

    padding: 20px;

    padding-bottom: 10px;

  }

  .canvas-sidebar .canvas-header::after {

    left: 32px;

    right: 32px;

  }

  .canvas-sidebar .canvas-body {

    padding: 20px;

    padding-top: 20px;

  }

  .canvas-sidebar-account .canvas-header::after {

    left: 20px;

    right: 20px;

  }

  .tf-grid-layout.md-col-2 {

    grid-template-columns: 1fr 1fr;

  }

  .tf-grid-layout.md-col-3 {

    grid-template-columns: repeat(3, 1fr);

  }

  .tf-grid-layout.md-col-4 {

    grid-template-columns: repeat(4, 1fr);

  }

  .tf-grid-layout.md-col-5 {

    grid-template-columns: repeat(5, 1fr);

  }

  .tf-grid-layout.md-col-6 {

    grid-template-columns: repeat(6, 1fr);

  }

  .tf-grid-layout.md-col-7 {

    grid-template-columns: repeat(7, 1fr);

  }

}

@media (min-width: 992px) {

  .parallax-style {

    height: 500px;

  }

  .tf-lg-width {

    max-width: 720px;

  }

  .popup-style.popup-shopping-cart {

    width: 450px;

  }

  .ft-heading {

    line-height: 27px;

    font-family: "Poppins", serif;

  }

  .countdown-box-2 .countdown__timer {

    gap: 73px;

  }

  .countdown-box-2 .js-countdown {

    padding: 14px 26px;

  }

  .countdown-box-2 .countdown__item {

    min-width: 75px;

  }

  .countdown-box-2 .countdown__item:not(:last-child)::after {

    right: -36px;

  }

  .countdown-box-2 .countdown__value {

    font-weight: 400;

    font-size: 60px;

    line-height: 73px;

  }

  .countdown-box-2 .countdown__label {

    font-weight: 600;

    font-size: 15px;

    line-height: 24px;

  }

  .s-banner.style-2 .content-banner {

    gap: 15px;

    height: 100%;

  }

  .s-banner.style-2 .content-banner .title {

    margin-bottom: 25px;

  }

  .s-banner.style-2 .content-banner .price {

    font-size: 100px;

    line-height: 121px;

    display: flex;

    align-items: start;

    gap: 2px;

  }

  .s-banner.style-2 .content-banner .price span {

    padding-top: 19px;

    font-weight: 300;

    font-size: 50px;

    line-height: 61px;

  }

  .grid-cls.grid-cls-v3 {

    display: grid;

  }

  .card-product.style-row.type-row-2 .card-product-wrapper {

    max-width: 290px;

  }

  .s-banner-wrapper .wrap-item-1 {

    width: calc(30% - 10px);

  }

  .s-banner-wrapper .wrap-item-2 {

    width: calc(70% - 10px);

  }

  .s-banner-wrapper .wrap-item-2 .img-box {

    height: 100%;

  }

  .box-sale-wrap.position1 {

    top: 46px;

    right: -28px;

    left: unset;

    bottom: unset;

  }

  .s-track-order .wrap {

    gap: 30px;

    padding: 30px;

    left: 88px;

    max-width: 560px;

    width: 100%;

    right: unset;

  }

  .flat-sidebar-checkout {

    max-width: 450px;

    padding: 30px;

  }

  .s-search-faq .parallax-image {

    height: 490px;

  }

  .tab-review {

    width: 100%;

  }

  .tab-review .tab-rating-wrap {

    width: 50%;

    padding-right: 30px;

    border-right: 1px solid var(--gray-5);

  }

  .tab-review.style-2 {

    flex-direction: column;

  }

  .tab-review.style-2 .tab-rating-wrap {

    max-width: unset;

    width: 100%;

    padding-right: unset;

    flex-direction: row;

    justify-content: space-between;

    flex-wrap: nowrap;

    gap: 75px;

  }

  .tab-review.style-2 .tab-rating-wrap .br-line {

    height: 140px;

    background-color: var(--gray-4);

  }

  .tab-review.style-2 .rating-progress-list {

    max-width: 383px;

    width: 100%;

  }

  .tab-review.style-2 .tab-review-wrap {

    flex-direction: row;

  }

  .tab-review.style-2 .tab-review-wrap .review-list {

    padding-right: 40px;

    border-right: 1px solid var(--gray-5);

  }

  .tab-review.style-2 .tab-review-wrap .add-comment-wrap {

    max-width: 384px;

    width: 100%;

    flex-shrink: 0;

  }

  .tf-topbar {

    padding: 12px 0px;

  }

  .tf-topbar.style-2 {

    padding: 7.5px 0px;

  }

  .wg-pagination {

    padding-top: 30px;

  }

  .wg-pagination li {

    width: 56px;

    height: 56px;

  }

  .wg-pagination li i {

    font-size: 26px;

  }

  .tf-grid-layout.lg-col-2 {

    grid-template-columns: 1fr 1fr;

  }

  .tf-grid-layout.lg-col-3 {

    grid-template-columns: repeat(3, 1fr);

  }

  .tf-grid-layout.lg-col-4 {

    grid-template-columns: repeat(4, 1fr);

  }

  .tf-grid-layout.lg-col-5 {

    grid-template-columns: repeat(5, 1fr);

  }

  .tf-grid-layout.lg-col-6 {

    grid-template-columns: repeat(6, 1fr);

  }

  .tf-grid-layout.lg-col-7 {

    grid-template-columns: repeat(7, 1fr);

  }

}

@media (min-width: 1025px) {

  .tf-table-page-cart {

    width: 100%;

  }

  .tf-table-page-cart tr > *:nth-child(1) {

    width: 676px;

  }

  .tf-table-page-cart tr > *:nth-child(2) {

    width: 256px;

  }

  .tf-table-page-cart tr > *:nth-child(3) {

    width: 284px;

  }

  .tf-table-page-cart tr > *:nth-child(4) {

    width: 197px;

  }

}

@media (min-width: 1200px) {

  .s-banner:not(.style-2) .swiper {

    padding-bottom: 50px;

  }

  .modal-quick-view .icon-close-popup {

    right: 20px;

    top: 20px;

  }

  .modal-quick-view .entry_name {

    padding-right: 10px;

  }

  .gridLayout-fullWidth .flat-grid-product.layout-tablist-1 .card-product, .gridLayout-fullWidth .flat-grid-product.layout-tablist-2 .card-product {

    justify-content: space-between;

  }

  .gridLayout-fullWidth .flat-grid-product.layout-tablist-2 {

    grid-template-columns: repeat(2, 1fr) !important;

  }

  .container-full {

    padding-left: 40px;

    padding-right: 40px;

  }

  .thumbs-left .thumbs-slider {

    flex-direction: row;

  }

  .thumbs-left .tf-product-media-thumbs {

    width: 80px;

    flex-shrink: 0;

  }

  .thumbs-left .container-swiper {

    max-width: unset;

    width: unset;

    margin: unset;

  }

  .grid-banner .grid-item2 .cls-product {

    gap: 6px;

    padding: 18px 0px 18px 19px;

  }

  .grid-banner .grid-item3 .cls-product {

    padding: 18px 0px 13px 16px;

    gap: 5px;

  }

  .checkout-status {

    padding-top: 5px !important;

  }

  .wg-map .contact-wrap {

    max-width: 414px;

    width: 100%;

  }

  .btn-direc {

    padding-top: 10px;

  }

  .mt-xl--10 {

    margin-top: -10px;

  }

  .wg-404 h1 {

    font-size: 200px;

    line-height: 200px;

    margin-bottom: 30px;

  }

  .wg-404 .notice {

    margin-bottom: 50px;

  }

  .main-page {

    margin-top: -65px;

    border-radius: 8px;

    background-color: var(--white);

  }

  .banner-countdown {

    padding: 80px 0px;

  }

  .banner-countdown .content {

    gap: 45px;

  }

  .banner-countdown .box-price .price-text {

    margin-bottom: 1px;

  }

  .banner-countdown .box-price .price {

    font-weight: 600;

    font-size: 80px;

    line-height: 94px;

  }

  .s-banner .content-banner {

    gap: 4px;

    padding: 96px 0px 110px;

  }

  .s-banner .content-banner .title {

    margin-bottom: 18px;

  }

  .p-lg-30 {

    padding: 30px !important;

  }

  .p-lg-30.style-border {

    padding: 29px !important;

  }

  .line-clamp-xl-3 {

    -webkit-line-clamp: 3 !important;

  }

  .grid-cls {

    grid-template-areas: "aa bb bb cc" "aa bb bb cc" "aa bb bb cc";

    grid-template-columns: 1fr 1fr 1fr 1fr;

  }

  .grid-cls.grid-cls-v2 {

    grid-template-columns: 29.2% 40.2% 29.2%;

    grid-template-areas: "aa bb cc" "dd bb ee";

  }

  .grid-cls.grid-cls-v2.type-2 {

    grid-template-columns: calc(28% - 6.6667px) calc(44% - 6.6667px) calc(28% - 6.6667px);

    grid-template-areas: "aa bb cc" "dd bb ee" "ff bb gg";

  }

  .grid-cls.grid-cls-v5 {

    display: grid;

    gap: 10px;

    grid-template-columns: calc(78% - 5px) calc(22% - 5px);

    grid-template-areas: "aa bb" "aa cc" "aa dd";

  }

  .h-xl-100 {

    height: 100%;

  }

  .slide-wrap-2 {

    margin-bottom: 203px;

  }

  .section-wrap {

    padding: 30px;

    box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.0509803922);

    border-radius: 8px;

    background: #FFFFFF;

    margin-top: -203px;

  }

  .banner-slide-product {

    max-width: 1070px;

  }

  .slide-wrap-2 .wrap {

    width: unset;

  }

  .slide-wrap-2 .cls-product {

    max-width: 400px;

    height: 100%;

  }

  .cls-product {

    gap: 34px;

    padding: 20px 29px 20px 15px;

  }

  .cls-product .content {

    display: grid;

    gap: 22px;

  }

  .cls-product .box-title {

    display: grid;

    gap: 5px;

  }

  .cls-product.style-2 {

    padding: 5px 10px 6px 20px;

    gap: 6px;

  }

  .cls-product.style-2 .box-title {

    display: grid;

    gap: 6px;

  }

  .lh-xl-25 {

    line-height: 25px !important;

  }

  .lh-xl-24 {

    line-height: 24px !important;

  }

  .lh-xl-22 {

    line-height: 22px !important;

  }

  .lh-xl-15 {

    line-height: 15px !important;

  }

  .lh-xl-14 {

    line-height: 14px !important;

  }

  .lh-xl-17 {

    line-height: 17px !important;

  }

  .lh-xl-31 {

    line-height: 31px !important;

  }

  .lh-xl-33 {

    line-height: 33px !important;

  }

  .lh-xl-49 {

    line-height: 49px !important;

  }

  .lh-xl-71 {

    line-height: 71px !important;

  }

  .mb-xl--5 {

    margin-bottom: -5px;

  }

  .banner-image-product-3 .wrap {

    margin-right: 28px;

  }

  .slider-wrap .banner-image-product-3 {

    width: calc(40% - 15px);

  }

  .slider-wrap .tf-sw-products {

    width: calc(60% - 15px);

  }

  .slider-wrap.style-2 .width-item-1 {

    width: calc(28% - 15px);

  }

  .slider-wrap.style-2 .width-item-2 {

    width: calc(72% - 15px);

  }

  .slider-wrap.style-3 .width-item-1 {

    width: calc(40% - 15px);

  }

  .slider-wrap.style-3 .width-item-2 {

    width: calc(60% - 15px);

  }

  .banner-image-product-3 .name {

    font-size: 50px;

    line-height: 50px;

  }

  .banner-image-product-3 .sub-name {

    font-size: 100px;

    line-height: 97px;

  }

  .banner-product .other-item {

    max-width: 417px;

    width: 100%;

  }

  .s-banner-wrapper {

    flex-wrap: nowrap;

  }

  .s-banner-wrapper .wrap-item-1 {

    max-width: 285px;

  }

  .s-banner-wrapper .wrap-item-2 .img-box {

    height: 100%;

  }

  .s-banner-wrapper .wrap-item-3 {

    max-width: 360px;

    flex-direction: column;

  }

  .tf-grid-product-item {

    flex: 1;

    max-width: calc((100% - 90px) / 4);

  }

  .gap-xl-20 {

    gap: 20px !important;

  }

  .gap-xl-12 {

    gap: 12px !important;

  }

  .gap-xl-6 {

    gap: 6px !important;

  }

  .card-product.style-row {

    gap: 30px;

  }

  .card-product.style-row .card-product-info {

    gap: 14px;

  }

  .card-product.style-row .card-product-info .price-wrap {

    margin-top: -2px;

  }

  .card-product.style-row .card-product-btn {

    margin-left: 30px;

  }

  .card-product.style-row .card-product-btn::after {

    left: -30px;

  }

  .card-product .list-product-btn {

    top: 15px;

    right: 15px;

    gap: 15px;

  }

  .card-product .list-product-btn li {

    opacity: 0;

    visibility: hidden;

    transform: translateX(10px);

    -webkit-transition: all 0.3s ease-in-out;

    -moz-transition: all 0.3s ease-in-out;

    -ms-transition: all 0.3s ease-in-out;

    -o-transition: all 0.3s ease-in-out;

    transition: all 0.3s ease-in-out;

  }

  .card-product .box-icon {

    width: 40px;

    height: 40px;

  }

  .card-product:hover .list-product-btn li {

    opacity: 1;

    visibility: visible;

  }

  .card-product:hover .list-product-btn li:nth-child(1) {

    transform: translateX(0px);

  }

  .card-product:hover .list-product-btn li:nth-child(2) {

    transform: translateX(0px);

    transition-delay: 0.05s;

  }

  .card-product:hover .list-product-btn li:nth-child(3) {

    transform: translateX(0px);

    transition-delay: 0.1s;

  }

  .card-product:hover .list-product-btn li:nth-child(4) {

    transform: translateX(0px);

    transition-delay: 0.15s;

  }

  .card-product.style-border {

    padding: 24px;

  }

  .card-product.style-border.type-bd-2 {

    padding: 20px;

    border: unset;

  }

  .card-product.style-4 .card-product-wrapper {

    max-width: 200px;

    width: 100%;

  }

  .wg-cls.type-abs .content {

    left: 162px;

  }

  .banner-image-product {

    gap: 64px;

  }

  .banner-image-product .content .box-title {

    gap: 23px;

  }

  .banner-image-product.style-abs .content {

    left: 50px;

  }

  .banner-image-product.style-abs.type-abs-2 .content {

    gap: 34px;

    left: 42px;

  }

  .banner-image-product.style-abs.type-abs-2 .box-btn .price span {

    font-size: 30px;

    line-height: 50px;

  }

  .banner-image-product-2 .item-image.position2 {

    left: 45px;

    right: unset;

  }

  .banner-image-product-2 .item-image.position3 {

    right: 36px;

  }

  .lh-lg-42 {

    line-height: 42px;

  }

  .lh-lg-50 {

    line-height: 50px;

  }

  .lh-lg-38 {

    line-height: 38px;

  }

  .cls-category.style-abs .content {

    bottom: 21px;

    left: 21px;

  }

  .box-sale-wrap {

    top: 30px;

    left: 21px;

  }

  .tab-review .tab-rating-wrap {

    max-width: 424px;

    width: 100%;

  }

  .tf-product-info-list {

    gap: 30px 40px;

  }

  .tf-product-info-content .product-info-name {

    margin-bottom: 4px;

  }

  .tf-product-info-content .infor-center {

    gap: 20px;

  }

  .news-item.style-row .entry_image {

    max-width: 370px;

    width: 100%;

  }

  .news-item.style-row .content {

    width: 100%;

  }

  .social-list {

    gap: 21px;

  }

  .social-list a {

    width: 46px;

    height: 46px;

  }

  .ft-bottom .social-list {

    margin-bottom: 10px;

  }

  .ft-bottom .social-list li {

    display: flex;

  }

  .flat-grid-product {

    gap: 30px;

  }

  .tf-grid-layout {

    column-gap: 30px;

    row-gap: 40px;

  }

  .tf-grid-layout.row-gap-xl-30 {

    row-gap: 30px;

  }

  .tf-grid-layout.xl-col-2 {

    grid-template-columns: 1fr 1fr;

  }

  .tf-grid-layout.xl-col-3 {

    grid-template-columns: repeat(3, 1fr);

  }

  .tf-grid-layout.xl-col-4 {

    grid-template-columns: repeat(4, 1fr);

  }

  .tf-grid-layout.xl-col-5 {

    grid-template-columns: repeat(5, 1fr);

  }

  .tf-grid-layout.xl-col-6 {

    grid-template-columns: repeat(6, 1fr);

  }

  .tf-grid-layout.xl-col-7 {

    grid-template-columns: repeat(7, 1fr);

  }

}

@media (min-width: 1440px) {

  .gap-xxl-51 {

    gap: 51px !important;

  }

  .gridLayout-fullWidth .flat-grid-product.layout-tablist-1 {

    grid-template-columns: repeat(2, 1fr) !important;

  }

  .flat-container {

    padding: 40px;

  }

  .gap-xxl-0 {

    gap: 0 !important;

  }

  .wg-map .bottom {

    left: 88px;

  }

  .wg-map .contact-info {

    padding: 40px;

  }

  .wg-map .info-list {

    gap: 30px;

  }

  .fs-xxl-70 {

    font-size: 70px !important;

  }

  .banner-slide-product {

    gap: 20px;

    padding: 24px 88px 25px 45px;

  }

  .banner-slide-product .box-title {

    margin-bottom: 10px;

  }

  .banner-slide-product .br-line {

    margin-bottom: 19px;

  }

  .banner-slide-product .property-list {

    margin-bottom: 11px;

  }

  .lh-xxl-73 {

    line-height: 73px !important;

  }

  .banner-image-product-3 {

    max-width: 578px;

  }

  .banner-image-product-3 .img-item {

    bottom: unset;

    left: unset;

  }

  .banner-image-product-3.style-2 .img-item {

    top: unset;

    bottom: -60px;

    right: 0px;

    cursor: unset;

    max-width: 408px;

  }

  .banner-product {

    gap: 112px;

    padding: 21px 0px;

  }

  .banner-product .product-wrap {

    gap: 23px;

  }

  .lh-xxl-71 {

    line-height: 71px !important;

  }

  .overflow-xxl-visible {

    overflow: visible !important;

  }

  .card-product .group-btn {

    position: relative;

    display: unset;

  }

  .card-product .group-btn .price-wrap {

    -webkit-transition: all 0.3s ease-in-out;

    -moz-transition: all 0.3s ease-in-out;

    -ms-transition: all 0.3s ease-in-out;

    -o-transition: all 0.3s ease-in-out;

    transition: all 0.3s ease-in-out;

    opacity: 1;

    visibility: visible;

    transform: translateY(0%);

    overflow: hidden;

  }

  .card-product .group-btn .list-product-btn {

    position: absolute;

    z-index: 21;

    top: 0;

    left: 0;

    right: 0;

    bottom: 0;

    justify-content: flex-start;

    gap: 10px;

    opacity: 0;

    -webkit-transition: all 0.2s ease-in-out;

    -moz-transition: all 0.2s ease-in-out;

    -ms-transition: all 0.2s ease-in-out;

    -o-transition: all 0.2s ease-in-out;

    transition: all 0.2s ease-in-out;

  }

  .card-product .group-btn .list-product-btn li {

    transform: translateX(-20px);

    opacity: 0;

    visibility: hidden;

  }

  .card-product:hover .group-btn .price-wrap {

    transform: translateY(-100%);

    opacity: 0;

    visibility: hidden;

  }

  .card-product:hover .group-btn .list-product-btn {

    opacity: 1;

  }

  .card-product:hover .group-btn .list-product-btn li {

    opacity: 1;

    visibility: visible;

  }

  .tf-nav-menu .sub-menu-list {

    padding: 30px 34px 30px 30px;

  }

  .countdown-box .countdown__value {

    font-size: 20px;

    line-height: 22px;

    width: 46px;

    height: 46px;

  }

  .banner-image-product-2 .inner {

    gap: 45px;

  }

  .banner-image-product-2 .item-banner {

    padding: 51px 100px 51px 134px;

  }

  .banner-image-product-2 .item-image {

    right: 65px;

  }

  .banner-image-product-2 .item-image.item-2 {

    right: 410px;

  }

  .tf-checkout-wrap {

    gap: 50px;

  }

  .tf-product-info-list.style-2 .tf-product-info-choose-option {

    gap: 30px;

  }

  .tf-product-info-list.style-2 .tf-product-info-choose-option .product-box-btn {

    margin-left: 20px;

    width: 100%;

  }

  .tf-product-info-list.style-2 .tf-product-info-choose-option .product-box-btn .tf-btn {

    width: 100%;

  }

  .flat-product-des-list {

    gap: 40px;

  }

  .flat-product-des-list.style-2 .flat-title-tab-product-des:not(:last-child) {

    padding-bottom: 40px;

  }

  .flat-product-des-list.bg-white {

    padding: 40px;

  }

  .tab-review {

    gap: 40px;

  }

  .tab-review .tab-rating-wrap {

    padding-right: 40px;

  }

  .tab-review .rating-filter-wrap {

    margin-bottom: 10px;

  }

  .tf-product-info-wrap {

    margin-left: -52px;

  }

  .tf-product-info-choose-option {

    max-width: 259px;

  }

  .footer-col-block.type-sp-2 {

    gap: 24px;

  }

  .footer-col-block.type-sp-2 .ft-menu-list {

    gap: 20px;

  }

  .tf-grid-layout.xxl-col-2 {

    grid-template-columns: 1fr 1fr;

  }

  .tf-grid-layout.xxl-col-3 {

    grid-template-columns: repeat(3, 1fr);

  }

  .tf-grid-layout.xxl-col-4 {

    grid-template-columns: repeat(4, 1fr);

  }

  .tf-grid-layout.xxl-col-5 {

    grid-template-columns: repeat(5, 1fr);

  }

  .tf-grid-layout.xxl-col-6 {

    grid-template-columns: repeat(6, 1fr);

  }

  .tf-grid-layout.xxl-col-7 {

    grid-template-columns: repeat(7, 1fr);

  }

  .tf-header .inner-header {

    padding: 30px 0px;

  }

  .tf-header .nav-icon {

    gap: 30px;

  }

  .tf-header.style-2 .inner-header {

    padding: 26px 0px;

  }

  .tf-header.style-2 .header-center {

    margin-right: -11px;

  }

  .tf-header.style-2 .header-right {

    margin-right: 55px;

  }

  .tf-header.style-4 .inner-header {

    padding: 26px 0px;

  }

  .tf-header.style-4 .nav-icon.style-2 {

    gap: 30px;

  }

  .header-bt-left {

    gap: 30px;

  }

  .box-navigation .box-nav-menu {

    gap: 30px;

  }

  .box-navigation.style-2 .item-link {

    padding-right: 30px !important;

  }

}

@media (min-width: 1600px) {

  .gridLayout-fullWidth .flat-grid-product.layout-tabgrid-1, .gridLayout-fullWidth .flat-grid-product.layout-tabgrid-2 {

    grid-template-columns: repeat(6, 1fr);

  }

  .box-btn-slide-2.sw-nav-effect .nav-swiper {

    width: 60px;

    height: 60px;

    -webkit-transition: all 0.3s ease-in-out;

    -moz-transition: all 0.3s ease-in-out;

    -ms-transition: all 0.3s ease-in-out;

    -o-transition: all 0.3s ease-in-out;

    transition: all 0.3s ease-in-out;

    visibility: hidden;

  }

  .box-btn-slide-2.sw-nav-effect .nav-swiper i {

    font-size: 24px;

  }

  .box-btn-slide-2.sw-nav-effect .nav-swiper.nav-prev-products-2 {

    left: -15px;

  }

  .box-btn-slide-2.sw-nav-effect .nav-swiper.nav-next-products-2 {

    right: -15px;

  }

  .box-btn-slide-2.sw-nav-effect:hover .nav-swiper {

    visibility: visible;

  }

  .box-btn-slide-2.sw-nav-effect:hover .nav-swiper.nav-prev-products-2 {

    left: -30px;

  }

  .box-btn-slide-2.sw-nav-effect:hover .nav-swiper.nav-next-products-2 {

    right: -30px;

  }

  .box-btn-slide-item.hover-sw .nav-swiper {

    display: block;

    max-width: 72px;

  }

  .container-wrap {

    display: flex;

    gap: 30px;

  }

  .container-wrap .container-sidebar {

    max-width: 284px;

    width: 100%;

  }

  .container-wrap .container-sidebar .swiper {

    max-width: 284px;

  }

  .container-wrap .container-main {

    max-width: 1176px;

    width: 100%;

    margin-left: auto;

    margin-right: auto;

  }

  .container-sidebar {

    display: flex !important;

    flex-direction: column;

    gap: 40px;

  }

  .countdown-box .countdown__timer {

    justify-content: space-between;

  }

  .countdown-box .countdown__item {

    position: relative;

    padding: 0px 4px;

  }

  .countdown-box .countdown__item:not(:last-child)::after {

    content: "";

    position: absolute;

    right: -13px;

    top: 15px;

    width: 4px;

    height: 4px;

    background-color: var(--gray-4);

    border-radius: 50%;

  }

  .countdown-box .countdown__item:not(:last-child)::before {

    content: "";

    position: absolute;

    right: -13px;

    top: 27px;

    width: 4px;

    height: 4px;

    background-color: var(--gray-4);

    border-radius: 50%;

  }

  .banner-image-product-2.type-sp-2 {

    padding: 14px 0px;

  }

  .banner-image-product-2.type-sp-2 .item-banner {

    padding: 51px 23px;

  }

  .banner-image-product-2.style-2 .inner {

    flex-direction: column;

    gap: 30px;

  }

  .banner-image-product-2.style-2 .item-banner {

    padding: 13px 285px 27px 78px;

  }

  .banner-image-product-2.style-2 .box-price {

    padding-left: 45px;

    background-color: unset;

    width: unset;

    height: unset;

  }

  .tf-product-media-wrap.bg-white {

    padding: 40px 0px 40px 40px;

  }

  .tf-product-info-wrap.bg-white {

    padding: 40px 40px 40px 0px;

  }

  .tf-main-product.style-2 .row {

    padding: 40px;

  }

  .ft-inner {

    display: flex;

    gap: 119px;

  }

  .sidebar-item.type-space-2 {

    gap: 30px;

  }

  .nav-category-wrap .nav-title {

    gap: 8px;

    padding-right: 5px;

  }

}

@media (max-width: 1599px) {

  .tab-review .form-add-comment {

    max-width: unset;

  }

  .tab-review .form-add-comment .btn-submit {

    margin-left: unset;

    margin-right: unset;

    width: 100%;

  }

  .tab-review .form-add-comment .btn-submit .tf-btn {

    padding: 10px;

    width: 100%;

  }

  .tab-review .form-add-comment input,

  .tab-review .form-add-comment textarea {

    max-width: unset;

  }

  .tab-review .form-add-comment fieldset {

    flex-direction: column;

    align-items: unset;

    justify-content: unset;

  }

  .tab-review .form-add-comment fieldset.rate {

    flex-direction: row;

  }

}

@media (max-width: 1439px) {

  .offcanvas-compare .tf-compare-wrap {

    padding-right: 0;

    margin-right: 0;

    gap: 25px;

  }

  .offcanvas-compare .tf-compare-item > .btns-repeat {

    right: -22px;

  }

  .offcanvas-compare .icon-close-popup {

    top: 10px;

    right: 10px;

    width: 25px;

    height: 25px;

    font-size: 10px;

  }

  .card-product .group-btn .tooltip {

    display: none;

  }

  .tf-header .nav-icon-item p {

    display: none;

  }

  h1,

  .h1 {

    font-size: 40px;

    line-height: 55px;

  }

  h2,

  .h2 {

    font-size: 40px;

    line-height: 55px;

  }

  .s-blog-detail {

    gap: 30px;

  }

  .s-blog-detail .box-direction {

    gap: 50px;

  }

  .s-blog-detail .box-direction.content-right {

    position: sticky;

    top: 25%;

  }

  .ft-body-center .ft-center {

    padding: 50px 0px;

  }

}

@media (max-width: 1199px) {

  .tf-table-wishlist .wishlist-item_price {

    width: 200px;

  }

  .tf-table-wishlist .wishlist-item_stock {

    width: 150px;

  }

  .tf-table-wishlist .wishlist-item_action {

    width: 200px;

  }

  .canvas-filter-product {

    background-color: var(--white);

  }

  .canvas-filter-product .canvas-body {

    padding: 15px 20px;

    overscroll-behavior-y: contain;

    overflow-y: auto;

  }

  .canvas-filter-product .canvas-body::-webkit-scrollbar {

    width: 3px;

  }

  .canvas-filter-product .canvas-body::-webkit-scrollbar-thumb {

    background-color: var(--primary);

    border-radius: 5px;

  }

  .canvas-filter-product {

    position: fixed;

    bottom: 0;

    z-index: 3000;

    display: flex;

    flex-direction: column;

    background-clip: padding-box;

    outline: 0;

    max-width: 320px !important;

  }

  .handle-canvas {

    -webkit-transition: all 0.3s ease-in-out;

    -moz-transition: all 0.3s ease-in-out;

    -ms-transition: all 0.3s ease-in-out;

    -o-transition: all 0.3s ease-in-out;

    transition: all 0.3s ease-in-out;

  }

  .handle-canvas.left {

    top: 0;

    left: 0;

    transform: translateX(-100%);

  }

  .handle-canvas.right {

    top: 0;

    right: 0;

    transform: translateX(100%);

  }

  .handle-canvas.show {

    transform: none;

  }

  .tf-sp-6 {

    padding-top: 50px;

    padding-bottom: 50px;

  }

  .banner-image-product > * {

    width: 50%;

  }

  .banner-image-product-2.type-sp-2 .inner {

    flex-wrap: wrap;

  }

  .banner-image-product-2.type-sp-2 .inner .name {

    width: 100%;

  }

  .tf-header .nav-icon.style-3 {

    gap: 10px;

  }

  .tf-header .nav-icon.style-3 li:not(:last-child) {

    padding-right: 10px;

  }

  .s-blog-detail .box-direction {

    max-width: 100px;

  }

  .btn-direc {

    gap: 10px;

  }

  .btn-direc p {

    display: none;

  }

}

@media (max-width: 1024px) {

  .tf-table-page-cart tr > *:first-child {

    padding-left: 0px !important;

  }

  .tf-table-page-cart th {

    padding: 10px 0px;

  }

  .tf-table-page-cart th:first-child {

    padding: 10px 0px 10px 25px;

  }

  .tf-table-page-cart th:last-child {

    padding: 10px 25px 10px 0px;

  }

  .tf-table-page-cart .tf-cart-item td {

    padding-right: 10px;

  }

  .tf-table-page-cart .tf-cart-item td:first-child {

    padding: 10px 25px 10px 0px;

  }

  .tf-table-page-cart .tf-cart-item td:last-child {

    padding: 10px;

  }

  .s-shoping-cart .cart-bottom {

    padding-left: 0px;

    padding-right: 0px;

  }

}

@media (max-width: 991px) {

  .canvas-mb {

    max-width: 320px;

  }

  .form-account-details .form-content,

  .wd-form-address .form-content {

    gap: 10px;

  }

  .form-reset-password.def {

    gap: 10px;

  }

  .tf-table-wishlist {

    display: block;

  }

  .wg-map {

    padding-bottom: 0;

  }

  .wg-map iframe {

    height: 300px;

  }

  .wg-map .bottom {

    margin-top: 30px;

    position: unset;

    gap: 30px;

    flex-wrap: wrap;

  }

  .wg-map .contact-wrap {

    width: 100%;

    padding: 15px;

  }

  form .cols {

    display: flex;

    gap: 10px;

  }

  h1,

  .h1 {

    font-size: 30px;

    line-height: 40px;

  }

  h4 {

    font-size: 26px;

    line-height: 30px;

  }

  .comment-wrap .author-wrap {

    gap: 10px;

  }

  .comment-wrap .comment-list {

    gap: 30px;

  }

  .comment-wrap .comment-list .author-wrap:not(:last-child) {

    padding-bottom: 30px;

  }

  .box-direction {

    display: none !important;

  }

}

@media (max-width: 767px) {

  #goTop {

    bottom: 20px;

    right: 20px;

  }

  .card-product.style-img-border .card-product-wrapper {

    padding: 5px;

  }

  .banner-slide-product {

    padding: 20px 15px;

  }

  .flat-title-tab-faq .tf-title {

    margin-bottom: 15px;

    padding-bottom: 15px;

  }

  .flat-title-tab-faq .menu-tab-line {

    display: flex;

    overflow: auto;

    white-space: nowrap;

  }

  .faq-item {

    gap: 20px;

  }

  .sw-dot-default {

    margin-top: 15px;

  }

  .sw-dot-default .swiper-pagination-bullet {

    width: 8px;

    height: 8px;

  }

  .sw-dot-default .swiper-pagination-bullet-active {

    width: 20px;

  }

  .wd-form-address {

    padding: 20px 15px;

  }

  .offcanvas-compare .tf-compare-list {

    flex-direction: column;

    gap: 20px;

  }

  .offcanvas-compare .tf-compare-wrap {

    margin: 0;

    padding: 15px 0;

    width: 100%;

  }

  .offcanvas-compare .tf-compare-item {

    flex-direction: column;

    width: 150px;

    gap: 7px;

  }

  .offcanvas-compare .tf-compare-buttons {

    width: 100%;

  }

  .offcanvas-compare .tf-compare-btn {

    width: 100%;

  }

  .popup-style .popup-header {

    padding: 15px 0px 15px;

    margin: 0px 15px;

  }

  .popup-style .popup-body {

    padding: 20px 15px;

  }

  .popup-style .popup-footer {

    padding: 15px;

  }

  .tf-control-layout li a,

  .tf-control-view .tf-sort {

    padding: 7px;

  }

  .tf-control-layout li a i,

  .tf-control-view .tf-sort i {

    font-size: 18px;

  }

  .tf-grid-product-2 .banner-image-product img,

  .tf-grid-product-2 .cls-category img {

    min-height: 300px;

    max-height: 350px;

  }

  .grid-cls.grid-cls-v1 {

    display: flex;

    flex-direction: column;

  }

  .card-product .tooltip {

    display: none;

  }

  .banner-image-product {

    flex-wrap: wrap;

  }

  .banner-image-product .image {

    padding: 15px;

  }

  .banner-image-product > * {

    width: 100%;

  }

  .banner-image-product-2 .item-banner {

    padding: 30px;

  }

  .banner-image-product-2 .item-image {

    width: 250px;

  }

  .banner-image-product-2 .inner {

    position: relative;

    flex-wrap: wrap;

    gap: 15px 30px;

  }

  h2,

  .h2 {

    font-size: 30px;

    line-height: 40px;

  }

  h3 {

    font-size: 25px;

    line-height: 1.24;

  }

  form .cols {

    flex-wrap: wrap;

  }

  .payment-choose-card .payment-body {

    padding: 15px;

  }

  .flat-title-tab-product-des .tab-main {

    padding: 15px;

  }

  .tf-product-info-wrap {

    margin-top: 40px;

  }

  .tf-product-info-choose-option {

    padding: 15px;

  }

  .news-item.style-row {

    flex-wrap: wrap;

  }

  .news-item.style-row .entry_image {

    width: 100%;

  }

  .news-item.style-row .content {

    width: 100%;

  }

  .footer-heading-mobile {

    display: block;

    position: relative;

    padding-right: 20px;

  }

  .footer-heading-mobile::after {

    position: absolute;

    content: "";

    right: 10px;

    top: 50%;

    transform: translateY(-50%);

    width: 12px;

    height: 1px;

    background-color: var(--black);

    transition: 0.25s ease-in-out;

  }

  .footer-heading-mobile::before {

    position: absolute;

    content: "";

    right: 15px;

    top: 50%;

    transform: translate(-50%, -50%);

    width: 1px;

    height: 12px;

    background-color: var(--black);

    transition: 0.25s ease-in-out;

  }

  .footer-col-block.open .footer-heading-mobile::before {

    opacity: 0;

  }

  .footer-col-block.open .footer-heading-mobile::after {

    transform: translate(0%, -50%) rotate(180deg);

  }

  .footer-col-block .tf-collapse-content {

    display: none;

  }

}

@media (max-width: 575px) {

  .grid-cls-v2:not(.type-2) .card-product .card-product-wrapper {

    max-width: unset;

  }

  .product-thumb-slider {

    overflow: hidden;

  }

  .product-thumb-slider,

  .slider-thumb-deal {

    max-width: 575px;

    width: 100%;

  }

  .box-sale-wrap.style-2 {

    top: 0;

    bottom: unset;

    height: 45px;

    width: 90px;

  }

  .flat-grid-product .card-product {

    align-items: center;

  }

  .flat-grid-product .card-product .card-product-info {

    width: 100%;

  }

  .flat-animate-tab .flat-title-tab-default {

    overflow: auto;

    white-space: nowrap;

  }

  .flat-animate-tab .flat-title-tab-default .menu-tab-line {

    gap: 15px;

  }

  .banner-image-product-2 .item-banner {

    padding: 30px 15px;

  }

  .banner-image-product-2 .item-banner .inner h3 {

    width: 100%;

  }

  .banner-image-product-2 .item-image {

    top: unset;

    bottom: 20px;

    right: 5px;

    transform: unset;

    width: 200px;

  }

  .banner-image-product-2.type-sp-2 .item-banner {

    padding: 30px 15px;

  }

  .banner-image-product-2.type-sp-2 .item-image {

    top: 10px;

    bottom: unset;

    right: 5px;

    transform: unset;

  }

  .flat-title-tab-product-des .card-usually {

    max-width: unset;

  }

  .tab-usually {

    justify-content: center;

  }

}

@media (max-width: 425px) {

  .card-product.style-row.row-small-2 {

    flex-direction: column;

  }

  .card-product.style-row.row-small-2 .card-product-wrapper {

    max-width: unset;

  }

}



/*# sourceMappingURL=styles.css.map */





.logo-site{

  width: 125px !important;

}



.mb-body{

  padding-top: 20px !important;

}





.Buildinslide {

  width: 100%;

  height: 60vh;

  position: relative;

  overflow: hidden;

}



.Buildinslide-wrapper {

  display: flex;

  width: 100%;

  height: 100%;

  transition: transform 0.5s ease-in-out;

}



.Buildinslide-slide {

  position: relative;

  min-width: 100%;

  height: 100%;

  background-size: cover;         /* ✅ Makes image cover the entire area */

  background-repeat: no-repeat;   /* ✅ Prevents image from repeating */

  background-position: center;    /* ✅ Keeps image centered */

  background-attachment: scroll;

  display: flex;

  align-items: center;

  justify-content: flex-start;

}



.Buildinslide-overlay {

  position: absolute;

  inset: 0;

  z-index: 1;

}



.Buildinslide-content {

  position: relative;

  z-index: 2;

  color: #fff;

  padding-left: 10%;

  max-width: 600px;

}



.Buildinslide-content h1 {

  font-size: 3rem;

  margin-bottom: 1rem;

  font-weight: 700;

}



.Buildinslide-content p {

  font-size: 1.2rem;

  margin-bottom: 1.5rem;

}



.Buildinslide-btn {

  display: inline-block;

  background-color: #fcb900;

  color: #000;

  padding: 12px 24px;

  text-decoration: none;

  font-weight: bold;

  border-radius: 30px;

  transition: background 0.3s;

}



.Buildinslide-btn:hover {

  background-color: #ffa500;

}



.Buildinslide-nav {

  position: absolute;

  top: 50%;

  width: 100%;

  display: flex;

  justify-content: space-between;

  transform: translateY(-50%);

  z-index: 3;

}



.Buildinslide-nav button {

  background: rgba(0, 0, 0, 0.5);

  border: none;

  color: #fff;

  font-size: 1.8rem;

  cursor: pointer;

  padding: 14px 18px;

  border-radius: 50%;

  margin: 0 15px;

  transition: all 0.3s ease;

  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);

  backdrop-filter: blur(4px);

}



.Buildinslide-nav button:hover {

  background: rgba(255, 255, 255, 0.9);

  color: #000;

  transform: scale(1.1);

}



@media (max-width: 768px) {

  .Buildinslide-slide {

    justify-content: center;

    text-align: center;

  }



  .Buildinslide-overlay {

    position: absolute;

    inset: 0;

    background: linear-gradient(to right, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.2));

    z-index: 1;

  }



  .Buildinslide-content {

    padding-left: 0;

    padding-right: 10%;

    padding-left: 10%;

  }



  .Buildinslide-content h1 {

    font-size: 2rem;

  }

}







#numbers{

  margin-top: 40px !important;

  padding-bottom: 20px !important;

}





.tf-my-dropdown {

  border-radius: 3px;

  border: 1px solid var(--gray-5);

  min-width: 160px;

  z-index: 100;

  padding: 9px;

  display: none;

}







.buildin-category {

  max-width: 1520px;

  margin: 0 auto;

  padding: 20px 20px;

  padding-bottom: 50px;

  display: flex;

  flex-direction: column;

  gap: 24px;

}



.category-row {

  display: flex;

  flex-wrap: wrap;

  gap: 24px;

}



.category-box {

  flex: 1 1 calc(50% - 12px);

  height: 300px;

  background-size: cover;

  background-position: center;

  border-radius: 12px;

  position: relative;

  overflow: hidden;

  display: flex;

  align-items: flex-end;

}



.category-box::before {

  content: '';

  position: absolute;

  inset: 0;

  background: rgba(0, 0, 0, 0.6);

  z-index: 1;

}



.category-content {

  position: relative;

  z-index: 2;

  padding: 20px 25px;

  color: #fff;

  text-align: left;

}



.category-title {

  font-size: 30px;

  font-weight: 600;

  margin-bottom: 8px;

}



.category-desc {

  font-size: 16px;

  margin-bottom: 16px;

  line-height: 1.4;

}



.shop-now-btn {

  background-color: #fcb900;

  color: #000;

  padding: 10px 22px;

  font-size: 14px;

  border: none;

  border-radius: 25px;

  text-transform: uppercase;

  font-weight: 500;

  text-decoration: none;

  display: inline-block;

  transition: background 0.3s ease;

}



.shop-now-btn:hover {

  background-color: #e0a800;

}



/* Responsive for mobile */

@media (max-width: 768px) {

  .category-box {

    flex: 1 1 100%;

  }

  

}





.tf-icon-box .icon-box i {

  font-size: 30px;

  color:#c21d2e !important;

}









.custom-colour-filter {

  padding: 20px 20px;

  max-width: 1540px;

  margin: auto;

}



.form-title {

  font-size: 28px;

  font-weight: 700;

  margin-bottom: 10px;

  text-align: center;

}



.form-desc {

  font-size: 16px;

  margin-bottom: 30px;

  text-align: center;

}



form {

  width: 100%;

}



.form-row {

  display: flex;

  flex-wrap: wrap;

  gap: 20px;

  align-items: center;

  justify-content: space-between;

  margin-bottom: 20px;

}



.form-row input {

  flex: 1 1 20%;

  padding: 10px;

  border: 1px solid #ccc;

  font-size: 16px;

  min-width: 180px;

}



.form-row button {

  background-color: #390a7c;

  color: #fff;

  padding: 14px 32px;

  font-weight: bold;

  border: none;

  border-radius: 4px;

  font-size: 14px;

  cursor: pointer;

  white-space: nowrap;

  min-width: 120px;

}



.form-row button:hover {

  background-color: #2e0863;

}



.checkbox-label {

  display: flex;

  align-items: flex-start;

  gap: 10px;

  font-size: 14px;

  margin-bottom: 15px;

}



.checkbox-label input {

  margin-top: 3px;

}



.disclaimer {

  color: #6b46c1;

  font-size: 12px;

  margin-bottom: 20px;

}



.radio-group {

  display: flex;

  flex-wrap: wrap;

  align-items: center;

  gap: 15px 20px;

  margin-bottom: 20px;

}



.radio-group p {

  margin-bottom: 0;

  font-weight: bold;

  font-size: 14px;

}



.radio-group label {

  font-size: 14px;

}



@media screen and (max-width: 992px) {

  .form-row {

    flex-wrap: wrap;

    gap: 15px;

  }



  .form-row input, .form-row button {

    flex: 1 1 100%;

  }



  .form-row button {

    justify-self: flex-end;

    margin-top: 10px;

  }



  .form-title {

    font-size: 22px;

  }

}







.custom-colour-tabs {

  display: flex;

  flex-wrap: wrap;

  justify-content: center;

  gap: 30px;

  padding: 20px;

  font-family: Arial, sans-serif;

  padding-bottom: 20px;

  max-width: 1540px;

  margin: 0 auto;

}



.tab-item {

  text-align: center;

  cursor: pointer;

  position: relative;

}



.tab-color {

  width: 140px;

  height: 36px;

  border-radius: 6px;

  box-shadow: 0px 4px 10px rgba(0,0,0,0.1);

  margin-bottom: 8px;

}



/* Color backgrounds */

.all-colors {

  background: linear-gradient(to right, red, orange, yellow, green, limegreen, purple, blue);

}



.grey {

  background: #e7e3dc;

}



.blue {

  background: #4269e1;

}



.brown {

  background: #924f06;

}



.red-orange {

  background: linear-gradient(to right, #cc1100 50%, #f8a908 50%);

}



.yellow-green {

  background: linear-gradient(to right, #f2ed82 50%, #6db500 50%);

}



.purple-pink {

  background: linear-gradient(to right, #9c3cc2 50%, #f6bfd0 50%);

}



.white-offwhite {

  background: linear-gradient(to right, #ffffff 50%, #f8f0da 50%);

  border: 1px solid #ccc;

}



/* Text styles */

.tab-item p {

  margin: 0;

  font-size: 12px;

  color: #4d4d4d;

}



/* Underline style */

.underline {

  height: 2px;

  background-color: #2d0050;

  width: 140px;

  margin: 6px auto 0 auto;

}



/* Responsive */

@media (max-width: 768px) {

  .tab-color {

    width: 100px;

    height: 30px;

  }



  .tab-item p {

    font-size: 11px;

  }



  .underline {

    width: 100px;

  }

}











.product-color {

  max-width: 520px;

  

}



.product-color h4 {

  font-size: 14px;

  margin-bottom: 12px;

  color: #222;

  font-weight: 600;

  letter-spacing: 0.5px;

}



.shade-grid {

  display: grid;

  grid-template-columns: repeat(4, 1fr);

  gap: 10px;

}



.shade-box {

  width: 100%;

  padding-top: 100%; /* Square */

  border-radius: 12px;

  position: relative;

  cursor: pointer;

  background-color: #fcefee;

  transition: box-shadow 0.3s ease;

}



.shade-box:nth-child(2) { background-color: #f4dfd7; }

.shade-box:nth-child(3) { background-color: #fae9e0; }

.shade-box:nth-child(4) { background-color: #f1e3e0; }

.shade-box:nth-child(5) { background-color: #fcdfe0; }

.shade-box:nth-child(6) { background-color: #fcdad7; }

.shade-box:nth-child(7) { background-color: #fddede; }

.shade-box:nth-child(8) { background-color: #e8d3d3; }



.shade-box.selected {

  outline: 2px solid #d6cfea;

  box-shadow: 0 0 0 3px #f6f2fc;

}



.shade-box .tick {

  position: absolute;

  top: 6px;

  left: 6px;

  width: 20px;

  height: 20px;

  background: white;

  border-radius: 50%;

  display: flex;

  align-items: center;

  justify-content: center;

  font-size: 12px;

  color: #777;

  box-shadow: 0 1px 3px rgba(0,0,0,0.1);

}



@media (max-width: 480px) {

  .shade-grid {

    grid-template-columns: repeat(3, 1fr);

  }

}



@media (max-width: 320px) {

  .shade-grid {

    grid-template-columns: repeat(2, 1fr);

  }

}







.mega-menu-item .menu-heading {

  font-weight: 600;

  padding-bottom: 10px;

  color:#c11d2d;

  margin-bottom: 15px;

  border-bottom: 1px solid var(--gray-4);

}









.order.cancel {

  display: flex;

  align-items: center;

  justify-content: center;

  min-height: 60vh;

  padding: 20px;

}

.order.cancel .card {

  background-color: var(--card-bg);

  padding: 30px;

  border-radius: var(--border-radius);

  box-shadow: 0 6px 18px rgba(0,0,0,0.1);

  max-width: 400px;

  width: 100%;

  text-align: center;

}

.order.cancel .card .icon {

  font-size: 48px;

  margin-bottom: 16px;

  color: var(--primary-color);

}

.order.cancel .card h1 {

  font-size: 24px;

  margin-bottom: 8px;

  font-weight: 500;

}

.order.cancel .card p {

  font-size: 16px;

  margin-bottom: 24px;

  color: #555555;

}

.order.cancel .card form {

  text-align: left;

}

.order.cancel .card label {

  display: block;

  font-weight: 500;

  margin-bottom: 4px;

  font-size: 14px;

}

.order.cancel .card select,

.order.cancel .card textarea {

  width: 100%;

  padding: 10px;

  margin-bottom: 16px;

  border: 1px solid #E0E0E0;

  border-radius: var(--border-radius);

  font-size: 14px;

  resize: vertical;

}

.order.cancel .card .btn-group {

  display: flex;

  gap: 12px;

  flex-wrap: wrap;

  justify-content: center;

}

.order.cancel .card button {

  flex: 1 1 auto;

  padding: 12px 0;

  font-size: 16px;

  border: none;

  border-radius: var(--border-radius);

  cursor: pointer;

  transition: background-color 0.3s ease;

}

.order.cancel .card .btn-primary {

  background-color: var(--primary-color);

  color: #ffffff;

}

.order.cancel .card .btn-primary:hover {

  background-color: #3A78C2;

}

.order.cancel .card .btn-secondary {

  background-color: #FFFFFF;

  color: var(--primary-color);

  border: 2px solid var(--primary-color);

}

.order.cancel .card .btn-secondary:hover {

  background-color: #F0F6FF;

}

@media (max-width: 480px) {

  .order.cancel .card {

    padding: 20px;

  }

  .order.cancel .card h1 {

    font-size: 20px;

  }

}







.thank-you-section {

  display: flex;

  align-items: center;

  justify-content: center;

  padding: 4rem 1rem;

  background: linear-gradient(135deg, #4A90E2 0%, #50E3C2 100%);

  color: #fff;

  text-align: center;

}



.ty-container {

  max-width: 480px;

  width: 100%;

}



.ty-content {

  background: rgba(255,255,255,0.1);

  padding: 2rem;

  border-radius: 1rem;

  box-shadow: 0 8px 24px rgba(0,0,0,0.15);

}



.ty-icon {

  width: 4rem;

  height: 4rem;

  margin-bottom: 1rem;

  color: #fff;

}



.ty-content h1 {

  font-size: 2rem;

  margin-bottom: 0.5rem;

  line-height: 1.2;

}



.ty-content p {

  font-size: 1rem;

  margin-bottom: 1.5rem;

  line-height: 1.5;

}



.btn-ty {

  display: inline-block;

  padding: 0.75rem 1.5rem;

  background: #fff;

  color: #4A90E2;

  font-weight: 600;

  text-decoration: none;

  border-radius: 0.5rem;

  transition: background 0.3s, transform 0.3s;

}



.btn-ty:hover {

  background: rgba(255,255,255,0.9);

  transform: translateY(-2px);

}



/* Responsive tweaks */

@media (min-width: 600px) {

  .thank-you-section {

    padding: 6rem 1rem;

  }

  .ty-content {

    padding: 3rem;

  }

  .ty-content h1 {

    font-size: 2.5rem;

  }

  .ty-content p {

    font-size: 1.125rem;

  }

}





/* Error Page Styles */

.error-page {

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;

  min-height: 60vh;

  padding: 2rem;

  text-align: center;

  background: linear-gradient(135deg, #30475e 0%, #222831 100%);

  color: #fff;

}



.error-page .error-title {

  font-size: 4rem;

  font-weight: 700;

  margin: 0;

}



.error-page .error-subtitle {

  font-size: 1.5rem;

  margin: 1rem 0;

  opacity: 0.9;

}



.error-page .error-description {

  font-size: 1rem;

  max-width: 600px;

  line-height: 1.5;

  margin-bottom: 2rem;

  opacity: 0.8;

}



.error-page .btn-action {

  display: inline-block;

  padding: 0.75rem 2rem;

  background-color: #f05454;

  color: #fff;

  font-weight: 600;

  text-decoration: none;

  border-radius: 4px;

  transition: background-color 0.3s ease, transform 0.2s ease;

}



.error-page .btn-action:hover {

  background-color: #d94343;

  transform: translateY(-2px);

}



/* Mobile adjustments */

@media (max-width: 768px) {

  .error-page {

    padding: 1rem;

  }

  .error-page .error-title {

    font-size: 2.5rem;

  }

  .error-page .error-subtitle {

    font-size: 1.25rem;

  }

  .error-page .error-description {

    font-size: 0.9rem;

  }

}







.Return\&refund {

  padding: 80px 20px;

  background-color: #ffffff;

  font-family: 'Helvetica Neue', Arial, sans-serif;

}

.rr-container {

  max-width: 1100px;

  margin: 0 auto;

  text-align: center;

}

.rr-header {

  margin-bottom: 50px;

}

.rr-title {

  font-size: 2.75rem;

  color: #222;

  margin-bottom: 10px;

  position: relative;

}

.rr-title::after {

  content: '';

  width: 60px;

  height: 4px;

  background-color: #ff6b00;

  display: block;

  margin: 12px auto 0;

  border-radius: 2px;

}

.rr-intro {

  font-size: 1.125rem;

  color: #555;

  max-width: 700px;

  margin: 0 auto;

}

.rr-content {

  display: flex;

  flex-wrap: wrap;

  justify-content: space-between;

  gap: 30px;

  margin-bottom: 60px;

}

.rr-card {

  flex: 1 1 calc(50% - 30px);

  background-color: #f9f9f9;

  padding: 30px;

  border-radius: 8px;

  box-shadow: 0 4px 12px rgba(0,0,0,0.05);

  text-align: left;

  transition: transform 0.3s ease;

}

.rr-card:hover {

  transform: translateY(-5px);

}

.rr-icon {

  font-size: 2rem;

  color: #ff6b00;

  margin-bottom: 15px;

}

.rr-card h3 {

  font-size: 1.5rem;

  color: #222;

  margin-bottom: 10px;

}

.rr-card p {

  font-size: 1rem;

  color: #555;

  line-height: 1.6;

}

.rr-card a {

  color: #ff6b00;

  text-decoration: none;

}

.rr-footer {

  text-align: center;

}

.rr-btn {

  display: inline-block;

  padding: 18px 36px;

  background-color: #ff6b00;

  color: #fff;

  text-decoration: none;

  font-size: 1.125rem;

  border-radius: 50px;

  transition: background 0.3s ease;

}

.rr-btn:hover {

  background-color: #e65c00;

}



/* Responsive */

@media (max-width: 1024px) {

  .rr-card {

    flex: 1 1 100%;

  }

}

@media (max-width: 768px) {

  .Return\&refund {

    padding: 60px 15px;

  }

  .rr-title {

    font-size: 2.25rem;

  }

  .rr-intro {

    font-size: 1rem;

  }

}





.terms-conditions-section {

  padding: 60px 20px;

  

  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;

}



.terms-conditions-section .container {

  max-width: 900px;

  margin: 0 auto;

  background: #fff;

  padding: 40px;

  border-radius: 12px;

  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);

}



.section-title {

  font-size: 32px;

  font-weight: 600;

  margin-bottom: 30px;

  color: #2c3e50;

  text-align: center;

}



.terms-content h4 {

  font-size: 20px;

  font-weight: 600;

  margin-top: 25px;

  color: #34495e;

}



.terms-content p {

  font-size: 16px;

  line-height: 1.7;

  color: #555;

  margin-top: 10px;

}



.terms-content .link {

  color: #1abc9c;

  text-decoration: none;

}



.terms-content .link:hover {

  text-decoration: underline;

}



/* Responsive */

@media (max-width: 768px) {

  .terms-conditions-section .container {

    padding: 25px;

  }



  .section-title {

    font-size: 26px;

  }



  .terms-content h4 {

    font-size: 18px;

  }



  .terms-content p {

    font-size: 15px;

  }

}







.management-section {

  padding: 60px 20px;

  

  font-family: 'Segoe UI', sans-serif;

  text-align: center;

}



.section-title {

  font-size: 32px;

  font-weight: bold;

  margin-bottom: 10px;

  color: #222;

}



.section-subtitle {

  font-size: 16px;

  color: #666;

  margin-bottom: 40px;

}



.management-grid {

  display: flex;

  flex-wrap: wrap;

  justify-content: center;

  gap: 30px;

}



.team-card {

  background: #fff;

  border-radius: 12px;

  box-shadow: 0 10px 20px rgba(0,0,0,0.05);

  overflow: hidden;

  max-width: 300px;

  transition: transform 0.3s;

}



.team-card:hover {

  transform: translateY(-10px);

}



.team-image img {

  width: 100%;

  height: 350px;

  object-fit: cover;

}



.team-info {

  padding: 20px;

}



.team-info h4 {

  font-size: 20px;

  margin-bottom: 5px;

  color: #111;

}



.team-info .position {

  font-size: 14px;

  color: #888;

  margin-bottom: 10px;

}



.team-info .description {

  font-size: 14px;

  color: #444;

}



@media (max-width: 768px) {

  .management-grid {

    flex-direction: column;

    align-items: center;

  }

}







.visioncontainer {

  max-width: 1200px;

  padding: 0 20px;

  margin: 0 auto;

}



.Vm-section {

  position: relative;

  background: url('images/banner/v&m banner.png') center center/cover no-repeat;

  padding: 100px 0 60px;

  text-align: center;

  color: #fff;

  overflow: hidden;

}







.Vm-section .visioncontainer {

  position: relative;

  z-index: 2;

}





/* Intro */

.vm-intro {

  padding: 50px 0;

  background: #f9f9f9;

  text-align: center;

}



.vm-intro p {

  max-width: 800px;

  margin: 0 auto;

  font-size: 18px;

  color: #555;

}



/* Vision & Mission Section */

.vm-section {

  padding: 60px 0;

}



.split-box {

  display: flex;

  flex-wrap: wrap;

  gap: 30px;

  justify-content: space-between;

}



.vm-box {

  flex: 1 1 45%;

  background: #fff;

  padding: 40px;

  border-radius: 12px;

  box-shadow: 0 8px 24px rgba(0,0,0,0.06);

  transition: 0.3s ease;

}



.vm-box:hover {

  transform: translateY(-5px);

  box-shadow: 0 12px 28px rgba(0,0,0,0.1);

}



.vm-box h2 {

  color: #1abc9c;

  font-size: 28px;

  margin-bottom: 15px;

}



.vm-box p {

  font-size: 16px;

  color: #34495e;

}



/* Values Section */

.vm-values {

  background: #ecf0f1;

  padding: 60px 0;

  text-align: center;

}



.vm-values h3 {

  font-size: 26px;

  margin-bottom: 30px;

  color: #2c3e50;

}



.value-list {

  list-style: none;

  padding: 0;

  display: flex;

  flex-wrap: wrap;

  justify-content: center;

  gap: 20px;

}



.value-list li {

  background: white;

  padding: 20px 25px;

  border-radius: 10px;

  font-size: 16px;

  min-width: 200px;

  box-shadow: 0 4px 14px rgba(0,0,0,0.05);

}



/* Responsive */

@media (max-width: 768px) {

  .split-box {

    flex-direction: column;

  }



  .vm-hero h1 {

    font-size: 36px;

  }



  .vm-box {

    flex: 1 1 100%;

  }



  .value-list {

    flex-direction: column;

    gap: 15px;

  }

}


/* custom */
/* Mobile search bar */
.mobile-search-bar {
    background: #fff;
    padding: 8px 12px;
    border-bottom: 1px solid #eee;
    animation: slideDown 0.3s ease;
}
@keyframes slideDown {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Show only on mobile */
@media (min-width: 769px) {
    .mobile-search-bar {
        display: none !important;
    }
}
/* blinking text */
.special-menu a span {
  background: linear-gradient(90deg, #ff6600, #ffcc00, #ff6600);
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: gradientMove 3s linear infinite;
}

@keyframes gradientMove {
  0% { background-position: 0% center; }
  100% { background-position: 200% center; }
}
/* mobile menu user icon */

.cart-icon-wrapper {
    position: relative;
    display: inline-block;
}

.cart-count-badge {
    position: absolute;
    top: -6px;
    right: -6px;
    background-color: #dc3545; /* Bootstrap red */
    color: #fff;
    font-size: 10px;
    font-weight: bold;
    padding: 2px 5px;
    border-radius: 50%;
    min-width: 18px;
    text-align: center;
    line-height: 1;
    z-index: 10;
    display: inline-block;
}

/* Optional tweak for very small screens */
@media (max-width: 576px) {
    .cart-count-badge {
        font-size: 15px;
        top: -5px;
        right: -7px;
        padding: 1px 4px;
    }

    .body-small {
        font-size: 12px;
    }
}