/* ==========================================================================
   Jointech — giao diện tối kiểu "Invite" (ThemeXriver home-3), dùng cho trang Về chúng tôi.
   Phạm vi: chỉ tác động phần tử nằm trong section có class "jt-x".
   Hiệu ứng (do assets/js/jointech.js bật): chữ tiêu đề hiện dần từng ký tự, chữ viền lớn trôi ngang
   khi cuộn, khối hiện dần khi vào màn hình, số đếm tăng dần, đường kẻ tự vẽ.
   Không có JS hoặc bật "giảm chuyển động" thì mọi nội dung vẫn hiện đầy đủ.
   ========================================================================== */

.jt-x {
  --x-bg: #0C0E12;
  --x-bg-2: #14171C;
  --x-card: #181B21;
  --x-line: rgba(255, 255, 255, .09);
  --x-text: #FFFFFF;
  --x-muted: #A7AFBA;          /* 8.4:1 trên --x-bg */
  /* Màu nhấn: đỏ-cam, cùng họ với nút đỏ của site. Đổi sang vàng như mẫu: thêm class jt-x--gold */
  --x-a1: #FF7A1A;
  --x-a2: #E8000B;
  --x-accent: #FF4D1A;
  --x-grad: linear-gradient(90deg, var(--x-a1), var(--x-a2));
  color: var(--x-text);
  position: relative;
  overflow: hidden;
}
.jt-x.jt-x--gold, .jt-x--gold .jt-x { --x-a1: #E38A0D; --x-a2: #FCD20C; --x-accent: #F2A60C; }
.jt-x.dark p, .jt-x.dark li, .jt-x p, .jt-x li { color: var(--x-muted); }
.jt-x h1, .jt-x h2, .jt-x h3, .jt-x h4 { color: var(--x-text); }

/* Họa tiết: lưới chấm + đường lượn nét đứt (mô phỏng shape của mẫu, vẽ bằng CSS/SVG, không cần ảnh) */
.jt-x--dots::before {
  content: ""; position: absolute; right: -40px; top: 60px; width: 320px; height: 260px; pointer-events: none;
  background-image: radial-gradient(rgba(255,255,255,.12) 1.6px, transparent 1.7px);
  background-size: 18px 18px;
  -webkit-mask-image: radial-gradient(closest-side, #000 40%, transparent);
          mask-image: radial-gradient(closest-side, #000 40%, transparent);
}
.jt-x--wave::after {
  content: ""; position: absolute; left: -60px; bottom: 30px; width: 520px; height: 220px; pointer-events: none; opacity: .3;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 520 220'%3E%3Cpath d='M0 170 C90 210 140 60 230 80 S360 200 520 20' fill='none' stroke='%23FF4D1A' stroke-width='2' stroke-dasharray='2 9' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat;
}
.jt-x .section-content { position: relative; z-index: 1; }

/* ---------- Tiêu đề [jt_heading]: chữ viền lớn + thanh nhấn dọc + chữ hiện dần ---------- */
.jt-xh { position: relative; padding-top: 18px; margin-bottom: 8px; }
.jt-xh__ghost {
  position: absolute; left: -6px; top: -34px; z-index: 0; pointer-events: none; white-space: nowrap;
  font: 800 clamp(64px, 11vw, 150px)/1 var(--jt-f-head); letter-spacing: -.02em;
  color: transparent; -webkit-text-stroke: 1px rgba(255, 255, 255, .13);
  will-change: transform;
}
.jt-xh--center { text-align: center; }
.jt-xh--center .jt-xh__ghost { left: 50%; transform: translateX(-50%); }
.jt-xh__eyebrow {
  position: relative; z-index: 1; margin: 0 0 14px;
  font: 500 12px/1 var(--jt-f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--x-accent);
}
.jt-x.dark .jt-xh__eyebrow { color: var(--x-accent); }
.jt-x.dark .jt-xh__lead { color: var(--x-muted); }
.jt-xh__title {
  position: relative; z-index: 1; margin: 0 0 18px; padding-left: 26px;
  font: 800 clamp(30px, 3.6vw, 46px)/1.18 var(--jt-f-head); letter-spacing: -.01em; text-wrap: balance;
}
.jt-xh__title::before {           /* thanh nhấn dọc dày như mẫu */
  content: ""; position: absolute; left: 0; top: .1em; bottom: .1em; width: 8px; background: var(--x-grad);
  background-size: 100% 100%;
}
.jt-xh--center .jt-xh__title { padding-left: 0; }
.jt-xh--center .jt-xh__title::before { display: none; }
h1.jt-xh__title { font-size: clamp(34px, 4.4vw, 56px); }
.jt-xh__lead { position: relative; z-index: 1; font-size: 17px; line-height: 1.7; max-width: 58ch; margin: 0; }
.jt-xh--center .jt-xh__lead { margin: 0 auto; }

/* Chữ hiện dần từng ký tự (JS bọc từng ký tự trong .jt-ch) */
.jt-js .jt-x [data-jt-split] .jt-w { display: inline-block; white-space: nowrap; }
.jt-js .jt-x [data-jt-split] .jt-ch {
  display: inline-block; opacity: 0; transform: translateX(.55em);
  transition: opacity 520ms cubic-bezier(.2,.7,.2,1), transform 620ms cubic-bezier(.34,1.56,.64,1);
  transition-delay: calc(var(--i, 0) * 16ms);
}
.jt-js .jt-x [data-jt-split].is-in .jt-ch { opacity: 1; transform: none; }

/* Khối hiện dần khi vào màn hình (JS gắn .jt-rv + --d cho độ trễ so le) */
.jt-js .jt-x .jt-rv { opacity: 0; transform: translateY(28px); transition: opacity 700ms ease, transform 800ms cubic-bezier(.2,.7,.2,1); transition-delay: var(--d, 0ms); }
.jt-js .jt-x .jt-rv.is-in { opacity: 1; transform: none; }

/* ---------- Nút ---------- */
.jt-x .button.jt-btn--primary { background: var(--jt-c-cta); }
.jt-x .button.jt-btn.jt-btn--on-dark { border-color: rgba(255,255,255,.35); }
/* Nút tách: ô mũi tên tối + nhãn (giống "More Team members" của mẫu) */
.jt-x .button.jt-btn--split { padding-left: 64px; position: relative; overflow: hidden; }
.jt-x .button.jt-btn--split::before {
  content: "→"; position: absolute; left: 0; top: 0; bottom: 0; width: 48px; display: grid; place-items: center;
  background: rgba(0,0,0,.28); font-size: 18px; transition: width 300ms cubic-bezier(.2,.7,.2,1);
}
.jt-x .button.jt-btn--split:hover::before { width: 56px; }

/* ---------- Khung ảnh [jt_frame]: ảnh + khung viền lệch + chữ dọc + khối nhấn ---------- */
.jt-frame { position: relative; padding: 0 0 46px 46px; max-width: 520px; }
.jt-frame__box { position: absolute; left: 0; bottom: 0; width: 72%; height: 62%; border: 2px solid var(--x-line); border-right: 0; border-top: 0; }
.jt-frame__box::after { content: ""; position: absolute; left: -2px; bottom: -2px; width: 46%; height: 2px; background: var(--x-grad); }
.jt-frame__accent { position: absolute; right: -18px; bottom: 22px; width: 42%; height: 46%; background: var(--x-grad); z-index: 0; }
.jt-frame__img { position: relative; z-index: 1; aspect-ratio: 4 / 5; overflow: hidden; background: var(--x-bg-2); }
.jt-frame__img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 1.2s cubic-bezier(.2,.7,.2,1); }
.jt-frame:hover .jt-frame__img img { transform: scale(1.04); }
.jt-frame__label {
  position: absolute; left: 4px; bottom: 60px; z-index: 2; transform-origin: left bottom; transform: rotate(-90deg) translateY(100%);
  white-space: nowrap; font: 700 15px/1 var(--jt-f-head); letter-spacing: .04em; color: #fff;
}
.jt-frame__label::before { content: ""; display: inline-block; width: 10px; height: 10px; margin-right: 12px; background: var(--x-grad); transform: rotate(45deg); vertical-align: 1px; }
.jt-frame--wide .jt-frame__img { aspect-ratio: 16 / 10; }

/* ---------- Bộ đếm [jt_counter]: ô viền + icon vuông nhô lên mép trên ---------- */
.jt-counter {
  position: relative; text-align: center; margin: 28px 0 24px; padding: 54px 18px 26px;
  border: 1px solid var(--x-line); background: rgba(255,255,255,.015);
  transition: border-color 300ms ease, transform 300ms cubic-bezier(.2,.7,.2,1);
}
.jt-counter:hover { border-color: var(--x-accent); transform: translateY(-4px); }
.jt-counter__icon {
  position: absolute; left: 50%; top: -28px; transform: translateX(-50%);
  width: 56px; height: 56px; display: grid; place-items: center; background: var(--x-grad); color: #fff;
}
.jt-counter__icon svg { width: 28px; height: 28px; }
.jt-counter__num { display: block; font: 800 42px/1 var(--jt-f-head); color: #fff; font-variant-numeric: tabular-nums; }
.jt-counter__label { display: block; margin-top: 10px; font-size: 15px; color: var(--x-muted); }

/* ---------- Thẻ hệ thống trong trang tối: ảnh nền + lớp phủ tối + vạch nhấn đáy ---------- */
.jt-x .jt-card--image { background: var(--x-card); border: 0; border-radius: 0; color: #fff; min-height: 380px; }
.jt-x .jt-card--image::before { background: linear-gradient(180deg, rgba(12,14,18,.30) 0%, rgba(12,14,18,.55) 40%, rgba(12,14,18,.92) 75%, rgba(12,14,18,.97) 100%); }
.jt-x .jt-card--image::after { background: linear-gradient(180deg, rgba(12,14,18,.15) 0%, rgba(12,14,18,.45) 45%, rgba(12,14,18,.9) 100%); }
.jt-x .jt-card--image .jt-card__icon { width: 52px; height: 52px; border: 0; border-radius: 0; background: transparent; color: var(--x-accent); backdrop-filter: none; padding: 0; justify-content: start; }
.jt-x .jt-card--image .jt-card__icon svg { width: 44px; height: 44px; stroke-width: 1.2; }
.jt-x .jt-card--image .jt-card__code { color: var(--x-accent); }
.jt-x .jt-card--image .jt-card__title { color: #fff; font-size: 21px; font-weight: 700; }
.jt-x .jt-card--image .jt-card__text { color: rgba(255,255,255,.72); }
.jt-x .jt-card--image .jt-card__more { color: #fff; }
.jt-x .jt-card--image { box-shadow: inset 0 -4px 0 0 var(--x-accent); }
.jt-x .jt-card--image:hover { box-shadow: inset 0 -6px 0 0 var(--x-accent), 0 18px 40px -18px rgba(0,0,0,.8); transform: translateY(-6px); }
.jt-x .jt-card--image:hover .jt-card__title, .jt-x .jt-card--image:hover .jt-card__text { color: #fff; }
.jt-x .jt-card--image:hover .jt-card__code, .jt-x .jt-card--image:hover .jt-card__more { color: var(--x-accent); }

/* ---------- Danh sách phân hệ trong trang tối ---------- */
.jt-x .jt-modules ul { background: var(--x-line); border-color: var(--x-line); border-radius: 0; }
.jt-x.dark .jt-modules li, .jt-x .jt-modules li { background: var(--x-bg); color: #fff; position: relative; transition: background-color 250ms ease, padding-left 250ms ease; }
.jt-x .jt-modules li::before { color: var(--x-accent); }
.jt-x .jt-modules li::after { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--x-grad); transform: scaleY(0); transform-origin: bottom; transition: transform 250ms ease; }
.jt-x .jt-modules li:hover { background: var(--x-bg-2); padding-left: 26px; }
.jt-x .jt-modules li:hover::after { transform: scaleY(1); }

/* ---------- Danh sách giá trị [ux_text class="jt-xlist"]: đường kẻ tự vẽ như thanh kỹ năng của mẫu ---------- */
.jt-xlist ul { list-style: none; margin: 0; padding: 0; counter-reset: xl; }
.jt-xlist li {
  counter-increment: xl; position: relative; margin: 0; padding: 18px 0 20px 54px;
  font: 700 19px/1.35 var(--jt-f-head); color: #fff !important;
}
.jt-xlist li::before { content: counter(xl, decimal-leading-zero); position: absolute; left: 0; top: 22px; font: 500 12px var(--jt-f-mono); letter-spacing: .1em; color: var(--x-accent); }
.jt-xlist li::after {
  content: ""; position: absolute; left: 54px; right: 0; bottom: 0; height: 3px;
  background: linear-gradient(90deg, var(--x-accent) 0 10px, var(--x-line) 10px);
}
.jt-js .jt-x .jt-xlist li::after { transform: scaleX(0); transform-origin: left; transition: transform 1100ms cubic-bezier(.2,.7,.2,1); transition-delay: var(--d, 0ms); }
.jt-js .jt-x .jt-xlist li.is-in::after { transform: scaleX(1); }

/* ---------- Chip trong trang tối ---------- */
.jt-x.dark .jt-tags li, .jt-x .jt-tags li { border-radius: 0; background: transparent; border-color: rgba(255,255,255,.18); color: #fff; }
.jt-x.dark .jt-tags li:hover, .jt-x .jt-tags li:hover { background: var(--x-grad); border-color: transparent; color: #fff; }

/* ---------- Banner One Card trong trang tối ---------- */
.jt-x.jt-banner .section-bg-overlay {
  background: linear-gradient(90deg, rgba(12,14,18,.96) 0%, rgba(12,14,18,.86) 42%, rgba(12,14,18,.35) 78%, rgba(12,14,18,.15) 100%) !important;
}
@media (max-width: 849px) { .jt-x.jt-banner .section-bg-overlay { background: rgba(12,14,18,.86) !important; } }

/* ---------- Dải CTA: viền sáng hai bên như mẫu ---------- */
.jt-xcta { background: var(--x-bg-2) !important; }
.jt-xcta::before, .jt-xcta::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: 220px; pointer-events: none;
  background: radial-gradient(closest-side, rgba(255,77,26,.45), transparent); filter: blur(10px);
}
.jt-xcta::before { left: -110px; }
.jt-xcta::after { right: -110px; }
.jt-xcta .jt-xh__title { font-size: clamp(24px, 2.6vw, 34px); }

/* ---------- Responsive + giảm chuyển động ---------- */
@media (max-width: 849px) {
  .jt-xh__ghost { top: -18px; }
  .jt-frame { margin: 0 auto 24px; padding: 0 0 34px 34px; }
  .jt-x--dots::before, .jt-x--wave::after { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .jt-js .jt-x [data-jt-split] .jt-ch, .jt-js .jt-x .jt-rv, .jt-js .jt-x .jt-xlist li::after { opacity: 1 !important; transform: none !important; transition: none !important; }
  .jt-xh__ghost { transform: none !important; }
  .jt-counter, .jt-frame__img img, .jt-x .jt-card--image { transition: none !important; }
}