/*
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.   ***************/
/*chỉnh phần hiển thị sản phẩm đã bán*/
/* Chi tiết sản phẩm */
.product-sold-count.da-ban-single {
    font-size: 15px;
    color: #15653A;
    margin: 10px 0;
}
/* Sản phẩm đã bán */
.product-sold-count.da-ban-loop {
    font-size: 13px;
    color: #15653A;
    margin: 4px 0 0;
}
/* --- TINH CHỈNH H2 VÀ H3--- */
#tab-description h2, .entry-content h2, #ftwp-postcontent h2 {
    border-bottom: 2px solid #135f36;
 /* Dùng màu xanh lá cây làm điểm nhấn */
    color: #135f36;
}
#tab-description h3, .entry-content h3, #ftwp-postcontent h3 {
    color: #135f36;
}
#tab-description h4, .entry-content h4, #ftwp-postcontent h4 {
    color: #135f36;
}
/* --- TINH CHỈNH KHOẢNG CÁCH GIỮA H2 VÀ H3 LIỀN KỀ --- */
#tab-description h2 + h3,
.entry-content h2 + h3 {
    margin-top: 15px;
 /* Giảm khoảng cách trên của H3 khi nó đứng ngay sau H2 */
}
/* Đoạn text nổi bật */
.text.chunoi {
    background-color: rgba(0, 0, 0, 0.4);
    padding: 10px;
    border-radius: 4px;
    color: #fff;
}
.variations .reset_variations {
    position: absolute;
    bottom: 95%;
    right: 0;
    display: inline-block;
    padding: 8px 16px;
    font-size: 12px;
    text-transform: capitalize;
    background-color: #135f36;
    color: #fff;
    border-radius: 99px;
    text-decoration: none;
    border: none;
    cursor: pointer;
    transition: background-color 0.3s ease, opacity 0.2s ease;
    opacity: 1;
}
.variations .reset_variations:hover {
    background-color: #2980b9;
    opacity: 0.9;
}
.form-container-custom {
    background-color: #f0fff4;
    border: 1px solid #bfeecd;
    border-radius: 8px;
    padding: 12px;
    max-width: 640px;
    box-sizing: border-box;
}
.form-container-custom .form-title-custom {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 10px;
    color: #187a2f;
    font-weight: 600;
    font-size: 14px;
    line-height: 1;
}
.form-container-custom .form-title-custom svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}
/* Turnstile Captcha */
.wpcf7-turnstile {
    margin: 0 auto 1em;
}
/* Spinner ẩn */
.wpcf7-spinner {
    display: none;
}
@media (max-width: 849px) {
    .form-container-custom .medium-flex-wrap {
        flex-flow: row nowrap !important;
    }
}
.large-12.col-breadcrumbs {
    background-color: #f1f1f1;
    color: #0f3e66;
    padding: 7px 12px;
    min-height: 40px;
    border-radius: 5px;
    border-bottom: 1px solid #c3b3b3;
    border-right: 1px solid #c3b3b3;
    margin-bottom: 10px;
    line-height: 1.5;
}
.large-12.col-breadcrumbs a {
    color: #0f3e66;
    text-decoration: none;
}
nav.rank-math-breadcrumb {
    display: flex;
    flex-wrap: wrap;
}
span.separator {
    padding: 0 5px;
}
.breadcrumbs a {
    color: var(--primary-color) !important;
}
.breadcrumbs a:hover {
    color: var(--secondary-color) !important;
}
.footer-menu {
    display: none;
}
/* Danh sách (ol, ul) */
ol, ul {
    list-style-position: inside;
    text-align: justify;
}
ol ol, ol ul, ul ol, ul ul {
    margin: 1.5em 0 1.5em 1.5em;
}
.blog-wrapper.blog-single.page-wrapper p,
.product-footer .woocommerce-tabs.container p,
.page-wrapper.page-right-sidebar p,
.large-9.col p {
    text-align: justify;
}
.footer-primary.pull-left {
    float: none;
}
.menu-menu-chan-trang-container {
    text-align: center;
    display: inline-block;
}
.section-title b {
  background-color: #135f36; /* màu xanh lá đậm, giống chữ */
}
.section-title-bold-center span {
  border: 2px solid rgba(19, 95, 54, 0.5);
}
a.plain {
    color: #135f36; /* nút back to top */
}
/* Chấm điều hướng Flickity */
.flickity-page-dots {
  z-index: 99; /* Đưa lên trên các phần tử khác */
  pointer-events: auto; /* Cho phép click/tap */
}
.flickity-prev-next-button {
    color: #135f36; /* nút chuyển slider */
}
.flickity-page-dots .dot {
    border: 3px solid #135f36;
    height: 24px;
    width: 24px;
  touch-action: manipulation; /* Giúp nhận chạm mượt hơn trên mobile */
}
.flickity-page-dots .dot.is-selected {
    background-color: #135f36;
    box-shadow: 0 1px 1px rgba(255, 255, 255, .4), inset 0 1px 1px rgba(0, 0, 0, .1), 0 0 0 5px rgba(255, 255, 255, .5);
}
.nav-dots-small .flickity-page-dots .dot, .row-slider .flickity-page-dots .dot {

    height: 24px;
    width: 24px;
}
.slider-nav-light .flickity-page-dots .dot.is-selected, .slider-nav-light.slider-nav-dots-simple .flickity-page-dots .dot {
    background-color: #135f36;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2), inset 0 1px 2px rgba(0, 0, 0, 0.15), 0 0 0 4px rgba(0, 0, 0, 0.15);
}
.absolute-footer {
    color: #ffffff;
}
ul li.bullet-arrow, ul li.bullet-checkmark, ul li.bullet-cross, ul li.bullet-star {
    border-bottom: none;
}
/* Thêm position: relative để làm gốc cho icon */
.section-title-bold-center .section-title-main {
    position: relative;
    /* Có thể thêm margin để tạo khoảng trống cho icon */
    margin: 0 45px; 
}

/* Định vị lại icon bằng position: absolute */
.section-title-bold-center .section-title-main::before,
.section-title-bold-center .section-title-main::after {
    content: '';
    display: block;
    width: 32px;  /* Chiều rộng của icon */
    height: 16px; /* Chiều cao của icon */
	background-image: url('images/icon/icon-kinh.png');
    background-size: contain;
    background-repeat: no-repeat;
    
    /* --- Đây là phần quan trọng nhất --- */
    position: absolute; /* Nhấc icon ra khỏi luồng */
     top: 50%;
    transform: translateY(-50%); /* Căn giữa icon theo chiều dọc */
}

/* Đặt icon bên trái ra ngoài khung */
.section-title-bold-center .section-title-main::before {
    right: 100%; /* Đẩy icon ra sát mép trái của khung */
    margin-right: 5px !important; /* Tạo khoảng cách 15px với khung */
}

/* Đặt icon bên phải ra ngoài khung */
.section-title-bold-center .section-title-main::after {
    left: 100%; /* Đẩy icon ra sát mép phải của khung */
    margin-left: 5px !important; /* Tạo khoảng cách 15px với khung */
}
@media only screen and (max-width: 48em) {
/*************** ADD MOBILE ONLY CSS HERE  ***************/
.kk-star-ratings {
    flex-direction: column;
 /* Ngôi sao nằm trên, legend nằm dưới */
    align-items: center;
     /* Căn giữa theo chiều ngang */
    text-align: center;
}
.kksr-legend {
    font-size: 14px;
 /* thu nhỏ nếu cần */
    line-height: 1.4;
    margin-top: 5px;
 /* tạo khoảng cách với dãy sao */
}
.footer-menu  {
  display: flex;
  justify-content: space-around;
  align-items: center;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: #fff;
  padding: 8px 0;
  border-top: 1px solid #ddd;
  z-index: 9999;
  transition: transform 0.3s ease;
}
  /* Ẩn footer-menu khi cuộn */
.footer-menu.hidden  {
  transform: translateY(100%);
}
  /* Các item trong menu */
.footer-menu .footer-item  {
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: 12px;
  color: #333;
  text-decoration: none;
}
.footer-menu img  {
  width: 48px;
  height: 48px;
  margin-bottom: 4px;
}

}