:root { --font-family: "Mulish", sans-serif; --color-main-1: #0069C7; --color-main-2: #0676DA; --color-main-3: #2B89E0; --color-main-4: #0f2895; --color-accent-1: rgb(240, 95, 38); --body-background: rgb(241, 240, 241); --border-color: #E9E9E9; --black: #343A40; --black-50: #464748; --gray: #6C757D; --gray-50: #A4A9AE; --text-color: #1A1A1A; --bg-main: #F2FAF2; --bg-light: #F7F7F7; --text-dark: #343A40; --text-dark-50: #464748; --text-gray: #6C757D; --text-gray-50: #A4A9AE; --green: #42c677; --red: #dd0303; --shadow-1: 0 1px 3px rgba(0, 0, 0, .12), 0 1px 2px rgba(0, 0, 0, .24); --shadow-2: rgb(45 45 45 / 5%) 0px 2px 2px, rgb(49 49 49 / 5%) 0px 4px 4px, rgb(42 42 42 / 5%) 0px 8px 8px, rgb(32 32 32 / 5%) 0px 16px 16px, rgb(49 49 49 / 5%) 0px 32px 32px, rgb(35 35 35 / 5%) 0px 64px 64px; --sc-main-color: #ef3f3f; --sc-main-color-2: #e81313; --sc-accent-color: #ffd43b; --sc-accent-color-2: #fab005; --primary-color: #009a14; --primary-rgb: 0, 154, 20; --primary-hover: #06a51b; --secondary-color: #de0d0d; } body { font: 400 14px/1.5 var(--font-family); overflow-x: hidden; background-color: var(--body-background); color: var(--text-color); height: 100%; position: relative; } body:not(.loaded) { overflow: hidden; } a, a:hover, a:focus { box-shadow: none; outline: none; text-decoration: none; cursor: pointer; transition: 0.3s all ease-out; } input, select, textarea { transition: 0.3s all ease-out; } input:focus, select:focus, textarea:focus { box-shadow: none !important; outline: none !important; } input::-webkit-outer-spin-button, input::-webkit-inner-spin-button { /* display: none; <- Crashes Chrome on hover */ -webkit-appearance: none; margin: 0; /* <-- Apparently some margin are still there even though it's hidden */ } input[type=number] { -moz-appearance: textfield; /* Firefox */ } html { font-size: 62.5%; } @media screen and (min-width: 1200px) { .container { max-width: 1220px; } } img { max-width: 100%; height: auto; object-fit: cover; vertical-align: middle; } #modal_dk_dn { z-index: 1041 !important; } header { position: relative; z-index: 10; } .overlay { z-index: 8; } .main { position: relative; } #module-cta { z-index: 997 !important; } #module_subscribe { z-index: 11 !important; } footer { position: relative; z-index: 10 !important; } .rounded-left-5 { border-radius: 5px 0 0 5px !important; } .rounded-right-5 { border-radius: 0 5px 5px 0 !important; } input { border-radius: 0; } input[type=search] { -webkit-appearance: none; } :root { --font-sm: 13px; --font-normal: 14px; --font-md: 16px; --font-lg: 20px; --font-xl: 24px; --font-xxl: 32px; } .fz-sm { font-size: var(--font-sm); } .fz-normal { font-size: var(--font-normal); } .fz-md { font-size: var(--font-md); } .fz-lg { font-size: var(--font-lg); } .fz-xl { font-size: var(--font-xl); } .fz-xxl { font-size: var(--font-xxl); } .fw-300 { font-weight: 300; } .fw-400 { font-weight: 400; } .fw-500 { font-weight: 500; } .fw-700 { font-weight: 700; } .color-red { color: var(--red); } .color-light-blue { color: #82869E; } .color-green { color: var(--green); } h1 { font-size: var(--font-xl); font-weight: 700; } h2 { font-size: var(--font-lg); } h3 { font-size: var(--font-md); } h1, h2, h3 { margin-bottom: var(--space-default); } h2, h3, h4, h5, h6 { font-weight: 500; } p ~ p { margin-bottom: var(--space-default); } .truncate-2 { overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .break-word { word-break: break-word; } @media only screen and (max-width: 1199px) { .truncate-2-desktop { overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } } :root { --space-default: 1.6rem; --space-xxs: calc(var(--space-default) * 0.25); --space-xs: calc(var(--space-default) * 0.5); --space-sm: calc(var(--space-default) * 0.75); --space-md: calc(var(--space-default) * 1.25); --space-lg: calc(var(--space-default) * 2); --space-xl: calc(var(--space-default) * 3.25); --space-xxl: calc(Var(--space-default) * 5.25); } .m_default { margin: var(--space-default) var(--space-default); } .mt_default { margin-top: var(--space-default); } .mb_default { margin-bottom: var(--space-default); } .ms_default { margin-left: var(--space-default); } .me_default { margin-right: var(--space-default); } .p_default { padding: var(--space-default) var(--space-default); } .pt_default { padding-top: var(--space-default); } .pb_default { padding-bottom: var(--space-default); } .ps_default { padding-left: var(--space-default); } .pe_default { padding-right: var(--space-default); } .m_xxs { margin: var(--space-xxs) var(--space-xxs); } .mt_xxs { margin-top: var(--space-xxs); } .mb_xxs { margin-bottom: var(--space-xxs); } .ms_xxs { margin-left: var(--space-xxs); } .me_xxs { margin-right: var(--space-xxs); } .p_xxs { padding: var(--space-xxs) var(--space-xxs); } .pt_xxs { padding-top: var(--space-xxs); } .pb_xxs { padding-bottom: var(--space-xxs); } .ps_xxs { padding-left: var(--space-xxs); } .pe_xxs { padding-right: var(--space-xxs); } .m_xs { margin: var(--space-xs) var(--space-xs); } .mt_xs { margin-top: var(--space-xs); } .mb_xs { margin-bottom: var(--space-xs); } .ms_xs { margin-left: var(--space-xs); } .me_xs { margin-right: var(--space-xs); } .p_xs { padding: var(--space-xs) var(--space-xs); } .pt_xs { padding-top: var(--space-xs); } .pb_xs { padding-bottom: var(--space-xs); } .ps_xs { padding-left: var(--space-xs); } .pe_xs { padding-right: var(--space-xs); } .m_sm { margin: var(--space-sm) var(--space-sm); } .mt_sm { margin-top: var(--space-sm); } .mb_sm { margin-bottom: var(--space-sm); } .ms_sm { margin-left: var(--space-sm); } .me_sm { margin-right: var(--space-sm); } .p_sm { padding: var(--space-sm) var(--space-sm); } .pt_sm { padding-top: var(--space-sm); } .pb_sm { padding-bottom: var(--space-sm); } .ps_sm { padding-left: var(--space-sm); } .pe_sm { padding-right: var(--space-sm); } .m_md { margin: var(--space-md) var(--space-md); } .mt_md { margin-top: var(--space-md); } .mb_md { margin-bottom: var(--space-md); } .ms_md { margin-left: var(--space-md); } .me_md { margin-right: var(--space-md); } .p_md { padding: var(--space-md) var(--space-md); } .pt_md { padding-top: var(--space-md); } .pb_md { padding-bottom: var(--space-md); } .ps_md { padding-left: var(--space-md); } .pe_md { padding-right: var(--space-md); } .m_lg { margin: var(--space-lg) var(--space-lg); } .mt_lg { margin-top: var(--space-lg); } .mb_lg { margin-bottom: var(--space-lg); } .ms_lg { margin-left: var(--space-lg); } .me_lg { margin-right: var(--space-lg); } .p_lg { padding: var(--space-lg) var(--space-lg); } .pt_lg { padding-top: var(--space-lg); } .pb_lg { padding-bottom: var(--space-lg); } .ps_lg { padding-left: var(--space-lg); } .pe_lg { padding-right: var(--space-lg); } .m_xl { margin: var(--space-xl) var(--space-xl); } .mt_xl { margin-top: var(--space-xl); } .mb_xl { margin-bottom: var(--space-xl); } .ms_xl { margin-left: var(--space-xl); } .me_xl { margin-right: var(--space-xl); } .p_xl { padding: var(--space-xl) var(--space-xl); } .pt_xl { padding-top: var(--space-xl); } .pb_xl { padding-bottom: var(--space-xl); } .ps_xl { padding-left: var(--space-xl); } .pe_xl { padding-right: var(--space-xl); } .m_xxl { margin: var(--space-xxl) var(--space-xxl); } .mt_xxl { margin-top: var(--space-xxl); } .mb_xxl { margin-bottom: var(--space-xxl); } .ms_xxl { margin-left: var(--space-xxl); } .me_xxl { margin-right: var(--space-xxl); } .p_xxl { padding: var(--space-xxl) var(--space-xxl); } .pt_xxl { padding-top: var(--space-xxl); } .pb_xxl { padding-bottom: var(--space-xxl); } .ps_xxl { padding-left: var(--space-xxl); } .pe_xxl { padding-right: var(--space-xxl); } @media only screen and (min-width: 992px) { .me-lg-md-gutter { margin-right: calc(var(--space-md) - var(--bs-gutter-x)); } } .min-h-100 { min-height: 100%; } .sizing-x { padding-top: var(--space-lg); padding-bottom: var(--space-lg); } @media only screen and (max-width: calc(374px)) { .col-xs-12 { flex: 0 0 auto; width: 100%; } } @media only screen and (min-width: 375px) { .col-xs-6 { flex: 0 0 auto; width: 50%; } } @media only screen and (min-width: 1200px) { .col-20 { width: 20%; flex: 0 0 auto; } } .section-sm { padding-top: var(--space-md); padding-bottom: var(--space-md); } button { outline: 0; border: 0; } .btn { --background: transparent; --color: var(--text-color); --color-hover: #FFFFFF; display: inline-block; font-weight: 400; font-size: var(--font-normal); background-color: var(--background); color: var(--color); text-transform: capitalize; } .btn:hover { color: var(--color-hover); } .btn-sm { padding: var(--space-xs) var(--space-sm); } .btn-md { padding: var(--space-sm) var(--space-default); font-weight: 700; } .btn-color-gray { max-width: 12rem; width: 100%; --color: #FFFFFF; --background: #6C757D; } .btn-color-main-1 { --background: var(--color-main-1); --color: #FFFFFF; } .btn-color-main-1:hover { --background: rgb(15, 40, 149); } .btn-color-main-2 { --color: #FFFFFF; --background: var(--color-main-2); } .btn-outline-main-1 { --color: var(--color-main-1); box-shadow: 0 0 0 2px var(--color-main-1); } .btn-outline-main-1:hover { box-shadow: 0 0 0 2px #0f2895; --background: rgb(15, 40, 149); --color: #FFFFFF; } .hover-outline:hover { background-color: #fff; color: var(--color-main-1); box-shadow: 0 0 0 2px var(--color-main-1); } .btn-outline-red { --color: var(--red); box-shadow: 0 0 0 2px var(--color); } .btn-outline-red:hover { --color: #FFFFFF; --background: var(--red); } .btn-color-red { --color: #fff; --background: var(--red); border: 2px solid var(--background); } .btn-color-red:hover { color: var(--red); background-color: #fff; } .btn-fix { background-color: var(--color-main-1); color: #FFFFFF; } .btn-fix:hover { background-color: var(--color-hover-1); color: #FFFFFF; } .link-cover::after { position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 3; content: ""; } .btn-disabled { opacity: 0.6; cursor: not-allowed; } .btn[class*=btn-main] { margin: 0 5px; width: calc(50% - 5px); padding: 15px; border-radius: 0.25rem; transition: 0.2s all ease; color: #FFFFFF; font-size: 1.3em; font-weight: 700; text-transform: uppercase; } .btn[class*=btn-main]:hover { opacity: 0.85; } #btn-toggle-menu { display: block; width: 2.6rem; height: 1.6rem; position: relative; background: transparent; transition: all ease 0.3s; } #btn-toggle-menu > span { display: block; width: 100%; height: 3px; position: absolute; top: 50%; left: 0; z-index: 2; background-color: #FFFFFF; transition: inherit; } #btn-toggle-menu::before, #btn-toggle-menu::after { content: ""; display: inline-block; position: absolute; top: 50%; left: 0; z-index: 1; width: 100%; height: 3px; transform-origin: 50% 50%; background-color: #FFFFFF; transition: inherit; } #btn-toggle-menu::before { transform: translate3d(0, -7px, 0); } #btn-toggle-menu::after { transform: translate3d(0, 7px, 0); } #btn-toggle-menu.active::after { transform: rotate3d(0, 0, 1, -45deg); } #btn-toggle-menu.active::before { transform: rotate3d(0, 0, 1, 45deg); } #btn-toggle-menu.active > span { opacity: 0; } .btn-trash { display: inline-flex; justify-content: center; align-items: center; width: 35px; height: 35px; } a.disabled { pointer-events: none; user-select: none; opacity: 0.7; } .link { --color: var(--text-color); font-size: var(--font-sm); color: var(--color); font-weight: 400; } .link-muted { --color: var(--bs-gray); } .link-underline { text-decoration: underline !important; } .text-hover-main-2:hover { color: var(--color-main-2); } .link-full { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 2; } .icon-size { display: inline-block; width: 1.6rem; height: 1.6rem; line-height: 1.5; --color: #fff; --size: 1.6rem; width: var(--size); height: var(--size); transition: 0.3s ease-in-out; } .icon-size.icon-showroom { width: var(--size); height: var(--size); -webkit-mask: url("data:image/svg+xml,%3c!-- Generated by IcoMoon.io --%3e%3csvg version='1.1' xmlns='http://www.w3.org/2000/svg' width='1024' height='1024' viewBox='0 0 1024 1024'%3e%3ctitle%3e%3c/title%3e%3cg id='icomoon-ignore'%3e%3c/g%3e%3cpath d='M983.040 967.107h-66.847v-526.213c-0.045-14.262-10.403-26.091-24.005-28.422l-0.171-0.024-219.023-32.717v-231.823c-0.046-15.692-12.755-28.4-28.442-28.447h-64.004v-91.013c-0.046-15.688-12.749-28.394-28.431-28.447h-386.852c-15.692 0.046-28.4 12.755-28.447 28.442v91.027h-64c-15.692 0.046-28.4 12.755-28.447 28.442v819.204h-5.683c-15.711 0-28.447 12.736-28.447 28.447s12.736 28.447 28.447 28.447h944.353c15.711 0 28.447-12.736 28.447-28.447s-12.736-28.447-28.447-28.447v0zM193.71 56.893h329.953v62.577h-329.953zM101.263 176.353h514.847v790.753h-514.847zM672.993 967.107v-529.060l186.307 27.023v502.036zM303.217 250.307h-108.083c-15.692 0.046-28.4 12.755-28.447 28.442v108.087c0 15.711 12.736 28.447 28.447 28.447s28.447-12.736 28.447-28.447v0-79.636h79.647c15.711 0 28.447-12.736 28.447-28.447s-12.736-28.447-28.447-28.447v0zM520.817 250.307h-108.083c-15.692 0.046-28.4 12.755-28.447 28.442v108.087c0 15.711 12.736 28.447 28.447 28.447s28.447-12.736 28.447-28.447v0-79.636h79.647c15.711 0 28.447-12.736 28.447-28.447s-12.736-28.447-28.447-28.447v0zM303.217 489.247h-108.083c-15.692 0.046-28.4 12.755-28.447 28.442v108.087c0 15.711 12.736 28.447 28.447 28.447s28.447-12.736 28.447-28.447v0-79.636h79.647c15.711 0 28.447-12.736 28.447-28.447s-12.736-28.447-28.447-28.447v0zM520.817 489.247h-108.083c-15.692 0.046-28.4 12.755-28.447 28.442v108.087c0 15.711 12.736 28.447 28.447 28.447s28.447-12.736 28.447-28.447v0-79.636h79.647c15.711 0 28.447-12.736 28.447-28.447s-12.736-28.447-28.447-28.447v0zM303.217 728.177h-108.083c-15.692 0.046-28.4 12.755-28.447 28.442v108.087c0 15.711 12.736 28.447 28.447 28.447s28.447-12.736 28.447-28.447v0-79.636h79.647c15.711 0 28.447-12.736 28.447-28.447s-12.736-28.447-28.447-28.447v0zM520.817 728.177h-108.083c-15.692 0.046-28.4 12.755-28.447 28.442v108.087c0 15.711 12.736 28.447 28.447 28.447s28.447-12.736 28.447-28.447v0-79.636h79.647c15.711 0 28.447-12.736 28.447-28.447s-12.736-28.447-28.447-28.447v0z'%3e%3c/path%3e%3c/svg%3e"); mask: url("data:image/svg+xml,%3c!-- Generated by IcoMoon.io --%3e%3csvg version='1.1' xmlns='http://www.w3.org/2000/svg' width='1024' height='1024' viewBox='0 0 1024 1024'%3e%3ctitle%3e%3c/title%3e%3cg id='icomoon-ignore'%3e%3c/g%3e%3cpath d='M983.040 967.107h-66.847v-526.213c-0.045-14.262-10.403-26.091-24.005-28.422l-0.171-0.024-219.023-32.717v-231.823c-0.046-15.692-12.755-28.4-28.442-28.447h-64.004v-91.013c-0.046-15.688-12.749-28.394-28.431-28.447h-386.852c-15.692 0.046-28.4 12.755-28.447 28.442v91.027h-64c-15.692 0.046-28.4 12.755-28.447 28.442v819.204h-5.683c-15.711 0-28.447 12.736-28.447 28.447s12.736 28.447 28.447 28.447h944.353c15.711 0 28.447-12.736 28.447-28.447s-12.736-28.447-28.447-28.447v0zM193.71 56.893h329.953v62.577h-329.953zM101.263 176.353h514.847v790.753h-514.847zM672.993 967.107v-529.060l186.307 27.023v502.036zM303.217 250.307h-108.083c-15.692 0.046-28.4 12.755-28.447 28.442v108.087c0 15.711 12.736 28.447 28.447 28.447s28.447-12.736 28.447-28.447v0-79.636h79.647c15.711 0 28.447-12.736 28.447-28.447s-12.736-28.447-28.447-28.447v0zM520.817 250.307h-108.083c-15.692 0.046-28.4 12.755-28.447 28.442v108.087c0 15.711 12.736 28.447 28.447 28.447s28.447-12.736 28.447-28.447v0-79.636h79.647c15.711 0 28.447-12.736 28.447-28.447s-12.736-28.447-28.447-28.447v0zM303.217 489.247h-108.083c-15.692 0.046-28.4 12.755-28.447 28.442v108.087c0 15.711 12.736 28.447 28.447 28.447s28.447-12.736 28.447-28.447v0-79.636h79.647c15.711 0 28.447-12.736 28.447-28.447s-12.736-28.447-28.447-28.447v0zM520.817 489.247h-108.083c-15.692 0.046-28.4 12.755-28.447 28.442v108.087c0 15.711 12.736 28.447 28.447 28.447s28.447-12.736 28.447-28.447v0-79.636h79.647c15.711 0 28.447-12.736 28.447-28.447s-12.736-28.447-28.447-28.447v0zM303.217 728.177h-108.083c-15.692 0.046-28.4 12.755-28.447 28.442v108.087c0 15.711 12.736 28.447 28.447 28.447s28.447-12.736 28.447-28.447v0-79.636h79.647c15.711 0 28.447-12.736 28.447-28.447s-12.736-28.447-28.447-28.447v0zM520.817 728.177h-108.083c-15.692 0.046-28.4 12.755-28.447 28.442v108.087c0 15.711 12.736 28.447 28.447 28.447s28.447-12.736 28.447-28.447v0-79.636h79.647c15.711 0 28.447-12.736 28.447-28.447s-12.736-28.447-28.447-28.447v0z'%3e%3c/path%3e%3c/svg%3e"); mask-size: contain; -webkit-mask-size: contain; mask-repeat: no-repeat; -webkit-mask-repeat: no-repeat; background-color: var(--color); } .icon-size.icon-support { --color: var(--color-main-1); -webkit-mask: url("data:image/svg+xml,%3csvg width='18' height='18' viewBox='0 0 18 18' fill='none' xmlns='http://www.w3.org/2000/svg'%3e %3cpath fill-rule='evenodd' clip-rule='evenodd' d='M2.56421 8.95173C2.57201 8.94516 2.57961 8.93836 2.587 8.93135C3.04634 8.52535 3.65026 8.27894 4.31185 8.27894H4.83268V13.4828H4.31185C2.87346 13.4828 1.70768 12.318 1.70768 10.8809C1.70768 10.1157 2.03812 9.42779 2.56421 8.95173ZM2.74935 7.58776V5.67612C2.74935 3.66447 4.38179 2.03344 6.39518 2.03344H11.6035C13.6169 2.03344 15.2493 3.66447 15.2493 5.67612V7.58776C14.7758 7.36302 14.246 7.23727 13.6868 7.23727H12.6452C12.3575 7.23727 12.1243 7.47026 12.1243 7.75766V14.0023C12.1243 14.2897 12.3575 14.5226 12.6452 14.5226H13.6868C15.7005 14.5226 17.3327 12.8919 17.3327 10.88C17.3327 9.88732 16.9354 8.98748 16.291 8.33049V5.67612C16.291 3.08967 14.1922 0.992676 11.6035 0.992676H6.39518C3.80649 0.992676 1.70768 3.08967 1.70768 5.67612V8.33049C1.0633 8.98748 0.666016 9.88732 0.666016 10.88C0.666016 12.3332 1.51756 13.5876 2.74935 14.1721V15.043C2.74935 16.4805 3.91483 17.6449 5.35352 17.6449H10.5618C10.8495 17.6449 11.0827 17.412 11.0827 17.1246C11.0827 16.8372 10.8495 16.6042 10.5618 16.6042H5.35352C4.49012 16.6042 3.79102 15.9057 3.79102 15.043V14.4858C3.96112 14.5101 4.13501 14.5226 4.31185 14.5226H5.35352C5.64116 14.5226 5.87435 14.2897 5.87435 14.0023V7.75766C5.87435 7.47026 5.64116 7.23727 5.35352 7.23727H4.31185C3.75267 7.23727 3.22291 7.36302 2.74935 7.58776ZM13.6868 8.27894C14.3484 8.27894 14.9524 8.52535 15.4117 8.93134C15.4191 8.93836 15.4267 8.94516 15.4345 8.95174C15.9606 9.42779 16.291 10.1157 16.291 10.8809C16.291 12.318 15.1252 13.4828 13.6868 13.4828H13.166V8.27894H13.6868Z' fill='%23333333' /%3e%3c/svg%3e"); mask: url("data:image/svg+xml,%3csvg width='18' height='18' viewBox='0 0 18 18' fill='none' xmlns='http://www.w3.org/2000/svg'%3e %3cpath fill-rule='evenodd' clip-rule='evenodd' d='M2.56421 8.95173C2.57201 8.94516 2.57961 8.93836 2.587 8.93135C3.04634 8.52535 3.65026 8.27894 4.31185 8.27894H4.83268V13.4828H4.31185C2.87346 13.4828 1.70768 12.318 1.70768 10.8809C1.70768 10.1157 2.03812 9.42779 2.56421 8.95173ZM2.74935 7.58776V5.67612C2.74935 3.66447 4.38179 2.03344 6.39518 2.03344H11.6035C13.6169 2.03344 15.2493 3.66447 15.2493 5.67612V7.58776C14.7758 7.36302 14.246 7.23727 13.6868 7.23727H12.6452C12.3575 7.23727 12.1243 7.47026 12.1243 7.75766V14.0023C12.1243 14.2897 12.3575 14.5226 12.6452 14.5226H13.6868C15.7005 14.5226 17.3327 12.8919 17.3327 10.88C17.3327 9.88732 16.9354 8.98748 16.291 8.33049V5.67612C16.291 3.08967 14.1922 0.992676 11.6035 0.992676H6.39518C3.80649 0.992676 1.70768 3.08967 1.70768 5.67612V8.33049C1.0633 8.98748 0.666016 9.88732 0.666016 10.88C0.666016 12.3332 1.51756 13.5876 2.74935 14.1721V15.043C2.74935 16.4805 3.91483 17.6449 5.35352 17.6449H10.5618C10.8495 17.6449 11.0827 17.412 11.0827 17.1246C11.0827 16.8372 10.8495 16.6042 10.5618 16.6042H5.35352C4.49012 16.6042 3.79102 15.9057 3.79102 15.043V14.4858C3.96112 14.5101 4.13501 14.5226 4.31185 14.5226H5.35352C5.64116 14.5226 5.87435 14.2897 5.87435 14.0023V7.75766C5.87435 7.47026 5.64116 7.23727 5.35352 7.23727H4.31185C3.75267 7.23727 3.22291 7.36302 2.74935 7.58776ZM13.6868 8.27894C14.3484 8.27894 14.9524 8.52535 15.4117 8.93134C15.4191 8.93836 15.4267 8.94516 15.4345 8.95174C15.9606 9.42779 16.291 10.1157 16.291 10.8809C16.291 12.318 15.1252 13.4828 13.6868 13.4828H13.166V8.27894H13.6868Z' fill='%23333333' /%3e%3c/svg%3e"); mask-size: contain; -webkit-mask-size: contain; mask-repeat: no-repeat; -webkit-mask-repeat: no-repeat; background-color: var(--color); } .icon-size.icon-location { --color: var(--color-main-1); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' x='0px' y='0px' viewBox='0 0 512 512' heigh='18' width='18'%3E%3Cpath d='M256,0C156.748,0,76,80.748,76,180c0,33.534,9.289,66.26,26.869,94.652l142.885,230.257 c2.737,4.411,7.559,7.091,12.745,7.091c0.04,0,0.079,0,0.119,0c5.231-0.041,10.063-2.804,12.75-7.292L410.611,272.22 C427.221,244.428,436,212.539,436,180C436,80.748,355.252,0,256,0z M384.866,256.818L258.272,468.186l-129.905-209.34 C113.734,235.214,105.8,207.95,105.8,180c0-82.71,67.49-150.2,150.2-150.2S406.1,97.29,406.1,180 C406.1,207.121,398.689,233.688,384.866,256.818z'/%3E%3Cpath d='M256,90c-49.626,0-90,40.374-90,90c0,49.309,39.717,90,90,90c50.903,0,90-41.233,90-90C346,130.374,305.626,90,256,90z M256,240.2c-33.257,0-60.2-27.033-60.2-60.2c0-33.084,27.116-60.2,60.2-60.2s60.1,27.116,60.1,60.2 C316.1,212.683,289.784,240.2,256,240.2z'/%3E%3C/svg%3E"); mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' x='0px' y='0px' viewBox='0 0 512 512' heigh='18' width='18'%3E%3Cpath d='M256,0C156.748,0,76,80.748,76,180c0,33.534,9.289,66.26,26.869,94.652l142.885,230.257 c2.737,4.411,7.559,7.091,12.745,7.091c0.04,0,0.079,0,0.119,0c5.231-0.041,10.063-2.804,12.75-7.292L410.611,272.22 C427.221,244.428,436,212.539,436,180C436,80.748,355.252,0,256,0z M384.866,256.818L258.272,468.186l-129.905-209.34 C113.734,235.214,105.8,207.95,105.8,180c0-82.71,67.49-150.2,150.2-150.2S406.1,97.29,406.1,180 C406.1,207.121,398.689,233.688,384.866,256.818z'/%3E%3Cpath d='M256,90c-49.626,0-90,40.374-90,90c0,49.309,39.717,90,90,90c50.903,0,90-41.233,90-90C346,130.374,305.626,90,256,90z M256,240.2c-33.257,0-60.2-27.033-60.2-60.2c0-33.084,27.116-60.2,60.2-60.2s60.1,27.116,60.1,60.2 C316.1,212.683,289.784,240.2,256,240.2z'/%3E%3C/svg%3E"); mask-size: contain; -webkit-mask-size: contain; mask-repeat: no-repeat; -webkit-mask-repeat: no-repeat; background-color: var(--color); } .icon-size.icon-clock { --color: var(--color-main-1); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 490.667 490.667' width='18' height='18'%3E%3Cg%3E%3Cg%3E%3Cpath d='M245.333,0C110.059,0,0,110.059,0,245.333s110.059,245.333,245.333,245.333s245.333-110.059,245.333-245.333 S380.608,0,245.333,0z M245.333,469.333c-123.52,0-224-100.48-224-224s100.48-224,224-224s224,100.48,224,224 S368.853,469.333,245.333,469.333z'/%3E%3C/g%3E%3C/g%3E%3Cg%3E%3Cg%3E%3Cpath d='M348.885,333.803L256,240.917V74.667C256,68.779,251.221,64,245.333,64s-10.667,4.779-10.667,10.667v170.667 c0,2.837,1.131,5.547,3.115,7.552l96,96c2.091,2.069,4.821,3.115,7.552,3.115c2.731,0,5.461-1.045,7.552-3.115 C353.045,344.725,353.045,337.963,348.885,333.803z'/%3E%3C/g%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3C/svg%3E"); mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 490.667 490.667' width='18' height='18'%3E%3Cg%3E%3Cg%3E%3Cpath d='M245.333,0C110.059,0,0,110.059,0,245.333s110.059,245.333,245.333,245.333s245.333-110.059,245.333-245.333 S380.608,0,245.333,0z M245.333,469.333c-123.52,0-224-100.48-224-224s100.48-224,224-224s224,100.48,224,224 S368.853,469.333,245.333,469.333z'/%3E%3C/g%3E%3C/g%3E%3Cg%3E%3Cg%3E%3Cpath d='M348.885,333.803L256,240.917V74.667C256,68.779,251.221,64,245.333,64s-10.667,4.779-10.667,10.667v170.667 c0,2.837,1.131,5.547,3.115,7.552l96,96c2.091,2.069,4.821,3.115,7.552,3.115c2.731,0,5.461-1.045,7.552-3.115 C353.045,344.725,353.045,337.963,348.885,333.803z'/%3E%3C/g%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3C/svg%3E"); mask-size: contain; -webkit-mask-size: contain; mask-repeat: no-repeat; -webkit-mask-repeat: no-repeat; background-color: var(--color); } .icon-size.icon-news { -webkit-mask: url("data:image/svg+xml,%3csvg id='Capa_1' enable-background='new 0 0 512 512' height='512' viewBox='0 0 512 512' width='512' xmlns='http://www.w3.org/2000/svg'%3e%3cg%3e%3cpath d='m255.85 48.5c5.521 0 10-4.49 10-10 0-5.521-4.479-10-10-10-5.51 0-9.99 4.479-9.99 10-.001 5.51 4.48 10 9.99 10z'/%3e%3cpath d='m508.069 59.04c-2.52-5.96-6.13-11.3-10.72-15.891-4.59-4.59-9.93-8.199-15.89-10.72-6.16-2.61-12.71-3.93-19.46-3.93h-161.14c-5.52 0-10 4.479-10 10 0 5.51 4.48 10 10 10h161.141c16.51.03 29.97 13.49 30 30v230h-472v-230c.03-16.51 13.49-29.97 30-30h160.859c5.511 0 9.99-4.49 9.99-10 0-5.521-4.479-10-9.99-10h-160.859c-6.75 0-13.3 1.319-19.46 3.93-5.96 2.521-11.3 6.13-15.891 10.72-4.589 4.591-8.199 9.931-10.719 15.891-2.611 6.16-3.93 12.71-3.93 19.46v270c0 27.57 22.43 50 50 50h166v25h-35c-27.57 0-50 22.43-50 50 0 5.522 4.478 10 10 10h230c5.522 0 10-4.478 10-10 0-27.57-22.43-50-50-50h-35v-25h166c27.57 0 50-22.43 50-50v-270c0-6.75-1.32-13.3-3.931-19.46zm-222.069 384.46h45c13.037 0 24.159 8.359 28.286 20h-206.572c4.127-11.641 15.249-20 28.286-20h45c5.522 0 10-4.478 10-10v-35h40v35c0 5.522 4.478 10 10 10zm206-95c0 16.542-13.458 30-30 30h-412c-16.542 0-30-13.458-30-30v-20h472z'/%3e%3cpath d='m132 138.5v46.023l-31.485-51.118c-2.346-3.808-6.932-5.594-11.24-4.377-4.304 1.219-7.274 5.147-7.274 9.621v79.851c0 5.522 4.478 10 10 10s10-4.478 10-10v-44.547l29.642 48.124c2.711 4.393 7.677 6.451 12.353 5.124 4.863-1.38 8.006-5.854 8.006-11.397v-77.304c0-5.522-4.478-10-10-10s-10.002 4.478-10.002 10z'/%3e%3cpath d='m182 128.5c-5.522 0-10 4.478-10 10v80c0 5.522 4.478 10 10 10h34c5.522 0 10-4.478 10-10s-4.478-10-10-10h-24v-20h24c5.522 0 10-4.478 10-10s-4.478-10-10-10h-24v-20h24c5.522 0 10-4.478 10-10s-4.478-10-10-10z'/%3e%3cpath d='m401.465 208.5c-4.993 0-9.951-2.834-13.264-7.581-3.161-4.53-9.395-5.638-13.924-2.479-4.529 3.161-5.639 9.395-2.479 13.924 7.051 10.104 18.141 16.136 29.666 16.136 13.228 0 24.644-9.584 27.761-23.307 3.288-14.471-3.813-28.241-18.091-35.081-1.851-.887-13.94-6.589-16.003-8.235-1.182-.942-2.126-3.558-1.646-6.73.17-1.122.963-4.875 4.035-6.077 6.301-2.462 12.873 4.21 13.124 4.468 3.736 4.016 10.021 4.271 14.074.561 4.072-3.73 4.35-10.057.619-14.129-5.826-6.359-19.773-15.521-35.104-9.524-8.81 3.447-14.986 11.562-16.522 21.707-1.519 10.026 1.909 19.743 8.944 25.357 3.89 3.105 18.026 9.773 19.837 10.641 7.922 3.795 7.93 9.531 7.229 12.613-.871 3.843-3.989 7.736-8.256 7.736z'/%3e%3cpath d='m253.988 128.704c-5.41 1.111-8.895 6.398-7.784 11.808 0 0 16.425 79.774 16.599 80.246 1.711 4.64 6.184 7.742 11.149 7.742h.083c4.997-.035 9.467-3.208 11.122-7.896.031-.09 15.844-49.281 15.844-49.281s15.774 49.298 15.824 49.435c1.711 4.64 6.184 7.742 11.149 7.742h.083c4.997-.035 9.467-3.208 11.122-7.896.15-.427.977-4.275.977-4.275l15.636-75.66c1.118-5.408-2.36-10.698-7.77-11.816-5.397-1.118-10.698 2.36-11.816 7.77l-9.933 48.062s-15.97-49.809-16.087-49.965c-1.1-2.571-3.257-4.672-6.128-5.595-5.256-1.691-10.89 1.203-12.58 6.461l-15.783 49.104-9.9-48.203c-1.111-5.41-6.4-8.891-11.807-7.783z'/%3e%3c/g%3e%3c/svg%3e"); mask: url("data:image/svg+xml,%3csvg id='Capa_1' enable-background='new 0 0 512 512' height='512' viewBox='0 0 512 512' width='512' xmlns='http://www.w3.org/2000/svg'%3e%3cg%3e%3cpath d='m255.85 48.5c5.521 0 10-4.49 10-10 0-5.521-4.479-10-10-10-5.51 0-9.99 4.479-9.99 10-.001 5.51 4.48 10 9.99 10z'/%3e%3cpath d='m508.069 59.04c-2.52-5.96-6.13-11.3-10.72-15.891-4.59-4.59-9.93-8.199-15.89-10.72-6.16-2.61-12.71-3.93-19.46-3.93h-161.14c-5.52 0-10 4.479-10 10 0 5.51 4.48 10 10 10h161.141c16.51.03 29.97 13.49 30 30v230h-472v-230c.03-16.51 13.49-29.97 30-30h160.859c5.511 0 9.99-4.49 9.99-10 0-5.521-4.479-10-9.99-10h-160.859c-6.75 0-13.3 1.319-19.46 3.93-5.96 2.521-11.3 6.13-15.891 10.72-4.589 4.591-8.199 9.931-10.719 15.891-2.611 6.16-3.93 12.71-3.93 19.46v270c0 27.57 22.43 50 50 50h166v25h-35c-27.57 0-50 22.43-50 50 0 5.522 4.478 10 10 10h230c5.522 0 10-4.478 10-10 0-27.57-22.43-50-50-50h-35v-25h166c27.57 0 50-22.43 50-50v-270c0-6.75-1.32-13.3-3.931-19.46zm-222.069 384.46h45c13.037 0 24.159 8.359 28.286 20h-206.572c4.127-11.641 15.249-20 28.286-20h45c5.522 0 10-4.478 10-10v-35h40v35c0 5.522 4.478 10 10 10zm206-95c0 16.542-13.458 30-30 30h-412c-16.542 0-30-13.458-30-30v-20h472z'/%3e%3cpath d='m132 138.5v46.023l-31.485-51.118c-2.346-3.808-6.932-5.594-11.24-4.377-4.304 1.219-7.274 5.147-7.274 9.621v79.851c0 5.522 4.478 10 10 10s10-4.478 10-10v-44.547l29.642 48.124c2.711 4.393 7.677 6.451 12.353 5.124 4.863-1.38 8.006-5.854 8.006-11.397v-77.304c0-5.522-4.478-10-10-10s-10.002 4.478-10.002 10z'/%3e%3cpath d='m182 128.5c-5.522 0-10 4.478-10 10v80c0 5.522 4.478 10 10 10h34c5.522 0 10-4.478 10-10s-4.478-10-10-10h-24v-20h24c5.522 0 10-4.478 10-10s-4.478-10-10-10h-24v-20h24c5.522 0 10-4.478 10-10s-4.478-10-10-10z'/%3e%3cpath d='m401.465 208.5c-4.993 0-9.951-2.834-13.264-7.581-3.161-4.53-9.395-5.638-13.924-2.479-4.529 3.161-5.639 9.395-2.479 13.924 7.051 10.104 18.141 16.136 29.666 16.136 13.228 0 24.644-9.584 27.761-23.307 3.288-14.471-3.813-28.241-18.091-35.081-1.851-.887-13.94-6.589-16.003-8.235-1.182-.942-2.126-3.558-1.646-6.73.17-1.122.963-4.875 4.035-6.077 6.301-2.462 12.873 4.21 13.124 4.468 3.736 4.016 10.021 4.271 14.074.561 4.072-3.73 4.35-10.057.619-14.129-5.826-6.359-19.773-15.521-35.104-9.524-8.81 3.447-14.986 11.562-16.522 21.707-1.519 10.026 1.909 19.743 8.944 25.357 3.89 3.105 18.026 9.773 19.837 10.641 7.922 3.795 7.93 9.531 7.229 12.613-.871 3.843-3.989 7.736-8.256 7.736z'/%3e%3cpath d='m253.988 128.704c-5.41 1.111-8.895 6.398-7.784 11.808 0 0 16.425 79.774 16.599 80.246 1.711 4.64 6.184 7.742 11.149 7.742h.083c4.997-.035 9.467-3.208 11.122-7.896.031-.09 15.844-49.281 15.844-49.281s15.774 49.298 15.824 49.435c1.711 4.64 6.184 7.742 11.149 7.742h.083c4.997-.035 9.467-3.208 11.122-7.896.15-.427.977-4.275.977-4.275l15.636-75.66c1.118-5.408-2.36-10.698-7.77-11.816-5.397-1.118-10.698 2.36-11.816 7.77l-9.933 48.062s-15.97-49.809-16.087-49.965c-1.1-2.571-3.257-4.672-6.128-5.595-5.256-1.691-10.89 1.203-12.58 6.461l-15.783 49.104-9.9-48.203c-1.111-5.41-6.4-8.891-11.807-7.783z'/%3e%3c/g%3e%3c/svg%3e"); mask-size: contain; -webkit-mask-size: contain; mask-repeat: no-repeat; -webkit-mask-repeat: no-repeat; background-color: var(--color); } .icon-size.icon-search { -webkit-mask: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3e %3cpath fill='white' fill-rule='evenodd' d='M19.757 19.095l-3.945-4.102c1.015-1.206 1.57-2.723 1.57-4.302 0-3.69-3.001-6.691-6.69-6.691C7.001 4 4 7.002 4 10.691c0 3.69 3.002 6.691 6.691 6.691 1.385 0 2.705-.418 3.834-1.21l3.974 4.133c.166.172.39.267.629.267.226 0 .441-.086.605-.243.346-.334.357-.887.024-1.234zM10.69 5.745c2.727 0 4.946 2.22 4.946 4.946 0 2.727-2.219 4.946-4.946 4.946s-4.945-2.219-4.945-4.946 2.218-4.945 4.945-4.945z'/%3e%3c/svg%3e"); mask: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3e %3cpath fill='white' fill-rule='evenodd' d='M19.757 19.095l-3.945-4.102c1.015-1.206 1.57-2.723 1.57-4.302 0-3.69-3.001-6.691-6.69-6.691C7.001 4 4 7.002 4 10.691c0 3.69 3.002 6.691 6.691 6.691 1.385 0 2.705-.418 3.834-1.21l3.974 4.133c.166.172.39.267.629.267.226 0 .441-.086.605-.243.346-.334.357-.887.024-1.234zM10.69 5.745c2.727 0 4.946 2.22 4.946 4.946 0 2.727-2.219 4.946-4.946 4.946s-4.945-2.219-4.945-4.946 2.218-4.945 4.945-4.945z'/%3e%3c/svg%3e"); mask-size: contain; -webkit-mask-size: contain; mask-repeat: no-repeat; -webkit-mask-repeat: no-repeat; background-color: var(--color); } .icon-size.icon-promotion { -webkit-mask: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='33' height='32' viewBox='0 0 33 32'%3e %3cpath fill='%239B9B9B' fill-rule='evenodd' d='M15.907 2.667c.236 0 .462.093.629.26l13.037 13.037c.347.347.347.91 0 1.257L17.721 29.073c-.347.347-.91.347-1.257 0L3.427 16.036c-.167-.167-.26-.393-.26-.629V7.111c0-.236.093-.462.26-.628l3.556-3.556c.166-.167.392-.26.628-.26zm-.368 1.777H7.98L4.944 7.48v7.56l12.149 12.148 10.594-10.594L15.54 4.444zm-2.038 12.113c.347-.347.91-.347 1.257 0l3.556 3.555c.347.347.347.91 0 1.257-.347.347-.91.347-1.257 0L13.5 17.814c-.347-.347-.347-.91 0-1.257zM17.057 13c.347-.347.91-.347 1.257 0l3.555 3.556c.347.347.347.91 0 1.257-.347.347-.91.347-1.257 0l-3.555-3.556c-.347-.347-.347-.91 0-1.257zm-5.89-5.594c1.8 0 3.259 1.46 3.259 3.26 0 1.8-1.46 3.259-3.26 3.259-1.8 0-3.259-1.46-3.259-3.26 0-1.8 1.46-3.259 3.26-3.259zm0 1.778c-.819 0-1.482.663-1.482 1.482 0 .818.663 1.481 1.482 1.481.818 0 1.481-.663 1.481-1.481 0-.819-.663-1.482-1.481-1.482z'/%3e%3c/svg%3e"); mask: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='33' height='32' viewBox='0 0 33 32'%3e %3cpath fill='%239B9B9B' fill-rule='evenodd' d='M15.907 2.667c.236 0 .462.093.629.26l13.037 13.037c.347.347.347.91 0 1.257L17.721 29.073c-.347.347-.91.347-1.257 0L3.427 16.036c-.167-.167-.26-.393-.26-.629V7.111c0-.236.093-.462.26-.628l3.556-3.556c.166-.167.392-.26.628-.26zm-.368 1.777H7.98L4.944 7.48v7.56l12.149 12.148 10.594-10.594L15.54 4.444zm-2.038 12.113c.347-.347.91-.347 1.257 0l3.556 3.555c.347.347.347.91 0 1.257-.347.347-.91.347-1.257 0L13.5 17.814c-.347-.347-.347-.91 0-1.257zM17.057 13c.347-.347.91-.347 1.257 0l3.555 3.556c.347.347.347.91 0 1.257-.347.347-.91.347-1.257 0l-3.555-3.556c-.347-.347-.347-.91 0-1.257zm-5.89-5.594c1.8 0 3.259 1.46 3.259 3.26 0 1.8-1.46 3.259-3.26 3.259-1.8 0-3.259-1.46-3.259-3.26 0-1.8 1.46-3.259 3.26-3.259zm0 1.778c-.819 0-1.482.663-1.482 1.482 0 .818.663 1.481 1.482 1.481.818 0 1.481-.663 1.481-1.481 0-.819-.663-1.482-1.481-1.482z'/%3e%3c/svg%3e"); mask-size: contain; -webkit-mask-size: contain; mask-repeat: no-repeat; -webkit-mask-repeat: no-repeat; background-color: var(--color); } .icon-size.icon-user { -webkit-mask: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3e %3cpath fill='%239B9B9B' fill-rule='evenodd' d='M16 2.666c7.363 0 13.333 5.971 13.333 13.334 0 7.364-5.97 13.333-13.333 13.333-7.364 0-13.333-5.97-13.333-13.333S8.637 2.666 16 2.666m-2.593 18.06l-3.212 1.842c-.735.418-1.21 1.172-1.279 2.006l-.008.21-.001.434c1.962 1.514 4.422 2.414 7.093 2.414 2.67 0 5.13-.9 7.093-2.414v-.434c0-.846-.42-1.632-1.11-2.106l-.178-.112-3.214-1.838c-.77.421-1.652.662-2.59.662-.94 0-1.825-.24-2.594-.664M16 4.368C9.576 4.368 4.368 9.578 4.368 16c0 2.98 1.121 5.697 2.964 7.756.256-1.028.89-1.935 1.788-2.526l.23-.14 2.623-1.506c-.848-.952-1.364-2.208-1.364-3.584v-2.27c0-2.977 2.415-5.389 5.391-5.389s5.39 2.412 5.39 5.39V16c0 1.377-.517 2.634-1.366 3.586l2.625 1.503c1.022.583 1.742 1.552 2.02 2.665C26.51 21.697 27.63 18.98 27.63 16c0-6.423-5.207-11.632-11.63-11.632m0 5.674c-2.038 0-3.689 1.652-3.689 3.688V16c0 2.036 1.65 3.69 3.688 3.69 2.036 0 3.688-1.654 3.688-3.69v-2.27c0-2.036-1.652-3.688-3.688-3.688'/%3e%3c/svg%3e"); mask: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3e %3cpath fill='%239B9B9B' fill-rule='evenodd' d='M16 2.666c7.363 0 13.333 5.971 13.333 13.334 0 7.364-5.97 13.333-13.333 13.333-7.364 0-13.333-5.97-13.333-13.333S8.637 2.666 16 2.666m-2.593 18.06l-3.212 1.842c-.735.418-1.21 1.172-1.279 2.006l-.008.21-.001.434c1.962 1.514 4.422 2.414 7.093 2.414 2.67 0 5.13-.9 7.093-2.414v-.434c0-.846-.42-1.632-1.11-2.106l-.178-.112-3.214-1.838c-.77.421-1.652.662-2.59.662-.94 0-1.825-.24-2.594-.664M16 4.368C9.576 4.368 4.368 9.578 4.368 16c0 2.98 1.121 5.697 2.964 7.756.256-1.028.89-1.935 1.788-2.526l.23-.14 2.623-1.506c-.848-.952-1.364-2.208-1.364-3.584v-2.27c0-2.977 2.415-5.389 5.391-5.389s5.39 2.412 5.39 5.39V16c0 1.377-.517 2.634-1.366 3.586l2.625 1.503c1.022.583 1.742 1.552 2.02 2.665C26.51 21.697 27.63 18.98 27.63 16c0-6.423-5.207-11.632-11.63-11.632m0 5.674c-2.038 0-3.689 1.652-3.689 3.688V16c0 2.036 1.65 3.69 3.688 3.69 2.036 0 3.688-1.654 3.688-3.69v-2.27c0-2.036-1.652-3.688-3.688-3.688'/%3e%3c/svg%3e"); mask-size: contain; -webkit-mask-size: contain; mask-repeat: no-repeat; -webkit-mask-repeat: no-repeat; background-color: var(--color); } .icon-size.icon-cart { -webkit-mask: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3e %3cg fill='none' fill-rule='evenodd'%3e %3cpath d='M0 0H32V32H0z'/%3e %3cpath fill='%23848788' d='M9.525 25.036c1.186 0 2.148.962 2.148 2.148 0 1.187-.962 2.149-2.148 2.149-1.187 0-2.149-.962-2.149-2.149 0-1.186.962-2.148 2.149-2.148zm16.482 0c1.187 0 2.149.962 2.149 2.148 0 1.187-.962 2.149-2.149 2.149s-2.149-.962-2.149-2.149c0-1.186.962-2.148 2.15-2.148zM7.17 2.666c.45 0 .835.308.942.735l.02.109.673 5.043h19.557c.574 0 1.014.493.968 1.05l-.016.112-2.355 11.773c-.083.416-.425.726-.838.774l-.114.007H9.525c-.45 0-.835-.307-.942-.734l-.021-.109L6.32 4.61H3.638c-.536 0-.971-.435-.971-.971 0-.498.375-.909.858-.965l.113-.006H7.17zm20.007 7.83H9.064l1.31 9.83h14.837l1.966-9.83z'/%3e %3c/g%3e%3c/svg%3e"); mask: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3e %3cg fill='none' fill-rule='evenodd'%3e %3cpath d='M0 0H32V32H0z'/%3e %3cpath fill='%23848788' d='M9.525 25.036c1.186 0 2.148.962 2.148 2.148 0 1.187-.962 2.149-2.148 2.149-1.187 0-2.149-.962-2.149-2.149 0-1.186.962-2.148 2.149-2.148zm16.482 0c1.187 0 2.149.962 2.149 2.148 0 1.187-.962 2.149-2.149 2.149s-2.149-.962-2.149-2.149c0-1.186.962-2.148 2.15-2.148zM7.17 2.666c.45 0 .835.308.942.735l.02.109.673 5.043h19.557c.574 0 1.014.493.968 1.05l-.016.112-2.355 11.773c-.083.416-.425.726-.838.774l-.114.007H9.525c-.45 0-.835-.307-.942-.734l-.021-.109L6.32 4.61H3.638c-.536 0-.971-.435-.971-.971 0-.498.375-.909.858-.965l.113-.006H7.17zm20.007 7.83H9.064l1.31 9.83h14.837l1.966-9.83z'/%3e %3c/g%3e%3c/svg%3e"); mask-size: contain; -webkit-mask-size: contain; mask-repeat: no-repeat; -webkit-mask-repeat: no-repeat; background-color: var(--color); } .icon-size.icon-add { --color: var(--green); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='18' viewBox='0 0 362 362.00086' width='18'%3E%3Cpath d='m235.265625 17.820312c-18.730469-6.523437-38.429687-9.84375-58.265625-9.820312-97.597656 0-177 79.398438-177 177-.0273438 20.683594 3.582031 41.210938 10.664062 60.644531 1.324219 3.632813 5.34375 5.503907 8.976563 4.175781 3.632813-1.324218 5.5-5.34375 4.175781-8.976562-6.519531-17.894531-9.839844-36.796875-9.816406-55.84375 0-89.878906 73.121094-163 163-163 18.265625-.023438 36.40625 3.03125 53.65625 9.039062 2.363281.839844 5 .347657 6.902344-1.289062 1.902344-1.632812 2.785156-4.164062 2.3125-6.628906s-2.230469-4.488282-4.605469-5.300782zm0 0'/%3E%3Cpath d='m84.394531 319.15625 22.167969-30.085938c1.664062-2.257812 1.820312-5.289062.394531-7.707031-1.421875-2.414062-4.148437-3.746093-6.929687-3.386719l-54.945313 7.132813c-1.890625.246094-3.601562 1.253906-4.734375 2.789063-1.132812 1.535156-1.589844 3.46875-1.265625 5.347656l9.464844 54.59375c.480469 2.761718 2.5625 4.972656 5.289063 5.613281 2.730468.644531 5.582031-.402344 7.242187-2.65625l15-20.363281c29.59375 20.65625 64.835937 31.679687 100.921875 31.566406 97.601562 0 177-79.398438 177-177 .046875-23.410156-4.585938-46.59375-13.621094-68.191406-.949218-2.328125-3.078125-3.972656-5.570312-4.300782-2.496094-.324218-4.976563.710938-6.492188 2.714844-1.519531 2.007813-1.847656 4.675782-.855468 6.988282 8.320312 19.886718 12.582031 41.234374 12.539062 62.789062 0 89.878906-73.121094 163-163 163-33.09375.101562-65.421875-9.964844-92.605469-28.84375zm-24.851562 10.128906-5.414063-31.230468 31.433594-4.082032-16.527344 22.433594c-.019531.019531-.035156.039062-.050781.058594-.015625.019531-.046875.070312-.074219.105468zm0 0'/%3E%3Cpath d='m311.046875 0c-3.867187 0-7 3.132812-7 7v36.953125h-39.046875c-3.867188 0-7 3.132813-7 7s3.132812 7 7 7h39.046875v39.046875c0 3.867188 3.132813 7 7 7s7-3.132812 7-7v-39.046875h36.953125c3.867188 0 7-3.132813 7-7s-3.132812-7-7-7h-36.953125v-36.953125c0-3.867188-3.132813-7-7-7zm0 0'/%3E%3Cpath d='m177.347656 251.019531c-.117187-.007812-.230468-.019531-.347656-.019531s-.230469.011719-.347656.019531c-16.386719-.207031-29.566406-13.539062-29.585938-29.925781 0-3.867188-3.132812-7-7-7-3.867187 0-7 3.132812-7 7 .03125 21.550781 15.664063 39.90625 36.933594 43.367188v15.539062c0 3.867188 3.132812 7 7 7s7-3.132812 7-7v-15.539062c22.605469-3.648438 38.617188-24.054688 36.785156-46.878907-1.828125-22.824219-20.886718-40.417969-43.785156-40.421875-16.53125 0-29.933594-13.398437-29.933594-29.933594 0-16.53125 13.402344-29.933593 29.933594-29.933593 16.535156 0 29.933594 13.402343 29.933594 29.9375 0 3.863281 3.136718 7 7 7 3.867187 0 7-3.136719 7-7-.027344-21.554688-15.660156-39.914063-36.933594-43.375v-13.855469c0-3.867188-3.132812-7-7-7s-7 3.132812-7 7v13.855469c-22.601562 3.660156-38.605469 24.058593-36.773438 46.882812 1.828126 22.820313 20.878907 40.410157 43.773438 40.417969 16.464844 0 29.835938 13.292969 29.933594 29.757812.09375 16.460938-13.125 29.910157-29.585938 30.101563zm0 0'/%3E%3C/svg%3E"); mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='18' viewBox='0 0 362 362.00086' width='18'%3E%3Cpath d='m235.265625 17.820312c-18.730469-6.523437-38.429687-9.84375-58.265625-9.820312-97.597656 0-177 79.398438-177 177-.0273438 20.683594 3.582031 41.210938 10.664062 60.644531 1.324219 3.632813 5.34375 5.503907 8.976563 4.175781 3.632813-1.324218 5.5-5.34375 4.175781-8.976562-6.519531-17.894531-9.839844-36.796875-9.816406-55.84375 0-89.878906 73.121094-163 163-163 18.265625-.023438 36.40625 3.03125 53.65625 9.039062 2.363281.839844 5 .347657 6.902344-1.289062 1.902344-1.632812 2.785156-4.164062 2.3125-6.628906s-2.230469-4.488282-4.605469-5.300782zm0 0'/%3E%3Cpath d='m84.394531 319.15625 22.167969-30.085938c1.664062-2.257812 1.820312-5.289062.394531-7.707031-1.421875-2.414062-4.148437-3.746093-6.929687-3.386719l-54.945313 7.132813c-1.890625.246094-3.601562 1.253906-4.734375 2.789063-1.132812 1.535156-1.589844 3.46875-1.265625 5.347656l9.464844 54.59375c.480469 2.761718 2.5625 4.972656 5.289063 5.613281 2.730468.644531 5.582031-.402344 7.242187-2.65625l15-20.363281c29.59375 20.65625 64.835937 31.679687 100.921875 31.566406 97.601562 0 177-79.398438 177-177 .046875-23.410156-4.585938-46.59375-13.621094-68.191406-.949218-2.328125-3.078125-3.972656-5.570312-4.300782-2.496094-.324218-4.976563.710938-6.492188 2.714844-1.519531 2.007813-1.847656 4.675782-.855468 6.988282 8.320312 19.886718 12.582031 41.234374 12.539062 62.789062 0 89.878906-73.121094 163-163 163-33.09375.101562-65.421875-9.964844-92.605469-28.84375zm-24.851562 10.128906-5.414063-31.230468 31.433594-4.082032-16.527344 22.433594c-.019531.019531-.035156.039062-.050781.058594-.015625.019531-.046875.070312-.074219.105468zm0 0'/%3E%3Cpath d='m311.046875 0c-3.867187 0-7 3.132812-7 7v36.953125h-39.046875c-3.867188 0-7 3.132813-7 7s3.132812 7 7 7h39.046875v39.046875c0 3.867188 3.132813 7 7 7s7-3.132812 7-7v-39.046875h36.953125c3.867188 0 7-3.132813 7-7s-3.132812-7-7-7h-36.953125v-36.953125c0-3.867188-3.132813-7-7-7zm0 0'/%3E%3Cpath d='m177.347656 251.019531c-.117187-.007812-.230468-.019531-.347656-.019531s-.230469.011719-.347656.019531c-16.386719-.207031-29.566406-13.539062-29.585938-29.925781 0-3.867188-3.132812-7-7-7-3.867187 0-7 3.132812-7 7 .03125 21.550781 15.664063 39.90625 36.933594 43.367188v15.539062c0 3.867188 3.132812 7 7 7s7-3.132812 7-7v-15.539062c22.605469-3.648438 38.617188-24.054688 36.785156-46.878907-1.828125-22.824219-20.886718-40.417969-43.785156-40.421875-16.53125 0-29.933594-13.398437-29.933594-29.933594 0-16.53125 13.402344-29.933593 29.933594-29.933593 16.535156 0 29.933594 13.402343 29.933594 29.9375 0 3.863281 3.136718 7 7 7 3.867187 0 7-3.136719 7-7-.027344-21.554688-15.660156-39.914063-36.933594-43.375v-13.855469c0-3.867188-3.132812-7-7-7s-7 3.132812-7 7v13.855469c-22.601562 3.660156-38.605469 24.058593-36.773438 46.882812 1.828126 22.820313 20.878907 40.410157 43.773438 40.417969 16.464844 0 29.835938 13.292969 29.933594 29.757812.09375 16.460938-13.125 29.910157-29.585938 30.101563zm0 0'/%3E%3C/svg%3E"); mask-size: contain; -webkit-mask-size: contain; mask-repeat: no-repeat; -webkit-mask-repeat: no-repeat; background-color: var(--color); } .icon-size.icon-setting { -webkit-mask: url("data:image/svg+xml,%3c!-- Generated by IcoMoon.io --%3e%3csvg version='1.1' xmlns='http://www.w3.org/2000/svg' width='1024' height='1024' viewBox='0 0 1024 1024'%3e%3ctitle%3e%3c/title%3e%3cg id='icomoon-ignore'%3e%3c/g%3e%3cpath d='M512 0c-282.77 0-512 229.23-512 512s229.23 512 512 512c282.77 0 512-229.23 512-512v0c-0.355-282.627-229.374-511.645-511.967-512h-0.033zM580.27 765.952v184.658c-20.517 3.258-44.173 5.119-68.265 5.119s-47.748-1.861-70.834-5.448l2.569 0.329v-185.344c-0.086-14.194-8.683-26.36-20.941-31.657l-0.225-0.087c-88.406-36.411-149.506-121.894-149.506-221.647 0-80.881 40.168-152.381 101.643-195.638l0.759-0.506v128c0 0.052 0 0.113 0 0.174 0 7.666 2.568 14.733 6.89 20.387l-0.059-0.081c29.893 39.556 76.845 64.853 129.705 64.853s99.812-25.297 129.409-64.445l0.295-0.408c4.263-5.573 6.831-12.639 6.831-20.306 0-0.061 0-0.123 0-0.184v0.009-127.652c62.41 43.544 102.732 115.001 102.732 195.876 0 23.36-3.364 45.935-9.634 67.266l0.424-1.684c-20.088 71.942-71.751 128.874-138.712 155.775l-1.576 0.559c-12.683 5.383-21.431 17.702-21.504 32.073v0.009zM648.54 934.226v-146.084c77.952-38.514 135.984-107.365 159.237-190.72l0.507-2.129c7.177-24.776 11.305-53.236 11.305-82.66 0-128.341-78.537-238.338-190.172-284.555l-2.043-0.749c-3.777-1.636-8.175-2.587-12.796-2.587-7.099 0-13.673 2.246-19.050 6.066l0.102-0.069c-9.026 6.325-14.889 16.631-15.022 28.314v172.391c-17.177 18.096-41.406 29.354-68.265 29.354s-51.088-11.258-68.226-29.313l-0.039-0.041v-172.708c-0.133-11.703-5.996-22.009-14.91-28.26l-0.112-0.074c-5.35-3.663-11.962-5.85-19.085-5.85-4.56 0-8.911 0.896-12.886 2.522l0.227-0.082c-113.782 46.71-192.452 156.65-192.452 284.964 0 119.895 68.684 223.748 168.852 274.358l1.758 0.805v147.108c-179.783-59.423-307.22-225.938-307.22-422.218 0-245.071 198.669-443.74 443.74-443.74 245.068 0 443.736 198.665 443.74 443.732v0c-0.956 195.966-127.961 362.019-304.050 421.306l-3.15 0.92z'%3e%3c/path%3e%3c/svg%3e"); mask: url("data:image/svg+xml,%3c!-- Generated by IcoMoon.io --%3e%3csvg version='1.1' xmlns='http://www.w3.org/2000/svg' width='1024' height='1024' viewBox='0 0 1024 1024'%3e%3ctitle%3e%3c/title%3e%3cg id='icomoon-ignore'%3e%3c/g%3e%3cpath d='M512 0c-282.77 0-512 229.23-512 512s229.23 512 512 512c282.77 0 512-229.23 512-512v0c-0.355-282.627-229.374-511.645-511.967-512h-0.033zM580.27 765.952v184.658c-20.517 3.258-44.173 5.119-68.265 5.119s-47.748-1.861-70.834-5.448l2.569 0.329v-185.344c-0.086-14.194-8.683-26.36-20.941-31.657l-0.225-0.087c-88.406-36.411-149.506-121.894-149.506-221.647 0-80.881 40.168-152.381 101.643-195.638l0.759-0.506v128c0 0.052 0 0.113 0 0.174 0 7.666 2.568 14.733 6.89 20.387l-0.059-0.081c29.893 39.556 76.845 64.853 129.705 64.853s99.812-25.297 129.409-64.445l0.295-0.408c4.263-5.573 6.831-12.639 6.831-20.306 0-0.061 0-0.123 0-0.184v0.009-127.652c62.41 43.544 102.732 115.001 102.732 195.876 0 23.36-3.364 45.935-9.634 67.266l0.424-1.684c-20.088 71.942-71.751 128.874-138.712 155.775l-1.576 0.559c-12.683 5.383-21.431 17.702-21.504 32.073v0.009zM648.54 934.226v-146.084c77.952-38.514 135.984-107.365 159.237-190.72l0.507-2.129c7.177-24.776 11.305-53.236 11.305-82.66 0-128.341-78.537-238.338-190.172-284.555l-2.043-0.749c-3.777-1.636-8.175-2.587-12.796-2.587-7.099 0-13.673 2.246-19.050 6.066l0.102-0.069c-9.026 6.325-14.889 16.631-15.022 28.314v172.391c-17.177 18.096-41.406 29.354-68.265 29.354s-51.088-11.258-68.226-29.313l-0.039-0.041v-172.708c-0.133-11.703-5.996-22.009-14.91-28.26l-0.112-0.074c-5.35-3.663-11.962-5.85-19.085-5.85-4.56 0-8.911 0.896-12.886 2.522l0.227-0.082c-113.782 46.71-192.452 156.65-192.452 284.964 0 119.895 68.684 223.748 168.852 274.358l1.758 0.805v147.108c-179.783-59.423-307.22-225.938-307.22-422.218 0-245.071 198.669-443.74 443.74-443.74 245.068 0 443.736 198.665 443.74 443.732v0c-0.956 195.966-127.961 362.019-304.050 421.306l-3.15 0.92z'%3e%3c/path%3e%3c/svg%3e"); mask-size: contain; -webkit-mask-size: contain; mask-repeat: no-repeat; -webkit-mask-repeat: no-repeat; background-color: var(--color); } .icon-size.icon-globe { -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512' width='18' height='18' %3E%3Cg%3E%3Cg%3E%3Cpath d='M425.951,89.021C386.864,32.451,324.917,0,256.006,0S125.148,32.451,86.061,89.021 c-38.895,56.284-47.876,127.541-24.072,190.496c6.367,17.192,16.488,33.895,30.01,49.547l150.378,176.634 c3.401,3.998,8.384,6.302,13.629,6.302c5.245,0,10.228-2.303,13.629-6.302l150.336-176.586 c13.582-15.742,23.69-32.427,30.004-49.481C473.827,216.562,464.846,145.305,425.951,89.021z M416.451,267.093 c-4.869,13.158-12.818,26.167-23.613,38.68c-0.03,0.03-0.06,0.06-0.084,0.096L256.006,466.487L119.174,305.768 c-10.789-12.502-18.738-25.51-23.655-38.794c-19.686-52.065-12.215-110.981,19.991-157.592 c32.307-46.76,83.519-73.578,140.496-73.578c56.976,0,108.182,26.817,140.49,73.578 C428.708,155.993,436.185,214.909,416.451,267.093z'/%3E%3C/g%3E%3C/g%3E%3Cg%3E%3Cg%3E%3Cpath d='M256.006,106.219c-55.276,0-100.252,44.97-100.252,100.252s44.97,100.252,100.252,100.252s100.252-44.97,100.252-100.252 C356.258,151.195,311.282,106.219,256.006,106.219z M256.006,270.918c-35.536,0-64.448-28.912-64.448-64.448 c0-35.536,28.912-64.448,64.448-64.448c35.536,0,64.448,28.912,64.448,64.448S291.542,270.918,256.006,270.918z'/%3E%3C/g%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3C/svg%3E"); mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512' width='18' height='18' %3E%3Cg%3E%3Cg%3E%3Cpath d='M425.951,89.021C386.864,32.451,324.917,0,256.006,0S125.148,32.451,86.061,89.021 c-38.895,56.284-47.876,127.541-24.072,190.496c6.367,17.192,16.488,33.895,30.01,49.547l150.378,176.634 c3.401,3.998,8.384,6.302,13.629,6.302c5.245,0,10.228-2.303,13.629-6.302l150.336-176.586 c13.582-15.742,23.69-32.427,30.004-49.481C473.827,216.562,464.846,145.305,425.951,89.021z M416.451,267.093 c-4.869,13.158-12.818,26.167-23.613,38.68c-0.03,0.03-0.06,0.06-0.084,0.096L256.006,466.487L119.174,305.768 c-10.789-12.502-18.738-25.51-23.655-38.794c-19.686-52.065-12.215-110.981,19.991-157.592 c32.307-46.76,83.519-73.578,140.496-73.578c56.976,0,108.182,26.817,140.49,73.578 C428.708,155.993,436.185,214.909,416.451,267.093z'/%3E%3C/g%3E%3C/g%3E%3Cg%3E%3Cg%3E%3Cpath d='M256.006,106.219c-55.276,0-100.252,44.97-100.252,100.252s44.97,100.252,100.252,100.252s100.252-44.97,100.252-100.252 C356.258,151.195,311.282,106.219,256.006,106.219z M256.006,270.918c-35.536,0-64.448-28.912-64.448-64.448 c0-35.536,28.912-64.448,64.448-64.448c35.536,0,64.448,28.912,64.448,64.448S291.542,270.918,256.006,270.918z'/%3E%3C/g%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3C/svg%3E"); mask-size: contain; -webkit-mask-size: contain; mask-repeat: no-repeat; -webkit-mask-repeat: no-repeat; background-color: var(--color); } .icon-size.icon-checked { --color: var(--green); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 426.667 426.667' %3E%3Cg%3E%3Cg%3E%3Cpath d='M421.876,56.307c-6.548-6.78-17.352-6.968-24.132-0.42c-0.142,0.137-0.282,0.277-0.42,0.42L119.257,334.375 l-90.334-90.334c-6.78-6.548-17.584-6.36-24.132,0.42c-6.388,6.614-6.388,17.099,0,23.713l102.4,102.4 c6.665,6.663,17.468,6.663,24.132,0L421.456,80.44C428.236,73.891,428.424,63.087,421.876,56.307z'/%3E%3C/g%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3C/svg%3E"); mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 426.667 426.667' %3E%3Cg%3E%3Cg%3E%3Cpath d='M421.876,56.307c-6.548-6.78-17.352-6.968-24.132-0.42c-0.142,0.137-0.282,0.277-0.42,0.42L119.257,334.375 l-90.334-90.334c-6.78-6.548-17.584-6.36-24.132,0.42c-6.388,6.614-6.388,17.099,0,23.713l102.4,102.4 c6.665,6.663,17.468,6.663,24.132,0L421.456,80.44C428.236,73.891,428.424,63.087,421.876,56.307z'/%3E%3C/g%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3C/svg%3E"); mask-size: contain; -webkit-mask-size: contain; mask-repeat: no-repeat; -webkit-mask-repeat: no-repeat; background-color: var(--color); } .icon-size.icon-cancel { --color: var(--red); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512.001 512.001' %3E%3Cg%3E%3Cg%3E%3Cpath d='M284.286,256.002L506.143,34.144c7.811-7.811,7.811-20.475,0-28.285c-7.811-7.81-20.475-7.811-28.285,0L256,227.717 L34.143,5.859c-7.811-7.811-20.475-7.811-28.285,0c-7.81,7.811-7.811,20.475,0,28.285l221.857,221.857L5.858,477.859 c-7.811,7.811-7.811,20.475,0,28.285c3.905,3.905,9.024,5.857,14.143,5.857c5.119,0,10.237-1.952,14.143-5.857L256,284.287 l221.857,221.857c3.905,3.905,9.024,5.857,14.143,5.857s10.237-1.952,14.143-5.857c7.811-7.811,7.811-20.475,0-28.285 L284.286,256.002z'/%3E%3C/g%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3C/svg%3E"); mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512.001 512.001' %3E%3Cg%3E%3Cg%3E%3Cpath d='M284.286,256.002L506.143,34.144c7.811-7.811,7.811-20.475,0-28.285c-7.811-7.81-20.475-7.811-28.285,0L256,227.717 L34.143,5.859c-7.811-7.811-20.475-7.811-28.285,0c-7.81,7.811-7.811,20.475,0,28.285l221.857,221.857L5.858,477.859 c-7.811,7.811-7.811,20.475,0,28.285c3.905,3.905,9.024,5.857,14.143,5.857c5.119,0,10.237-1.952,14.143-5.857L256,284.287 l221.857,221.857c3.905,3.905,9.024,5.857,14.143,5.857s10.237-1.952,14.143-5.857c7.811-7.811,7.811-20.475,0-28.285 L284.286,256.002z'/%3E%3C/g%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3C/svg%3E"); mask-size: contain; -webkit-mask-size: contain; mask-repeat: no-repeat; -webkit-mask-repeat: no-repeat; background-color: var(--color); } .icon-size.icon-envelope { -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512' style='enable-background:new 0 0 512 512;'%3E%3Cg%3E%3Cg%3E%3Cpath d='M469.333,64H42.667C19.135,64,0,83.135,0,106.667v298.667C0,428.865,19.135,448,42.667,448h426.667 C492.865,448,512,428.865,512,405.333V106.667C512,83.135,492.865,64,469.333,64z M42.667,85.333h426.667 c1.572,0,2.957,0.573,4.432,0.897c-36.939,33.807-159.423,145.859-202.286,184.478c-3.354,3.021-8.76,6.625-15.479,6.625 s-12.125-3.604-15.49-6.635C197.652,232.085,75.161,120.027,38.228,86.232C39.706,85.908,41.094,85.333,42.667,85.333z M21.333,405.333V106.667c0-2.09,0.63-3.986,1.194-5.896c28.272,25.876,113.736,104.06,169.152,154.453 C136.443,302.671,50.957,383.719,22.46,410.893C21.957,409.079,21.333,407.305,21.333,405.333z M469.333,426.667H42.667 c-1.704,0-3.219-0.594-4.81-0.974c29.447-28.072,115.477-109.586,169.742-156.009c7.074,6.417,13.536,12.268,18.63,16.858 c8.792,7.938,19.083,12.125,29.771,12.125s20.979-4.188,29.76-12.115c5.096-4.592,11.563-10.448,18.641-16.868 c54.268,46.418,140.286,127.926,169.742,156.009C472.552,426.073,471.039,426.667,469.333,426.667z M490.667,405.333 c0,1.971-0.624,3.746-1.126,5.56c-28.508-27.188-113.984-108.227-169.219-155.668c55.418-50.393,140.869-128.57,169.151-154.456 c0.564,1.91,1.194,3.807,1.194,5.897V405.333z'/%3E%3C/g%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3C/svg%3E"); mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512' style='enable-background:new 0 0 512 512;'%3E%3Cg%3E%3Cg%3E%3Cpath d='M469.333,64H42.667C19.135,64,0,83.135,0,106.667v298.667C0,428.865,19.135,448,42.667,448h426.667 C492.865,448,512,428.865,512,405.333V106.667C512,83.135,492.865,64,469.333,64z M42.667,85.333h426.667 c1.572,0,2.957,0.573,4.432,0.897c-36.939,33.807-159.423,145.859-202.286,184.478c-3.354,3.021-8.76,6.625-15.479,6.625 s-12.125-3.604-15.49-6.635C197.652,232.085,75.161,120.027,38.228,86.232C39.706,85.908,41.094,85.333,42.667,85.333z M21.333,405.333V106.667c0-2.09,0.63-3.986,1.194-5.896c28.272,25.876,113.736,104.06,169.152,154.453 C136.443,302.671,50.957,383.719,22.46,410.893C21.957,409.079,21.333,407.305,21.333,405.333z M469.333,426.667H42.667 c-1.704,0-3.219-0.594-4.81-0.974c29.447-28.072,115.477-109.586,169.742-156.009c7.074,6.417,13.536,12.268,18.63,16.858 c8.792,7.938,19.083,12.125,29.771,12.125s20.979-4.188,29.76-12.115c5.096-4.592,11.563-10.448,18.641-16.868 c54.268,46.418,140.286,127.926,169.742,156.009C472.552,426.073,471.039,426.667,469.333,426.667z M490.667,405.333 c0,1.971-0.624,3.746-1.126,5.56c-28.508-27.188-113.984-108.227-169.219-155.668c55.418-50.393,140.869-128.57,169.151-154.456 c0.564,1.91,1.194,3.807,1.194,5.897V405.333z'/%3E%3C/g%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3C/svg%3E"); mask-size: contain; -webkit-mask-size: contain; mask-repeat: no-repeat; -webkit-mask-repeat: no-repeat; background-color: var(--color); } .icon-size.icon-protect { -webkit-mask: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3e %3cpath fill='%239B9B9B' fill-rule='evenodd' d='M10.646 2.34c.496-.454 1.244-.454 1.74 0l.012.013c1.52 1.482 3.3 2.232 5.599 2.36 1.103.062 1.98.974 1.996 2.076.003.227.009.43.018.622v.016c.045 2.349.1 5.272-.88 7.93-.537 1.456-1.35 2.723-2.416 3.764-1.214 1.185-2.803 2.126-4.723 2.798-.063.022-.129.04-.195.053-.093.019-.187.028-.281.028-.094 0-.188-.01-.282-.028-.066-.013-.13-.03-.193-.053-1.923-.67-3.514-1.611-4.729-2.796-1.066-1.041-1.88-2.307-2.416-3.764-.976-2.649-.92-5.567-.876-7.912v-.036c.01-.194.016-.397.019-.621.016-1.103.893-2.015 1.996-2.077 2.3-.128 4.078-.878 5.598-2.36zm.942.863c-.044-.038-.1-.038-.145 0-.867.843-1.799 1.469-2.848 1.913-1.05.445-2.194.696-3.495.769-.49.027-.88.432-.888.922-.003.234-.01.446-.018.65v.013c-.046 2.363-.097 5.042.803 7.483 1.03 2.792 3.132 4.708 6.43 5.858.012.004.024.008.037.01.035.007.07.007.103 0 .013-.002.026-.006.037-.01 3.295-1.152 5.397-3.07 6.426-5.86.903-2.448.853-5.129.808-7.495-.01-.201-.015-.414-.019-.649-.007-.49-.397-.895-.888-.922-1.301-.073-2.444-.324-3.495-.769-1.048-.444-1.98-1.07-2.848-1.913zm4.097 6.004c.276.277.276.725 0 1.001L11.1 14.793c-.276.276-.724.276-1 0L7.807 12.5c-.276-.276-.276-.724 0-1 .277-.277.725-.277 1.001 0L10.6 13.29l4.084-4.084c.276-.276.725-.276 1.001 0z'/%3e%3c/svg%3e"); mask: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3e %3cpath fill='%239B9B9B' fill-rule='evenodd' d='M10.646 2.34c.496-.454 1.244-.454 1.74 0l.012.013c1.52 1.482 3.3 2.232 5.599 2.36 1.103.062 1.98.974 1.996 2.076.003.227.009.43.018.622v.016c.045 2.349.1 5.272-.88 7.93-.537 1.456-1.35 2.723-2.416 3.764-1.214 1.185-2.803 2.126-4.723 2.798-.063.022-.129.04-.195.053-.093.019-.187.028-.281.028-.094 0-.188-.01-.282-.028-.066-.013-.13-.03-.193-.053-1.923-.67-3.514-1.611-4.729-2.796-1.066-1.041-1.88-2.307-2.416-3.764-.976-2.649-.92-5.567-.876-7.912v-.036c.01-.194.016-.397.019-.621.016-1.103.893-2.015 1.996-2.077 2.3-.128 4.078-.878 5.598-2.36zm.942.863c-.044-.038-.1-.038-.145 0-.867.843-1.799 1.469-2.848 1.913-1.05.445-2.194.696-3.495.769-.49.027-.88.432-.888.922-.003.234-.01.446-.018.65v.013c-.046 2.363-.097 5.042.803 7.483 1.03 2.792 3.132 4.708 6.43 5.858.012.004.024.008.037.01.035.007.07.007.103 0 .013-.002.026-.006.037-.01 3.295-1.152 5.397-3.07 6.426-5.86.903-2.448.853-5.129.808-7.495-.01-.201-.015-.414-.019-.649-.007-.49-.397-.895-.888-.922-1.301-.073-2.444-.324-3.495-.769-1.048-.444-1.98-1.07-2.848-1.913zm4.097 6.004c.276.277.276.725 0 1.001L11.1 14.793c-.276.276-.724.276-1 0L7.807 12.5c-.276-.276-.276-.724 0-1 .277-.277.725-.277 1.001 0L10.6 13.29l4.084-4.084c.276-.276.725-.276 1.001 0z'/%3e%3c/svg%3e"); mask-size: contain; -webkit-mask-size: contain; mask-repeat: no-repeat; -webkit-mask-repeat: no-repeat; background-color: var(--color); } .icon-size.icon-db-arrow { --color: var(--color-accent-1); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' x='0px' y='0px' viewBox='0 0 240.835 240.835' style='enable-background:new 0 0 240.835 240.835;' xml:space='preserve'%3E%3Cg%3E%3Cpath id='Expand_Less' d='M129.007,57.819c-4.68-4.68-12.499-4.68-17.191,0L3.555,165.803c-4.74,4.74-4.74,12.427,0,17.155 c4.74,4.74,12.439,4.74,17.179,0l99.683-99.406l99.671,99.418c4.752,4.74,12.439,4.74,17.191,0c4.74-4.74,4.74-12.427,0-17.155 L129.007,57.819z'/%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3C/svg%3E"); mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' x='0px' y='0px' viewBox='0 0 240.835 240.835' style='enable-background:new 0 0 240.835 240.835;' xml:space='preserve'%3E%3Cg%3E%3Cpath id='Expand_Less' d='M129.007,57.819c-4.68-4.68-12.499-4.68-17.191,0L3.555,165.803c-4.74,4.74-4.74,12.427,0,17.155 c4.74,4.74,12.439,4.74,17.179,0l99.683-99.406l99.671,99.418c4.752,4.74,12.439,4.74,17.191,0c4.74-4.74,4.74-12.427,0-17.155 L129.007,57.819z'/%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3C/svg%3E"); mask-size: contain; -webkit-mask-size: contain; mask-repeat: no-repeat; -webkit-mask-repeat: no-repeat; background-color: var(--color); } .icon-size.icon-swap { color: var(--color-main-1); -webkit-mask: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3e %3cpath fill='%231435C3' d='M16.112 13.458v-3.019L12.982 12v3.337l3.13-1.878zm-3.692-2.43l3-1.495-3.84-1.926-3 1.496 3.84 1.925zm-.56 4.392V12l-3.972-1.99v3.42l3.972 1.99zm5.317-6.14c.038.075.047.16.057.234v4.261c0 .197-.103.384-.272.486l-4.252 2.542c-.159.103-.364.113-.533.029L7.075 14.28c-.187-.093-.309-.29-.309-.505V9.093c.01-.084.019-.159.056-.243.01-.009.02-.009.02-.018.018-.02.027-.038.046-.056.037-.057.093-.103.159-.14.009-.01.018-.029.028-.029l4.252-2.13c.159-.075.336-.075.495 0l5.103 2.55.028.029c.066.037.122.084.159.15l.047.046c0 .01.01.019.018.028zm-13.26 8.908l-.408 2.14c-.069.354-.41.587-.766.519-.355-.067-.588-.41-.52-.765l.723-3.785c.066-.343.389-.573.735-.525l3.955.56c.358.051.607.383.557.741-.052.357-.383.607-.74.555l-2.586-.366c1.56 2.307 4.208 3.737 7.133 3.737 4.78 0 8.692-3.912 8.692-8.691 0-.361.293-.654.654-.654.361 0 .654.293.654.654 0 5.502-4.498 10-10 10-3.281 0-6.267-1.57-8.083-4.12zM20.083 5.12l.408-2.14c.069-.355.41-.587.766-.52.355.068.588.411.52.766l-.723 3.784c-.065.343-.389.574-.735.525l-3.955-.56c-.358-.05-.607-.383-.557-.74.052-.357.383-.607.74-.556l2.586.367C17.573 3.738 14.925 2.308 12 2.308 7.22 2.308 3.308 6.221 3.308 11c0 .36-.292.654-.654.654-.361 0-.654-.293-.654-.654C2 5.498 6.498 1 12 1c3.281 0 6.267 1.57 8.083 4.12z'/%3e%3c/svg%3e"); mask: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3e %3cpath fill='%231435C3' d='M16.112 13.458v-3.019L12.982 12v3.337l3.13-1.878zm-3.692-2.43l3-1.495-3.84-1.926-3 1.496 3.84 1.925zm-.56 4.392V12l-3.972-1.99v3.42l3.972 1.99zm5.317-6.14c.038.075.047.16.057.234v4.261c0 .197-.103.384-.272.486l-4.252 2.542c-.159.103-.364.113-.533.029L7.075 14.28c-.187-.093-.309-.29-.309-.505V9.093c.01-.084.019-.159.056-.243.01-.009.02-.009.02-.018.018-.02.027-.038.046-.056.037-.057.093-.103.159-.14.009-.01.018-.029.028-.029l4.252-2.13c.159-.075.336-.075.495 0l5.103 2.55.028.029c.066.037.122.084.159.15l.047.046c0 .01.01.019.018.028zm-13.26 8.908l-.408 2.14c-.069.354-.41.587-.766.519-.355-.067-.588-.41-.52-.765l.723-3.785c.066-.343.389-.573.735-.525l3.955.56c.358.051.607.383.557.741-.052.357-.383.607-.74.555l-2.586-.366c1.56 2.307 4.208 3.737 7.133 3.737 4.78 0 8.692-3.912 8.692-8.691 0-.361.293-.654.654-.654.361 0 .654.293.654.654 0 5.502-4.498 10-10 10-3.281 0-6.267-1.57-8.083-4.12zM20.083 5.12l.408-2.14c.069-.355.41-.587.766-.52.355.068.588.411.52.766l-.723 3.784c-.065.343-.389.574-.735.525l-3.955-.56c-.358-.05-.607-.383-.557-.74.052-.357.383-.607.74-.556l2.586.367C17.573 3.738 14.925 2.308 12 2.308 7.22 2.308 3.308 6.221 3.308 11c0 .36-.292.654-.654.654-.361 0-.654-.293-.654-.654C2 5.498 6.498 1 12 1c3.281 0 6.267 1.57 8.083 4.12z'/%3e%3c/svg%3e"); mask-size: contain; -webkit-mask-size: contain; mask-repeat: no-repeat; -webkit-mask-repeat: no-repeat; background-color: var(--color); } .icon-size.icon-car { color: var(--color-main-1); -webkit-mask: url("data:image/svg+xml, "); mask: url("data:image/svg+xml, "); mask-size: contain; -webkit-mask-size: contain; mask-repeat: no-repeat; -webkit-mask-repeat: no-repeat; background-color: var(--color); } .icon-size.icon-currency { color: var(--color-main-1); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cg%3E%3Cg%3E%3Cpath d='M256,0C114.848,0,0,114.848,0,256s114.848,256,256,256s256-114.848,256-256S397.152,0,256,0z M256,480 C132.48,480,32,379.52,32,256S132.48,32,256,32s224,100.48,224,224S379.52,480,256,480z'/%3E%3C/g%3E%3C/g%3E%3Cg%3E%3Cg%3E%3Cpath d='M256,240c-26.016,0-48-14.656-48-32s21.984-32,48-32c14.72,0,28.352,4.608,37.376,12.608 c6.592,5.856,16.672,5.312,22.592-1.344c5.888-6.592,5.28-16.704-1.344-22.592c-11.2-9.952-26.24-16.672-42.624-19.328V128 c0-8.832-7.168-16-16-16c-8.832,0-16,7.168-16,16v17.28c-36.48,5.952-64,31.808-64,62.72c0,35.296,35.904,64,80,64 c26.016,0,48,14.656,48,32s-21.984,32-48,32c-14.72,0-28.352-4.608-37.376-12.608c-6.592-5.888-16.704-5.312-22.592,1.344 c-5.888,6.592-5.28,16.704,1.344,22.592c11.2,9.984,26.24,16.672,42.624,19.36V384c0,8.832,7.168,16,16,16c8.832,0,16-7.168,16-16 v-17.28c36.48-5.952,64-31.808,64-62.72C336,268.704,300.096,240,256,240z'/%3E%3C/g%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3C/svg%3E"); mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cg%3E%3Cg%3E%3Cpath d='M256,0C114.848,0,0,114.848,0,256s114.848,256,256,256s256-114.848,256-256S397.152,0,256,0z M256,480 C132.48,480,32,379.52,32,256S132.48,32,256,32s224,100.48,224,224S379.52,480,256,480z'/%3E%3C/g%3E%3C/g%3E%3Cg%3E%3Cg%3E%3Cpath d='M256,240c-26.016,0-48-14.656-48-32s21.984-32,48-32c14.72,0,28.352,4.608,37.376,12.608 c6.592,5.856,16.672,5.312,22.592-1.344c5.888-6.592,5.28-16.704-1.344-22.592c-11.2-9.952-26.24-16.672-42.624-19.328V128 c0-8.832-7.168-16-16-16c-8.832,0-16,7.168-16,16v17.28c-36.48,5.952-64,31.808-64,62.72c0,35.296,35.904,64,80,64 c26.016,0,48,14.656,48,32s-21.984,32-48,32c-14.72,0-28.352-4.608-37.376-12.608c-6.592-5.888-16.704-5.312-22.592,1.344 c-5.888,6.592-5.28,16.704,1.344,22.592c11.2,9.984,26.24,16.672,42.624,19.36V384c0,8.832,7.168,16,16,16c8.832,0,16-7.168,16-16 v-17.28c36.48-5.952,64-31.808,64-62.72C336,268.704,300.096,240,256,240z'/%3E%3C/g%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3C/svg%3E"); mask-size: contain; -webkit-mask-size: contain; mask-repeat: no-repeat; -webkit-mask-repeat: no-repeat; background-color: var(--color); } .icon-size.phone-call { color: #fff; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 473.806 473.806' %3E%3Cg%3E%3Cg%3E%3Cpath d='M374.456,293.506c-9.7-10.1-21.4-15.5-33.8-15.5c-12.3,0-24.1,5.3-34.2,15.4l-31.6,31.5c-2.6-1.4-5.2-2.7-7.7-4 c-3.6-1.8-7-3.5-9.9-5.3c-29.6-18.8-56.5-43.3-82.3-75c-12.5-15.8-20.9-29.1-27-42.6c8.2-7.5,15.8-15.3,23.2-22.8 c2.8-2.8,5.6-5.7,8.4-8.5c21-21,21-48.2,0-69.2l-27.3-27.3c-3.1-3.1-6.3-6.3-9.3-9.5c-6-6.2-12.3-12.6-18.8-18.6 c-9.7-9.6-21.3-14.7-33.5-14.7s-24,5.1-34,14.7c-0.1,0.1-0.1,0.1-0.2,0.2l-34,34.3c-12.8,12.8-20.1,28.4-21.7,46.5 c-2.4,29.2,6.2,56.4,12.8,74.2c16.2,43.7,40.4,84.2,76.5,127.6c43.8,52.3,96.5,93.6,156.7,122.7c23,10.9,53.7,23.8,88,26 c2.1,0.1,4.3,0.2,6.3,0.2c23.1,0,42.5-8.3,57.7-24.8c0.1-0.2,0.3-0.3,0.4-0.5c5.2-6.3,11.2-12,17.5-18.1c4.3-4.1,8.7-8.4,13-12.9 c9.9-10.3,15.1-22.3,15.1-34.6c0-12.4-5.3-24.3-15.4-34.3L374.456,293.506z M410.256,398.806 C410.156,398.806,410.156,398.906,410.256,398.806c-3.9,4.2-7.9,8-12.2,12.2c-6.5,6.2-13.1,12.7-19.3,20 c-10.1,10.8-22,15.9-37.6,15.9c-1.5,0-3.1,0-4.6-0.1c-29.7-1.9-57.3-13.5-78-23.4c-56.6-27.4-106.3-66.3-147.6-115.6 c-34.1-41.1-56.9-79.1-72-119.9c-9.3-24.9-12.7-44.3-11.2-62.6c1-11.7,5.5-21.4,13.8-29.7l34.1-34.1c4.9-4.6,10.1-7.1,15.2-7.1 c6.3,0,11.4,3.8,14.6,7c0.1,0.1,0.2,0.2,0.3,0.3c6.1,5.7,11.9,11.6,18,17.9c3.1,3.2,6.3,6.4,9.5,9.7l27.3,27.3 c10.6,10.6,10.6,20.4,0,31c-2.9,2.9-5.7,5.8-8.6,8.6c-8.4,8.6-16.4,16.6-25.1,24.4c-0.2,0.2-0.4,0.3-0.5,0.5 c-8.6,8.6-7,17-5.2,22.7c0.1,0.3,0.2,0.6,0.3,0.9c7.1,17.2,17.1,33.4,32.3,52.7l0.1,0.1c27.6,34,56.7,60.5,88.8,80.8 c4.1,2.6,8.3,4.7,12.3,6.7c3.6,1.8,7,3.5,9.9,5.3c0.4,0.2,0.8,0.5,1.2,0.7c3.4,1.7,6.6,2.5,9.9,2.5c8.3,0,13.5-5.2,15.2-6.9 l34.2-34.2c3.4-3.4,8.8-7.5,15.1-7.5c6.2,0,11.3,3.9,14.4,7.3c0.1,0.1,0.1,0.1,0.2,0.2l55.1,55.1 C420.456,377.706,420.456,388.206,410.256,398.806z'/%3E%3Cpath d='M256.056,112.706c26.2,4.4,50,16.8,69,35.8s31.3,42.8,35.8,69c1.1,6.6,6.8,11.2,13.3,11.2c0.8,0,1.5-0.1,2.3-0.2 c7.4-1.2,12.3-8.2,11.1-15.6c-5.4-31.7-20.4-60.6-43.3-83.5s-51.8-37.9-83.5-43.3c-7.4-1.2-14.3,3.7-15.6,11 S248.656,111.506,256.056,112.706z'/%3E%3Cpath d='M473.256,209.006c-8.9-52.2-33.5-99.7-71.3-137.5s-85.3-62.4-137.5-71.3c-7.3-1.3-14.2,3.7-15.5,11 c-1.2,7.4,3.7,14.3,11.1,15.6c46.6,7.9,89.1,30,122.9,63.7c33.8,33.8,55.8,76.3,63.7,122.9c1.1,6.6,6.8,11.2,13.3,11.2 c0.8,0,1.5-0.1,2.3-0.2C469.556,223.306,474.556,216.306,473.256,209.006z'/%3E%3C/g%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3C/svg%3E"); mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 473.806 473.806' %3E%3Cg%3E%3Cg%3E%3Cpath d='M374.456,293.506c-9.7-10.1-21.4-15.5-33.8-15.5c-12.3,0-24.1,5.3-34.2,15.4l-31.6,31.5c-2.6-1.4-5.2-2.7-7.7-4 c-3.6-1.8-7-3.5-9.9-5.3c-29.6-18.8-56.5-43.3-82.3-75c-12.5-15.8-20.9-29.1-27-42.6c8.2-7.5,15.8-15.3,23.2-22.8 c2.8-2.8,5.6-5.7,8.4-8.5c21-21,21-48.2,0-69.2l-27.3-27.3c-3.1-3.1-6.3-6.3-9.3-9.5c-6-6.2-12.3-12.6-18.8-18.6 c-9.7-9.6-21.3-14.7-33.5-14.7s-24,5.1-34,14.7c-0.1,0.1-0.1,0.1-0.2,0.2l-34,34.3c-12.8,12.8-20.1,28.4-21.7,46.5 c-2.4,29.2,6.2,56.4,12.8,74.2c16.2,43.7,40.4,84.2,76.5,127.6c43.8,52.3,96.5,93.6,156.7,122.7c23,10.9,53.7,23.8,88,26 c2.1,0.1,4.3,0.2,6.3,0.2c23.1,0,42.5-8.3,57.7-24.8c0.1-0.2,0.3-0.3,0.4-0.5c5.2-6.3,11.2-12,17.5-18.1c4.3-4.1,8.7-8.4,13-12.9 c9.9-10.3,15.1-22.3,15.1-34.6c0-12.4-5.3-24.3-15.4-34.3L374.456,293.506z M410.256,398.806 C410.156,398.806,410.156,398.906,410.256,398.806c-3.9,4.2-7.9,8-12.2,12.2c-6.5,6.2-13.1,12.7-19.3,20 c-10.1,10.8-22,15.9-37.6,15.9c-1.5,0-3.1,0-4.6-0.1c-29.7-1.9-57.3-13.5-78-23.4c-56.6-27.4-106.3-66.3-147.6-115.6 c-34.1-41.1-56.9-79.1-72-119.9c-9.3-24.9-12.7-44.3-11.2-62.6c1-11.7,5.5-21.4,13.8-29.7l34.1-34.1c4.9-4.6,10.1-7.1,15.2-7.1 c6.3,0,11.4,3.8,14.6,7c0.1,0.1,0.2,0.2,0.3,0.3c6.1,5.7,11.9,11.6,18,17.9c3.1,3.2,6.3,6.4,9.5,9.7l27.3,27.3 c10.6,10.6,10.6,20.4,0,31c-2.9,2.9-5.7,5.8-8.6,8.6c-8.4,8.6-16.4,16.6-25.1,24.4c-0.2,0.2-0.4,0.3-0.5,0.5 c-8.6,8.6-7,17-5.2,22.7c0.1,0.3,0.2,0.6,0.3,0.9c7.1,17.2,17.1,33.4,32.3,52.7l0.1,0.1c27.6,34,56.7,60.5,88.8,80.8 c4.1,2.6,8.3,4.7,12.3,6.7c3.6,1.8,7,3.5,9.9,5.3c0.4,0.2,0.8,0.5,1.2,0.7c3.4,1.7,6.6,2.5,9.9,2.5c8.3,0,13.5-5.2,15.2-6.9 l34.2-34.2c3.4-3.4,8.8-7.5,15.1-7.5c6.2,0,11.3,3.9,14.4,7.3c0.1,0.1,0.1,0.1,0.2,0.2l55.1,55.1 C420.456,377.706,420.456,388.206,410.256,398.806z'/%3E%3Cpath d='M256.056,112.706c26.2,4.4,50,16.8,69,35.8s31.3,42.8,35.8,69c1.1,6.6,6.8,11.2,13.3,11.2c0.8,0,1.5-0.1,2.3-0.2 c7.4-1.2,12.3-8.2,11.1-15.6c-5.4-31.7-20.4-60.6-43.3-83.5s-51.8-37.9-83.5-43.3c-7.4-1.2-14.3,3.7-15.6,11 S248.656,111.506,256.056,112.706z'/%3E%3Cpath d='M473.256,209.006c-8.9-52.2-33.5-99.7-71.3-137.5s-85.3-62.4-137.5-71.3c-7.3-1.3-14.2,3.7-15.5,11 c-1.2,7.4,3.7,14.3,11.1,15.6c46.6,7.9,89.1,30,122.9,63.7c33.8,33.8,55.8,76.3,63.7,122.9c1.1,6.6,6.8,11.2,13.3,11.2 c0.8,0,1.5-0.1,2.3-0.2C469.556,223.306,474.556,216.306,473.256,209.006z'/%3E%3C/g%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3C/svg%3E"); mask-size: contain; -webkit-mask-size: contain; mask-repeat: no-repeat; -webkit-mask-repeat: no-repeat; background-color: var(--color); } @keyframes gradient { 0% { background-position: 0 0; } 100% { background-position: -200% 0; } } @keyframes fadeInDown { 0% { opacity: 0; transform: translateY(-100%); } 100% { opacity: 1; transform: translateY(0); } } @keyframes transLeftRight { 0% { transform: translateX(0) rotate(-45deg); opacity: 1; } 100% { transform: translateX(1rem) rotate(-45deg); opacity: 0; } } @keyframes storm { 0% { transform: translate3d(0, 0, 0) translateZ(0); } 25% { transform: translate3d(4px, 0, 0) translateZ(0); } 50% { transform: translate3d(-3px, 0, 0) translateZ(0); } 75% { transform: translate3d(2px, 0, 0) translateZ(0); } 100% { transform: translate3d(0, 0, 0) translateZ(0); } } @keyframes callAction { 0% { transform: scale(1); } 25% { box-shadow: 0 0 0 4px rgba(240, 95, 38, 0.4), 0 0 0 8px rgba(240, 95, 38, 0.2); } 25% { box-shadow: 0 0 0 4px rgba(240, 95, 38, 0.4), 0 0 0 8px rgba(240, 95, 38, 0.2); } 25% { box-shadow: 0 0 0 6px rgba(240, 95, 38, 0.4), 0 0 0 12px rgba(240, 95, 38, 0.2); } } @keyframes headShake { 0% { transform: translateX(0); } 12.5% { transform: translateX(-6px) rotateY(-9deg) skewY(1deg); } 37.5% { transform: translateX(5px) rotateY(4.5deg) skewY(-1deg); } 62.5% { transform: translateX(-3px) rotateY(-2.25deg) skewY(0); } 87.5% { transform: translateX(2px) rotateY(3deg); } 100% { transform: translateX(0); } } @keyframes rubberBand { from { transform: scale3d(1, 1, 1); } 30% { transform: scale3d(1.25, 0.75, 1); } 40% { transform: scale3d(0.75, 1.25, 1); } 50% { transform: scale3d(1.15, 0.85, 1); } 65% { transform: scale3d(0.95, 1.05, 1); } 75% { transform: scale3d(1.05, 0.95, 1); } to { transform: scale3d(1, 1, 1); } } .headShake { animation-duration: 0.5s; animation-timing-function: cubic-bezier(0, 0.23, 1, 0.71); animation-name: rubberBand; } .owl-carousel .owl-nav button[class^=owl-] { visibility: visible; opacity: 1; } .owl-carousel .owl-stage { padding: 2rem 0; } .owl-carousel .owl-nav { opacity: 0; visibility: hidden; transition: 0.3s ease-in-out; } .owl-carousel .owl-nav .owl-prev, .owl-carousel .owl-nav .owl-next { position: absolute; z-index: 1; top: 50%; left: -1rem; transform: translateY(-50%); width: 3.5rem; height: 4rem; box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.1); opacity: 0; visibility: hidden; overflow: hidden; border-radius: 0 3px 3px 0; transition: 0.2s ease-in; } .owl-carousel .owl-nav .owl-prev > *, .owl-carousel .owl-nav .owl-next > * { display: none; } .owl-carousel .owl-nav .owl-prev::after, .owl-carousel .owl-nav .owl-next::after { content: ""; position: absolute; top: 50%; left: calc(50% + 2px); display: inline-block; border: solid #fff; border-width: 0 2px 2px 0; padding: 4px; transform: rotate(135deg); transform: translate(-50%, -50%) rotate(135deg); } .owl-carousel .owl-nav .owl-prev::before, .owl-carousel .owl-nav .owl-next::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; background-color: var(--color-main-1); opacity: 0.7; transition: inherit; } .owl-carousel .owl-nav .owl-prev:hover::before, .owl-carousel .owl-nav .owl-next:hover::before { opacity: 1; } .owl-carousel .owl-nav .owl-next { left: calc(100% + 1rem); transform: translate(-100%, -50%); border-radius: 3px 0 0 3px; } .owl-carousel .owl-nav .owl-next::after { display: inline-block; border: solid #fff; border-width: 0 2px 2px 0; padding: 4px; transform: rotate(-45deg); left: calc(50% - 2px); transform: translate(-50%, -50%) rotate(-45deg); } #carousel-posts:hover .owl-nav, [id^=product-category]:hover .owl-nav { visibility: visible; opacity: 1; } @media only screen and (max-width: calc(767px)) { .owl-carousel .owl-nav button[class^=owl-] { visibility: visible; opacity: 1; } .owl-carousel .owl-nav button[class^=owl-].owl-prev { left: 0; } .owl-carousel .owl-nav button[class^=owl-].owl-next { left: 100%; } } @media only screen and (max-width: calc(991px)) { .owl-carousel .owl-nav button[class^=owl-].owl-prev { left: 0; } .owl-carousel .owl-nav button[class^=owl-].owl-next { left: 100%; } } body.modal-open { overflow: unset !important; padding-right: 0 !important; } body.modal-open #modal_dk_dn { padding-right: 0 !important; } #modal_dk_dn .modal-title { font-weight: 700; font-size: var(--font-md); text-transform: capitalize; } #modal_dk_dn button.close { display: inline-block; outline: none; border: none; font-size: var(--font-lg); font-weight: 700; color: #000000; opacity: 0.7; background-color: transparent; transition: 0.3s ease-in-out; } #modal_dk_dn button.close:hover { opacity: 1; } #modal_dk_dn .modal-body { min-height: 100%; padding: var(--space-sm) var(--space-sm) var(--space-lg) var(--space-sm); } #modal_dk_dn .modal-body .nav .nav-item { margin-bottom: var(--space-xs); } #modal_dk_dn .modal-body .nav .nav-item .nav-link { min-width: 10rem; text-align: center; font-weight: 500; font-size: var(--font-md); padding: var(--space-xs) var(--space-sm); color: var(--text-color); background-color: #FFFFFF; } #modal_dk_dn .modal-body .nav .nav-item .nav-link.active { background-color: var(--color-main-2); color: #FFFFFF; } #modal_dk_dn .modal-body .modal-body__main .filed-input { position: relative; z-index: 1; margin-bottom: var(--space-sm); } #modal_dk_dn .modal-body .modal-body__main .filed-input label, #modal_dk_dn .modal-body .modal-body__main .filed-input input { font-size: var(--font-normal); font-weight: 400; color: var(--text-color); } #modal_dk_dn .modal-body .modal-body__main .filed-input label { font-weight: 700; display: block; margin-bottom: var(--space-xs); } #modal_dk_dn .modal-body .modal-body__main .filed-input input { width: 100%; height: 4rem; line-height: 4rem; font-weight: 400; padding: 0 var(--space-md) 0 var(--space-default); color: #495057; transition: 0.3s ease-in-out; border-radius: 3px; background-color: #F5F5F5; border: 1px solid #EAEAEA; } #modal_dk_dn .modal-body .modal-body__main .filed-input input:focus { border-color: var(--color-main-2); } #modal_dk_dn .modal-body .modal-body__main .filed-input input.not-valid { border-color: var(--red); } #modal_dk_dn .modal-body .modal-body__main .filed-input input.not-valid + .mess-error { visibility: visible; opacity: 1; } #modal_dk_dn .modal-body .modal-body__main .filed-input .mess-error { font-size: var(--font-sm); font-weight: 500; color: var(--red); opacity: 0; visibility: hidden; transition: 0.3s ease-in-out; } #page-customer #frmdoimatkhau .form-control, #page-customer #frmcapnhattaikhoan .form-control { padding: var(--space-md) 0 var(--space-sm) var(--space-default); height: calc(3rem + var(--space-md) + var(--space-sm)); line-height: 3rem; font-size: var(--font-normal); } #modal_dk_dn.modal-mobile .modal-dialog { display: block; margin: 0; padding: 0; width: 100%; min-height: 100%; background-color: #fff; } #modal_dk_dn.modal-mobile .modal-dialog .modal-content { border-bottom: none; } #modal_dk_dn.modal-mobile .modal-dialog .modal-content .modal-body .tab-content { min-height: 100%; } body.overflow { overflow: hidden !important; } body.overflow .overlay { display: block; } body.search #header .header-top { opacity: 1; visibility: visible; max-height: 100px; } header.header-sticky { position: sticky !important; top: 0; z-index: 9999; box-shadow: 0px 6px 12px -6px rgba(24, 39, 75, 0.12), 0px 8px 24px -4px rgba(24, 39, 75, 0.08); } #header { position: relative; } #header.scroll { position: sticky; top: 0; z-index: 999; } /*#header.scroll .header-bottom { opacity: 0; visibility: hidden; }*/ #header.fadeInDown { animation: fadeInDown 0.5s ease-in-out both; } #header.opened .header-side { opacity: 1; transform: translateX(0); } #header.opened .tool-menu > i::before { content: "\f00d"; } #header.opened + .overlay { display: block; } .overlay { width: 100%; height: 100vh; position: fixed; top: 0; left: 0; background: rgba(0, 0, 0, 0.5); display: none; } #header .header-main { background-color: var(--bs-white); } #header .header-main .header-wrap { height: 70px; display: flex; position: relative; } #header .header-main .header-logo { flex: 0 0 auto; min-width: 220px; background-color: #fff; display: flex; justify-content: center; align-items: center; } #header .header-main .header-search { /* flex: 1 0 auto;*/ margin: 0 25px; display: flex; height: 100%; align-items: center; font-weight: 700; font-size: 14px; color: #fff; } #header .header-main .header-search .tenshop { flex-shrink: 0; margin-right: 25px; max-width: 130px; } #header .header-main .header-search .tenshop > a { color: #fff; } #header .header-main .header-search .search-wrap { flex-shrink: 1; height: 100%; width: 100%; display: flex; justify-content: center; align-items: center; position: relative; max-width: 630px; } #header .header-main .header-search .search-group { position: relative; background-color: transparent; border-radius: 25px; border: 1px solid #dee2e6; width: 430px; } #header .header-main .header-search .search-group > input { display: inline-block; height: 45px; width: 100%; font-size: 14px; line-height: 20px; color: #333; padding: 10px 50px 10px 20px; outline: none; border-radius: 25px; border: 1px solid transparent; text-overflow: ellipsis; position: relative; } #header .header-main .header-search .search-group > button { display: inline-flex; justify-content: center; align-items: center; width: 70px; font-size: 14px; line-height: 1; color: #fff; position: absolute; right: 4px; top: 4px; bottom: 4px; z-index: 2; border-radius: 25px; background-color: var(--secondary-color); transition: background-color 0.2s ease; } #header .header-main .header-search .search-group > button:hover { background-color: var(--sc-accent-color-2); } #header .header-main .header-search .search-group > .search-list { position: absolute; top: calc(100% + 15px); left: 0; width: 100%; border-radius: 4px; background-color: #fff; display: flex; flex-direction: column; z-index: 3; max-height: 250px; overflow-x: hidden; overflow-y: auto; box-shadow: 0 4px 16px 0 rgba(215, 215, 215, 0.5); scroll-snap-type: y mandatory; scroll-snap-stop: always; -ms-touch-action: manipulation; touch-action: manipulation; -webkit-overflow-scrolling: touch; scroll-padding: 1rem; -ms-overflow-style: none; scrollbar-width: none; } #header .header-main .header-search .search-group > .search-list::-webkit-scrollbar { width: 5px; background-color: #888888; } #header .header-main .header-search .search-group > .search-list::-webkit-scrollbar-thumb { background-color: #888888; border-radius: 99px; } #header .header-main .header-search .search-group > .search-list > li { display: block; width: 100%; color: var(--text-color); scroll-snap-align: start; } #header .header-main .header-search .search-group > .search-list > li.not-found { height: 45px; padding: 0 20px; line-height: 45px; } #header .header-top ul.search-list { background-color: #fff; display: flex; flex-direction: column; max-height: 300px; overflow-x: hidden; overflow-y: auto; box-shadow: 0 4px 16px 0 rgba(215, 215, 215, 0.5); border-radius: 5px; } #header .header-top ul.search-list .search-item.not-found { padding: 20px 10px; } #header .header-top ul.search-list li:not(:last-child), #header .header-main .header-search .search-group > .search-list > li:not(:last-child) { border-bottom: 1px dashed #e5e5e5; } #header .header-top ul.search-list li > a, #header .header-main .header-search .search-group > .search-list > li > a { display: grid; grid-template-columns: 75px 1fr; grid-gap: 10px; padding: 10px; } #header .header-top ul.search-list li > a:hover > .item-info > .item-name, #header .header-main .header-search .search-group > .search-list > li > a:hover > .item-info > .item-name { color: var(--primary-color); } #header .header-top ul.search-list li > a > .item-info, #header .header-main .header-search .search-group > .search-list > li > a > .item-info { display: inline-flex; flex-direction: column; } #header .header-top ul.search-list li > a > .item-info > .item-name, #header .header-main .header-search .search-group > .search-list > li > a > .item-info > .item-name { color: var(--text-color); font-weight: 700; transition: all 0.35s ease-in; } #header .header-top ul.search-list li > a > .item-info > .item-price, #header .header-main .header-search .search-group > .search-list > li > a > .item-info > .item-price { display: inline-block; width: 100%; font-weight: 500; color: var(--text-color); } #header .header-top ul.search-list li > a > .item-info > .item-price > span, #header .header-main .header-search .search-group > .search-list > li > a > .item-info > .item-price > span { color: var(--sc-main-color); font-weight: 700; } #header .header-main .header-tools { flex: 0 1 auto; } #header .header-main .header-tools .tools-wrap { display: flex; height: 100%; padding: 8px 0; } #header .header-main .header-tools .tools-wrap .tool-item { height: 100%; position: relative; } #header .header-main .header-tools .tools-wrap .tool-item .tool-dashboard { position: absolute; top: calc(100% + 10px); left: -30px; width: 100%; min-width: 150px; padding: 5px; border-radius: 5px; background-color: #fff; box-shadow: 0 2px 6px 0 rgba(50, 50, 50, 0.33); opacity: 0; visibility: hidden; max-height: 0; transition: all 0.3s ease-out; display: flex; flex-direction: column; } #header .header-main .header-tools .tools-wrap .tool-item .tool-dashboard::before { content: ""; display: block; position: absolute; top: -10px; height: 10px; left: 0; width: 100%; background-color: transparent; z-index: -1; } #header .header-main .header-tools .tools-wrap .tool-item .tool-dashboard li + li { border-top: 1px solid #e5e5e5; } #header .header-main .header-tools .tools-wrap .tool-item .tool-dashboard > li { display: block; } #header .header-main .header-tools .tools-wrap .tool-item .tool-dashboard > li > a { display: block; padding: 5px; color: var(--text-color); transition: inherit; } #header .header-main .header-tools .tools-wrap .tool-item .tool-dashboard > li > a:hover { color: var(--sc-main-color); } #header .header-main .header-tools .tools-wrap .tool-item:hover > .tool-dashboard { opacity: 1; visibility: visible; max-height: 300px; } #header .header-main .header-tools .tools-wrap .tool-item .tool-hotline { display: flex; flex-direction: column; justify-content: center; color: #fff; line-height: 1; height: 40px; } #header .header-main .header-tools .tools-wrap .tool-item .tool-hotline .hotline-phone { font-size: 18px; font-weight: 700; margin-bottom: 5px; } #header .header-main .header-tools .tools-wrap .tool-item .tool-hotline .hotline-caption { font-size: 12px; font-weight: 400; color: #fff !important; } #header .header-main .header-tools .tools-wrap .tool-item .tool-hotline:hover .hotline-phone { color: var(--sc-accent-color); } #header .header-main .header-tools .tools-wrap .tool-item .tool-menu, #header .header-main .header-tools .tools-wrap .tool-item .tool-search, #header .header-main .header-tools .tools-wrap .tool-item .tool-login, #header .header-main .header-tools .tools-wrap .tool-item .tool-cart { display: inline-flex; justify-content: center; align-items: center; padding: 10px; height: 40px; color: #fff; font-size: 24px; background-color: transparent; } #header .header-main .header-tools .tools-wrap .tool-item .tool-menu:hover, #header .header-main .header-tools .tools-wrap .tool-item .tool-search:hover, #header .header-main .header-tools .tools-wrap .tool-item .tool-login:hover, #header .header-main .header-tools .tools-wrap .tool-item .tool-cart:hover { color: #fff; } #header .header-main .header-tools .tools-wrap .tool-item .tool-search:hover { color: var(--text-color); } #header .header-main .header-tools .tools-wrap .tool-item .tool-cart { position: relative; } #header .header-main .header-tools .tools-wrap .tool-item .tool-cart::before { content: attr(data-count); display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 50px; font-size: 12px; font-weight: 400; line-height: 1; color: #fff; background-color: var(--sc-accent-color-2); position: absolute; top: 0; right: -5px; } .header-contact { display: flex; align-items: center; } .header-contact__icon { flex-shrink: 0; width: 40px; height: 40px; font-size: 16px; display: flex; align-items: center; justify-content: center; color: var(--primary-color); border-radius: 50%; } .header-contact__content { display: flex; flex-direction: column; } .header-contact__title { font-weight: 500; color: #494949; font-size: 1em; margin-bottom: -4px; } .header-contact__text { font-weight: 700; color: #2c2a2a; transition: all 0.35s ease-in; font-size: 1em; } .header-contact__text:hover { color: var(--secondary-color); } .tool-item__hotline { white-space: nowrap; } #header .header-bottom { box-shadow: 0px 6px 12px -6px rgba(24, 39, 75, 0.12), 0px 8px 24px -4px rgba(24, 39, 75, 0.08); background-color: var(--primary-color); } #header .header-bottom .header-nav { display: block; height: 45px; } #header .header-bottom ul.header-list { display: flex; justify-content: space-between; height: 100%; margin: 0; padding: 0; } #header .header-bottom ul.header-list > li { display: block; height: 100%; position: relative; } #header .header-bottom ul.header-list > li > ul { position: absolute; background-color: white; border-radius: 3px; left: 0; top: 100%; width: 220px; transition: all 0.35s ease-in; box-shadow: 0px 6px 12px -6px rgba(24, 39, 75, 0.12), 0px 8px 24px -4px rgba(24, 39, 75, 0.08); opacity: 0; visibility: hidden; pointer-events: none; } #header .header-bottom ul.header-list > li:hover > ul { opacity: 1; visibility: visible; pointer-events: auto; } #header .header-bottom ul.header-list > li > ul > li { position: relative; } #header .header-bottom ul.header-list > li > ul > li:not(:last-child) { border-bottom: 1px solid #eee; } #header .header-bottom ul.header-list > li > ul > li > .item-wrap > a { display: flex; align-items: center; justify-content: space-between; gap: 5px; color: var(--text-color); font-weight: 600; transition: all 0.35s ease-in; padding: 8px 12px; } #header .header-bottom ul.header-list > li > ul > li > .item-wrap > a:hover { color: var(--secondary-color); } #header .header-bottom ul.header-list > li > span, #header .header-bottom ul.header-list > li > a { display: inline-flex; justify-content: flex-start; align-items: center; height: 100%; padding: 0 15px; line-height: 2; font-size: 14px; color: var(--bs-white); transition: color 0.2s ease; cursor: pointer; font-weight: 700; } #header .header-bottom ul.header-list > li > span:hover, #header .header-bottom ul.header-list > li > a:hover { background: var(--primary-hover); } #header .header-bottom ul.header-list > li:first-child > span:hover { color: white; } #header .header-bottom ul.header-list > li > span .item-media, #header .header-bottom ul.header-list > li > a .item-media { display: inline-flex; justify-content: center; align-items: center; width: 24px; height: 24px; margin-right: 5px; } #header .header-bottom ul.header-list > li:not(:first-child) > a { padding: 0 35px; } #header .header-bottom ul.header-list > li > span { width: 220px; font-weight: 700; text-transform: uppercase; color: var(--bs-white); box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.2); white-space: nowrap; } #header .header-bottom ul.header-list > li > span > span { margin: 0 5px 0 10px; } #header .header-bottom ul.header-list > li > span:not(:first-child):hover { color: var(--bs-white) !important; } #header .header-bottom .header-nav .header-list .mega-menu .categories.hidden { opacity: 0; visibility: hidden; } #header .header-bottom .header-nav .header-list .mega-menu:hover .categories.hidden { opacity: 1; visibility: visible; } #header .header-top { background-color: var(--primary-color); opacity: 0; height: 100%; visibility: hidden; max-height: 0; transition: all 0.3s; } #header .header-top .header-top-main { height: 60px; padding: 10px 0; display: flex; justify-content: center; align-items: center; position: relative; } #header .header-top .search-top { height: 40px; flex: 1 0 auto; position: relative; width: 100%; } #header .header-top .search-top > input { display: block; position: relative; width: 100%; height: 100%; outline: none; border: none; color: #999; border-radius: 20px; font-size: 0.95em; font-weight: 500; padding: 3px 65px 3px 18px; } #header .header-top .header-top-main .btn-search { display: flex; width: 60px; justify-content: center; align-items: center; font-size: 14px; color: var(--bs-white); background-color: var(--secondary-color); position: absolute; top: 3px; right: 3px; border-radius: 20px; transition: background-color 0.2s ease; bottom: 3px; } #header .header-top .header-top-main .btn-search { opacity: 0.8; } #header .header-top .header-top-main button.search-close { height: 40px; top: 50%; transform: translateY(-50%); } #header .header-top .header-top-main ul { z-index: 12; position: absolute; left: 0; width: 100%; top: 100%; transform: translateY(3px); } #header .header-side { width: 280px; position: fixed; top: 0; left: 0; bottom: 0; height: 100vh; background-color: #fff; transform: translateX(-100%); opacity: 0; transition: opacity 0.2s ease, transform 0.2s ease; z-index: 2; } #header .header-side > .header-side-wrap { padding-top: 65px; display: flex; flex-direction: column; height: 100%; max-height: 95%; overflow-y: scroll; overflow-x: hidden; /* scroll-snap-type: y mandatory;*/ scroll-padding: 1rem; } #header .header-side > .header-side-wrap::-webkit-scrollbar { width: 12px; } #header .header-side > .header-side-wrap::-webkit-scrollbar-thumb { border-radius: 10px; background-color: #c5c5c5; } #header .header-side > .header-side-wrap > * { scroll-snap-stop: always; scroll-snap-align: center; } #header .header-side .header-tools > .tool-item { background-color: var(--sc-main-color); display: block; text-align: center; font-size: 14px; font-weight: 500; color: #fff; padding: 10px 0; box-shadow: inset 0 0 0 1px #fff; } #header .header-side .header-menu, #header .header-side .header-menu .submenu { display: flex; flex-direction: column; margin: 0; padding: 0; } #header .header-side .header-menu .submenu { visibility: hidden; opacity: 0; overflow: hidden; height: auto; max-height: 0; transition: max-height 0.2s ease-out; } #header .header-side .header-menu .item.toggle > .submenu { visibility: visible; opacity: 1; max-height: 100vh; } #header .header-side .header-menu .item.toggle > .item-wrap .item-link { color: var(--sc-main-color); } #header .header-side .header-menu .item.toggle > .item-wrap .item-link > .arrow > i::before { content: "\f106"; } #header .header-side .header-menu .item { scroll-snap-align: start; display: block; position: relative; z-index: 1; } #header .header-side .header-menu > .item > .item-wrap { background-size: 2rem 2rem; background-position: 6px center; background-repeat: no-repeat; } #header .header-side .header-menu > .item:not(:last-child) > .item-wrap { border-bottom: 1px solid #eee; } #header .header-side .header-menu .item-wrap { position: relative; display: block; } #header .header-side .header-menu .item-wrap .item-wrap { padding: 8px 20px 8px 20px; } #header .header-side .header-menu .item-wrap, #header .header-side .header-menu .item-wrap .item-wrap .item-wrap { padding: 10px 20px 10px 20px; } #header .header-side .header-menu .item-link { display: inline-flex; justify-content: space-between; width: 100%; font-weight: 600; color: var(--text-color); text-transform: capitalize; } #header .header-side .header-menu .item-link .text { display: inline-block; width: 100%; } #header .header-side .header-menu .item-link .arrow { display: inline-flex; justify-content: center; align-items: center; width: 30px; position: absolute; top: 0; right: 0; bottom: 0; z-index: 99; } #header .header-side .header-menu .item-link:hover { color: var(--sc-main-color); } #header .header-side .header-promo { position: relative; padding: 0; margin: 0; display: flex; flex-direction: column; } #header .header-side .header-promo > li { padding-left: 5px; } #header .header-side .header-promo > li > a { display: inline-flex; width: 100%; align-items: center; height: 45px; color: var(--text-color); font-weight: 500; transition: color 0.2s ease; } #header .header-side .header-promo > li > a:hover { color: var(--sc-main-color); } #header .header-side .header-promo > li > a img { display: block; max-height: 24px; height: 24px; margin-right: 5px; } #header .header-side .header-dashboard { position: relative; } #header .header-side .header-dashboard > div { background-color: var(--sc-main-color); display: flex; align-items: center; justify-content: center; text-align: center; font-size: 14px; font-weight: 500; color: #fff; padding: 10px 0; box-shadow: inset 0 0 0 1px #fff; cursor: pointer; } #header .header-side .header-dashboard > div > i.fa-user { margin-top: -3px; } #header .header-side .header-dashboard > div > i { font-size: 14px; } #header .header-side .header-dashboard > div > span { display: inline-block; margin: 0 5px 0 10px; } #header .header-side .header-dashboard.toggle > ul { max-height: 300px; } #header .header-side .header-dashboard > ul { display: flex; flex-direction: column; margin: 0; padding: 0; height: auto; max-height: 0; overflow: hidden; transition: max-height 0.3s ease; } #header .header-side .header-dashboard > ul > li { display: block; } #header .header-side .header-dashboard > ul > li > a { padding: 8px 20px 8px 30px; display: inline-flex; width: 100%; font-weight: 400; color: var(--text-color); text-transform: capitalize; position: relative; border-bottom: 1px solid #eee; } #header .header-side .header-dashboard > ul > li > a > .icon { display: inline-flex; justify-content: center; align-items: center; width: 30px; height: 100%; position: absolute; top: 0; left: 0; font-size: 1.25em; } #header .header-tenshop { background-color: #2f8511; padding: 3px 0; position: relative; z-index: 99; } #header .header-tenshop .tenshop > a { font-size: 12px; font-weight: 700; color: #fff; line-height: 24px; } .mr-40 { margin-right: 40px; } .mr-30 { margin-right: 30px; } .ml-30 { margin-left: 30px; } @media only screen and (max-width: 991px) { #header .header-main { position: relative; z-index: 10; } #header .header-main .header-search { display: none; } #header .header-main .header-wrap { flex-direction: row-reverse; height: 60px; position: relative; } #header .header-main .header-tools .tools-wrap { padding: 8px 0; } #header .header-main .header-logo { height: 60px; min-width: 70px; top: 0; position: absolute; left: 50%; transform: translateX(-50%); border-radius: 0 0 4px 4px; } /* #header .header-main .header-logo > img { width: 50px; max-width: 100px; } */ #header .header-bottom { display: none; } #header .header-main .header-tools .tools-wrap .tool-item { margin: 0 0; } #header .header-main .header-tools .tools-wrap .tool-item .tool-menu, #header .header-main .header-tools .tools-wrap .tool-item .tool-search, #header .header-main .header-tools .tools-wrap .tool-item .tool-cart { font-size: 16px; color: var(--text-color); } #header .header-main .header-tools .tools-wrap .tool-item:last-child { position: absolute; top: 0; left: 0; display: inline-flex; justify-content: center; align-items: center; } #header .header-main .header-tools .tools-wrap .tool-item .tool-menu { background-color: var(--primary-color); color: var(--bs-white); border-radius: 3px; width: 40px; height: 40px; } #header .header-side > .header-side-wrap { max-height: 100% !important; } #header .header-side > .header-side-wrap .header-menu { padding-bottom: 80px !important; scroll-snap-stop: unset; scroll-snap-align: unset; } } .tool-preview { display: inline-flex; align-items: center; font-size: 13px; line-height: 20px; height: 40px; color: #fff; padding: 10px 30px 10px 10px; background-color: var(--sc-accent-color); border-radius: 4px; position: relative; } .tool-preview span { margin-right: 5px; } .mr-25 { margin-right: 25px; } @media only screen and (max-width: 767px) { #header .header-main .header-tools .tools-wrap .tool-item .tool-cart::before { width: 16px; height: 16px; top: 4px; right: -1px; font-size: 10px; } } #footer ul li { display: block; width: 100%; position: relative; } #footer ul li a { display: block; font-weight: 400; font-size: var(--font-normal); color: #444444; line-height: 1.5; margin-bottom: var(--space-sm); } #footer ul li a:hover { color: var(--secondary-color); } #footer .footer-header { font-size: var(--font-md); font-weight: 700; text-transform: capitalize; margin-bottom: var(--space-sm); } #footer .footer-header .icon-size { --size: 2rem; --color: var(--secondary-color); } #footer .footer-wrapper { width: 100%; margin-left: auto; margin-right: auto; padding: var(--space-sm) var(--space-xs) 0; margin-bottom: var(--space-default); } #footer .footer-wrapper .footer-showroom { padding: 0; } #footer .footer-wrapper .footer-showroom > li > a { display: flex; flex-flow: row nowrap; justify-content: flex-start; align-items: center; gap: 3px; } #footer .footer-wrapper .footer-showroom > li > a > span { display: block !important; } #footer .footer-wrapper .footer-showroom > li > a > span.float-start { --size: 1.5rem; --color: var(--secondary-color); margin-right: 0.5rem; } #footer .footer-wrapper .footer-showroom > li > a > span.float-end { width: calc(100% - 2rem); } #footer .footer-wrapper .footer-showroom > li.map > a { color: var(--secondary-color); font-weight: 500; } #footer .footer-wrapper .list-social a { display: flex; flex-flow: row nowrap; justify-content: center; align-items: center; overflow: hidden; } #footer .footer-wrapper .list-social a:not(:last-of-type) { margin-right: var(--space-xs); } #footer .footer-wrapper .list-email li { margin-bottom: var(--space-xs); } #footer .footer-wrapper .list-email li p { margin-bottom: 0; } #footer .footer-wrapper .list-email li a { color: var(--color-main-2); margin-bottom: 0; } .footer-bottom { padding: 30px 0; } #footer #footer-copyright { padding: 10px 0; z-index: 1; position: relative; border-top: 1px solid rgba(0, 0, 0, 0.15); } #footer #footer-copyright p, #footer #footer-copyright a { font-weight: 400; color: var(--text-dark) !important; text-decoration: none !important; text-transform: capitalize; font-size: var(--font-normal); } #footer .footer-payment > .footer-payment-wrapper { display: flex; flex-flow: row nowrap; justify-content: flex-start; align-items: stretch; } #footer .footer-payment > .footer-payment-wrapper a { display: flex; flex-flow: column nowrap; justify-content: center; align-items: center; } #footer .footer-payment > .footer-payment-wrapper a:not(:last-of-type) { margin-right: var(--space-sm); } #footer .footer-payment > .footer-payment-wrapper a > span:first-child { display: flex; flex-flow: row nowrap; justify-content: center; align-items: center; min-height: 3.5rem; margin-bottom: var(--space-xs); } #footer .footer-payment > .footer-payment-wrapper a > span:last-child { display: inline-block; font-size: var(--font-normal); color: #444; text-align: center; } @media only screen and (max-width: calc(767px)) { #footer { padding-bottom: 70px; } } #module-banner { position: relative; z-index: 1; } #module-banner .main-banner { position: relative; z-index: 2; } #module-banner .categories { position: relative; z-index: 3; } #module-banner #carousel-banner .owl-stage { padding: 0; } #module-banner .module-banner-wrapper { overflow: hidden; } #module-banner .module-banner-wrapper .main-banner { display: flex; flex-flow: row nowrap; justify-content: flex-start; align-items: stretch; flex-flow: column nowrap; } #module-banner .module-banner-wrapper .main-banner .banner-main-right { display: flex; flex-flow: row nowrap; justify-content: space-between; align-items: stretch; height: 100%; overflow-x: auto; scroll-snap-type: x mandatory; margin: var(--space-xxs) 0; } #module-banner .module-banner-wrapper .main-banner .banner-main-right > .banner-item:not(:first-child) { margin-left: var(--space-sm); } #module-banner #footer-banner .footer-banner__wrapper { display: flex; flex-flow: row nowrap; justify-content: flex-start; align-items: stretch; overflow-x: auto; scroll-snap-type: x mandatory; } #module-banner #footer-banner .footer-banner__wrapper > .banner-item { flex-grow: 1; } #module-banner #footer-banner .footer-banner__wrapper > .banner-item:not(:first-child) { margin-left: var(--space-sm); } #module-banner .banner-item { scroll-snap-align: center; width: 100%; height: 100%; min-width: 24rem; } #module-banner .banner-item > a { display: block; width: 100%; height: 0; padding-top: 56.25%; position: relative; border-radius: 5px; overflow: hidden; background-position: center bottom; background-size: cover; background-repeat: no-repeat; } #module-banner .banner-item > a > img { display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 2; object-fit: unset; } #module-banner .banner-swiper .swiper-slide { max-width: 24rem; } #carousel-banner .owl-dots { display: flex; flex-flow: row nowrap; justify-content: flex-end; align-items: center; position: absolute; bottom: 1rem; left: 0; width: 100%; padding-right: 1rem; } #carousel-banner .owl-dots button span { width: 1rem; height: 1rem; background: #fff; border-radius: 50%; margin: 0 5px; display: block; transition: 0.2s all ease; } #carousel-banner .owl-dots button.active span { width: 3.5rem; border-radius: 999px; background: #FFFFFF; } .categories { min-height: 100%; } .categories .list-categories { display: block; padding: 0; list-style: none; position: relative; z-index: 3; width: 22rem; height: 100%; background-color: #FFFFFF; border-radius: 3px; box-shadow: 1px 1px 5px 1px rgba(0, 0, 0, 0.08); margin-bottom: 0; } .categories .list-categories > li:not(:last-child) { border-bottom: 1px dashed #f7f7f7; } .categories .list-categories > li > a { display: block; padding: var(--space-xxs) var(--space-md); width: 100%; height: calc(3rem + 2 * (var(--space-xxs))); line-height: 3rem; font-size: var(--font-normal); color: var(--text-dark); background-size: 2rem 2rem !important; background-position: var(--space-sm) center; background-repeat: no-repeat; transition: 0.15s linear; font-weight: 600; } .categories .list-categories > li.has-child > a { position: relative; z-index: 100; } .categories .list-categories > li.has-child > a::before { content: ""; display: block; position: absolute; top: 0; left: 100%; height: 0; width: 0; z-index: 100; border: solid transparent; border-width: 19px 0 19px 19px; border-left-color: var(--secondary-color); opacity: 0; visibility: hidden; transition: 0.15s linear; } .categories .list-categories > li:hover > a { background-color: var(--secondary-color); color: #FFFFFF; } .categories .list-categories > li:hover.has-child > a::before { visibility: visible; opacity: 1; } .categories .list-categories .has-child .mega-categories { position: absolute; z-index: 99; top: 0; left: 100%; width: 100%; padding: 1rem 1rem 1rem 3rem; background-color: #FFFFFF; min-height: 100%; box-shadow: 1px 1px 5px 1px rgba(0, 0, 0, 0.08); opacity: 0; visibility: hidden; transition: 0.15s linear; } .categories .list-categories .has-child:hover .mega-categories { visibility: visible; opacity: 1; } .categories .list-categories .has-child .mega-categories .sub-mega-categories { margin-bottom: var(--space-md); } .categories .list-categories .has-child .mega-categories .sub-mega-categories a { display: block; width: 100%; font-size: var(--font-normal); color: var(--text-color); text-transform: capitalize; font-weight: 400; text-align: start; } .categories .list-categories .has-child .mega-categories .sub-mega-categories a:hover { color: var(--color-main-2); } .categories .list-categories .has-child .mega-categories .sub-mega-categories > a { font-weight: 700; font-size: var(--font-md); color: var(--color-main-2); } .categories .list-categories .has-child:hover > .sub-list { opacity: 1; visibility: visible; } .categories .list-categories .has-child ul.sub-list { display: flex; flex-direction: column; min-width: 220px; padding-left: 20px; position: absolute; left: 100%; top: 0; background-color: #fff; opacity: 0; visibility: hidden; transition: all 0.3s ease; box-shadow: 1px 1px 5px 1px rgba(0, 0, 0, 0.08); } .page-home .categories .list-categories .has-child ul.sub-list{ height:100%; } .page-other .categories .list-categories .has-child ul.sub-list{ height: max-content; } .categories .list-categories .has-child ul.sub-list li { display: block; } .categories .list-categories .has-child ul.sub-list li > a { display: block; padding: var(--space-xxs) var(--space-xs); width: 100%; height: calc(3rem + 2 * (var(--space-xxs))); line-height: 3rem; font-size: var(--font-normal); color: var(--text-dark); text-transform: uppercase; transition: color 0.2s ease; background-color: #fff; } .categories .list-categories .has-child ul.sub-list li > a:hover { color: var(--primary-color); } .categories .list-categories > .has-child > ul.sub-list > .has-child > a { display: flex; justify-content: space-between; } .categories .list-categories > .has-child > ul.sub-list > .has-child > a .arrow { display: inline-flex; justify-content: center; align-items: center; font-size: 16px; width: 38px; height: 38px; color: currentColor; } @media only screen and (min-width: 992px) { #module-banner .module-banner-wrapper { display: flex; flex-flow: row nowrap; justify-content: flex-start; align-items: stretch; } /* #module-banner .module-banner-wrapper .main-banner { flex-flow: row nowrap; }*/ #module-banner .module-banner-wrapper .main-banner .main-carousel { width: calc(100% - 26rem); } #module-banner .module-banner-wrapper .main-banner .banner-main-right { margin-left: 0; } #module-banner .module-banner-wrapper .main-banner .banner-main-right { display: flex; flex-flow: column nowrap; justify-content: flex-start; align-items: stretch; margin: 0; } #module-banner .module-banner-wrapper .main-banner .banner-main-right > .banner-item { width: 25rem; margin: 5px; } #module-banner .module-banner-wrapper .main-banner .banner-main-right > .banner-item:not(:first-child) { margin-left: 5px; } #module-banner .module-banner-wrapper .main-banner .banner-main-right > .banner-item > a { height: 100%; } #module-banner #footer-banner .footer-banner__wrapper .banner-item { margin: 5px; } #module-banner #footer-banner .footer-banner__wrapper .banner-item:not(:first-child) { margin-left: 5px; } #carousel-banner .owl-stage-outer, #carousel-banner .owl-stage { height: 100%; } #carousel-banner .owl-stage { display: flex; align-items: stretch; } #carousel-banner .owl-item { min-height: 100%; max-height: 47rem; overflow: hidden; } #carousel-banner .owl-item .banner-item { display: block; width: 100%; height: 100%; } #carousel-banner .owl-item .banner-item > img { display: block; width: auto; height: 100%; } } .link-category__mobile { width: max-content; color: var(--bs-white) !important; padding: 0 10px; display: flex; align-items: center; gap: 5px; } .section-category__title { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; } #page-categories, [id^=module_products-] { --main-color: var(--color-main-3); --acctent-color: var(--color-accent-1); --text-color: var(--text-dark); --h: 5rem; } #page-categories .template-header__outline, [id^=module_products-] .template-header__outline { display: flex; flex-flow: row nowrap; justify-content: flex-start; align-items: stretch; width: 100%; margin-bottom: var(--space-md); box-shadow: inset 0 -4px 0 var(--primary-color); } #page-categories .template-header__outline .template-header__title, [id^=module_products-] .template-header__outline .template-header__title { background-color: var(--primary-color); /* min-width: 20rem;*/ line-height: var(--h); font-size: var(--font-md); font-weight: 700; position: relative; padding-left: var(--space-sm); white-space: nowrap; } #page-categories .template-header__outline .template-header__title::after, [id^=module_products-] .template-header__outline .template-header__title::after { content: ""; display: inline-block; width: var(--h); height: var(--h); position: absolute; top: 0; left: 100%; z-index: 2; background-image: url("/view/frontend/assets/images/decor-heading.png"); background-repeat: no-repeat; background-size: cover; background-position: center; } #page-categories .template-header__outline .template-header__menu, [id^=module_products-] .template-header__outline .template-header__menu { width: auto; position: relative; margin-left: 6rem; padding-left: 1rem; overflow: hidden; } #page-categories .template-header__outline .template-header__menu ul, [id^=module_products-] .template-header__outline .template-header__menu ul { overflow: hidden; width: 100%; display: flex; flex-flow: row nowrap; justify-content: flex-start; align-items: stretch; margin-bottom: 0 !important; } #page-categories .page-category__title { font-size: var(--font-lg); } @media (max-width: 1024px) { #page-categories .template-header__outline .template-header__menu ul, [id^=module_products-] .template-header__outline .template-header__menu ul { overflow-x: scroll; } #page-categories .template-header__outline .template-header__menu ul::-webkit-scrollbar, [id^=module_products-] .template-header__outline .template-header__menu ul::-webkit-scrollbar { display: none; } } #page-categories .template-header__outline .template-header__menu ul > li:not(:first-child) > a, [id^=module_products-] .template-header__outline .template-header__menu ul > li:not(:first-child) > a { padding-left: var(--space-md); margin-left: var(--space-md); } #page-categories .template-header__outline .template-header__menu ul > li:not(:first-child) > a::before, [id^=module_products-] .template-header__outline .template-header__menu ul > li:not(:first-child) > a::before { content: ""; position: absolute; display: block; top: 50%; left: 0; width: 1px; height: 2rem; background-color: var(--text-dark); transform: translateY(-50%); } #page-categories .template-header__outline a, [id^=module_products-] .template-header__outline a { display: inline-block; height: var(--h); line-height: var(--h); color: var(--text-color); font-weight: 500; font-size: var(--font-normal); position: relative; white-space: nowrap; transition: 0.2s all ease; text-align: center; text-transform: capitalize; } #page-categories .template-header__outline a:hover, [id^=module_products-] .template-header__outline a:hover { --text-color: var(--secondary-color); } [id^=module_products-] .template-header__outline .template-content__view { padding: 0 var(--space-sm); margin-right: var(--space-sm); margin-left: auto; } [id^=module_products-] .template-header__outline .template-content__view::after { content: ""; position: absolute; top: 50%; right: 0; display: inline-block; border: solid var(--text-color); border-width: 0 2px 2px 0; padding: 2px; transform: rotate(-45deg); transform: rotate(-45deg) translateY(-50%); margin-top: -2px; transition: inherit; } [id^=module_products-] .template-product { display: flex; flex-flow: row nowrap; justify-content: flex-start; align-items: stretch; flex-flow: column nowrap; max-width: 30rem; margin: 0 auto; height: 100%; } [id^=module_products-] .template-product .template-product__media { flex-shrink: 0; padding-bottom: 100% !important; transition: 0.2s all ease; position: relative; overflow: hidden; } [id^=module_products-] .template-product .template-product__media > * { transition: 0.3s ease-in-out; } [id^=module_products-] .template-product:hover .template-product__media > * { transform: scale3d(1.1, 1.1, 1.1); } [id^=module_products-] .template-product .template-product__body { display: flex; flex-flow: row nowrap; justify-content: flex-start; align-items: stretch; flex-flow: column nowrap; flex-grow: 1; padding: var(--space-xs) 0; } [id^=module_products-] .template-product .template-product__body .template-product__title { font-size: 15px; font-weight: 700; color: var(--text-color); height: 4.8rem; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; padding: 0 var(--space-xs); transition: 0.2s all ease; } [id^=module_products-] .template-product .template-product__body .template-product__title:hover { color: var(--acctent-color); } [id^=module_products-] .template-product .template-product__body .template-product__price { width: 100%; padding: var(--space-sm) var(--space-xs); text-align: left; flex-grow: 1; display: flex; align-items: center; } [id^=module_products-] .template-product .template-product__body .template-product__price .totalFix { font-weight: 700; color: var(--red); font-size: var(--font-md); } [id^=module_products-] .template-product .template-product__body .template-product__price .discount { text-decoration: line-through; color: var(--gray); margin-right: 5px; } [id^=module_products-] .template-product .template-product__body .template-product__price .save-off { color: var(--red); margin-left: 5px; } [id^=module_products-] .template-product .template-product__body .template-product__price .price-contact { font-weight: 700; color: var(--red); font-size: var(--font-md); } [id^=module_products-] .template-product .template-product__body .template-product__meta { padding: 0 var(--space-xs); } [id^=module_products-] .template-product .template-product__body .template-product__meta > ul { display: flex; flex-flow: row nowrap; justify-content: space-between; align-items: center; } [id^=module_products-] .template-product .template-product__body .template-product__meta > ul > li > span, [id^=module_products-] .template-product .template-product__body .template-product__meta > ul > li > a { display: flex; flex-flow: row nowrap; justify-content: center; align-items: center; text-align: center; font-size: var(--font-sm); line-height: 1; } [id^=module_products-] .template-product .template-product__body .template-product__meta > ul > li > span .icon-size, [id^=module_products-] .template-product .template-product__body .template-product__meta > ul > li > a .icon-size { --color: var(--green); margin-right: var(--space-xxs); } [id^=module_products-] .template-product .template-product__body .template-product__meta > ul > li > a { color: var(--green); } [id^=module_products-] .template-product .template-product__body .template-product__meta > ul > li > a.disabled { user-select: none; pointer-events: none; opacity: 0.8; } [id^=module_products-] .template-product .template-product__body .template-product__meta > ul > li > a .icon-size { --size: 2rem; } [id^=module_products-] .template-product .template-product__body .template-product__meta > ul > li > a:hover { color: var(--color-main-3); } [id^=module_products-] .template-product .template-product__body .template-product__meta > ul > li > a:hover .icon-size { --color: var(--color-main-3); } [id^=module_products-] .template-product .template-product__body .template-product__meta > ul > li > span .icon-checked { --size: 1.3rem; } [id^=module_products-] .template-product .template-product__body .template-product__meta > ul > li > span .icon-cancel { --color: var(--red); --size: 1.1rem; } [id^=module_products-] .template-product__main .owl-carousel .owl-stage { display: flex; padding: 2rem 0; } .template-product:hover .card-body .card-title, .template-card__product .card-body .card-meta ul li a:hover, footer .footer-top_item ul li div a:hover, footer .footer-item__list ul li a:hover, footer .footer-item__email ul li a:hover { color: var(--color-main-1) !important; } @media only screen and (max-width: calc(992px)) { #page-categories .template-header__outline, [id^=module_products-] .template-header__outline { flex-flow: row wrap; } #page-categories .template-header__outline .template-header__title, [id^=module_products-] .template-header__outline .template-header__title { min-width: 100%; } #page-categories .template-header__outline .template-header__title::after, [id^=module_products-] .template-header__outline .template-header__title::after { display: none !important; } #page-categories .template-header__outline .template-header__menu, [id^=module_products-] .template-header__outline .template-header__menu { padding-left: 0; width: auto; margin-left: 0; } [id^=module_products-] .template-header__outline .template-header__menu .template-header__view.toggle { color: var(--color-accent-1); } [id^=module_products-] .template-header__outline .template-header__menu .template-header__view.toggle + .template-header__list { visibility: visible; opacity: 1; max-height: 100vh; } [id^=module_products-] .template-header__outline .template-header__menu .template-header__view.toggle > .arrow { transform: translateY(-50%) rotate(-135deg); border-color: var(--color-accent-1); margin-top: 0; } [id^=module_products-] .template-header__outline .template-header__menu .template-header__list { left: 0 !important; } [id^=module_products-] .template-product__main .owl-carousel .owl-nav button[class^=owl-] { visibility: visible; opacity: 1; } [id^=module_products-] .template-product__main .owl-carousel .owl-nav button[class^=owl-].owl-prev { left: 0; } [id^=module_products-] .template-product__main .owl-carousel .owl-nav button[class^=owl-].owl-next { left: 100%; } } @media only screen and (min-width: 768px) { [id^=module_products-] .template-product .template-product__body .template-product__price .totalFix { font-weight: 700; font-size: var(--font-md); } [id^=module_products-] .template-product .template-product__body .template-product__price .save-off { font-weight: 500; } [id^=module_products-] .template-product .template-product__body .template-product__meta > ul > li > a, [id^=module_products-] .template-product .template-product__body .template-product__meta > ul > li > span { font-size: var(--font-normal); } } @media only screen and (min-width: 768px) and (max-width: calc(991px)) { [id^=module_products-] .template-header__outline .template-header__menu .template-header__list:hover, [id^=module_products-] .template-header__outline .template-header__menu .template-header__view:hover + .template-header__list { visibility: visible; opacity: 1; max-height: 100vh; } } @media only screen and (max-width: calc(991px)) { [id^=module_products-] .template-header__outline .template-header__menu .template-header__view { padding-left: var(--space-sm); padding-right: var(--space-default); position: relative; } [id^=module_products-] .template-header__outline .template-header__menu .template-header__view span { position: absolute; right: 0; top: 50%; display: inline-block; border: solid var(--text-dark); border-width: 0 2px 2px 0; padding: 3px; transform: rotate(45deg); transform: translateY(-50%) rotate(45deg); margin-top: -2px; transition: 0.3s ease-in-out; } [id^=module_products-] .template-header__outline .template-header__menu { overflow-x: scroll; width: 100%; } [id^=module_products-] .template-header__outline .template-header__menu::-webkit-scrollbar { display: none; } [id^=module_products-] .template-header__outline .template-header__menu .template-header__list { } #page-categories .template-header__outline .template-header__menu .template-header__list > li > a, [id^=module_products-] .template-header__outline .template-header__menu .template-header__list > li > a, [id^=module_products-] .template-header__outline .template-header__menu .template-header__list > li:not(:first-child) > a { margin-left: 0; padding-left: var(--space-md); width: 100%; text-align: left; } #page-categories .template-header__outline .template-header__menu .template-header__list > li:not(:first-child) > a::before , [id^=module_products-] .template-header__outline .template-header__menu .template-header__list > li > a::before, [id^=module_products-] .template-header__outline .template-header__menu .template-header__list > li:not(:first-child) > a::before { display: none; } [id^=module_products-] .template-product__main .owl-carousel .owl-nav button[class^=owl-].owl-prev { left: 0; } [id^=module_products-] .template-product__main .owl-carousel .owl-nav button[class^=owl-].owl-next { left: 100%; } } #page-product .page-product__wrapper { padding: var(--space-md); height: 100%; border-radius: 5px; } #page-product .page-product__wrapper .page-product__main .page-product__header ul.page-product__status { margin-bottom: 0; display: flex; flex-flow: row nowrap; justify-content: flex-start; align-items: center; } #page-product .page-product__wrapper .page-product__main .page-product__header ul.page-product__status > li { --color: rgb(132, 135, 136); position: relative; display: block; color: var(--color); } #page-product .page-product__wrapper .page-product__main .page-product__header ul.page-product__status > li:not(:first-of-type) { padding-left: var(--space-sm); margin-left: var(--space-sm); } #page-product .page-product__wrapper .page-product__main .page-product__header ul.page-product__status > li:not(:first-of-type)::before { content: ""; display: inline-block; width: 1px; height: 50%; position: absolute; top: 50%; left: -1px; z-index: 2; background-color: var(--color); transform: translateY(-50%); } #page-product .page-product__wrapper .page-product__main .page-product__action .product-action__wrapper .group-action { display: flex; flex-flow: row nowrap; justify-content: flex-start; align-items: center; } #page-product .page-product__wrapper .page-product__main .page-product__action .product-action__wrapper .group-action > label { flex-shrink: 0; display: inline-block; margin-right: var(--space-sm); font-weight: 500; } #page-product .page-product__wrapper .page-product__main .page-product__action .product-action__wrapper .group-action .input-group input { max-width: 5rem; height: 3rem; line-height: 3rem; font-size: var(--font-normal); text-align: center; border-radius: 0; } #page-product .page-product__wrapper .page-product__main .page-product__action .product-action__wrapper .group-action .input-group button { display: flex; flex-flow: row nowrap; justify-content: center; align-items: center; width: 3rem; min-height: 100%; border-radius: 3px 0 0 3px; background-color: #fff; border: 1px solid rgba(0, 0, 0, 0.19); color: #6c757d; font-size: 1rem; } #page-product .page-product__wrapper .page-product__main .page-product__action .product-action__wrapper .group-action .input-group button:last-child { border-radius: 0 3px 3px 0; } #page-product .page-product__wrapper .page-product__main .page-product__action .product-action__wrapper .group-action .input-group button:hover { background-color: #ececec; } #page-product .page-product__wrapper .page-product__main .page-product__action .product-action__wrapper .group-sale { display: flex; flex-flow: row wrap; justify-content: center; align-items: stretch; } #page-product .page-product__wrapper .page-product__main .page-product__action .product-action__wrapper .group-sale .btn { width: 100%; max-width: 22.5rem; margin: var(--space-xs); } #page-product .page-product__wrapper .page-product__main .page-product__promotion { border: 1px solid #e9e9e9; } #page-product .page-product__wrapper .page-product__main .page-product__promotion .product-promotion__wrapper { position: relative; padding: var(--space-sm); background-color: #fbfbdd; } #page-product .page-product__wrapper .page-product__main .page-product__promotion .product-promotion__wrapper .promotion-header { display: flex; flex-flow: row nowrap; justify-content: flex-start; align-items: stretch; margin-bottom: var(--space-xs); } #page-product .page-product__wrapper .page-product__main .page-product__promotion .product-promotion__wrapper .promotion-header .promotion-icon { flex-shrink: 0; } #page-product .page-product__wrapper .page-product__main .page-product__promotion .product-promotion__wrapper .promotion-header .promotion-icon > img { display: block; width: 1.6rem; height: 1.6rem; } #page-product .page-product__wrapper .page-product__main .page-product__promotion .product-promotion__wrapper .promotion-header .promotion-title { font-weight: 500; flex-grow: 1; padding: 0 var(--space-sm); } #page-product .page-product__wrapper .page-product__main .page-product__promotion .product-promotion__wrapper .promotion-header .promotion-status { margin-left: auto; flex-shrink: 0; display: inline-block; align-self: self-start; border-radius: 3px; font-size: 12px; color: #fff; background-color: #5eba00; padding: var(--space-xxs); } #page-product .page-product__wrapper .page-product__main .page-product__promotion .product-promotion__wrapper .promotion-title { padding-left: 3rem; } #page-product .page-product__wrapper .page-product__main .page-product__table { height: 100%; width: 100%; border: 1px solid rgba(0, 0, 0, 0.1); } #page-product .page-product__wrapper .page-product__main .page-product__table .table-row { display: flex; flex-flow: row nowrap; justify-content: space-between; align-items: stretch; } #page-product .page-product__wrapper .page-product__main .page-product__table .table-row:nth-child(2n) { background-color: #f6f6f6; } #page-product .page-product__wrapper .page-product__main .page-product__table .table-column { min-height: 3rem; } #page-product .page-product__wrapper .page-product__main .page-product__table .table-column > .table-column__wrapper { font-size: var(--font-normal); font-weight: 400; color: #333; padding: var(--space-sm); } #page-product .page-product__wrapper .page-product__main .page-product__table .table-column:first-child { font-weight: 500; width: 30%; position: relative; } #page-product .page-product__wrapper .page-product__main .page-product__table .table-column:first-child::after { content: ""; position: absolute; left: calc(100% - 1px); top: 0; height: 100%; width: 1px; background-color: rgba(0, 0, 0, 0.1); z-index: 2; } #page-product .page-product__wrapper .page-product__main .page-product__table .table-column:last-child { width: 70%; } #page-product .page-product__wrapper .page-product__detail .page-product__title { font-weight: 700; font-size: var(--font-lg); text-transform: capitalize; border-bottom: 3px solid var(--secondary-color); padding-bottom: 5px; display: inline-flex; margin-bottom: 20px; } #page-product .page-product__wrapper .page-product__detail .page-product__desc { display: flex; flex-flow: row nowrap; justify-content: flex-start; align-items: stretch; color: var(--text-dark); } #page-product .page-product__wrapper .page-product__detail .page-product__desc:not(:last-child) { margin-bottom: var(--space-xs); } #page-product .page-product__wrapper .page-product__detail .page-product__desc .icon-size { --size: 2rem; --color: var(--color-accent-1); } #page-product .page-product__wrapper .page-product__detail .page-product__desc .icon-size.icon-support, #page-product .page-product__wrapper .page-product__detail .page-product__desc .icon-size.icon-currency { --size: 1.8rem; } #page-product .page-product__wrapper .page-product__detail .page-product__desc > span:first-child { float: left; display: inline-block; width: 2rem; margin-right: var(--space-sm); } #page-product .page-product__wrapper .page-product__detail .page-product__desc > span:last-child { float: right; display: inline-block; width: calc(100% - 2rem - var(--space-sm)); } #page-product .page-product__wrapper .page-product__detail a.page-product__desc:hover { color: var(--text-main-1); } #page-product .page-wrapper { padding: var(--space-md); height: 100%; border-radius: 5px; } .single-desc { transition: 0.5s ease-in-out; } .single-desc .desc-zoomOut { overflow: hidden; transition: inherit; } .single-desc .desc-expand { display: inline-block; text-align: center; font-size: var(--font-normal); color: #dd0303; position: relative; z-index: 1; height: 4rem; line-height: 4rem; width: 100%; background-color: #FFF; box-shadow: 0 -10px 10px 10px #ffffff; } #page-product .product-main { height: 100%; } #page-product .product-main .product-header h1 { font-size: var(--font-lg); margin-bottom: 0; } #page-product .product-main .product-support { display: flex; justify-content: space-between; margin-bottom: 15px; } #page-product .product-main .product-support a { display: inline-flex; justify-content: center; align-items: center; line-height: 1; color: var(--bs-primary); font-size: 14px; } #page-product .product-main .product-support a i { font-size: 1.25em; } #page-product .product-main .product-support a:hover { color: var(--sc-main-color-2); } #page-product .product-main .product-group { display: grid; grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(2, 1fr); grid-gap: 10px; } #page-product .product-main .product-group > *:first-child { grid-column: 1/3; grid-row: 1/2; } #page-product .product-main .product-contact { display: inline-flex; justify-content: center; align-items: center; width: 100%; height: 40px; color: #fff; font-size: 16px; line-height: 2; padding: 0 20px; background-color: var(--sc-main-color); transition: background-color 0.2s ease; border-radius: 4px; text-transform: uppercase; } #page-product .product-main .product-contact.disabled { opacity: 0.7; pointer-events: none; user-select: none; } #page-product .product-main .product-contact:hover { background-color: var(--sc-main-color-2); } #page-product .product-main .product-contact > span { margin: 0 5px; } #page-product .product-main .product-contact.outline { background-color: #fff; box-shadow: inset 0 0 0 2px var(--sc-main-color); color: var(--sc-main-color); } #page-product .product-main .product-contact.outline:hover { color: #fff; background-color: var(--sc-main-color-2); } #page-product .product-preview .preview-main { border: 1px solid #e9eef4; } #page-product .product-preview .preview-main .swiper-wrapper .swiper-slide { height: auto; } #page-product .product-preview .preview-main .swiper-wrapper .swiper-slide .swiper-slide-video { height: 100%; display: flex; justify-content: center; align-items: center; background-color: #000; } #page-product .product-preview .preview-images-nav .swiper-slide { height: auto; display: flex; justify-content: center; align-items: center; } #page-product .product-preview .swiper-has-nav { position: relative; } #page-product .product-preview .swiper-has-nav button { display: inline-flex; justify-content: center; align-items: center; width: 2.5rem; height: 3rem; font-size: 24px; color: #fff; position: absolute; left: 15px; top: 50%; border-radius: 2px; transform: translate(-50%, -50%); z-index: 99; overflow: hidden; transition: background-color 0.2s ease; } #page-product .product-preview .swiper-has-nav button::before { content: ""; display: inline-block; width: 100%; height: 100%; position: absolute; z-index: -1; top: 0; left: 0; background-color: rgba(0, 0, 0, 0.75); transition: inherit; } #page-product .product-preview .swiper-has-nav button.swiper-preview-next { left: initial; right: -15px; } #page-product .product-preview .swiper-has-nav button:hover::before { background-color: rgba(0, 0, 0, 0.95); } #page-product .product-main .product-table { line-height: 1.5; font-size: 14px; } #page-product .product-main .product-table .product-price { margin-bottom: 20px; } #page-product .product-main .product-table .product-price .price-top { color: #888; font-size: var(--font-md); } #page-product .product-main .product-table .product-price .price-main.info > *.title { font-weight: 400; color: #222; } #page-product .product-main .product-table .product-price .price-main.info > *.content { font-size: 16px; color: #e64545; font-weight: 700; } #page-product .product-main .product-table .product-infos .info { display: flex; justify-content: space-between; } #page-product .product-main .product-table .product-infos .info > * { flex: 1 0 50%; } #page-product .product-main .product-table .product-infos .info .title { color: #888; font-weight: 500; } #page-product .product-main .product-table .product-infos .info .content { color: #222; } #page-product .product-main .product-table .product-infos.break { margin-bottom: 20px; box-shadow: 0 1px 0 0 #e9eef4; } #page-product .product-sidebar { height: 100%; border-radius: 5px; } #page-product .product-sidebar .sidebar-heading { font-weight: 700; font-size: var(--font-lg); text-transform: capitalize; border-bottom: 3px solid var(--secondary-color); padding-bottom: 5px; display: inline-flex; margin-bottom: 20px; } #page-product .product-sidebar ul.products-relative { margin: 0; display: grid; grid-template-columns: 1fr; grid-gap: 20px; padding: 10px; } #page-product .product-sidebar ul.products-relative > li { display: block; } #page-product .product-sidebar ul.products-relative > li > a.product { display: grid; grid-template-columns: 75px 1fr; grid-gap: 10px; } #page-product .product-sidebar ul.products-relative > li > a.product .product-media { border: 1px solid #e9eef4; border-radius: .3rem !important; overflow: hidden; flex-shrink: 0; } #page-product .product-sidebar ul.products-relative > li > a.product .product-content { display: flex; flex-direction: column; height: 100%; } #page-product .product-sidebar ul.products-relative > li > a.product .product-name { display: inline-block; color: var(--text-color); margin-bottom: 8px; font-weight: 700; transition: all 0.3s ease-in; line-height: unset; } #page-product .product-sidebar ul.products-relative > li > a.product .product-name:hover { color: var(--primary-color); } #page-product .product-sidebar ul.products-relative > li > a.product .product-price { color: var(--text-color); margin-top: auto; } #page-product .product-sidebar ul.products-relative > li > a.product .product-price .highlight { font-weight: 700; color: var(--sc-main-color); } #page-product .product-sidebar ul.products-relative > li > a.product .product-price .unit { color: #888; } .product-button__item { display: inline-flex; justify-content: center; align-items: center; width: 100%; color: #fff; line-height: 2; padding: 7px 20px; font-weight: 700; background-color: var(--primary-color); transition: background-color 0.2s ease; border-radius: 25px; text-transform: uppercase; white-space: nowrap; } .product-button__item.form-popup { background-color: var(--secondary-color); } .product-button__item:hover { color: #fff; } @media (max-width: 576px) { .product-button { display: flex; flex-direction: column; } .product-button__item { width: 100%; } #page-product .page-wrapper { padding: 10px; } } @media only screen and (min-width: 576px) { #page-product .page-product__wrapper .page-product__main .page-product__action .product-action__wrapper .group-sale { display: flex; flex-flow: row nowrap; justify-content: space-between; align-items: stretch; } #page-product .page-product__wrapper .page-product__main .page-product__action .product-action__wrapper .group-sale .btn { width: 50%; max-width: unset; } } @media only screen and (max-width: 1199px) { #page-product .product-sidebar ul.products-relative { display: flex; overflow: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scroll-snap-stop: always; -ms-touch-action: manipulation; touch-action: manipulation; -webkit-overflow-scrolling: touch; scroll-padding: 1rem; -ms-overflow-style: none; scrollbar-width: none; } #page-product .product-sidebar ul.products-relative::-webkit-scrollbar { height: 5px; background-color: #eee; } #page-product .product-sidebar ul.products-relative::-webkit-scrollbar-thumb { background: #999; border-radius: 99px; } #page-product .product-sidebar ul.products-relative > * { scroll-snap-align: start; } #page-product .product-sidebar ul.products-relative > li > a.product { width: 180px; padding: 10px; display: flex; flex-direction: column; border: 1px solid #e9eef4; height: 100%; border-radius: 5px; overflow: hidden; } #page-product .product-sidebar ul.products-relative > li > a.product .product-media { border: 1px solid transparent; } } @media only screen and (max-width: 525px) { #page-product .product-main .product-group > *:first-child { grid-column: initial; grid-row: initial; } #page-product .product-main .product-contact > span { display: inline-block; min-width: 125px; } #page-product .product-main .product-group { grid-template-columns: 1fr; grid-template-rows: repeat(3, 1fr); } } @media only screen and (max-width: 576px) { #page-product .product-preview .swiper-has-nav { padding: 0; } #page-product .product-preview .swiper-has-nav button { display: none !important; } } #page-categories .page-categories__wrapper .page-categories__outline { display: flex; justify-content: flex-start; position: relative; } #page-categories .page-categories__wrapper .page-categories__outline .page-categories__title { font-size: var(--font-lg); color: var(--text-dark); margin-bottom: 0; flex-shrink: 0; white-space: nowrap; padding-right: 10px; } #page-categories .page-categories__wrapper .filter-group { display: flex; flex-flow: row nowrap; justify-content: flex-start; align-items: center; flex-flow: row wrap; } #page-categories .page-categories__wrapper .filter-group .filter-dropdown a, #page-categories .page-categories__wrapper .filter-group .filter-list a { display: block; font-weight: 400; color: var(--text-dark); font-size: var(--font-normal); position: relative; white-space: nowrap; } .page-categories__outline .filter-list { display: flex; align-items: center; gap: 6px; } #page-categories .page-categories__wrapper .filter-group .filter-list > a { border: 1px solid #dfdfdf; border-radius: 20px; padding: 4px 10px; font-size: 13px; color: #727070; transition: 0.3s ease-in-out; font-weight: 500; } #page-categories .page-categories__wrapper .filter-group .filter-list > a:hover, #page-categories .page-categories__wrapper .filter-group .filter-list > a.active { background-color: var(--secondary-color); color: var(--bs-white) !important; } #page-categories .page-categories__wrapper .filter-group .filter-dropdown a.dropdown-toggle { min-width: 15rem; border: 1px solid #e9e9e9; border-radius: 3px; padding: var(--space-xs) 32px var(--space-xs) var(--space-default); } #page-categories .page-categories__wrapper .filter-group .filter-dropdown a.dropdown-toggle::after { margin-left: 0; position: absolute; top: 50%; left: calc(100% - 20px); transform: translateY(-50%); margin-top: 1px; } #page-categories .page-categories__wrapper .filter-group .filter-dropdown a.dropdown-toggle.show::after { margin-top: -1px; transform: rotate(180deg); } #page-categories .page-categories__wrapper .filter-group .filter-dropdown .dropdown-menu { padding: 0; } #page-categories .page-categories__wrapper .filter-group .filter-dropdown .dropdown-menu li { transition: 0.3s ease-in-out; } #page-categories .page-categories__wrapper .filter-group .filter-dropdown .dropdown-menu li:not(:last-of-type) { border-bottom: 1px solid var(--color-border); } #page-categories .page-categories__wrapper .filter-group .filter-dropdown .dropdown-menu li a { padding: var(--space-sm); } #page-categories .page-categories__wrapper .filter-group .filter-dropdown .dropdown-menu li.active a { color: var(--color-accent-1); } #page-categories .page-categories__wrapper .filter-group .filter-dropdown .dropdown-menu li:not(:first-of-type):hover { background-color: #e9e9e9; } #page-categories .page-categories__wrapper .filter-group .filter-list { display: flex; flex-flow: row nowrap; justify-content: flex-start; align-items: stretch; flex-flow: row wrap; } #page-categories .page-categories__wrapper .filter-group .filter-list > a:not(:last-child) { padding-right: var(--space-sm); } #page-categories .page-categories__wrapper .filter-group .filter-list > a.active { color: var(--color-accent-1); } #page-categories .page-categories__wrapper .filter-group .filter-list > a i { margin-right: var(--space-xxs); color: var(--color-accent-1); } @media (max-width: 576px) { #page-categories .page-categories__wrapper .filter-group { overflow: hidden; } #page-categories .page-categories__wrapper .filter-group .filter-list { display: flex; flex-wrap: nowrap; overflow-x: scroll; padding-bottom: 12px; } } #page-categories .product-item { overflow: hidden; max-width: 30rem; margin: 0 auto; background-color: #fff; border-bottom: 1px solid #e9e9e9; border-right: 1px solid #e9e9e9; } #page-categories .product-item .product-item__media { padding: var(--space-sm); border-bottom: 1px solid #e9e9e9; } #page-categories .product-item .product-item__media > a { overflow: hidden; } #page-categories .product-item .product-item__media > a > img { transition: 0.3s ease-in-out; } #page-categories .product-item:hover .product-item__media > a > img { transform: scale3d(1.2, 1.2, 1.2); } #page-categories .product-item .product-item__body { display: flex; flex-flow: row nowrap; justify-content: flex-start; align-items: stretch; flex-flow: column nowrap; padding: var(--space-default) var(--space-sm) var(--space-lg) var(--space-sm); } #page-categories .product-item .product-item__name { padding-bottom: var(--space-xs); width: 100%; } #page-categories .product-item .product-item__price { flex: 1 0 0; } #page-categories .product-item .product-item__action { display: flex; flex-flow: row nowrap; justify-content: space-between; align-items: center; } #page-categories .product-item .product-item__action > * { display: flex; flex-flow: row nowrap; justify-content: center; align-items: center; text-align: center; font-size: var(--font-sm); line-height: 1; } #page-categories .product-item .product-item__action > * .icon-size { --size: 1.2rem; margin-right: var(--space-xxs); } #page-categories .product-item .product-item__action > a { font-size: var(--font-sm); } #page-categories .product-item .product-item__action > a:hover { --color: var(--color-main-1); } #page-categories .product-item .product-item__action > a > .icon-size { transition: inherit; --color: var(--green); --size: 1.8rem; } #page-categories .product-item .product-item__action > a > span.icon-cancel { --size: 1.1rem; --color: var(--red); } #page-categories .product-item .product-item__action > a > span.icon-checked { --color: var(--green); --size: 1.3rem; } #page-categories .product-item .product-item__price { margin-bottom: var(--space-sm); } #page-categories .product-item .product-item__price .price-contact, #page-categories .product-item .product-item__price .totalFix { font-weight: 700; font-size: var(--font-md); color: var(--red); } #page-categories .product-item .product-item__price .discount-price, #page-categories .product-item .product-item__price .save-off { font-weight: 400; font-size: var(--font-normal); } #page-categories .product-item .product-item__price .discount-price { text-decoration: line-through; color: var(--gray); margin-right: 5px; } #page-categories .product-item .product-item__price .save-off { color: var(--red); } #page-categories .section-category a { color: #727070; transition: var(--bs-accordion-transition); position: relative; margin-left: 10px; font-weight: 600; } #page-categories .section-category a:hover { color: var(--secondary-color); } @media only screen and (min-width: 768px) { #page-categories .page-categories__wrapper { border-radius: 5px 5px 0 0; } #page-categories .page-categories__main { border: 0; background-color: #fff; border-radius: 0 0 5px 5px; } #page-categories .product-item { border: 0; box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 20px; border-radius: 5px; } #page-categories .product-item .product-item__price .totalFix { font-weight: 700; } #page-categories .product-item .product-item__action > * { font-size: var(--font-normal); } } #page-payment .form-control:not(textarea) { height: 4rem; line-height: 4rem; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; padding: 0 0 0 var(--space-md); } #page-payment .form-control { width: 100%; font-size: var(--font-normal); } #page-payment textarea.form-control { padding: var(--space-sm) 0 0 var(--space-md); resize: none; } .cs-form .form-group { --invalid: var(--sc-main-color-2); --valid: #007e33; position: relative; padding-bottom: 18px; margin-bottom: 5px; } .cs-form .form-group.invalid > .form-control { border-color: var(--invalid); } .cs-form .form-group input { background-color: #fff; } .cs-form .form-group.invalid .form-message { color: var(--invalid); } .cs-form .form-group.valid > .form-control { border-color: var(--valid); } .cs-form .form-group.valid > .form-control + .form-message { display: none; } .cs-form .form-group .form-message { font-size: 12px; position: absolute; bottom: -3px; left: 3px; color: inherit; } .cs-form .form-group .cs-form-select { display: flex; flex-direction: column; margin-bottom: 0; border: 1px solid #e9ecef; position: absolute; top: calc(100% - 10px); left: 0; right: 0; max-height: 250px; overflow-y: auto; border-radius: 4px; background-color: #fff; transition: all 0.2s ease-in-out; } .cs-form .form-group .cs-form-select > li { display: block; width: 100%; padding: 10px 20px; transition: background-color 0.2s; } .cs-form .form-group .cs-form-select > li:hover { background-color: #f7f7f7; } .cs-form .form-group .cs-form-select.hidden { opacity: 0; visibility: hidden; } .z-10 { z-index: 10; } .z-11 { z-index: 11; } #spotlight_blogs .spotlight_blogs__header .blogs-header__wrapper { height: 5rem; } #spotlight_blogs .spotlight_blogs__header .blogs-header__wrapper .blogs-header__outline { height: 100%; position: relative; box-shadow: inset 0 -4px 0 var(--primary-color); background-color: #fff; } #spotlight_blogs .spotlight_blogs__header .blogs-header__wrapper .blogs-header__outline .blogs-header__title { display: inline-block; height: 100%; line-height: 5rem; padding-left: var(--space-sm); font-weight: 700; color: #FFFFFF; text-transform: uppercase; background-color: var(--primary-color); position: relative; } #spotlight_blogs .spotlight_blogs__header .blogs-header__wrapper .blogs-header__outline .blogs-header__title::before { content: ""; display: inline-block; width: 50px; height: 50px; position: absolute; top: 0; left: 100%; z-index: 2; background-image: url("/view/frontend/assets/images/decor-heading.png"); background-repeat: no-repeat; background-size: cover; background-position: center; } #spotlight_blogs .spotlight_blogs__header .blogs-header__wrapper .blogs-header__outline .link_view { position: absolute; top: 50%; color: var(--text-color); right: var(--space-sm); transform: translateY(-50%); padding-right: var(--space-sm); font-weight: 500; } #spotlight_blogs .spotlight_blogs__header .blogs-header__wrapper .blogs-header__outline .link_view .arrow { position: absolute; top: 50%; right: 0; display: inline-block; border: solid var(--text-color); border-width: 0 2px 2px 0; padding: 2px; transform: rotate(-45deg); transform: translateY(-50%) rotate(-45deg); } #spotlight_blogs .spotlight_blogs__header .blogs-header__wrapper .blogs-header__outline .link_view:hover { color: var(--); } #spotlight_blogs .spotlight_blogs__grid { display: grid; grid-template-columns: 1fr; grid-template-rows: repeat(4, minmax(13rem, auto)); padding: var(--space-md) 1rem; } .blog { overflow: hidden; position: relative; } .blog:not(:first-child) { padding-top: 2rem; } .blog:not(:last-child) { border-bottom: 1px dashed #e5e5e5; } .blog .blog-wrapper { display: flex; flex-flow: row nowrap; justify-content: flex-start; align-items: stretch; height: 100%; position: relative; } .blog .blog-wrapper .blog-media { width: 40%; } .blog .blog-wrapper .blog-media .blog-media-wrapper { display: block; width: 100%; padding-top: 60%; border-radius: 3px; overflow: hidden; position: relative; } .blog .blog-wrapper .blog-media .blog-media-wrapper > img { display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 2; } .blog .blog-wrapper .blog-content { width: 60%; padding-left: var(--space-sm); } .blog .blog-wrapper .blog-content .blog-title { font-weight: 700; color: var(--text-dark); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; } .blog .blog-wrapper .blog-content .blog-text { overflow: hidden; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; margin-bottom: 0; } .blog-wrapper .blog_date { color: white; font-weight: 500; font-size: 10px; position: relative; z-index: 3; margin-bottom: 5px; background-color: var(--secondary-color); width: max-content; padding: 2px 10px; border-radius: 15px; } .blog .blog-wrapper .blog-action { display: flex; flex-flow: row nowrap; justify-content: flex-end; align-items: center; position: absolute; bottom: 2rem; right: 1rem; width: 100%; z-index: 101; } .blog .blog-wrapper .blog-action .blog-tags { display: flex; flex-flow: row nowrap; justify-content: space-between; align-items: center; } .blog .blog-wrapper .blog-action .blog-tags > * { display: inline-block; padding: 3px 8px; border-radius: 20px; background-color: #e9ecef; color: black; font-size: 12px; } .blog .blog-wrapper .blog-action .blog-tags > * + * { padding-left: var(--space-xs); margin-left: var(--space-xs); position: relative; } .blog .blog-wrapper .blog-action .blog-tags > * + *::after { content: ""; position: absolute; top: 50%; right: calc(100% - 1px); display: inline-block; height: 50%; width: 1px; background-color: #e9e9e9; transform: translateY(-50%); } .blog .blog-wrapper .blog-action .blog-read { display: inline-block; background-color: var(--color-main-3); color: #fff; padding: var(--space-xxs); } .blog:hover .blog-wrapper .blog-content .blog-title { color: var(--secondary-color); } #page-blogs .page-blogs__wrapper { padding: var(--space-md) 1rem; border-radius: 5px; } #page-blogs .page-blogs__wrapper .page-blogs__grid { display: grid; grid-template-columns: 1fr; grid-auto-rows: minmax(13rem, auto); } #page-blogs #pagination { padding: var(--space-md) 0; } .blog-text { color: gray; font-size: 13px; margin-top: 5px; } .blog-date { font-size: 12px; font-weight: 400; color: var(--gray); margin-bottom: 3px; } @media (max-width: 576px) { .blog-text { display: none !important; } } @media only screen and (min-width: 992px) { #spotlight_blogs .spotlight_blogs__grid { grid-template-columns: 1fr 2fr 2fr 2fr; grid-template-rows: repeat(2, 20rem); grid-gap: var(--space-sm); } #spotlight_blogs .spotlight_blogs__grid .blog { padding: 0; } #spotlight_blogs .spotlight_blogs__grid .blog:first-of-type { grid-column: 1/3; grid-row: 1/-1; } #spotlight_blogs .spotlight_blogs__grid .blog:nth-of-type(2) { grid-column: 3/5; grid-row: 1/2; } #spotlight_blogs .spotlight_blogs__grid .blog:nth-of-type(3) { grid-column: 3/4; grid-row: 2/3; } #spotlight_blogs .spotlight_blogs__grid .blog:nth-last-of-type { grid-column: 4/5; grid-row: 2/3; } #spotlight_blogs .spotlight_blogs__grid .blog .blog-wrapper { position: relative; } #spotlight_blogs .spotlight_blogs__grid .blog .blog-wrapper .blog-content { position: absolute; left: 0; bottom: 0; width: 100%; padding: var(--space-xs); padding-top: 0; transition: 0.3s ease; } #spotlight_blogs .spotlight_blogs__grid .blog .blog-wrapper .blog-content .blog-title, #spotlight_blogs .spotlight_blogs__grid .blog .blog-wrapper .blog-content .blog-text { text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.2); } #spotlight_blogs .spotlight_blogs__grid .blog .blog-wrapper .blog-content .blog-title { position: relative; font-weight: 700; z-index: 3; color: #fff; transition: inherit; line-height: inherit; } #spotlight_blogs .spotlight_blogs__grid .blog .blog-wrapper .blog-content .blog-text { position: relative; z-index: 3; max-height: 0; transition: 1s ease; color: #fff; } #spotlight_blogs .spotlight_blogs__grid .blog .blog-wrapper .blog-media { display: block; width: 100%; height: 100%; } #spotlight_blogs .spotlight_blogs__grid .blog .blog-wrapper .blog-media .blog-media-wrapper { min-height: 100%; padding-top: 0; border-radius: 5px; overflow: hidden; } #spotlight_blogs .spotlight_blogs__grid .blog .blog-wrapper .blog-media .blog-media-wrapper::before { content: ""; display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 3; background: rgba(0, 0, 0, 0.2) linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.8)); } #spotlight_blogs .spotlight_blogs__grid .blog .blog-wrapper .blog-media .blog-media-wrapper > img { backface-visibility: hidden; transform: scale3d(1, 1, 1); transition: 1.5s ease; } #spotlight_blogs .spotlight_blogs__grid .blog .blog-wrapper .blog-action { position: absolute; top: var(--space-xs); right: var(--space-xs); bottom: initial; height: auto; z-index: 3; } #spotlight_blogs .spotlight_blogs__grid .blog .blog-wrapper .blog-action > .blog-tags > * { text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.2); } #spotlight_blogs .spotlight_blogs__grid .blog .blog-wrapper .blog-action .blog-read { display: none; } #spotlight_blogs .spotlight_blogs__grid .blog:hover .blog-wrapper .blog-media .blog-media-wrapper img { transform: scale3d(1.1, 1.1, 1.1); } #spotlight_blogs .spotlight_blogs__grid .blog:hover .blog-wrapper .blog-text { max-height: 10rem; } #spotlight_blogs .spotlight_blogs__grid .blog .blog-wrapper .link-full{ z-index: 4; } #page-blogs .page-blogs__wrapper .page-blogs__grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 18rem; grid-gap: var(--space-md); } #page-blogs .page-blogs__wrapper .page-blogs__grid .blog { padding-top: 0; padding-left: 2rem; border-bottom: 1px dashed #e5e5e5; } #page-blogs .page-blogs__wrapper .page-blogs__grid .blog .blog-wrapper .blog-content { padding: 0 var(--space-sm); } } #module_subscribe { position: relative; } #module_subscribe { background-color: var(--primary-color); padding: 30px 0; } #module_subscribe .subscribe-form__main .subscribe-form__wrapper { padding-bottom: var(--space-sm); } #module_subscribe .subscribe-form__main .subscribe-form__wrapper .subscribe-form__icon { width: 50px; font-size: 2.5em; color: var(--bs-white); flex-shrink: 0; } #module_subscribe .subscribe-form__main .subscribe-form__wrapper .subscribe-form__intro { width: 100%; padding-left: 5px; } #module_subscribe .subscribe-form__main .subscribe-form__wrapper .subscribe-form__intro .form-intro__title { color: var(--bs-white); font-weight: 700; font-size: var(--font-normal); text-transform: uppercase; margin-bottom: 2px; } #module_subscribe .subscribe-form__main .subscribe-form__wrapper .subscribe-form__intro .form-intro__notice { margin-bottom: 0; font-size: var(--font-sm); color: var(--bs-white); } #module_subscribe .subscribe-form__main #formSubscribe .form-inner { position: relative; margin-bottom: 0; width: 100%; border: 1px solid #d1d1d1; border-radius: 4rem; } #module_subscribe .subscribe-form__main #formSubscribe .form-inner .form-control { background: transparent; height: 4.4rem; line-height: 4.4rem; margin: 0; width: 100%; max-width: 100%; color: var(--bs-white); font-size: 1em; padding: 0 10rem 0 2rem; text-align: left; outline: none; border: none; border-radius: 0 4px 4px 0; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; } #module_subscribe .subscribe-form__main #formSubscribe .form-inner .form-control:focus { background: transparent; } #module_subscribe .subscribe-form__main #formSubscribe .form-inner .form-control::placeholder { color: var(--bs-white); } #module_subscribe .subscribe-form__main #formSubscribe .form-inner #btnSendSub { display: inline-block; padding: 0; width: 12rem; height: 4rem; line-height: 4rem; border-radius: 999px; position: absolute; top: 50%; right: 3px; z-index: 2; transform: translate(0, -50%); color: black; font-weight: 700; outline: none; box-shadow: none; border: none; overflow: hidden; background-color: var(--bs-white); } #module_subscribe .subscribe-form__main #formSubscribe .form-inner #btnSendSub:hover::before { background-color: var(--secondary-color); } #footer { position: relative; } .footer-map { height: 100px; } .footer-map iframe { width: 100% !important; height: 100% !important; } @media only screen and (min-width: 768px) { #module_subscribe .subscribe-form__main { top: -13rem; } #module_subscribe .subscribe-form__main .subscribe-form__wrapper .subscribe-form__intro .form-intro__title { font-size: var(--font-md); } } @media only screen and (min-width: 768px) { #module_subscribe .subscribe-form__main .subscribe-form__wrapper .subscribe-form__intro .form-intro__title { font-size: var(--font-lg); } } #module_article .page-article__breadcrumb { padding: var(--space-xs) var(--space-xxs); background-color: var(--bs-light); } #module_article .page-article__breadcrumb > ol { margin-bottom: 0; display: flex; flex-flow: row nowrap; justify-content: flex-start; align-items: stretch; } #module_article .page-article__breadcrumb > ol li { position: relative; display: block; } #module_article .page-article__breadcrumb > ol li:not(:last-of-type) > a { margin-right: var(--space-sm); } #module_article .page-article__breadcrumb > ol li:not(:last-of-type) > a::before, #module_article .page-article__breadcrumb > ol li:not(:last-of-type) > a::after { content: ""; position: absolute; top: 0; left: 100%; transition: inherit; } #module_article .page-article__breadcrumb > ol li:not(:last-of-type) > a::after { display: inline-block; content: "/"; padding-left: 1rem; color: var(--color); } #module_article .page-article__breadcrumb > ol li:not(:last-of-type) > a::before { left: calc(100% - 5px); top: 50%; display: inline-block; border: solid var(--color); border-width: 0 2px 2px 0; padding: 2px; transform: rotate(-45deg); transform: translateY(-50%) rotate(-45deg); } #module_article .page-article__breadcrumb > ol li > a { --color: #333; display: block; color: var(--color); padding: 0 var(--space-xs); position: relative; text-transform: capitalize; transition: 0.2s ease; } #module_article .page-article__breadcrumb > ol li > a:hover { --color: var(--color-main-2); } #module_article .page-article__menu > ul { position: relative; z-index: 999; margin-bottom: var(--space-md); } #module_article .page-article__menu > ul a { display: block; font-weight: 500; font-size: var(--font-sm); color: var(--text-dark); } #module_article .page-article__menu > ul a:hover { color: var(--color-accent-1); } #module_article .page-article__menu > ul > li { --bg-color: #eee; float: left; margin-left: auto; margin-right: 0px; position: relative; display: block; height: 3.5rem; padding-right: 1.5rem; width: auto; } #module_article .page-article__menu > ul > li::after { content: ""; display: block; width: 3rem; height: 100%; position: absolute; right: 7px; top: 0; background-color: var(--bg-color); border-radius: 4px 4px 0 0; transform: skew(20deg, 0); } #module_article .page-article__menu > ul > li > a { display: block; text-align: center; border-radius: 4px 4px 0 0; height: 3.5rem; line-height: 3.5rem; padding: 0 var(--space-xs); position: relative; z-index: 99; background-color: var(--bg-color); } #module_article .page-article__menu > ul .sub-list:hover, #module_article .page-article__menu > ul > li > a:hover + .sub-list { visibility: visible; opacity: 1; } #module_article .page-article__menu > ul .sub-list { display: flex; flex-flow: row nowrap; justify-content: flex-start; align-items: stretch; flex-flow: column nowrap; padding: var(--space-xs); position: absolute; top: calc(100% + 1rem); min-width: 16rem; background-color: var(--bg-color); border-radius: 3px; overflow: hidden; opacity: 0; visibility: hidden; box-shadow: var(--shadow-1); transition: 0.3s ease-in-out; } #module_article .page-article__menu > ul .sub-list > li > a { padding: var(--space-xs) 0 var(--space-xs) var(--space-sm); } #module_article .page-article__menu > ul .sub-list::before { content: ""; display: inline-block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; height: 1rem; width: 100%; top: -1rem; background-color: transparent; } #sidebar-right .sidebar-right__news { border-radius: 0.25rem; overflow: hidden; } .product-sidebar .sidebar-right__header, #sidebar-right .sidebar-right__news .sidebar-right__header { height: 4rem; background-color: #fff; box-shadow: inset 0 -3px 0 0 var(--primary-color); } .product-sidebar .sidebar-right__title, #sidebar-right .sidebar-right__news .sidebar-right__header .sidebar-right__title { display: inline-block; line-height: 4rem; margin-bottom: 0; color: #fff; font-size: 0 var(--font-sm); text-transform: capitalize; background-color: var(--primary-color); padding: 0 var(--space-sm); position: relative; font-weight: 700; } .product-sidebar .sidebar-right__title::before, #sidebar-right .sidebar-right__news .sidebar-right__header .sidebar-right__title::before { content: ""; display: inline-block; width: 40px; height: 40px; position: absolute; top: 0; left: 100%; background-image: url("/view/frontend/assets/images/decor-heading.png"); background-repeat: no-repeat; background-size: cover; background-position: center; z-index: 2; } #sidebar-right .sidebar-right__news a { font-weight: 700; font-size: var(--font-normal); color: var(--text-dark); } #sidebar-right .sidebar-right__news a:hover { color: var(--secondary-color); } #sidebar-right .sidebar-right__news .sidebar-right__body { list-style: none; margin-bottom: 0; padding-left: 0; padding-top: var(--space-default); padding-bottom: var(--space-default); } #sidebar-right .sidebar-right__news .sidebar-right__body > li { display: block; position: relative; } #sidebar-right .sidebar-right__news .sidebar-right__body > li > a { display: block; width: 100%; position: relative; padding: var(--space-xs) var(--space-sm); } #sidebar-right .sidebar-right__news .sidebar-right__body > li > a .icon-size { --size: 1.2rem; transform: rotate(90deg); } #sidebar-right .sidebar-right__news .sidebar-right__body > li.news:not(:last-child) { margin-bottom: var(--space-sm); } #sidebar-right .sidebar-right__news .sidebar-right__body > li.news > a { display: flex; flex-flow: row nowrap; justify-content: flex-start; align-items: stretch; min-height: 8rem; } #sidebar-right .sidebar-right__news .sidebar-right__body > li.news > a .news-media { flex-shrink: 0; width: 8rem; min-height: 100%; position: relative; border-radius: 3px; overflow: hidden; } #sidebar-right .sidebar-right__news .sidebar-right__body > li.news > a .news-media > img { width: 100%; height: auto; /* position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1;*/ } #sidebar-right .sidebar-right__news .sidebar-right__body > li.news > a .news-content { min-height: 100%; flex-grow: 1; padding-left: var(--space-xs); padding-bottom: var(--space-default); position: relative; } #sidebar-right .sidebar-right__news .sidebar-right__body > li.news > a .news-content .news-title { font-weight: 700; } #sidebar-right .sidebar-right__news .sidebar-right__body > li.news > a .news-content .news-date { font-size: 12px; font-weight: 400; color: var(--gray); margin-bottom: 3px; } .section-breadcrumb { margin-bottom: var(--space-sm); } .section-breadcrumb > ol { display: flex; flex-flow: row nowrap; justify-content: flex-start; align-items: center; margin-bottom: 0; } .section-breadcrumb > ol li > a { color: var(--text-color); } .section-breadcrumb > ol li > a:hover { color: var(--primary-color); } @media (max-width: 576px) { .page-article .section-breadcrumb > ol li:last-child, .page-product .section-breadcrumb > ol li:last-child, .page-category .section-breadcrumb > ol li:last-child { display: none; } } #module-breadcrumb .template-menu > ul { position: relative; z-index: 999; margin-bottom: 0; padding: var(--space-xs) var(--space-xxs); } #module-breadcrumb .template-menu > ul a { display: block; font-weight: 500; font-size: var(--font-normal); color: var(--text-dark); } #module-breadcrumb .template-menu > ul a:hover { color: var(--color-accent-1); } #module-breadcrumb .template-menu > ul > li { --bg-color: #FFFFFF; float: left; margin-left: auto; margin-right: 0; margin-bottom: 5px; display: block; height: 3.5rem; padding-right: 1.5rem; width: auto; position: relative; } #module-breadcrumb .template-menu > ul > li::after { content: ""; display: block; width: 3rem; height: 100%; position: absolute; right: 7px; top: 0; background-color: var(--bg-color); border-radius: 4px 4px 0 0; transform: skew(20deg, 0); } #module-breadcrumb .template-menu > ul > li > a { display: block; text-align: center; border-radius: 4px 4px 0 0; height: 3.5rem; line-height: 3.5rem; padding: 0 var(--space-xs); position: relative; z-index: 99; background-color: var(--bg-color); } #module-breadcrumb .template-menu > ul .sub-list:hover, #module-breadcrumb .template-menu > ul > li > a:hover + .sub-list { visibility: visible; opacity: 1; } #module-breadcrumb .template-menu > ul .sub-list { display: flex; flex-flow: row nowrap; justify-content: flex-start; align-items: stretch; flex-flow: column nowrap; padding: var(--space-xs); position: absolute; top: calc(100% + 1rem); z-index: 1; min-width: 16rem; background-color: var(--bg-color); border-radius: 3px; cursor: pointer; opacity: 0; visibility: hidden; box-shadow: var(--shadow-1); transition: 0.3s ease-in-out; } #module-breadcrumb .template-menu > ul .sub-list > li > a { padding: var(--space-xs) 0 var(--space-xs) var(--space-sm); } #module-breadcrumb .template-menu > ul .sub-list::before { content: ""; display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; height: 1rem; width: 100%; top: -1rem; background-color: transparent; } #module-cta { position: fixed; top: 50%; left: 0; z-index: 10; width: 70px; text-align: center; padding: 5px; border-radius: 5px; } #module-cta .module-cta-wrapper { display: flex; flex-direction: column; align-items: center; padding: var(--space-xs) var(--space-default); width: 100%; background-color: #fff; box-shadow: 2px 2px 13px #cacaca; } #module-cta .module-cta-wrapper > .link-cta { display: flex; flex-flow: column nowrap; justify-content: center; align-items: center; border-radius: 100%; position: relative; transition: 0.3s ease-in-out; box-sizing: content-box; } #module-cta .module-cta-wrapper > .link-cta:hover { transform: scale(1.1); } #module-cta .module-cta-wrapper > .link-cta > span:first-child { display: flex; flex-flow: row nowrap; justify-content: center; align-items: center; width: 3.6rem; height: 3.6rem; border-radius: 100%; } #module-cta .module-cta-wrapper > .link-cta.iphone { position: relative; } #module-cta .module-cta-wrapper > .link-cta.iphone > span:first-child { background-color: var(--color-accent-1); position: relative; } #module-cta .module-cta-wrapper > .link-cta.iphone > span:first-child img { display: block; width: 50%; height: 50%; filter: brightness(0) invert(1); } #module-cta .module-cta-wrapper > .link-cta > span:last-of-type { display: inline-block; width: 100%; align-content: center; font-size: var(--font-sm); font-weight: 500; color: #333333; text-align: center; } #module-cta .module-cta-wrapper > .link-cta::before { content: attr(data-title); display: block; width: auto; padding: var(--space-xxs) var(--space-xs); color: #FFFFFF; font-size: var(--font-sm); background-color: var(--color-main-2); position: absolute; top: 50%; right: calc(100% + 1rem); box-shadow: var(--shadow-1); transform: translateY(-50%); white-space: nowrap; border-radius: 3px; opacity: 0; visibility: hidden; transition: inherit; } #module-cta .module-cta-wrapper > .link-cta.top { display: flex; flex-flow: row nowrap; justify-content: center; align-items: center; background-color: #1A1A1A; /* position: absolute; bottom: calc(100% + 1rem); right: 1rem;*/ width: 3.6rem; height: 3.6rem; /*opacity: 0; visibility: hidden;*/ } #module-cta .module-cta-wrapper > .link-cta.top .icon-size { --color: #FFFFFF; width: 1.8rem !important; height: 1.8rem !important; } #module-cta .module-cta-wrapper > .link-cta.top.show { visibility: visible; opacity: 1; } #module-cta .module-cta-wrapper > .link-cta.shopping-cart > span:first-of-type { background-color: #FDC80A; position: relative; overflow: unset; } #module-cta .module-cta-wrapper > .link-cta.shopping-cart > span:first-of-type::after { content: attr(data-number); position: absolute; top: 0; left: 3rem; display: inline-block; width: 2rem; height: 2rem; border-radius: 100%; line-height: 2rem; background-color: rgba(0, 0, 0, 0.8); color: #FFFFFF; font-size: 1rem; text-align: center; transform: translateX(-50%); } #module-cta .module-cta-wrapper > .link-cta.shopping-cart > span:first-of-type .icon-size { --size: 2.4rem; --color: #FFFFFF; } @media only screen and (min-width: 768px) { #module-cta .module-cta-wrapper { flex-flow: column nowrap; align-items: center; padding: 0; } #module-cta .module-cta-wrapper > .link-cta:not(:last-of-type) { margin-bottom: var(--space-default); } #module-cta .module-cta-wrapper > .link-cta:not(.link-cta.top) > span:last-child { display: none; } #module-cta .module-cta-wrapper > .link-cta.top { position: relative; bottom: initial; right: initial; } #module-cta .module-cta-wrapper > .link-cta.iphone::after { content: ""; display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; border-radius: 100%; } #module-cta .module-cta-wrapper > .link-cta:hover::before { visibility: visible; opacity: 1; } } .row.row-10 { margin-left: -10px; margin-right: -10px; } .row.row-10 > [class*=col] { padding-left: 10px; padding-right: 10px; } .row.row-col-10 { margin: 0 -10px; } .row.row-col-10 > [class*=col] { padding: 10px; } .row.row-5 { margin-left: -5px; margin-right: -5px; } .row.row-5 > [class*=col] { padding-left: 5px; padding-right: 5px; } .row.row-25 { margin-left: -2.5px; margin-right: -2.5px; } .row.row-25 > [class*=col] { padding-left: 2.5px; padding-right: 2.5px; } .link-float { position: relative; z-index: 4; } .image-cover { position: absolute; display: block; content: ""; top: 0; left: 0; width: 100%; height: 100%; background-size: cover; background-repeat: no-repeat; background-position: center; transition: 0.2s all ease; } .owl-carousel .owl-item .owl-lazy.image-cover { max-height: 100% !important; } .text-main { color: var(--color-main-1) !important; } .bg-main-1 { background-color: var(--color-main-1) !important; } .bg-main-2 { background-color: var(--color-main-2) !important; } .color-red { color: #CE3333; } .color-green { color: #42C677; } .bg-overlay { width: 100%; height: 100vh; position: fixed; top: 60px; left: 0; background: rgba(0, 0, 0, 0.5); z-index: 1039; display: none; } .bg-overlay.active { display: block; } #loader-wrapper { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 1001; background: #FFFFFF; -webkit-transition: all 0.4s ease-out; -o-transition: all 0.4s ease-out; transition: all 0.4s ease-out; } #loader-wrapper #loader { display: block; position: relative; left: 50%; top: 50%; width: 80px; height: 80px; margin: -40px 0 0 -40px; border-radius: 50%; border: 5px solid transparent; border-top-color: var(--color-main-1); -webkit-animation: spin 2s linear infinite; /* Chrome, Opera 15+, Safari 5+ */ animation: spin 2s linear infinite; /* Chrome, Firefox 16+, IE 10+, Opera */ z-index: 1001; } #loader-wrapper #loader:before { content: ""; position: absolute; top: 5px; left: 5px; right: 5px; bottom: 5px; border-radius: 50%; border: 5px solid transparent; border-top-color: var(--color-main-1); -webkit-animation: spin 3s linear infinite; /* Chrome, Opera 15+, Safari 5+ */ animation: spin 3s linear infinite; /* Chrome, Firefox 16+, IE 10+, Opera */ } #loader-wrapper #loader:after { content: ""; position: absolute; top: 15px; left: 15px; right: 15px; bottom: 15px; border-radius: 50%; border: 5px solid transparent; border-top-color: var(--color-main-1); -webkit-animation: spin 1.5s linear infinite; /* Chrome, Opera 15+, Safari 5+ */ animation: spin 1.5s linear infinite; /* Chrome, Firefox 16+, IE 10+, Opera */ } #loader-wrapper .loader-section { position: fixed; top: 0; width: 51%; height: 100%; background: #FFFFFF; z-index: 1000; } #loader-wrapper .loader-section.section-left { left: 0; display: none; background: transparent; transition: all 0.9s ease-out; } #loader-wrapper .loader-section.section-right { right: 0; display: none; background: transparent; transition: all 0.9s ease-out; } .loaded #loader-wrapper { background: transparent; visibility: hidden; } .loaded #loader-wrapper #loader { opacity: 0; } @-webkit-keyframes spin { 0% { -webkit-transform: rotate(0deg); /* Chrome, Opera 15+, Safari 3.1+ */ -ms-transform: rotate(0deg); /* IE 9 */ transform: rotate(0deg); /* Firefox 16+, IE 10+, Opera */ } 100% { -webkit-transform: rotate(360deg); /* Chrome, Opera 15+, Safari 3.1+ */ -ms-transform: rotate(360deg); /* IE 9 */ transform: rotate(360deg); /* Firefox 16+, IE 10+, Opera */ } } @keyframes spin { 0% { -webkit-transform: rotate(0deg); /* Chrome, Opera 15+, Safari 3.1+ */ -ms-transform: rotate(0deg); /* IE 9 */ transform: rotate(0deg); /* Firefox 16+, IE 10+, Opera */ } 100% { -webkit-transform: rotate(360deg); /* Chrome, Opera 15+, Safari 3.1+ */ -ms-transform: rotate(360deg); /* IE 9 */ transform: rotate(360deg); /* Firefox 16+, IE 10+, Opera */ } } .toast-container { z-index: 1041; } .template-modal .modal-header { background: var(--color-main-2); color: #FFFFFF; padding: 8px 1rem; } .template-modal .modal-header .modal-title { font-size: 1.4em; font-weight: 600; } .template-modal .modal-header > a { position: absolute; left: 10px; top: 50%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -o-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); opacity: 0.8; } .page-contact_map iframe { width: 100%; vertical-align: middle; } .page-contact_main { padding-top: 40px; padding-bottom: 40px; } .page-contact_main .main-right { padding: 0 30px; } .page-contact_main .main-left { background-color: #FFFFFF; padding: 30px 30px; position: relative; border: 1px solid #CECECE; overflow: hidden; height: 100%; display: flex; flex-direction: column; justify-content: center; } .page-contact_main .main-left:before { content: ""; display: block; position: absolute; background-color: #F4F5F9; width: 250px; height: 250px; border-radius: 50%; top: -150px; right: -150px; z-index: 1; } .page-contact_main .main-left:after { content: ""; display: block; position: absolute; background-color: #F4F5F9; height: 300px; width: 300px; border-radius: 50%; z-index: 1; bottom: -250px; right: auto; left: -160px; opacity: 0.7; } .page-contact_main .main-left_row > p { font-size: 14px; font-weight: bold; color: #444444; } .page-contact_main .main-left_row > p:last-of-type { margin-bottom: 0; } .page-contact_main .main-left_row > a { display: inline-block; margin-top: 0.3em; color: #242424; font-size: 14px; position: relative; z-index: 2; } @media screen and (max-width: 768px) { .page-contact_main .main-left { padding: 25px; } .page-contact_main .main-left:after { bottom: -260px; left: -180px; } } .sidebar .sidebar-header { background-color: var(--color-main-1); color: #FFFFFF; font-weight: bold; font-size: 1.05em; padding: 0.75rem; } .sidebar .sidebar-body .sidebar-list { list-style: none; padding: 0; margin: 0; } .sidebar .sidebar-body .sidebar-list li:not(:last-child) { border-bottom: 1px solid #EEEEEE; } .sidebar .sidebar-body .sidebar-list li a { display: block; padding: 0.5rem 1rem; color: #000000; } .sidebar .sidebar-body .sidebar-list li:hover a { background: #F8F9FA; } .article-item-image { overflow: hidden; margin-bottom: 0.5rem; } .article-item-image:hover img { -webkit-transform: scale(1.1); transform: scale(1.1); } .article-item-image img { width: 100%; -webkit-transition: 0.3s ease; transition: 0.3s ease; } .article-item-title { overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; height: 45px; color: #000000; font-size: 19px; font-weight: bold; margin-bottom: 0.5rem; -webkit-transition: 0.3s ease; transition: 0.3s ease; } .article-item-title:hover { color: #D7202C; } .article-item-short { overflow: hidden; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; height: 68px; color: #000000; margin-bottom: 0.5rem; } .article-item-day { display: inline-block; padding: 0.25rem 1rem; font-size: 13px; font-weight: bold; background-color: #D7202C; color: #FFFFFF; border-radius: 3rem; } .page-article img { max-width: 100%; height: auto; } .n-item { border-bottom: 1px solid var(--color-border); border-right: 1px solid var(--color-border); } .n-item:nth-child(4n) { border-right: 0; } .col-multi_small { width: 225px; flex: 0 0 auto; } .col-multi_big { width: 990px; flex: 0 0 auto; } @media screen and (min-width: 1630px) { .col-multi_small { width: 300px; } .col-multi_big { width: 1345px; } } .filter .dropdown-menu { border-radius: 0; border: 0; box-shadow: 0 0 3px rgba(0, 0, 0, 0.2); padding: 0; margin: 0; } .pagination { margin-left: calc(-1 * var(--space-sm)); } .pagination .page-item:not(:first-child) { margin-left: var(--space-sm); } .pagination .page-item .page-link:hover, .pagination .page-item.page-active .page-link { color: white; background-color: var(--primary-color); } .pagination .page-item .page-link { padding: 0; min-width: 3.5rem; height: 3.5rem; line-height: 3.5rem; border-color: #ced4da; color: var(--text-color); font-size: 12px; background-color: white; border-radius: 50%; text-align: center; } .pagination .page-item .page-link:focus { box-shadow: none; } .sidebar .sidebar-list ul li { padding: var(--space-xxs) var(--space-xs); } .sidebar .sidebar-item .sidebar-item__title { font-weight: 700; font-size: var(--font-md); padding: var(--space-xs); margin-bottom: 0; text-transform: capitalize; } .sidebar .sidebar-list ul li a { overflow: hidden; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; display: inline-block; color: var(--text-dark); } .sidebar .sidebar-list ul li:hover a { color: var(--color-main-1); } .sidebar .sidebar-list.list-sort li:not(:last-of-type) { border-bottom: 1px dotted #CECECE; } .sidebar .sidebar-list.list-sort li.active a { color: var(--color-main-1); } .sidebar .sidebar-list.list-sort li a { display: block; color: #343A40; font-size: var(--font-normal); padding: 8px 30px 8px 0; -webkit-transition: 0.2s all ease; -o-transition: 0.2s all ease; transition: 0.2s all ease; position: relative; } .sidebar .sidebar-list.list-sort li a > span { display: block; border-radius: 50%; height: 18px; width: 18px; background-color: #FFFFFF; border: 1px solid #A9A9A9; position: absolute; top: 50%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -o-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); -webkit-transition: 0.2s all ease; -o-transition: 0.2s all ease; transition: 0.2s all ease; right: 8px; left: unset; } .sidebar .sidebar-list.list-sort li a > span:after { content: ""; display: block; position: absolute; top: 3px; right: 3px; width: 10px; height: 10px; opacity: 0; visibility: hidden; -webkit-transform: scale(0); -moz-transform: scale(0); -o-transform: scale(0); -ms-transform: scale(0); transform: scale(0); -webkit-transition: 0.2s all ease; -o-transition: 0.2s all ease; transition: 0.2s all ease; background-color: var(--color-main-1); border-radius: 50%; } .sidebar .sidebar-list.list-sort li.active a > span:after { -webkit-transform: scale(1); -moz-transform: scale(1); -o-transform: scale(1); -ms-transform: scale(1); transform: scale(1); opacity: 1; visibility: visible; } .sidebar .sidebar-list.list-sort li.active a { color: var(--color-main-1); } .sidebar .sidebar-list.list-sort li.active a > span { border-color: var(--color-main-1); } .page-product .main .preview-images img { width: 100%; } .preview-images-nav .swiper-slide { max-width: 10rem; border: 1px solid transparent; border-radius: 4px; padding: 5px; cursor: pointer; } .preview-images-nav .swiper-slide.swiper-slide-thumb-active { border-color: var(--primary-color); } .page-product .main .meta li + li { position: relative; padding-left: 15px; margin-left: 15px; } .page-product .main .meta li + li:before { position: absolute; content: ""; width: 1px; height: 10px; background: var(--text-gray-50); left: 0; top: calc(50% + 2px); transform: translateY(-50%); } .page-product .main .description img { max-width: 100%; height: auto; } .list-button { margin: 0 -5px; } .page_checkout .checkout-inner { overflow: hidden; box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075) !important; border-radius: 0.25rem; height: 5rem; font-size: var(--font-md); background: #FFFFFF; text-transform: capitalize; margin: 1rem 0; color: #666666; padding: 0 var(--space-default); } .page_checkout .checkout-inner.checkout-header { display: flex; align-items: center; justify-content: stretch; } @media screen and (max-width: 991px) { .page_checkout .checkout-inner.checkout-header { display: none; } } .page_checkout .checkout-inner > [class*=checkout--] { color: #222222; font-weight: 700; } .page_checkout .checkout-inner .checkout--product { width: 25%; } .page_checkout .checkout-inner .checkout--unitprice { width: 25%; text-align: center; } .page_checkout .checkout-inner .checkout--quantity { width: 20%; text-align: center; } .page_checkout .checkout-inner .checkout--totalprice { width: 15%; text-align: center; } .page_checkout .checkout-inner .checkout--actions { width: 15%; text-align: center; } .page_checkout .checkout-main { box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075) !important; border-radius: 0.25rem; overflow: hidden; background: #FFFFFF; margin-bottom: 1rem; } .page_checkout .checkout-main .checkout-item { margin: 1rem 0; border-bottom: 1px solid #F1F1F1; } .page_checkout .checkout-main .checkout-item:first-of-type { margin-top: 0; } .page_checkout .checkout-main .checkout-item:last-of-type { margin-bottom: 0; border-bottom: 0; } .page_checkout .checkout-main .checkout-item .checkout-item-content { display: flex; align-items: center; justify-content: stretch; text-decoration: none; color: #222222; border: 0; padding: var(--space-md); position: relative; } .page_checkout .checkout-main .checkout-item .checkout-item-content .checkout-item--product { width: 25%; box-sizing: border-box; position: relative; display: flex; align-items: flex-start; justify-content: stretch; } .page_checkout .checkout-main .checkout-item .checkout-item-content .checkout-item--product > a > .checkout-item--thumb { background-position: 50%; background-size: contain; background-repeat: no-repeat; min-width: 10rem; min-height: 10rem; } .page_checkout .checkout-main .checkout-item .checkout-item-content .checkout-item--product > .checkout-item--title { display: inline-block; width: 100%; overflow: hidden; padding: var(--space-xs); } .page_checkout .checkout-main .checkout-item .checkout-item-content .checkout-item--product > .checkout-item--title > * { font-size: var(--font-md); color: #333333; font-weight: 500; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .page_checkout .checkout-main .checkout-item .checkout-item-content .checkout-item--product > .checkout-item--title > a { overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; color: #333333; font-weight: 500; transition: 0.3s all linear; } .page_checkout .checkout-main .checkout-item .checkout-item-content .checkout-item--product > .checkout-item--title span { font-weight: 500; color: #424242; } .page_checkout .checkout-main .checkout-item .checkout-item-content .checkout-item--product > .checkout-item--title:hover > a { color: #0056B3; } .page_checkout .checkout-main .checkout-item .checkout-item-content .checkout-item--unitprice { display: flex; align-items: center; justify-content: center; width: 25%; font-size: var(--font-md); font-weight: 700; } .page_checkout .checkout-main .checkout-item .checkout-item-content .checkout-item--unitprice .unitprice-old { color: #999999; text-decoration: line-through; padding-left: var(--space-xs); font-size: var(--font-normal); font-weight: 500; } .page_checkout .checkout-main .checkout-item .checkout-item-content .checkout-item--quantity { width: 20%; } .page_checkout .checkout-main .checkout-item .checkout-item-content .checkout-item--quantity .quantity-content { display: flex; align-items: center; justify-content: center; width: 100%; } .page_checkout .checkout-main .checkout-item .checkout-item-content .checkout-item--quantity .quantity-content .input-changeQuantity { outline: none; font-size: var(--font-md); font-weight: 500; border: 1px solid rgba(0, 0, 0, 0.19); background: transparent; color: rgba(0, 0, 0, 0.8); text-align: center; cursor: text; width: 70px; height: 36px; line-height: 36px; border-left: 0; border-right: 0; transition: all 0.1s cubic-bezier(0.4, 0, 0.6, 1); } .page_checkout .checkout-main .checkout-item .checkout-item-content .checkout-item--quantity .quantity-content .input-changeQuantity:disabled { background: #F5F6F6; cursor: not-allowed; } .page_checkout .checkout-main .checkout-item .checkout-item-content .checkout-item--quantity .quantity-content .input-changeQuantity:focus { border: 1px solid #618D39; } .page_checkout .checkout-main .checkout-item .checkout-item-content .checkout-item--quantity .quantity-content .button-changeQuantity { display: flex; flex-flow: row nowrap; justify-content: center; align-items: center; outline: none; cursor: pointer; border: 1px solid rgba(0, 0, 0, 0.19); border-radius: 3px; background: transparent; color: rgba(0, 0, 0, 0.6); width: 36px; height: 36px; text-align: center; font-size: 1rem; color: #6c757d; transition: all 0.1s cubic-bezier(0.4, 0, 0.6, 1); } .page_checkout .checkout-main .checkout-item .checkout-item-content .checkout-item--quantity .quantity-content .button-changeQuantity:first-of-type { border-top-right-radius: 0; border-bottom-right-radius: 0; } .page_checkout .checkout-main .checkout-item .checkout-item-content .checkout-item--quantity .quantity-content .button-changeQuantity:last-of-type { border-top-left-radius: 0; border-bottom-left-radius: 0; } .page_checkout .checkout-main .checkout-item .checkout-item-content .checkout-item--quantity .quantity-content .button-changeQuantity:disabled { background: #F5F6F6; cursor: not-allowed; } .page_checkout .checkout-main .checkout-item .checkout-item-content .checkout-item--quantity .quantity-content .button-changeQuantity:focus { border-color: #618D39; } .page_checkout .checkout-main .checkout-item .checkout-item-content .checkout-item--totalprice { width: 15%; font-weight: 700; text-align: center; color: var(--red); font-size: var(--font-md); } .page_checkout .checkout-main .checkout-item .checkout-item-content .checkout-item--actions { display: flex; align-items: center; justify-content: center; width: 15%; text-transform: capitalize; } .page_checkout .checkout-main .checkout-item .checkout-item-content .checkout-item--actions button { cursor: pointer; outline: none !important; box-shadow: none !important; transition: 0.2s all ease; font-size: var(--font-sm); padding: var(--space-xs); } @media screen and (max-width: 991px) { .page_checkout .checkout-main .checkout-item .checkout-item-content { flex-wrap: wrap; padding: var(--space-default); } .page_checkout .checkout-main .checkout-item .checkout-item-content .checkout-item--product { width: calc(100% - 55px); } .page_checkout .checkout-main .checkout-item .checkout-item-content .checkout-item--unitprice { width: 100%; justify-content: flex-end; padding: var(--space-sm) 0; color: #545454; } .page_checkout .checkout-main .checkout-item .checkout-item-content .checkout-item--quantity { width: 50%; justify-content: flex-start; align-items: flex-start; margin-bottom: var(--space-sm); } .page_checkout .checkout-main .checkout-item .checkout-item-content .checkout-item--quantity { width: 50%; justify-content: flex-end; } .page_checkout .checkout-main .checkout-item .checkout-item-content .checkout-item--quantity .quantity-content .input-changeQuantity { width: 70px; } .page_checkout .checkout-main .checkout-item .checkout-item-content .checkout-item--totalprice { width: 50%; text-align: right; margin-bottom: var(--space-sm); } .page_checkout .checkout-main .checkout-item .checkout-item-content .checkout-item--actions { position: absolute; top: var(--space-md); right: var(--space-md); z-index: 10; } } .page_checkout .checkout-footer { display: flex; align-items: center; justify-content: space-between; box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075) !important; border-radius: 0.25rem; overflow: hidden; font-size: 1rem; background: #FFFFFF; text-transform: capitalize; margin-bottom: 1rem; color: #565656; padding: var(--space-default) var(--space-md); } .page_checkout .checkout-footer .checkout-back { width: 20%; } .page_checkout .checkout-footer .checkout-back > a i { margin-right: 6px; } .page_checkout .checkout-footer .checkout-back > a:hover { background: #848F99; } .page_checkout .checkout-footer .checkout-next { width: 25%; display: flex; align-items: center; justify-content: flex-end; } .page_checkout .checkout-footer .checkout-next > a { outline: none; cursor: pointer; } .page_checkout .checkout-footer .checkout-total { width: 55%; display: flex; align-items: center; justify-content: flex-end; } .page_checkout .checkout-footer .checkout-total > p { margin-bottom: 0; color: #111111; font-size: var(--font-normal); padding-right: var(--space-sm); } .page_checkout .checkout-footer .checkout-total > #totalCheckout { display: inline-block; font-size: var(--font-lg); font-weight: 700; color: var(--red); padding: var(--space-xs) 0; } @media screen and (max-width: 991px) { .page_checkout .checkout-footer { flex-direction: column; justify-content: center; } .page_checkout .checkout-footer .checkout-back { display: none; } .page_checkout .checkout-footer > div { width: 100% !important; margin-bottom: 0.4em; } .page_checkout .checkout-footer .checkout-total { display: block; text-align: center; } .page_checkout .checkout-footer .checkout-next { justify-content: center; } .page_checkout .checkout-footer .checkout-next a { margin-left: 0; } } .page_checkout ._empty { border: 1px solid #C9C9C9; } .page-payment .payment-inner { overflow: hidden; background: #FFFFFF; padding: var(--space-default); border-radius: 0.25rem; box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.08) !important; } .page-payment .payment-inner .payment-item .payment-title p { color: #444444; font-size: var(--font-md); margin-bottom: var(--font-sm); text-transform: capitalize; font-weight: 700; } .page-payment .payment-inner .payment-item .form-group input { outline: none !important; box-shadow: none !important; color: #333333; height: 42px; line-height: 42px; font-size: 1rem; border-radius: 4px; } .page-payment .payment-inner .payment-item .form-group input:focus { color: #222222; } .page-payment .payment-inner .payment-item .form-group textarea { outline: none !important; box-shadow: none !important; color: #333333; font-size: 1rem; } .page-payment .payment-inner .payment-item .form-group textarea:focus { color: #222222; } .page-payment .payment-inner .payment-item .payment-transport { padding: 0 15px; border: 1px solid #CED4DA; border-radius: 4px; height: 50px; line-height: 50px; margin-bottom: 2rem; font-size: 1.05em; } .page-payment .payment-inner .payment-item .payment-transport label { display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; justify-content: space-between; } .page-payment .payment-inner .payment-item .payment-transport label .label-checked { position: relative; padding-left: 30px; } .page-payment .payment-inner .payment-item .payment-transport label .label-checked:before { left: 0; position: absolute; top: 50%; transform: translateY(-50%); content: ""; background: #0D4972; height: 20px; width: 20px; border-radius: 100%; } .page-payment .payment-inner .payment-item .payment-transport label .label-checked:after { left: 8px; position: absolute; top: 50%; transform: translateY(-50%); content: ""; background: #FFFFFF; height: 4px; width: 4px; border-radius: 100%; } .page-payment .payment-inner .payment-item .payment-thanhtoan { border: 1px solid #CED4DA; border-radius: 4px; margin-bottom: 2rem; } .page-payment .payment-inner .payment-item .payment-thanhtoan .payment-thanhtoan-bottom { padding: 15px; background: #F5F5F5; font-size: 0.9em; border-top: 1px solid #CECECE; } .page-payment .payment-inner .payment-item .payment-list { margin-bottom: 1.5rem; } .page-payment .payment-inner .payment-item .payment-list .list-product-payment ul { padding: 10px; border: 1px solid #D9D9D9; border-radius: 4px; max-height: 30rem; overflow-y: scroll; } .page-payment .payment-inner .payment-item .payment-list .list-product-payment ul::-webkit-scrollbar { width: 5px; } .page-payment .payment-inner .payment-item .payment-list .list-product-payment ul::-webkit-scrollbar-thumb { background: #888888; border-radius: 10px; } .page-payment .payment-inner .payment-item .payment-list .list-product-payment ul::-webkit-scrollbar-thumb:hover { background: #555555; } .page-payment .payment-inner .payment-item .payment-list .list-product-payment ul li { display: flex; align-items: flex-start; margin-bottom: 0.8rem; } .page-payment .payment-inner .payment-item .payment-list .list-product-payment ul li .product-payment-image { width: 20%; position: relative; } .page-payment .payment-inner .payment-item .payment-list .list-product-payment ul li .product-payment-image img { width: 100%; } .page-payment .payment-inner .payment-item .payment-list .list-product-payment ul li .product-payment-image .product-payment-amout { display: inline-block; vertical-align: middle; line-height: 16px; font-size: 1rem; color: #fff; text-align: center; position: absolute; top: 0; left: 0; min-width: 16px; height: 16px; background: var(--red); border-radius: 100%; } .page-payment .payment-inner .payment-item .payment-list .list-product-payment ul li .product-payment-content { width: 80%; padding-left: 15px; display: flex; align-items: flex-start; justify-content: space-between; } .page-payment .payment-inner .payment-item .payment-list .list-product-payment ul li .product-payment-content .product-payment-info { width: 60%; padding-right: 10px; } .page-payment .payment-inner .payment-item .payment-list .list-product-payment ul li .product-payment-content .product-payment-info .product-name { font-size: var(--font-normal); color: #000000; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; } .page-payment .payment-inner .payment-item .payment-list .list-product-payment ul li .product-payment-content .product-payment-info small { color: #666666; } .page-payment .payment-inner .payment-item .payment-list .list-product-payment ul li .product-payment-content .product-payment-price { width: 40%; text-align: right; font-weight: 700; font-size: var(--font-md); color: var(--red); } @media screen and (max-width: 991px) { .page-payment .payment-inner .payment-item .payment-list .list-product-payment ul li { padding: 0; flex-wrap: wrap; } .page-payment .payment-inner .payment-item .payment-list .list-product-payment ul li .product-payment-content { flex-direction: column; } .page-payment .payment-inner .payment-item .payment-list .list-product-payment ul li .product-payment-content .product-payment-info { width: 100%; padding-right: 0; } .page-payment .payment-inner .payment-item .payment-list .list-product-payment ul li .product-payment-content .product-payment-price { margin-top: 0.3em; width: 100%; text-align: left; } } .page-payment .payment-inner .payment-item .payment-total-top { padding: var(--space-default) 0; border-top: 1px solid #D1D1D1; } .page-payment .payment-inner .payment-item .payment-total-top .total-flex { display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; justify-content: space-between; font-size: var(--font-normal); } .page-payment .payment-inner .payment-item .payment-total-top .total-flex p { margin-bottom: 0.7rem; } .page-payment .payment-inner .payment-item .payment-total-top .total-flex p:first-of-type { text-transform: capitalize; font-size: var(--font-normal); font-weight: 500; color: #454545; margin-bottom: 0; } .page-payment .payment-inner .payment-item .payment-total-top .total-flex p:last-of-type { color: #555555; font-weight: 700; font-size: var(--font-md); margin-bottom: 0; } .page-payment .payment-inner .payment-item .payment-total-bottom { padding: var(--space-default) 0; border-top: 1px solid #D1D1D1; } .page-payment .payment-inner .payment-item .payment-total-bottom .total-flex { display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; justify-content: space-between; } .page-payment .payment-inner .payment-item .payment-total-bottom .total-flex p { margin-bottom: 0.7rem; font-weight: 500; } .page-payment .payment-inner .payment-item .payment-total-bottom .total-flex p:last-of-type { font-size: var(--font-lg); font-weight: 700; color: var(--red); } .page-payment .payment-inner .payment-item .payment-total-bottom .total-button { margin-top: 1rem; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; justify-content: space-between; } .page-payment .payment-inner .payment-item .payment-total-bottom .total-button .btn-payment { height: 40px; line-height: 40px; transition: 0.3s all ease; outline: none !important; box-shadow: none !important; border-radius: 4px; border: 0; color: #FFFFFF; background: #007BFF; font-size: 0.9rem; padding: 0 30px; } .page-payment .payment-inner .payment-item .payment-total-bottom .total-button .btn-payment:hover { background: #0068D7; cursor: pointer; } .page-payment .payment-inner .button-mobile { text-align: center; } .page-payment .payment-inner .button-mobile button, .page-payment .payment-inner .button-mobile a { width: 100%; margin-bottom: 10px; } ._empty .__main { box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.05); border-radius: 0.125rem; overflow: hidden; background: #FFFFFF; padding: var(--space-md); text-align: center; } ._empty .__main .___icon { width: 140px; height: 140px; display: block; margin: 1.5rem auto; background-image: url("/public/upload/images/icons/package.svg"); background-position: center; background-size: cover; } ._empty .__main .___icon > * { display: none; } ._empty .__main .___title { font-size: var(--font-lg); font-weight: 700; text-transform: capitalize; color: #242F51; max-width: 60%; margin: 0 auto 0.6rem; } ._empty .__main .___desc { font-size: var(--font-normal); color: #2C2121; max-width: 60%; margin: 0 auto 0.4rem; } ._empty .__main .___desc a { color: #0D95E8; } ._empty .__main .___actions { margin: 2rem auto; } ._empty .__main .___actions a { outline: none !important; box-shadow: none !important; } @media screen and (max-width: 768px) { ._empty .__main { padding: 0; } ._empty .__main .___title { max-width: 540px; } ._empty .__main .___desc { max-width: 540px; } } @media screen and (max-width: 991px) { .template-banner .banner-col { width: 100%; margin-left: 0; } .header-bottom_logo .header-bottom_hamburger { position: relative; height: 60px; width: 40px; } .header-bottom_logo .header-bottom_hamburger .hamburger { position: absolute; top: 50%; left: 0; display: block; width: 20px; height: 14px; cursor: pointer; -ms-transform: translate(0, -40%); transform: translate(0, -40%); z-index: 99999; } .header-bottom_logo .header-bottom_hamburger .hamburger:before, .header-bottom_logo .header-bottom_hamburger .hamburger:after, .header-bottom_logo .header-bottom_hamburger .hamburger span { content: ""; position: absolute; left: 0; height: 2px; width: 20px; border-radius: 1px; background: #FFFFFF; transition: all 0.4s; } .header-bottom_logo .header-bottom_hamburger .hamburger span { position: absolute; top: 50%; margin-top: -1px; } .header-bottom_logo .header-bottom_hamburger .hamburger:before { top: 0; } .header-bottom_logo .header-bottom_hamburger .hamburger:after { bottom: 0; } header .header-bottom .header-bottom_logo img { max-height: 50px; } header .header-bottom .header-bottom_logo .badge-cart { position: absolute; top: -10px; right: -10px; min-width: 18px; min-height: 18px; border-radius: 4px; background: #2C80FC; color: #FFFFFF; display: flex; align-items: center; justify-content: center; font-size: 0.6em; font-weight: 300; box-shadow: 0 0 4px rgba(0, 0, 0, 0.3); } header .header-bottom { padding: 0; background-color: var(--color-main-1); } header .header-bottom .header-bottom_form .form-group input { height: 40px; line-height: 40px; } header .header-bottom .header-bottom_form .form-group button { width: 80px; height: 36px; line-height: 36px; } } @media screen and (max-width: 768px) { .template-banner .banner-child { margin: 0 -2.5px -2.5px; } .template-banner .banner-child.banner-child_footer { flex-wrap: wrap; } .template-banner .banner-child.banner-child_footer .banner-item { width: 50%; } .template-header__border { flex-wrap: wrap; border-top-left-radius: 0.2rem; border-top-right-radius: 0.2rem; } .template-header__border > * { width: 100%; } .template-header__border h6 { font-size: 1.3em; margin-right: 0; line-height: 45px; border-radius: 0.2rem; } .template-header__border h6::after { display: none; } .template-header__border ul { width: 100%; overflow-x: auto; padding: 0 15px; } .template-header__border ul li a { line-height: 34px; } .template-header__border > a { display: none !important; } .template-card__product .card-body .card-title { font-size: 1em; line-height: 40px; } .template-card__product .card-body .card-meta ul li { font-size: 0.9em; } .template-card__product .card-body .card-price .price { font-size: 1.1em; } .template-card__product .card-body .card-price .discount { font-size: 0.95em; } .template-card__product .card-body .card-price .discount span { font-size: 0.9em; } .page-contact_main .main-left .heading-block { position: relative; z-index: 2; } .page-contact_main .main-left .heading-block h4 { font-size: 1.25em; } .col-multi_small { margin-top: 30px; width: 100%; } } @media screen and (max-width: 600px) { .subcribe-footer { padding-bottom: 1.5rem; } .subcribe-footer .subcribe-footer-main { padding: 1rem; margin: 0; } .subcribe-inner { display: block !important; margin-bottom: 0.5rem; } .subcribe-footer .subcribe-footer-main .subcribe-inner .subcribe-icon { width: 100%; text-align: center; } .subcribe-footer .subcribe-footer-main .subcribe-inner .subcribe-text { width: 100%; text-align: center; padding-left: 0; } } .page-contact .heading-block h4 { font-size: 16px; } .page-contact #contact-form textarea { height: unset; } #contact-form .form-control:not(textarea) { padding: 0 10px 0 50px; height: 35px; } #contact-form .form-control::placeholder { color: #c4c6c9; } #contact-form textarea.form-control { resize: none; height: 150px; } #contact-form label { --color: #c4c6c9; display: inline-flex; justify-content: center; align-items: center; width: 35px; height: 35px; color: var(--color); font-size: 16px; transition: color 0.15s ease; } #contact-form label::before { content: ""; display: inline-block; width: 1px; height: 80%; background-color: #c4c6c9; position: absolute; top: 50%; right: -1px; transform: translateY(-50%); } #contact-form .form-control { font-size: 14px; } #contact-form .form-control:focus ~ label { --color: rgb(134, 183, 254); } #contact-form.form-control.is-valid ~ label, #contact-form.was-validated .form-control:valid ~ label { --color: #198754; } #contact-form.form-control.is-invalid ~ label, #contact-form.was-validated .form-control:invalid ~ label { --color: #dc3545; } #contact-form .form-floating > .form-control:focus ~ label, #contact-form .form-floating > .form-control:not(:placeholder-shown) ~ label, #contact-form .form-floating > .form-select ~ label { opacity: 1; transform: scale(1) translateY(0) translateX(0); } #contact-form textarea.form-control { padding: 1.5rem !important; } @media only screen and (max-width: 768px) { .page-contact_main .main-right, .page-contact_main .main-left { padding-left: 12.5px; padding-right: 12.5px; } .page-contact_main .main-right { margin-top: 15px; } } /*=================================== update code new ================================*/ .overflow-hidden { overflow: hidden; } .position-relative { position: relative; } .transition { transition: all 0.35s ease-in; } .slider-hero__item img { border-radius: 5px; } .swiper-banner__bottom .image-item::before { display: block; content: ""; padding-top: calc(9 / 16 * 100%); } .swiper-banner__bottom .image-item > img { width: 100%; height: 100%; position: absolute; top: 0; left: 0; object-fit: cover; transition: all 0.35s ease-in; border-radius: 5px; } .swiper-banner__bottom .image-item .icon-youtube { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); display: flex; align-items: center; justify-content: center; color: var(--bs-white); background-color: red; border-radius: 8px; padding: 10px 18px; font-size: 10px; } .card-product { border: 1px solid #F4F4F5; border-radius: 5px; overflow: hidden; padding: 10px; } .card-product:hover { border: 1px solid var(--primary-color); } .card-product:hover .card-product__image img { transform: scale(1.1); } .card-product .template-product__title:hover { color: var(--primary-color) !important; } /*=================================== modal-contact =====================================*/ .modal-contact-product .modal-content { padding: 20px; border-radius: 10px; overflow: hidden; } .modal-contact__close { width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background-color: var(--bs-red); color: var(--bs-white); border: 1px solid transparent; margin-bottom: 8px; transition: all 0.35s ease-in; } .modal-contact__close:hover { opacity: 0.8; } .btn-custom { display: flex; align-items: center; justify-content: center; gap: 5px; border-radius: 25px; z-index: 2; padding: 10px 25px; font-weight: 700; outline: none; box-shadow: none; border: none; overflow: hidden; color: var(--bs-white); background-color: var(--secondary-color); } .modal-contact-product .header-group__heading { font-weight: 700; } .modal-contact-product .form-group .form-input { color: #282828; padding: 3px 20px; border-radius: 20px; height: 40px; font-size: 0.95em; } .modal-contact-product .form-group .form-textarea { font-size: 0.95em; border-radius: 20px; resize: none; } .modal-contact-product .form-group label { font-weight: 700; color: #1f1f1f; margin-bottom: 4px; padding-left: 10px; } .form-control:focus { border-color: var(--primary-color); } .was-validated .form-control:valid { background-image: unset !important; border: 1px solid #ced4da; } .btn-custom:hover { color: var(--bs-white); opacity: 0.8; } .detailContent *{ font-family: var(--font-family) !important; } .detailContent h1 { font-weight: 700; font-size: 1.45em; } .detailContent h2 { font-weight: 700; font-size: 1.4em; } .detailContent h3 { font-weight: 700; font-size: 1.35em; } .detailContent h4 { font-weight: 700; font-size: 1.3em; } .detailContent h5 { font-weight: 700; font-size: 1.25em; } .detailContent h6 { font-weight: 700; font-size: 1.2em; } .detailContent img { max-width: 100% !important; height: auto !important; } .detailContent strong { font-weight: 700 !important; } .detailContent iframe { max-width: 100% !important; } .contact-bottom { padding-bottom: 30px; } .contact-bottom .section-heading .title { font-size: var(--font-lg); font-weight: 700; } .contact-left { height: 100%; background-color: var(--primary-color); padding: 30px; } .contact-item { position: relative; display: flex; gap: 15px; transition: all 0.35s ease-in; } .contact-item a { color: #e9ecef; } .contact-item .contact-item_icon { color: #e9ecef; font-size: 1.6em; } .contact-item .contact-item_title { font-size: 1em; font-weight: 500; color: #e9ecef; } .contact-item .contact-item_value { color: #f8f9fa; font-weight: 700; font-size: 1.1em; transition: all 0.35s ease-in; } .contact-item:hover .contact-item_value { text-decoration: underline; } .contact-left__map { height: 250px; } .contact-left__map > iframe { width: 100%; height: 100%; } .contact-map iframe { vertical-align: middle; height: 500px; width: 100%; } .contact-form label { font-weight: 700; color: #000; font-size: 1em; margin-bottom: 4px; padding-left: 10px; } .contact-form .form-control { font-size: 1em; color: #282828; padding: 3px 20px; border-radius: 20px; } .contact-form input.form-control { min-height: 40px; } .contact-form .form-control::placeholder { color: gray; } .contact-form .form-control.is-valid, .contact-form .was-validated .form-control:valid { padding-right: .75rem; border-color: #ced4da; background-image: none; } .form-textarea { resize: none; padding: 6px 20px !important; } .footer-form .invalid-feedback { position: absolute; left: 0; top: 100%; width: 100%; z-index: 2; font-weight: 500; color: #d00014; } .swal2-popup { width: 45em; } .swal2-popup .swal2-title { font-weight: 700; } .swal2-html-container { font-size: 1.3em; } .btn-custom.success { background-color: #009a14; } .sticky-CTA { transition: .3s all ease; position: fixed; bottom: 50%; transform: translateY(50%); left: 0; width: 70px; background-color: #fff; text-align: center; padding: 5px; border-radius: 5px; box-shadow: 2px 2px 13px #cacaca; z-index: 20; } .sticky-CTA > ul > li { margin: 15px 0; position: relative; } .sticky-CTA > ul > li > a { display: block; } .sticky-CTA > ul > li > a > .text { display: block; margin-top: 4px; color: #414141; font-size: 0.8em; font-weight: 700; } .sticky-CTA > ul > li.zalo > a .icon { width: 35px; height: 35px; display: block; background: url("/public/upload/images/icons/zalo.png") no-repeat 50%; background-size: 100%; margin: 0 auto; } .sticky-CTA > ul > li.messenger > a .icon { width: 35px; height: 35px; display: block; background: url("/public/upload/images/icons/mess.png") no-repeat 50%; background-size: 100%; margin: 0 auto; } .sticky-CTA > ul > li.facebook > a .icon { width: 35px; height: 35px; display: block; background: url("/public/upload/images/icons/facebook.png") no-repeat 50%; background-size: 100%; margin: 0 auto; } .sticky-CTA > ul > li.return > a > i { width: 35px; height: 35px; display: block; text-align: center; background-color: #1f1f1f; color: #e9e9e9; line-height: 32px; margin: 0 auto; border-radius: 35px; font-size: 1.4em; } .sticky-CTA > ul > li.call > a > i { width: 35px; height: 35px; display: block; text-align: center; background-color: #fdc80a; color: #fff; line-height: 35px; margin: 0 auto; border-radius: 35px; animation: callAction 2s ease infinite; -webkit-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; } @keyframes callAction { 0% { transform: scale(1); } 25% { box-shadow: 0 0 0 4px rgba(253, 200, 10, 0.4), 0 0 0 8px rgba(253, 200, 10, 0.2); } 25% { box-shadow: 0 0 0 4px rgba(253, 200, 10, 0.4), 0 0 0 8px rgba(253, 200, 10, 0.2); } 25% { box-shadow: 0 0 0 6px rgba(253, 200, 10, 0.4), 0 0 0 12px rgba(253, 200, 10, 0.2); } } @media screen and (max-width: 991px) { .sticky-CTA { left: 0; width: 100%; bottom: 0; transform: unset; } .sticky-CTA > ul { display: flex; justify-content: space-around; } .sticky-CTA > ul > li { margin: 5px; text-align: center; } }