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


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


}
.product-main { padding: 0px !important; }

.woocommerce-tabs .tabs {
    display: none !important;
}
.col-border+.col, .col-divided+.col {padding: 10px 0px  0px  10px !important;}

.box-text.box-text-products ul {
    font-size: 13px; /* thay đổi kích thước theo ý bạn */
    line-height: 14px; /* tùy chọn: giúp chữ dễ đọc hơn */
}
.product-title a,
.woocommerce-loop-product__title {
    font-size: 18px; /* thay đổi theo ý bạn */
    line-height: 1.4;
    font-weight: 700;
    padding-bottom:5px;
    text-align:center;
}

@media (max-width: 768px) {
    
    .box-text.box-text-products ul {
    font-size: 11px; /* thay đổi kích thước theo ý bạn */
    line-height: 12px; /* tùy chọn: giúp chữ dễ đọc hơn */
}
.product-title a,
.woocommerce-loop-product__title {
    font-size: 15px; /* thay đổi theo ý bạn */
    line-height: 18px;
    font-weight: 700;
}
}
blockquote, dl, ol, pre, ul {margin-left: 1em;}

/* ===========================
   EBPQ CF7 MODAL — SAFE CSS
   Không làm popup tự bật do !important
   =========================== */

/* overlay luôn tồn tại trong DOM, nhưng ẩn bằng visibility/opacity/pointer-events */
.ebpq-cf7-overlay {
  position: fixed;
  inset: 0;
  display: flex;                /* luôn là flex để căn giữa */
  align-items: center;
  justify-content: center;

  width: 100vw;
  height: 100vh;
  box-sizing: border-box;

  /* Ẩn mặc định: visibility + opacity + pointer-events */
  visibility: hidden;
  opacity: 0;
  pointer-events: none;

  background: rgba(0,0,0,0.65);
  z-index: 999999;
  padding: 20px;
  transition: opacity 180ms ease, visibility 180ms ease;
}

/* Khi có class bật (thông qua JS) -> hiển thị */
.ebpq-cf7-overlay.ebpq-open {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
}

/* Modal chính */
.ebpq-cf7-modal {
  background: #ffffff;
  position: relative;
  max-width: 750px;
  width: 100%;
  border-radius: 10px;
  padding: 22px;
  font-size:15px;
  box-sizing: border-box;
  box-shadow: 0 20px 50px rgba(0,0,0,0.35);
  transform: translateY(0);
  transition: transform 180ms ease, opacity 180ms ease;
}

/* Khi overlay bật, bạn có thể thêm hiệu ứng nhẹ cho modal */
.ebpq-cf7-overlay.ebpq-open .ebpq-cf7-modal {
  transform: translateY(0);
}

/* nút đóng */
.ebpq-cf7-close {
  position: absolute;
  right: 12px;
  top: -5px;
  font-size: 30px;
  background: none;
  border: none;
  cursor: pointer;
  color: #333;
  z-index: 11;
}

/* nút mở */
.ebpq-cf7-open-btn {
  padding: 10px 18px;
  background: #dd0000;
  color: #fff;
  border-radius: 6px;
  border: none;
  cursor: pointer;
  width: 100%;
  font-weight: 600;
}

/* chặn body scroll khi mở bằng class */
body.ebpq-modal-open {
  overflow: hidden;
}

/* responsive */
@media (max-width:480px){
  .ebpq-cf7-modal { max-width:95%; padding:14px; }
}
.related-posts {
    margin-top: 40px;
}

.related-title {
    font-size: 22px;
    margin-bottom: 20px;
    font-weight: 600;
}

.related-posts-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

.related-item {
    border: 1px solid #eee;
    border-radius: 8px;
    overflow: hidden;
    background: #fff;
    transition: all 0.3s ease;
}

.related-item:hover {
    box-shadow: 0 5px 20px rgba(0,0,0,0.08);
    transform: translateY(-3px);
}

.related-thumb img {
    width: 100%;
    height: 180px;
    object-fit: cover;
    display: block;
}

.related-post-title {
    font-size: 15px;
    padding: 12px;
    line-height: 1.4;
}

.related-post-title a {
    color: #333;
    text-decoration: none;
}

.related-post-title a:hover {
    color: #c00;
}

/* Responsive */
@media (max-width: 768px) {
    .related-posts-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}