/* effects.css — lớp hiệu ứng chung cho các TRANG CON (không load trên trang chủ)
   Chỉ tác động các section có id bắt đầu bằng svc- / hub- / gt- / lh- / nt-
   (các id tự đặt riêng cho trang con), không đụng tới section trang chủ được include lại. */

:root{
  --ts-ease: cubic-bezier(0.22,1,0.36,1);
  --ts-ease-soft: cubic-bezier(0.16,1,0.3,1);
}

html{scroll-behavior:smooth}
::selection{background:#ff6600;color:#fff}

@keyframes tsFadeUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}
@keyframes tsPulseDot{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.7);opacity:0.55}}
@keyframes tsKenBurns{from{transform:scale(1.06)}to{transform:scale(1.14)}}
@keyframes tsShine{from{transform:translateX(-120%) skewX(-15deg)}to{transform:translateX(220%) skewX(-15deg)}}

/* ===== Hero: fade lên ngay khi tải, ảnh nền zoom chậm liên tục ===== */
:is([id$="-hero"]){animation:tsFadeUp .8s var(--ts-ease-soft) both}
:is([id$="-hero"]) .svc-hero-bg img{animation:tsKenBurns 14s ease-in-out infinite alternate}

/* ===== Các section còn lại: hiện dần khi cuộn tới ===== */
:is([id^="svc-"],[id^="hub-"],[id^="gt-"],[id^="lh-"],[id^="nt-"]):not([id$="-hero"]){
  opacity:0;transform:translateY(26px);
  transition:opacity .7s var(--ts-ease-soft),transform .7s var(--ts-ease-soft);
}
:is([id^="svc-"],[id^="hub-"],[id^="gt-"],[id^="lh-"],[id^="nt-"]).ts-in{opacity:1;transform:translateY(0)}
/* Không có JS / trình duyệt cũ: vẫn hiện bình thường sau 1.2s để không mất nội dung */
.no-ts-js :is([id^="svc-"],[id^="hub-"],[id^="gt-"],[id^="lh-"],[id^="nt-"]){opacity:1!important;transform:none!important}

/* ===== Lưới / danh sách: các phần tử con hiện so le (stagger) ===== */
:is([id^="svc-"],[id^="hub-"],[id^="gt-"],[id^="lh-"],[id^="nt-"]) [class*="-grid"] > *,
:is([id^="svc-"],[id^="hub-"],[id^="gt-"],[id^="lh-"],[id^="nt-"]) [class*="-list"] > *{
  opacity:0;transform:translateY(20px) scale(.97);
  transition:opacity .55s var(--ts-ease),transform .55s var(--ts-ease);
}
:is([id^="svc-"],[id^="hub-"],[id^="gt-"],[id^="lh-"],[id^="nt-"]).ts-in [class*="-grid"] > *,
:is([id^="svc-"],[id^="hub-"],[id^="gt-"],[id^="lh-"],[id^="nt-"]).ts-in [class*="-list"] > *{
  opacity:1;transform:translateY(0) scale(1);
}
:is([id^="svc-"],[id^="hub-"],[id^="gt-"],[id^="lh-"],[id^="nt-"]) [class*="-grid"] > *:nth-child(1),[id^="svc-"] [class*="-list"] > *:nth-child(1){transition-delay:.02s}
:is([id^="svc-"],[id^="hub-"],[id^="gt-"],[id^="lh-"],[id^="nt-"]) [class*="-grid"] > *:nth-child(2),[id^="svc-"] [class*="-list"] > *:nth-child(2){transition-delay:.07s}
:is([id^="svc-"],[id^="hub-"],[id^="gt-"],[id^="lh-"],[id^="nt-"]) [class*="-grid"] > *:nth-child(3),[id^="svc-"] [class*="-list"] > *:nth-child(3){transition-delay:.12s}
:is([id^="svc-"],[id^="hub-"],[id^="gt-"],[id^="lh-"],[id^="nt-"]) [class*="-grid"] > *:nth-child(4),[id^="svc-"] [class*="-list"] > *:nth-child(4){transition-delay:.17s}
:is([id^="svc-"],[id^="hub-"],[id^="gt-"],[id^="lh-"],[id^="nt-"]) [class*="-grid"] > *:nth-child(5),[id^="svc-"] [class*="-list"] > *:nth-child(5){transition-delay:.22s}
:is([id^="svc-"],[id^="hub-"],[id^="gt-"],[id^="lh-"],[id^="nt-"]) [class*="-grid"] > *:nth-child(6),[id^="svc-"] [class*="-list"] > *:nth-child(6){transition-delay:.27s}
:is([id^="svc-"],[id^="hub-"],[id^="gt-"],[id^="lh-"],[id^="nt-"]) [class*="-grid"] > *:nth-child(n+7){transition-delay:.32s}

/* ===== Thẻ / card: nhấc lên mượt, viền chuyển cam, đổ bóng sâu hơn ===== */
:is([id^="svc-"],[id^="hub-"],[id^="gt-"],[id^="lh-"],[id^="nt-"]) [class*="-card"]{
  transition:transform .4s var(--ts-ease),box-shadow .4s var(--ts-ease),border-color .35s ease,background .35s ease;
  will-change:transform;
}
:is([id^="svc-"],[id^="hub-"],[id^="gt-"],[id^="lh-"],[id^="nt-"]) [class*="-card"]:hover{
  transform:translateY(-7px) scale(1.012);
  box-shadow:0 26px 54px -18px rgba(17,17,17,0.22),0 4px 14px -4px rgba(255,102,0,0.12);
  border-color:rgba(255,102,0,0.35)!important;
}
:is([id^="svc-"],[id^="hub-"],[id^="gt-"],[id^="lh-"],[id^="nt-"]) [class*="-card"] img{
  transition:transform .6s var(--ts-ease);
}
:is([id^="svc-"],[id^="hub-"],[id^="gt-"],[id^="lh-"],[id^="nt-"]) [class*="-card"]:hover img{
  transform:scale(1.06);
}

/* ===== Gallery ảnh: zoom nhẹ + sáng lên khi hover ===== */
:is([id^="svc-"],[id^="hub-"],[id^="gt-"],[id^="lh-"],[id^="nt-"]) [class*="-gallery-grid"] img{
  transition:transform .55s var(--ts-ease),filter .35s ease;
  cursor:pointer;
}
:is([id^="svc-"],[id^="hub-"],[id^="gt-"],[id^="lh-"],[id^="nt-"]) [class*="-gallery-grid"] img:hover{
  transform:scale(1.05);
  filter:brightness(1.04) saturate(1.08);
}

/* ===== Badge: chấm cam nhấp nháy nhẹ ===== */
:is([id^="svc-"],[id^="hub-"],[id^="gt-"],[id^="lh-"],[id^="nt-"]) [class*="-badge"] span:first-child{
  display:inline-block;animation:tsPulseDot 2s ease-in-out infinite;
}

/* ===== Nút CTA cam: hiệu ứng ánh sáng quét qua khi hover ===== */
:is([id^="svc-"],[id^="hub-"],[id^="gt-"],[id^="lh-"],[id^="nt-"]) .svc-btn,
:is([id^="svc-"],[id^="hub-"],[id^="gt-"],[id^="lh-"],[id^="nt-"]) .lh-submit{
  position:relative;overflow:hidden;
}
:is([id^="svc-"],[id^="hub-"],[id^="gt-"],[id^="lh-"],[id^="nt-"]) .svc-btn::after,
:is([id^="svc-"],[id^="hub-"],[id^="gt-"],[id^="lh-"],[id^="nt-"]) .lh-submit::after{
  content:"";position:absolute;top:0;left:0;width:40%;height:100%;
  background:linear-gradient(120deg,transparent,rgba(255,255,255,0.45),transparent);
  transform:translateX(-120%) skewX(-15deg);pointer-events:none;
}
:is([id^="svc-"],[id^="hub-"],[id^="gt-"],[id^="lh-"],[id^="nt-"]) .svc-btn:hover::after,
:is([id^="svc-"],[id^="hub-"],[id^="gt-"],[id^="lh-"],[id^="nt-"]) .lh-submit:hover::after{
  animation:tsShine .9s ease forwards;
}
:is([id^="svc-"],[id^="hub-"],[id^="gt-"],[id^="lh-"],[id^="nt-"]) .svc-btn-outline{
  transition:transform .3s var(--ts-ease),box-shadow .3s var(--ts-ease);
}
:is([id^="svc-"],[id^="hub-"],[id^="gt-"],[id^="lh-"],[id^="nt-"]) .svc-btn-outline:hover{
  transform:translateY(-2px);
}

/* ===== CTA đen cuối trang: quầng sáng cam mềm phía sau ===== */
:is([id^="svc-"],[id^="hub-"],[id^="gt-"],[id^="lh-"],[id^="nt-"]) .svc-cta-card{
  position:relative;overflow:hidden;
}
:is([id^="svc-"],[id^="hub-"],[id^="gt-"],[id^="lh-"],[id^="nt-"]) .svc-cta-card::before{
  content:"";position:absolute;width:340px;height:340px;border-radius:50%;
  background:radial-gradient(circle,rgba(255,102,0,0.35) 0%,transparent 70%);
  top:-140px;right:-100px;pointer-events:none;
  animation:tsGlowDrift 8s ease-in-out infinite alternate;
}
@keyframes tsGlowDrift{from{transform:translate(0,0)}to{transform:translate(-30px,30px)}}

/* ===== Số thứ tự / icon tròn trong card: xoay nhẹ khi hover card cha ===== */
:is([id^="svc-"],[id^="hub-"],[id^="gt-"],[id^="lh-"],[id^="nt-"]) [class*="-card"]:hover [class*="-icon"],
:is([id^="svc-"],[id^="hub-"],[id^="gt-"],[id^="lh-"],[id^="nt-"]) [class*="-card"]:hover .kt-icon,
:is([id^="svc-"],[id^="hub-"],[id^="gt-"],[id^="lh-"],[id^="nt-"]) [class*="-card"]:hover .gp-icon{
  transform:scale(1.1) rotate(-6deg);
}
:is([id^="svc-"],[id^="hub-"],[id^="gt-"],[id^="lh-"],[id^="nt-"]) [class*="-icon"]{
  transition:transform .35s var(--ts-ease);
}

/* ===== Mũi tên "Xem chi tiết →": trượt nhẹ khi hover ===== */
:is([id^="svc-"],[id^="hub-"],[id^="gt-"],[id^="lh-"],[id^="nt-"]) [class*="-card"] .arrow,
:is([id^="svc-"],[id^="hub-"],[id^="gt-"],[id^="lh-"],[id^="nt-"]) [class*="-card-cta"]{
  transition:transform .3s var(--ts-ease),background .25s ease;
}
:is([id^="svc-"],[id^="hub-"],[id^="gt-"],[id^="lh-"],[id^="nt-"]) [class*="-card"]:hover .arrow{
  transform:translateX(5px);
}

/* ===== Feature/why item: viền trái cam mọc ra khi hover ===== */
:is([id^="svc-"],[id^="hub-"],[id^="gt-"],[id^="lh-"],[id^="nt-"]) .svc-feature,
:is([id^="svc-"],[id^="hub-"],[id^="gt-"],[id^="lh-"],[id^="nt-"]) [class*="-item"]{
  position:relative;transition:transform .3s var(--ts-ease),box-shadow .3s var(--ts-ease),background .3s ease;
}
:is([id^="svc-"],[id^="hub-"],[id^="gt-"],[id^="lh-"],[id^="nt-"]) .svc-feature::before{
  content:"";position:absolute;left:0;top:12px;bottom:12px;width:3px;border-radius:3px;
  background:#ff6600;transform:scaleY(0);transform-origin:top;transition:transform .35s var(--ts-ease);
}
:is([id^="svc-"],[id^="hub-"],[id^="gt-"],[id^="lh-"],[id^="nt-"]) .svc-feature:hover{
  transform:translateX(4px);background:#fff!important;
}
:is([id^="svc-"],[id^="hub-"],[id^="gt-"],[id^="lh-"],[id^="nt-"]) .svc-feature:hover::before{
  transform:scaleY(1);
}

/* ===== Tag / pill nhỏ: nảy nhẹ khi hover ===== */
:is([id^="svc-"],[id^="hub-"],[id^="gt-"],[id^="lh-"],[id^="nt-"]) [class*="-tag"]:not(a),
:is([id^="svc-"],[id^="hub-"],[id^="gt-"],[id^="lh-"],[id^="nt-"]) .model-tag,
:is([id^="svc-"],[id^="hub-"],[id^="gt-"],[id^="lh-"],[id^="nt-"]) .lineup-model,
:is([id^="svc-"],[id^="hub-"],[id^="gt-"],[id^="lh-"],[id^="nt-"]) .lineup-mat{
  transition:transform .25s var(--ts-ease),background .25s ease,color .25s ease,border-color .25s ease;
}
:is([id^="svc-"],[id^="hub-"],[id^="gt-"],[id^="lh-"],[id^="nt-"]) [class*="-tag"]:not(a):hover,
:is([id^="svc-"],[id^="hub-"],[id^="gt-"],[id^="lh-"],[id^="nt-"]) .model-tag:hover,
:is([id^="svc-"],[id^="hub-"],[id^="gt-"],[id^="lh-"],[id^="nt-"]) .lineup-model:hover,
:is([id^="svc-"],[id^="hub-"],[id^="gt-"],[id^="lh-"],[id^="nt-"]) .lineup-mat:hover{
  transform:translateY(-2px);
  background:#ff6600!important;color:#fff!important;border-color:#ff6600!important;
}

/* ===== Bảng thông số kỹ thuật: hàng sáng lên khi hover ===== */
:is([id^="svc-"],[id^="hub-"],[id^="gt-"],[id^="lh-"],[id^="nt-"]) .specs-table tr:hover td{
  background:#fff6ee;
}
:is([id^="svc-"],[id^="hub-"],[id^="gt-"],[id^="lh-"],[id^="nt-"]) .specs-table td{
  transition:background .2s ease;
}

/* ===== Giảm chuyển động cho người dùng yêu cầu (accessibility) ===== */
@media (prefers-reduced-motion: reduce){
  :is([id^="svc-"],[id^="hub-"],[id^="gt-"],[id^="lh-"],[id^="nt-"]),
  :is([id^="svc-"],[id^="hub-"],[id^="gt-"],[id^="lh-"],[id^="nt-"]) *{
    animation-duration:0.01ms!important;transition-duration:0.01ms!important;
  }
  :is([id^="svc-"],[id^="hub-"],[id^="gt-"],[id^="lh-"],[id^="nt-"]){opacity:1!important;transform:none!important}
  :is([id^="svc-"],[id^="hub-"],[id^="gt-"],[id^="lh-"],[id^="nt-"]) [class*="-grid"] > *,
  :is([id^="svc-"],[id^="hub-"],[id^="gt-"],[id^="lh-"],[id^="nt-"]) [class*="-list"] > *{opacity:1!important;transform:none!important}
}