/*
Theme Name:		 gpc-gp
Theme URI:		 http://childtheme-generator.com/
Description:	 gpc-gp is a child theme of GeneratePress, created by ChildTheme-Generator.com
Author:			 gpc
Author URI:		 http://childtheme-generator.com/
Template:		 generatepress
Version:		 1.0.0
Text Domain:	 gpc-gp
*/


/*
    Add your custom styles here
*/

:root {
    --my-color-blue: #2866AF;
    --my-color-orange: #F9C881;
    --my-color-orange-2: #e48c00;
    --sticky-header-offset: 0px;
}

@media (min-width: 769px) {
.admin-bar {
    --sticky-header-offset: 32px;
}
}

a {
    text-decoration: none;
}

/* ol, ul { margin: 0 } */

.wp-block-image {
    margin-bottom: 16px;
}

.wp-block-list.is-style-list-plain {
    margin-left: 0;
    list-style: none;
}


/*=============================================
=            Plugins            =
=============================================*/

/*---------- Generate Block - Carousel ---------- */
.gb-carousel {
    position: relative;

    .gb-slider-nav {
        position: absolute;
        width: 100%;
        top: 50%;
        transform: translate(0, -50%);
        z-index: 2;
    }

    .gb-carousel-pagination {
        padding: 5px 0;
    }

    .gb-carousel-control--previous {
        position: absolute;
        left: 0;
    }

    .gb-carousel-control--next {
        position: absolute;
        right: 0;
    }
}

/*---------- GB - Accordion ---------- */
.gb-accordion {
    .gb-accordion__item-open .gb-accordion__content { padding: 16px 0 }
    .gb-accordion__item-open .gb-accordion__content > :last-child { margin-bottom: 0 }
}

/*---------- GB - Query loop ---------- */
.gb-query-loop-pagination {
    [class^=gb-query-page-numbers] .page-numbers,
    &> a {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        display: grid;
        place-items: center;
        padding: 0;
    }

    [class^=gb-query-page-numbers] .page-numbers.current {
        background: #2866AF;
        color: #fff;
    }
}

/*---------- Woo ---------- */
.wc-block-product-template__responsive {
    margin-left: 0;
}

/*---------- Fluent Form ---------- */
.fluentform form.frm-fluent-form .ff-btn-submit:not(.ff_btn_no_style) {
    background: #2866AF;
}

/*---------- Breadcrumbs ---------- */
.wp-block-bcn-breadcrumb-trail {
    font-size: 13px;
}
/*=============================================
=            General            =
=============================================*/

.single:not(.page) #primary .entry-content {
    h1, h2 { font-weight: 600; color: #4e6663; }
    h3 { font-weight: 600; }
}

/*=============================================
=            Header            =
=============================================*/
#masthead {
    box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
}

.main-navigation ul ul {
    border-radius: 8px;
    box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
    min-width: 200px;
    width: max-content;
}

.menu-icon svg {
    width: 2em;
    height: 2em;
    fill: currentColor;
    margin-right: 5px;
    vertical-align: middle;
}

/*---------- Menu danh muc san pham ---------- */
.header-menu-dmsp {
    .gpc-menu__list {
        --px: 15px;
        --py: 2px;
        padding: var(--py) var(--px);
        border: 1px solid #E5E4E2;
        border-radius: 8px;
    }

    .gpc-menu__list > .menu-item > a {
        color: #fff;
    }

    .menu-icon { margin-right: 16px }

    .sub-menu {
        box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
        width: calc(100% + var(--px) * 2);
        left: calc(-1 * var(--px));
        background: #fff;

        .menu-item a {
            padding: 8px 16px;
            border-bottom: 1px solid #E5E4E2;
            color: #03037F;

            &:hover {
                background: #f1f6fa;
                color: #03037F;
            }
        }

        .menu-item:last-child a { border-bottom: none }

        .sub-menu {
            left: 100%;
            top: 0;
        }
    }
}

@media (max-width: 767px) {
    .wc-search-toggle .search-icon { width: 30px; height: 30px; fill: #fff; }
    .wp-block-woocommerce-customer-account a .label { display: none }

    .header-menu-dmsp {
        .gpc-menu__list { --px: 10px }
        .menu-icon { margin-right: 4px }
    }
}

/*---------- Search box ---------- */
.wc-search-form {
    border-radius: 50px;
}

.wc-search-submit {
    background: var(--accent);
    border-radius: 50%;
    width: 44px;
    padding: 0;
    height: 44px;
    display: grid;
    place-items: center;

    svg { fill: #fff }
    &:hover {background: var(--accent);}
}

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

.footer-title {
    margin-bottom: 20px;
}

.footer-contact {
    margin: 0 0 0 1rem;

    li {
        margin-bottom: 8px;
    }
}

/*=============================================
=            Sidebar            =
=============================================*/
.gb-widget {
    border: 1px solid #ccc;
    padding: 16px;
    border-radius: 8px;

    &+ .gb-widget { margin-top: 20px }

    .gb-widget-title {
        font-size: 20px;
        font-weight: 600 !important;
        position: relative;
        padding-bottom: 8px;
        margin-bottom: 20px;
        display: inline-block;
        border-bottom: 2px solid #ffc700;
    }
}

.gb-widget .gb-navigation {
    .gb-menu-link {
        &::before {
            display: block;
            content:'\203A';
        }
    }
}

.wp-block-categories-list {
    list-style: none;
    max-height: 300px;
    overflow-y: auto;

    li a {
        display: flex;
        align-items: center;
        text-decoration: none;
        column-gap: 10px;
        padding-top: 5px;
        padding-bottom: 5px;
        color: currentColor;

        &::before {
            display: block;
            content:'\203A';
        }
    }
}

/*=============================================
=            Woo            =
=============================================*/
.wc-block-mini-cart .wc-block-mini-cart__button { padding: 0 }
.wc-block-mini-cart__button:hover { background-color: transparent; color: inherit }
.wc-block-customer-account__account-icon { font-size: 20px }

/*---------- Mini cart panel ---------- */
.wc-block-mini-cart__button:hover,
.wc-block-mini-cart__button:focus {
    background: transparent;
    color: #333;
}

.wp-block-woocommerce-mini-cart-title-items-counter-block { display: none; }
.wc-block-components-sale-badge { display: none; }
.wc-block-components-product-metadata__description { display: none }
.wc-block-components-totals-item__description { display: none !important }

table.wc-block-cart-items .wc-block-cart-items__row {
    .wc-block-cart-item__quantity {
        display: flex;
        flex-direction: row;
        gap: 20px;
        align-items: center;

        .wc-block-components-quantity-selector { margin-bottom: 0 }
    }

    .wc-block-components-product-name { font-size: 17px }

    + .wc-block-cart-items__row { border-top: 1px solid #ccc }
}

/*---------- Danh sách sản phẩm ---------- */
.woocommerce ul.products {
    /* --cols: 4;
    --gap: 20px; */

    display: grid;
    grid-template-columns: repeat(var(--cols, 4), 1fr);
    gap: var(--gap, 16px);
    margin: 0;

    &::before, &::after { display: none }

    li.product {
        border-radius: 12px;
        border: 1px solid #E5E4E2;
        overflow: hidden;
        padding: 16px;
        width: 100%;
        margin: 0;
        float: none;

        &:hover {
            background:#f1f6fa;
        }

        .woocommerce-loop-product__title { font-size: 14px; font-weight: 600; }

        .price { font-size: 16px; color: #b63434}

        .add_to_cart_button {
            padding: 4px 16px;
            border-radius: 4px;
            font-size: 13px;
        }

        .button {
            padding: 4px 16px;
            border-radius: 4px;
            font-size: 13px;
        }
    }
}


.woocommerce-page[class*="columns-"] ul.products li.product,
.woocommerce[class*="columns-"] ul.products li.product {
    width: 100%;
}

.gpc-woo-product-grid.hide-add-to-cart .add_to_cart_button { display: none !important; }

@media (max-width: 767px) {
    .gpc-woo-product-grid ul.products{
        --cols: 1;
    }

    .woocommerce ul.products li.product a .wc-product-image img { width: 100% }

    .woocommerce ul.products[class*=columns-] li.product, .woocommerce-page ul.products[class*=columns-] li.product { margin: 0 }
}

/* Paging */
.woocommerce nav.woocommerce-pagination {
    .page-numbers {
        display: flex;
        align-items: center;
        justify-self: center;
        border: none;
        gap: 8px;

        li {
            border:none;
            &> a,
            &> span {
                width: 40px;
                height: 40px;
                border: 1px solid #E5E4E2;
                display: grid;
                place-items: center;
                border-radius: 50%;
            }
        }
    }

    .page-numbers.current {
        background: #03037F;
        border-color: #03037F;
        color: #fff;
    }
}

/*---------- Single ---------- */
.woocommerce div.product .woocommerce-tabs ul.tabs li {
    border-top: none;
    border-left: none;
    border-right: none;
    border-bottom: 2px solid #03037F !important;
    background: #fff;
    color: #03037F;
    text-transform: uppercase;
    font-size: 18px;
    padding: 0;

    a { color: #03037F; }
    &.active a { color: #03037F; }
}

.woocommerce div.product .product_title { font-size: 24px }

/*---------- Slider ---------- */
.slick-prev, .slick-next { width: 30px; height: 30px; }
.slick-prev:before, .slick-next:before { font-size: 30px; }

/*=============================================
=            Home            =
=============================================*/

.spnb-carousel .products .product { background: #fff; }

.spnb-carousel .products .product a img { border-radius: 4px; }

/*=============================================
=            About            =
=============================================*/
.about-timeline {
    border-left: 2px solid #03037F;
    padding-left: 32px;

    h2 { font-size: 20px; font-weight: bold; color: #03037F; position: relative; }
    h2:before {
        display: block;
        content: '';
        position: absolute;
        left: -40px;
        width: 16px;
        height: 16px;
        border-radius: 50%;
        background-color: #03037F;
    }

}
.wp-block-social-links{
	margin: 0;
}
.gb-carousel-dot {
	background-color: rgba(0,0,0,.3) !important;
	width:7px !important;
	height: 7px !important;
}
.btn-form-home:hover {
	color: #fff !important;
}
.menu_header .wp-block-search__button {
	padding: 10px !important;
}

/* siderbar */
.inside-right-sidebar aside {
	padding: 40px 10px 20px 10px !important;
	margin: 0 !important;
}
.inside-right-sidebar aside  .widget-title{
	font-weight: 500 !important;
	margin-bottom: 10px !important;
}
.gb-query-loop-pagination .page-numbers{
	background: #f0f0f0 !important;
    color: #000 !important;
	border: none;
}
.gb-query-loop-pagination .page-numbers.current,
.gb-query-loop-pagination .page-numbers:hover{
	background: #fcb900 !important;
    color: #fff !important;
	border: none;
}
.video-gioi-thieu video{
	height: 700px;
	object-fit: cover;
}
.btn-submit-2 .gb-text {
	line-height: 10px;
    padding: 15px;
}
.btn-submit-2 .gb-shape {
	width: 70px;
    background: #f4c25b;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 0 10px 10px 0;
}

.section-title {
    display: flex;
    align-items: center;
    gap: 10px;
}
.section-title::before,
.section-title::after {
    content: "";
    height: 1px;
    background: #fbc03f;
    flex: 1;
}
.title-dang-ky-5-ngay strong {
	font-size: 28px;
}
.single-post .site,
.single-product .site{
	max-width: 100%;
}
.single-post .site .site-main,
.single-product .site .site-main{
	margin-top: 0;
}
/* Ẩn article sản phẩm mặc định của WooCommerce, chỉ giữ lại article custom ở trên */
.single-product article.product {
    display: none !important;
}
.single-product .wc-block-components-quantity-selector input {
	height: auto !important;
}
.single-product .single_add_to_cart_button {
	border-radius: 10px !important;
    background: #F3A227 !important;
}
.single-product .text-editor-product {
	white-space: pre-line;
}
.ez-toc-section {
    display: block;
    position: relative;
    top: -100px;
    visibility: hidden;
}
.nav-post-content .ez-toc-counter{
	position: sticky !important;
	overflow-y: auto;
    top: 85px;
    width: 327.5px;
    margin-top: 0px;
    margin-bottom: 0px;
    inset-inline-start: 70.4px;
}
html {
  scroll-padding-top: 100px; /* Thay 100px bằng chiều cao thực tế của header sticky trên website của bạn */
}