/*
 Theme Name: Shop Toolkit Child
 Theme URI: https://example.com
 Description: Child theme of Shop Toolkit
 Author: Bạn
 Template: shop-toolkit
 Version: 1.0.0
 Text Domain: shop-toolkit-child
*/


/* Bỏ giới hạn chiều rộng của ảnh trong mô tả sản phẩm */
.woocommerce div.product .woocommerce-tabs .woocommerce-Tabs-panel img {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
}

/* Nếu phần container mô tả đang bị bó khung */
.woocommerce div.product .woocommerce-tabs .woocommerce-Tabs-panel {
    max-width: 100% !important;
    width: 100% !important;
}


/*chia cột menu*/
/* Chỉ áp dụng cho menu cấp 3 */
.main-navigation ul ul ul {
  column-count: 2;        /* số cột muốn chia, có thể đổi 3 */
  column-gap: 25px;       /* khoảng cách giữa cột */
  min-width: 350px;       /* chiều rộng dropdown */
  background: #fff;       /* nền trắng (có thể đổi) */
  padding: 10px 15px;
}

.main-navigation ul ul ul li {
  break-inside: avoid;    /* không cắt mục giữa cột */
  padding: 5px 10px;
}
/* Hiệu ứng menu*/
/* Ẩn menu con mặc định */
.main-navigation ul ul {
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition: all 0.35s ease;
  position: absolute;
  z-index: 999;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 8px 25px rgba(0,0,0,0.12);
  padding: 12px 18px;
}

/* Khi hover thì hiện menu */
.main-navigation ul li:hover > ul {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* Menu cấp 3 chia cột gọn */
.main-navigation ul ul ul {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px 20px;
  min-width: 380px;
  animation: fadeInMenu 0.4s ease;
}

/* Item menu */
.main-navigation ul ul li a {
  display: block;
  padding: 6px 10px;
  color: #333;
  text-decoration: none;
  border-radius: 6px;
  transition: all 0.25s ease;
}

/* Hover item menu: đổi màu theo màu thương hiệu */
.main-navigation ul ul li a:hover {
  background: #2d998e;
  color: #fff;
  transform: translateX(5px);
}

/* Item xuất hiện lần lượt */
.main-navigation ul ul li {
  opacity: 0;
  transform: translateX(-5px);
  animation: fadeSlide 0.4s forwards;
}
.main-navigation ul ul li:nth-child(1) { animation-delay: 0.05s; }
.main-navigation ul ul li:nth-child(2) { animation-delay: 0.1s; }
.main-navigation ul ul li:nth-child(3) { animation-delay: 0.15s; }
.main-navigation ul ul li:nth-child(4) { animation-delay: 0.2s; }
.main-navigation ul ul li:nth-child(5) { animation-delay: 0.25s; }
/* … có thể thêm tiếp cho mục 6,7,8... */

/* Keyframes */
@keyframes fadeInMenu {
  from { opacity: 0; transform: translateY(15px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes fadeSlide {
  from { opacity: 0; transform: translateX(-5px); }
  to { opacity: 1; transform: translateX(0); }
}
/* cuộn menu */
/* Chỉ sticky cho menu */

/* hiệu ứng trượt xuống */
@keyframes fadeDown {
  from {
    transform: translateY(-100%);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

/* Ẩn phân trang mặc định WordPress, trừ phân trang sticky */
.pagination,
.nav-links {
    display: none !important;
}

/* Chỉ ẩn .page-numbers khi nó nằm trong phân trang mặc định, KHÔNG ẩn trong phân trang sticky */
body .page-numbers {
    display: none !important;
}
.thanhhuyen-pagination .page-numbers {
    display: inline-block !important;
}

.radio-group {
  display: flex;
  justify-content: center;   /* canh giữa trang */
  gap: 20px;
  margin: 12px 0 25px;
  font-size: 14pt;
  color: #0b5d1e;
}

.radio-box {
  position: relative;
  border: 2px solid #0b5d1e;
  border-radius: 8px;
  padding: 10px 18px;
  cursor: pointer;
  transition: all 0.2s ease;
  user-select: none;
}

.radio-box input {
  display: none;
}

.radio-box span {
  font-weight: 500;
}

.radio-box:hover {
  background: #e9f6ec;
}

.radio-box input:checked + span {
  font-weight: bold;
}

.radio-box input:checked + span::before {
  content: "✓ ";
  color: #0b5d1e;
}
.bat-buoc {
  color: red;
  font-weight: bold;
}
/* Ẩn icon Account + Giỏ hàng trên header */
/* Ẩn link Account và Cart WooCommerce trên header */
header a[href*="my-account"],
header a[href*="cart"],
header a[href*="checkout"] {
    display: none !important;
}

/* Ẩn icon giỏ hàng nổi góc phải */
a.cart-contents,
a.cart-content,
.cart-contents,
.site-header-cart,
.header-cart {
    display: none !important;
}

/* Ẩn icon xe đẩy + số lượng */
i.fa-shopping-cart,
i.fa-cart-shopping,
i.fa-cart-plus,
.cart-count,
.cart-counter,
.cart-badge,
sup {
    display: none !important;
}


.site-info.finfo.dsinfo {
    z-index: 1 !important;
}

/* Thêm viền cho sản phẩm trong trang cửa hàng */
.woocommerce ul.products li.product {
    border: 1px solid #ddd; /* màu xám nhạt */
    border-radius: 8px;     /* bo góc mềm mại */
    padding: 10px;          /* thêm khoảng cách trong */
    margin: 10px;           /* khoảng cách giữa các sản phẩm */
    transition: all 0.3s ease;
}

/* Hiệu ứng hover */
.woocommerce ul.products li.product:hover {
    border-color: #00ff33;  /* đổi màu viền khi hover */
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

/* Đảm bảo chiều cao các sản phẩm bằng nhau */
.woocommerce ul.products li.product {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 380px; /* chỉnh chiều cao tuỳ theo ảnh & nội dung */
}

/* Khung sản phẩm */
.woocommerce ul.products li.product {
    display: flex;
    flex-direction: column;      /* sắp xếp dọc */
    justify-content: space-between;
    height: 100%;                /* full chiều cao */
    position: relative;
    padding-bottom: 50px;        /* chừa chỗ cho nút */
}

/* Nút giỏ hàng xuống cuối khung */
.woocommerce ul.products li.product .button {
    position: absolute;
    bottom: 10px;   /* cách mép dưới */
    left: 10px;
    right: 10px;
    text-align: center;
}

/* Đổi kích thước tên sản phẩm */
.woocommerce ul.products li.product .woocommerce-loop-product__title {
    font-size: 15px; /* chỉnh px theo ý */
}


/* Ẩn header, menu, sidebar, footer trên trang cụ thể */
.page-id-1824 header,
.page-id-1824 .site-header,
.page-id-1824 nav,
.page-id-1824 .widget-area {
  display: none !important;
}

/* Nội dung căn giữa toàn trang */
.page-id-1824 .site {
  margin: 0;
  padding: 0;
}

.page-id-1824 #content {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh; /* toàn màn hình */
  text-align: center;
}

/* Chọn thẻ sản phẩm, ví dụ WooCommerce */
.products .product {
  transition: transform 0.3s cubic-bezier(0.25, 1, 0.5, 1); /* mượt mà */
  /* Optional: thêm shadow để nổi bật hơn khi hover */
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

/* Khi hover */
.products .product:hover {
  transform: translateY(-10px) scale(1.05); /* nẩy lên 10px và zoom 1.05 lần */
  box-shadow: 0 10px 20px rgba(0,0,0,0.2); /* shadow nổi bật hơn */
}
/* CSS: thêm vào style của trang hoặc Appearance > Customize > Additional CSS */
.info-bubble {
  position: relative;
  width: 50px;
  height: 50px;
  background-color: #00FF33;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-weight: bold;
  transition: transform 0.3s cubic-bezier(0.25, 1, 0.5, 1);
}

/* Nẩy nhẹ và phóng to khi hover */
.info-bubble:hover {
  transform: scale(1.15) translateY(-5px);
}

.menu-list li a::after{
    content:"❤";
    position:absolute;
    right:15px;
    opacity:0;
    transition:all 0.4s ease;
}

.menu-list li a:hover::after{
    opacity:1;
    transform:translateX(8px);
}
/* Khoảng cách giữa các sản phẩm */
.xskit-blog-grid{
    margin-bottom:35px !important;
}

/* Khoảng cách giữa các hàng Bootstrap */
.search-results .row{
    row-gap:35px;
}

/* Card */
.xskit-blog-grid{
    background:#fff;
    border-radius:12px;
    overflow:hidden;
    box-shadow:0 3px 12px rgba(0,0,0,.12);
    display:flex;
    flex-direction:column;
    height:100%;
    margin-bottom:40px;
}

/* Ảnh */
.shop-toolkit-grid-img{
    aspect-ratio:1/1;
    overflow:hidden;
}

.shop-toolkit-grid-img img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
}

/* Nội dung card */
.shop-toolkit-grid-text{
    display:flex;
    flex-direction:column;
    flex:1;
    padding:0;
}

/* Tiêu đề */
.entry-title{
    min-height:90px;
    display:flex;
    align-items:center;
    justify-content:center;
    text-align:center;
    padding:20px 15px;
    margin:0;
    line-height:1.3;
}

/* Kéo nút xuống đáy */
.entry-content{
    margin-top:auto;
    padding:0;
}

/* Nút full ngang */
.readmore{
    display:block !important;
    width:100%;
    margin:0 !important;
    padding:18px 0;
    background:#f26d75;
    color:#fff !important;
    text-align:center;
    text-decoration:none;
    font-weight:700;
    border-radius:0 !important;
}

/* Hover */
.readmore:hover{
    background:#ea5d66;
    color:#fff !important;
}
/* Card */
.xskit-blog-grid{
    display:flex;
    flex-direction:column;
    height:100%;
}

/* Khối nội dung */
.shop-toolkit-grid-text{
    flex:1;
    display:flex;
    flex-direction:column;
    padding:0 !important;
}

/* Kéo nút xuống đáy */
.entry-content{
    margin-top:auto !important;
    padding:0 !important;
}

/* Nút full ngang và sát đáy */
.readmore{
    display:block !important;
    width:100%;
    margin:0 !important;
    padding:16px 0 !important;
    border-radius:0 !important;
}

/* Nếu theme có padding dưới card */
.xskit-blog-grid,
.shop-toolkit-grid-text,
    padding-bottom:0 !important;
}

/* Card */
.xskit-blog-grid{
    display:flex;
    flex-direction:column;
    height:100%;
}

/* Khối nội dung */
.shop-toolkit-grid-text{
    flex:1;
    display:flex;
    flex-direction:column;
    padding:0 !important;
}

/* Kéo nút xuống đáy */
.entry-content{
    margin-top:auto !important;
    padding:0 !important;
}

/* Nút full ngang và sát đáy */
.readmore{
    display:block !important;
    width:100%;
    margin:0 !important;
    padding:16px 0 !important;
    border-radius:0 !important;
}

/* Nếu theme có padding dưới card */
.xskit-blog-grid,
.shop-toolkit-grid-text,
.entry-content{
    padding-bottom:0 !important;
}


.shop-toolkit-grid-text{
    padding:0 !important;
}