/*
Theme Name: Poolex Child 2026
Theme URI: http://poolex.vn
Description: Theme con kế thừa toàn bộ giao diện và chức năng của theme Poolex.
Author: Poolex Trading & Services Co., Ltd.
Author URI: http://www.poolex.vn
Template: poolex
Version: 1.0.0
Text Domain: poolex-child-2026
*/

/* --- Ghi đè hoặc thêm style tại đây --- */
.hero-title {
  font-size: clamp(40px, 5vw, 64px);
  color: #fff;
  font-weight: 700;
  text-align: center;
}

.hero-desc {
  color: #fff;
  font-size: 18px;
  margin-top: 10px;
}


/* ============================
   FULL HERO SLIDER FIX (POOLEX)
   ============================ */

/* 1) Ép chiều cao full màn hình */
.head-slider,
.head-slider .owl-carousel-head,
.head-slider .owl-carousel-head .item,
.head-slider-item.hsi {
    height: 90vh !important;
    min-height: 680px !important;
    overflow: hidden !important;
    position: relative !important;
    padding: 0 !important;
}

/* 2) Khối ảnh chiếm toàn bộ hero */
.hsi__img {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    overflow: hidden !important;
    z-index: 0 !important;
}

/* 3) Ảnh cover full hero (fix hở trắng) */
.hsi__img img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
    display: block !important;
}

/* 4) Nội dung hero căn giữa tuyệt đối */
.hsi_content {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    z-index: 2 !important;
    width: 100% !important;
    text-align: center !important;
    padding: 0 20px !important;
}

/* 5) Mobile: vừa mắt nhưng vẫn full */
@media (max-width: 768px) {
    .head-slider,
    .head-slider .owl-carousel-head,
    .head-slider .owl-carousel-head .item,
    .head-slider-item.hsi {
        height: 90vh !important;
        min-height: 540px !important;
    }
    
    
}

/* ==== HERO TITLE + BUTTON BALANCE ==== */

/* Tổng thể hero căn giữa hoàn hảo */
.hsi_content.hsic {
  top: 50% !important;
  transform: translate(-50%, -50%) !important;
  text-align: center !important;
}

/* Subtitle */
.hsit__item--style1 {
  font-size: 20px !important;
  letter-spacing: 2px !important;
  text-transform: uppercase;
  color: #fff !important;
  margin-bottom: 12px !important;
  font-weight: 500 !important;
  text-shadow: 0 2px 5px rgba(0,0,0,0.35);
}

/* Title chính */
.hsit__item--style2 {
  font-size: clamp(48px, 5.5vw, 70px) !important;
  line-height: 1.1 !important;
  color: #fff !important;
  font-weight: 700 !important;
  margin-bottom: 30px !important;
  text-shadow: 0 2px 8px rgba(0,0,0,0.35);
}
/* Desktop: ép tất cả span trong title nối lại thành 1 dòng */
@media (min-width: 769px) {
  .hsit__item--style2 br {
    display: none !important;
  }
}
@media (min-width: 769px) {
  .hsit__item--style2 span {
    display: inline !important;
    white-space: nowrap !important;
  }
}

/* Subtitle mô tả */
.hsit__item--style3 {
  font-size: 20px !important;
  line-height: 1.5 !important;
  color: #154A81 !important;
  opacity: 0.9 !important;
  margin-bottom: 30px !important;
  
}

/* =====================================
   MOBILE HERO OPTIMIZATION (≤ 768px)
   ===================================== */
@media (max-width: 768px) {

  /* Hero text block đẩy lên cao hơn một chút */
  .hsi_content.hsic {
    top: 46% !important;                       /* từ 50% → 46% */
    transform: translate(-50%, -46%) !important;
    padding: 0 20px !important;
  }

  /* Subtitle trên cùng */
  .hsit__item--style1 {
    font-size: 15px !important;
    letter-spacing: 1.4px !important;
    font-weight: 700 !important;
    margin-bottom: 10px !important;
  }

  /* === TITLE CHÍNH (TĂNG CỠ CHỮ) === */
     .hsit__item--style2 {
    font-size: clamp(40px, 9vw, 48px) !important;
    line-height: 1.15 !important;
    font-weight: 800 !important;
    margin-bottom: 24px !important;
  }

  .hsit__item--style2 .title-line-2 {
    display: block !important;
    margin-top: 4px !important;
  }

  .hsi__btn {
    margin-top: 22px !important;
  }
}

  /* Subtitle mô tả */
  .hsit__item--style3 {
    display: block !important;
    font-size: 16px !important;
    line-height: 1.45 !important;
    margin-bottom: 34px !important;               /* đẩy xa hơn khỏi title */
    opacity: 0.95 !important;
  }
  @media (max-width: 768px) {
    .hsit__item--style3 {
        white-space: nowrap !important;      /* ❗ không cho xuống dòng */
        overflow: hidden !important;          /* ẩn tràn nếu dài */
        text-overflow: ellipsis !important;   /* thêm dấu "..." nếu quá dài */
        font-size: 14px !important;           /* thu nhỏ để vừa màn hình */
        line-height: 1.4 !important;
        max-width: 90% !important;            /* để tránh tràn màn hình */
        margin: 0 auto !important;            /* căn giữa */
        display: block !important;
    }
}

/* Cha của dòng subtitle – căn giữa toàn bộ */
.hsi__text.hsit,
.hsi__text,
.hsi__item--style3 {
    text-align: center !important;
}

/* Nếu vẫn lệch -> force center cho badge */
.hsit__item--style3 {
    display: inline-block;
    margin-left: auto !important;
    margin-right: auto !important;
}
/* ⭐ Subtitle nền trắng mờ, ôm sát chữ */
.hsit__item--style3 {
    display: inline-block;
    background: rgba(255, 255, 255, 1); /* trắng mờ vừa phải */
    padding: 4px 18px;                     /* thu nhỏ lại */
    border-radius: 999px;                  /* bo tròn 2 đầu */
    backdrop-filter: blur(3px);
    font-weight: 500;
    margin-top: 10px;
    line-height: 1.4;
    width: auto;                           /* đảm bảo ôm chữ */
    max-width: max-content;                /* tránh giãn rộng */
}

/* === Button Hero chính xác màu & tỷ lệ chuẩn Poolex === */
/* ============================================================
   🎯 FIX GỐC: LOẠI BỎ TOÀN BỘ STYLE CŨ ẢNH HƯỞNG BUTTON
   ============================================================ */

.hsi__btn,
.hsi__btn_2 {
    float: none !important;
    width: auto !important;
    display: block !important;
    text-align: center !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* ============================================================
   🎯 KHỐI CHUNG CHỨA HAI NÚT – ÉP CĂN GIỮA DESKTOP
   ============================================================ */
.hsi__btn-group {
    width: 100% !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 18px !important;
    margin-top: 72px !important;
    position: relative !important;
    z-index: 10 !important;
}

/* ============================================================
   🎯 STYLE CHUNG CHO HAI NÚT
   ============================================================ */
.hsi__btn-group .btn {
    min-width: 230px !important;
    height: 54px !important;             /* chiều cao cố định — 2 nút bằng nhau */
    display: inline-flex !important;
    justify-content: center !important;
    align-items: center !important;
    padding: 0 26px !important;
    font-size: 20px !important;
    font-weight: 700 !important;
    border-radius: 8px !important;
    box-sizing: border-box !important;
}


/* === Outline trắng === */
.hsi__btn .btn {
    padding: 14px 26px !important;       /* tăng padding để outline không sát chữ */
    line-height: 1.3 !important;
    border: 2px solid #fff !important;
    background: transparent !important;
    color: #fff !important;
    border-radius: 8px !important;
    box-sizing: border-box !important;   /* để border không làm thay đổi kích thước */
}

/* Hover outline */
.hsi__btn .btn:hover {
    background: #fff !important;
    color: #154A81 !important;
    transform: translateY(-3px);
    box-shadow: 0 6px 18px rgba(255,255,255,0.3);
}

/* === Nút vàng === */
.hsi__btn_2 .btn {
    background: #fff !important;
    border: 2px solid #fff !important; /* để khớp border 2px với nút outline */
    color: #154A81 !important;
    height: 54px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
}

.hsi__btn_2 .btn:hover {
    background: #fff !important;
    border-color: #fff !important;
    color: #154A81 !important;
    box-shadow: 0 6px 18px rgba(255,255,255,0.3);
}

/* Icon điện thoại */
.hsi__btn_2 .btn .btn-icon {
    width: 20px;
    height: 20px;
    content: url('/wp-content/themes/poolex-child-2026/assets/icons/phone-blue.svg');
}

/* ============================================================
   🔥 FIX CỨNG HERO BUTTON MOBILE — BỎ QUA MỌI CSS THEME CHA
   ============================================================ */

@media (max-width: 768px) {

  /* Khối chứa nút */
  .hsi_content .hsi__btn-group,
  .hsi .hsi__btn-group {
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 16px !important;
    margin-top: 65px !important;
  }

  /* ===== FIX WIDTH ===== */
  .hsi_content .hsi__btn-group .btn,
  .hsi .hsi__btn-group .btn,
  .hsi__btn .btn,
  .hsi__btn_2 .btn {
    width: 300px !important;         /* 🔥 ép cứng chiều rộng */
    max-width: 300px !important;
    min-width: 300px !important;
    box-sizing: border-box !important;

    min-height: 48px !important;     /* 🔥 chiều cao thấp hơn */
    padding: 0 !important;

    display: flex !important;
    justify-content: center !important;
    align-items: center !important;

    font-size: 18px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    border-radius: 10px !important;

    gap: 10px !important;            /* Khoảng cách icon */
  }

  /* ===== Style nút outline ===== */
  .hsi__btn .btn {
    border: 2px solid #fff !important;
    background: transparent !important;
    color: #fff !important;
  }
  .hsi__btn .btn:hover {
    background: #fff !important;
    color: #154A81 !important;
  }

  /* ===== Style nút vàng ===== */
  .hsi__btn_2 .btn {
    background: #fff !important;
    color: #154A81 !important;
    border: none !important;
  }
  .hsi__btn_2 .btn:hover {
    background: #e4a417 !important;
    color: #fff !important;
  }

  /* Icon căn giữa */
  .hsi__btn_2 .btn .btn-icon {
    width: 20px !important;
    height: 20px !important;
    content: url('/wp-content/themes/poolex-child-2026/assets/icons/phone-blue.svg');
  }
  /* Icon điện thoại */
    .hsi__btn_2 .btn:hover .btn-icon {
    content: url('/wp-content/themes/poolex-child-2026/assets/icons/phone.svg') !important;
}
}

/* FIX chữ nút không bị xếp dọc */
.hsi__btn-group .btn,
.hsi__btn-group .btn-primary,
.hsi__btn-group .btn-outline {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    white-space: nowrap !important;   /* 🔥 Giữ mọi thứ trên 1 dòng */
    gap: 10px !important;
    width: auto !important;
}

/* Trạng thái ban đầu: ẩn + trượt nhẹ xuống */
.hsit__item--style1,
.hsit__item--style2,
.hsit__item--style3,
.hsi__btn a,
.hsi__btn_2 a {
  opacity: 0;
  transform: translateY(18px);
}

/* Animation fade-up */
@keyframes pxFadeUp {
  0% {
    opacity: 0;
    transform: translateY(18px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Chỉ khi body có class .px-hero-ready mới chạy animation */
body.px-hero-ready .hsit__item--style1,
body.px-hero-ready .hsit__item--style2,
body.px-hero-ready .hsit__item--style3,
body.px-hero-ready .hsi__btn a,
body.px-hero-ready .hsi__btn_2 a {
  animation: pxFadeUp 0.8s ease-out forwards;
}

/* Delay từng tầng */
body.px-hero-ready .hsit__item--style1 { animation-delay: 0.10s; }
body.px-hero-ready .hsit__item--style2 { animation-delay: 0.22s; }
body.px-hero-ready .hsit__item--style3 { animation-delay: 0.34s; }
body.px-hero-ready .hsi__btn a,
body.px-hero-ready .hsi__btn_2 a { animation-delay: 0.50s; }


/* ===== DARK OVERLAY FOR HERO ===== */
.hsi__img {
    position: relative;
}
.hsi__img::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        rgba(0,0,0,0.55) 0%,
        rgba(0,0,0,0.35) 40%,
        rgba(0,0,0,0.15) 100%
    );
    z-index: 1;
}
.hsi__img img {
    position: relative;
    z-index: 0;
}

.hsi_content {
    position: relative;
    z-index: 2;
}


/* === HIỆU ỨNG HOVER CHUNG CHO TOÀN BỘ NÚT POOLEX === */
.btn,
.px-btn,
.px-service .btn,
.px-solution .btn,
.px-service .px-btn,
.px-solution .px-btn {
  transition: all 0.3s ease;
  transform: translateY(0);
  box-shadow: none;
}

/* 🟡 Nút chính thương hiệu */
.btn-primary,
.px-btn--solid,
.px-service .btn-primary,
.px-solution .btn-primary {
  background-color: #F0B529;
  color: #fff;
  border: none;
}

/* 🟦 Nút viền xanh */
.btn-outline,
.px-btn--outline,
.px-service .btn-outline,
.px-solution .btn-outline {
  border: 2px solid #154A81;
  color: #154A81;
  background-color: transparent;
}

/* ✨ Hiệu ứng hover tinh tế – nhấc nhẹ & bóng mềm */
.btn:hover,
.px-btn:hover,
.px-service .btn:hover,
.px-solution .btn:hover {
  transform: translateY(-2px); /* nhấc nhẹ hơn, tinh tế */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.12); /* bóng nhẹ, mềm hơn */
  opacity: 0.97;
}

/* 🎨 Hiệu ứng hover màu */
.btn-primary:hover,
.px-btn--solid:hover,
.px-service .btn-primary:hover,
.px-solution .btn-primary:hover {
  background-color: #e0a722;
}

.btn-outline:hover,
.px-btn--outline:hover,
.px-service .btn-outline:hover,
.px-solution .btn-outline:hover {
  background-color: #154A81;
  color: #fff;
}
/* Khi nhấn (active) */
.btn:active,
.px-btn:active,
.px-service .btn:active,
.px-solution .btn:active {
  transform: translateY(0); /* trở lại vị trí */
  box-shadow: 0 2px 4px rgba(0,0,0,0.15);
}

/* === HIỆU ỨNG HOVER CHO THANH BAR VÀNG (.top-header) === */
.top-header-right a {
  color: #ffffff;
  font-weight: 500;
  text-decoration: none !important;
  transition: all 0.3s ease;
}

/* 🟦 Khi hover: chữ xanh, đậm hơn, có bóng nhẹ, không gạch chân */
.top-header-right a:hover {
  color: #154A81;
  font-weight: 600;
  text-decoration: none !important;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
  transform: translateY(-1px);
}

/* ============================================
   ⭐ FIX FOOTER PHONE LINK ON MOBILE
   ============================================ */
@media (max-width: 768px) {
  .site-footer a[href^="tel"],
  footer a[href^="tel"],
  .footer-phone a {
      color: #FFFFFF !important;      /* giữ màu trắng */
      text-decoration: none !important; 
      -webkit-text-fill-color: #FFFFFF !important; /* iPhone fix */
  }

  /* Special fix: Safari mobile tự gạch chân */
  .site-footer a[href^="tel"]:hover,
  footer a[href^="tel"]:hover {
      text-decoration: none !important;
  }
}


/* === HERO Poolex (phiên bản căn giữa + icon to hơn) === */
.px-hero {
  position: relative;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  padding: 120px 0; /* tăng để hero cao, title cân giữa hơn */
  text-align: center;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}

.px-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.35);
}

.px-hero .container {
  position: relative;
  z-index: 2;
}

.px-hero__title {
  font-size: 46px;
  font-weight: 700;
  color: #fff;
  margin-bottom: 30px; /* giãn cách với breadcrumb */
}

.px-hero__subtitle {
  font-size: 18px;
  color: #E0E0E0;
  margin-bottom: 60px;
  max-width: 820px;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.6;
}

.px-hero__breadcrumbs {
  font-size: 18px;
  color: #E0E0E0;
  font-weight: 400;
}

.px-hero__breadcrumbs i {
  color: #E0E0E0;
  margin: 0 8px;
  font-size: 20px; /* icon lớn hơn */
  vertical-align: middle;
}

.px-hero__breadcrumbs a {
  color: #E0E0E0;
  text-decoration: none;
}

.px-hero__breadcrumbs a:hover {
  color: #F0B529 !important; /* vàng thương hiệu khi hover */
}

/* === Điều chỉnh vị trí ảnh bìa hero === */
.px-hero {
  background-position: center 60% !important; /* Đẩy ảnh lên trên nhẹ */
}


/* Poolex Smart Pagination — compact, one-line */
.wp-pagenavi{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:6px;
    white-space:nowrap;
    overflow-x:auto;
    scrollbar-width:none;         /* Firefox */
}
.wp-pagenavi::-webkit-scrollbar{ display:none; } /* Chrome */

.wp-pagenavi a,
.wp-pagenavi span{
    display:inline-block;
    padding:6px 12px;
    border-radius:6px;
    text-decoration:none;
    /* Giữ nguyên màu/kích thước hiện có trong site của anh;
       nếu cần, kế thừa từ theme hiện tại */
    flex-shrink:0;
}

/* Giữ style active hiện tại của anh (nếu có).
   Ví dụ minh hoạ:
.wp-pagenavi .current{
    background:#154A81;color:#fff;
}
*/

/* ==== Poolex Smart Pagination - mobile friendly ==== */
.wp-pagenavi {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: nowrap;
    overflow-x: auto;
    white-space: nowrap;
    gap: 4px;
    -webkit-overflow-scrolling: touch; /* giúp vuốt mượt trên iPhone */
    padding: 4px 0;
    scrollbar-width: none;
}
.wp-pagenavi::-webkit-scrollbar { display: none; }

.wp-pagenavi a,
.wp-pagenavi span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 32px;
    padding: 6px 10px;
    border-radius: 6px;
    text-decoration: none;
    color: #154A81;
    font-weight: 500;
    flex-shrink: 0;
    transition: all 0.2s ease;
    font-size: 15px;
}

.wp-pagenavi .current {
    background-color: #154A81;
    color: #fff;
}

.wp-pagenavi a:hover {
    color: #f0b529;
}

.wp-pagenavi span.pages {
    display: none !important;
}

/* Giảm cỡ chữ và padding trên mobile nhỏ */
@media (max-width: 575px) {
    .wp-pagenavi a,
    .wp-pagenavi span {
        min-width: 28px;
        padding: 4px 8px;
        font-size: 14px;
    }
}

/* ============================
   Poolex – Post Navigation Minimal
   ============================ */
.px-post-nav {
  margin: 48px 0;
  padding: 32px 0;
  border-top: 1px solid #e5e9ef;
  border-bottom: 1px solid #e5e9ef;
  font-family: 'Roboto', sans-serif;
}

.px-nav-links {
  display: flex;
  justify-content: space-between;
  gap: 2rem;
}

.px-nav-card {
  display: block;
  flex: 1;
  background: #f8fafc;
  border-radius: 20px;
  padding: 22px 30px;
  text-decoration: none;
  color: #154A81;
  transition: all 0.3s ease;
}

.px-nav-card:hover {
  background: #154A81;
  color: #fff;
  transform: translateY(-3px);
  box-shadow: 0 10px 24px rgba(0,0,0,0.08);
}

.px-nav-label {
  display: block;
  font-size: 13px;
  font-weight: 700;
  color: #F0B529;
  text-transform: uppercase;
  margin-bottom: 6px;
  letter-spacing: 0.5px;
}

/* Tiêu đề bài viết: cố định 2 dòng */
.px-nav-title {
  display: -webkit-box;
  -webkit-line-clamp: 2;    /* 👈 Hiển thị 2 dòng */
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.35;
  margin-bottom: 6px;
  min-height: 2.7em;        /* 👈 Đảm bảo chiều cao cố định cho 2 dòng */
  color: #154A81;
}

.px-nav-desc {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: 15px;
  font-weight: 500;
  opacity: 0.85;
  line-height: 1.5;
  color: #666;           /* 👈 Màu xám chữ (anh có thể đổi sang #777 hoặc #888 nếu muốn nhạt hơn) */
  opacity: 0.95;
  margin-top: 4px;
}

/* Hover – đổi màu khi nền xanh */
.px-nav-card:hover .px-nav-title,
.px-nav-card:hover .px-nav-desc {
  color: #fff;
}
.px-nav-card:hover .px-nav-label {
  color: #F0B529;
}

/* ==============================
   📱 Responsive mobile layout
   ============================== */
@media (max-width: 768px) {
  .px-nav-links {
    flex-direction: column;   /* 👈 Hiển thị dọc trên dưới */
    gap: 16px;
  }
  .px-nav-card {
    padding: 18px 24px;
    border-radius: 16px;
  }
  .px-nav-title {
    font-size: 18px;
    min-height: 2.5em;
  }
  .px-nav-desc {
    font-size: 14px;
  }
}

/* ============================
   Poolex – Title chính bài viết (Single)
   ============================ */
.single-post .entry-title {
  font-size: 38px;
  line-height: 1.3;              /* 👈 Tăng nhẹ độ cao dòng cho thoáng */
  font-weight: 700;              /* 👈 Đỡ nặng hơn 800 */
  text-transform: uppercase;     /* In hoa */
  color: #154A81;
  letter-spacing: 0.3px;         /* 👈 Giảm khoảng cách giữa chữ */
  margin-bottom: 24px;
  font-family: 'Roboto', sans-serif;
}

/* Tablet */
@media (max-width: 1024px) {
  .single-post .entry-title {
    font-size: 30px;
    line-height: 1.35;
    letter-spacing: 0.2px;
  }
}

/* Mobile */
@media (max-width: 768px) {
  .single-post .entry-title {
    font-size: 22px;
    line-height: 1.35;
    letter-spacing: 0.1px;
    text-align: center;
  }
}


/* ============================
   Poolex – Comment Section Refinement
   ============================ */

/* Tổng thể */
.comments-area {
  margin-top: 40px;
  border-top: none;
  font-family: 'Roboto', sans-serif;
}

/* Tiêu đề bình luận */
.comments-title {
  font-size: 24px;
  font-weight: 800;
  color: #154A81;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 24px;
  position: relative;
}

.comments-title::after {
  content: '';
  display: block;
  width: 60px;
  height: 3px;
  background-color: #F0B529;
  margin-top: 6px;
  border-radius: 2px;
}

/* Mỗi comment */
.comment {
  background: #f8fafc;
  border-radius: 16px;
  padding: 18px 24px;
  margin-bottom: 16px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.03);
  border: 1px solid #edf1f6;
}

/* ===============================
   Poolex – Ẩn số thứ tự bình luận (bao gồm comment con)
   =============================== */
ol.comment-list,
ol.comment-list ol.children {
  list-style: none;
  padding-left: 0;
  margin: 0;
}

ol.comment-list > li::before,
ol.comment-list ol.children > li::before {
  content: none !important; /* 👈 Ẩn số thứ tự ở mọi cấp */
}

/* Avatar và tên */
.comment-author {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  color: #154A81;
}
.comment-author .avatar {
  border-radius: 50%;
  width: 38px;
  height: 38px;
}

/* Thông tin meta: ngày giờ */
.comment-meta {
  font-size: 14px;
  color: #777;
  margin-bottom: 8px;
}

/* Nội dung comment */
.comment-content p {
  font-size: 16px;
  line-height: 1.6;
  color: #1a365d;
}

/* Liên kết trong comment */
.comment a {
  color: #777;               /* 👈 Màu xám trung tính */
  text-decoration: none;     /* 👈 Bỏ gạch chân */
  transition: color 0.25s ease;
}
.comment a:hover {
  color: #F0B529;            /* 👈 Vàng nhấn khi hover */
}

/* Nút "Trả lời" */
.comment-reply-link {
  font-size: 14px;
  font-weight: 600;
  text-transform: uppercase;
}

/* Ô nhập bình luận */
.comment-respond {
  margin-top: 40px;
  padding: 30px 24px;
  background: #f8fafc;
  border-radius: 16px;
  border: 1px solid #edf1f6;
}

.comment-respond h3 {
  font-size: 20px;
  font-weight: 700;
  color: #154A81;
  margin-bottom: 16px;
  text-transform: uppercase;
}


/* Comment con (trả lời) */
.children {
  margin-left: 40px;
  border-left: 2px solid #e0e5ec;
  padding-left: 16px;
}

/* Mobile */
@media (max-width: 768px) {
  .comment, .comment-respond {
    padding: 16px 18px;
  }
  ol.comment-list > li::before {
    left: -20px;
  }
}

/* ==========================================
   Poolex – Đặt Tên và Email cùng 1 hàng trong form bình luận
   ========================================== */

/* Tạo layout flex cho form */
.comment-form {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

/* Gom hai trường Tên và Email chung hàng */
.comment-form-author,
.comment-form-email {
  flex: 1 1 calc(50% - 8px); /* mỗi field chiếm 50% trừ khoảng cách */
  min-width: 250px;
}

/* Giữ các field còn lại 100% chiều ngang */
.comment-form-comment,
.comment-form-cookies-consent,
.form-submit {
  flex: 1 1 100%;
}

/* Style cho input & textarea */
.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form textarea {
  width: 100%;
  border: 1px solid #d8dee7;
  border-radius: 12px;
  padding: 10px 14px;
  font-size: 15px;
  color: #333;
  background: #fff;
  transition: border-color 0.3s ease;
  box-sizing: border-box;
}

.comment-form input:focus,
.comment-form textarea:focus {
  border-color: #154A81;
  outline: none;
}

/* Nút gửi */
.comment-form input[type="submit"] {
  background: #154A81;
  color: #fff;
  font-weight: 600;
  border: none;
  border-radius: 12px;
  padding: 10px 22px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.comment-form input[type="submit"]:hover {
  background: #F0B529;
  color: #154A81;
}

/* Responsive: mobile sẽ tự xuống hàng */
@media (max-width: 768px) {
  .comment-form {
    flex-direction: column;
  }
  .comment-form-author,
  .comment-form-email {
    flex: 1 1 100%;
  }
}

/* ===============================
   Poolex Hero – Cân đối bố cục title / subtitle / breadcrumb
   =============================== */

/* Khối hero tổng */
.px-hero {
  position: relative;
  background-size: cover;
  background-position: center;
  overflow: hidden;
}

/* Overlay giữ nguyên (đen mờ) */
.px-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  z-index: 1;
}

/* Căn giữa toàn bộ nội dung hero */
.px-hero__inner {
  position: relative;
  z-index: 2;
  text-align: center;
  padding: 60px 0 50px; /* 👈 cân giữa hero – gọn vừa khung */
}

/* Tiêu đề chính (giữ nguyên font, màu) */
.px-hero__title {
  margin-bottom: 12px; /* 👈 giảm nhẹ khoảng cách với subtitle */
}

/* Mô tả hero */
.px-hero__subtitle {
  margin-bottom: 16px !important; /* 👈 khoảng cách hợp lý với breadcrumb */
  line-height: 1.6;
  max-width: 780px;
  margin-left: auto;
  margin-right: auto;
}

/* Breadcrumbs */
.px-hero__breadcrumbs {
  margin-top: 0;
  font-size: 14px;
}

/* Responsive gọn hơn trên mobile */
@media (max-width: 768px) {
  .px-hero__inner {
    padding: 60px 0 50px;
  }
  .px-hero__title {
    margin-bottom: 10px;
  }
  .px-hero__subtitle {
    margin-bottom: 14px !important;
    font-size: 15px;
  }
}

/* ==========================
   ENTRY META (Ngày đăng + Chuyên mục)
   ========================== */
.entry-meta {
  background: #f8fafc;          /* ✅ Nền sáng đồng bộ toàn site */
  border-radius: 10px;
  padding: 10px 16px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 24px;
}

.entry-meta .posted-on,
.entry-meta .cat-links {
  color: #666;                  /* ✅ Đồng bộ màu chữ */
  font-size: 15px;
  line-height: 1.6;
  font-weight: 600;
}

.entry-meta .posted-on a {
  color: #154A81;                  /* ✅ Ngày tháng đồng bộ màu chuyên mục */
  text-decoration: none;
  transition: color 0.25s ease;
}

.entry-meta .posted-on a:hover {
  color: #F0B529;               /* Hover vàng thương hiệu Poolex */
}

.entry-meta .cat-links strong {
  font-weight: 600;
}

.entry-meta .cat-links a {
  color: #154A81;
  text-decoration: none;
  transition: color 0.25s ease;
}

.entry-meta .cat-links a:hover {
  color: #F0B529;
}

/* ========== POST FEEDBACK SECTION ========== */
.px-post-feedback {
  background: #f8fafc;
  border-radius: 10px;
  padding: 16px 20px;
  margin-top: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.px-feedback-inner {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.px-like-dislike {
  display: flex;
  justify-content: center;
  gap: 16px;
}

.px-btn {
  background: white;
  border: 1px solid #d5e0eb;
  color: #154A81;
  font-weight: 600;
  border-radius: 8px;
  padding: 8px 14px;
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  transition: all 0.25s ease;
}

.px-btn:hover {
  background: #154A81;
  color: white;
  border-color: #154A81;
}

.px-share {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
}

.px-share-label {
  color: #666;
  font-weight: 500;
  margin-right: 6px;
}

.px-share-btn {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: white;
  border: 1px solid #d5e0eb;
  color: #154A81;
  transition: all 0.25s ease;
}

.px-share-btn:hover {
  background: #154A81;
  color: white;
  transform: translateY(-2px);
}
.px-share-btn.zalo img {
  filter: brightness(0) saturate(100%) invert(22%) sepia(96%) saturate(3027%) hue-rotate(187deg) brightness(100%) contrast(102%);
}

/* Active cho like unlike cmt */
.px-btn.active {
  background: #154A81;
  color: white;
  border-color: #154A81;
}
.px-btn .count {
  margin-left: 4px;
  font-weight: 500;
  color: #666;
}
.px-btn.active .count {
  color: #fff;
}

.px-share {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 16px;
  flex-wrap: wrap;
}

.px-share-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #f8fafc; /* Giữ nền cũ */
  color: #154A81; /* Màu thương hiệu Poolex */
  transition: all 0.25s ease;
  border: none;
  text-decoration: none;
  cursor: pointer;
}

.px-share-btn:hover {
  background-color: #154A81 !important;
  color: #fff;
}

.px-share-btn i {
  font-size: 15px;
}

.px-share-btn.native {
  background-color: #e9f0fa; /* Giữ tone nhẹ hơn cho nút chia sẻ hệ thống */
}

/* Style cho Pingback/Trackback trong phần bình luận */
.pingback, .trackback {
  border-radius: 8px;
  background-color: #f8fafc;
  padding: 10px 14px;
  margin: 8px 0;
  font-size: 15px;
  color: #555;
}

.pingback a,
.trackback a {
  text-decoration: none !important;   /* Bỏ hoàn toàn gạch chân */
  color: #154A81;                     /* Màu xanh thương hiệu */
  font-weight: 500;
  transition: all 0.25s ease;
}

.pingback a:hover,
.trackback a:hover {
  color: #F0B529;                     /* Vàng thương hiệu khi hover */
  text-decoration: none !important;   /* Vẫn không gạch chân khi hover */
}

.pingback::before,
.trackback::before {
  content: "🔗 ";
  font-size: 14px;
  color: #154A81;
}

/* ==========================
   TINH CHỈNH TRANG CỬA HÀNG
   ========================== */

/* Giới hạn subtitle 2 dòng trên mobile */
@media (max-width: 768px) {
  .woocommerce-loop-product__subtitle {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: normal;
    max-width: 100%;
    min-height: calc(1.4em * 2);
  }
}

/* ===============================
   FIX CĂN GIỮA TUYỆT ĐỐI & ĐỒNG BỘ NÚT
   =============================== */
/* Mở rộng pagination để Full Width trong col-xl-9
Pagination full width fix */
.col-xl-9 .poolex-pagination {
  width: 100% !important;
  display: flex !important;
  justify-content: center !important;
  margin-top: 20px;
}
/* Ép UL pagination full-width để căn giữa*/
.poolex-pagination ul.pagination {
  width: 100% !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  margin: 0 auto !important;
  padding: 0 !important;
}
/* Style nút đêu nhau */

/* ============================
   RESET CƠ BẢN
============================ */
.poolex-pagination ul.pagination {
    display: flex;
    justify-content: center;
    gap: 6px;
    padding: 0;
    margin: 20px 0;
}

.poolex-pagination ul.pagination li {
    list-style: none;
}

/* ============================
   STYLE NÚT PAGE
============================ */
.poolex-pagination ul.pagination .page-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 8px;
    background: #ffffff;
    border: 1px solid #d9e2ec;
    color: #154A81;
    font-size: 14px;
    font-weight: 500;
    text-decoration: none !important;
    transition: all 0.2s ease;
}

/* Hover giống blog */
.poolex-pagination ul.pagination .page-link:hover {
    background: #154A81;
    color: #fff !important;
}

/* ============================
   ACTIVE PAGE
============================ */
.poolex-pagination ul.pagination .page-link.current {
    background: #154A81;
    color: #fff !important;
    border-color: #154A81;
}

/* ============================
   STYLE DẤU !!!
============================ */
.poolex-pagination ul.pagination .disabled .page-link {
    background: #fff;
    border: 1px solid transparent;
    color: #666;
    width: auto;
    padding: 0 6px;
}

/* ============================
   MOBILE TỐI ƯU
============================ */
@media (max-width: 480px) {
    .poolex-pagination ul.pagination .page-link {
        width: 32px;
        height: 32px;
        font-size: 13px;
        border-radius: 6px;
    }

    .poolex-pagination ul.pagination {
        gap: 4px;
    }
}

/* Fix mobile tránh tràn */

@media(max-width: 480px) {
  .poolex-pagination .page-link {
    min-width: 32px;
    height: 32px;
    line-height: 32px;
    margin: 0 2px;
    font-size: 13px;
  }
}
/* Tăng khoảng cách giữa pagination và block phía dưới */
.poolex-pagination {
  margin-bottom: 28px !important;
}

/* Mobile tinh chỉnh khoảng cách nhỏ hơn để không bị tràn */
@media (max-width: 480px) {
  .poolex-pagination {
    margin-bottom: 24px !important;
  }
}
.poolex-pagination ul.pagination {
  padding-top: 6px !important;
  padding-bottom: 6px !important;
}


/* WRAPPER */
.px-accordion-select {
    width: 100%;
    max-width: 280px;
    position: relative;
    font-family: inherit;
}

/* TRIGGER BUTTON */
.px-accordion-trigger {
    width: 100%;
    padding: 12px 16px;
    border: 1px solid #D6DDE5;
    border-radius: 8px;
    background: #fff;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: .25s ease;
}

.px-accordion-trigger:hover {
    border-color: #154A81;
    box-shadow: 0 2px 8px rgba(21,74,129,0.15);
}

/* MENU */
.px-accordion-menu {
    margin-top: 8px;
    border: 1px solid #D6DDE5;
    border-radius: 8px;
    padding: 6px 0;
    background: #fff;
    box-shadow: 0 6px 18px rgba(0,0,0,0.12);
    display: none;
}

/* DANH MỤC CHA */
.px-acc-parent {
    padding: 12px 16px;
    font-weight: 600;
    color: #154A81;
    cursor: pointer;
    border-bottom: 1px solid #F0F2F5;
    transition: .25s ease;
}

.px-acc-parent:hover {
    background: #154A8120;
}

/* DANH MỤC CON */
.px-acc-children {
    display: none;
    background: #F8FAFC;
}

.px-acc-child {
    padding: 10px 20px;
    cursor: pointer;
    transition: .2s ease;
    font-size: 15px;
}

.px-acc-child:hover {
    background: #154A8110;
    color: #154A81;
}

.px-acc-child.active {
    background: #154A8120;
    color: #154A81;
    font-weight: 600;
}

/* ACTIVE PARENT */
.px-acc-item.active > .px-acc-parent {
    background: #154A8120;
}

/* ================================
   FIX: Dropdown dạng floating overlay
   Không đẩy layout sản phẩm xuống
   ================================ */

.px-accordion-select {
    position: relative; /* tạo vùng tham chiếu cho absolute */
    z-index: 50;
}

/* Menu dạng overlay */
.px-accordion-menu {
    position: absolute;
    top: calc(100% + 8px);  /* nằm dưới nút trigger */
    left: 0;
    width: 100%;
    background: #fff;
    border: 1px solid #D6DDE5;
    border-radius: 8px;
    padding: 6px 0;
    box-shadow: 0 6px 18px rgba(0,0,0,0.15);
    display: none;
    z-index: 9999;  /* nổi trên card sản phẩm */
}

/* Giữ kích thước không thay đổi khi accordion mở */
.px-accordion-menu .px-acc-children,
.px-accordion-menu .px-acc-parent {
    width: 100%;
}

.px-acc-parent {
    padding: 12px 16px;
    font-weight: 600;
    color: #154A81;
    cursor: pointer;
    border-bottom: 1px solid #F0F2F5;
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Mũi tên mặc định */
.acc-arrow {
    transition: transform .25s ease;
}

/* Khi mở accordion → xoay mũi tên */
.px-acc-item.open .acc-arrow {
    transform: rotate(180deg);
}

/* ======================================
   MOBILE FIX (width dropdown + align)
   ====================================== */
@media (max-width: 768px) {

    /* Dropdown luôn full-width */
    #pxAccordionCategory,
    .shop-filter-right .px-accordion-select {
        width: 100% !important;
        max-width: 100% !important;
        margin-bottom: 2px !important;
    }

    /* Result count căn phải */
    .woocommerce-result-count {
        width: 100%;
        text-align: right !important;
        margin-bottom: 8px !important;
    }

    /* Flex container về dạng cột */
    .shop-page .d-flex.flex-column.flex-md-row {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 8px !important;
    }

    /* Khoảng cách 2 item nhỏ gọn */
    .shop-filter-right {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
    }
}

/* ===== DESKTOP DROPDOWN WIDTH ===== */
@media (min-width: 992px) {

    .shop-filter-right .px-accordion-select {
        width: 305px !important;
        max-width: 100% !important;
    }

    /* Nếu anh muốn nút mở rộng rộng hơn bên trong */
    .shop-filter-right .px-accordion-trigger {
        width: 100% !important;
    }

    /* Menu xổ xuống cũng rộng bằng dropdown */
    .shop-filter-right .px-accordion-menu {
        width: 100% !important;
        min-width: 100% !important;
    }
}