/* ========== Header gọn + chọn ngôn ngữ ========== */
.header-logo a img{width:55px!important;height:55px!important;object-fit:contain;display:block;}
.header-meta{display:flex;align-items:center;}
.header-lang{margin-left:25px;position:relative;}
.lang-btn{background:transparent;border:0;padding:6px 10px;font:700 16px/1.2 inherit;letter-spacing:.04em;text-transform:uppercase;color:#111;display:flex;align-items:center;gap:8px;}
.lang-btn:focus{box-shadow:none;}
.lang-btn .fas{font-size:12px;line-height:1;}
.dropdown-lang-menu{min-width:110px;border-radius:8px;padding:6px 0;box-shadow:0 8px 24px rgba(0,0,0,.12);}
.dropdown-lang-menu .dropdown-item{font-weight:600;text-transform:uppercase;padding:8px 14px;font-size:15px;}
.dropdown-lang-menu .dropdown-item:active,
.dropdown-lang-menu .dropdown-item.active,
.dropdown-lang-menu .dropdown-item:hover{background:#f3f5f8;color:#111;}
.header-search{display:none!important;}

/* ========== Hero (VN) ========== */
.hero-content.hero-vn .sub-title{color:#fff;text-transform:uppercase;font-weight:800;font-size:26px;line-height:1.3;letter-spacing:.02em;margin:0 0 12px;}
.hero-content.hero-vn .title{color:#fff;font-weight:800;font-size:48px;line-height:1.1;margin:0 0 14px;}
.hero-content.hero-vn p{color:#eaf2ff;font-size:16px;line-height:1.7;max-width:660px;margin:0 0 22px;}
@media (min-width:992px){
  .hero-content.hero-vn .sub-title{font-size:32px;}
  .hero-content.hero-vn .title{font-size:64px;}
}
.btn-hero{display:inline-flex;align-items:center;justify-content:center;height:48px;padding:0 24px;font-weight:700;border-radius:999px;
background-image: linear-gradient(135deg, #0A6DDA 0%, #38ABF8 100%);
  border-color:#2f86ff;color:#fff;}
.btn-hero:hover{background:#186ee8;border-color:#186ee8;color:#fff;}
.btn-hero:focus{box-shadow:none;}
.btn-hero::before{display:none;}

/* ========== Vision cards (3 ô) ========== */
.vision-row{align-items:stretch;}
.vision-row>[class*="col-"]{display:flex;}
.vision-card{width:100%;}
:root{--vision-h:190px;}
.techwix-service-section-03 .service-item-03.vision-card{
  position:relative;display:flex;align-items:flex-start;gap:12px;padding:18px;border-radius:14px;overflow:hidden;min-height:var(--vision-h);
  color:#fff;box-shadow:0 8px 22px rgba(4,22,55,.25);background:var(--vision-bg) center/cover no-repeat!important;
}
.techwix-service-section-03 .service-item-03.vision-card::after{content:"";position:absolute;inset:0;background:rgba(6,19,46,.18);}
.techwix-service-section-03 .service-item-03.vision-card::before{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 1px rgba(255,255,255,.16);pointer-events:none;}
.vision-card .home-img{position:relative;z-index:1;flex:0 0 40px;width:40px;height:40px;border-radius:999px;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.25);display:flex;align-items:center;justify-content:center;margin-top:20px;}
.vision-card .home-img img{width:20px;height:20px;object-fit:contain;display:block;}
.techwix-service-section-03 .service-item-03 .service-content .title{font-size:24px;line-height:30px;margin-top:20px;}
.techwix-service-section-03 .service-item-03 .service-content p{font-size:16px;line-height:30px;padding-top:10px;}
.vision-card .service-content{position:relative;z-index:1;margin-top:2px;}
.vision-card .title{margin:0 0 8px;font-size:20px;font-weight:800;line-height:1.25;}
.vision-card .title,
.vision-card .title a{
  color:#fff;
  text-decoration:none;
}
/* (tuỳ chọn) giữ màu khi hover */
.vision-card .title:hover{ color:#fff; }
.vision-card p{margin:0;font-size:14px;line-height:1.6;color:rgba(255,255,255,.95);}
.vision-bg-1{--vision-bg:url("../images/anhquangcao.png");}
.vision-bg-2{--vision-bg:url("../images/anhquangcao.png");}
.vision-bg-3{--vision-bg:url("../images/anhquangcao.png");}

/* ========== About – TP GROUP (gạch xanh đúng bề ngang chữ) ========== */
.tp-about-section{position:relative;background:#fff;padding:48px 0;}
@media (min-width:992px){.tp-about-section{padding:72px 0;}}
.tp-about-content{max-width:640px;margin-inline:auto;}
.tp-about-heading{font-weight:800;letter-spacing:.02em;color:#0a1633;margin:0 0 14px;line-height:1.15;font-size:28px;}
@media (min-width:992px){.tp-about-heading{font-size:34px;}}
.tp-about-heading .underline{
  display:inline-block;
  padding-bottom:6px;
  background:linear-gradient(#2f86ff,#2f86ff) left bottom/50% 6px no-repeat;
}
.tp-about-desc{
  font-family:'Roboto',sans-serif;font-weight:700;font-size:18px;line-height:26px;color:#13233f;margin:0;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
}
@media (max-width:575.98px){.tp-about-section{padding:36px 0;}.tp-about-heading{font-size:24px;}}
.tp-about-illustration{position:relative;width:100%;max-width:360px;aspect-ratio:1/1;margin:0 auto;display:grid;place-items:center;}
.tp-about-logo{position:relative;width:78%;aspect-ratio:1/1;border-radius:50%;background:#fff;box-shadow:0 8px 22px rgba(9,20,46,.08),inset 0 0 0 10px #eaf3ff;display:grid;place-items:center;overflow:hidden;}
.tp-about-logo img{width:66%;height:auto;object-fit:contain;display:block;}
.tp-about-logo::after{
  content:"";position:absolute;inset:-14px;border-radius:50%;
  background:conic-gradient(#2f86ff 0 26deg,transparent 26deg 140deg,#2f86ff 140deg 188deg,transparent 188deg 316deg,#2f86ff 316deg 350deg,transparent 350deg 360deg);
  -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 14px),#000 0);mask:radial-gradient(farthest-side,transparent calc(100% - 14px),#000 0);
}
.tp-about-illustration .ring{position:absolute;inset:0;margin:auto;border-radius:50%;pointer-events:none;}
.tp-about-illustration .ring-1{width:100%;height:100%;border:1.5px dashed rgba(28,88,170,.22);}
.tp-about-illustration .ring-2{width:84%;height:84%;border:1.5px solid rgba(28,88,170,.12);}
.tp-title,.tp-about-desc .tp-title{color:#2E5890;font-weight:700;}

/* ========== ICT Overview (2x2 cards) ========== */
.tp-ict-section{padding:36px 0 8px;background:#f7f9fc;}
@media (min-width:992px){.tp-ict-section{padding:44px 0 16px;}}
.tp-ict-head{font-size:18px;line-height:1.7;color:#0a1633;margin:0 0 18px;text-align:left;}
.tp-ict-head .tp-ict-highlight,.tp-ict-head .tp-ict-note{color:#1f6aff;font-weight:800;}
.tp-ict-head .tp-ict-note{font-weight:600;}
.tp-ict-grid>[class*="col-"]{display:flex;}
.tp-ict-card{
  position:relative;display:flex;gap:14px;align-items:flex-start;width:100%;
  background:#fff;border-radius:14px;box-shadow:0 10px 26px rgba(10,22,51,.08);
  padding:18px 20px;transition:transform .2s ease,box-shadow .2s ease;
}
.tp-ict-card::after{content:"";position:absolute;inset:0;border-radius:14px;box-shadow:inset 0 0 0 1px rgba(10,22,51,.06);pointer-events:none;}

.tp-ict-card:hover{transform:translateY(-2px);box-shadow:0 14px 34px rgba(10,22,51,.12);}
.tp-ict-icon{flex:0 0 60px;width:60px;height:60px;border-radius:16px;background:linear-gradient(135deg,#eaf2ff,#f4f7ff);display:grid;place-items:center;border:1px solid rgba(46,88,144,.12);}
.tp-ict-icon img{display:block;width:60px;height:60px;object-fit:contain;}
.tp-ict-body{flex:1 1 auto;min-width:0;}
.tp-ict-title{font-weight:800;color:#0a1633;font-size:16px;line-height:1.4;margin:2px 0 6px;}
.tp-ict-desc{color:#304463;font-size:14px;line-height:1.65;margin:0;}


/* === ICT card: bo tròn trái + bóp 2 góc phải thành đầu nhọn === */
.tp-ict-card{
  --arrow: 38px;                
  position: relative;
  background: #fff;
  border-radius: 14px;           
  box-shadow: 0 10px 26px rgba(10,22,51,.08);
  padding: 18px 20px;
  transition: transform .2s ease, box-shadow .2s ease;

  clip-path: polygon(
    0 0,
    calc(100% - var(--arrow)) 0,
    100% 50%,
    calc(100% - var(--arrow)) 100%,
    0 100%,
    0 0
  );
}
.tp-ict-card::before{
  content:"";
  position:absolute; inset:0;
  border-radius:14px;         
  pointer-events:none;
  box-shadow: inset 0 0 0 1px rgba(10,22,51,.06);
  clip-path: inherit;
}

.tp-ict-card:hover{
  transform: translateY(-2px);
  box-shadow: 0 14px 34px rgba(10,22,51,.12);
}


@media (max-width: 575.98px){
  .tp-ict-card{ --arrow: 22px; }
}
.tp-ict-card::after{ content:none !important; }
.tp-ict-grid{ align-items: stretch; }                  
.tp-ict-grid>[class*="col-"]{ display: flex; }         

.tp-ict-card{
  display: flex;                                     
  height: 100%;                                      
  min-height: 120px;                                  
}

.tp-ict-body{
  display: flex;
  flex-direction: column;
  justify-content: center;
}

@media (min-width: 1200px){
  .tp-ict-grid{
    display: grid;
    grid-template-columns: repeat(2, minmax(0,1fr));
    gap: 1.5rem;                  
    align-items: stretch;
  }
  .tp-ict-grid > [class*="col-"]{
    width: auto;                  
    display: block;
  }
  .tp-ict-card{ height: 100%; }
}

@media (min-width:1200px){.tp-ict-title{font-size:16.5px;}.tp-ict-desc{font-size:14.5px;}}

/* ========== LED & ICT Capability ========== */
.tp-led-ict-section{padding:36px 0;background:#f7f9fc;}
@media (min-width:992px){.tp-led-ict-section{padding:48px 0;}}
.tp-led-ict-section + .section{margin-top:0;}

.tp-led-visual{
  overflow:hidden;border-radius:14px;box-shadow:0 14px 34px rgba(10,22,51,.12);
}
.tp-led-img{
  width:100%;
  height:auto;
  display:block;object-fit:cover;object-position:center;border-radius:8px;
  transition: transform 0.3s ease-in-out;
}

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

@media (min-width: 992px) {
  #ledVisual,
  #ledCopy { height: 330px; }

  /* Ảnh căng theo chiều cao container */
  .tp-led-img {
    height: 100%;
    object-fit: cover;
    object-position: center;
  }

  #ledCopy {
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow: hidden;       
  }
}

.tp-led-copy{color:#0a1633;display:flex;flex-direction:column;justify-content:center;}
.tp-led-heading{font-weight:800;font-size:26px;line-height:1.25;margin:0 0 12px;}
@media (min-width:992px){.tp-led-heading{font-size:30px;}}
.tp-brand{
  color:#2E5890;font-weight:800;text-decoration:none;
}
.tp-led-copy p{font-size:15.5px;line-height:1.75;margin:0 0 12px;color:#2a3d5e;}
.tp-led-copy strong{font-weight:800;color:inherit;}
.tp-led-copy .tp-brand{color:#2E5890;font-weight:800;text-decoration:none;}
.tp-led-copy .tp-brand:hover{text-decoration:none;}
.tp-led-copy .tp-key{color:#2E5890;}

/* Desktop căn chiều cao 2 cột bằng nhau (dựa vào JS set height) */
@media (min-width:992px){
  .tp-led-ict-section .row.align-items-lg-stretch{align-items:stretch;}
}
/* Mobile & tablet: ảnh trả về auto height */
@media (max-width:991.98px){
  #ledVisual{height:auto!important;}
  .tp-led-img{height:auto;}
}

/*--------------------------------*/
/* ===== Why Choose (tối giản cho 1 ảnh) ===== */
.tp-why-section{background:#f7f9fc;padding:48px 0;}

@media (min-width:992px){.tp-why-section{padding:64px 0;}}

.tp-why-eyebrow{
  font-weight:800;font-size:14px;letter-spacing:.04em;text-transform:uppercase;
  color:#2E5890;margin-bottom:10px;
}
.tp-why-heading{
  color:#0a1633;font-weight:800;line-height:1.45;font-size:20px;margin:0 0 16px;
}
@media (min-width:992px){.tp-why-heading{font-size:22px;}}
.tp-why-brand{color:#2E5890;font-weight:800;}

.tp-why-list{list-style:none;padding:0;margin:14px 0 0;display:flex;flex-direction:column;gap:12px;}
.tp-why-list li{
  display:flex;gap:10px;align-items:flex-start;background:#fff;border-radius:14px;
  padding:12px 14px;box-shadow:0 10px 26px rgba(10,22,51,.06);position:relative;
}
.tp-why-list li::after{content:"";position:absolute;inset:0;border-radius:14px;box-shadow:inset 0 0 0 1px rgba(10,22,51,.06);pointer-events:none;}
.tp-why-icon{width:18px;height:18px;margin-top:5px;flex:0 0 18px;display:block;}
.tp-why-item{min-width:0;}
.tp-why-title{font-weight:800;color:#0a1633;margin:0 0 4px;font-size:15.5px;}
.tp-why-item p{margin:0;color:#304463;font-size:14px;line-height:1.6;}
@media (min-width:1200px){.tp-why-title{font-size:16px;}.tp-why-item p{font-size:14.5px;}}

/* Right visual (1 ảnh duy nhất) */
/* .tp-why-visual{
  position:relative;width:100%;border-radius:28px;overflow:hidden;
  box-shadow:0 18px 36px rgba(10,22,51,.18);
} */


.tp-why-visual {
  position: relative;
  width: 100%;
  max-width: 500px;
  height: 500px;
  margin: 0 auto;
}

.tp-why-visual img {
  position: absolute;
  border-radius: 20px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
  transition: transform 0.3s ease;
}

.tp-why-visual img:first-child {
  width: 100%;
  height: 100%;
  top: 0;
  right: 0;
  z-index: 1;
}

.tp-why-visual img:last-child {
  width: 60%;
  height: auto;
  bottom: 60px;
  left: -50px;
  z-index: 2;
  border: 5px solid #fff;
  border-radius: 60px 4px 60px 4px;
  animation: floatSmall 4s ease-in-out infinite;
}

.tp-why-visual:hover img:last-child {
  animation-play-state: paused;
  transform: translateY(-10px);
}

@keyframes floatSmall {
  0%, 100% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-20px);
  }
}

/* Responsive */
@media (max-width: 768px) {
  .tp-why-visual {
    max-width: 350px;
    height: 400px;
  }
  
  .tp-why-visual img:last-child {
    width: 55%;
    bottom: 30px;
  }
}

.tp-why-main{
  display:block;width:100%;height:auto;object-fit:cover;object-position:center;border-radius:28px;
}


/*--------------------------------*/
/* ===== Products & Services banner (100% giống bố cục ảnh) ===== */
.tp-products-section{padding:0;}
.tp-products-wrapper{
  position:relative; border-radius:12px; overflow:hidden;
  box-shadow:0 12px 28px rgba(10,22,51,.18);
  aspect-ratio:865/334; /* đúng tỷ lệ ảnh demo */
  background:#0f3d6e;
}
.tp-products-bg{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:center; display:block;
}


/* Title trên cùng, giữa */
.tp-products-title{
  position:absolute; left:50%; transform:translateX(-50%);
  top:14px; margin:0; padding:0 8px;
  color:#eaf2ff; text-transform:uppercase; letter-spacing:.03em;
  font-weight:800; line-height:1.1; text-align:center;
  font-size:26px;
}
@media (min-width:992px){ .tp-products-title{font-size:28px;} }

.tp-products-grid{
  position:absolute; inset:auto 18px 18px 18px; 
  top:74px; 
  display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:16px;
}

/* Card */
.tp-prod-card{
  position:relative; display:block; height:100%;
  border-radius:12px; overflow:hidden; isolation:isolate;
  box-shadow:0 10px 24px rgba(10,22,51,.22);
  transition:transform .18s ease, box-shadow .18s ease;
}
.tp-prod-card:hover{ transform:translateY(-2px); box-shadow:0 16px 32px rgba(10,22,51,.28); }

.tp-prod-img{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:center; display:block;
}

.tp-prod-card::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:44%;
  background:linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.62) 70%, rgba(0,0,0,.78) 100%);
  z-index:1;
}

.tp-prod-cap{
  position:absolute; left:16px; bottom:12px; z-index:2;
  color:#fff; font-weight:800; line-height:1.15;
  font-size:16px; text-shadow:0 2px 8px rgba(0,0,0,.45);
}
.tp-prod-cap span{font-weight:800;}

@media (max-width:767.98px){
  .tp-products-wrapper{aspect-ratio:auto;}
  .tp-products-title{position:static; transform:none; padding:14px 12px 0; text-align:center;}
  .tp-products-grid{
    position:static; padding:12px; display:grid; grid-template-columns:1fr; gap:12px;
  }
  .tp-prod-card{height:180px;}
}
.tp-prod-card::after{ display:none !important; }
.tp-products-wrapper::after{ background:none !important; }

/*--------------------------------*/
/* ===== Partners (Đối tác) ===== */
.tp-partners-section{padding:18px 0 8px;background:#fff;}
.tp-partners-heading{
  margin:0 0 6px; font-weight:800; ;
  color:#2E5890; font-size:26px;
  font-family: "Montserrat", system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, sans-serif;
}
@media (min-width:992px){ .tp-partners-heading{font-size:28px;} }


.tp-partners-sub{
  margin:0 0 14px; font-size:16px; line-height:1.6;
  color:#2f3b52; opacity:.95;
}

.tp-partners-logos{
  display:flex; align-items:center; justify-content:space-between;
  gap:16px; flex-wrap:wrap; padding:6px 0 2px;
}
.tp-partner{
  display:flex; align-items:center; justify-content:center;
  flex:1 1 140px; min-width:120px;
}

.tp-partner img{
  height:36px !important;          
  max-height:36px !important;
  width:auto;                        
  max-width:160px;                  
  object-fit:contain;
  display:block;
}

@media (min-width:992px){
  .tp-partner img{ height:60px !important; max-height:140px !important; max-width:180px; }
}

/*--------------------------------*/
/* ===== Clients (Khách hàng) ===== */
.tp-clients-section{padding:18px 0 8px;background:#fff;}
.tp-clients-heading{
  margin:0 0 6px; font-weight:800; letter-spacing:.02em;
  color:#2E5890; line-height:1.15; font-size:26px;
}
@media (min-width:992px){ .tp-clients-heading{font-size:28px;} }

.tp-clients-sub{
  margin:0 0 14px; font-size:14px; line-height:1.6;
  color:#2f3b52; opacity:.95;
}

.tp-clients-logos{
  display:flex; align-items:center; justify-content:space-between;
  gap:16px; flex-wrap:wrap; padding:6px 0 2px;
}
.tp-client{
  display:flex; align-items:center; justify-content:center;
  flex:1 1 140px; min-width:120px;
}
.tp-client img{
  height:36px !important; max-height:36px !important;
  width:auto; max-width:180px; object-fit:contain; display:block;
}

@media (min-width:992px){
  .tp-client img{ height:60px !important; max-height:140px !important; max-width:200px; }
}


/*------------------------chạy logo------------------------*/
/* ===== Marquee (auto-scroll) cho logo Đối tác / Khách hàng ===== */
.tp-marquee{ 
  --gap: 16px;              
  --item-width: 180px;       
  --marquee-speed: 28s;      
  position: relative;
  overflow: hidden;
  display: block;            
  padding: 6px 0 2px;       
}


.tp-marquee .tp-marquee-track{
  display: flex;
  align-items: center;
  gap: var(--gap);
  width: max-content;      
  animation: tp-marquee linear infinite;
  animation-duration: var(--marquee-speed);
}

.tp-marquee:hover .tp-marquee-track{ animation-play-state: paused; }

@keyframes tp-marquee{
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

.tp-marquee .tp-partner,
.tp-marquee .tp-client{
  flex: 0 0 var(--item-width);
  min-width: var(--item-width);
  display: flex; 
  align-items: center; 
  justify-content: center;
}


.tp-marquee img{
  display: block;
  width: auto;
  object-fit: contain;
}

@media (max-width: 575.98px){
  .tp-marquee{ --item-width: 140px; --gap: 12px; }
}

/* Tôn trọng user prefers-reduced-motion */
@media (prefers-reduced-motion: reduce){
  .tp-marquee .tp-marquee-track{ animation: none; }
}
/* =========================
   1) HERO: thu gọn chiều cao
   ========================= */
.hero-size{
  /* chiều cao + khoảng đệm gọn như ảnh bạn gửi */
  min-height: 420px;                /* mobile/tablet mặc định */
  padding: 64px 0 56px;             /* top / bottom */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
@media (min-width: 768px){
  .hero-size{ min-height: 460px; padding: 72px 0 60px; }
}
@media (min-width: 992px){
  .hero-size{ min-height: 520px; padding: 84px 0 70px; }
}
/* tránh các shape đè xuống phần dưới */
.techwix-hero-section-03 .shape-1,
.techwix-hero-section-03 .shape-2,
.techwix-hero-section-03 .shape-3,
.techwix-hero-section-03 .shape-4{
  pointer-events: none;
}



.techwix-hero-section-03{
  position: relative;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* lớp ảnh nền bị blur */
.techwix-hero-section-03::before{
  content:"";
  position:absolute; inset:0;
  background-image: inherit;      /* lấy url(...) từ inline style */
  background-size: inherit;
  background-position: inherit;
  background-repeat: inherit;
  filter: blur(8px);
  transform: scale(1.06);
  z-index: 0;
}

/* lớp gradient phủ lên ảnh (không blur) */
.techwix-hero-section-03::after{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(0,0,0,.25), rgba(0,0,0,.25)); /* chỉnh màu/opacity */
  z-index: 1;
}

/* nội dung trên cùng */
.techwix-hero-section-03 > *{ position: relative; z-index: 2; }

/* ============================================
   2) SERVICE: tách hẳn khỏi banner như mockup
   ============================================ */
/* Nhiều bản Techwix kéo service chồng lên hero bằng margin âm.
   Ghi đè tất cả về 0 và thêm khoảng cách chuẩn. */
.techwix-service-section-03{
  margin-top: 0 !important;
  padding-top: 28px;    
  padding-bottom: 32px;
  position: relative;
  z-index: 1;
}
.service-wrap-03{
  margin-top: 0 !important;
  transform: none !important;
}

/* tạo khoảng cách nhìn thấy ngay giữa 2 block */
.section.techwix-hero-section-03 + .techwix-service-section-03{
  margin-top: 20px;      
}


.techwix-service-section-03 .service-item-03{
  position: relative;
  top: 0 !important;
}


/* =======================
  Responsive Mobie
   ======================= */
@media (max-width: 575.98px) {
  .techwix-hero-section-03 {
  height: 300px;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  overflow: hidden;
  position: relative;
  z-index: 1;
}
.techwix-hero-section-03 .hero-content.hero-vn{
    margin-top: 120px !important;
  }
.techwix-hero-section-03 .hero-content .hero-btn .btn {
  margin-top: 5px;
}

.btn-hero{
  font-size: 12px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height:40px;
  padding:0 28px;
  font-weight:700;
  border-radius:999px;
 background-image: linear-gradient(135deg, #0A6DDA 0%, #38ABF8 100%);
  border-color:#2f86ff;
  color:#fff;
}
  .hero-content.hero-vn .sub-title{
    font-family: "Roboto", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-weight: 700;
    font-size: 14px;
    line-height: 18px;
    text-transform: uppercase;
    margin: 0 0 8px;
    letter-spacing: .02em; 
  }

  .hero-content.hero-vn .title{
    font-family: "Montserrat", "Roboto", system-ui, -apple-system, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
    font-weight: 700;
    font-size: 20px;
    line-height: 18px;
    text-transform: uppercase;
    margin: 0 0 10px;
  }

  .hero-content.hero-vn p{
    font-family: "Roboto", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-weight: 700;
    font-size: 12px;
    line-height: 16px;
    color: #eaf2ff;
    max-width: 100%; 
    margin: 0 0 12px;
  }
}
/*---------------------------*/
@media (max-width: 575.98px){
  /* Giảm chiều cao & padding của card */
  .techwix-service-section-03 .service-item-03.vision-card{
    min-height: 92px;              
    padding: 12px 14px;            
    gap: 10px;
  }
  .vision-card .home-img{
    width: 32px; height: 32px;
    margin-top: 8px;
    border-radius: 999px;
  }
  .vision-card .home-img img{
    width: 16px; height: 16px;
  }

  .techwix-service-section-03 .service-item-03 .service-content .title,
  .vision-card .title{
    font-family: "Roboto", sans-serif;
    font-weight: 600;              
    font-size: 16px;
    line-height: 22px;
    margin: 2px 0 4px;
  }

  .techwix-service-section-03 .service-item-03 .service-content p,
  .vision-card p{
    font-family: "Roboto", sans-serif;
    font-weight: 400;
    font-size: 12px;
    line-height: 18px;
    padding-top: 2px;               
    margin: 0;
  }
  .vision-card .home-img{
    flex: 0 0 32px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    aspect-ratio: 1 / 1;         
  }
  .vision-card .home-img img{
    width: 16px;
    height: 16px;
    object-fit: contain;
    display: block;
  }
}
/*---------------------------*/
/* === ABOUT (mobile ≤575.98px): logo 160px + text cùng dòng, đúng font-size === */
@media (max-width: 575.98px){

  .tp-about-section .row.align-items-center{
    display: flex;
    flex-wrap: nowrap;     
    align-items: center;
    gap: 12px;               
  }

  .tp-about-section .col-lg-6:first-child{
    flex: 0 0 auto;
  }

  
  .tp-about-section .col-lg-6:last-child{
    flex: 1 1 auto;
    min-width: 0;           
  }

  /* Logo tròn + vòng ring: 160x160 */
  .tp-about-illustration{
    width: 160px;
    height: 160px;
    max-width: none;
    aspect-ratio: 1 / 1;
    margin: 0;               
    display: grid;
    place-items: center;
  }
  .tp-about-logo{
    width: 100%;
    height: 100%;
    aspect-ratio: 1 / 1;
    border-radius: 50%;
  }
  .tp-about-logo img{
    width: 66%;
    height: auto;
    object-fit: contain;
    display: block;
  }

  .tp-about-heading{
    font-family: "Montserrat", "Roboto", sans-serif;
    font-weight: 700;
    font-size: 16px;
    line-height: 1;          
    margin: 0 0 6px;
  }

  /* Đoạn mô tả: Roboto 700, 12px, line-height 18px */
  .tp-about-desc{
    font-family: "Roboto", sans-serif;
    font-weight: 700;
    font-size: 12px;
    line-height: 18px;
    margin: 0;               
  }

  /* Section padding gọn hơn trên mobile cho giống layout trong hình */
  .tp-about-section{
    padding: 16px 0;
  }
}
/* ====== TP ABOUT: mobile layout 2 cột + thu gọn đúng như ảnh ====== */
@media (max-width: 575.98px){

  .tp-about-section{
    padding: 12px 0;
  }

  /* Chia 2 cột 50/50 như ảnh */
  .tp-about-section .row{
    --bs-gutter-x: 10px;
    --bs-gutter-y: 0;
    align-items: center;
  }
  .tp-about-section .col-lg-6{
    flex: 0 0 auto;
    width: 50%;
  }

  .tp-about-illustration{
    width: 160px;
    height: 160px;
    max-width: none;
    aspect-ratio: auto !important;   
    margin: 0;
  }
  .tp-about-logo{
    width: 100%;
    height: 100%;
  }
  .tp-about-logo img{
    width: 66%;
    height: auto;
    object-fit: contain;
    display: block;
  }


  .tp-about-content{
    padding-left: 6px;      
  }
  .tp-about-heading{
    font-family: "Montserrat", sans-serif;
    font-weight: 700;      
    font-size: 16px;
    line-height: 1;        
    margin: 0 0 8px;
  }
  .tp-about-desc{
    font-family: "Roboto", sans-serif;
    font-weight: 700;       
    font-size: 12px;
    line-height: 18px;
    color: #0a1633;        
    margin: 0;
  }

  .tp-about-heading .underline{
    background-size: 50% 6px;
    padding-bottom: 6px;
  }
}
/*------------------------------------------------------*/
/* ===== ICT Overview – MOBILE (<=575.98px) ===== */
@media (max-width: 575.98px){
  .tp-ict-section{ padding: 12px 0 8px; background:#f7f9fc; }
  .tp-ict-head{
    font-family: "Roboto", sans-serif;
    font-weight: 500;                
    font-size: 12px;
    line-height: 16px;
    color: #0a1633;
    margin: 0 0 12px;
  }
  .tp-ict-head .tp-ict-highlight,
  .tp-ict-head .tp-ict-note{
    color:#2E5890;
    font-weight:700;                  
  }

  .tp-ict-grid{ display:block; }
  .tp-ict-grid > [class*="col-"]{
    display:block !important;
    width:100% !important;
    margin:0 0 12px;
  }

  .tp-ict-card{
    --arrow: 24px;                   
    position: relative;
    display: flex;
    gap: 10px;
    align-items: center;
    min-height: 84px;
    padding: 12px 16px;
    background:#fff;
    border-radius: 12px;
    box-shadow: 0 8px 22px rgba(10,22,51,.08);

    clip-path: polygon(
      0 0,
      calc(100% - var(--arrow)) 0,
      100% 50%,
      calc(100% - var(--arrow)) 100%,
      0 100%,
      0 0
    );
  }

  .tp-ict-card::before{
    content:"";
    position:absolute; inset:0;
    border-radius:12px;
    box-shadow: inset 0 0 0 1px rgba(10,22,51,.06);
    pointer-events:none;
    clip-path: inherit;
  }

  .tp-ict-grid > [class*="col-"]:nth-child(even) .tp-ict-card{
    clip-path: polygon(
      var(--arrow) 0,
      100% 0,
      100% 100%,
      var(--arrow) 100%,
      0 50%,
      var(--arrow) 0
    );
  }

  .tp-ict-icon{
    flex: 0 0 36px;
    width: 36px; height: 36px;
    border-radius: 12px;
    background: linear-gradient(135deg,#eaf2ff,#f4f7ff);
    border: 1px solid rgba(46,88,144,.12);
    display: grid; place-items: center;
  }
  .tp-ict-icon img{ width: 22px; height: 22px; object-fit: contain; display:block; }

  .tp-ict-body{
    flex:1 1 auto; min-width:0;
    font-family:"Roboto",sans-serif;
    font-weight:500;                  
    font-size:12px; line-height:16px;
    color:#2f3b52;
  }

  .tp-ict-title{
    display:inline;                    
    margin:0;
    color:#2E5890;
    font:500 12px/16px "Roboto",sans-serif;  
  }
  .tp-ict-title::after{ content: ": "; }

  .tp-ict-desc{
    display:inline;                   
    margin:0;
    color:#2f3b52;
    font:500 12px/16px "Roboto",sans-serif;   
  }
}

@media (max-width: 575.98px){
  .tp-about-section + .tp-ict-section{
    margin-top: 16px;                
  }

  .tp-ict-section{
    padding-top: 20px;              
    padding-bottom: 10px;
  }

  .tp-ict-head{
    margin-bottom: 14px;              
  }

  .tp-ict-grid{
    margin-top: 6px;               
    row-gap: 16px;                   
  }
}

/* Center ICT head */
.tp-ict-section .tp-ict-head{
  text-align: center !important;
  max-width: 920px;         
  margin: 0 auto 18px;      
}


@media (max-width: 575.98px){
  .tp-ict-section .tp-ict-head{
    text-align: center !important;
    margin: 0 auto 12px;
  }
}

/*------------------------------------------------------*/
@media (max-width: 575.98px){
  .tp-led-ict-section .container{
    padding-left: 16px;
    padding-right: 16px;
  }
  #ledCopy{
    padding-top: 4px;      
  }
  #ledCopy p{
    font-family: "Roboto", sans-serif;
    font-weight: 600;      /* SemiBold */
    font-size: 12px;
    line-height: 16px;
    margin: 0 0 8px;
  }
  #ledCopy .tp-key,
  #ledCopy .tp-brand,
  #ledCopy strong{
    font-family: "Roboto", sans-serif;
    font-weight: 600;
    color: inherit;      
  }
}
/*------------------------------------------------------*/
/* ===== WHY SECTION – MOBILE (<=575.98px) ===== */
@media (max-width: 575.98px){

  .tp-why-section .row.g-4.align-items-center{
    display: flex;
    flex-wrap: wrap;
  }
  .tp-why-section .col-lg-6:first-child{ order: 2; } 
  .tp-why-section .col-lg-6:last-child{  order: 1; } 

  .tp-why-visual{ margin-bottom: 10px; border-radius: 12px; overflow: hidden; }
  .tp-why-main{ width:100%; height:auto; border-radius:12px; display:block; }

  /* “TẠI SAO CHỌN TP GROUP?” */
  .tp-why-eyebrow{
    font-family: "Montserrat", sans-serif;
    font-weight: 700;               
    font-size: 12px;
    line-height: 1;                 
    color: #2E5890;
    margin: 0 0 6px;
  }
  .tp-why-heading{
    font-family: "Roboto", sans-serif;
    font-weight: 500;              
    font-size: 14px;
    line-height: 21.03px;
    margin: 0 0 10px;

  }

  .tp-why-list{ gap: 10px; margin-top: 10px; }
  .tp-why-list li{ padding: 10px 12px; }

  .tp-why-item p{
    font-family: "Roboto", sans-serif;
    font-weight: 500;              
    font-size: 12px;
    line-height: 16px;
    margin: 0;
  
  }
}
.tp-why-section{
  background: transparent !important;
}

.tp-why-visual{
  box-shadow: none;             
  background: transparent;
}

.tp-why-main{
  display:block;
  width:100%;
  height:auto;
  background: transparent;
}

/*------------------------------------------------------*/

@media (max-width: 575.98px){
  .tp-products-wrapper{
    aspect-ratio: auto;           
    border-radius: 12px;
    overflow: hidden;
  }
  .tp-products-title{
    position: static;              
    transform: none;
    padding: 12px 12px 0;
    text-align: center;
    font-family: "Montserrat", sans-serif;
    font-weight: 700;              
    font-size: 16px;
    line-height: 22px;
    letter-spacing: .03em;
    color: #eaf2ff;                 
  }

  .tp-products-grid{
    display: none !important;
  }
  .products-swiper{
    padding: 12px;                
  }
  .products-swiper .swiper-slide{
    height: auto;
  }

  .products-swiper .tp-prod-card{
    position: relative;
    display: block;
    height: 338px;                  
    border-radius: 12px;
    overflow: hidden;
    /* box-shadow: 0 10px 24px rgba(10,22,51,.22); */
  }
  .products-swiper .tp-prod-img{
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    display: block; object-fit: cover; object-position: center;
  }

  .products-swiper .tp-prod-card::after{
    content:""; position:absolute; left:0; right:0; bottom:0; height:44%;
    background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.62) 70%, rgba(0,0,0,.78) 100%);
    z-index:1;
    pointer-events:none;
  }
}

/* ===== TP PRODUCTS – MOBILE FIX ===== */
@media (max-width: 575.98px){
  .tp-products-wrapper{
    aspect-ratio: auto;           
    min-height: 320px;             
    padding: 12px 12px 16px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    position: relative;
  }
  .tp-products-title{
    position: relative !important; 
    left: auto !important;
    top: auto !important;
    transform: none !important;
    z-index: 2;
    margin: 6px 0 12px;
    padding: 0 8px;
    text-align: center;
    font-family: "Montserrat", sans-serif;
    font-weight: 700;
    font-size: 16px;
    line-height: 22px;
    color: #EAF2FF;
    letter-spacing: .03em;
    text-transform: uppercase;
  }

}
/*------------------------------------------------------*/
/* ===== PARTNERS – MOBILE ≤575.98px (theo ảnh) ===== */
@media (max-width: 575.98px){
  .tp-partners-section{
    padding: 12px 0 10px;
    background:#fff;
  }
  .tp-partners-heading{
    font-family: "Montserrat", sans-serif !important;
    font-weight: 700 !important;
    font-size: 16px !important;
    line-height: 1 !important;     
    letter-spacing: .02em;
    color: #2E5890;                 
    margin: 0 0 8px;
    text-transform: none;           
  }

  .tp-partners-sub{
    font-family: "Roboto", sans-serif !important;
    font-weight: 700 !important;
    font-size: 12px !important;
    line-height: 18px !important;
    color: #0a1633;
    max-width: 560px;
    margin: 0 auto 12px;            
  }

  .tp-marquee.is-static { 
    --gap: 16px;
  }
  .tp-marquee.is-static .tp-marquee-track{
    animation: none !important;
    width: 100% !important;
    display: flex;
    justify-content: space-between;
    gap: var(--gap);
  }

  .tp-partner img{
    height: 24px !important;
    max-height: 24px !important;
    max-width: 120px;
    width: auto;
    object-fit: contain;
  }
}
/*------------------------------------------------------*/

@media (max-width: 575.98px){
  .tp-clients-section{
    padding: 12px 0 10px;
    background:#fff;
  }

  .tp-clients-heading{
    font-family: "Montserrat", sans-serif !important;
    font-weight: 700 !important;
    font-size: 16px !important;
    line-height: 1 !important;     
    letter-spacing: .02em;
    color:#2E5890;
    margin: 0 0 8px;
    text-transform: none;
  }


  .tp-clients-sub{
    font-family: "Roboto", sans-serif !important;
    font-weight: 700 !important;
    font-size: 12px !important;
    line-height: 18px !important;
    color:#0a1633;
    max-width: 560px;
    margin: 0 auto 12px;
  }

  .tp-clients-logos.is-static .tp-marquee-track{
    animation: none !important;
    width: 100% !important;
    display: flex;
    justify-content: space-between;
    gap: 16px;
  }

  .tp-client img{
    height: 24px !important;
    max-height: 24px !important;
    max-width: 120px;
    width: auto;
    object-fit: contain;
    display: block;
  }
}

@media (min-width: 992px){
  .tp-products-section .container{
    max-width: 100% !important;   
    width: 100% !important;
    padding-left: 0 !important;   
    padding-right: 0 !important;
  }
}

.btn-hero,
.btn-hero:hover,
.btn-hero:focus,
.btn-hero:active {
  background-image: linear-gradient(135deg, #0A6DDA 0%, #38ABF8 100%) !important;
  background-color: transparent !important;   
  border-color: #2f86ff !important;
  color: #fff !important;
  box-shadow: none !important;
}

.btn-hero::after {
  content: none !important;
}
.btn-hero::before {
  content: none !important;
}

:root{
  --ring-w: 1px;        
  --ring-speed-1: 18s;
  --ring-speed-2: 28s;
}

@keyframes tp-spin     { to { transform: rotate(1turn); } }
@keyframes tp-spin-r   { to { transform: rotate(-1turn); } }

.tp-about-illustration{ position:relative; }
.tp-about-illustration .ring{ position:absolute; inset:0; margin:auto; border-radius:50%; pointer-events:none; }

.tp-about-illustration .ring-1{ width:100%; height:100%; }
.tp-about-illustration .ring-1::before{
  content:""; position:absolute; inset:0; border-radius:50%;
  background:
    repeating-conic-gradient(
      rgba(46,88,144,.35) 0 10deg,
      transparent 10deg 22deg
    );
  
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - var(--ring-w)), #000 0);
          mask: radial-gradient(farthest-side, transparent calc(100% - var(--ring-w)), #000 0);
  animation: tp-spin var(--ring-speed-1) linear infinite;
  will-change: transform;
}


.tp-about-illustration .ring-2{ width:84%; height:84%; }
.tp-about-illustration .ring-2::before{
  content:""; position:absolute; inset:0; border-radius:50%;
  background:
    repeating-conic-gradient(
      rgba(46,88,144,.20) 0 6deg,
      transparent 6deg 18deg
    );
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - var(--ring-w)), #000 0);
          mask: radial-gradient(farthest-side, transparent calc(100% - var(--ring-w)), #000 0);
  animation: tp-spin-r var(--ring-speed-2) linear infinite;
  will-change: transform;
}

.tp-about-logo::after{
  animation: tp-spin 22s linear infinite !important;  
  transform-origin: 50% 50%;
}


.tp-about-illustration:hover .ring-1::before,
.tp-about-illustration:hover .ring-2::before,
.tp-about-illustration:hover .tp-about-logo::after{
  animation-play-state: paused;
}
@media (prefers-reduced-motion: reduce){
  .tp-about-illustration .ring-1::before,
  .tp-about-illustration .ring-2::before,
  .tp-about-logo::after{ animation: none !important; }
}


/* ===== TP-WHY – ẢNH LÓT NỀN (DESKTOP + MOBILE) ===== */
.tp-why-section{
  position: relative;
  isolation: isolate;
  overflow: visible;
}

.tp-why-section::before{
  content:"";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 0;
  width: 100vw;
  height: 520px;
  background-image: url("../images/anhlot.png") !important; 
  background-repeat: no-repeat;
  background-size: 1500px auto;
  background-position: left -140px top 0;
  pointer-events: none;
  z-index: 0;
  opacity: 1;
}


.tp-why-section > .container{ position: relative; z-index: 1; }

@media (max-width: 991.98px){
  .tp-why-section::before{
    height: 440px;
    background-size: 1200px auto;
    background-position: left -160px top 0;
  }
}

@media (max-width: 575.98px){
  .tp-why-section{ padding-top: 12px; }
  .tp-why-section::before{
    top: 0;
    height: 140px;
    width: 100%;
    background-size: 110% auto;
    background-position: top center;
  }
}

@media (min-width: 320px) and (max-width: 575.98px){ 
  .tp-why-visual img:last-child{
    border-radius: 29px 2px 29px 2px;
    width: 60%;
    bottom: 115px;
    left: 0;
  }

  .tp-why-visual img:first-child { 
    width: 80%;
    height: 85%;
    border-radius: 2px 29px 2px 29px;

  }
  
  .tp-why-section .col-lg-6:last-child{
    margin-top: 35px;
  }

  .tp-why-section .col-lg-6:first-child{
    margin-top: 0;
  }

}

/* ===== TP PRODUCTS – override theo yêu cầu ===== */

/* 1) Bỏ border-radius bên ngoài + bỏ box-shadow của wrapper */
.tp-products-section .tp-products-wrapper{
  border-radius: 0 !important;
 
}

.tp-products-section .tp-prod-card{
  border-radius: 8px !important;
  box-shadow: none !important;
  overflow: hidden;               /* để bo góc cắt đúng ảnh con */
}
/*=======================================LazyLoad=======================================*/

/* Ban đầu: mờ + trượt xa hơn một chút */
.vision-card{
  opacity: 0;
  transform: translateY(28px);
  /* tăng thời lượng + easing mượt */
  transition:
    opacity 1.1s ease,
    transform 1.1s cubic-bezier(.22,.61,.36,1);
  will-change: opacity, transform;
}

/* Khi vào tầm nhìn */
.vision-card.is-visible{
  opacity: 1;
  transform: translateY(0);
}

/* Tôn trọng người dùng giảm chuyển động */
@media (prefers-reduced-motion: reduce){
  .vision-card{ transition: none; transform: none; opacity: 1; }
}


/* ===== About: Lazy reveal từ dưới lên ===== */

/* Trạng thái ban đầu (ẩn + trượt nhẹ) */
.reveal{
  opacity: 0;
  transform: translateY(28px);
  transition:
    opacity 1.1s ease,
    transform 1.1s cubic-bezier(.22,.61,.36,1);
  will-change: opacity, transform;
}

/* Khi vào tầm nhìn */
.reveal.is-visible{
  opacity: 1;
  transform: translateY(0);
}

/* Stagger nhẹ cho tiêu đề + mô tả bên phải (nếu tồn tại) */
.tp-about-content.reveal .tp-about-heading,
.tp-about-content.reveal .tp-about-desc{
  opacity: 0;
  transform: translateY(16px);
  transition:
    opacity 950ms ease,
    transform 950ms cubic-bezier(.22,.61,.36,1);
  will-change: opacity, transform;
}
.tp-about-content.reveal.is-visible .tp-about-heading{
  opacity: 1; transform: none; transition-delay: 160ms;
}
.tp-about-content.reveal.is-visible .tp-about-desc{
  opacity: 1; transform: none; transition-delay: 340ms;
}

/* Tôn trọng người dùng giảm chuyển động */
@media (prefers-reduced-motion: reduce){
  .reveal,
  .tp-about-content.reveal .tp-about-heading,
  .tp-about-content.reveal .tp-about-desc{
    transition: none !important;
    transform: none !important;
    opacity: 1 !important;
  }
}
/* ===== ICT Overview: Lazy reveal từ dưới lên ===== */
.reveal-ict{
  opacity: 0;
  transform: translateY(28px);
  transition:
    opacity 1.15s ease,
    transform 1.15s cubic-bezier(.22,.61,.36,1);
  will-change: opacity, transform;
}
.reveal-ict.is-visible{
  opacity: 1;
  transform: translateY(0);
}

/* Stagger nho nhỏ cho text trong card: title -> desc */
.tp-ict-card.reveal-ict .tp-ict-title,
.tp-ict-card.reveal-ict .tp-ict-desc{
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .95s ease, transform .95s cubic-bezier(.22,.61,.36,1);
  will-change: opacity, transform;
}
.tp-ict-card.reveal-ict.is-visible .tp-ict-title{
  opacity: 1; transform: none; transition-delay: 140ms;
}
.tp-ict-card.reveal-ict.is-visible .tp-ict-desc{
  opacity: 1; transform: none; transition-delay: 260ms;
}

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




/* ===== LED & ICT Capability: Lazy reveal ===== */

/* Container (ảnh trái + cột text) */
.reveal-led{
  opacity: 0;
  transform: translateY(28px);
  transition:
    opacity 1.15s ease,
    transform 1.15s cubic-bezier(.22,.61,.36,1);
  will-change: opacity, transform;
}
.reveal-led.is-visible{
  opacity: 1;
  transform: translateY(0);
}

/* Stagger từng đoạn trong cột text */
.tp-led-copy .reveal-led-item{
  opacity: 0;
  transform: translateY(12px);
  transition:
    opacity .95s ease,
    transform .95s cubic-bezier(.22,.61,.36,1);
  will-change: opacity, transform;
}
.tp-led-copy .reveal-led-item.is-visible{
  opacity: 1;
  transform: none;
}

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


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


.tp-why-copy.reveal-why .tp-why-eyebrow,
.tp-why-copy.reveal-why .tp-why-heading{
  opacity: 0; transform: translateY(12px);
  transition: opacity .95s ease, transform .95s cubic-bezier(.22,.61,.36,1);
}
.tp-why-copy.reveal-why.is-visible .tp-why-eyebrow{ opacity:1; transform:none; transition-delay: 140ms; }
.tp-why-copy.reveal-why.is-visible .tp-why-heading{ opacity:1; transform:none; transition-delay: 280ms; }


.tp-why-list .reveal-why-item{
  opacity: 0; transform: translateY(12px);
  transition: opacity .9s ease, transform .9s cubic-bezier(.22,.61,.36,1);
  will-change: opacity, transform;
}
.tp-why-list .reveal-why-item.is-visible{
  opacity: 1; transform: none;
}


.tp-why-visual.reveal-why img:first-child{
  transform: scale(1.035);
  transition: transform 1.15s cubic-bezier(.22,.61,.36,1);
}
.tp-why-visual.reveal-why.is-visible img:first-child{ transform: scale(1); }

.tp-why-visual.reveal-why img:last-child{
  transform: translateY(16px);
  transition: transform 1.15s cubic-bezier(.22,.61,.36,1);
}
.tp-why-visual.reveal-why.is-visible img:last-child{ transform: translateY(0); }


/* ===== PRODUCTS – Lazy reveal + hover scale ===== */
.tp-products-wrapper.reveal-products{
  opacity: 0;
  transform: translateY(28px);
  transition:
    opacity 1.1s ease,
    transform 1.1s cubic-bezier(.22,.61,.36,1);
  will-change: opacity, transform;
}
.tp-products-wrapper.reveal-products.is-visible{
  opacity: 1;
  transform: none;
}

.reveal-products .tp-products-bg{
  opacity: 0;
  transform: scale(1.03);
  transition: opacity 1s ease, transform 1s cubic-bezier(.22,.61,.36,1);
  will-change: opacity, transform;
}
.reveal-products.is-visible .tp-products-bg{
  opacity: 1;
  transform: none;
}


.reveal-products .tp-products-title{
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .95s ease, transform .95s cubic-bezier(.22,.61,.36,1);
  will-change: opacity, transform;
}
.reveal-products.is-visible .tp-products-title{
  opacity: 1;
  transform: none;
  transition-delay: 160ms;
}


.reveal-products .tp-prod-card{
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .95s ease, transform .95s cubic-bezier(.22,.61,.36,1);
  will-change: opacity, transform;
}
.reveal-products.is-visible .tp-prod-card{ opacity: 1; transform: none; }
.reveal-products.is-visible .tp-prod-card:nth-child(1){ transition-delay: 280ms; }
.reveal-products.is-visible .tp-prod-card:nth-child(2){ transition-delay: 440ms; }
.reveal-products.is-visible .tp-prod-card:nth-child(3){ transition-delay: 600ms; }

.tp-prod-card .tp-prod-img{
  transition: transform .32s ease;   
  will-change: transform;
}
.tp-prod-card:hover .tp-prod-img{
  transform: scale(1.06);              
}


@media (prefers-reduced-motion: reduce){
  .tp-products-wrapper.reveal-products{ transition: none !important; transform: none !important; opacity: 1 !important; }
  .reveal-products .tp-products-bg,
  .reveal-products .tp-products-title,
  .reveal-products .tp-prod-card{ transition: none !important; transform: none !important; opacity: 1 !important; }
}

@media (min-width: 768px){ 

  .tp-products-title{
    left: 50%;
    transform: translateX(-50%);
  }

  .reveal-products .tp-products-title{
    transform: translate(-50%, 14px) !important;
  }
  .reveal-products.is-visible .tp-products-title{
    transform: translate(-50%, 0) !important;
  }
}

.tp-marquee {
  --gap: 16px;
  overflow: hidden;
}
.tp-marquee .tp-marquee-track{
  display: flex;
  align-items: center;
  gap: var(--gap);
  width: max-content;
  will-change: transform;
  animation: none !important;       
  padding: 0; margin: 0;
}
.tp-marquee img{ display:block; }