/* ========== 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:#2f86ff;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;}

/* --- About hero banner (giống ảnh demo) --- */
.page-banner-section { position: relative; overflow: hidden; }
.page-banner-section::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
}
.about-hero { position: relative; z-index: 1; padding: 72px 0 84px; color:#fff; }
.about-hero-ill { display:block; max-width:100%; height:auto; filter:saturate(.9) contrast(1.05) blur(.2px); transform:translateY(4px); }
.about-hero-copy { text-align:left; }
.about-eyebrow { display:inline-block; font-size:14px; text-transform:uppercase; margin-bottom:10px; font-weight: 700; }
.about-title { font-size:28px; line-height:1.35; font-weight:700; margin:0 0 6px; }
.about-brand { font-size:44px; line-height:1.1; font-weight:800; letter-spacing:.02em; margin:15px 0; }
.about-lead { max-width:560px; font-size:18px; line-height: 26px; opacity:.92; }
.page-banner .breadcrumb,.page-banner .title{ display:none!important; }
@media (max-width:991.98px){ .about-hero{padding:56px 0 64px;} .about-title{font-size:22px;} .about-brand{font-size:34px;} .about-lead{font-size:14px;} }
@media (max-width:575.98px){ .about-title{font-size:20px;} .about-brand{font-size:30px;} }

.page-banner-section, .page-banner-section .about-hero-copy, .page-banner-section .about-hero-copy *{ color:#fff!important; }

.page-banner-section .about-title, .page-banner-section .about-brand{
  color:#fff!important; -webkit-text-fill-color:#fff!important; background:none!important;
  -webkit-background-clip:initial!important; background-clip:initial!important;
  mix-blend-mode:normal!important; text-shadow:none!important; filter:none!important;
}
.page-banner-section .about-hero{ position:relative; z-index:1; }
.techwix-hero-section-03::before{ background:transparent!important; }
/* --- End About hero banner --- */


/* ===== About "VỀ TP GROUP" ===== */
.tp-about-section{ padding:18px 0 12px; background:#fff; }
.tp-about-img img{ width:100%; height:auto; display:block; object-fit:cover; object-position:center; border-radius: 8px; transition: transform 0.3s ease-in-out; }
.tp-about-img img:hover{
  transform: scale(1.05);
  cursor: pointer;
}
.tp-about-img{
  border-radius:8px;
  overflow:hidden;
}
.tp-about-copy{ text-align:left; }
.tp-about-underline{
  display: block;
  width: 64px;
  height: 6px;
  margin-left: 68px;
  background: #2E5890;
  border-radius: 6px;
}
.tp-about-title{ margin:0 0 10px; font-weight:800; letter-spacing:.01em; color:#0a1633; line-height:1.15; font-size:28px; }
@media (min-width:992px){ .tp-about-title{ font-size:32px; } }
.tp-about-heading{ display:inline-block; }
.tp-about-heading .underline{
  display:inline-block; padding-bottom:10px;
  background:linear-gradient(#2E5890,#2E5890) left bottom/50% 6px no-repeat;
}
@media (max-width:991.98px){
  .tp-about-heading .underline{ padding-bottom:8px; background-size:50% 5px; }
}
.tp-about-text{ margin:8px 0 0; max-width:640px; font-size:18px; line-height:26px; color:#09090B; }
.tp-about-wrap .row{ --bs-gutter-x:1.5rem; }
@media (max-width:991.98px){
  .tp-about-section{ padding:16px 0 10px; }
  .tp-about-title{ font-size:24px; }
  .tp-brand::after{ height:5px; }
  .tp-about-text{ font-size:14px; }
}
/* =====END About "VỀ TP GROUP" ===== */

/* ===== LĨNH VỰC HOẠT ĐỘNG ===== */
.tp-domains-section{ background:#fff; padding:24px 0 18px; }
.tp-domains-head{ margin-bottom:14px; }
.tp-domains-title{ font-weight:800; color:#09090B; font-size:28px; line-height:1.15; margin:0; }
.tp-domains-underline{ display:block; width:64px; height:6px; margin:8px auto 0; background:#2E5890; border-radius:6px; }

/* Sân khấu bố cục */
.tp-domains-wrap{ position:relative; max-width:980px; margin:18px auto; min-height:520px; }

/* Logo + vòng tròn trung tâm */
.tp-core{ position:absolute; inset:0; margin:auto; width:360px; height:360px; border-radius:50%; display:grid; place-items:center; }
.tp-core-ring{
  position:absolute; inset:0; border-radius:50%;
  background:radial-gradient(closest-side, rgba(46,88,144,.08), transparent 70%),
             conic-gradient(from 0deg, rgba(46,88,144,.35), rgba(46,88,144,.05) 60%, rgba(46,88,144,.35));
  mask:radial-gradient(circle, transparent 68%, #000 69%);
  animation:tp-spin 16s linear infinite;
  filter:drop-shadow(0 2px 8px rgba(46,88,144,.25));
}
.tp-core-ring--2{ inset:14px; opacity:.75; animation-duration:24s; transform:rotate(15deg); }
.tp-core-glow{ position:absolute; inset:40px; border-radius:50%; background:radial-gradient(closest-side, rgba(46,88,144,.18), transparent 70%); }
.tp-core-logo{
  position:relative; text-align:center; z-index:1; width:210px; height:210px; border-radius:50%;
  background:#fff; display:grid; place-items:center; box-shadow:0 8px 24px rgba(10,22,51,.08), inset 0 0 0 6px rgba(46,88,144,.15);
}
.tp-core-logo img{ max-width:120px; height:auto; display:block; margin:0 auto 8px; }
.tp-core-caption{ margin:0; font-weight:700; letter-spacing:.06em; color:#2E5890; font-size:16px; }

/* Hộp nội dung 4 góc */
.tp-card{
  position:absolute; width:320px; min-height:88px; background:#fff; border-radius:14px;
  box-shadow:0 6px 18px rgba(9,9,11,.08); padding:14px 16px 12px 16px;
}
.tp-card:before{ content:""; position:absolute; width:26px; height:26px; background:#fff; transform:rotate(45deg); box-shadow:0 6px 18px rgba(9,9,11,.06); }
.tp-card-title{ margin:0 0 4px; font-size:13px; font-weight:800; line-height:1.25; color:#0a1633; }
.tp-card-text{ margin:0; font-size:13px; line-height:1.55; color:#2f3b52; opacity:.95; }
.tp-blue{ color:#2E5890; }

/* Huy hiệu nhỏ cạnh hộp */
.tp-badge{
  position:absolute; top:-12px; left:-12px; width:32px; height:32px; border-radius:50%;
  display:grid; place-items:center; background:#fff; color:#2E5890;
  box-shadow:0 6px 18px rgba(9,9,11,.12), inset 0 0 0 6px rgba(46,88,144,.08); font-size:14px;
}

/* Toạ độ các hộp + đuôi (gốc) */
.tp-card--tl{ top:72px; left:0; }      .tp-card--tl:before{ right:-10px; bottom:18px; }
.tp-card--tr{ top:72px; right:0; }     .tp-card--tr:before{ left:-10px; bottom:18px; }
.tp-card--bl{ bottom:28px; left:40px; } .tp-card--bl:before{ right:-10px; top:18px; }
.tp-card--br{ bottom:28px; right:40px; } .tp-card--br:before{ left:-10px; top:18px; }

/* Hiệu ứng quay nhẹ cho vòng */
@keyframes tp-spin{ to{ transform:rotate(360deg); } }

/* Responsive */
@media (max-width:1199.98px){ .tp-core{ width:320px; height:320px; } .tp-core-logo{ width:190px; height:190px; } .tp-card{ width:300px; } }
@media (max-width:991.98px){
  .tp-domains-wrap{ min-height:unset; padding-top:8px; }
  .tp-core{ position:relative; width:260px; height:260px; margin:0 auto 18px; }
  .tp-card{ position:relative; width:auto; margin:10px 0; }
  .tp-card:before{ display:none; }
  .tp-card--tl,.tp-card--tr,.tp-card--bl,.tp-card--br{ top:auto; right:auto; bottom:auto; left:auto; }
}
@media (min-width:992px){ .tp-domains-title{ font-size:32px; } }

.tp-domains-wrap{ position:relative; }

.tp-orbit-icons{ position:absolute; inset:0; pointer-events:none; z-index:1; }

.tp-diamond{
  position:absolute; width:54px; height:54px; background:#fff; transform:rotate(45deg);
  border-radius:12px; box-shadow:0 14px 28px rgba(9,9,11,.10), inset 0 0 0 1px rgba(0,0,0,.03);
  display:grid; place-items:center; filter:drop-shadow(0 1px 0 rgba(0,0,0,.02));
}

.tp-diamond img{
  width:24px; height:24px; object-fit:contain; transform:rotate(-45deg); pointer-events:none; opacity:.95;
}

/* ==== Định vị 4 ô đúng như ảnh 2 ==== */
.tp-dm--tl{ top:72px; left:calc(50% - 180px); }
.tp-dm--tr{ top:72px; left:calc(50% + 180px); }
.tp-dm--bl{ top:calc(50% + 118px); left:calc(50% - 248px); }
.tp-dm--br{ top:calc(50% + 118px); left:calc(50% + 228px); }

@media (max-width:1199.98px){
  .tp-diamond{ width:48px; height:48px; }
  .tp-diamond img{ width:24px; height:24px; }
  .tp-dm--tl{ top:66px; left:calc(50% - 160px); }
  .tp-dm--tr{ top:66px; left:calc(50% + 160px); }
  .tp-dm--bl{ top:calc(50% + 106px); left:calc(50% - 220px); }
  .tp-dm--br{ top:calc(50% + 106px); left:calc(50% + 202px); }
}
@media (max-width:991.98px){ .tp-orbit-icons{ display:none; } }

.tp-card:before{ width:40px; height:40px; box-shadow:0 10px 24px rgba(9,9,11,.08); }
.tp-card--tl:before{ right:-16px; bottom:28px; }
.tp-card--tr:before{ left:-16px;  bottom:28px; }
.tp-card--bl:before{ right:-16px; top:28px;   }
.tp-card--br:before{ left:-16px;  top:28px;   }


.tp-tail-icon{
  position:absolute;
  width:16px; height:16px;        
  object-fit:contain;
  pointer-events:none;
  z-index:2;                        
}

.tp-tail-icon{
  position: absolute;
  width: 20px;
  height: 20px;
  object-fit: contain;
  pointer-events: none;
  z-index: 2; 
}

.tp-tail-icon--tl{ right: 4px;  bottom: 44px; transform: translate(50%, 50%); }
.tp-tail-icon--tr{ left:  4px;  bottom: 44px; transform: translate(-50%, 50%); }
.tp-tail-icon--bl{ right: 4px;  top:    44px; transform: translate(50%, -50%); }
.tp-tail-icon--br{ left:  4px;  top:    44px; transform: translate(-50%, -50%); }
:root{
  --knot: 40px;     
  --icon: 22px;     
  --half: calc(var(--knot) / 2);
}

.tp-card::before{
  width: var(--knot);
  height: var(--knot);
  background: #fff;
  transform: rotate(45deg);
  box-shadow: 0 10px 24px rgba(9,9,11,.08);
}

.tp-tail-icon{
  position: absolute;
  width: var(--icon);
  height: var(--icon);
  object-fit: contain;
  z-index: 3;
  pointer-events: none;
}

.tp-card--tl::before{ right:-16px; bottom:28px; }
.tp-card--tl .tp-tail-icon{
  right: calc(-16px + var(--half));
  bottom: calc(28px + var(--half));
  transform: translate(50%, 50%);
}

.tp-card--tr::before{ left:-16px; bottom:28px; }
.tp-card--tr .tp-tail-icon{
  left:  calc(-16px + var(--half));
  bottom: calc(28px + var(--half));
  transform: translate(-50%, 50%);
}

.tp-card--bl::before{ right:-16px; top:28px; }
.tp-card--bl .tp-tail-icon{
  right: calc(-16px + var(--half));
  top:   calc(28px + var(--half));
  transform: translate(50%, -50%);
}
.tp-card--br::before{ left:-16px; top:28px; }
.tp-card--br .tp-tail-icon{
  left: calc(-16px + var(--half));
  top:  calc(28px + var(--half));
  transform: translate(-50%, -50%);
}
/* ===== Vision block (from image) ===== */
.tp-vision { padding-top: 8px; padding-bottom: 6px; }
.tp-vision .section-title { margin-bottom: 8px; }

.tp-vision-eyebrow{
  font-family: "Montserrat", system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, sans-serif;
  font-weight: 700;
  font-size: 24px;
  line-height: 28px;
  color: #2E5890;
  margin: 0 0 6px;
}

.tp-vision-title{
  font-family: "Montserrat", system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, sans-serif;
  font-weight: 800; /* ExtraBold */
  font-size: 36px;
  line-height: 1.2;
  color: #09090B;
  margin: 15px 0;
}

.tp-vision-copy{
  max-width: 980px;
  margin: 0 auto;
  text-align: center;
}

.tp-vision-copy p{
  font-family: "Roboto", system-ui, -apple-system, Segoe UI, "Helvetica Neue", Arial, sans-serif;
  font-weight: 500;
  font-size: 18px;
  line-height: 26px;
  color: #040404;
  margin: 0;
}

.tp-blue{ color:#2E5890; font-weight: 700; }

/* responsive */
@media (max-width: 991.98px){
  .tp-vision-eyebrow{ font-size: 20px; line-height: 26px; }
  .tp-vision-title{ font-size: 28px; }
  .tp-vision-copy p{ font-size: 16px; line-height: 26px; }
}
@media (max-width: 575.98px){
  .tp-vision-title{ font-size: 24px; }
}

.techwix-choose-us-section.section-padding{
  background-size: cover;
  background-position: center;
}

/* ===== Mission layout – căn thẳng, card nhỏ, đều nhau ===== */

.tp-mission .tp-mission-eyebrow{
  font-family: "Montserrat", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-weight: 700;           
  font-size: 24px;             
  line-height: 28px;          
  color: #2E5890;             
  margin: 0 0 6px;
}

.tp-mission .tp-mission-title{
  font-family: "Montserrat", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-weight: 800;           
  font-size: 36px;             
  line-height: 1.0;          
  color: #09090B;             
  margin: 15px 0;
}

.tp-mission .tp-mission-lead{
  font-family: "Roboto", system-ui, -apple-system, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  font-weight: 400;           
  font-size: 18px;          
  line-height: 26px;        
  color: #09090B;             
  margin: 0;
}

.tp-mission .tp-mission-lead .tp-lead-highlight{
  font-family: "Roboto", system-ui, -apple-system, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  font-weight: 700;            
  font-size: 18px;
  line-height: 26px;
  color: #2E5890;              
}

.tp-mission{ padding: 14px 0 8px; }
.tp-mission-head{ max-width: 980px; margin: 0 auto 12px; }
.tp-mission-grid{
  max-width: 1060px;        
  margin: 22px auto 0;    
  row-gap: 22px;
}

.tp-mission-grid > [class*="col-"]{ display:flex; }
.tp-mission-card{
  width: 300px;            
  max-width: 100%;
  margin: 0 auto;         
  display:flex;
  flex-direction: column;
  height: 100%;           
  position: relative;
  background:#fff;
  border-radius:16px;
  box-shadow:0 8px 28px rgba(9,9,11,.08);
  padding:16px;            
  min-height: 230px;       
}

.tp-mission-thumb{
  position:absolute;
  top:50px;               
  left:-45px;              
  width:93px;
  height:103px;
  border-radius:14px;
  overflow:hidden;
  background:#fff;
  box-shadow:0 10px 24px rgba(9,9,11,.16);
  z-index:2;
}
.tp-mission-thumb img{
  width:100% !important;
  height:100% !important;
  object-fit:cover;
  display:block;
  border-radius:inherit;
}

.tp-mission-body{
  padding-left: 40px;     
  padding-top: 4px;
}

/* Text spec */
.tp-mission-text{
  font-family:"Roboto",system-ui,-apple-system,Segoe UI,"Helvetica Neue",Arial,sans-serif;
  font-weight:700;
  font-size:12px;
  line-height:20px;
  color:#09090B;
  margin:0;
}
.tp-mission-text .tp-blue{ color:#2E5890; }

/* Responsive tinh chỉnh */
@media (max-width: 1199.98px){
  .tp-mission-card{ width: 290px; }
}
@media (max-width: 991.98px){
  .tp-mission-grid{ max-width: 720px; }
  .tp-mission-card{ width: 100%; min-height: 220px; }
  .tp-mission-body{ padding-left: 116px; }
}
@media (max-width: 575.98px){
  .tp-mission-grid{ max-width: 100%; padding: 0 10px; }
  .tp-mission-thumb{ top:-8px; left:-12px; }
  .tp-mission-body{ padding-left: 112px; }
}



/* ===== Core Values (match mock 100%) ===== */
.tp-values-section{
  background-size: cover;
  background-position: center;
  padding-top: 24px;
  padding-bottom: 18px;
}

/* Eyebrow: GIÁ TRỊ CỐT LÕI */
.tp-values-eyebrow{
  font-family: "Montserrat", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-weight: 700;
  font-size: 24px;
  line-height: 28px;
  color: #2E5890;
  margin: 0 0 6px;
}

/* Big title: Công nghệ - Chuyên nghiệp - Đam mê - Trách nhiệm */
.tp-values-title{
  font-family: "Montserrat", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-weight: 800;              
  font-size: 36px;
  line-height: 1.0;             
  color: #09090B;
  margin: 0 0 8px;
}


.tp-values-grid{ margin-top: 10px; }


.tp-value-card{
  height: 100%;
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 8px 28px rgba(9,9,11,.08);
  padding: 16px 16px 14px;
}

.tp-value-icon{
  width: 40px; height: 40px;
  margin-bottom: 10px;
}
.tp-value-icon img{
  display: block;
  width: 40px; height: 40px;   
  object-fit: contain;
}


.tp-value-heading{
  margin: 0 0 6px;
  font-family: "Roboto", system-ui, -apple-system, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  font-weight: 700;              /* theo mock đậm */
  font-size: 16px;
  line-height: 24px;
  color: #2E5890;
}


.tp-value-text{
  margin: 0;
  font-family: "Roboto", system-ui, -apple-system, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  font-weight: 500;
  font-size: 12px;
  line-height: 20px;
  color: #09090B;
}

/* màu riêng cho chữ TP GROUP */
.tp-blue{ color:#2E5890; }

@media (max-width: 1199.98px){
  .tp-values-title{ font-size: 32px; }
}
@media (max-width: 991.98px){
  .tp-values-title{ font-size: 28px; }
}
@media (max-width: 575.98px){
  .tp-values-eyebrow{ font-size: 20px; line-height: 26px; }
  .tp-values-title{ font-size: 24px; }
}


/*-------------------------*
/* ===== Triết lý kinh doanh (match mock 100%) – FINAL ===== */

/* Block & spacing */
.tp-phil-section{
  position: relative;
  background-size: cover;
  background-position: center;
  padding-top: 22px;
  padding-bottom: 18px;
  margin-top: 50px;       
  color: #fff;
}

.tp-phil-section::before{
  content: "";
  position: absolute;
  inset: 0;

  z-index: 0;             
}

.tp-phil-copy,
.tp-phil-visual{
  position: relative;
  z-index: 1;
  overflow: hidden;
  border-radius: 60px 8px 60px 8px;
}

/* Eyebrow: TRIẾT LÝ KINH DOANH */
.tp-phil-eyebrow{
  font-family: "Montserrat", system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, sans-serif;
  font-weight: 700;
  font-size: 18px;
  line-height: 28px;    
  color: #FFFFFF;
  letter-spacing: .06em;
  text-transform: uppercase;
  margin: 0 0 6px;
}

.tp-phil-title{
  font-family: "Montserrat", system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, sans-serif;
  font-weight: 700;
  font-size: 36px;
  line-height: 1.0;    
  color: #FFFFFF;
  margin: 0 0 10px;
}

.tp-phil-lead{
  max-width: 700px;
  font-family: "Roboto", system-ui, -apple-system, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  font-weight: 700;     
  font-size: 18px;
  line-height: 26px;
  color: #FFFFFF;
  margin: 0 0 10px;
}

.tp-phil-list{
  list-style: none;
  padding: 6px 0 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.tp-phil-item{
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-family: "Roboto", system-ui, -apple-system, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  font-weight: 500;    
  font-size: 14px;
  line-height: 22px;
  color: #FFFFFF;
}
.tp-phil-item img{
  width: 24px;
  height: 24px;
  flex: 0 0 24px;
  margin-top: 1px;
  object-fit: contain;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,.25));
}

.tp-phil-visual{ width: 100%; display: block; position: relative; }
.tp-phil-img{
  display: block;
  width: 100%;
  height: auto;
  border-radius: 8px;
  /* box-shadow: 0 12px 30px rgba(0,0,0,.35); */
  object-fit: cover;
  object-position:center;
  transition: transform 0.3s ease-in-out;
}

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

/* Responsive */
@media (max-width: 991.98px){
  .tp-phil-section{ margin-top: 24px; }          
  .tp-phil-title{ font-size: 30px; }
  .tp-phil-lead{ font-size: 16px; line-height: 26px; }
}
@media (max-width: 575.98px){
  .tp-phil-section{
    margin-top: 16px;
    padding-top: 18px;
    padding-bottom: 14px;
  }
  .tp-phil-title{ font-size: 26px; }
}

/* ===== 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;
}

/* ---- KÍCH THƯỚC ĐỒNG NHẤT ---- */
.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;
  color:#2E5890; line-height:1.15; font-size:26px;
  font-family: "Montserrat", system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, sans-serif;
}
@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; }
}



@media (min-width: 320px) and (max-width: 575.98px){
  
  /* Header mobile */
  .header-logo a img{ width: 48px !important; height: 48px !important; }
  .lang-btn{ font-size: 14px; padding: 4px 8px; }
  
  /* Page Banner - Hero Section */
  .about-hero{ padding: 40px 0 48px; }
  .about-eyebrow{ display: none; }
  .about-title{ font-size: 18px; line-height: 1.3; margin-bottom: 4px; }
  .about-brand{ font-size: 26px; margin: 2px 0 8px; }
  .about-lead{ font-size: 13px; line-height: 1.6; }

  .tp-about-wrap .col-lg-6:first-child {
    order: 2; 
  }
  .tp-about-wrap .col-lg-6:last-child {
    order: 1;
    margin-top: 0;
  }
  
  .tp-about-section, .tp-domains-container{ padding: 12px 20px; }
  .tp-about-title{ font-size: 20px; margin-bottom: 8px; }
  .tp-about-heading .underline{ padding-bottom: 6px; background-size: 50% 4px; }
  .tp-about-text{ font-size: 13px; line-height: 22px; margin-top: 6px; }
  .tp-about-underline{
    width: 48px;
    height: 5px;
    margin-left: 190px;
  }

  .tp-mission .tp-mission-lead{
    font-size: 14px;
    line-height: 20px;
  }
  

  .tp-domains-info{
    text-align: center;
  }
  .tp-domains-section{ padding: 30px 0 }
  .tp-domains-title{ font-size: 16px; margin-top: 0; color: #2E5890;}
  .tp-domains-underline{ width: 52px; height: 5px; margin-top: 6px; }

  .techwix-counter-section-03 .tp-domains-underline{
    width: 66px;
    height: 5px;
    margin-top: 3px;
    margin-left: 68px;
  }

  .tp-core{ width: 220px; height: 220px; margin-bottom: 14px; }
  .tp-core-logo{ width: 160px; height: 160px; }
  .tp-core-logo img{ max-width: 90px; }

  .tp-card{
    width: 100% !important;
    margin: 8px 0 !important;
    padding: 12px 14px 10px;
    min-height: auto;
  }
  .tp-card-title{ font-size: 12px; margin-bottom: 3px; }
  .tp-card-text{ font-size: 13px; line-height: 1.5; }
  
  /* Vision Section */
  .tp-vision{ padding-top: 6px; padding-bottom: 4px; }
  .tp-vision-eyebrow{ font-size: 16px; line-height: 25px; }
  .tp-vision-title{ font-size: 14px; line-height: 21px;}
  .tp-vision-copy p{ font-size: 12px; line-height: 20px; padding: 0 20px; }
  
  /* Mission Section */
  .tp-mission{ padding: 0 20px; }
  .tp-mission .tp-mission-eyebrow { font-size: 16px; line-height: 25px; }
  .tp-mission .tp-mission-title{ font-size: 14px; line-height: 21px; margin-bottom: 15px; }
  .tp-mission-lead{ font-size: 14px; line-height: 24px; }
  .tp-mission .tp-mission-lead .tp-lead-highlight{ font-size: 12px; line-height: 20px; }
  .tp-mission-grid{ margin-top: 16px; row-gap: 16px; padding: 0 8px; }
  
  /* Mission cards mobile */
  .tp-mission-card{
    min-height: 200px;
    padding: 14px;
  }
  .tp-mission-thumb{
    width: 86px;
    height: 90px;
    top: 32px;
    left: -10px;
  }
  .tp-mission-body{
    padding-left: 90px;
    padding-top: 2px;
  }
  .tp-mission-text{ font-size: 12px; line-height: 20px; }
  
  /* Core Values Section */
  .tp-values-head{ margin-top: 30px;}
  .tp-values-section{ padding: 0 20px; }
  .tp-values-eyebrow{ font-size: 16px; line-height: 25px; }
  .tp-values-title{ font-size: 14px; line-height: 21px; margin: 15px 0 }
  .tp-values-grid{ margin-top: 15px; row-gap: 12px; }
  
  .tp-value-card{ padding: 14px 12px 12px; display: flex; }
  .tp-value-icon{ width: 25%; height: 36px; margin-bottom: 8px; }
  .tp-value-icon img{ width: 40px; height: 40px; }
  .tp-value-heading{ font-size: 16px; line-height: 22px; margin-bottom: 5px; }
  .tp-value-text{ font-size: 12px; line-height: 18px; }
  
  /* Philosophy Section */
  .tp-phil-section{
    margin-top: 12px;
    padding-top: 16px;
    padding-bottom: 12px;
  }
  .tp-phil-eyebrow{ font-size: 16px; line-height: 22px;margin-bottom: 0; }
  .tp-phil-title{ font-size: 14px; line-height: 20px; margin: 10px 0; }
  .tp-phil-lead{ font-size: 12px; line-height: 18px; font-weight: 500; }
  .tp-phil-list{ padding-top: 4px; gap: 6px; }
  .tp-phil-item{
    font-size: 12px;
    line-height: 20px;
    gap: 8px;
  }
  .tp-phil-item img{
    width: 20px;
    height: 20px;
    flex: 0 0 20px;
  }
  .tp-phil-visual{ margin-bottom: 16px; }
  .tp-phil-img{ border-radius: 10px; }
  
  /* Partners Section */
  .tp-partners-section{ padding: 30px 8px; }
  .tp-partners-heading{ font-size: 16px; margin-bottom: 5px; }
  .tp-partners-sub{ font-size: 12px; line-height: 18px; margin-bottom: 12px; color: #09090B ; font-weight: 700; }
  .tp-partners-logos{ gap: 12px; padding: 4px 0; }
  .tp-partner{ flex: 1 1 100px; min-width: 90px; }
  .tp-partner img{
    height: 32px !important;
    max-height: 32px !important;
    max-width: 140px;
  }
  
  /* Clients Section */
  .tp-clients-section{ padding: 0 8px 30px; }
  .tp-clients-heading{ font-size: 16px; margin-bottom: 5px; }
  .tp-clients-sub{ font-size: 12px; line-height: 18px; margin-bottom: 12px; font-weight: 700; }
  .tp-clients-logos{ gap: 12px; padding: 4px 0; }
  .tp-client{ flex: 1 1 100px; min-width: 90px; }
  .tp-client img{
    height: 32px !important;
    max-height: 32px !important;
    max-width: 160px;
  }
}



/* ===== Marquee (auto scroll) cho logo ===== */
.tp-marquee{
  --gap:16px;                
  --item-width:180px;        
  --marquee-speed:28s;        
  overflow:hidden;
  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; height:36px; object-fit:contain; }
@media (min-width:992px){ .tp-marquee img{ height:60px; } }
@media (max-width:575.98px){ .tp-marquee{ --item-width:140px; --gap:12px; } }

@media (prefers-reduced-motion:reduce){
  .tp-marquee .tp-marquee-track{ animation:none; }
}
/*=============Update css banner màn điện thoại=================*/
@media (max-width: 575.98px){

  .page-banner-section .about-hero{
    padding-top: 8px !important;
    padding-bottom: 14px !important;
  }
  .page-banner-section .about-hero .row{
    justify-content: flex-end;
    align-items: flex-start;
  }
  .page-banner-section .about-hero .col-lg-6.col-12{
    width: 100%;
    padding-right: 10px;     
    padding-left: 0;
  }
  .page-banner-section .about-hero-copy{
    text-align: right !important;
    margin-left: auto !important;
    width: min(88vw, 300px); 
  }

  .page-banner-section .about-title{
    font-family: "Roboto", system-ui, -apple-system, Segoe UI, "Helvetica Neue", Arial, sans-serif !important;
    font-weight: 700 !important;
    font-size: 12px !important;
    line-height: 18px !important;
    text-transform: uppercase !important;
    margin: 0 0 6px auto !important;
    display: block;
  }
  @supports (text-wrap: balance){
    .page-banner-section .about-title{ text-wrap: balance; }
  }


  .page-banner-section .about-brand{
    font-family: "Montserrat", system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, sans-serif !important;
    font-weight: 700 !important;
    font-size: 18px !important;
    line-height: 18px !important;
    text-transform: uppercase !important;
    margin: 6px 102px 8px auto !important;
    display: block;
  }
  @supports (text-wrap: balance){
    .page-banner-section .about-brand{ text-wrap: balance; }
  }

 
  .page-banner-section .about-lead{
    font-family: "Roboto", system-ui, -apple-system, Segoe UI, "Helvetica Neue", Arial, sans-serif !important;
    font-weight: 700 !important;
    font-size: 10px !important;  
    line-height: 12px !important;
    margin: 0 !important;
    max-width: 100% !important;
    display: block;

    text-align: justify;
    text-align-last: right;     
    word-break: keep-all;        
    hyphens: auto;
  }

  .page-banner-section{ position: relative; }
  /* .page-banner-section::after{
    content:""; position:absolute; inset:0; z-index:0;
    backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  } */
  .page-banner-section .about-hero{ z-index: 1; }
}
@media (max-width: 575.98px){

  .page-banner-section .about-hero-copy{
    width: min(86vw, 280px) !important;
    margin-left: auto !important;
    text-align: right !important;
  }
  .page-banner-section .about-lead{
    max-width: 202px !important;   
    line-height: 16px !important;  
    text-align: justify;           
    text-align-last: right;        
    margin-top: 6px !important;
  }


  .page-banner-section .about-title .nowrap{ white-space: nowrap; } 

  .page-banner-section .about-lead{
    width: min(94vw, 260px) !important; 
   
    margin-left: auto !important;       
    text-align: center;
    text-align-last: left;
  }
.page-banner-section .about-title {
    text-justify: inter-word;
    word-break: keep-all;
    hyphens: auto;
}


  .page-banner-section .about-lead{
    text-align: left;

  }
}


/* ========= RINGS FOR .tp-core--v2 ========= */
/* ===== Rings spin (minimal & clean) ===== */

/* ===== Rings spin – mobile-safe (không phá bố cục) ===== */
@keyframes tp-spin   { to { transform: rotate(1turn); } }
@keyframes tp-spin-r { to { transform: rotate(-1turn); } }

.tp-core--v2{
  position: relative;
}

.tp-core--v2 .tp-ring{
  position: absolute;
  inset: 0;
  border-radius: 50%;
  transform-origin: 50% 50%;
  pointer-events: none;
  z-index: 1;                 
  will-change: transform;
}

.tp-core--v2 .tp-core-plate{
  position: relative;
  z-index: 2;
}

.tp-core--v2 .tp-ring--outer{
  --ring-w: 2px;
  background:
    repeating-conic-gradient(
      rgba(46,88,144,.30) 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 24s linear infinite;
}

.tp-core--v2 .tp-ring--dash{
  inset: 10px;
  --ring-w: 2px;
  background:
    repeating-conic-gradient(
      rgba(46,88,144,.22) 0 6deg,
      transparent          6deg 16deg
    );
  -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 32s linear infinite;
}

.tp-core--v2 .tp-ring--segments{
  inset: 22px;
  --ring-w: 2px;
  background:
    repeating-conic-gradient(
      rgba(46,88,144,.35) 0 4deg,
      transparent          4deg 12deg
    );
  -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 18s linear infinite;
}
.tp-core--v2:hover .tp-ring{ animation-play-state: paused; }
@media (prefers-reduced-motion: reduce){
  .tp-core--v2 .tp-ring{ animation: inherit; }
}

@media (min-width: 992px){
  .tp-core--v2{
    position: absolute;
    inset: 0;
    margin: auto;
  }
}

@media (max-width: 575.98px){
  .tp-domains-info{ 
    text-align: center;             
  }
  .tp-domains-info .tp-domains-title{
    display: inline-block;           
  }
  .tp-domains-info .tp-about-underline{
    display: block;
    width: 56px;                    
    height: 6px;
    border-radius: 6px;
    margin: 6px auto 0 !important;   
  }
}

@media (max-width: 575.98px){
  .tp-domains-head{ text-align: center; }
  .tp-domains-head .tp-domains-underline,
  .techwix-counter-section-03 .tp-domains-underline{
    display: block;
    width: 56px;          
    height: 6px;
    border-radius: 6px;
    margin: 6px auto 0 !important; 
  }
}

@media (max-width: 575.98px){

.page-banner-section .about-title{
    text-align: left !important;
    margin: 0 0 6px 0 !important;
    padding-left: 78px;
    text-indent: 0 !important;     
   
  }
}

@media (min-width: 992px){
  .tp-card--tr,
  .tp-card--br{
    padding-left: 32px;   
  }

  .tp-card--tl,
  .tp-card--bl{
    padding-right: 32px;  
  }
}


/* ===== Float animation for mission thumbs ===== */
@keyframes tp-floatY {
  0%   { transform: translateY(0); }
  50%  { transform: translateY(-12px); } 
  100% { transform: translateY(0); }
}


.tp-mission-thumb{
  animation: tp-floatY 3.8s ease-in-out infinite;
  will-change: transform;
}

.tp-mission-grid > div:nth-child(1) .tp-mission-thumb{
  animation-duration: 3.8s;
  animation-delay: .0s;
}
.tp-mission-grid > div:nth-child(2) .tp-mission-thumb{
  animation-duration: 4.4s;
  animation-delay: .2s;
}
.tp-mission-grid > div:nth-child(3) .tp-mission-thumb{
  animation-duration: 5s;
  animation-delay: .4s;
}

.tp-mission-card:hover .tp-mission-thumb{
  animation-play-state: paused;
}


@media (max-width: 575.98px){
  @keyframes tp-floatY {
    0%   { transform: translateY(0); }
    50%  { transform: translateY(-8px); }
    100% { transform: translateY(0); }
  }
}


@media (prefers-reduced-motion: reduce){
  .tp-mission-thumb{ animation: none; }
}


/* ===== Hover scale for mission thumbs ===== */

.tp-mission-card{ overflow: visible; }


.tp-mission-thumb img{
  transition: transform .26s ease, filter .26s ease;
  will-change: transform;
}


@media (hover: hover){

  .tp-mission-card:hover .tp-mission-thumb img{
    transform: scale(1.08);
    filter: contrast(1.05) saturate(1.03);
  }


  .tp-mission-card{
    transition: transform .22s ease, box-shadow .22s ease;
  }
  .tp-mission-card:hover{
    transform: translateY(-2px);
    box-shadow: 0 12px 36px rgba(9,9,11,.12);
  }
}


@media (prefers-reduced-motion: reduce){
  .tp-mission-thumb img{ transition: none; }
}

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


.tp-about-img.reveal-about img{
  transform: scale(1.03);
  transition: transform 1s cubic-bezier(.22,.61,.36,1);
  will-change: transform;
}
.tp-about-img.reveal-about.is-visible img{
  transform: scale(1);
}

.tp-about-img.reveal-about.is-visible:hover img{
  transform: scale(1.05);
}


.tp-about-copy.reveal-about .tp-domains-title,
.tp-about-copy.reveal-about .tp-about-underline,
.tp-about-copy.reveal-about .tp-about-text{
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .75s ease, transform .75s cubic-bezier(.22,.61,.36,1);
  will-change: opacity, transform;
}
.tp-about-copy.reveal-about.is-visible .tp-domains-title{ opacity:1; transform:none; transition-delay:120ms; }
.tp-about-copy.reveal-about.is-visible .tp-about-underline{ opacity:1; transform:none; transition-delay:200ms; }
.tp-about-copy.reveal-about.is-visible .tp-about-text{ opacity:1; transform:none; transition-delay:260ms; }


@media (prefers-reduced-motion: reduce){
  .reveal-about,
  .tp-about-img.reveal-about img,
  .tp-about-copy.reveal-about .tp-domains-title,
  .tp-about-copy.reveal-about .tp-about-underline,
  .tp-about-copy.reveal-about .tp-about-text{
    transition: none !important;
    transform: none !important;
    opacity: 1 !important;
  }
}


/* ===== Domains: lazy reveal ===== */
.reveal-domains{
  opacity: 0;
  transform: translateY(22px);
  transition:
    opacity .9s ease,
    transform .9s cubic-bezier(.22,.61,.36,1);
  will-change: opacity, transform;
}
.reveal-domains.is-visible{
  opacity: 1;
  transform: none;
}


.tp-core--v2.reveal-domains .tp-core-logo-img{
  transform: scale(1.03);
  transition: transform 1s cubic-bezier(.22,.61,.36,1);
  will-change: transform;
}
.tp-core--v2.reveal-domains.is-visible .tp-core-logo-img{
  transform: scale(1);
}


.tp-core--v2:not(.is-visible) .tp-ring{ animation-play-state: paused; }


.tp-card.reveal-domains .tp-card-title,
.tp-card.reveal-domains .tp-card-text,
.tp-card.reveal-domains .tp-tail-icon{
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .7s ease, transform .7s cubic-bezier(.22,.61,.36,1);
  will-change: opacity, transform;
}
.tp-card.reveal-domains.is-visible .tp-card-title{
  opacity:1; transform:none; transition-delay:120ms;
}
.tp-card.reveal-domains.is-visible .tp-card-text{
  opacity:1; transform:none; transition-delay:200ms;
}
.tp-card.reveal-domains.is-visible .tp-tail-icon{
  opacity:1; transform:none; transition-delay:260ms;
}


@media (prefers-reduced-motion: reduce){
  .reveal-domains,
  .tp-core--v2.reveal-domains .tp-core-logo-img,
  .tp-card.reveal-domains .tp-card-title,
  .tp-card.reveal-domains .tp-card-text,
  .tp-card.reveal-domains .tp-tail-icon{
    transition: none !important;
    transform: none !important;
    opacity: 1 !important;
  }
}


.reveal-vision{
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .8s ease, transform .8s cubic-bezier(.22,.61,.36,1);
  will-change: opacity, transform;
}
.reveal-vision.is-visible{
  opacity: 1;
  transform: none;
}

.reveal-vision .tp-vision-eyebrow,
.reveal-vision .tp-vision-title,
.reveal-vision p{
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .7s ease, transform .7s cubic-bezier(.22,.61,.36,1);
}
.reveal-vision.is-visible .tp-vision-eyebrow{ opacity:1; transform:none; transition-delay: 80ms; }
.reveal-vision.is-visible .tp-vision-title  { opacity:1; transform:none; transition-delay:160ms; }
.reveal-vision.is-visible p                 { opacity:1; transform:none; transition-delay:240ms; }


@media (prefers-reduced-motion: reduce){
  .reveal-vision,
  .reveal-vision .tp-vision-eyebrow,
  .reveal-vision .tp-vision-title,
  .reveal-vision p{
    transition: none !important;
    transform: none !important;
    opacity: 1 !important;
  }
}


.reveal-mission{
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .75s ease, transform .75s cubic-bezier(.22,.61,.36,1);
  will-change: opacity, transform;
}
.reveal-mission.is-visible{
  opacity: 1;
  transform: none;
}


.reveal-mission:not(.is-visible) .tp-mission-thumb{
  animation-play-state: paused;
}


.tp-mission-head.reveal-mission .tp-mission-eyebrow,
.tp-mission-head.reveal-mission .tp-mission-title,
.tp-mission-head.reveal-mission .tp-mission-lead{
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .6s ease, transform .6s ease;
}
.tp-mission-head.reveal-mission.is-visible .tp-mission-eyebrow{ opacity:1; transform:none; transition-delay: 60ms; }
.tp-mission-head.reveal-mission.is-visible .tp-mission-title  { opacity:1; transform:none; transition-delay:140ms; }
.tp-mission-head.reveal-mission.is-visible .tp-mission-lead   { opacity:1; transform:none; transition-delay:220ms; }

@media (prefers-reduced-motion: reduce){
  .reveal-mission,
  .tp-mission-head.reveal-mission .tp-mission-eyebrow,
  .tp-mission-head.reveal-mission .tp-mission-title,
  .tp-mission-head.reveal-mission .tp-mission-lead{
    transition: none !important;
    transform: none !important;
    opacity: 1 !important;
  }
}


.reveal-values{
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .7s ease, transform .7s cubic-bezier(.22,.61,.36,1);
  will-change: opacity, transform;
}
.reveal-values.is-visible{
  opacity: 1;
  transform: none;
}


.tp-values-head.reveal-values .tp-values-eyebrow,
.tp-values-head.reveal-values .tp-values-title{
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .55s ease, transform .55s ease;
}
.tp-values-head.reveal-values.is-visible .tp-values-eyebrow{ opacity:1; transform:none; transition-delay:60ms; }
.tp-values-head.reveal-values.is-visible .tp-values-title  { opacity:1; transform:none; transition-delay:140ms; }


@media (prefers-reduced-motion: reduce){
  .reveal-values,
  .tp-values-head.reveal-values .tp-values-eyebrow,
  .tp-values-head.reveal-values .tp-values-title{
    transition: none !important;
    transform: none !important;
    opacity: 1 !important;
  }
}



.reveal-phil{
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .7s ease, transform .7s cubic-bezier(.22,.61,.36,1);
  will-change: opacity, transform;
}
.reveal-phil.is-visible{
  opacity: 1;
  transform: none;
}

.tp-phil-section.bg-ready{
  transition: background-image .3s ease, opacity .3s ease;
}


@media (prefers-reduced-motion: reduce){
  .reveal-phil{
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}


/* ========== FIX 1: Hover ảnh .tp-about-img ========== */

.tp-about-img{ position: relative; z-index: 1; pointer-events: auto; }

.tp-about-img:hover img{
  transform: scale(1.05) !important;
}

.tp-about-img.reveal-about.is-visible:hover img{
  transform: scale(1.05) !important;
}


@media (hover: hover){
  .tp-mission-thumb:hover img,
  .tp-mission-thumb img:hover{
    transform: scale(1.08);
    filter: contrast(1.05) saturate(1.03);
  }
}

/* ===== Hero: lazy reveal ===== */
.reveal-hero{
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .85s ease, transform .85s cubic-bezier(.22,.61,.36,1);
  will-change: opacity, transform;
}
.reveal-hero.is-visible{
  opacity: 1;
  transform: none;
}

/* Stagger nhẹ cho từng phần tử con */
.reveal-hero .about-eyebrow,
.reveal-hero .about-title,
.reveal-hero .about-brand,
.reveal-hero .about-lead{
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .7s ease, transform .7s cubic-bezier(.22,.61,.36,1);
  will-change: opacity, transform;
}

.reveal-hero.is-visible .about-eyebrow{ opacity:1; transform:none; transition-delay: 80ms; }
.reveal-hero.is-visible .about-title  { opacity:1; transform:none; transition-delay:160ms; }
.reveal-hero.is-visible .about-brand  { opacity:1; transform:none; transition-delay:240ms; }
.reveal-hero.is-visible .about-lead   { opacity:1; transform:none; transition-delay:320ms; }

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  .reveal-hero,
  .reveal-hero .about-eyebrow,
  .reveal-hero .about-title,
  .reveal-hero .about-brand,
  .reveal-hero .about-lead{
    transition: none !important;
    transform: none !important;
    opacity: 1 !important;
  }
}

@media (min-width: 320px) and (max-width: 575.98px){
  .tp-card--tr .tp-tail-icon{ 
    left: -2px;
    display: none !important;
  }

  .tp-card--br .tp-tail-icon {
    left: -4px;
    display: none !important;
  }

  .tp-card--tl .tp-tail-icon, .tp-card--bl .tp-tail-icon{
    right: -4px;
    display: none !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; }    


/* ABOUT: equal height + center on ≥992px */
/* @media (min-width: 992px){
  .tp-domains-info{
 margin-top: -159px !important
  }

} */

@media (min-width: 992px){
  .tp-domains-info{
    margin-top: clamp(-167px, -14vw, -120px) !important;
  }
}

@media (min-width: 992px) and (max-width: 1023px){
  .tp-domains-info{ 
   margin-top: clamp(-167px, -14vw, -120px) !important;
   }
}

@media (min-width: 1023px) and (max-width: 1199.98px){
  .tp-domains-info{ 
   margin-top: clamp(-167px, 113vw, -21px) !important;
   }
}

@media (min-width: 1200px) and (max-width: 1439.98px){
  .tp-domains-info{ 
   margin-top: clamp(-92px, -14vw, -120px) !important;
  }
}

.page-banner-section::before,
.page-banner-section::after{
  content:none !important;
  background:none !important;
  backdrop-filter:none !important;
}

.section.page-banner-section::before,
.section.page-banner-section::after,
.page-banner-section::before,
.page-banner-section::after{
  content: none !important;
  background: none !important;
  filter: none !important;
  backdrop-filter: none !important;
  box-shadow: none !important;
  -webkit-mask-image: none !important;
          mask-image: none !important;
}