/*
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.   ***************/
h1, h2, h3, h4, h5, h6, .heading-font {
  color: #0f0f0f; /* Màu dự phòng nếu gradient không được hỗ trợ */
  background: -webkit-linear-gradient(to right, #b6873f, #8a2b11); /* Cho trình duyệt Webkit */
  background: linear-gradient(to right, #b6873f, #8a2b11); /* Tiêu chuẩn */
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.dark h2,
.dark h1, .dark h3, .dark h4, .dark h5, .dark h6, .dark .heading-font {
    background: inherit;
    -webkit-background-clip: inherit;
    -webkit-text-fill-color: inherit;
}
.banner h1, .banner h2, .banner h3 {
    line-height: 1.4;
}
p {
    text-align: justify;
}
/* Button */
.primary:not(.circle), input[type=submit], input[type=submit].button {
  background: var(--fs-color-primary);
  background: linear-gradient(to right, color-mix(in srgb, var(--fs-color-primary) 80%, #000000), var(--fs-color-primary));
  color: white; /* Text color for contrast */
  border: 1px solid var(--fs-color-primary);
  cursor: pointer;
  transition: all 0.3s ease; 
}
.primary:not(.circle):hover,
input[type=submit]:hover,
input[type=submit].button:hover {
  background: var(--fs-color-primary);
  background: linear-gradient(to right, var(--fs-color-primary), color-mix(in srgb, var(--fs-color-primary) 80%, #000000));
  box-shadow: 0 4px 8px  var(--fs-color-primary);
  box-shadow: 0 4px 8px color-mix(in srgb, var(--fs-color-primary) 80%, white);
  border-color: var(--fs-color-primary);
}
/*icon */
.icon-64 {
	font-size: 64px;
	color: #fff9ef;
	transition: all ease .3s;
	width: 120px;
	height: 120px;
	background: #d1402b;
	border-radius: 50%;
	margin: auto;
	display: flex;
	justify-content: center;
	align-items: center;
	padding-top: 16px;
	margin-bottom: 16px;
}
.icon-64:hover {
	font-size: 64px;
	color: #FF5722;
	background: #f1ebe1;
}
.section-title b {
    background-color: currentColor;
    display: block;
    flex: 1;
    height: 2px;
    opacity: 0;
}
@media only screen and (max-width: 48em) {
/*************** ADD MOBILE ONLY CSS HERE  ***************/


}
/* Reset layout blog page */
@media screen and (min-width: 850px) {
    .blog-wrapper.page-wrapper .large-10.col{
        flex-basis: 100%;
        max-width: 100%;
    }
}
.recent-blog-posts-li .badge {
    backface-visibility: hidden;
    display: table;
    height: 3.8em;
    pointer-events: none;
    width: 5.8em;
    z-index: 20;
}
/* Archive title  */
.page-wrapper h1.page-title.is-large {
    font-size: 0rem;
}
.page-wrapper h1.page-title.is-large > span{
    font-size: 1rem;
    border-bottom: 1px solid #d5d5d5;
    display: inline-block;
    padding: 0.5rem;
}
/* Paginations */
.nav-pagination>li>a, .nav-pagination>li>span {
    border: 1px solid;
    border-radius: 0.3em;
    display: block;
    font-size: 1.1em;
    font-weight: bolder;
    height: 2.25em;
    line-height: 2em;
    min-width: 2.25em;
    padding: 0 7px;
    text-align: center;
    transition: all .3s;
    vertical-align: top;
    width: auto;
}
/* Left sidebar */
.page-template .page-left-sidebar > .row > .large-3.col.col-first{
		order: -6;
    }
@media screen and (min-width: 850px) {
    .post-sidebar,
	.page-template .page-left-sidebar > .row > .large-3.col.col-first{
		padding-top: 15px !important;
        border-left:1px solid #ececec;
        background: #fff3e2;
        padding: 1rem;
        border-radius: .5rem 0 0 .5rem;
    }
}
/* Breadcrumb */
.page-title.shop-page-title.product-page-title {
    background: #eeeeee;
}
.page-title-inner {
    min-height: 40px;
    padding-top: 0px;
    position: relative;
}
.breadcrumbs a,
.breadcrumbs {
    font-size: smaller;
}
.breadcrumbs a {
    color: #222;
}
.breadcrumbs {
    color: #222;
    font-weight: 700;
    letter-spacing: 0;
    padding: 0;
}

/* Box blogpost style 1 */
.row-slider.flickity-enabled .flickity-slider {
	display: flex;
	height: 100%;
}
.flickity-slider .col.post-item {
	display: flex;
	min-height: 100%;
}
.page-wrapper .col.post-item .col-inner,
.flickity-slider .col.post-item .col-inner{
	min-height: 100%;
}
.box.box-blog-post.box-text-bottom {
	min-height: 100%;
	display: block;
	border: 1px solid #0000000A;
	box-shadow: 0px 12px 25px 0px #0000000D;
	border-radius: 0.5rem;
	background-color: #fff;
	overflow: hidden;
	color: #444;
}
.box.box-blog-post.box-text-bottom .is-divider {
	opacity:0
}
.box.box-blog-post.box-text-bottom .post-title{
    font-size: 1.125rem;
    color: #222;
}
.box.box-blog-post.box-text-bottom .box-text{
	padding-left: 0.75rem;
    padding-right: 0.75rem;
}
/* Header page */
.page-header-excerpt {
    display: flex;
    background: #000 url(/wp-content/uploads/2025/01/general-background-blue.jpg);
    align-items: center;
    justify-content: center;
    text-align: center;
    color: #fff;
    padding: 60px 0;
}
/* Main menu */
.nav-column>li>a,.nav-dropdown>li>a,.nav-vertical-fly-out>li>a,.nav>li>a {
    color: hsl(0deg 0% 0% / 85%);
    transition: all .2s
}
.nav-column li.active>a,.nav-column li>a:hover,.nav-dropdown li.active>a,.nav-dropdown>li>a:hover,.nav-vertical-fly-out>li>a:hover,.nav>li.active>a,.nav>li.current>a,.nav>li>a.active,.nav>li>a.current,.nav>li>a:hover {
    color: #c73d11
}
.nav-dropdown .menu-item-has-children>a,.nav-dropdown .nav-dropdown-col>a,.nav-dropdown .title>a {
    color: #000000;
    font-size: 1rem;
    font-weight: 500;
    letter-spacing: -0.5px;
    text-transform: uppercase;
    font-family: 'Roboto', sans-serif;
}

/* Relative */
nav#nav-below {
    display: none;
}
.crp_related {}
.crp_related h2 {
    margin-bottom: 24px;
}

.crp_related ul {
    display: flex;
    gap: 24px;
    list-style: none;
    flex-wrap: wrap;
}
.crp_related ul li {
    flex-basis: calc(100%);
    list-style: none;
    padding: 0;
    margin:  0;
    border: 1px solid #eaeaea;
    border-radius: 4px;
    min-height: 100%;
    display: block;
    border: 1px solid #0000000A;
    box-shadow: 0px 12px 25px 0px #0000000D;
    border-radius: 0.5rem;
    background-color: #fff;
    overflow: hidden;
    color: #444;
}
.crp_related ul li figure {
    position: relative;
    padding-top: 56%;
}
.crp_related ul li figure img{
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
}
.crp_title, .crp_date, .crp_primary_term {
    display: block;
    padding: 12px;
    text-align: center;
}
.crp_title {
    font-size: 1.125rem;
    color: #222;
    font-weight: 600;
}
.crp_primary_term, .crp_date {
    padding: 0 12px 12px;
    font-size: .8em;
    opacity: .8;
}
.crp_primary_term {
    margin-top: -12px;
}
@media screen and (min-width: 850px) {
    .crp_related ul li {
		flex-basis: calc(33.66666666% - 20px);
	}
}
/* Page header */
.taxonomy-description {
	margin: 25px auto 15px;
}
/* Page header achive */
header.archive-page-header {
    background: #d1371d;
	background: #000 url(/wp-content/uploads/2025/01/general-background-blue.jpg);
    padding: 60px 0;
    margin-top:  -30px;
    margin-bottom: 30px;
}
.page-wrapper header.archive-page-header  .page-title {
    color: #ffeae0;
}
.page-wrapper header.archive-page-header  .page-title > span {
    border-color: #ffffff42;
}