/*
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.   ***************/


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


}
:root {
	--jet-primary : #0d315e;
	--jet-secondary : #f69d21;
	--jet-tertiary: #d45f62;
}

.is-divider {display: none;}

/* Khung chứa mô tả ngắn sản phẩm */
.product-short-description {
    background: #f9fafb; /* Màu nền nhẹ nhàng, sạch sẽ */
    border: 1px solid #e5e7eb; /* Viền xám nhạt tinh tế */
    border-radius: 8px; /* Bo góc mềm mại */
    padding: 5px 20px;
    margin: 5px 0;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.02);
}

/* Định dạng danh sách thông số bên trong */
.product-short-description ul {
    margin: 0;
    padding-left: 0;
    list-style: none; /* Bỏ dấu chấm mặc định */
}

.product-short-description li {
    padding: 6px 0;
    border-bottom: 1px dashed #f0f2f5!important; /* Đường gạch đứt phân chia các dòng */
    font-size: 14px;
    color: #374151;
	margin-left: 0!important;
	margin-bottom: 0!important;
}

/* Xóa đường gạch ở dòng cuối cùng */
.product-short-description li:last-child {
    border-bottom: none;
}

/* Tùy chỉnh chữ đậm tiêu đề thông số */
.product-short-description li strong {
    color: #1f2937;
    font-weight: 600;
}



.slider .col-inner ,.products .product-small .col-inner, .related .product-small .product-small .col-inner,  
.home-product .col-inner{
	border-radius:10px; 
}

.slider .col-inner .product-small, .products .product-small  .product-small, .related .product-small .product-small , .home-product .product-small {  
    margin-bottom: 10px;
    padding: 10px 5px;
    background: #ffffff;
    position: relative;
    border-radius: 10px;
    box-shadow: rgb(60 64 67 / 10%) 0px 1px 2px 0px, rgb(60 64 67 / 15%) 0px 2px 6px 2px;
    transition-duration: .3s;
}

.slider .product-small .box-text, .product-small .box-text,  .home-product .product-small .box-text {
	padding-left: 5px;
	padding-right: 5px;
}

.product-small .box-text p.product-title {
	margin-bottom: 10px;
}

.title-wrapper p a {
	color: var(--jet-primary);
	font-weight: 600;
	font-size: 14px;
    text-align: left;

}

.title-wrapper p a:hover {
    color: var(--jet-secondary);
    
}


.jmore {display: flex; justify-content: space-evenly; align-items:  center;}
.jmore a.jlienhe, .single-product a.jlienhe{ background: var(--jet-primary);}
.jmore a.jdetail {background-color: var(--jet-secondary);}
.jmore a,  .single-product a.jlienhe {padding: 10px; border-radius: 10px; width: 45%; text-align: center; color: #fff; font-weight: 700;}
.jmore a:hover,  .single-product a.jlienhe:hover {box-shadow: rgb(60 64 67 / 10%) 0px 1px 2px 0px, rgb(60 64 67 / 15%) 0px 2px 6px 2px;background: linear-gradient(135deg, var(--jet-primary) 0%, var(--jet-secondary) 100%) !important;}

.single-product a.jlienhe { margin: 10px 0; display: block;}
.single-product .product-main .jdetail {display: none;}
.single-product .product-main .jmore {display: block; }


/* Định dạng chung cho các thẻ a */
.jmore a, 
.single-product a.jlienhe {
    position: relative;
    overflow: hidden; /* Ẩn phần gradient tràn ra ngoài */
    z-index: 1;
    padding: 10px; 
    border-radius: 10px; 
    width: 45%; 
    text-align: center; 
    color: #fff; 
    font-weight: 700;
    display: inline-block; /* Đảm bảo thuộc tính width/padding hoạt động chuẩn trên thẻ a */
    transition: box-shadow 0.3s ease;
}


.jmore a.jlienhe, 
.single-product a.jlienhe { 
    background: var(--jet-primary);
}

.jmore a.jdetail { 
    background-color: var(--jet-secondary);
}

.jmore a::before, 
.single-product a.jlienhe::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%; /* Ban đầu ẩn ở phía bên trái */
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, var(--jet-primary) 0%, var(--jet-secondary) 100%) !important;
    transition: left 0.4s ease-in-out; /* Thời gian và độ mượt khi trượt */
    z-index: -1; /* Nằm dưới nội dung chữ */
}


.jmore a:hover::before, 
.single-product a.jlienhe:hover::before {
    left: 0;
}


.jmore a:hover, 
.single-product a.jlienhe:hover {
    box-shadow: rgb(60 64 67 / 10%) 0px 1px 2px 0px, rgb(60 64 67 / 15%) 0px 2px 6px 2px;
}


.jet-taxonomy .col,  .jet-featured .col {
    padding: 0px 15px 15px 0px;
}

.jet-taxonomy h2 {
    margin-top: 10px;
}

.jet-taxonomy .from_the_blog_excerpt {
    text-align: justify;
}

.jet-taxonomy .post-title , #custom_html-2 .post-title,  #custom_html-3 .post-title{
    font-size: 16px;
    margin: 5px 0px;
}

.jet-taxonomy .box-image img, #custom_html-2 .box-image img , #custom_html-3 .box-image img{
    border-radius: 10px;
}

#secondary .widget-title , #custom_html-2 .widget-title, #custom_html-3 .widget-title{
    text-transform: none;
    font-size: 1.5em;
}

#secondary .is-divider, #flatsome_recent_posts-2 .post_comments {
    display: none;
}

.row.jet-featured, #custom_html-2,  #custom_html-3 {
    margin-left: 0!important;
}


.jet-single .large-8 ul li {
    margin-left: 15px;
}

.jet-breadcums {
    background: #f0f0f0; 
    padding:0; 
    margin-bottom:10px
}
.jet-breadcums .col {
    padding-bottom: 0; 
    height:50px ; 
    line-height: 50px;
    overflow: hidden
}

.category-page-row {
    padding-top: 0px;
}

.page-title-inner {
    padding-top: 10px;
    min-height: 40px;
}



.category-title-ribbon {
  position: relative;
  width: 100%;
  border-bottom: 3px solid #0c2340; /* Đường viền xanh chạy dài toàn chiều rộng */
  margin-bottom: 20px;
}

/* Khối tiêu đề chính chứa chữ */
.category-title-ribbon .ribbon-main {
  position: relative;
  display: inline-block;
  background-color: #0c2340; /* Màu xanh đậm navy */
  color: #ffffff;
  padding: 8px 35px 8px 18px;
  border-top-left-radius: 6px; /* Bo góc trên bên trái nhẹ */
  /* clip-path vát chéo từ trên xuống dưới ở cạnh phải */
  clip-path: polygon(0 0, calc(100% - 22px) 0, 100% 100%, 0 100%);
  z-index: 2;
}

/* Kiểu chữ bên trong tiêu đề */
.category-title-ribbon h2 {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #ffffff;
}

/* Tạo góc ribbon gập 3D ở phía dưới bên trái */
.category-title-ribbon::before {
  content: '';
  position: absolute;
  left: 0;
  top: 100%;
  width: 10px;
  height: 10px;
  background-color: #05101e; /* Màu xanh tối hơn tạo hiệu ứng bóng gập */
  clip-path: polygon(0 0, 100% 0, 100% 100%); /* Cắt thành góc tam giác gập */
  z-index: 1;
}


.form-card-header {
	margin-bottom: 22px;
}
.form-title {
	font-size: 20px;
	font-weight: 800;
	color: var(--jet-text-main);
	text-transform: uppercase;
	letter-spacing: 0.5px;
	margin-bottom: 6px;
}
.form-subtitle {
	font-size: 14px;
	color: var(--jet-text-muted);
	line-height: 1.5;
	margin: 0 !important;
}

/* Form inputs & styling */
.contact-form-card .form-lh .col {
	padding-bottom: 12px;
}
.contact-form-card .form-lh input[type=text],
.contact-form-card .form-lh input[type=tel],
.contact-form-card .form-lh input[type=email] {
	height: 48px;
	border-radius: 10px;
	border: 1.5px solid #cbd5e1;
	background: #f8fafc;
	font-size: 14px;
	color: var(--jet-text-main);
	padding: 0 16px;
	box-shadow: none;
	transition: var(--jet-transition);
}
.contact-form-card .form-lh textarea {
	border-radius: 10px;
	border: 1.5px solid #cbd5e1;
	background: #f8fafc;
	font-size: 14px;
	color: var(--jet-text-main);
	padding: 14px 16px;
	min-height: 110px;
	box-shadow: none;
	transition: var(--jet-transition);
}

/* Form Submit Button */
.contact-form-card .form-lh input[type=submit] {
	width: 100%;
	height: 50px;
	background: linear-gradient(135deg, var(--jet-primary) 0%, var(--jet-secondary) 100%) !important;
	font-size: 15px !important;
	font-weight: 700 !important;
	text-transform: uppercase !important;
	letter-spacing: 0.5px !important;
	border: none !important;
	border-radius: 10px !important;
	box-shadow: 0 6px 18px rgba(46, 100, 23, 0.25);
	cursor: pointer;
	margin-top: 5px;
}



/* 3 Quick Highlight Cards at Top */
.contact-top-badges {
	margin-bottom: 30px;
}
.contact-top-badges .col {
	padding-bottom: 15px;
}
.contact-quick-item {
	background: #ffffff;
	border: 1px solid var(--jet-card-border);
	border-radius: var(--jet-radius-md);
	padding: 18px 20px;
	box-shadow: var(--jet-shadow-sm);
	display: flex;
	align-items: center;
	gap: 16px;
	transition: var(--jet-transition);
	height: 100%;
}

.contact-quick-icon {
	width: 50px;
	height: 50px;
	min-width: 50px;
	border-radius: 14px;
	background: linear-gradient(135deg, rgba(46, 100, 23, 0.1) 0%, rgba(254, 187, 18, 0.15) 100%);
	color: var(--jet-primary);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 22px;
	transition: var(--jet-transition);
}

.contact-quick-info {
	display: flex;
	flex-direction: column;
	gap: 2px;
}
.contact-quick-info .label {
	font-size: 13px;
	font-weight: 600;
	color: var(--jet-text-muted);
	text-transform: uppercase;
	letter-spacing: 0.5px;
}
.contact-quick-info .value {
	font-size: 17px;
	font-weight: 800;
	color: var(--jet-text-main);
	line-height: 1.3;
	text-decoration: none;
	transition: color 0.2s ease;
}

.contact-quick-info .sub {
	font-size: 12px;
	color: #94a3b8;
}

#footer.footer-wrapper {
	position: relative !important;
	background: linear-gradient(180deg, #1f450e 0%, #15300a 100%) !important;
	border-top: 3px solid var(--jet-secondary) !important;
	color: #ffffff !important;
}


#footer .section-bg {
	display: none !important;
}

#footer .col {
	margin-bottom: 0 !important;
}

#footer .col-inner {
	padding: 0 10px !important;
}

/* Headings */
#footer h2, .jtitle {
	font-size: 18px !important;
	font-weight: 700 !important;
	text-transform: uppercase !important;
	letter-spacing: 0.04em !important;
	color: #ffffff !important;
	margin-top: 0 !important;
	margin-bottom: 16px !important;
	padding-bottom: 10px !important;
	position: relative !important;
	display: inline-block !important;
}

.jtitle {color : var(--jet-primary)!important; font-size: 24px!important;}

#footer h2::after, .jtitle:after{
	content: "" !important;
	position: absolute !important;
	bottom: 0 !important;
	left: 0 !important;
	width: 80px !important;
	height: 2.5px !important;
	border-radius: 2px !important;
	background: linear-gradient(90deg, var(--jet-secondary), var(--jet-primary)) !important;
}

#footer h2 + p + h2,
#footer .img + h2 {
	margin-top: 24px !important;
}

/* Column 1: Contact Information */
#footer .col-inner > p {
	display: flex !important;
	align-items: center !important;
	gap: 12px !important;
	margin-bottom: 10px !important;
	font-size: 14.5px !important;
	font-weight: 500 !important;
	color: rgba(255, 255, 255, 0.9) !important;
	line-height: 1.5 !important;
}

#footer .col-inner > p i.fa {
	width: 34px !important;
	height: 34px !important;
	min-width: 34px !important;
	border-radius: 50% !important;
	/* background: rgba(254, 187, 18, 0.15) !important; */
	color: var(--jet-secondary) !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	font-size: 14px !important;
	border: 1px solid var(--jet-secondary) !important;
	transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

#footer .col-inner > p:hover i.fa {
	background: var(--jet-secondary) !important;
	color: #1f450e !important;
	transform: scale(1.1) !important;
	box-shadow: 0 4px 14px rgba(254, 187, 18, 0.35) !important;
}

/* Column 2: Quick Links */
#footer .ux-menu {
	display: flex !important;
	flex-direction: column !important;
	gap: 5px !important;
	margin: 0 !important;
}

#footer .ux-menu-link {
	margin: 0 !important;
	padding: 0 !important;
}

#footer .ux-menu-link__link {
	color: rgba(255, 255, 255, 0.85) !important;
	text-decoration: none !important;
	display: inline-flex !important;
	align-items: center !important;
	font-size: 14px !important;
	font-weight: 500 !important;
	transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
	position: relative !important;
}

#footer .ux-menu-link__link::before {
	content: "\f105" !important;
	font-family: "FontAwesome" !important;
	margin-right: 8px !important;
	font-size: 13px !important;
	color: var(--jet-secondary) !important;
	opacity: 0.75 !important;
	transition: transform 0.25s ease, opacity 0.2s ease !important;
}

#footer .ux-menu-link__link:hover {
	color: #ffffff !important;
	transform: translateX(5px) !important;
}

#footer .ux-menu-link__link:hover::before {
	opacity: 1 !important;
	transform: translateX(2px) !important;
}

#footer .ux-menu-link__text {
	line-height: 1.4 !important;
}


/* Social Media Icons */
#footer .social-icons.follow-icons {
	display: inline-flex !important;
	align-items: center !important;
	flex-wrap: wrap !important;
	gap: 10px !important;
	margin-top: 6px !important;
}

#footer .social-icons.follow-icon-2 {margin-left:5px}

#footer .social-icons.follow-icons .button.circle {
	width: 38px !important;
	height: 38px !important;
	min-height: 38px !important;
	margin: 0 !important;
	background: rgba(255, 255, 255, 0.1) !important;
	border: 1px solid rgba(255, 255, 255, 0.2) !important;
	border-radius: 50% !important;
	color: #ffffff !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15) !important;
}

#footer .social-icons.follow-icons .button.circle i {
	font-size: 15px !important;
	transition: transform 0.2s ease !important;
}

#footer .social-icons.follow-icons .facebook:hover {
	background: #1877f2 !important;
	border-color: #1877f2 !important;
	color: #ffffff !important;
	transform: translateY(-3px) scale(1.1) !important;
	box-shadow: 0 6px 16px rgba(24, 119, 242, 0.4) !important;
}

#footer .social-icons.follow-icons .instagram:hover {
	background: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888) !important;
	border-color: transparent !important;
	color: #ffffff !important;
	transform: translateY(-3px) scale(1.1) !important;
	box-shadow: 0 6px 16px rgba(220, 39, 67, 0.4) !important;
}

#footer .social-icons.follow-icons .tiktok:hover {
	background: #000000 !important;
	border-color: #00f2fe !important;
	color: #ffffff !important;
	transform: translateY(-3px) scale(1.1) !important;
	box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4) !important;
}

#footer .social-icons.follow-icons .phone:hover {
	background: var(--jet-secondary) !important;
	border-color: var(--jet-secondary) !important;
	color: #1f450e !important;
	transform: translateY(-3px) scale(1.1) !important;
	box-shadow: 0 6px 16px rgba(254, 187, 18, 0.4) !important;
}

#footer .social-icons.follow-icons .youtube:hover {
	background: #ff0000 !important;
	border-color: #ff0000 !important;
	color: #ffffff !important;
	transform: translateY(-3px) scale(1.1) !important;
	box-shadow: 0 6px 16px rgba(255, 0, 0, 0.4) !important;
}

/* Absolute Copyright Bar */
#footer .absolute-footer,
.absolute-footer {
	border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
	padding: 16px 0 !important;
}

/* Back to Top Button */
#top-link.back-to-top {
	background: var(--jet-primary) !important;
	border: 2px solid #ffffff !important;
	color: #ffffff !important;
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25) !important;
	transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

#top-link.back-to-top:hover {
	transform: translateY(-4px) scale(1.05) !important;
}

.copyright-footer {	color: #fff;}

/* CSS BUTTON SLIDER CUSTOM*/
.mfp-arrow, .mfp-counter {color: #000}
.mfp-zoom-out-cur .mfp-image-holder .mfp-close { cursor: pointer}

.jet-slider .flickity-prev-next-button {
    width: 50px;
}

.jet-slider .flickity-prev-next-button,
.jet-slider .slider-show-nav .flickity-prev-next-button, 
.jet-slider .slider:hover .flickity-prev-next-button {
    opacity: 1;
}

.jet-slider .flickity-prev-next-button svg, 
.jet-slider .slider-nav-circle .flickity-prev-next-button:hover .arrow, 
.jet-slider .slider-nav-circle .flickity-prev-next-button:hover svg {
    background-color: var(--jet-primary);
    border-color: var(--jet-primary)!important;
    padding: 16px;
    fill: #000!important;
    border-radius: 99px
}

.jet-slider .flickity-page-dots {
    bottom: 5%;
    background-color: #fff;
    padding : 10px 20px;
    border-radius: 99px;
    width: max-content;
    margin: 0 auto;
    box-shadow: 0 0 10px #dcdcdc;
}

.jet-slider .flickity-page-dots .dot {
    width: 8px;
    height: 8px;
	border-color: var(--jet-primary);
	background-color: var(--jet-primary);
	opacity: .8
}

.jet-slider .flickity-page-dots .dot.is-selected {
    width: 30px;
    border-radius: 99px;
	border-color: var(--jet-primary);
	background-color: var(--jet-primary)
}

/* CSS PAGINATION CUSTOM */
.nav-pagination li span, .nav-pagination li a{height: 2.75em;    line-height: 2.5em;    min-width: 2.75em; border: 0}
.nav-pagination li a {background: #efefef}