/*
Theme Name: Vacxin Saigon
Theme URI: https://trangwebvang.com
Description: Theme về vắc xin
Author: Henry Duc Manh
Author URI: https://ducmanh.com
Template: flatsome
Version: 1.0.149
*/

/* Nhập thêm CSS tùy chỉnh ở đây */

/* Nút "Liên hệ đặt mua vắc xin" – nền xám, chữ đỏ */
.rx-contact-btn{
  display:block;
  width:100%;
  text-align:center;
  font-weight:800;
  letter-spacing:.2px;
  padding:.7rem 1.1rem;
  border-radius:999px;

  /* chữ đỏ */
  color:#e60000 !important;

  /* nền xám gradient + viền và bóng nhẹ */
  background: linear-gradient(180deg, #f6f6f6 0%, #ececec 40%, #d9d9d9 100%);
  border:1px solid #cfcfcf;
  box-shadow:
    inset 0 1px 0 #ffffff,
    inset 0 -1px 0 #c9c9c9,
    0 6px 12px rgba(0,0,0,.06);
  transition: filter .15s ease, transform .05s ease, background .2s ease;
}

.rx-contact-btn:hover{
  background: linear-gradient(180deg, #f2f2f2 0%, #e6e6e6 40%, #d3d3d3 100%);
  color:#cc0000 !important;           /* hơi đậm khi hover */
  filter: none;
}

.rx-contact-btn:active{
  transform: translateY(1px);
}

/* đảm bảo nút không tràn card */
.woocommerce ul.products li.product .rx-contact-btn{
  box-sizing: border-box;
  white-space: normal;
}

/* ===== Tăng chiều cao card sản phẩm & chừa chỗ cho CTA ===== */

/* Tiêu đề 2 dòng để không bị chồm */
.products .product .title-wrapper h2,
.woocommerce ul.products li.product .woocommerce-loop-product__title{
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
  overflow:hidden; line-height:1.35;
  min-height: calc(1.35em * 2);
}

/* Khối text trong card: cao hơn & đẩy CTA xuống đáy */
.woocommerce ul.products li.product .box-text{
  display:flex; flex-direction:column;
  min-height: 180px;   !important;   /* thêm !important để thắng equalize */
  padding-bottom: 10px;
}

/* CTA luôn nằm gọn trong card */
.woocommerce ul.products li.product .rx-contact-cta{ margin-top:auto; }
.woocommerce ul.products li.product .box,
.woocommerce ul.products li.product .box-text{ overflow:hidden; }

/* Tổng thể card (khi equalize đang bật) */
.woocommerce ul.products li.product .box{
  min-height: 340px !important;   /* thêm !important */
  overflow:hidden;
}


/* ===== Flatsome product card – áp cho cả li.product & div.product-small ===== */

/* Tiêu đề 2 dòng cho cả 2 loại markup */
.products .product .title-wrapper h2,
.woocommerce ul.products li.product .woocommerce-loop-product__title,
.product-small .title-wrapper h2,
.product-small .woocommerce-loop-product__title{
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
  overflow:hidden; line-height:1.35;
  min-height: calc(1.35em * 2);
}

/* Cho phép card tự cao theo nội dung (nếu Equalize đang ép height) */
.woocommerce ul.products li.product .box,
.product-small .box{
  height:auto !important;
  overflow:hidden;
}

/* Khối text trong card: cao hơn & đẩy CTA xuống đáy */
.woocommerce ul.products li.product .box-text,
.product-small .box-text{
  display:flex; 
  flex-direction:column;
  min-height: 190px !important;  /* tăng/giảm 160–200 tùy CTA dài */
  padding-bottom: 14px;
  overflow:visible;
}


/* Nếu bạn vẫn muốn “các card cao tối thiểu bằng nhau” thì dùng min-height tổng */
.woocommerce ul.products li.product .box,
.product-small .box{
  min-height: 340px !important;  /* tăng/giảm theo layout của bạn */
}

/* CTA luôn nằm trong khung */
.woocommerce ul.products li.product .rx-contact-cta,
.product-small .rx-contact-cta{
    margin-top:auto;
}

/* Nút không tràn ngang */
.woocommerce ul.products li.product .rx-contact-btn,
.product-small .rx-contact-btn{
  box-sizing: border-box;
  white-space: normal;
  width:100%;
}

/* Note dưới nút: màu #0a56a4, canh giữa, nhỏ hơn */
.rx-contact-note{
  color: #0a56a4 !important;
  text-align: center;
  font-size: 12px;          /* trước 13px → nhỏ hơn một chút */
  line-height: 1.45;
  font-weight: 600;         /* có thể giảm/ tăng tùy thích */
  margin-top: 4px;
  white-space: normal;
}

/* Thụt bullet/number vào ~20px cho nội dung trang/bài (không ảnh hưởng menu) */
#content .page-inner ul:not(.menu):not(.sub-menu):not(.nav),
#content .page-inner ol:not(.menu):not(.sub-menu):not(.nav),
#content .entry-content ul:not(.menu):not(.sub-menu):not(.nav),
#content .entry-content ol:not(.menu):not(.sub-menu):not(.nav){
  /* fallback cho tất cả trình duyệt */
  padding-left: 15px !important;
  margin-left: 0 !important;
  list-style-position: outside;
  list-style-type: disc;
  text-align: left; /* đề phòng inline justify kéo bullet ra mép */
}

/* Hỗ trợ tốt cho RTL/LTR hiện đại */
#content .page-inner ul,
#content .page-inner ol,
#content .entry-content ul,
#content .entry-content ol{
  padding-inline-start: 15px !important;
}

/* Danh sách lồng nhau: thụt thêm nhẹ */
#content .page-inner ul ul,
#content .page-inner ol ol,
#content .entry-content ul ul,
#content .entry-content ol ol{
  padding-left: 18px !important;
  padding-inline-start: 18px !important;
}

/* click hear */

/* ===== Emphasize "CHỈ ĐỊNH TOA" + thêm "click here" ===== */
/* Màu chủ đạo bạn muốn dùng */
:root{
  --rx-attn: #0a56a4;      /* Xanh thương hiệu */
  --rx-click: #e60000;     /* Text cho chữ "click here" */
}

/* 1) Tab CHỈ ĐỊNH TOA trong nội dung sản phẩm */
.woocommerce div.product .woocommerce-tabs ul.tabs li.rx_rx_tab a{
  color: var(--rx-attn) !important;
  font-weight: 800;
  font-size: 17px;
  position: relative;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.rx_rx_tab a::after{
  content: " • click here";
  text-transform: none;
  font-size: 14px;
  font-weight: 700;
  color: var(--rx-click);
  margin-left: .35rem;
}

/* 2) Nút nổi chuyển nhanh tới CHỈ ĐỊNH TOA (nút bạn đã làm) */
.rx-float-tabs a[href*="#tab-rx_rx"],
.rx-quick-tabs a[href*="#tab-rx_rx"]{
  background: var(--rx-attn) !important;
  color: #fff !important;
  font-weight: 900;
  font-size: 16px;
  position: relative;
}
.rx-float-tabs a[href*="#tab-rx_rx"]::after,
.rx-quick-tabs a[href*="#tab-rx_rx"]::after{
  content: "click here";
  display: block;
  font-size: 11px;
  line-height: 1;
  margin-top: 2px;
  color: var(--rx-click);
  text-transform: none;
  letter-spacing: .2px;
}

/* Mobile: chữ to hơn 1 chút để dễ bấm */
@media (max-width: 768px){
  .woocommerce div.product .woocommerce-tabs ul.tabs li.rx_rx_tab a{ font-size: 18px; }
  .rx-float-tabs a[href*="#tab-rx_rx"],
  .rx-quick-tabs a[href*="#tab-rx_rx"]{ font-size: 17px; }
}

/* ===== BIẾN THỂ MÀU (chọn 1 nếu cần) ===== */
/* Đỏ đậm + "click here" trắng */
/*
:root{ --rx-attn:#ef4444; --rx-click:#ffffff; }
*/
/* Vàng đậm + "click here" xanh */
/*
:root{ --rx-attn:#f59e0b; --rx-click:#0a56a4; }
*/


/* click hear end */

/* màu đỏ cho nút Chỉ định toa */

/* CHỈ ĐỊNH TOA – nền vàng, chữ đỏ */
.rx-floating-tabs .rx-tab-btn.is-rx,
.rx-floating-tabs .rx-tab-btn.is-rx span{
  background: linear-gradient(180deg, #ffec9c 0%, #f5b301 100%) !important; /* nền vàng */
  color: #e60000 !important;  /* chữ đỏ */
  border: none;
}

/* Hover / Focus / Active */
.rx-floating-tabs .rx-tab-btn.is-rx:hover,
.rx-floating-tabs .rx-tab-btn.is-rx:focus,
.rx-floating-tabs .rx-tab-btn.is-rx.is-active{
  background: linear-gradient(180deg, #fff2b8 0%, #f59e0b 100%) !important;
  color: #c40000 !important;  /* đỏ đậm hơn */
  box-shadow: 0 6px 18px rgba(245, 158, 11, .28);
}

/* Nếu có phiên bản link thay vì button */
.rx-float-tabs a[href*="#tab-rx_rx"],
.rx-quick-tabs a[href*="#tab-rx_rx"]{
  background: linear-gradient(180deg, #ffec9c 0%, #f5b301 100%) !important;
  color: #e60000 !important;
}
.rx-float-tabs a[href*="#tab-rx_rx"]:hover,
.rx-quick-tabs a[href*="#tab-rx_rx"]:hover{
  background: linear-gradient(180deg, #fff2b8 0%, #f59e0b 100%) !important;
  color: #c40000 !important;
}


/* nút chỉ định toa - END */


/* Responsive tinh chỉnh */
@media (max-width: 1024px){
  .woocommerce ul.products li.product .box{ min-height: 450px; }
  .woocommerce ul.products li.product .box-text{ min-height: 170px; }
}
@media (max-width: 767px){
  .woocommerce ul.products li.product .box{ min-height: 430px; }
  .woocommerce ul.products li.product .box-text{ min-height: 155px; }
}