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

@font-face {
  font-family: UTM Avo;
  src: url(https://japec.vn/wp-content/uploads/2024/07/UTM-Avo.ttf);
  font-weight: normal;
}
@font-face {
  font-family: UTM Akashi;
  src: url(https://japec.vn/wp-content/uploads/2024/07/UTM-AvoItalic.ttf);
  font-weight: normal;
}
@font-face {
  font-family: UTM AvoBold;
  src: url(https://japec.vn/wp-content/uploads/2024/07/UTM-AvoBold.ttf);
  font-weight: bold;
}
body {
  font-family: "UTM Avo";
  font-size: 16px;
}
@media only screen and (max-width: 48em) {
  /*************** ADD MOBILE ONLY CSS HERE  ***************/
}
.category #main .blog-archive,
.tax-product_cat #main,
.blog-single,
.content-background {
  background: linear-gradient(to bottom, #eae8e3, #1c6daa, #003ca6) !important;
}
#footer {
  /* Thiết lập chiều cao cho footer bằng 100% chiều cao của cửa sổ trình duyệt */
  height: 100vh;

  /* Thiết lập nền cho footer với hình ảnh */
  background: url("https://japec.vn/wp-content/uploads/2024/08/backgroud-footer-1-min.jpg")
    no-repeat center center;
  background-size: cover; /* Đảm bảo hình ảnh nền bao phủ toàn bộ phần tử */

  /* Các thuộc tính bổ sung (tùy chọn) để đảm bảo nội dung hiển thị tốt */
  /*     display: flex; */
  align-items: center;
  justify-content: center;
  color: white; /* Màu chữ mặc định, có thể tùy chỉnh */
}
.header-nav-main li.header-search-form {
  margin-right: auto !important;
  margin-left: auto !important;
}
.nav li {
  margin-left: 0 !important;
  font-weight: 100 !important;
}
.nav-spacing-xlarge > li {
  margin: 0 30px !important;
}
.nav-line-bottom > li > a::before,
.nav-line-grow > li > a::before,
.nav-line > li > a::before {
  background-color: #f00 !important;
}
.header-nav-main li.header-search-form {
  width: 40% !important;
}
.home .home-sanpham-slide .box {
  transition: opacity 0.3s, transform 0.3s, background-color 0.3s;
  padding: 40px 0px 0px 0px;
}
.home .col-inner .product-small:hover {
  background: #ffffffab;
  border-radius: 10px;
  padding: 40px 0px 0px 0px;
}
.section-title-normal {
  border-bottom: none !important;
}
.title-hot .section-title-normal span {
  width: 50%;
  padding: 5px 0px 5px 15px;
  background: linear-gradient(to left, #eae8e3, #1c6daa, #003ca6) !important;
  color: white;
  border-bottom: none !important;
  border-left: red 5px solid;
}
.home-title-sp-hot .section-title-normal span {
  width: 50%;
  padding: 5px 0px 5px 15px;
  background: linear-gradient(to left, #e0e2e0, #1c6daa, #003ca6) !important;
  color: white;
  border-bottom: none !important;
  border-left: red 5px solid;
}
.home-title-gioithieu .section-title-normal span {
  width: 50%;
  padding: 5px 0px 5px 15px;
  background: linear-gradient(to left, #5790ba, #1c6daa, #003ca6) !important;
  color: white;
  border-bottom: none !important;
  border-left: red 5px solid;
}
.home-title-tintuc .section-title-normal span {
  width: 50%;
  padding: 5px 0px 5px 15px;
  background: linear-gradient(to left, #135da9, #1c6daa, #003ca6) !important;
  color: white;
  border-bottom: none !important;
  border-left: red 5px solid;
}
.title-hot-full {
  margin-bottom: 0px;
}
.title-hot-full .section-title-normal span {
  width: 100%;
  padding: 5px 0px 5px 15px;
  background: #003ca6 !important;
  color: white;
  border-bottom: none !important;
  border-left: red 5px solid;
  margin: 0px;
}
.title-footer .section-title-normal span {
  border-bottom: 2px solid #003ca6;
  margin-bottom: -2px;
  margin-right: 15px;
  padding-bottom: 7.5px;
  color: #003ca6;
  font-size: 30px;
  text-transform: math-auto;
  font-weight: 100;
  width: 100%;
  line-height: 25px;
}
#footer p {
  margin-bottom: 10px !important;
}
.li-menu-san-pham {
  background: white;
}
.menu-san-pham {
}
.slider .flickity-prev-next-button {
  box-shadow: none;
  opacity: 1;
}
.flickity-prev-next-button {
  width: 50px !important;
}
.product-small .box-text p,
.home-sanpham-slide .box-text p {
  margin-bottom: 0.1em;
  margin-top: 0.1em;
  color: white;
  opacity: 1;
  font-size: 15px;
  font-weight: 600;
  text-align: center;
}
.product-small .box-text a:not(.button),
.home-sanpham-slide .box-text a:not(.button) {
  color: #15f8fe;
  opacity: 1;
  font-size: 28px;
  font-weight: 600;
}
.single-product span.amount {
  color: black;
}
span.amount {
  color: white;
}
.home-sanpham-slide .product-small.box-text a:hover {
  color: #003da7;
}
.home-sanpham-slide .product-small.box {
  transition: all 0.3s ease; /* Thêm chuyển đổi mượt */
}

.home-sanpham-slide .product-small.box:hover {
  /* Áp dụng các hiệu ứng khi hover vào box */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Thêm bóng đổ */
}

/* Đảm bảo .box:hover vẫn có hiệu ứng nếu hover vào ảnh */
.home-sanpham-slide .product-small.box .box-image img:hover {
  cursor: pointer; /* Thay đổi con trỏ chuột khi hover vào ảnh */
}

.home-sanpham-slide .product-small.box-text a:hover {
  color: #003da7;
}

/* Thêm hiệu ứng cho p và a khi hover vào box */
.home-sanpham-slide .product-small.box:hover .product-cat {
  color: #2e2e2e;
}
.home-sanpham-slide .product-small.box:hover .woocommerce-loop-product__link {
  color: #003da7; /* Màu thay đổi khi hover */
}

.tintuc-title-page {
  width: 50%;
  padding: 5px 0px 5px 15px;
  background: linear-gradient(to left, #eae8e3, #1c6daa, #003ca6) !important;
  color: white;
  border-bottom: none !important;
  border-left: red 5px solid;
}
.category #post-list .col-inner,
.tintuc-dansach-page .col-inner {
  background-color: #fff;
  padding: 20px;
}
.blog-single table td {
  text-align: center !important;
}
.page-product-template .product-small.box {
  transition: all 0.3s ease; /* Thêm chuyển đổi mượt */
  background: #ffffff40;
  border-radius: 10px;
}

.page-product-template .product-small.box:hover {
  transition: all 0.3s ease; /* Thêm chuyển đổi mượt */
  background: #69ff689c;
}
#post-list .has-shadow .box:not(.box-overlay):not(.box-shade),
#post-list .has-shadow.box:not(.box-overlay):not(.box-shade) {
  background-color: white !important;
}
.has-shadow .box:not(.box-overlay):not(.box-shade),
.has-shadow.box:not(.box-overlay):not(.box-shade) {
  background-color: #003ca6 !important;

  border-radius: 0px;
}
.woocommerce-product-gallery__image {
  text-align: center;
}

.vertical-thumbnails {
  overflow-x: hidden;
  overflow-y: hidden;
}

.home-sanpham-slide .product-small.box:hover .product-cat,
.home-sanpham-slide .product-small.box:hover .woocommerce-loop-product__link {
  color: #ffffff !important;
}
.has-shadow > .col > .col-inner {
  background: none !important;
}
.has-shadow .type-product .box {
  background-color: #003ca657 !important;
  border-radius: 0px;
}
@media only screen and (max-width: 768px) {
	.single-post p {
		text-align: justify;
	}
	.add-to-cart-button {
		display: none;
	}
	.related-products-wrapper .col-inner .box {
    padding: 20px 0 0 !important;
}
	.single-product .section-content .title-wrapper p {
    text-align: center !important;
    margin: 0;
}
	.row-collapse>.col, .row-collapse>.flickity-viewport>.flickity-slider>.col {
		padding: 10px !important;
	}
  .home .home-sanpham-slide .box {
    transition: opacity 0.3s, transform 0.3s, background-color 0.3s;
    padding: 10px 0 0;
  }
  .box-text.text-center {
    padding-left: 5px;
    padding-right: 5px;
  }
  .home-title-tintuc .section-title-normal span,
  .home-title-gioithieu .section-title-normal span,
  .home-title-sp-hot .section-title-normal span {
    width: 100%;
  }
  .product-small .box-text a:not(.button),
  .home-sanpham-slide .box-text a:not(.button) {
    color: #15f8fe;
    opacity: 1;
    font-size: 15px;
  }
  .product-small .box-text p,
  .home-sanpham-slide .box-text p {
    font-size: 11px;
  }
  .col {
    padding: 10px;
    background: #ffffff73;
  }
  #section_1663619686 {
    padding-top: 0px;
  }
  #footer {
    height: 85vh;
  }
  #footer .section {
    padding: 0px !important;
  }
  .section-title-container {
    margin-bottom: 0.5em;
  }
  .section-title-normal span {
    margin-right: 0px;
  }
  .section-title-container {
    padding: 10px;
  }
 .single-product .section-content .product-short-description p {
    margin-top: 0;
    text-align: justify;
	  font-size: 14px;
    margin-bottom: 6px;
/*     padding: 10px 15px; */
  }
}
@media only screen and (min-width: 769px) and (max-width: 1024px) {
  p {
    margin-top: 0;
    text-align: justify;
  }
}
ul li.bullet-arrow:before,
ul li.bullet-checkmark:before,
ul li.bullet-star:before {
  padding-left: 10px;
}
.tax-product_cat .box {
  padding: 40px 0 0 !important;
}
.related-products-wrapper .box-image,
.tax-product_cat .has-equal-box-heights .box-image {
  padding-top: 110% !important;
  height: auto;
  margin: 0 auto;
  overflow: hidden;
  position: relative;
}
.related-products-wrapper .box {
  margin: 0 auto;
  position: relative;
  width: 100%;
  background-color: #003ca6 !important;
  border-radius: 0;
  padding: 40px 0 0 !important;
}
.related-products-wrapper h3.product-section-title {
  padding: 10px 0 10px 15px;
  background: linear-gradient(to left, #e3edff, #349dec, #003ca6) !important;
  color: #fff;
  border-bottom: none !important;
  border-left: red 5px solid;
  font-family: "UTM Avo";
}
#footer tr td,
#footer tr td span {
  padding: 0px;
  margin: 0px;
  font-size: 16px;
  color: #003ca6 !important;
  border-bottom: none;
}
.badge-frame .badge-inner,
.widget .badge-outline .badge-inner {
  background-color: #ffffff !important;
  box-shadow: 0 3px 6px -4px rgb(0 60 166), 0 3px 6px rgb(0 60 166) !important;
}
.badge-frame .badge-inner,
.badge-outline .badge-inner {
  background-color: #fff !important;
  border: 2px solid #003ca6 !important;
  color: #ff0000 !important;
}
.single-product .section-content p {
  text-align: justify;
  margin: 0px;
}
.product-short-description table tr td {
  border: 1px solid #000;
  color: black !important;
  padding: 10px;
}