/*
Theme Name: Flatsome Child
Description: This is a child theme for Flatsome Theme
Author: UX Themes
Template: flatsome
Version: 3.0
*/

/*************** ADD CUSTOM CSS HERE.   ***************/

.no-margin {margin: 0 !important}
.no-margin > * {margin: 0 !important}
.no-paddding {padding: 0 !important}
.no-paddding > *{padding: 0 !important}

.owl-nav.disabled{display: none !important;}
.owl-nav button.owl-prev, .owl-carousel .owl-nav button.owl-prev {left: 0}
.owl-nav button.owl-next, .owl-carousel .owl-nav button.owl-next {right: 0;}
.absolute-footer {display: none !important;}
.no-position {position: unset !important;}
.align-center {align-items: center !important;}

:root {
    --primary-color-theme: #8d725b;
    --secondary-color-theme: #000;
    --accent-color-theme: #8d725b;
    --accent-color-theme-1: #373737;
    --accent-color-theme-2: #493F38;
    --text-color: #2b2b2b;
    --heading-color: #5a4433;
    --white-color: #ffffff;
    --black-color: #000000;
    --font-text: Manrope, sans-serif;
    --font-heading: "Ibarra Real Nova", sans-serif;
    --font-awesome: 'Font Awesome 7 Free';
    --button-color-2: #8d725b;
}
.header i::before {background: var(--black-color);}
.header.transparent i::before {background: var(--white-color);}
.header.transparent 
.cart-img-icon {filter: brightness(0) invert(1); width: 23px; height: 23px;}
.header .icon-menu::before {
    content: "" !important;
    display: inline-block;
    width: 32px;
    height: 32px;
    --webkit-mark: url(./assets/icons/menu.svg);
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    -webkit-mask-size: contain;
    mask-image: url(./assets/icons/menu.svg);
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: contain;
}
.header .icon-search::before { 
    content: "" !important;
    display: inline-block;
    width: 25px;
    height: 25px;
    --webkit-mark: url(./assets/icons/search.svg);
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    -webkit-mask-size: contain;
    mask-image: url(./assets/icons/search.svg);
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: contain;
}

.header .icon-shopping-basket::before {
    content: "" !important;
    display: inline-block;
    width: 25px;
    height: 25px;
    --webkit-mark: url(./assets/icons/parcel.svg);
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    -webkit-mask-size: contain;
    mask-image: url(./assets/icons/parcel.svg);
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: contain;
}
.icon-shopping-basket::after {background: var(--primary-color-theme) !important;}

.text-hero-top p {font-size: 10px; text-transform: uppercase; font-weight: 600; letter-spacing: 2px;}
.text-hero-top h1 {font-size: 30px;}
.text-hero-bottom p {margin-bottom: 0; text-align: left; font-size: 14px; text-align: center;}

.btn-website {padding: 15px 50px 15px 50px; margin: 0 !important; min-height: unset !important; border-radius: 30px; color: var(--white-color); line-height: unset; text-transform: inherit;}
.btn-website:hover {background: var(--secondary-color-theme) !important;}
.btn-website.color2 {background: var(--button-color-2);}

.title-website p {font-size: 16px; font-weight: 600; margin-bottom: 5px; text-transform: uppercase;}
.title-website h2 {font-size: 35px; font-family: var(--font-heading); font-weight: 500;}
.title-website.animate {position: relative;}
.title-website.animate::before {
    content: ""; 
    position: absolute;
    left: calc(50% - 300px);
    top: -40%;
    width: 600px;
    height: 600px;
    background: #69727d;
    -webkit-mask: url(./assets/icons/circle.svg);
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    -webkit-mask-size: contain;
    mask: url(./assets/icons/circle.svg);
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: contain;
}

.section1::after {content: ""; position: absolute; right: 0; width: 30%; height: 30%; background: #fbf6f1; display: block; bottom: 100px; opacity: 1; animation: slidefade 2s ease;}
.title-collection p {text-transform: uppercase; font-size: 16px; margin-bottom: 5px;}
.title-collection h3 {font-size: 40px; margin-bottom: 0;}
.text-collection p {font-size: 16px; font-weight: 500;}

.flickity-page-dots {bottom: -10%;}
.flickity-page-dots .dot.is-selected {background: var(--primary-color-theme); border-color: var(--primary-color-theme);}

.product-small.box{background: #fbf6f1; padding: 5px;}
.product-small.box .product-title a {font-size: 30px; font-family: var(--font-heading); color: var(--black-color); font-style: italic; margin: 0;}
.product-small.box .price-wrapper {margin-top: 1.5em; margin-bottom: 1.5em; font-size: 16px; font-weight: 500;}
.product-small.box .add-to-cart-button a {border: 0; background: transparent; margin-top: 0; color: var(--black-color);}
.product-small.box .parameter {font-size: 15px;}

.section3 .col-text p { margin-bottom: 30px; font-size: 18px; text-align: justify;}

.text-quote p:first-child {font-family: var(--font-heading); font-style: italic; font-size: 30px; line-height: 40px; letter-spacing: -2px; margin-bottom: 30px;}
.text-quote p:last-child {margin-bottom: 0; font-size: 14px; text-transform: uppercase; font-weight: 600;}
.text-brand h3 {font-size: 30px; margin-bottom: 0; margin-top: 15px;}
.text-brand p {font-size: 16px; margin: 10px 0; text-align: justify;}
.section5 {padding-bottom: 150px !important;}
/* .section5 .section-content {overflow: hidden;} */
.text-scroll {overflow: hidden; width: 100%; position: absolute; z-index: -1; left: 0; bottom: -10%;}
.text-scroll .track {display: flex; width: max-content; will-change: transform; transform: translate3d(0,0,0); animation: scroll 60s linear infinite;}
.text-scroll .track p {flex: 0 0 auto; margin: 0; white-space: nowrap; font-size: 80px; font-family: var(--font-heading); color: #fbf6f1; line-height: 80px;}

.section6 .title-website h2 {text-transform: uppercase;}
.section6 .text-under-title p {margin-bottom: 0; font-size: 20px; font-family: var(--font-heading); font-style: italic;}
.section6 .text-discover p {margin-bottom: 0; font-size: 13px; margin-top: 20px;}
.text-social p {font-size: 18px;}

.section8::after {content: ""; position: absolute; right: 0; width: 30%; height: 50%; background: #fbf6f1; display: block; bottom: 25%; opacity: 1; animation: slidefade 2s ease;}
.section8.sl::after {left: 0; right: unset; animation: slidefade-left 2s ease;}
.section8 .title-website h2 {font-size: 45px; margin-bottom: 0;}
.text-gen p {margin: 1.5em 0; font-size: 16px;}
/* .row-center-bottom {justify-content: center; align-items: flex-end;} */
.text-form-email p {margin-bottom: 0; font-size: 25px; font-family: var(--font-heading); font-style: italic;}
form {margin-bottom: 0;}
.form-email {display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--black-color);}
.form-email .input {flex: 1; padding: 0.8em 0;}
.form-email input {margin-bottom: 0; background: transparent; border: 0; box-shadow: none; padding-left: 0; }
.form-email input:focus {background: transparent; box-shadow: none;}
.form-email input::placeholder {color: var(--black-color); opacity: 1; font-size: 16px;}
.form-email button {margin: 0; font-size: 12px; line-height: 12px;}

.footer-brand h2 {font-size: 70px; font-family: var(--font-heading); font-weight: 500; margin-bottom: 0;}
.footer-brand p {font-style: italic; font-family: var(--font-heading); font-weight: 600; font-size: 16px;}
.menu-footer a span{color: var(--white-color); text-transform: uppercase; font-weight: 600;}
.menu-footer a span:hover {color: var(--white-color);}
.text-menu-footer h3 {font-size: 24px; text-transform: uppercase;}
.ab-footer-text p {margin-bottom: 0;}

@keyframes slidefade {
    0% {opacity: 0; transform: translateX(100%);}
    100% {opacity: 1; transform: translateX(0px);}
}

@keyframes slidefade-left {
    0% {opacity: 0; transform: translateX(-100%);}
    100% {opacity: 1; transform: translateX(0px);}
}

@keyframes scroll{
  from { transform: translate3d(0,0,0); }
  to   { transform: translate3d(-50%,0,0); } /* đi đúng 1 bản (nửa track) */
}

/* md */
@media (min-width: 768px) { 
    .text-hero-top p {font-size: 14px;}
    .text-hero-top h1 {font-size: 50px; }
    .title-website h2 {font-size: 55px;}
    .section1::after {height: 45%;}
    .title-collection h3 {font-size: 50px;}
    .text-collection p {font-size: 18px;}
    .title-website.animate::before {width: 700px; height: 700px; left: calc(50% - 350px); top: -40%;}
    .text-quote p:first-child {font-size: 35px; line-height: 45px;}
    .text-quote p:last-child {font-size: 16px;}
    .text-brand h3 {font-size: 40px;}
    .text-brand p {font-size: 17px; margin: 30px 0;}
    .text-scroll {left: 0; top: 40%; bottom: unset;}
    .section5 {padding-bottom: 60px !important;}
    .section6 .text-under-title p {font-size: 25px;}
    .text-form-email p {font-size: 30px;}
}

/* lg */
@media (min-width: 992px) { 
    .row-no-padding-bottom > .col{padding-bottom: 0 !important}
    .text-hero-top h1 {font-size: 60px;}
    .text-hero-top p {font-size: 18px;}
    .text-hero-bottom p {text-align: left;}
    .title-website h2 {font-size: 70px;}
    .section1::after {height: 60%;}
    .title-collection h3 {font-size: 60px;}
    .title-website.animate h2 {font-size: 100px;}
    .title-website.animate::before {width: 900px; height: 900px; left: calc(50% - 450px); top: -40%;}
    .text-quote p:first-child {font-size: 50px; line-height: 60px; margin-bottom: 40px;}
    .text-quote p:last-child {font-size: 18px;}
    .text-brand h3 {font-size: 50px;}
    .text-brand p {font-size: 18px; margin: 50px 0;}
    .section5 {padding-bottom: 100px !important;}
    .section6 .banner-discover .bg-fill {background-position: top center !important; background-size: contain !important;}
    .section6 .text-under-title p {font-size: 30px;}
    .text-gen p {margin: 2.3em 0; font-size: 18px;}
    .text-form-email p {font-size: 35px;}
}