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

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


@media only screen and (max-width: 48em) {
/*************** ADD MOBILE ONLY CSS HERE  ***************/


}
/* button add to cart all page */
.add-to-cart-button a {
	border-radius: 6px;
}
.head-w-space{
	letter-spacing: 5px;
	font-weight: bold;
}
 .white.is-outline:hover{
	color: var(--fs-color-primary) !important;
}

.cbp-open-popup:before{
	display: none !important;
}
.header:not(.transparent) .cbp-open-popup:hover, .header-main .header-button > .button.is-outline:hover, .header-main .nav > li > .cbp-open-popup:hover > i:not(.icon-angle-down){
	color: white !important;
}
.mobile-sidebar .nav>li>a, .mobile-sidebar i{
	color: var(--fs-color-primary);
}

img{
	border-radius: 5px;
}
.flickity-page-dots .dot.is-selected{
	background-color: var(--fs-color-primary);
}

.onsale{
	margin: 0px 5px;
}

.button{
	border-radius: 12px;
}

.wpcf7-submit{
	border-radius: 12px !important;
}

.primary.wc-backward{
	padding: 0px 5px;
	border-radius: 12px;
}

/* image cover radius */
.image-cover {
    border-radius: 5px;
}

/* product title */
.name.product-title{
/* 	font-weight: 700;	 */
}

/* ===== HOME - Section shop ===== */
.sc-shop {
    margin-top: -85px;
}

.sc-shop h4 {
    font-size: 24px;
    font-weight: 700;
}

/* ===== Sale ===== */
.sale-tx h3 {
    background: red;
    border-radius: 32px;
    margin-bottom: 20px;
    padding: 10px;
}

/* ===== Heading ===== */
.heading-title h2,
.title-large h2 {
    font-weight: 800;
}

.heading-title h2 {
    font-size: 40px;
    font-style: italic;
    text-transform: uppercase;
    position: relative;
}

.title-large h2 {
    font-size: 56px;
}

.heading-title p {
    font-size: 16px;
    font-weight: 400;
}

/* Line dưới H2 */
.heading-title h2::after {
    content: "";
    display: block;
    width: 90px;
    height: 8px;
    margin: 12px auto 0;
    background: #f4b400;
}

/* ===== Button ===== */
.btn-about {
    font-family: "Montserrat", sans-serif;
    font-size: 16px;
    font-weight: 700;
    text-transform: uppercase;
    color: #000;
    background: #FFD600;
    border: 1px solid #FFD600;
    border-radius: 0 !important;
    padding: 5px 50px;
    transform: skewX(-10deg);
}

/* ===== HOME - Section about ===== */

/* ===== HOME - Section product ===== */
.home-prod{
	overflow: hidden;
	position: relative;
	z-index: 1;
}
.home-prod svg{
	fill: rgba(255, 222, 66, 0.076);
}

.svg-left-top svg {
    position: absolute;
    top: -50px;
    left: -200px;
    width: 24%;
    height: auto;
    z-index: 0;
    color: rgba(255, 222, 66, 0.076);
}

.svg-right-bot svg {
    position: absolute;
    bottom: -100px;
    right: -200px;
    width: 25%;
    height: auto;
    z-index: 0;
    color: rgba(255, 222, 66, 0.076);
}

/* ===== HOME -  Section Category ===== */
.sc-bcar .box-category {
    position: relative;
    overflow: hidden;
    z-index: 1;
    border-radius: 12px;
}

.sc-bcar .box-category::before {
    content: "";
    position: absolute;
    inset: 0;
    border: 2px solid transparent;
    border-radius: 12px;
    pointer-events: none;
    z-index: 2;
}

.sc-bcar .box-category:hover::before,
.sc-bcar .box:hover .box-category::before {
    border-color: #2ecc71;
    animation: borderRun .7s linear forwards;
}

@keyframes borderRun {
    0%   { clip-path: inset(0 100% 100% 0); }
    25%  { clip-path: inset(0 0 100% 0); }
    50%  { clip-path: inset(0 0 0 100%); }
    75%  { clip-path: inset(100% 0 0 0); }
    100% { clip-path: inset(0 0 0 0); }
}

/* ===== SECTION Service ===== */
.icon-serv .icon-inner img{
	filter: brightness(0) saturate(100%) invert(23%) sepia(46%) saturate(2475%) hue-rotate(97deg) brightness(55%) contrast(103%);
}
.icon-serv .icon-box:hover .icon-inner img{
	filter: unset
}

/* ===== DOT SLIDER FLATSOME (Flickity) ===== */
.sc-bcar .flickity-page-dots {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 6px;
    bottom: -10px;
}
.sc-bcar .flickity-page-dots .dot {
    width: 6px;
    height: 6px;
    background: #ccc;
    border-radius: 50%;
    opacity: 1;
    margin: 0;
    transition: all 0.35s ease;
}
.sc-bcar .flickity-page-dots .dot.is-selected {
    width: 40px;
    height: 6px;
    border-radius: 6px;
    background: #005f02;
}
.sc-bcar .flickity-page-dots .dot:hover {
    background: #999;
}

/* ===== ABOUT US - Section product ===== */
.section-target .section-title-normal{
	border-bottom: solid 2px black;
}


/* ===== Footer ===== */

.absolute-footer.dark.medium-text-center.text-center{display:none}

.ft-ab .col,
.ft-col_top .col{padding:0}

.ft-ab p{margin-bottom:0}

.ft-ab_ic a{color:#FF3600}


/* ===== Contact Layout ===== */

.ft .contact-simple{
  display:flex;
  flex-direction:column;
  gap:15px
}

.ft .contact-desc{
  color:#a3a7b6;
  font-size:16px;
  line-height:1.6;
  margin:0 0 10px
}

.ft .contact-row{
  display:flex;
  align-items:center;
  gap:12px
}

.ft .contact-row i{
  color: #ffffff;
  font-size:18px;
  width:20px;
  text-align:center
}

.ft .contact-row a{
  font-size:14px;
  color:#fff;
  text-decoration:none;
  position:relative;
  padding:0!important;
  transition:.3s
}

.ft .contact-row a::after{
  content:"";
  position:absolute;
  left:0;
  bottom:-4px;
  width:0;
  height:1px;
  background: var(--fs-color-primary);
  transition:.3s
}

.ft .contact-row a:hover{
  color: var(--fs-color-primary);
}

.ft .contact-row a:hover::after{
  width:100%
}


/* ===== Map Background ===== */

.ft .bg-cl{
  position:relative;
}

.ft .bg-cl::after{
  content:"";
  position:absolute;
  inset:0;
  background:url(/wp-content/uploads/2026/03/bg-remove-map.png) no-repeat center;
  opacity:.02;
  z-index:-1
}


/* ===== Mobile ===== */
@media (max-width: 849px) {

    .cbp-open-popup i {
        margin-top: 4px;
    }

}

@media (max-width:768px){

.ft-col_top .container .row:not(.row-collapse),
.lightbox-content .row:not(.row-collapse),
.row .gallery,
.row .row:not(.row-collapse){
  margin-left:0;
  margin-right:0
}

.ft-col_top .social-icons.follow-icons.ft-ab_ic.full-width.text-right{
  margin-top:10px;
  text-align:left
}
    .sc-bcar .flickity-page-dots .dot {
        width: 5px;
        height: 5px;
    }

    .sc-bcar .flickity-page-dots .dot.is-selected {
        width: 28px;
        height: 5px;
    }
}