/* Chiều cao to như page-banner */
.tp-banner-swiper{ position:relative; overflow:hidden; padding:0; }
.tp-banner-swiper .tp-banner-slide{
  position:relative;
  height:320px;                
  background-size:cover;
  background-position:center;
}
@media (min-width:768px){ .tp-banner-swiper .tp-banner-slide{ height:400px; } }
@media (min-width:1200px){ .tp-banner-swiper .tp-banner-slide{ height:480px; } }


.tp-banner-swiper .tp-banner-slide::before{
  content:""; position:absolute; inset:0;
  background:linear-gradient(90deg, rgba(6,19,46,.65) 0%, rgba(6,19,46,.35) 100%);
  z-index:1;
}

.page-banner-product-section .tp-banner-inner{
  position:relative; z-index:2; height:100%;
  display:flex; align-items:center; justify-content:center;
  padding-top:87px; text-align:center;
}

/* Text đúng spec */
.tp-banner-title{
  margin:0;
  font-family:"Roboto", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-weight:700;
  font-size:32px;
  line-height:44px;
  text-transform:uppercase;
  color:#FFFFFF;
  letter-spacing:.02em;
}

.bannerSwiper{ position:relative; }
.bannerSwiper .swiper-pagination{
  position:absolute; left:50%; transform:translateX(-50%);
  bottom:18px; z-index:3;       
  width:auto; padding:6px 10px; 
  border-radius:999px;
}
@media (min-width:768px){ .bannerSwiper .swiper-pagination{ bottom:22px; } }
@media (min-width:1200px){ .bannerSwiper .swiper-pagination{ bottom:26px; } }

.bannerSwiper .swiper-pagination-bullet{
  background:#fff;
  opacity:.5;
  width:10px; height:10px;
  margin:0 6px !important;
}
.bannerSwiper .swiper-pagination-bullet-active{ opacity:1; }
.bannerSwiper .swiper-button-prev,
.bannerSwiper .swiper-button-next{ display:none !important; }
/*--------------------------------------------------------------*/

/* ===== Hardware Card (match thiết kế) ===== */

.tp-hw-section { padding: 24px 0; }

.tp-hw-card{
  background:#fff;
  border:1px solid #E6ECF3;
  border-radius:12px;
  padding:16px;                    
  box-shadow:0 1px 0 rgba(0,0,0,0.02);
}

.tp-hw-card .row{
  align-items:stretch;
  --bs-gutter-x:28px;
}

.tp-hw-ill,
.tp-hw-copy{
  display:flex;
  height:100%;
}
.tp-hw-ill{ align-items:center; overflow: hidden; border-radius: 8px; height: 100%; }
.tp-hw-copy{
  flex-direction:column;
  justify-content:center;
  padding:16px 6px;
}

.tp-hw-ill img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  border-radius:8px;
  border:1px solid #E6ECF3;
  transition: transform 0.3s ease-in-out;
}

.tp-hw-ill img:hover{
  transform: scale(1.05);
  cursor: pointer;
}

/* @media (min-width:992px){
  .tp-hw-ill{ min-height:300px; } 
} */

@media (min-width:768px){  .tp-hw-card{ padding:18px 20px; } }
@media (min-width:1200px){ .tp-hw-card{ padding:20px 22px; } }

.tp-hw-title{
  margin:2px 0 8px;
  font-family:"Roboto", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-weight:700;
  font-size:24px;
  line-height:32px;
  text-transform:uppercase;
  color:#2E5890;
  letter-spacing:.02em;
}
.tp-hw-desc{
  margin:0;
  font-family:"Roboto", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-weight:400;
  font-size:16px;
  line-height:22px;
  color:#333333;
  opacity:.98;
}

@media (max-width:991.98px){
  .tp-hw-ill{ min-height:auto; }
  .tp-hw-ill img{ height:auto; object-fit:contain; }
  .tp-hw-copy{ margin-top:4px; }
}

/* ===== Data Center variant: ảnh bên phải (desktop) ===== */
@media (min-width: 992px){

  .tp-hw-card.is-reverse .row > [class*="col-"]:first-child { order: 2; } 
  .tp-hw-card.is-reverse .row > [class*="col-"]:last-child  { order: 1; } 
}

.tp-hw-card.is-reverse .tp-hw-ill img{
  object-fit: cover;
  object-position: center;
}

@media (max-width: 991.98px){
  .tp-hw-card.is-reverse .row > [class*="col-"]:first-child { order: 1; }
  .tp-hw-card.is-reverse .row > [class*="col-"]:last-child  { order: 2; }
}
/*--------------------------------------------------------------*/

.tp-dc-section { padding:24px 0; }

.tp-dc-card{
  background:#fff;
  border:1px solid #E6ECF3;
  border-radius:12px;
  padding:16px;
  box-shadow:0 1px 0 rgba(0,0,0,0.02);
}

.tp-dc-card .row{
  align-items:stretch;
  --bs-gutter-x:28px;
}

.tp-dc-ill,
.tp-dc-copy{ display:flex; height:100%; }
.tp-dc-copy{
  flex-direction:column;
  justify-content:center;
  padding:16px 6px;
}

.tp-dc-ill{
  overflow: hidden; border-radius: 8px;
}

@media (min-width:992px){
  .tp-dc-card .row > [class*="col-"]:first-child{ order:2; } 
  .tp-dc-card .row > [class*="col-"]:last-child{  order:1; } 
  /* .tp-dc-ill{ min-height:300px; }  */
}

.tp-dc-ill img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  border-radius: 8px;
  border:1px solid #E6ECF3;
  transition: transform 0.3s ease-in-out;
}

.tp-dc-ill img:hover{
  transform: scale(1.05);
  cursor: pointer;
}

/* Typography theo spec */
.tp-dc-title{
  margin:2px 0 8px;
  font-family:"Roboto", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-weight:700;
  font-size:24px;
  line-height:32px;
  text-transform:uppercase;
  color:#2E5890;
  letter-spacing:.02em;
}
.tp-dc-desc{
  margin:0;
  font-family:"Roboto", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-weight:400;
  font-size:16px;
  line-height:22px;
  color:#333333;
  opacity:.98;
}

@media (max-width:991.98px){
  .tp-dc-ill{ min-height:auto; }
  .tp-dc-ill img{ height:auto; object-fit:contain; }
}
.tp-hw-desc,
.tp-dc-desc{
  text-align: justify;            
  text-justify: inter-word;       
  -webkit-hyphens: auto;          
  -ms-hyphens: auto;
  hyphens: auto;
  text-align-last: left;          
  word-break: break-word;         
}

/* ===== Mạng Viễn Thông (block riêng) ===== */
.tp-net-section{ padding:24px 0; }

.tp-net-card{
  background:#fff;
  border:1px solid #E6ECF3;
  border-radius:12px;
  padding:16px;
  box-shadow:0 1px 0 rgba(0,0,0,0.02);
}


.tp-net-card .rw{
  align-items:stretch;
  --bs-gutter-x:28px;
}


.tp-net-ill,
.tp-net-copy{ display:flex; height:100%; }
.tp-net-ill{ align-items:center; }
.tp-net-copy{
  flex-direction:column;
  justify-content:center;
  padding:16px 6px;
}

.tp-net-ill{
  overflow: hidden; border-radius: 10px; height: 100%;
}


.tp-net-ill img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  border-radius:10px;
  border:1px solid #E6ECF3;
  transition: transform 0.3s ease-in-out;
}

.tp-net-ill img:hover{
  transform: scale(1.05);
  cursor: pointer;
}

/* @media (min-width:992px){
  .tp-net-ill{ min-height:300px; } 
} */

/* Typography theo spec */
.tp-net-title{
  margin:2px 0 8px;
  font-family:"Roboto", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-weight:700;
  font-size:24px;
  line-height:32px;
  text-transform:uppercase;
  color:#2E5890;
  letter-spacing:.02em;
}
.tp-net-desc{
  margin:0;
  font-family:"Roboto", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-weight:400;
  font-size:16px;
  line-height:22px;
  color:#333333;
  opacity:.98;
  text-align:justify;         
  text-justify:inter-word;
  hyphens:auto;
  text-align-last:left;
  word-break:break-word;
}

@media (max-width:991.98px){
  .tp-net-ill{ min-height:auto; }
  .tp-net-ill img{ height:auto; object-fit:contain; }
  .tp-net-copy{ margin-top:4px; }
}
/*--------------------------------------------------------------*/
/* ===== Hệ thống hiển thị tích hợp (block riêng) ===== */
.tp-av-section{ padding:24px 0; }

.tp-av-card{
  background:#fff;
  border:1px solid #E6ECF3;
  border-radius:12px;
  padding:16px;
  box-shadow:0 1px 0 rgba(0,0,0,0.02);
}

.tp-av-card .row{
  align-items:stretch;
  --bs-gutter-x:28px;
}

.tp-av-ill,
.tp-av-copy{ display:flex; height:100%; }
.tp-av-copy{
  flex-direction:column;
  justify-content:center;
  padding:16px 6px;
}

.tp-av-ill{
  overflow: hidden; border-radius: 10px;
}


@media (min-width:992px){
  .tp-av-card .row > [class*="col-"]:first-child{ order:2; } 
  .tp-av-card .row > [class*="col-"]:last-child{  order:1; } 
  /* .tp-av-ill{ min-height:300px; }  */
}


.tp-av-ill img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  border-radius:10px;
  border:1px solid #E6ECF3;
  transition: transform 0.3s ease-in-out;
}

.tp-av-ill img:hover{
  transform: scale(1.05);
  cursor: pointer;
}

.tp-av-title{
  margin:2px 0 8px;
  font-family:"Roboto", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-weight:700;
  font-size:24px;
  line-height:32px;
  text-transform:uppercase;
  color:#2E5890;
  letter-spacing:.02em;
}
.tp-av-desc{
  margin:0;
  font-family:"Roboto", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-weight:400;
  font-size:16px;
  line-height:22px;
  color:#333333;
  opacity:.98;
  text-align:justify; text-justify:inter-word; hyphens:auto; text-align-last:left; word-break:break-word;
}


@media (max-width:991.98px){
  .tp-av-ill{ min-height:auto; }
  .tp-av-ill img{ height:auto; object-fit:contain; }
  .tp-av-copy{ margin-top:4px; }
}




@media (min-width: 320px) and (max-width: 575.98px){
  .page-banner-product-section .tp-banner-inner { 
    padding-top: 92px;
    margin: 0 10px;
  }

  .tp-banner-title{
    font-size: 16px;
    line-height: 22px;
  }
  .tp-hw-copy, .tp-dc-copy, .tp-net-copy, .tp-av-copy{
    padding-top: 0;
  }
  .tp-hw-title, .tp-dc-title, .tp-net-title, .tp-av-title{
    font-size: 16px;
    line-height: 20px;
  }
  .tp-hw-desc, .tp-dc-desc, .tp-net-desc, .tp-av-desc{
    font-size: 12px;
    line-height: 18px;
  }

  .tp-dc-section, .tp-net-section, .tp-av-section{
    padding: 12px 0;
  }

  .tp-hw-section{
    padding-bottom: 12px;
  }

  .tp-av-section, .network-card, .dv-network-card {
    padding-bottom: 24px;
  }

}

/* ===== HW: Lazy reveal (không ảnh hưởng style cũ) ===== */
.reveal-hw{
  opacity: 0;
  transform: translateY(26px);
  transition:
    opacity 1.05s ease,
    transform 1.05s cubic-bezier(.22,.61,.36,1);
  will-change: opacity, transform;
}
.reveal-hw.is-visible{
  opacity: 1;
  transform: none;
}

/* Stagger nhẹ cho title & desc khi container .tp-hw-copy hiện */
.tp-hw-copy.reveal-hw .tp-hw-title,
.tp-hw-copy.reveal-hw .tp-hw-desc{
  opacity: 0;
  transform: translateY(12px);
  transition: opacity .9s ease, transform .9s cubic-bezier(.22,.61,.36,1);
  will-change: opacity, transform;
}
.tp-hw-copy.reveal-hw.is-visible .tp-hw-title{
  opacity: 1; transform: none; transition-delay: 160ms;
}
.tp-hw-copy.reveal-hw.is-visible .tp-hw-desc{
  opacity: 1; transform: none; transition-delay: 300ms;
}

/* Tôn trọng người dùng giảm chuyển động */
@media (prefers-reduced-motion: reduce){
  .reveal-hw,
  .tp-hw-copy.reveal-hw .tp-hw-title,
  .tp-hw-copy.reveal-hw .tp-hw-desc{
    transition: none !important;
    transform: none !important;
    opacity: 1 !important;
  }
}


/* ===== DC: Lazy reveal (không đè style cũ) ===== */
.reveal-dc{
  opacity: 0;
  transform: translateY(26px);
  transition:
    opacity 1.05s ease,
    transform 1.05s cubic-bezier(.22,.61,.36,1);
  will-change: opacity, transform;
}
.reveal-dc.is-visible{
  opacity: 1;
  transform: none;
}

/* Ảnh zoom-in rất nhẹ khi hiện (tùy chọn, không ảnh hưởng hover) */
.tp-dc-ill.reveal-dc img{
  transform: scale(1.03);
  transition: transform 1.05s cubic-bezier(.22,.61,.36,1);
  will-change: transform;
}
.tp-dc-ill.reveal-dc.is-visible img{
  transform: scale(1);
}

/* Stagger cho text trong .tp-dc-copy: title -> desc */
.tp-dc-copy.reveal-dc .tp-dc-title,
.tp-dc-copy.reveal-dc .tp-dc-desc{
  opacity: 0;
  transform: translateY(12px);
  transition: opacity .9s ease, transform .9s cubic-bezier(.22,.61,.36,1);
  will-change: opacity, transform;
}
.tp-dc-copy.reveal-dc.is-visible .tp-dc-title{
  opacity: 1; transform: none; transition-delay: 160ms;
}
.tp-dc-copy.reveal-dc.is-visible .tp-dc-desc{
  opacity: 1; transform: none; transition-delay: 300ms;
}

/* Respect prefers-reduced-motion */
@media (prefers-reduced-motion: reduce){
  .reveal-dc,
  .tp-dc-ill.reveal-dc img,
  .tp-dc-copy.reveal-dc .tp-dc-title,
  .tp-dc-copy.reveal-dc .tp-dc-desc{
    transition: none !important;
    transform: none !important;
    opacity: 1 !important;
  }
}


/* ===== NET: Lazy reveal (không ghi đè style cũ) ===== */
.reveal-net{
  opacity: 0;
  transform: translateY(26px);
  transition:
    opacity 1.05s ease,
    transform 1.05s cubic-bezier(.22,.61,.36,1);
  will-change: opacity, transform;
}
.reveal-net.is-visible{
  opacity: 1;
  transform: none;
}

/* Ảnh zoom-in rất nhẹ khi hiện */
.tp-net-ill.reveal-net img{
  transform: scale(1.03);
  transition: transform 1.05s cubic-bezier(.22,.61,.36,1);
  will-change: transform;
}
.tp-net-ill.reveal-net.is-visible img{
  transform: scale(1);
}

/* Stagger cho text: title -> desc */
.tp-net-copy.reveal-net .tp-net-title,
.tp-net-copy.reveal-net .tp-net-desc{
  opacity: 0;
  transform: translateY(12px);
  transition: opacity .9s ease, transform .9s cubic-bezier(.22,.61,.36,1);
  will-change: opacity, transform;
}
.tp-net-copy.reveal-net.is-visible .tp-net-title{
  opacity: 1; transform: none; transition-delay: 150ms;
}
.tp-net-copy.reveal-net.is-visible .tp-net-desc{
  opacity: 1; transform: none; transition-delay: 290ms;
}

/* Respect prefers-reduced-motion */
@media (prefers-reduced-motion: reduce){
  .reveal-net,
  .tp-net-ill.reveal-net img,
  .tp-net-copy.reveal-net .tp-net-title,
  .tp-net-copy.reveal-net .tp-net-desc{
    transition: none !important;
    transform: none !important;
    opacity: 1 !important;
  }
}


/* ===== AV: Lazy reveal ===== */
.reveal-av{
  opacity: 0;
  transform: translateY(26px);
  transition:
    opacity 1.08s ease,
    transform 1.08s cubic-bezier(.22,.61,.36,1);
  will-change: opacity, transform;
}
.reveal-av.is-visible{
  opacity: 1;
  transform: none;
}

/* Ảnh zoom-in rất nhẹ khi xuất hiện */
.tp-av-ill.reveal-av img{
  transform: scale(1.03);
  transition: transform 1.08s cubic-bezier(.22,.61,.36,1);
  will-change: transform;
}
.tp-av-ill.reveal-av.is-visible img{
  transform: scale(1);
}

/* Stagger text: title -> desc */
.tp-av-copy.reveal-av .tp-av-title,
.tp-av-copy.reveal-av .tp-av-desc{
  opacity: 0;
  transform: translateY(12px);
  transition: opacity .92s ease, transform .92s cubic-bezier(.22,.61,.36,1);
  will-change: opacity, transform;
}
.tp-av-copy.reveal-av.is-visible .tp-av-title{
  opacity: 1; transform: none; transition-delay: 150ms;
}
.tp-av-copy.reveal-av.is-visible .tp-av-desc{
  opacity: 1; transform: none; transition-delay: 290ms;
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  .reveal-av,
  .tp-av-ill.reveal-av img,
  .tp-av-copy.reveal-av .tp-av-title,
  .tp-av-copy.reveal-av .tp-av-desc{
    transition: none !important;
    transform: none !important;
    opacity: 1 !important;
  }
}


/* ===== Security Card 1: Lazy reveal ===== */
.reveal-sec{
  opacity: 0;
  transform: translateY(26px);
  transition:
    opacity 1.08s ease,
    transform 1.08s cubic-bezier(.22,.61,.36,1);
  will-change: opacity, transform;
}
.reveal-sec.is-visible{
  opacity: 1;
  transform: none;
}

/* Ảnh zoom-in nhẹ khi hiện */
.tp-hw-ill.reveal-sec img{
  transform: scale(1.03);
  transition: transform 1.08s cubic-bezier(.22,.61,.36,1);
  will-change: transform;
}
.tp-hw-ill.reveal-sec.is-visible img{
  transform: scale(1);
}

/* Stagger text: title -> desc */
.tp-hw-copy.reveal-sec .tp-hw-title,
.tp-hw-copy.reveal-sec .tp-hw-desc{
  opacity: 0;
  transform: translateY(12px);
  transition: opacity .92s ease, transform .92s cubic-bezier(.22,.61,.36,1);
  will-change: opacity, transform;
}
.tp-hw-copy.reveal-sec.is-visible .tp-hw-title{
  opacity: 1; transform: none; transition-delay: 150ms;
}
.tp-hw-copy.reveal-sec.is-visible .tp-hw-desc{
  opacity: 1; transform: none; transition-delay: 290ms;
}

/* Tôn trọng reduced motion */
@media (prefers-reduced-motion: reduce){
  .reveal-sec,
  .tp-hw-ill.reveal-sec img,
  .tp-hw-copy.reveal-sec .tp-hw-title,
  .tp-hw-copy.reveal-sec .tp-hw-desc{
    transition: none !important;
    transform: none !important;
    opacity: 1 !important;
  }
}


/* ===== Card 2 (tp-dc-section): Lazy reveal ===== */
.reveal-dc{
  opacity: 0;
  transform: translateY(26px);
  transition:
    opacity 1.08s ease,
    transform 1.08s cubic-bezier(.22,.61,.36,1);
  will-change: opacity, transform;
}
.reveal-dc.is-visible{
  opacity: 1;
  transform: none;
}

/* Ảnh zoom-in nhẹ khi hiện */
.tp-dc-ill.reveal-dc img{
  transform: scale(1.03);
  transition: transform 1.08s cubic-bezier(.22,.61,.36,1);
  will-change: transform;
}
.tp-dc-ill.reveal-dc.is-visible img{
  transform: scale(1);
}

/* Stagger text: title -> desc */
.tp-dc-copy.reveal-dc .tp-dc-title,
.tp-dc-copy.reveal-dc .tp-dc-desc{
  opacity: 0;
  transform: translateY(12px);
  transition: opacity .92s ease, transform .92s cubic-bezier(.22,.61,.36,1);
  will-change: opacity, transform;
}
.tp-dc-copy.reveal-dc.is-visible .tp-dc-title{
  opacity: 1; transform: none; transition-delay: 150ms;
}
.tp-dc-copy.reveal-dc.is-visible .tp-dc-desc{
  opacity: 1; transform: none; transition-delay: 290ms;
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  .reveal-dc,
  .tp-dc-ill.reveal-dc img,
  .tp-dc-copy.reveal-dc .tp-dc-title,
  .tp-dc-copy.reveal-dc .tp-dc-desc{
    transition: none !important;
    transform: none !important;
    opacity: 1 !important;
  }
}


/* ===== Card 3 (network-card): Lazy reveal ===== */
.reveal-sec3{
  opacity: 0;
  transform: translateY(26px);
  transition:
    opacity 1.05s ease,
    transform 1.05s cubic-bezier(.22,.61,.36,1);
  will-change: opacity, transform;
}
.reveal-sec3.is-visible{
  opacity: 1;
  transform: none;
}

/* Ảnh zoom-in rất nhẹ khi hiện (không ảnh hưởng hover sẵn có) */
.tp-net-ill.reveal-sec3 img{
  transform: scale(1.03);
  transition: transform 1.05s cubic-bezier(.22,.61,.36,1);
  will-change: transform;
}
.tp-net-ill.reveal-sec3.is-visible img{
  transform: scale(1);
}

/* Stagger cho text trong .tp-net-copy: title -> desc */
.tp-net-copy.reveal-sec3 .tp-net-title,
.tp-net-copy.reveal-sec3 .tp-net-desc{
  opacity: 0;
  transform: translateY(12px);
  transition: opacity .9s ease, transform .9s cubic-bezier(.22,.61,.36,1);
  will-change: opacity, transform;
}
.tp-net-copy.reveal-sec3.is-visible .tp-net-title{
  opacity: 1; transform: none; transition-delay: 150ms;
}
.tp-net-copy.reveal-sec3.is-visible .tp-net-desc{
  opacity: 1; transform: none; transition-delay: 290ms;
}

/* Giữ hiệu ứng scale khi hover sau khi đã reveal */
.tp-net-ill.reveal-sec3.is-visible img:hover{
  transform: scale(1.05) !important;
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  .reveal-sec3,
  .tp-net-ill.reveal-sec3 img,
  .tp-net-copy.reveal-sec3 .tp-net-title,
  .tp-net-copy.reveal-sec3 .tp-net-desc{
    transition: none !important;
    transform: none !important;
    opacity: 1 !important;
  }
}


/*========================Scale=========================*/
/* Giữ hiệu ứng scale khi hover sau khi đã reveal */
.tp-hw-ill.reveal-hw.is-visible img:hover,
.tp-hw-ill.reveal-sec.is-visible img:hover,
.tp-dc-ill.reveal-dc.is-visible img:hover,
.tp-net-ill.reveal-net.is-visible img:hover,
.tp-av-ill.reveal-av.is-visible img:hover{
  transform: scale(1.05) !important; 
}


/* ===== System Integration (Card 1): Lazy reveal ===== */
.reveal-si{
  opacity: 0;
  transform: translateY(26px);
  transition:
    opacity 1.05s ease,
    transform 1.05s cubic-bezier(.22,.61,.36,1);
  will-change: opacity, transform;
}
.reveal-si.is-visible{
  opacity: 1;
  transform: none;
}

/* Ảnh zoom-in rất nhẹ khi hiện (không làm mất hover scale có sẵn) */
.tp-hw-ill.reveal-si img{
  transform: scale(1.03);
  transition: transform 1.05s cubic-bezier(.22,.61,.36,1);
  will-change: transform;
}
.tp-hw-ill.reveal-si.is-visible img{
  transform: scale(1);
}

/* Giữ (và ưu tiên) hiệu ứng scale khi hover sau khi reveal */
.tp-hw-ill.reveal-si.is-visible img:hover{
  transform: scale(1.05) !important;
}

/* Stagger cho text: title -> desc khi container hiện */
.tp-hw-copy.reveal-si .tp-hw-title,
.tp-hw-copy.reveal-si .tp-hw-desc{
  opacity: 0;
  transform: translateY(12px);
  transition: opacity .9s ease, transform .9s cubic-bezier(.22,.61,.36,1);
  will-change: opacity, transform;
}
.tp-hw-copy.reveal-si.is-visible .tp-hw-title{
  opacity: 1; transform: none; transition-delay: 150ms;
}
.tp-hw-copy.reveal-si.is-visible .tp-hw-desc{
  opacity: 1; transform: none; transition-delay: 290ms;
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  .reveal-si,
  .tp-hw-ill.reveal-si img,
  .tp-hw-copy.reveal-si .tp-hw-title,
  .tp-hw-copy.reveal-si .tp-hw-desc{
    transition: none !important;
    transform: none !important;
    opacity: 1 !important;
  }
}


/* ===== Card 2 (Consult): Lazy reveal ===== */
.reveal-consult{
  opacity: 0;
  transform: translateY(26px);
  transition:
    opacity 1.05s ease,
    transform 1.05s cubic-bezier(.22,.61,.36,1);
  will-change: opacity, transform;
}
.reveal-consult.is-visible{
  opacity: 1;
  transform: none;
}

/* Ảnh zoom-in rất nhẹ khi hiện (không làm mất hover) */
.tp-dc-ill.reveal-consult img{
  transform: scale(1.03);
  transition: transform 1.05s cubic-bezier(.22,.61,.36,1);
  will-change: transform;
}
.tp-dc-ill.reveal-consult.is-visible img{
  transform: scale(1);
}

/* Giữ (ưu tiên) hiệu ứng hover scale sau khi reveal */
.tp-dc-ill.reveal-consult.is-visible img:hover{
  transform: scale(1.05) !important;
}

/* Stagger text: title -> desc khi container hiện */
.tp-dc-copy.reveal-consult .tp-dc-title,
.tp-dc-copy.reveal-consult .tp-dc-desc{
  opacity: 0;
  transform: translateY(12px);
  transition: opacity .9s ease, transform .9s cubic-bezier(.22,.61,.36,1);
  will-change: opacity, transform;
}
.tp-dc-copy.reveal-consult.is-visible .tp-dc-title{
  opacity: 1; transform: none; transition-delay: 150ms;
}
.tp-dc-copy.reveal-consult.is-visible .tp-dc-desc{
  opacity: 1; transform: none; transition-delay: 290ms;
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  .reveal-consult,
  .tp-dc-ill.reveal-consult img,
  .tp-dc-copy.reveal-consult .tp-dc-title,
  .tp-dc-copy.reveal-consult .tp-dc-desc{
    transition: none !important;
    transform: none !important;
    opacity: 1 !important;
  }
}


/* ===== Card 3 (Digital): Lazy reveal ===== */
.reveal-digi{
  opacity: 0;
  transform: translateY(26px);
  transition:
    opacity 1.05s ease,
    transform 1.05s cubic-bezier(.22,.61,.36,1);
  will-change: opacity, transform;
}
.reveal-digi.is-visible{
  opacity: 1;
  transform: none;
}

/* Ảnh zoom-in rất nhẹ khi xuất hiện (không mất hover) */
.tp-net-ill.reveal-digi img{
  transform: scale(1.03);
  transition: transform 1.05s cubic-bezier(.22,.61,.36,1);
  will-change: transform;
}
.tp-net-ill.reveal-digi.is-visible img{
  transform: scale(1);
}

/* Giữ/ưu tiên hover scale sau khi reveal */
.tp-net-ill.reveal-digi.is-visible img:hover{
  transform: scale(1.05) !important;
}

/* Stagger text: title -> desc khi container hiện */
.tp-net-copy.reveal-digi .tp-net-title,
.tp-net-copy.reveal-digi .tp-net-desc{
  opacity: 0;
  transform: translateY(12px);
  transition: opacity .9s ease, transform .9s cubic-bezier(.22,.61,.36,1);
  will-change: opacity, transform;
}
.tp-net-copy.reveal-digi.is-visible .tp-net-title{
  opacity: 1; transform: none; transition-delay: 150ms;
}
.tp-net-copy.reveal-digi.is-visible .tp-net-desc{
  opacity: 1; transform: none; transition-delay: 290ms;
}

/* Tôn trọng reduced motion */
@media (prefers-reduced-motion: reduce){
  .reveal-digi,
  .tp-net-ill.reveal-digi img,
  .tp-net-copy.reveal-digi .tp-net-title,
  .tp-net-copy.reveal-digi .tp-net-desc{
    transition: none !important;
    transform: none !important;
    opacity: 1 !important;
  }
}