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

/* ///// GENERAL ///// */
.margin-b20 {
    margin-bottom: 20px !important;
}
.margin-0{
	margin: 0 !important;
}
.padding-0{
	padding: 0 !important;
}

blockquote{
	border-left: 4px solid #ec921a;
}
.orange-underline{
	position: relative;
}
.orange-underline::after{
	background: url(/wp-content/uploads/underline_orange.png) 50% top no-repeat;
	background-size: 100% 9px;
	border-radius: 999px;
	content: "";
	height: 9px;
	image-rendering: -webkit-optimize-contrast;
	left: 0;
	position: absolute;
	right: 0;
	top: 100%;
}

.count-up{
	font-family: "Tektur", sans-serif;
	font-weight: 600;
}

/* Import Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Tektur:wght@400;500;600;700&display=swap');

/* TITLE & BREADCRUMB */
.titleBreadcrumb {
	width: 100%;
	display: flex;
	justify-content: space-between; 
	align-items: end;
	padding: 10px 30px;
}
.leftTitle {
	font-size: 2.3rem; 
	font-weight: bold;
}
.rightBreadcrumb {
	display: inline-flex; 
	align-items: center;
	background:#facc17; 
	padding: 6px 20px 6px 12px;
	border-radius: 4px;
	color:#000000; 
	font-size: 12px; 
	font-weight: 500; 
}
.rightBreadcrumb a{
	text-decoration:none;
	font-weight: 600;
	color:inherit;
}
.rightBreadcrumb a:hover{
	color:#fff;
}
.rightBreadcrumb i{
	margin:0 8px;
}
@media (max-width: 480px) {
	.titleBreadcrumb {
		flex-direction: column;
		align-items: flex-start;
		gap: 10px;
	}
}   

/* Title Underline */
hr.underline{
	border-top: 1.5px solid #facc17;
	height: 0;
	margin: 0 0 20px;
	overflow: visible;
	opacity: 1; /* default:0.1 */
}
hr.underline::after{
	position: relative;
	content: "\f0d7";
	font-family: 'Font Awesome 5 Free';
	font-weight: 900;
	display: inline-block;
	font-size: 22px;
	top: -16px;
	left: 26px;
	color: #facc17;
	line-height: 35px;
}

/* Title Line ngang Text */
.title_line {
	width: 100%;
	display: block;
	clear: both;
	position: relative;
	overflow: hidden;
}
.title_line h3:after{
	background: none repeat scroll 0 0 #bcbcbc;
	content: "";
	height: 1px;
	margin-left: 20px;
	margin-top: -5px;
	position: absolute;
	top: 50%;
	width: 100%;
}

/* Button View More */
a.view-more{
	color: #facc17;
}
a.view-more::after{
	position: relative;
	content: '\f101';
	font-family: 'Font Awesome 5 Free';
	font-weight: 900;
	margin-left: 3px;
	display: inline-block;
	font-size: 0.6rem;
}

/* list */
ul li.bullet-arrow{
	border-bottom: none;
	padding: 5px 0 5px 25px;
}
ul li.bullet-arrow:before{
	color: #facc17;
	line-height: 1.2;
}
.bullet-arrow a:hover{
	color: #facc17;
}

ul li.itemProduct {
	list-style: none;
	margin-left: 0;
}
li.itemProduct::before {
	content: "\f105"; 
	font-family: 'Font Awesome 5 Free';
	font-weight: 900; 
	margin-right: 8px;
	color: #facc17;
	font-size: 0.85rem;
}
.itemProduct a{
	color: inherit;
	text-decoration: none;
}
.itemProduct a:hover{
	color: #e2762e;
}

/* ///// TYPOGRAPHY ///// */
.num{
	color: white; 
	font-size: 3rem; 
	font-weight: 600;
}
.sub{
	font-size: 1.6rem; 
	font-weight: 600;
}


/* Contact Us */
.contactUs ul li{
	list-style: none;
	margin-left: 0;
}
.contactUs ul li i{
	color: #facc17;
	margin-right: 10px;
}


/* ///// MENU ///// */

.header-main .nav > li > a{
	color: #672e02;
	font-weight: 500;
	font-size: 0.8rem;
}
.header-nav-main.nav > li.active > a{
	font-weight: 600;
}

.topMenu{
	display: flex; 
	align-items: center; 
	gap: 10px; 
	font-size: 10px; 
	font-weight: bold;
	color: #ddd;
}
a.topMenuItem{
	display: flex; 
	color: #03584f; 
	text-decoration: none; 
	align-items: center; 
	gap: 5px;
}
a.topMenuItem i{
	font-size: 9px;
}

.copyright{
	font-size: 0.8rem;
	color: #4f5459;
}

/* Menu Vertical Style 1 */
.verticalMenu{
	padding: 0;
	margin: 20px 0;
	background-color: #f7f7f7;
	border: 1px solid #ddd;
	border-radius: 4px;
	box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}
.verticalMenu h3{
	background-color: #facc17;
	margin: 0;
	padding: 10px;
	font-size: 0.8rem;
	border-top-left-radius: 4px;
	border-top-right-radius: 4px;
}
.verticalMenu ul{
	padding: 0;
	margin: 0;
}
li.itemMenu {
	list-style: none;
	padding: 10px;
	margin: 0;
	font-size: 0.8rem;
	border-bottom: 1px solid #ddd;
	cursor: pointer;
}
li.itemMenu:hover {
	background-color: #e0e0e0;
}
li.itemMenu:last-child {
	border-bottom: none;
}
li.itemMenu::before {
	content: "\f0da"; /* Biểu tượng menu (hamburger) */
	font-family: 'Font Awesome 5 Free';
	font-weight: 900; /* Đảm bảo biểu tượng hiển thị đúng */
	margin-right: 8px;
	color: #facc17;
}
li.itemMenu a{
	color: inherit;
	text-decoration: none;
}

/* Menu Vertical Style2 */
.verticalMenu2{
	padding: 0 15px;
	margin: 20px 0;
	border: 1px solid #eee;
	border-radius: 4px;
	box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}
.verticalMenu2 h3{
	margin: 10px 0;
	padding: 14px 0px;
	font-size: 0.85rem;
	font-weight: 600;
	position: relative;
}
.verticalMenu2 h3::before {
	content: "";
	position: absolute;
	left: -17px;
	top: 6px;
	bottom: 6px;
	width: 3px;
	background-color: #facc17;
	border-radius: 2px;
}
.verticalMenu2 ul{
	padding: 0;
	margin: 0;
}
li.itemMenu2 {
	list-style: none;
	padding: 10px 0px;
	margin: 0;
	font-size: 0.8rem;
	border-bottom: 1px solid #eee;
	cursor: pointer;
}
li.itemMenu2:hover {
	color: #facc17;
}
li.itemMenu2:last-child {
	border-bottom: none;
}
li.itemMenu2::before {
	content: "\f0da"; 
	font-family: 'Font Awesome 5 Free';
	font-weight: 900;
	font-size: 0.8rem;
	margin-right: 8px;
	color: #999;
}
li.itemMenu2 a{
	color: inherit;
	text-decoration: none;
}


/* ///// Zigzag Categories List ///// */
.zigzagCatsList {
	height: 470px;
	width: 1040px;
	padding: 0px;
	margin: 0 auto;
	transition: all 1s;
	position: relative;
	background-size: 100% 100%;
	background-repeat: no-repeat;
	background-position: top center;
	background-image: url("https://www.vmnpharma.com/wp-content/uploads/2020/04/home-concept-small.png");
}
.zigzagCatsItem {
	position: absolute;
	transition: all 1s;
}
.zigzagCatsItem:hover {
	opacity: 0.5;
	transition: all 1s;
}
.chicken-image {
	left: 0px;
}
.chicken-image>img {
	width: 290px;
	height: 293px;
}
.cow-image {
	left: 366px;
}
.cow-image>img {
	width: 290px;
	height: 293px;
}
.koyun-image {
	top: -10px;
	left: 606px;
}

.koyun-image>img {
	width: 135px;
	height: 136px;
}

.swine-image {
	left: 690px;
}
.swine-image>img {
	width: 290px;
	height: 293px;
}
.aqua-image {
	left: 528px;
	bottom: 6px;
}
.aqua-image>img {
	width: 290px;
	height: 293px;
}
.horse-image {
	left: 314px;
	bottom: 62px;
}
.horse-image>img {
	width: 178px;
	height: 180px;
}
.kedi-image {
	left: 770px;
	bottom: 7px;
}
.kedi-image>img {
	width: 132px;
	height: 133px;
}
.dog-image {
	left: 855px;
	bottom: 86px;
}
.dog-image>img {
	width: 132px;
	height: 133px;
}
@media only screen and (max-width: 1040px) {
	.zigzagCatsList {
		width: 900px;
	}
	.chicken-image {
		left: 0px;
	}
	.chicken-image>img {
		width: 290px;
		height: 293px;
	}
	.cow-image {
		left: 290px;
	}
	.cow-image>img {
		width: 290px;
		height: 293px;
	}
	.koyun-image {
		top: 0px;
		left: 512px;
	}
	.koyun-image>img {
		width: 135px;
		height: 136px;
	}
	.swine-image {
		left: 580px;
	}
	.swine-image>img {
		width: 290px;
		height: 293px;
	}
	.aqua-image {
		left: 435px;
		bottom: 0px;
	}
	.aqua-image>img {
		width: 290px;
		height: 293px;
	}
	.horse-image {
		left: 250px;
		bottom: 77px;
	}
	.horse-image>img {
		width: 178px;
		height: 180px;
	}
	.kedi-image {
		left: 660px;
		bottom: 12px;
	}
	.kedi-image>img {
		width: 132px;
		height: 133px;
	}
	.dog-image {
		left: 727px;
		bottom: 80px;
	}
	.dog-image>img {
		width: 132px;
		height: 133px;
	}
}
@media only screen and (max-width: 910px) {
	.zigzagCatsList {
		width: 800px;
	}
	.chicken-image {
		left: 0px;
	}
	.chicken-image>img {
		width: 260px;
		height: 263px;
	}
	.cow-image {
		left: 268px;
	}
	.cow-image>img {
		width: 260px;
		height: 263px;
	}
	.koyun-image {
		top: 16px;
		left: 480px;
	}
	.koyun-image>img {
		width: 105px;
		height: 106px;
	}
	.swine-image {
		left: 536px;
	}
	.swine-image>img {
		width: 260px;
		height: 263px;
	}
	.aqua-image {
		left: 402px;
		bottom: 62px;
	}
	.aqua-image>img {
		width: 260px;
		height: 263px;
	}
	.horse-image {
		left: 232px;
		bottom: 118px;
	}
	.horse-image>img {
		width: 158px;
		height: 160px;
	}
	.kedi-image {
		left: 612px;
		bottom: 70px;
	}
	.kedi-image>img {
		width: 112px;
		height: 113px;
	}
	.dog-image {
		left: 674px;
		bottom: 140px;
	}
	.dog-image>img {
		width: 112px;
		height: 113px;
	}
}
@media only screen and (max-width: 815px) {
	.zigzagCatsList {
		width: 768px;
	}
	.chicken-image {
		left: 0px;
	}
	.chicken-image>img {
		width: 250px;
		height: 253px;
	}
	.cow-image {
		left: 260px;
	}
	.cow-image>img {
		width: 250px;
		height: 253px;
	}
	.koyun-image {
		top: 10px;
		left: 462px;
	}
	.koyun-image>img {
		width: 105px;
		height: 106px;
	}
	.swine-image {
		left: 520px;
	}
	.swine-image>img {
		width: 250px;
		height: 253px;
	}
	.aqua-image {
		left: 390px;
		bottom: 76px;
	}
	.aqua-image>img {
		width: 250px;
		height: 253px;
	}
	.horse-image {
		left: 238px;
		bottom: 143px;
	}
	.horse-image>img {
		width: 138px;
		height: 130px;
	}
	.kedi-image {
		left: 592px;
		bottom: 80px;
	}
	.kedi-image>img {
		width: 112px;
		height: 113px;
	}
	.dog-image {
		left: 655px;
		bottom: 148px;
	}
	.dog-image>img {
		width: 112px;
		height: 113px;
	}
}
@media only screen and (max-width: 785px) {
	.zigzagCatsList {
		width: 100%;
		height: 700px;
	}
	.chicken-image {
		left: 50%;
		transform: translateX(-210px);
	}
	.chicken-image>img {
		width: 250px;
		height: 253px;
	}
	.cow-image {
		left: 50%;
		top: 284px;
		transform: translateX(-208px);
	}
	.cow-image>img {
		width: 250px;
		height: 253px;
	}
	.koyun-image {
		top: -10px;
		left: 50%;
	}
	.koyun-image>img {
		width: 115px;
		height: 116px;
	}
	.swine-image {
		left: 50%;
		top: 140px;
		transform: translateX(-60px);
	}
	.swine-image>img {
		width: 250px;
		height: 253px;
	}
	.aqua-image {
		left: 50%;
		top: 430px;
		transform: translateX(-64px);
	}
	.aqua-image>img {
		width: 250px;
		height: 253px;
	}
	.horse-image {
		left: 50%;
		top: 215px;
		transform: translateX(-218px);
	}
	.horse-image>img {
		width: 110px;
		height: 110px;
	}
	.kedi-image {
		left: 50%;
		bottom: 228px;
		transform: translateX(85px);
	}
	.kedi-image>img {
		width: 112px;
		height: 113px;
	}
	.dog-image {
		left: 50%;
		bottom: 82px;
		transform: translateX(-210px);
	}
	.dog-image>img {
		width: 112px;
		height: 113px;
	}
}


/* ///// FEATURRES MODULE ///// */
.features-module {
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
	justify-content: center;
	padding: 20px;
}
.featureItem {
	flex: 1;
	min-width: 200px;
	max-width: 300px;
	background: #f7f7f7;
	border-radius: 10px;
	text-align: center;
	position: relative;
	padding: 20px; /* padding-top để tạo khoảng trống cho đường kẻ ngang */
}
.featureItem::before {
	content: "";
	position: absolute;
	top: 70px; 
	left: 0;
	width: 100%;
	height: 3px;
	background-color: orange;
	border-radius: 10px;
	z-index: 1; 
}
.featureItem:nth-child(odd)::before {
	background-color: #8CC63F; 
}
.featureItem:nth-child(even)::before {
	background-color: #005f5f; 
}
.featureItem:hover {
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
	transform: translateY(-5px);
	transition: all 0.3s ease;
}
.featureItem h3 {
	color: #8CC63F;
	margin-top: 15px;
	font-weight: 600;
	font-size: 1.2rem;
}
.featureItem:nth-child(odd) h3 {
	color: #8CC63F;
}
.featureItem:nth-child(even) h3 {
	color: #005f5f;
}
.featureItem p {
	color: #555;
	font-size: 13px;
	line-height: 1.6;
}
.circle-btn {
	width: 90px;
	height: 90px;
	border-radius: 50%;
	background-color: #8CC63F;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 auto;
	color: white;
	font-size: 35px;
	text-decoration: none;
	transition: 0.3s;
	position: relative;
	z-index: 3;
}
.circle-btn:hover {
	transform: scale(1.1);
	background-color: #ff6600;
}
.circle-btn:active {
	background-color: #cc3300;
}


/* /////// BLOG ///////// */

h5.post-title {
    font-size: 1.2rem;
    font-weight: 600;
    margin-top: -0.7rem;
}

/* Tiêu đề item */
@media screen and (min-width: 550px) {
	.box-list-view .box .box-image, .box-list-view .box .box-text, .box-vertical .box-image, .box-vertical .box-text{
		direction: ltr;
		display: table-cell;
		vertical-align: top;	/* căn top */
	}
}


/* ///// CSS CHO TEMPLATE CATE2 ///// */

/* Banner Cate1 */
.bannerCate1{
	margin-top: 30px;
}

/* Banner Cate2 */
.cate2-banner{
	margin: 20px 0 30px;
}

/* Pate Title: Circe A Word */
.circleAWordTitle {
	position: relative; 
	display: flex; 
	gap: 10px; 
	justify-content: center;
	font-weight: 600;
}
.highlightWord { 
	position: relative; 
	display: inline-block; 
	padding: 0 6px; 
}
.highlightWord svg {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 220px; 	/* điều chỉnh chiều ngang đường Path */
	height: 80px;	/* điều chỉnh chiều cao đường Path */
	transform: translate(-50%, -50%) scale(0.86);
	overflow: visible;
	pointer-events: none;
}
.highlightWord svg path {
	stroke: #facc17;
	fill: none;
	stroke-linecap: round;
	stroke-linejoin: round;
	stroke-width: 10;
	stroke-dasharray: 1500;
	stroke-dashoffset: 1500;
	animation: circleAWordLoopPath 4s linear infinite;
}

@keyframes circleAWordLoopPath {
	0%        { stroke-dashoffset: 1500; opacity: 0; }   /* bắt đầu ẩn */
	20%       { stroke-dashoffset: 0;    opacity: 1; }   /* vẽ xong (~0.45s) */
	80%       { stroke-dashoffset: 0;    opacity: 1; }   /* giữ hiển thị */
	80.01%    { stroke-dashoffset: 1500; opacity: 0; }   /* NHẢY ngay về ẩn */
	100%      { stroke-dashoffset: 1500; opacity: 0; }   /* giữ ẩn tới khi bắt đầu vòng mới */
}

/* Description */
.cat-description p{
	font-size: 13px;
}
/* Vùng filter */
.tag-filters {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
	margin: 30px 0;
}
/* Nút filter */
.tag-filter-btn {
    background: #f3f4f6; /* xám nhạt */
    color: #333;
    border: none;
    border-radius: 10px; 
    padding: 8px 20px;
    font-size: 12px;
    cursor: pointer;
    transition: all 0.3s ease;
/*     box-shadow: 0 2px 6px rgba(0,0,0,0.05); */
}
.tag-filter-btn:hover {
    background: #facc17;
    color: #000;
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}
/* Active tag (nếu muốn toggle active) */
.tag-filter-btn.active {
    background: #facc17;
    color: #000;
}


/* Grid bài viết */
#posts-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 20px;
}
/* Card */
.post-card {
    background: #fff;
    border-radius: 16px;
    padding: 20px;
    text-align: center;
    transition: all 0.3s ease;
    box-shadow: 0 2px 6px rgba(0,0,0,0.05);
}
.post-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 6px 16px rgba(0,0,0,0.1);
}
/* Ảnh */
.post-card img {
    width: 120px;
    height: 120px;
    object-fit: cover;
    border-radius: 50%;
    margin-bottom: 15px;
    transition: transform 0.3s ease;
}
.post-card:hover img {
    transform: scale(1.05);
}
/* Tiêu đề */
.post-card h2 {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 10px;
}
.post-card h2 a {
    color: #111;
    text-decoration: none;
}
.post-card h2 a:hover {
    color: #facc17;
}
/* Mô tả */
.post-card p {
    font-size: 14px;
    color: #555;
    margin-bottom: 15px;
}
/* Nút xem thêm */
.post-card a.inline-block {
    display: inline-block;
    padding: 8px 80px;
    border-radius: 999px;
    background: #facc17;
    color: #000;
    font-weight: 500;
	font-size: 0.8rem;
    text-decoration: none;
    transition: all 0.3s ease;
}
.post-card a.inline-block:hover {
    background: #eab308; /* vàng đậm hơn */
    transform: translateY(-2px);
}
#load-more {
    background: #f9f9f9;
    border: 1px solid #ddd;
    border-radius: 999px;
    padding: 10px 100px;
	margin: 50px 0;
    cursor: pointer;
    font-size: 15px;
    transition: all 0.3s ease;
/*     box-shadow: 0 2px 6px rgba(0,0,0,0.05); */
}
#load-more:hover {
    background: #facc17;
    color: #000;
    transform: translateY(-2px);
}



/* ///// CSS CHO TEMPLATE ARTICLE (FORMAT = IMAGE) ///// */

.productArticle{
	margin-top: 30px;
}
.productArticle h1{
	font-weight: 600;
}

.product h1{
	font-weight: 600;
	font-size: 1.3rem;
}
.product li{
	list-style: none;
	margin-left: 0 !important;
}
.product li::before{
	content: "\f058"; 
	font-family: 'Font Awesome 5 Free';
	font-weight: 900; 
	margin-right: 8px;
	color: #489f00;
	font-size: 0.85rem;
}



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


}