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

/*****************************************************************************
 * GOBIKE - MODULAR CSS ARCHITECTURE
 * Các file chuyên biệt được tách riêng để dễ bảo trì và tối ưu hiệu năng:
 * - header-style.css  : Toàn bộ CSS Topbar, Header, Logo, Menu, Search, Mobile Header
 * - product-style.css : Toàn bộ CSS Sản phẩm, Danh mục, Chi tiết, Swatch, Cart, Bộ lọc
 * - footer-style.css  : Toàn bộ CSS Chân trang, Menu điều hướng đáy Mobile (App-style)
 * - news-style.css    : Toàn bộ CSS Trang Tin Tức & Cẩm Nang
 * - single-post-style.css : Toàn bộ CSS Trang Chi Tiết Bài Viết (Single Post)
 *****************************************************************************/

@import url('header-style.css?v=3.16.57');
@import url('product-style.css?v=3.16.57');
@import url('footer-style.css?v=3.16.72');
@import url('news-style.css?v=3.16.68');
@import url('video-review-style.css?v=3.16.62');
@import url('video-detail-style.css?v=3.16.64');
@import url('customer-experience-style.css?v=3.16.63');
@import url('single-post-style.css?v=3.16.69');

/*****************************************************************************
 * GLOBAL BRAND COLORS & GENERAL RESETS / UTILITIES
 *****************************************************************************/
:root {
    --primary-color: #044b25 !important;
    --gobike-primary: #044b25 !important;
    --gobike-primary-hover: #03381b !important;
    --gb-vr-primary: #044b25 !important;
    --gb-vr-primary-hover: #03381b !important;
}

html body {
    font-size: 14px;
}

body {
    background: #fff;
}

body.home {
    background: #f5f8fd;
}

/* Xóa bỏ hoàn toàn clearfix ::before và ::after của Flatsome gây lỗi layout trong .banner-home */
.banner-home::before,
.banner-home::after,
.banner-home .container::before,
.banner-home .container::after,
.banner-home .row::before,
.banner-home .row::after,
.gobike-hero-banner-section::before,
.gobike-hero-banner-section::after,
.gobike-hero-banner-section .container::before,
.gobike-hero-banner-section .container::after,
.gobike-hero-banner-section .row::before,
.gobike-hero-banner-section .row::after {
    content: none !important;
    display: none !important;
    clear: none !important;
}

@media screen and (min-width: 850px) {
    .banner-home .news-item-thumb {
        width: 40% !important;
        max-width: 40% !important;
        flex: 0 0 40% !important;
        height: 0 !important;
        padding-bottom: 25% !important;
        position: relative !important;
        flex-shrink: 0 !important;
        border-radius: 6px !important;
        overflow: hidden !important;
        display: block !important;
    }

    .banner-home .news-item-thumb img {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        object-position: center !important;
        display: block !important;
    }

    .banner-home .news-item-body {
        flex: 1 1 60% !important;
        min-width: 0 !important;
    }
}

/* #main {
    background-color: transparent;
    z-index: 30;
    padding-bottom: 70px;
} */

th, td {
    font-size: inherit;
}

td {
    color: #000;
}

button {
    font-size: 16px;
    font-weight: normal;
}

.mb-0, .mb-0 > .col, .mb-0 > p { margin-bottom: 0 !important; }
.mgb-15 { margin-bottom: 15px !important; }
.pdb-0, .pdb-0 .col { padding-bottom: 0 !important; }
.pdb-10, .pdb-10 .col { padding-bottom: 10px !important; }

.button.disabled, button.disabled, .button[disabled], button[disabled] { opacity: 1; }
.button, button, input[type="submit"], input[type="reset"], input[type="button"] { font-weight: normal !important; font-size: 1em; }
label, legend { font-weight: normal; font-size: 1em; }

input[type="email"], input[type="date"], input[type="search"], input[type="number"], 
input[type="text"], input[type="tel"], input[type="url"], input[type="password"], 
textarea, select, .select-resize-ghost, .select2-container .select2-choice, .select2-container .select2-selection {
    height: 33px;
}


/*****************************************************************************
 * HOME BANNER SLIDER & ADS
 *****************************************************************************/
.banner-home .box_left { 
    display: none !important; 
}

.banner-home .box_center { 
    width: 66.666% !important; 
    max-width: 66.666% !important; 
    flex: 0 0 66.666% !important; 
}

.banner-home .box_right { 
    width: 33.333% !important; 
    max-width: 33.333% !important; 
    flex: 0 0 33.333% !important; 
}

.banner-home .swiper-slide img, 
.banner-home .image-ads img { 
    width: 100% !important; 
    height: 300px !important;
    object-fit: contain !important;
    object-position: center !important;
}

.swiper-container {
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
}

.mySwiper2 { height: 80%; width: 100%; }
.mySwiper { height: 20%; box-sizing: border-box; }
.mySwiper .swiper-slide { width: 25%; height: 100%; font-size: 12px; align-items: center; }
.mySwiper .swiper-slide-thumb-active { opacity: 1; font-weight: 600; }
.swiper-slide img { height: 100%; object-fit: cover; }
.swiper-container-thumbs .swiper-slide { justify-content: center; align-items: center; font-size: 12px; }
.mySwiper .swiper-slide:after { position: absolute; content: ''; width: 0; height: 2px; background: var(--primary-color); left: 0; bottom: 0; transition: 0.3s all; }
.mySwiper .swiper-slide-thumb-active:after { width: 100%; }

.swiper-button-next, .swiper-button-prev { background: rgb(0 0 0 / 30%); border-radius: 50px; color: #fff !important; width: 60px !important; height: 60px !important; }
.swiper-button-prev, .swiper-container-rtl .swiper-button-next { left: -70px !important; padding-left: 25px; transition: 0.3s all; }
.swiper-button-next, .swiper-container-rtl .swiper-button-prev { right: -70px !important; padding-right: 25px; transition: 0.3s all; }
.swiper-container:hover .swiper-button-next { right: -30px !important; }
.swiper-container:hover .swiper-button-prev { left: -30px !important; }  
.swiper-button-next:after, .swiper-button-prev:after { font-family: "fl-icons" !important; speak: none !important; margin: 0; padding: 0; display: inline-block; font-style: normal !important; font-weight: normal !important; font-variant: normal !important; text-transform: none !important; position: relative; line-height: 1.2; font-size: 24px !important; }
.swiper-button-next:after { content: "\f105" !important; }
.swiper-button-prev:after { content: "\f104" !important; }

.slider-nav-circle .previous, .slider-nav-circle .next { background: rgb(0 0 0 / 30%); color: #fff !important; width: 30px !important; height: 60px !important; top: 30%; margin-top: 0 !important; }
.slider-nav-circle .previous { border-radius: 0 50px 50px 0; left: 0px !important; padding-left: 25px; transition: 0.3s all; } 
.slider-nav-circle .next { border-radius: 50px 0 0 50px; right: 0px !important; padding-right: 25px; transition: 0.3s all; }
.slider-nav-circle:hover .previous { left: 0px !important; }
.slider-nav-circle:hover .next { right: 0px !important; }
.slider-nav-circle .previous svg { left: 70%; }
.slider-nav-circle .next svg { left: 30%; }
.slider.slider-nav-circle .flickity-prev-next-button svg { padding: 35%; }
.slider.slider-nav-circle .flickity-prev-next-button svg, .slider.slider-nav-circle .flickity-prev-next-button .arrow { border: 0; }
.slider.slider-nav-circle .flickity-prev-next-button:hover svg, .slider.slider-nav-circle .flickity-prev-next-button:hover .arrow { background-color: transparent !important; }

.image-ads { height: 100%; position: relative; }
.item-image-ads { overflow: hidden; }
.item-image-ads:not(:last-child) { margin-bottom: 11px; }
.item-image-ads img { display: block; }

@media screen and (max-width: 849px) {
    .banner-home .box_center,
    .banner-home .box_right {
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 100% !important;
        margin: 0 auto !important;
    }
    .banner-home .box_center { 
        margin-bottom: 20px !important; 
    }
    .banner-home .swiper-container {
        width: 100% !important;
        height: auto !important;
    }
    .banner-home .swiper-slide img {
        width: 100% !important;
        height: auto !important;
        object-fit: contain !important;
        display: block;
        margin: 0 auto;
    }
    .banner-home {
        margin-top: 5px;
    }
}

@media only screen and (max-width: 550px) {
    .mySwiper .swiper-slide { font-size: 0; }
    .mySwiper { height: 1%; }
    .mySwiper2 { height: 99%; }
    .mySwiper .swiper-slide:before { position: absolute; content: ''; width: 100%; height: 2px; background: #fff; left: 0; bottom: 0; }
    .row-slider .flickity-prev-next-button svg { padding: 20% !important; }
}

/*****************************************************************************
 * NEWS & BLOG
 *****************************************************************************/
.title-news h3 { background: var(--primary-color); padding: 5px; color: #fff; }
.unbox-news .post-item .box-blog-post, .area-news-content .post-item .box-blog-post, .post-sidebar .post-item .box-blog-post { display: flex; }
.unbox-news .post-item .box-blog-post { margin-bottom: 25px; }
.post-item .box-blog-post .box-text { padding: 0; }
.unbox-news .post-item .box-image { width: 30% !important; }
.unbox-news .post-item .box-text { width: 70%; padding: 0 10px 0 0; }
.blog-wrapper a:hover { color: #000; }
.area-news-content .post-item .box-blog-post .box-text { padding-left: 30px; }
.post-item .box-blog-post .box-text .post-meta:before,
.post-item .box-blog-post .box-text .post-meta::before {
    display: none !important;
    content: none !important;
}
.title-news-sale h3 { font-size: 30px; }
.title-news-sale p { font-size: 18px; color: #555; }
.stack img { max-height: 40px; width: auto; }

#section_1611256621 .col.post-item,
.ux-relay .col.post-item {
    padding: 0 !important;
}

.title-news {
    width: auto !important;
    margin-left: -30px !important;
    margin-right: -30px !important;
    padding: 0 !important;
}

.title-news h3 {
    width: 100% !important;
    display: block !important;
    box-sizing: border-box !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    text-align: center !important;
    line-height: 1.5 !important;
    padding: 10px 0 !important;
}

#content.col-divided {
    padding-right: 0 !important;
    border-right: none !important;
}

@media only screen and (max-width: 550px) {
    .area-news-content .box-vertical .box-image, .post-sidebar .box-vertical .box-image { width: 45% !important; }
    .area-news-content .post-item .box-blog-post .box-text { padding-left: 10px; }
    .blog-wrapper .box-text .from_the_blog_excerpt { display: none; }
}

/*****************************************************************************
 * CONTACT FORM 7
 *****************************************************************************/
.wpcf7-submit,
.wpcf7 input[type="submit"].button {
    border-radius: 20px !important;
}

.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 input[type="tel"],
.wpcf7 textarea,
.wpcf7 input[type="submit"] {
    border-radius: 3px !important;
}