.mod-homeblocks{position:relative}
.mod-homeblocks .hb-block{margin-bottom:24px
		position:relative; /* Rất quan trọng: nav sẽ bám theo từng block */
}
.mod-homeblocks .hb-header{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:12px}
.mod-homeblocks .hb-title{font-size:1.25rem;font-weight:700}
.bannerhome {

    color: transparent;
font-size:0.25rem;font-weight:700
}
.mod-homeblocks .hb-actions{display:flex;gap:8px}
.hb-list{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
@media (max-width:1280px){.hb-list{grid-template-columns:repeat(2,1fr)}}
@media (max-width:640px){.hb-list{grid-template-columns:1fr}}
.hb-card{border:1px solid #eee;border-radius:12px;overflow:hidden;
		transition:transform .25s,box-shadow .25s;background:#fff}
.hb-card:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(0,0,0,.08)}
.hb-thumb{position:relative;padding-top:56%;overflow:hidden;background:#f6f7f8}
.hb-thumb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.hb-content{padding:12px 14px}.hb-meta{font-size:.8125rem;opacity:.7;margin-bottom:6px}
.hb-heading{font-weight:600;line-height:1.35;margin:0 0 6px;
		font-size:1rem}.hb-text{font-size:.95rem;color:#333}

.hb-skeleton{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}

.hb-skeleton .sk-card{border-radius:12px;overflow:hidden;border:1px solid #eee}
.hb-skeleton .sk-thumb{height:0;padding-top:56%;
		background:linear-gradient(90deg,#eee,#f5f5f5,#eee);
		background-size:200% 100%;animation:pulse 1.2s infinite linear}
.hb-skeleton .sk-lines{padding:12px 14px}
.hb-skeleton .sk-line{height:12px;margin:8px 0;
		border-radius:8px;
		background:linear-gradient(90deg,#eee,#f5f5f5,#eee);
		background-size:200% 100%;animation:pulse 1.2s infinite linear}
@keyframes pulse{0%{background-position:0 0}100%{background-position:-200% 0}}
.hb-btn{border:1px solid #ddd;background:#fff;border-radius:999px;
		padding:8px 14px;font-size:.9rem;cursor:pointer;
		transition:background .2s,border-color .2s}
.hb-btn:hover{background:#fafafa;border-color:#ccc}.is-hidden{display:none!important}
/* beta5j fade */
.hb-fade{transition:opacity .25s ease}

/* beta5j badge */
.hb-debug-rotate{pointer-events:none}
/* === FIX: Hiển thị ảnh thực tế trong Category Mode (mod_homeblocks_v4) === */
.hb-card .hb-thumb {
  position: relative !important;
  padding-top: 0 !important;
  overflow: visible !important;
  background: none !important;
  display: block;
}

.hb-card .hb-thumb img {
  position: static !important;
  width: 100% !important;
  height: auto !important;
  max-height: 320px;
  object-fit: contain;
  border-radius: 10px;
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
  background: transparent;
}
/*Hiển thị nút trượt*/





/* === SLIDER MODE === */

.hb-block {
    position:relative !important;
}

/*.hb-slider-track {
  display: flex;
  transition: transform 0.75s ease;
  will-change: transform;
}
*/
.hb-block{
  --hb-anim-duration: 450ms;
  --hb-anim-ease: ease;
}

/* Slide effect */
.hb-slider-track{
  display:flex;
  transition-property: transform;
  transition-duration: var(--hb-anim-duration, 450ms);
  transition-timing-function: var(--hb-anim-ease, ease);
  will-change: transform;
}





.hb-slider-wrapper {
    display:block !important;   /* Ghi đè grid */
    overflow:hidden;
    position:relative;
}



/* =========================
   EFFECTS: FADE / FADE-ZOOM
   ========================= */
.hb-block.hb-effect-fade .hb-slider-wrapper,
.hb-block.hb-effect-fade-zoom .hb-slider-wrapper{
  /*position: relative;
  min-height: 600px;  tạm để test, JS sẽ set height chuẩn */
 position: relative;
  height: var(--hb-fade-h, auto);
  min-height: 1px; /* tránh collapse */

}
/* Khi fade: không trượt track nữa */
.hb-block.hb-effect-fade .hb-slider-track,
.hb-block.hb-effect-fade-zoom .hb-slider-track{
  transition: none !important;
  transform: none !important;
  position: relative; /* để slide absolute bám theo */
 
}


/* Stack slide lên nhau */
.hb-block.hb-effect-fade .hb-slide-item,
.hb-block.hb-effect-fade-zoom .hb-slide-item{
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  /* KHÔNG set bottom để height theo content */
  width: 100% !important;
  max-width: 100% !important;
  padding-right: 0 !important;
  opacity: 0;
  pointer-events: none;
  transition-property: opacity, transform;
  transition-duration: var(--hb-anim-duration, 450ms);
  transition-timing-function: var(--hb-anim-ease, ease);
  will-change: opacity, transform;
}

.hb-block.hb-effect-fade .hb-slide-item.is-active{
  opacity: 1;
  pointer-events: auto;
}

.hb-block.hb-effect-fade-zoom .hb-slide-item{
  transform: scale(1.04);
}

.hb-block.hb-effect-fade-zoom .hb-slide-item.is-active{
  opacity: 1;
  transform: scale(1);
  pointer-events: auto;
}


.hb-slide-item{
  /* padding-right nếu muốn khoảng cách giữa các card */
  padding-right:16px;
  box-sizing:border-box;
}

.hb-nav {
    position: absolute;
    left: 0;          /* << PHẢI CÓ */
    width: 100%;      /* << PHẢI CÓ */
    top: 83%;              /* 5/6 = 0.833 tương đương 83% chiều cao */
    transform: translateY(-50%);
    z-index: 15;

}


.hb-prev {
    position:absolute;
    left:10px;
}

.hb-next {
    position:absolute;
    right:10px;
}

.hb-next, .hb-prev {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #fff;
    border: 1px solid #ccc;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    box-shadow: 0 2px 4px rgba(0,0,0,.15);
     
}

/* Ẩn khi JS gắn class is-hidden */
.hb-nav.is-hidden {
    display: none !important;
}
.hb-prev:hover,
.hb-next:hover {
  background:#f2f2f2;
}


/* Con trỏ mặc định */
.mod-homeblocks .hb-card {
    cursor: default;
}


/* Nếu admin chọn pointer → bình thường */
.mod-homeblocks .hb-block[data-cursor="pointer"] .hb-card a {
    pointer-events: auto !important;
    cursor: pointer !important;
}

/* Nếu admin chọn default → KHÔNG CHO CLICK */
.mod-homeblocks .hb-block[data-cursor="default"] .hb-card a {
    cursor: default !important;
    pointer-events: none !important;
}
/* =========================================================
   HB Description (Block + Category) - configurable in CSS
   Position: left 2/3 under title
   ========================================================= */
.mod-homeblocks .hb-header{
  gap: 12px;
}
.mod-homeblocks .hb-header-left{
  flex: 1 1 auto;
  min-width: 0;
  max-width: 66.666%;
}
.mod-homeblocks .hb-actions{
  flex: 0 0 auto;
}


/* 1) Mặc định: desc ẩn, nhưng KHÔNG dùng animation 1 lần nữa */

/* Khung */
.mod-homeblocks .hb-desc{
  position: absolute;
  top: 65%;
  left: 6%;
  width: 88%;
  height: 42px;

  overflow: hidden;
  background: rgba(0, 102, 204, 0.14);
  border-radius: 10px;
  padding: 0 14px;

  z-index: 99999;
  pointer-events: none;

  display: flex;
  align-items: center;
}

/* Track chạy: chứa 2 bản sao */
.mod-homeblocks .hb-desc-track{
  display: inline-flex;
  align-items: center;
  white-space: nowrap;

  will-change: transform;
  animation: hbMarqueeContinuous 12s linear infinite;
}

/* Mỗi bản sao */
.mod-homeblocks .hb-desc-marquee{
  display: inline-block;
  white-space: nowrap;

  color: #ffffff;
  font-size: 28px;
  font-weight: 600;

  padding-right: 80px; /* khoảng cách giữa cuối và đầu */
}

/* Dịch track đúng 1/2 chiều dài (vì có 2 bản sao giống nhau) */
@keyframes hbMarqueeContinuous{
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}


/* nếu hệ điều hành bật reduce motion, vẫn cho chạy */
@media (prefers-reduced-motion: reduce){
  .mod-homeblocks .hb-desc-marquee{
    animation-duration: 16s !important;
  }
}



/* 2) Khi slide ACTIVE: desc hiện (hỗ trợ Slick / Swiper / Splide) */
.mod-homeblocks .slick-active .hb-desc,
.mod-homeblocks .swiper-slide-active .hb-desc,
.mod-homeblocks .is-active .hb-desc{
  opacity: 1;
  visibility: visible;
  transform: translateY(-50%) translateZ(0);
  transition-delay: 0s;
}

/* 3) Nếu block không phải slider (không có class active), cho desc hiện luôn */
.mod-homeblocks:not(:has(.slick-track, .swiper-wrapper, .splide__track)) .hb-desc{
  opacity: 1;
  visibility: visible;
}

/* 4) Tránh bị cắt */
.mod-homeblocks .hb-block,
.mod-homeblocks .block-item,
.mod-homeblocks .homeblock{
  position: relative;
  overflow: visible;
}

@keyframes hbDescIn{
  to{opacity:1; transform: translateY(0);}
}

@media (max-width: 640px){
  .mod-homeblocks .hb-header{
    flex-wrap: wrap;
  }
  .mod-homeblocks .hb-header-left{
    max-width: 100%;
    flex-basis: 100%;
  }
}