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

/*************** ADD CUSTOM CSS HERE.   ***************/
body, #main, #wrapper {
    background: linear-gradient(0deg, #FFFFF0, #FFFFF0), #FFFFFF !important;
    /*position: relative;*/
}
.nav-column>li>a,
.nav-dropdown>li>a,
.nav-vertical-fly-out>li>a,
.nav>li>a,
.header-button-1 a{
	/*font-size: 1rem;*/
/* 	letter-spacing: -0.35px; */
    /*color: var(--primary-color);*/
}
.nav-column>li:hover>a,
.nav-dropdown>li:hover>a,
.nav-vertical-fly-out>li:hover>a,
.nav>li:hover>a {
    color: var(--fs-color-secondary);
}	
@media only screen and (max-width: 48em) {
/*************** ADD MOBILE ONLY CSS HERE  ***************/

.font-11px-small{
	font-size: 11px !important;
}
	
}
.image-167{
	.img-inner{
		height: 2px;
    	display: flex;

	}
}
.section-title{
	h2{
/* 		font-family: 'Roboto'; */
		font-style: normal;
		font-weight: 900;
		font-size: 38px;
		line-height: 1;
		margin-bottom: 0;
	}
	h3{
/* 		font-family: 'Roboto'; */
		font-style: normal;
		font-weight: 900;
		font-size: 24px;
		line-height: 1;
		margin-bottom: 0;
	}
}
.blog-post-1{
	.image-cover{
		border-radius: 15px;
		overflow: hidden;
	}
	.cat-label{
		/* Chủ đề 1: */
		font-style: normal;
		font-weight: 400;
		font-size: 15px;
		line-height: 150%;
		/* identical to box height, or 26px */

		/* Red */
		color: #F72D21;
		text-transform: none !important;
	}
	.post-title,
		.post-title a{
		/* Làm thế nào rút ngắn quá trình phục hồi sau phẫu thuật thẩm mỹ */

		font-style: normal;
		font-weight: 800;
		font-size: 22px ;
		line-height: 28px;
		min-height: 44px;
		/* blue - nhạt */
		color: #0381E4;

		display: -webkit-box;
	  -webkit-line-clamp: 2;     /* Giới hạn 2 dòng */
	  -webkit-box-orient: vertical;
	  overflow: hidden;
	  text-overflow: ellipsis;
	}
	.is-divider{
		display: none !important;
	}
	.from_the_blog_excerpt{
		/* Lorem Ipsum is */

		font-style: normal;
		font-weight: 400;
		font-size: 15px;
		line-height: 150%;
		/* or 26px */
		text-align: justify;

		/* Text */
		color: #142F4D;
		
		display: -webkit-box;
	  -webkit-line-clamp: 4;     /* Giới hạn 2 dòng */
	  -webkit-box-orient: vertical;
	  overflow: hidden;
	  text-overflow: ellipsis;


	}
}
.blog-post-2{
	.image-cover{
		border-radius: 15px;
		overflow: hidden;
	}
	.cat-label{
		/* Chủ đề 1: */
		font-style: normal;
		font-weight: 400;
		font-size: 16px;
		line-height: 162.19%;
		/* identical to box height, or 26px */

		/* Red */
		color: #F72D21;
		text-transform: none !important;
	}
	.post-title,
		.post-title a{
		/* Làm thế nào rút ngắn quá trình phục hồi sau phẫu thuật thẩm mỹ */

		font-style: normal;
		font-weight: 800;
		font-size: 28px;
		line-height: 33px;
		min-height: 66px;
		/* blue - nhạt */
		color: #0381E4;

		display: -webkit-box;
	  -webkit-line-clamp: 2;     /* Giới hạn 2 dòng */
	  -webkit-box-orient: vertical;
	  overflow: hidden;
	  text-overflow: ellipsis;
	}
	.is-divider{
		display: none !important;
	}
	.from_the_blog_excerpt{
		/* Lorem Ipsum is */

		font-style: normal;
		font-weight: 400;
		font-size: 16px;
		line-height: 162.19%;
		/* or 26px */
		text-align: justify;

		/* Text */
		color: #142F4D;
		
		display: -webkit-box;
	  -webkit-line-clamp: 2;     /* Giới hạn 2 dòng */
	  -webkit-box-orient: vertical;
	  overflow: hidden;
	  text-overflow: ellipsis;


	}
}
.flickity-prev-next-button.previous{
/* 	background: linear-gradient(270deg, rgba(255, 255, 255, 0) 0%, #FFFFFF 62.11%); */
	width: calc(25vw);
	max-width: 2.5rem;
	height: 100%;
	top: 0;
	left:0;
	opacity: 1;
	display: block;
	.flickity-button-icon{
		padding: 28%;
		left: 72%;
	}
}
.flickity-prev-next-button.next{
/* 	background: linear-gradient(270deg, #FFFFFF 40.62%, rgba(255, 255, 255, 0) 99.13%); */
	width: calc(25vw);
	max-width: 2.5rem;
	height: 100%;
	top: 0;
	right:0;
	opacity: 1;
	display: block;
	.flickity-button-icon{
		padding: 28%;
		left: 28% ;
	}
}
/* // Large devices (desktops, 992px and up) */
@media (min-width: 992px) { 
	.image-167{
		.img-inner{
			height: 7px !important;
			display: flex;

		}
	}
	.section-title{
		h2{

			font-size: 78px;
			line-height: 1;
		}
		h3{
			font-size: 49px;
			line-height: 1;
		}
	}
	.blog-post-1{
		.image-cover{
			border-radius: 15px;
			overflow: hidden;
		}
		.cat-label{
			font-size: 16px;
			line-height: 162.19%;
		}
		.post-title,
		.post-title a{
			font-size: 28px;
			line-height: 33px;
			min-height: 66px;
			-webkit-line-clamp: 2;
		}
		.is-divider{
			display: none !important;
		}
		.from_the_blog_excerpt{
			font-size: 16px;
			line-height: 162.19%;
			
			-webkit-line-clamp: 8; 


		}
	}
	.blog-post-2{
		.image-cover{
			border-radius: 15px;
			overflow: hidden;
		}
		.cat-label{
			font-size: 16px;
			line-height: 162.19%;
		}
		.post-title,
		.post-title a{
			font-size: 28px;
			line-height: 33px;
			min-height: 99px;
		  -webkit-line-clamp: 3;     /* Giới hạn 2 dòng */
		  
		}
		.is-divider{
			display: none !important;
		}
		.from_the_blog_excerpt{
			font-size: 16px;
			line-height: 162.19%;
		  -webkit-line-clamp: 2;     /* Giới hạn 2 dòng */
		  


		}
	}
}
.hero-decoration-right{
	position: absolute;
    width: auto !important;
    height: 200px;
    bottom: -30px;
    right: 0;
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
	img{
		width: auto!important;
    	height: 240px!important;
	}
}
.footer-wrapper{
	/*background-color: rgba(245, 244, 235, 1);*/
	background: #F5F4EB;
	color: var(--fs-experimental-link-color);
	h1, h2, h3, h4, h5, h6, .heading-font {
		color: var(--fs-color-secondary) !important;
	}
	a,p{
		color: var(--fs-experimental-link-color) !important;
	}
	.form-flat input:not([type=submit]), .form-flat select, .form-flat textarea{
		background-color: #fff !important;
	}
}


.fixed-social-wrapper {
    position: fixed;
    right: 20px; /* Base for container 100% */
    bottom: calc(50vh - 80px);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px; 
    z-index: 1000;
}

.social-button {
    width: 45px;
    height: 45px;
    background: transparent !important;
/*     border: 3px solid #FFFFFF !important; */
/*     border-radius: 30px 30px 0px 30px; */
    
/*     position: relative; 
    overflow: visible;  */
    z-index: 2; 
    
/*     text-decoration: none;*/
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
/*     box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25); */
	-webkit-animation: shake-br 0.8s cubic-bezier(0.455, 0.030, 0.515, 0.955) infinite both;
	        animation: shake-br 0.8s cubic-bezier(0.455, 0.030, 0.515, 0.955) infinite both; 
}



.social-button .icon {
    width: 45px; /* Kích thước icon */
    height: 45px;
    z-index: 3;
}

.social-button:hover {
/*     background: #c3a859; */
    transform: scale(1.05);
}
.social-button:hover::before {
    transform: scale(1.05);
}
/* ----------------------------------------------
 * Generated by Animista on 2025-10-23 1:50:0
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info. 
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation shake-br
 * ----------------------------------------
 */
@-webkit-keyframes shake-br {
  0%,
  100% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
    -webkit-transform-origin: 100% 100%;
            transform-origin: 100% 100%;
  }
  10% {
    -webkit-transform: rotate(2deg);
            transform: rotate(2deg);
  }
  20%,
  40%,
  60% {
    -webkit-transform: rotate(-4deg);
            transform: rotate(-4deg);
  }
  30%,
  50%,
  70% {
    -webkit-transform: rotate(4deg);
            transform: rotate(4deg);
  }
  80% {
    -webkit-transform: rotate(-2deg);
            transform: rotate(-2deg);
  }
  90% {
    -webkit-transform: rotate(2deg);
            transform: rotate(2deg);
  }
}
@keyframes shake-br {
  0%,
  100% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
    -webkit-transform-origin: 100% 100%;
            transform-origin: 100% 100%;
  }
  10% {
    -webkit-transform: rotate(2deg);
            transform: rotate(2deg);
  }
  20%,
  40%,
  60% {
    -webkit-transform: rotate(-4deg);
            transform: rotate(-4deg);
  }
  30%,
  50%,
  70% {
    -webkit-transform: rotate(4deg);
            transform: rotate(4deg);
  }
  80% {
    -webkit-transform: rotate(-2deg);
            transform: rotate(-2deg);
  }
  90% {
    -webkit-transform: rotate(2deg);
            transform: rotate(2deg);
  }
}

/* ========== Product Card – Botanical Heritage ========== */
.product-small .col-inner {
  background: #F5F5DC;
  border-radius: 8px;
  overflow: hidden;
  transition: box-shadow .3s;
}
.product-small:hover .col-inner {
  box-shadow: 0 4px 24px rgba(85,107,47,.05);
}
.product-small .box-image {
  position: relative;
  padding-top: 100%;
  overflow: hidden;
}
.product-small .box-image img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .7s;
}
.product-small:hover .box-image img {
  transform: scale(1.05);
}
.product-small .badge-container,
.product-small .image-tools,
.product-small .grid-tools {
  display: none !important;
}
.product-small .category.uppercase {
  display: none;
}
.product-small .name.product-title {
  margin: 0;
}
.product-small .name.product-title a {
  /*font-family: 'Libre Caslon Text', serif;*/
  font-size: 24px;
  font-weight: 400;
  line-height: 1.4;
  color: #1B1C17;
}
.product-small .name.product-title a:hover {
  color: #556B2F;
}
.product-small .box-excerpt {
  /*font-family: 'Be Vietnam Pro', sans-serif;*/
  font-size: 14px;
  line-height: 1.5;
  color: #45483c;
  margin: 8px 0 16px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 42px;
}
.product-small .box-text.box-text-products {
  padding: 16px;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  font-size: 1em;
}
.product-card-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: auto;
}
.product-card-footer .contact-label {
  /*font-family: 'Be Vietnam Pro', sans-serif;*/
  font-size: 12px;
  font-weight: 600;
  /*text-transform: uppercase;*/
  letter-spacing: .05em;
  color: #556B2F;
  line-height: 1.2;
  text-decoration: none;
  transition: color .3s;
}
.product-card-footer .contact-label:hover {
  color: #3E5219;
}
.product-card-footer .detail-link {
  /*font-family: 'Be Vietnam Pro', sans-serif;*/
  font-size: 12px;
  font-weight: 600;
  /*text-transform: uppercase;*/
  letter-spacing: .05em;
  color: #8B4513;
  line-height: 1.2;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: color .3s;
  text-decoration: none;
}
.product-card-footer .detail-link:hover {
  color: #556B2F;
}
.product-card-footer .detail-link .arrow {
  font-size: 16px;
  line-height: 1;
}

/* ========== Section Title – Botanical Heritage ========== */
.product-title-col .col-inner h2.uppercase {
/*  font-family: 'Libre Caslon Text', serif;
  font-size: 32px;
  font-weight: 400;
  line-height: 1.3;
  color: #1B1C17;
  text-transform: none;
  letter-spacing: normal;
  margin: 0;*/
}
.product-title-col .col-inner p {
 /* font-family: 'Be Vietnam Pro', sans-serif;
  font-size: 16px;
  line-height: 1.6;
  color: #45483c;
  margin: 8px 0 0;*/
}

/* ========== Tab Navigation – Chip Style ========== */
.product-tabs .nav-pills {
  gap: 12px;
  flex-wrap: nowrap;
  overflow-x: auto;
  padding-bottom: 8px;
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.product-tabs .nav-pills::-webkit-scrollbar {
  display: none;
}
.product-tabs .nav-pills > li {
  margin: 0;
}
.product-tabs .nav-pills > li > a {
/* font-family: 'Be Vietnam Pro', sans-serif;*/
  font-size: 12px;
  font-weight: 600;
  /*text-transform: uppercase;*/
  letter-spacing: .05em;
  line-height: 1.2;
  padding: 8px 16px;
  border-radius: 9999px;
  background: transparent;
  color: #45483c;
  border: 1px solid transparent;
  white-space: nowrap;
  transition: background-color .3s, color .3s;
}
.product-tabs .nav-pills > li > a:hover {
  background: rgba(245,245,220,.5);
  color: #45483c;
}
.product-tabs .nav-pills > li.active > a {
  background: #F5F5DC;
  color: #8B4513;
  border-color: #E5E5CC;
}
section.product-section .slider .product,
section.product-section .slider .product-small.box{
	/*height: 100%;*/
}
/* ========== Title & Tabs cùng hàng (desktop) ========== */
@media (min-width: 850px) {
  section.product-section .product-title-col {
    position: absolute;
    /*left: 0;*/
    /*top: 0;*/
    width: auto;
    max-width: 50%;
    z-index: 1;
  }
  section.product-section .product-title-col .col-inner {
    padding: 0;
  }
  section.product-section .product-col {
    max-width: 100% !important;
    flex-basis: 100% !important;
    width: 100% !important;
    padding-bottom: 0;
  }
  section.product-section .product-col .nav-pills {
    justify-content: flex-end;
    padding-top: 41px;
  }
}
.shop-journal{
	.post-title,
	.post-title a{
	/* font-family: 'Libre Caslon Text', serif;*/
		font-style: normal;
		font-weight: 400;
		font-size: 24px;
		line-height: 34px;
		display: flex;
		align-items: center;
		color: #1B1C17;
	}
	.cat-label{
	/* 	font-family: 'Be Vietnam Pro', sans-serif;*/
		font-style: normal;
		font-weight: 600;
		font-size: 12px;
		line-height: 14px;
		display: flex;
		align-items: center;
		letter-spacing: 1.2px;
		text-transform: uppercase;
	}
	.is-divider{
		display: none !important;
	}
}
.grid-col-1{
	&.large-9{
		max-width: 58.333%;
		flex-basis: 58.333%;
	}
}
.grid-col-1-2{
	&.large-3{
		max-width: 41.667%;
		flex-basis: 41.667%;
	}
}