/*
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.   ***************/
/***** Anh Featured Title trong moi bai viet *****/
.page-title .title-bg.bg-top {
  background-position: 50% 45% !important;
}


/***** iCon loading bo loc san pham *****/
@keyframes fl-spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
.fl-filter-loading {
  display: none;
  width: 12px;
  height: 12px;
  border: 2px solid #eee;
  border-top: 2px solid #c39953;
  border-radius: 50%;
  margin-left: 8px;
  animation: fl-spin 0.8s linear infinite;
}
li.is-loading .fl-filter-loading { 
  display: inline-block;
}
li.is-loading label {
  opacity: 0.5; pointer-events: none;
}


/***** Smooth Scrolling *****/
html {
  scroll-behavior: smooth;
}


/***** Muc Luc *****/
.wp-block-rank-math-toc-block {
  margin-bottom: 26px;
  border-radius: 5px;
  border: none !important;
  box-shadow: 1px 2px 12px 0px #f5e3c380 !important;
  border-left: 3px solid #cfb07a !important;
  background-color: #fff;
  max-width: 60%;
}
.wp-block-rank-math-toc-block nav ul, .wp-block-rank-math-toc-block nav ul li {
  list-style: none;
  margin: 0;
  padding: 0;
}
.wp-block-rank-math-toc-block nav a {
  display: block;
  padding: 6px 0 6px 16px;
  margin: 0;
  text-decoration: none;
  color: inherit;
}
.wp-block-rank-math-toc-block nav ul ul a {
  padding-left: 30px;
}
.wp-block-rank-math-toc-block nav ul li a:hover {
  background-color: #cfb07a91;
}
#rank-math-toc > h2 {
  font-size: 1.4em;
  margin-bottom: 0;
  color: #555555;
  text-align: center;
  line-height: revert;
  background-color: #ceb07b;
}


/***** Heading *****/
h1, h1 {
  font-size: 1.6em;
}
h2, h2 {
  font-size: 1.4em;
}
h3, h4 {
  font-size: 1.2em;
}
h5, h6 {
  font-size: 1.1em;
}


/***** Back To Top Button *****/
.back-to-top, .back-to-top.active {
  font-size: small;
  background-color: #ceb07b;
  border: none !important;
  border-radius: 2px;
  z-index: 999;
}
.back-to-top.active:hover {
  background: #ceb07b !important;
}
.icon-angle-up:before {
  font-size: x-large;
  color: #ffffff;
}


/***** Blockquote *****/
blockquote {
  font-size: .9em !important;
  color: #777 !important;
  border-left: none !important;
  padding: 0 .75em 0 .75em;
}
blockquote:before {
  font-family: "FontAwesome";
  content: '\f10d';
  color: #ceb07b;
  float: left;
  font-size: 12px;
  font-style: italic;
  padding-right: 5px;
}


/***** Image Caption *****/
.wp-caption .wp-caption-text {
  background: none;
  padding: 0.4em 0 0 0;
  margin: 0 10px 0 10px;
}
.wp-caption { 
  margin-bottom: 20px !important;
}


/***** Border Image *****/
img.aligncenter {
  border-radius: 5px;
}
.entry-image img {
  border-radius: 5px;
}


/***** List *****/
p.liet-ke {
  padding: 0 .75em 0 .75em;
}
i.fa-solid.fa-droplet, i.fas.fa-long-arrow-alt-right {
  position: relative;
  bottom: 2.8px;
}


/***** Nut cac uu dai trang product *****/
p.uu-dai {
  font-size: .9em;
  color: #008b71;
  border: dashed 1px #008b71;
  border-radius: 4px;
  padding: 2px 4px;
  margin-right: 4px;
  display: inline-block;
  text-align: center;
}


/***** Size chu sku trang product *****/
.product_meta {
  font-size: .9em;
}


/***** Related Posts *****/
.feature {
  position: relative;
  overflow: hidden;
}
.feature::before {
  content: "";
  display: block;
  padding-top: 65%;
}
.feature .image {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  margin: auto;
  background-size: cover;
  background-position: center;
  border-radius: 5px;
  aspect-ratio: 360 / 189;
  width: 100%;
}
ul.row.related-post li {
  list-style: none;
}
.related-title {
  line-height: 1.3 !important;
  padding: 0 10px;
  text-align: center;
}
.related-title a{
  color: #777777;
  font-weight: 400;
  font-size: 1em;
}
.col.large-4.related-post {
  padding: 0 5px 30px !important;
}


/***** Related Product Variants *****/
.related-product-variants ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;    
  flex-wrap: wrap;    
  gap: 0;
  justify-content: flex-start;
}
.related-product-variants li {
  flex: 0 0 22.141%;
  width: 22.141%;
  margin-left: 10px !important;
  margin-bottom: 10px;
}
.related-product-variants .thumbnail {
  display: block;
  overflow: hidden;
  width: 100%;
  aspect-ratio: 1 / 1;
  border: solid 1px rgba(0,0,0,.2);
  transition: transform 0.3s ease, border 0.3s ease; 
}
.related-product-variants .thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}
.related-product-variants .thumbnail img:hover {
  transform: scale(1.1);
}
.image-tools.bottom.left {
  transform: scale(0.8);
}


/***** Author Icon Blog *****/
.posted-on {
  margin-right: 5px;
}
.byline {
  margin-left: 5px;
}


/***** Button Post Blog *****/
.button.is-outline {
  border: 1px solid;
  border-right: none;
  border-left: none;
}
.is-outline:hover, .primary.is-outline:hover {
  border-color: #446084 !important;
  background-color: unset !important;
  color: #446084 !important;
}


/***** Prev/Next Button Image *****/
.flickity-prev-next-button svg {
  background: #111;
  border-radius: 5%;
}
.flickity-prev-next-button .arrow, .flickity-prev-next-button svg {
  fill: #fff;
}
button.flickity-button.flickity-prev-next-button.previous {
  left: 50px;
}
button.flickity-button.flickity-prev-next-button.next {
  right: 50px;
}
.slider .flickity-prev-next-button:hover svg, .slider .flickity-prev-next-button:hover .arrow {
  fill: #d2b077 !important;
}
.slider-nav-reveal .flickity-prev-next-button, .slider-nav-reveal .flickity-prev-next-button:hover {
  background-color: unset;
  box-shadow: unset;
}


/***** Phan trang - Blog *****/
.nav-pagination>li>a, .nav-pagination>li>span {
  border: 1px solid;
  border-radius: unset;
  font-size: .9em;
  font-weight: normal;
}


/***** Nut chuyen nhanh den cac muc trong trang product *****/
.button-product {
  background: #006666;
  padding: 4px 4px 4px 10px;
  border-radius: 4px;
  display: inline-block;
  margin-right: 10px;
  margin-bottom: 10px;
  width: 162px;
  font-size: .9em;
}


/***** Table Tab trong trang product *****/
table {
  border-collapse: collapse;
  width: 50%;
  margin-top: 1em;
}
table.thong-so-ky-thuat {
  width: 80%;
}
tr.bang-thong-so:nth-child(even) {
  background-color: #f2f2f2;
}
td, th {
  font-size: .9em;
  color: #777;
  border: solid 1px #ddd;
  padding-left: 0.4em !important;
  text-transform: unset;
  font-weight: normal;
}
td.thong-so {
  border: none;
}


/***** Mau widget title sidebar *****/
.widget .current-cat>a {
  color: #555555;
  font-weight: normal;
}


/***** Nut expand/less trang product *****/
.wps-shortcode-wrapper .wps-expand-link {
  background: linear-gradient(to bottom,
   rgba(255, 255, 255, 0) 0%,
   rgba(255, 255, 255, 0.087) 12.5%,
   rgba(255, 255, 255, 0.235) 25%,
   rgba(255, 255, 255, 0.408) 37.5%,
   rgba(255, 255, 255, 0.58) 50%,
   rgba(255, 255, 255, 0.745) 62.5%,
   rgba(255, 255, 255, 0.882) 75%,
   rgba(255, 255, 255, 0.965) 87.5%,
   rgba(255, 255, 255, 1) 100%);
  position: absolute;
  width: 100%;
  height: 80px;
  bottom: 55px;
  left: 0;
  z-index: 8;
  pointer-events: none;
}
a.bt-expand {
  position: relative;
  display: block;
  border: solid 1px;
  border-radius: .25em;
  max-width: 8em;
  margin: 10px auto 20px;
  padding: 8px 15px;
  text-align: center;
  z-index: 10;
}
a.bt-expand i {
  margin-left: 0;
  display: inline-block;
  position: relative;
  top: -8px;
  transition: transform 0.4s ease;
  vertical-align: middle;
}
.is-expanded a.bt-expand i {
  transform: rotate(180deg);
  top: 5px;
}
.wps-expand-content {
  transition: max-height 0.5s ease-in-out;
  overflow: hidden;
}


/***** Chan copy anh *****/
body:not(.logged-in) img {
  -webkit-touch-callout: none !important;
  -webkit-user-select: none !important;
  user-select: none !important;
  -webkit-user-drag: none !important;
}
body:not(.logged-in) .img-inner, 
body:not(.logged-in) .wp-block-image {
  -webkit-tap-highlight-color: transparent;
}


/***** Duong ngan cach trong bai blog *****/
.wp-block-separator {
  border: 2px solid #006666;
  width: 30%;
  opacity: unset;
}


/***** Dau ngan cach ngan *****/
.is-divider {
  background-color: #006666;
}


/***** Bullet anh trong xem nhanh *****/
.flickity-page-dots .dot {
  border-radius: 8%;
  border: 2px solid #ceb07b;
}
.flickity-page-dots .dot.is-selected {
  background-color: #ceb07b;
}


/***** Title bai viet lien quan trong trang san pham *****/
.fl-custom-blog-grid .post-title {
  font-size: 20px;
  color: #777777;
}
.fl-custom-blog-grid .box-image { 
  border-radius: 1% !important;
}
.fl-custom-blog-grid .is-divider { 
  display: none !important; 
}
.fl-custom-blog-grid .post-title {
  margin-top: 10px !important;
  margin-bottom: 5px !important;
  line-height: 1.4 !important;
}
.fl-custom-blog-grid .box-text {
padding-bottom: 25px !important;
}
.fl-custom-blog-grid .flickity-page-dots {
  bottom: 0 !important;
  transform: translateY(-30px) !important;
}


@media only screen and (min-width: 720px) {
/*************** ADD TABLET ONLY CSS HERE  ***************/
/***** Kich thuoc cot hien thi noi dung *****/
.large-columns-2>.col {
  flex-basis: 50% !important;
  max-width: 100%;
}


/***** Back To Top Button *****/
.button.icon.back-to-top {
  opacity: 0 !important;
}
.button.icon.back-to-top.active {
  opacity: 1 !important;
}


/***** Related Posts *****/
.col.large-4.related-post {
  flex-basis: 33.3333333333%;
}
}


@media only screen and (max-width: 710px) {
/*************** ADD MOBILE ONLY CSS HERE  ***************/
/***** Canh le noi dung 2 ben *****/
.col {
  padding-left: 10px;
  padding-right: 10px;
}


/***** Muc Luc *****/
.wp-block-rank-math-toc-block {
  max-width: 100%;
}


/***** Heading *****/
h1, h1 {
  font-size: 1.35em;
}
h2, h2 {
  font-size: 1.3em;
}
h3, h4 {
  font-size: 1.25em;
}
h5, h6 {
  font-size: 1.2em;
}


/***** Back To Top Button *****/
.back-to-top, .back-to-top.active {
  font-size: small;
  background-color: #ceb07b;
  border: none !important;
  border-radius: 2px;
  z-index: 999;
}
.back-to-top.active:hover {
  background: #ceb07b !important;
}
.icon-angle-up:before {
  font-size: x-large;
  color: #ffffff;
}


/***** Blockquote *****/
blockquote {
  color: #777 !important;
  padding: 0 10px 0 10px;
}


/***** Image Caption *****/
.wp-caption .wp-caption-text {
  font-size: .9em;
  padding: 0.4em 0.4em 0 0.4em;
}


/***** List *****/
p.liet-ke {
  padding: 0 10px 0 10px;
}


/***** Related Posts *****/
.col.large-4.related-post {
  padding: 0 15px 30px !important;
}
.related-title a{
  font-size: 26px;
}


/***** Related Product Variants *****/
.related-product-variants li {
  flex: 0 0 21.276% !important;
  width: 21.276% !important;
}


/***** Prev/Next Button Image *****/
.slider-wrapper .flickity-prev-next-button {
  display: block;
}
.flickity-prev-next-button svg {
  height: 50%;
  width: 70%;
}
button.flickity-button.flickity-prev-next-button.previous {
  left: 6px !important;
}
button.flickity-button.flickity-prev-next-button.next {
  right: 6px !important;
}
.slider-nav-push.slider-nav-reveal .flickity-prev-next-button svg {
  height: 10%;
  width: 100%;
}


/***** Nut chuyen nhanh den cac muc trong trang product *****/
.button-product {
  padding: 4px 4px;
  width: 158px;
  margin: 6px 2px;
}


/***** Table Tab trong trang product *****/
table {
  border-collapse: collapse;
  width: 100%;
  table-layout: unset; 
}
table.thong-so-ky-thuat {
  width: 100%;
}


/***** Duong ngan cach trong bai blog *****/
.wp-block-separator {
  width: 35%;
}


/***** Title cua bai viet lien quan trong trang san pham *****/
.fl-custom-blog-grid .post-title {
  font-size: 26px;
  color: #777777;
}
}