/* ==========================================================================
   STAGE — cảnh cuộn 3D (đi cùng js/stage.js + js/scenes/*.js)
   Mọi quy tắc nằm dưới html.st: tắt JS / ?nomotion / giảm chuyển động => bố cục cũ y nguyên
   ========================================================================== */

/* ---------- Lenis ---------- */
html.lenis, html.lenis body { height: auto; }
.lenis:not(.lenis-autoToggle).lenis-stopped { overflow: clip; }
.lenis [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-smooth iframe { pointer-events: none; }

/* ---------- khung ghim chung ---------- */
html.st .st-pin { height: calc((1 + var(--st-len, 1)) * 100vh); padding-block: 0; overflow: visible !important; }
html.st .st-sticky { position: sticky; top: 0; height: 100vh; overflow: hidden; contain: layout paint; }
html.st .st-gl { position: absolute; inset: 0; width: 100%; height: 100%; display: block; pointer-events: none; }
@media (max-width: 760px) {
  html.st .st-pin { height: calc((1 + var(--st-len, 1)) * 100svh); }
  html.st .st-sticky { height: 100svh; }
}
.st-dbg { position: fixed; left: 8px; bottom: 8px; z-index: 9999; margin: 0; padding: 8px 10px; font: 11px/1.4 ui-monospace, monospace; color: #0f0; background: rgba(0, 0, 0, .72); border-radius: 6px; pointer-events: none; white-space: pre; }

/* ==========================================================================
   ③ GIÁ TRỊ — 5 Thẻ Pha Lê 3D Tương Tác (Bento Accordion theo mẫu thiết kế)
   ========================================================================== */
html.st #gia-tri.vsc {
  position: relative;
  background: linear-gradient(180deg, #EDF3FF 0%, #F3F7FF 52%, #F5F8FF 100%);
  overflow: clip;
}
html.st #gia-tri.vsc::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(58% 52% at 24% 42%, rgb(47 140 255 / .08) 0%, transparent 72%),
    radial-gradient(50% 48% at 82% 65%, rgb(27 92 242 / .06) 0%, transparent 70%);
}
/* Ẩn danh sách cũ nhưng giữ nguyên 100% trong DOM cho SEO & trình đọc màn hình */
html.st #gia-tri.vsc .values {
  position: absolute !important; width: 1px !important; height: 1px !important;
  padding: 0 !important; margin: -1px !important; overflow: hidden !important;
  clip: rect(0 0 0 0) !important; white-space: nowrap !important; border: 0 !important;
  pointer-events: none !important;
}

/* Giữ nguyên 100% bố cục tiêu đề mặc định (.sec-head) của letuanviet.com, không chỉnh sửa */

/* Hàng 5 thẻ Pha Lê 3D */
html.st #gia-tri.vsc .vcards {
  --vc-open-w: 520px;
  --vc-col-w: 147px;
  --vc-enter: 1;
  position: relative; z-index: 2;
  width: 100%;
  display: flex; align-items: stretch;
  gap: clamp(14px, 1.18vw, 18px);
  height: clamp(525px, 64vh, 568px);
}

html.st #gia-tri.vsc .vcard {
  flex: 1 1 0%;
  min-width: 0;
  position: relative;
  border-radius: 26px;
  cursor: pointer;
  user-select: none;
  outline: none;
  transition: flex .68s cubic-bezier(.22, 1, .36, 1);
  will-change: flex;
}
html.st #gia-tri.vsc .vcard.is-active {
  flex: 3.45 1 0%;
  cursor: default;
}
html.st #gia-tri.vsc .vcard:focus-visible .vcard__inner {
  box-shadow: 0 0 0 3px #1B5CF2, 0 28px 60px -24px rgb(12 22 51 / .28);
}

/* Khung thẻ bên trong: bo góc sắc nét,5 thẻ luôn thẳng hàng ngang ở mép trên & dưới */
html.st #gia-tri.vsc .vcard__inner {
  position: relative;
  width: 100%; height: 100%;
  border-radius: inherit;
  overflow: hidden;
  isolation: isolate;
  background: #FFFFFF;
  border: 1px solid rgb(255 255 255 / .95);
  box-shadow:
    0 24px 54px -22px rgb(15 32 76 / .15),
    0 4px 16px -4px rgb(15 32 76 / .06),
    inset 0 1px 0 #FFFFFF;
  transform: translate3d(0, calc((1 - var(--vc-enter, 1)) * 18px), 0);
  transition: box-shadow .48s var(--ease), border-color .48s var(--ease);
}
html.st #gia-tri.vsc .vcard:not(.is-active) .vcard__inner {
  background: #20335A;
  border-color: rgb(225 236 255 / .88);
  box-shadow:
    0 22px 46px -20px rgb(16 32 72 / .24),
    inset 0 1px 0 rgb(255 255 255 / .78);
}
html.st #gia-tri.vsc .vcard.is-active .vcard__inner {
  border-color: #FFFFFF;
  box-shadow:
    0 30px 68px -24px rgb(16 40 98 / .18),
    0 10px 26px -12px rgb(27 92 242 / .09),
    inset 0 1px 0 #FFFFFF;
}

/* Lớp nền studio băng giá phía trên thẻ — khớp tông màu ảnh 3D */
html.st #gia-tri.vsc .vcard__sky {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: linear-gradient(180deg, #CFE0F9 0%, #DCE9FC 34%, #E9F2FE 62%, #F4F8FF 100%);
}

/* Sân khấu chứa vật thể 3D pha lê: giữ nguyên tỉ lệ gốc 4:3 (1448x1086) để nối gương phản chiếu 2 đầu 0% sai số */
html.st #gia-tri.vsc .vcard__stage {
  position: absolute;
  left: 50%; top: 0;
  width: var(--vc-open-w, 520px);
  aspect-ratio: 4 / 3;
  height: auto;
  z-index: 1;
  pointer-events: none;
  transform-origin: 50% 0%;
  transform: translate3d(calc(-50% + var(--cx, 0%)), var(--cy, 24px), 0) scale(var(--cs, .68));
  transition: transform .68s cubic-bezier(.22, 1, .36, 1);
  will-change: transform;
}
html.st #gia-tri.vsc .vcard.is-active .vcard__stage {
  transform: translate3d(-50%, var(--oy, 4px), 0) scale(1);
}
html.st #gia-tri.vsc .vcard__stage::after {
  content: "";
  position: absolute;
  inset: 74% -4% -6% -4%;
  pointer-events: none;
  background: linear-gradient(180deg, rgb(255 255 255 / 0) 0%, rgb(255 255 255 / .82) 55%, #FFFFFF 100%);
  opacity: 0;
  transition: opacity .45s ease;
}
html.st #gia-tri.vsc .vcard.is-active .vcard__stage::after {
  opacity: 1;
}

/* Chuyển động lơ lửng 3D + nghiêng khối pha lê theo chuột */
html.st #gia-tri.vsc .vcard__art {
  position: relative;
  width: 100%; height: 100%;
  transform-origin: 50% 48%;
  transform:
    translate3d(
      calc(var(--mx, 0) * -12px * var(--hk, 0)),
      calc(var(--my, 0) * -8px * var(--hk, 0) + var(--fy, 0px)),
      0
    )
    rotate(var(--fr, 0deg))
    scale(calc(var(--vs-open, 1.03) + var(--hk, 0) * .03));
  will-change: transform;
}
html.st #gia-tri.vsc .vcard__img {
  display: block;
  width: 100%; height: 100%;
  object-fit: fill;
  user-select: none;
  -webkit-user-drag: none;
}
html.st #gia-tri.vsc .vcard__img--top {
  position: absolute;
  left: 0; right: 0;
  top: 1px;
  height: 6%;
  object-fit: cover;
  object-position: 50% 0%;
  transform-origin: 50% 0%;
  transform: scaleY(-8);
  pointer-events: none;
}
html.st #gia-tri.vsc .vcard__img--refl {
  position: absolute;
  left: 0; right: 0;
  bottom: 1px;
  height: 14%;
  object-fit: cover;
  object-position: 50% 100%;
  transform-origin: 50% 100%;
  transform: scaleY(-6);
  pointer-events: none;
  transition: opacity .45s ease;
}
html.st #gia-tri.vsc .vcard.is-active .vcard__img--refl {
  opacity: 0;
}

/* Ánh xạ phản quang pha lê nhẹ khi di chuột */
html.st #gia-tri.vsc .vcard__glare {
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(
    40% 36% at calc(50% + var(--mx, 0) * 28%) calc(38% + var(--my, 0) * 22%),
    rgb(255 255 255 / .24) 0%,
    transparent 70%
  );
  mix-blend-mode: overlay;
  opacity: var(--hk, 0);
}

/* Lớp phủ chuyển sắc trong suốt ngả xanh ở nửa dưới các thẻ thu gọn:
   cho phép ánh phản chiếu xanh băng của bệ pha lê xuyên qua đúng chuẩn ảnh mẫu */
html.st #gia-tri.vsc .vcard__shade {
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: linear-gradient(
    180deg,
    rgb(72 110 184 / 0) 0%,
    rgb(72 110 184 / 0) 53%,
    rgb(76 112 184 / .18) 60%,
    rgb(64 96 164 / .38) 67%,
    rgb(52 80 138 / .58) 74%,
    rgb(41 63 110 / .76) 81%,
    rgb(32 50 90 / .89) 89%,
    rgb(28 44 80 / .96) 95%,
    #1E2F54 100%
  );
  opacity: 1;
  transition: opacity .52s cubic-bezier(.22, 1, .36, 1);
}
html.st #gia-tri.vsc .vcard.is-active .vcard__shade {
  opacity: 0;
}

/* Số thứ tự 01..05 góc trên bên trái: chữ số thuần túy gọn gàng, không viền tròn, màu xanh rõ nét */
html.st #gia-tri.vsc .vcard__num {
  position: absolute;
  top: 22px; left: 24px; z-index: 5;
  display: inline-block;
  font-family: var(--font);
  font-size: clamp(20px, 1.48vw, 24px);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.05em;
  font-variant-numeric: tabular-nums;
  background: linear-gradient(135deg, #0E8CE8 0%, #1B5CF2 52%, #153298 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: #1B5CF2;
  transition: transform .35s var(--ease), opacity .35s ease;
}
html.st #gia-tri.vsc .vcard:not(.is-active) .vcard__num {
  background: linear-gradient(135deg, #1078D8 0%, #1B5CF2 52%, #163298 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Nội dung khi thẻ thu gọn: chữ xoay dọc 2 dòng bên trái */
html.st #gia-tri.vsc .vcard__collapsed {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 48%;
  z-index: 4;
  padding: 16px 22px 24px 22px;
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
  pointer-events: none;
  opacity: 1;
  transform: translate3d(0, 0, 0);
  transition: opacity .36s cubic-bezier(.22, 1, .36, 1) .1s, transform .46s cubic-bezier(.22, 1, .36, 1) .08s;
}
html.st #gia-tri.vsc .vcard.is-active .vcard__collapsed {
  opacity: 0;
  transform: translate3d(0, 16px, 0);
  transition: opacity .2s ease, transform .26s ease;
}

html.st #gia-tri.vsc .vcard__vtitle {
  margin: 0;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  display: flex;
  flex-direction: column;
  gap: 3px;
  font-size: clamp(15.5px, 1.14vw, 17.5px);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -.015em;
  color: #FFFFFF;
  white-space: nowrap;
  text-shadow: 0 2px 12px rgb(5 12 32 / .42);
}
html.st #gia-tri.vsc .vcard__vtitle > span {
  display: block;
}

/* Nội dung khi thẻ bung mở: nền trắng tinh khiết, chữ căn đều 2 bên tự nhiên, không giãn chữ */
html.st #gia-tri.vsc .vcard__body {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 4;
  background: linear-gradient(
    180deg,
    rgb(255 255 255 / 0) 0%,
    rgb(255 255 255 / .88) 15%,
    #FFFFFF 30%,
    #FFFFFF 100%
  );
  padding-top: 28px;
  opacity: 0;
  transform: translate3d(0, 20px, 0);
  pointer-events: none;
  transition: opacity .22s ease, transform .28s ease;
}
html.st #gia-tri.vsc .vcard.is-active .vcard__body {
  opacity: 1;
  transform: translate3d(0, 0, 0);
  pointer-events: auto;
  transition:
    opacity .46s cubic-bezier(.22, 1, .36, 1) .14s,
    transform .54s cubic-bezier(.22, 1, .36, 1) .12s;
}

/* Khóa bề rộng .vcard__panel đúng bằng chiều rộng thẻ khi mở (--vc-open-w) để chữ không nhảy dòng */
html.st #gia-tri.vsc .vcard__panel {
  width: var(--vc-open-w, 540px);
  padding: clamp(8px, 1.2vh, 14px) clamp(24px, 2.2vw, 34px) clamp(20px, 2.5vh, 28px);
  display: grid;
  gap: clamp(10px, 1.3vh, 14px);
}

html.st #gia-tri.vsc .vcard__title {
  margin: 0;
  display: block;
  font-size: clamp(1.18rem, 1.52vw, 1.44rem);
  font-weight: 800;
  line-height: 1.24;
  letter-spacing: -.03em;
  color: #0C1633;
  white-space: nowrap;
}

html.st #gia-tri.vsc .vcard__desc {
  margin: 0;
  font-size: clamp(14px, .96vw, 15px);
  line-height: 1.64;
  color: #3B4764;
  text-align: justify;
  text-align-last: left;
  text-justify: inter-word;
  letter-spacing: normal;
  word-spacing: normal;
  hyphens: none;
  -webkit-hyphens: none;
}

html.st #gia-tri.vsc .vcard__divider {
  height: 1px;
  background: rgb(12 22 51 / .085);
  margin-block: 2px;
}

html.st #gia-tri.vsc .vcard__proof {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 14px;
  align-items: center;
}

html.st #gia-tri.vsc .vcard__badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 14px 2px 0;
  border-right: 1.5px solid rgb(27 92 242 / .24);
  background: none;
  color: #1B5CF2;
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: -.01em;
  line-height: 1.4;
  white-space: nowrap;
}

html.st #gia-tri.vsc .vcard__proof-txt {
  margin: 0;
  font-size: clamp(13.2px, .9vw, 14.2px);
  font-weight: 500;
  line-height: 1.56;
  color: #1A2542;
  text-align: justify;
  text-align-last: left;
  text-justify: inter-word;
  letter-spacing: normal;
  word-spacing: normal;
  hyphens: none;
  -webkit-hyphens: none;
}


/* ==========================================================================
   ⑤ QUY TRÌNH — video / chuỗi khung 3D tua theo cuộn + giao diện HTML/CSS thoáng đãng (js/scenes/process.js)
   Nền navy #021332 / #0C1633 · xanh thương hiệu #1B5CF2 · điểm sáng #7CB4FF / #BCD5FF · chữ #F5F8FF
   Bố cục 3 tầng tách bạch: Tiêu đề gọn phía trên · Giữa: Số 3D (trái/trên) + Thẻ kính mờ (phải/dưới) · Đáy: Thanh 6 bước
   ========================================================================== */
html.st #quy-trinh.pfx { background: #021332; }
html.st #quy-trinh.pfx .process__pin { height: 100%; }
html.st #quy-trinh.pfx .process__sticky {
  padding-top: 0; justify-content: flex-start;
  background: #021332;
}
/* Phim 3D phủ kín theo chiều cao, KHÔNG lớp phủ/vignette nào đè lên số (js/scenes/process.js thêm dải màu
   mép phải của phim cho phần dư màn rộng). Poster = khung trạm 01, hiện trong lúc phim đang tải. */
html.st .pfx-gl {
  position: absolute; inset: 0; z-index: 0; overflow: hidden;
  background: #01132F url("../assets/process/film/poster-01.webp?v=901") 0 0 / auto 100% no-repeat;
}
html.st .pfx-canvas {
  display: block; width: 100%; height: 100%;
  transition: opacity .35s ease;
}
html.st #quy-trinh.pfx .process__sticky > .container {
  position: relative; z-index: 1; height: 100%; display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  padding-top: clamp(74px, 7.8vh, 92px);
  padding-bottom: clamp(44px, 7vh, 80px);
  pointer-events: none;
  max-width: min(1480px, calc(100vw - 2 * clamp(28px, 4.5vw, 72px)));
}
html.st #quy-trinh.pfx .sec-head,
html.st #quy-trinh.pfx .pflow__rail,
html.st #quy-trinh.pfx .pstep.is-current { pointer-events: auto; }

/* Tầng 1: Tiêu đề & bộ đếm 01/06 */
html.st #quy-trinh.pfx .sec-head { margin-bottom: 0; }
html.st #quy-trinh.pfx .sec-head .h2 {
  position: relative;
  font-size: clamp(2rem, min(5vw, 9vh), 4.3rem) !important;
  line-height: 1.1; letter-spacing: -.045em;
  color: #F5F8FF;
  white-space: nowrap;
}
html.st #quy-trinh.pfx .sec-head .h2 .pword {
  display: inline-block;
  vertical-align: top;
}
html.st #quy-trinh.pfx .sec-head .h2 .pchar__in {
  display: inline-block;
  letter-spacing: 0;
  margin-right: -.042em;
  will-change: transform, opacity, filter;
  transform-origin: 50% 80%;
  backface-visibility: hidden;
  transition: none !important;
}
html.st #quy-trinh.pfx .sec-head .h2 .pword .pchar__in:last-child {
  margin-right: 0;
}
html.st #quy-trinh.pfx .sec-head .h2 .grad {
  background: linear-gradient(92deg, #A8D0FF 0%, #5B9CFF 48%, #1B5CF2 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
html.st #quy-trinh.pfx .process__count {
  display: inline-flex; align-items: baseline;
  font-size: clamp(1.6rem, 3vw, 2.6rem); font-weight: 800;
  letter-spacing: -.05em; color: #F5F8FF; line-height: 1;
}
html.st #quy-trinh.pfx .process__count-reel {
  display: inline-block; height: 1.06em; overflow: hidden;
  vertical-align: baseline; position: relative;
}
html.st #quy-trinh.pfx .process__count-track {
  display: flex; flex-direction: column; will-change: transform;
  transition: transform .52s cubic-bezier(.22, 1, .36, 1);
}
html.st #quy-trinh.pfx .process__count-track b {
  display: block; height: 1.06em; line-height: 1.06em;
  font-weight: 800; text-align: right;
}
html.st #quy-trinh.pfx .process__count small {
  font-size: .5em; font-weight: 700; color: #7CB4FF;
  margin-left: .18em; letter-spacing: 0;
}
html.st #quy-trinh.pfx .pflow { display: contents; }

/* Tầng 2: Khung thông tin — Luxury Obsidian & Sapphire Glass */
html.st #quy-trinh.pfx .pflow__stage {
  position: absolute; top: 0; bottom: 12.96%; right: var(--gutter);
  height: max-content; margin-block: auto;
  display: grid; min-height: 0;
  width: min(590px, 39.5vw);
  margin-right: 0;
  border-radius: 26px;
  isolation: isolate;
}
html.st #quy-trinh.pfx .pflow__stage::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: -2;
  background:
    radial-gradient(105% 75% at 12% 0%, rgb(118 174 255 / .22) 0%, rgb(27 92 242 / .09) 44%, transparent 72%),
    radial-gradient(85% 70% at 92% 100%, rgb(47 140 255 / .16) 0%, transparent 68%),
    linear-gradient(162deg, rgb(14 28 64 / .95) 0%, rgb(6 14 36 / .97) 52%, rgb(4 8 22 / .99) 100%);
  box-shadow:
    0 40px 90px -32px rgb(1 4 14 / .92),
    0 18px 42px -24px rgb(16 52 140 / .35),
    inset 0 1px 0 rgb(255 255 255 / .22),
    inset 0 -1px 0 rgb(138 184 255 / .08);
}
html.st #quy-trinh.pfx .pflow__stage::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none; z-index: -1;
  background: linear-gradient(142deg,
    rgb(235 244 255 / .52) 0%,
    rgb(142 192 255 / .28) 26%,
    rgb(120 165 235 / .08) 58%,
    rgb(138 186 255 / .24) 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
}
html.st #quy-trinh.pfx .pstep {
  position: relative; inset: auto; grid-area: 1 / 1; display: block;
  transition: none; will-change: opacity, transform;
}
html.st #quy-trinh.pfx .pstep__n,
html.st #quy-trinh.pfx .pstep__k { display: none !important; }
html.st #quy-trinh.pfx .pstep__body {
  display: grid; gap: clamp(12px, 1.65vh, 18px);
  padding: clamp(30px, 4.2vh, 44px) clamp(32px, 2.8vw, 46px);
  background: none; border: 0; box-shadow: none;
}
html.st #quy-trinh.pfx .pstep__title {
  font-size: clamp(1.68rem, 2.3vw, 2.38rem); font-weight: 800;
  line-height: 1.15; letter-spacing: -.034em;
  background: linear-gradient(102deg, #FFFFFF 0%, #F4F8FF 52%, #B2CEFF 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  white-space: nowrap;
}
html.st #quy-trinh.pfx .pstep .desc {
  max-width: none; font-size: clamp(14.5px, 1.02vw, 16px);
  line-height: 1.7; color: rgb(226 236 252 / .82);
  text-align: justify; text-align-last: left;
}
html.st #quy-trinh.pfx .pstep__out {
  position: relative;
  display: grid; gap: 6px; justify-self: stretch;
  margin-top: clamp(6px, 1vh, 12px); padding: clamp(16px, 2.2vh, 22px) 0 0;
  border: 0; border-radius: 0; white-space: normal;
  background: none; box-shadow: none;
  font-size: clamp(15px, 1.08vw, 17px); font-weight: 700; line-height: 1.38; color: #F5F8FF;
}
html.st #quy-trinh.pfx .pstep__out::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px;
  background: linear-gradient(90deg, rgb(178 208 255 / .42) 0%, rgb(142 184 250 / .16) 55%, transparent 100%);
}
html.st #quy-trinh.pfx .pstep__out-k {
  font-size: 11px; font-weight: 700; letter-spacing: .16em;
  text-transform: uppercase;
  background: linear-gradient(90deg, #8EC5FF 0%, #C6DDFF 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
html.st #quy-trinh.pfx .pstep__out-v { display: block; color: #F5F8FF; }
html.st #quy-trinh.pfx .pstep__out-v::first-letter { text-transform: uppercase; }

/* Tầng 3: Thanh tiến trình 6 bước 01–06 gọn dưới đáy */
html.st #quy-trinh.pfx .pflow__rail {
  --rp: clamp(72px, 6.8vw, 118px);
  grid-row: 3; margin: 0; padding-inline: var(--rp);
}
html.st #quy-trinh.pfx .pflow__line {
  top: 6px;
  left: calc(var(--rp) + (100% - 2 * var(--rp)) / 12);
  right: calc(var(--rp) + (100% - 2 * var(--rp)) / 12);
  background: rgb(188 213 255 / .2);
}
html.st #quy-trinh.pfx .pflow__line i {
  background: linear-gradient(90deg, #1B5CF2, #4F8BFF 60%, #8CC0FF);
  box-shadow: 0 0 12px rgb(27 92 242 / .65);
}
html.st #quy-trinh.pfx .pflow__line b {
  display: block; position: absolute; top: 50%;
  left: calc(var(--pp, 0) * 100%);
  width: 7px; height: 7px; margin: 0; border-radius: 50%;
  background: #DCE8FF; transform: translate(-50%, -50%);
  box-shadow: 0 0 10px 2px rgb(124 180 255 / .88);
  pointer-events: none;
}
html.st #quy-trinh.pfx .pnode {
  gap: 5px;
  color: rgb(225 236 255 / .5); transition: color .28s ease;
}
html.st #quy-trinh.pfx .pnode:hover { color: rgb(245 248 255 / .88); }
html.st #quy-trinh.pfx .pnode__dot {
  width: 14px; height: 14px;
  background: #06102A; border-color: rgb(188 213 255 / .42);
  transition: background .28s, border-color .28s, transform .32s var(--ease), box-shadow .32s;
}
html.st #quy-trinh.pfx .pnode__n { font-size: 11.5px; font-weight: 700; letter-spacing: .05em; }
html.st #quy-trinh.pfx .pnode__t { font-size: 13px; font-weight: 700; }
html.st #quy-trinh.pfx .pnode.is-on { color: rgb(245 248 255 / .9); }
html.st #quy-trinh.pfx .pnode.is-on .pnode__dot {
  background: #DCE8FF; border-color: #DCE8FF;
  box-shadow: 0 0 8px rgb(188 213 255 / .42);
}
html.st #quy-trinh.pfx .pnode.is-current { color: #F5F8FF; }
html.st #quy-trinh.pfx .pnode.is-current .pnode__dot {
  background: #1B5CF2; border-color: #9CC8FF; transform: scale(1.36);
  box-shadow: 0 0 0 5px rgb(27 92 242 / .3), 0 0 20px rgb(124 180 255 / .85);
}
html.st #quy-trinh.pfx .pnode:focus-visible {
  outline: 2px solid #7CB4FF; outline-offset: 6px; border-radius: 8px;
}

/* Quy trình 3D trên máy tính bảng & điện thoại (≤ 1024px) */
@media (max-width: 1024px) {
  html.st .pfx-gl {
    background: #021332 url("../assets/process/seq/tall/000.webp?v=802") 50% 24% / min(78vw, 340px) auto no-repeat;
  }
  html.st #quy-trinh.pfx .process__sticky > .container {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    max-width: 100%;
    padding-top: clamp(64px, 7.8svh, 80px);
    padding-bottom: clamp(16px, 2.4svh, 26px);
  }
  html.st #quy-trinh.pfx .sec-head {
    display: flex;
    flex-direction: row-reverse;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    margin-bottom: 0;
  }
  html.st #quy-trinh.pfx .sec-head__top {
    margin: 0;
    flex: none;
  }
  html.st #quy-trinh.pfx .sec-head .h2 {
    font-size: clamp(1.38rem, 5.4vw, 2.15rem) !important;
    min-width: 0;
    flex: 1 1 auto;
  }
  html.st #quy-trinh.pfx .process__count {
    font-size: clamp(1.25rem, 4.2vw, 1.65rem);
  }
  html.st #quy-trinh.pfx .pflow__stage {
    position: relative;
    top: auto;
    bottom: auto;
    right: auto;
    width: 100%;
    margin: auto 0 12px 0;
    border-radius: 20px;
  }
  html.st #quy-trinh.pfx .pstep__body {
    padding: clamp(16px, 2.3svh, 24px) clamp(18px, 4.5vw, 26px);
    gap: clamp(8px, 1.15svh, 12px);
  }
  html.st #quy-trinh.pfx .pstep__title {
    font-size: clamp(1.18rem, 4.6vw, 1.56rem);
    white-space: nowrap !important;
    overflow: hidden;
    text-overflow: clip;
  }
  html.st #quy-trinh.pfx .pstep .desc {
    font-size: clamp(12.8px, 3.35vw, 14.5px);
    line-height: 1.56;
    text-align: justify;
    text-align-last: left;
  }
  html.st #quy-trinh.pfx .pstep__out {
    margin-top: 2px;
    padding-top: 10px;
    gap: 3px;
    font-size: clamp(12.8px, 3.35vw, 14.5px);
  }
  html.st #quy-trinh.pfx .pstep__out-k {
    font-size: 9.8px;
  }
  html.st #quy-trinh.pfx .pflow__rail {
    --rp: 6px;
    display: grid !important;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    width: 100%;
    padding-inline: var(--rp);
    margin: 0;
  }
  html.st #quy-trinh.pfx .pnode {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 0;
    background: none;
    border: 0;
  }
  html.st #quy-trinh.pfx .pnode__dot {
    width: 11px;
    height: 11px;
  }
  html.st #quy-trinh.pfx .pnode__n {
    font-size: 10.5px;
  }
  html.st #quy-trinh.pfx .pnode__t {
    font-size: 11px;
    white-space: nowrap;
  }
}

@media (max-width: 640px) {
  html.st #quy-trinh.pfx .pnode__t {
    display: none;
  }
}

/* ==========================================================================
   ⑥ DỰ ÁN — giữ nguyên giao diện & chuyển động gốc như letuanviet.com
   ========================================================================== */

/* section được ghim: lề trên/dưới của section chuyển vào khung ghim */
html.st .section.st-pin > .st-sticky { padding-block: clamp(84px, 11vh, 130px) clamp(40px, 6vh, 72px); }
html.st #gia-tri.st-pin > .st-sticky, html.st #du-an.st-pin > .st-sticky { padding: 0; }

/* ==========================================================================
   ① ĐÔI NÉT VỀ TÔI — giữ nguyên giao diện & chuyển động gốc như letuanviet.com
   ========================================================================== */

/* ==========================================================================
   ④ NĂNG LỰC CHUYÊN MÔN — Sân khấu Cờ Vua Pha Lê 3D & 7 Năng Lực (Luxury Crystal Stage)
   ========================================================================== */
#nang-luc {
  position: relative;
  padding-top: 0;
  padding-bottom: clamp(84px, 9.5vw, 136px);
  background: linear-gradient(
    180deg,
    #F4FAFE 0%,
    #F4FAFE 32%,
    #EEF6FE 46%,
    #EAF3FE 54%,
    #F2F8FE 66%,
    #F5FAFE 100%
  );
  overflow: clip;
}

#nang-luc .skx-pin {
  position: relative;
  width: 100%;
}

html.st #nang-luc .skx-pin.st-pin > .st-sticky {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-block: clamp(58px, 6.6vh, 86px) clamp(26px, 3.6vh, 42px);
  background: linear-gradient(
    180deg,
    #F4FAFE 0%,
    #F4FAFE 30%,
    #EEF6FE 44%,
    #EAF3FE 52%,
    #F2F8FE 62%,
    #F5FAFE 74%,
    #F5FAFE 100%
  );
}

#nang-luc:not(:has(.st-pin)) .skx-pin {
  padding-top: clamp(84px, 9.5vw, 132px);
}

#nang-luc .skx-shell {
  position: relative;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

/* Giữ nguyên 100% tiêu đề và mô tả tiêu đề (.sec-head) của letuanviet.com */
#nang-luc .sec-head {
  position: relative;
  z-index: 4;
  margin-bottom: 0;
}

#nang-luc .skx {
  position: relative;
  z-index: 2;
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

/* Sân khấu Quân cờ pha lê + Từ khoá 3D (giữ nguyên 100% ảnh gốc đứng yên, không tách lớp hay dịch chuyển quân cờ) */
#nang-luc .skx__stage {
  position: relative;
  z-index: 2;
  width: min(100%, calc((100vh - 306px) * 1.96));
  aspect-ratio: 1672 / 941;
  margin-inline: auto;
  margin-top: clamp(-82px, -9vh, -38px);
  margin-bottom: clamp(-76px, -8.4vh, -34px);
  display: grid;
  place-items: center;
  pointer-events: none;
  user-select: none;
  /* Hoà tan nhẹ 4 mép ngoài ảnh vào nền studio để không có đường viền khung, giữ nguyên 100% toàn bộ quân cờ & chữ 3D */
  -webkit-mask-image:
    linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, 0.5) 0.4%, #000 1%, #000 99%, rgba(0, 0, 0, 0.5) 99.6%, transparent 100%),
    linear-gradient(180deg, transparent 0%, #000 4%, #000 90%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, 0.5) 0.4%, #000 1%, #000 99%, rgba(0, 0, 0, 0.5) 99.6%, transparent 100%),
    linear-gradient(180deg, transparent 0%, #000 4%, #000 90%, transparent 100%);
  mask-composite: intersect;
}

#nang-luc .skx__art {
  grid-area: 1 / 1;
  position: relative;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  visibility: hidden;
  will-change: opacity;
}

#nang-luc .skx__art.is-active {
  opacity: 1;
  visibility: visible;
}

#nang-luc .skx__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  user-select: none;
  -webkit-user-drag: none;
}

/* Tầng thông tin chi tiết + 4 đầu mục chuyên môn căn ngang hàng mô tả */
#nang-luc .skx__deck {
  position: relative;
  z-index: 5;
  display: block;
  margin-bottom: clamp(16px, 2.3vh, 26px);
}

#nang-luc .skx__panels {
  display: grid;
  min-width: 0;
}

#nang-luc .skx-panel {
  grid-area: 1 / 1;
  display: grid;
  grid-template-columns: minmax(340px, 44%) minmax(0, 1fr);
  grid-template-rows: auto auto;
  column-gap: clamp(32px, 4vw, 60px);
  row-gap: clamp(6px, 0.9vh, 10px);
  align-items: center;
  align-content: end;
  min-width: 0;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  will-change: transform, opacity;
}

#nang-luc .skx-panel.is-active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

#nang-luc .skx-panel__info {
  display: contents;
}

#nang-luc .skx-panel__title {
  grid-column: 1;
  grid-row: 1;
  margin: 0;
  font-size: clamp(1.62rem, 2.25vw, 2.18rem);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.032em;
  color: #071330;
  will-change: transform, opacity;
}

#nang-luc .skx-panel__desc {
  grid-column: 1;
  grid-row: 2;
  align-self: center;
  margin: 0;
  display: block;
  width: 100%;
  max-width: 500px;
  font-size: clamp(13px, 0.86vw, 13.8px);
  line-height: 1.58;
  color: #5A6984;
  text-align: justify;
  text-align-last: left;
  text-justify: inter-word;
  hyphens: none;
  -webkit-hyphens: none;
  overflow: visible;
  -webkit-line-clamp: unset;
  line-clamp: unset;
  will-change: transform, opacity;
}

/* Lưới 2×2 các hạng mục chuyên môn nằm ngang hàng mục mô tả, căn giữa, không lệch lên hàng tiêu đề */
#nang-luc .skx-checks {
  grid-column: 2;
  grid-row: 2;
  align-self: center;
  justify-self: center;
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, max-content);
  grid-template-rows: repeat(2, auto);
  grid-auto-flow: column;
  justify-content: start;
  row-gap: clamp(8px, 1.1vh, 12px);
  column-gap: clamp(36px, 4vw, 64px);
  min-width: 0;
}

#nang-luc .skx-checks li {
  display: flex;
  align-items: center;
  gap: 11px;
  font-size: clamp(13.2px, 0.94vw, 14.6px);
  font-weight: 500;
  line-height: 1.35;
  color: #0B1736;
  white-space: nowrap;
  will-change: transform, opacity;
}

#nang-luc .skx-check__ico {
  flex: none;
  width: 26px;
  height: 26px;
  border-radius: 8px;
  display: inline-grid;
  place-items: center;
  color: #1152EB;
  background: linear-gradient(145deg, #EAF2FF 0%, #DCE8FF 100%);
  border: 1px solid rgb(18 84 235 / 0.18);
  box-shadow:
    0 6px 14px -6px rgb(15 62 185 / 0.24),
    inset 0 1px 0 rgb(255 255 255 / 0.88);
  transition: transform 0.32s var(--ease), background 0.32s ease, color 0.32s ease, border-color 0.32s ease, box-shadow 0.32s ease;
}

#nang-luc .skx-check__ico svg {
  width: 14px;
  height: 14px;
  display: block;
}

#nang-luc .skx-checks li:hover .skx-check__ico {
  color: #FFFFFF;
  background: linear-gradient(145deg, #2575FC 0%, #0A4CE6 100%);
  border-color: #1254EB;
  transform: translateY(-1px);
  box-shadow:
    0 8px 18px -6px rgb(18 84 235 / 0.48),
    inset 0 1px 0 rgb(255 255 255 / 0.35);
}

/* Thanh 7 Tab năng lực phía dưới (01 Strategy .. 07 Team & Project) */
#nang-luc .skx-tabs {
  position: relative;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4px;
  padding-bottom: clamp(12px, 1.7vh, 18px);
  border-bottom: 1px solid rgb(15 32 76 / 0.09);
}

#nang-luc .skx-tabs__pill {
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 42px;
  border-radius: 999px;
  background: linear-gradient(180deg, #E7EFFF 0%, #DCE8FF 100%);
  border: 1px solid rgb(27 92 242 / 0.11);
  box-shadow:
    0 6px 18px -8px rgb(18 84 235 / 0.22),
    inset 0 1px 0 rgb(255 255 255 / 0.88);
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
  opacity: 0;
  transition:
    transform 0.58s cubic-bezier(0.22, 1, 0.36, 1),
    width 0.58s cubic-bezier(0.22, 1, 0.36, 1),
    opacity 0.25s ease;
  will-change: transform, width;
}

#nang-luc .skx-tabs__pill.is-ready {
  opacity: 1;
}

#nang-luc .skx-tabs__prog {
  position: absolute;
  left: 0;
  bottom: 0;
  height: 2px;
  width: 100%;
  background: linear-gradient(90deg, transparent 0%, rgb(18 84 235 / 0.45) 50%, #1254EB 100%);
  transform-origin: 0 50%;
  transform: scaleX(var(--tab-p, 1));
  opacity: 0.55;
}

#nang-luc .skx-tab {
  position: relative;
  z-index: 1;
  height: 42px;
  padding: 0 clamp(14px, 1.55vw, 24px);
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: transparent;
  border: 0;
  cursor: pointer;
  font-family: inherit;
  font-size: clamp(12.8px, 0.92vw, 14.2px);
  line-height: 1;
  color: #1D2B48;
  white-space: nowrap;
  transition: color 0.32s ease, transform 0.32s var(--ease);
}

#nang-luc .skx-tab:hover {
  color: #071330;
}

#nang-luc .skx-tab:focus-visible {
  outline: 2px solid #1254EB;
  outline-offset: 2px;
}

#nang-luc .skx-tab__n {
  font-size: clamp(11.8px, 0.84vw, 13px);
  font-weight: 600;
  color: #7E8CA8;
  font-variant-numeric: tabular-nums;
  transition: color 0.32s ease, font-weight 0.32s ease;
}

#nang-luc .skx-tab__t {
  font-weight: 500;
  color: #1D2B48;
  transition: color 0.32s ease, font-weight 0.32s ease;
}

#nang-luc .skx-tab.is-active .skx-tab__n {
  color: #0D58FF;
  font-weight: 800;
}

#nang-luc .skx-tab.is-active .skx-tab__t {
  color: #071330;
  font-weight: 700;
}

/* Khối Công cụ, dữ liệu & AI nằm ngay bên dưới trong cùng section #nang-luc */
#nang-luc .skx-tools-wrap {
  position: relative;
  z-index: 4;
  margin-top: clamp(28px, 3.8vh, 44px);
}

#nang-luc .skills--tools-only {
  display: block;
}

#nang-luc .skill--tools,
#nang-luc .skill--tools:hover {
  background:
    radial-gradient(75% 85% at 100% 100%, rgb(162 196 254 / 0.24) 0%, transparent 68%),
    radial-gradient(55% 70% at 18% 0%, rgb(29 63 138 / 0.32) 0%, transparent 65%),
    linear-gradient(132deg, #060A17 0%, #0B1530 28%, #132550 58%, #1C3670 82%, #26488E 100%);
  border-color: rgb(255 255 255 / 0.1);
}

#nang-luc .skill--tools .skill__ico svg {
  width: 22px;
  height: 22px;
  fill: none;
  color: #0B1633;
}

#nang-luc .sphere span {
  background: linear-gradient(135deg, rgb(7 12 28 / 0.95) 0%, rgb(15 28 62 / 0.93) 55%, rgb(25 47 98 / 0.91) 100%);
  border-color: rgb(245 248 255 / 0.18);
}

/* Tương thích màn hình máy tính bảng & điện thoại (≤ 1024px) */
@media (max-width: 1024px) {
  #nang-luc {
    padding-top: clamp(72px, 9.5vw, 112px);
    padding-bottom: clamp(64px, 8.5vw, 96px);
  }
  #nang-luc .skx-pin {
    padding-top: 0 !important;
  }
  #nang-luc .skx-shell {
    height: auto;
    gap: 12px;
  }
  #nang-luc .sec-head {
    margin-bottom: 4px;
  }
  #nang-luc .skx {
    flex: none;
    gap: 8px;
  }
  #nang-luc .skx__stage {
    width: min(100%, 660px);
    aspect-ratio: 1672 / 941;
    height: auto;
    margin-top: -6px;
    margin-bottom: -8px;
  }
  #nang-luc .skx__deck {
    margin-bottom: 14px;
  }
  #nang-luc .skx-panel {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    row-gap: 12px;
  }
  #nang-luc .skx-panel__title {
    font-size: clamp(1.26rem, 5vw, 1.62rem);
    white-space: nowrap !important;
    overflow: hidden;
    text-overflow: clip;
  }
  #nang-luc .skx-panel__desc {
    grid-column: 1;
    grid-row: auto;
    max-width: none;
    font-size: clamp(13.2px, 3.5vw, 14.4px);
    line-height: 1.56;
    text-align: justify;
    text-align-last: left;
  }
  #nang-luc .skx-checks {
    grid-column: 1;
    grid-row: auto;
    justify-self: stretch;
    width: 100%;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(2, auto);
    grid-auto-flow: row;
    column-gap: clamp(10px, 3vw, 24px);
    row-gap: 9px;
    padding-bottom: 0;
  }
  #nang-luc .skx-checks li {
    gap: 8px;
    font-size: clamp(12.2px, 3.2vw, 13.8px);
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  #nang-luc .skx-check__ico {
    width: 24px;
    height: 24px;
    border-radius: 7px;
  }
  #nang-luc .skx-check__ico svg {
    width: 13px;
    height: 13px;
  }
  #nang-luc .skx-tabs {
    overflow-x: auto;
    justify-content: flex-start;
    gap: 6px;
    padding-bottom: 8px;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  #nang-luc .skx-tabs::-webkit-scrollbar {
    display: none;
  }
  #nang-luc .skx-tabs__pill {
    height: 38px;
  }
  #nang-luc .skx-tab {
    height: 38px;
    padding: 0 14px;
    font-size: 13px;
    gap: 7px;
  }
}

@media (max-width: 760px) {
  #nang-luc .sec-head .sec-head__rule {
    display: none;
  }
  #nang-luc .skx__stage {
    margin-top: -2px;
    margin-bottom: -4px;
  }
}

/* ==========================================================================
   ⑧ THÀNH TỰU — giữ nguyên 100% giao diện UI, ghim cuộn ngắn (6–8 đánh giá) + tự trôi liên tục
   ========================================================================== */
#feedback .fb__viewport {
  -webkit-mask-image: none !important;
  mask-image: none !important;
}
html.st #feedback.st-pin > .st-sticky {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-block: clamp(72px, 8.5vh, 108px) clamp(28px, 4.5vh, 56px);
  background: inherit;
}
html.st #feedback.st-pin .sec-head {
  margin-bottom: clamp(28px, 4.8vh, 64px);
}
@media (max-width: 760px) {
  html.st #feedback.st-pin > .st-sticky {
    padding-block: clamp(62px, 7.6svh, 80px) clamp(18px, 3svh, 32px);
  }
  html.st #feedback.st-pin .sec-head {
    margin-bottom: clamp(16px, 2.8svh, 28px);
  }
}

/* ==========================================================================
   ⑨ GÓC KIẾN THỨC — sách 3D lật trang theo cuộn (bố cục 2 cột trên máy tính · xếp dọc trên di động)
   ========================================================================== */
html.st .kbx { overflow: visible !important; background: #030A1E; }
html.st .kbx::before, html.st .kbx::after { content: none; }
html.st .kbx.st-pin > .st-sticky {
  padding-block: 0 !important;
  background: #030A1E;
}
html.st .kbx-stage {
  position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none;
  background: #030A1E url("../assets/kb/seq/poster.webp?v=802") 50% 50% / cover no-repeat;
}
html.st .kbx-canvas {
  display: block; width: 100%; height: 100%;
  transition: opacity .35s ease;
}
html.st .kbx-stage::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(180deg, rgb(3 10 30 / .3) 0%, transparent 14%, transparent 82%, rgb(3 10 30 / .42) 100%);
}
html.st .kbx .st-sticky > .container {
  --kb-right-w: min(512px, 41.5vw);
  position: relative; z-index: 2; height: 100%;
  display: flex; flex-direction: column; justify-content: space-between;
  padding-top: clamp(78px, 9.2vh, 104px);
  padding-bottom: clamp(22px, 3vh, 36px);
  pointer-events: none;
}

/* Giữ nguyên 100% bố cục .sec-head.sec-head--aside chuẩn của trang */
html.st .kbx .sec-head {
  position: relative;
  pointer-events: auto;
  margin-bottom: 0;
}

/* Giữ nguyên 100% bài viết nổi bật trong DOM cho SEO & trình đọc màn hình, nhường chỗ cho sách 3D */
html.st .kbx .kbh-post {
  position: absolute !important; width: 1px !important; height: 1px !important;
  padding: 0 !important; margin: -1px !important; overflow: hidden !important;
  clip: rect(0 0 0 0) !important; white-space: nowrap !important; border: 0 !important;
  pointer-events: none !important;
}

/* Lưới 2×2 thẻ chủ đề */
html.st .kbx .kbh__grid {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  margin-top: 0;
  padding-block: clamp(10px, 1.5vh, 20px);
}
html.st .kbx .kbh-pillars,
html.st[data-lang="en"] .kbx .kbh-pillars {
  width: var(--kb-right-w);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(12px, 1.05vw, 15px);
  pointer-events: auto;
}
html.st .kbx .kbh-pillars > li { opacity: 1; transform: none; }
html.st .kbx .kbh-pillar {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  grid-template-rows: auto 1fr;
  grid-template-areas:
    "ico .   n   go"
    "txt txt txt txt";
  align-items: center;
  column-gap: 8px;
  row-gap: clamp(10px, 1.25vh, 13px);
  padding: clamp(13px, 1.6vh, 16px) clamp(15px, 1.2vw, 18px) clamp(14px, 1.7vh, 17px);
  border-radius: 16px;
  background: linear-gradient(160deg, rgb(14 28 64 / .54) 0%, rgb(6 14 36 / .72) 100%);
  border: 1px solid rgb(162 196 254 / .12);
  box-shadow:
    0 14px 34px -22px rgb(1 4 15 / .72),
    inset 0 1px 0 rgb(225 238 255 / .09);
  opacity: 1; transform: none; filter: none;
  transition: transform .42s var(--ease), border-color .32s, background .32s, box-shadow .42s;
}
html.st .kbx .kbh-pillar.is-active,
html.st .kbx .kbh-pillar:hover {
  border-color: rgb(134 186 255 / .36);
  background: linear-gradient(160deg, rgb(19 38 86 / .66) 0%, rgb(8 18 46 / .82) 100%);
  box-shadow:
    0 18px 40px -22px rgb(1 4 16 / .85),
    0 0 22px -12px rgb(47 140 255 / .28),
    inset 0 1px 0 rgb(225 238 255 / .18);
  transform: translateY(-2px);
}
html.st .kbx .kbh-pillar__ico {
  grid-area: ico; align-self: center;
  width: 34px; height: 34px;
  margin: 0; border-radius: 10px;
  background: linear-gradient(145deg, rgb(47 140 255 / .18) 0%, rgb(12 26 62 / .58) 100%);
  border: 1px solid rgb(154 198 255 / .2);
  box-shadow: inset 0 1px 0 rgb(220 236 255 / .14), 0 8px 16px -10px rgb(15 62 185 / .42);
  color: #9EC8FF;
}
html.st .kbx .kbh-pillar__ico svg { width: 16.5px; height: 16.5px; }
html.st .kbx .kbh-pillar:hover .kbh-pillar__ico,
html.st .kbx .kbh-pillar.is-active .kbh-pillar__ico {
  background: linear-gradient(145deg, rgb(47 140 255 / .32) 0%, rgb(16 36 84 / .72) 100%);
  border-color: rgb(168 212 255 / .38);
  color: #CEE4FF;
  transform: none;
}
html.st .kbx .kbh-pillar__txt {
  grid-area: txt;
  align-self: start;
  display: flex; flex-direction: column; gap: 4px;
  min-width: 0;
}
html.st .kbx .kbh-pillar__txt > b {
  font-size: clamp(14.2px, .96vw, 15.5px); font-weight: 700;
  letter-spacing: -.018em; line-height: 1.26; color: #F5F8FF;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
html.st .kbx .kbh-pillar__txt > small {
  margin-top: 0;
  font-size: clamp(11.8px, .76vw, 12.6px); line-height: 1.5;
  color: rgb(208 222 248 / .66);
  text-align: left; text-align-last: left; hyphens: none; -webkit-hyphens: none;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden;
}
html.st .kbx .kbh-pillar__n,
html.st .kbx .kbh-pillar__n.is-soon {
  grid-area: n; justify-self: end; align-self: center;
  padding: 3px 9px;
  border-radius: 999px;
  background: rgb(162 196 254 / .09);
  border: 1px solid rgb(162 196 254 / .15);
  font-size: 10.8px; font-weight: 600; letter-spacing: .01em; line-height: 1.3;
  color: rgb(224 236 255 / .8);
}
html.st .kbx .kbh-pillar__n.is-soon {
  background: rgb(162 196 254 / .035);
  border: 1px solid rgb(162 196 254 / .11);
  color: rgb(196 212 240 / .5);
}
html.st .kbx .kbh-pillar__go {
  grid-area: go; align-self: center;
  width: 15px; height: 15px; margin: 0;
  color: rgb(196 218 255 / .4);
  transition: transform .4s var(--ease), color .3s;
}
html.st .kbx .kbh-pillar:hover .kbh-pillar__go,
html.st .kbx .kbh-pillar.is-active .kbh-pillar__go {
  transform: translate(2px, -2px);
  color: rgb(232 244 255 / .86);
}
html.st .kbx .kbh__foot {
  position: absolute; right: var(--gutter); bottom: clamp(16px, 2.2vh, 26px);
  width: var(--kb-right-w);
  justify-content: flex-start; pointer-events: none;
}
html.st .kbx .kbh__note { margin-top: 0; font-size: 11.5px; opacity: .58; }

@media (max-width: 1024px) {
  html.st .kbx .st-sticky > .container {
    --kb-right-w: 100%;
    padding-top: clamp(64px, 7.6svh, 78px);
    padding-bottom: clamp(14px, 2.2svh, 22px);
  }
  html.st .kbx .sec-head--aside {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    column-gap: 10px;
    row-gap: 8px;
  }
  html.st .kbx .sec-head--aside > .h2 {
    grid-area: 1 / 1;
  }
  html.st .kbx .sec-head__top {
    display: flex !important;
    grid-area: 1 / 2;
  }
  html.st .kbx .kbh__all {
    --bh: 36px;
    height: 36px;
    padding: 0 13px;
    font-size: 12.2px;
    gap: 6px;
  }
  html.st .kbx .kbh__grid {
    flex: 0 0 auto;
    margin-top: auto;
    width: 100%;
    justify-content: center;
    padding-block: 4px;
  }
  html.st .kbx .kbh-pillars,
  html.st[data-lang="en"] .kbx .kbh-pillars {
    width: 100%;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }
  html.st .kbx .kbh-pillar,
  html.st[data-lang="en"] .kbx .kbh-pillar {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto auto;
    grid-template-rows: auto 1fr;
    grid-template-areas:
      "ico .   n   go"
      "txt txt txt txt";
    align-items: center;
    padding: 10px 12px;
    border-radius: 14px;
    row-gap: 6px;
    column-gap: 6px;
  }
  html.st .kbx .kbh-pillar__ico,
  html.st[data-lang="en"] .kbx .kbh-pillar__ico {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    align-self: center;
  }
  html.st .kbx .kbh-pillar__ico svg {
    width: 14px;
    height: 14px;
  }
  html.st .kbx .kbh-pillar__txt > b {
    font-size: clamp(12.2px, 3.25vw, 13.8px);
    white-space: nowrap !important;
    overflow: hidden;
    text-overflow: clip;
  }
  html.st .kbx .kbh-pillar__txt > small {
    font-size: clamp(11px, 2.85vw, 12px);
    line-height: 1.38;
    text-align: justify;
    text-align-last: left;
  }
  html.st .kbx .kbh-pillar__n {
    padding: 2px 7px;
    font-size: 9.8px;
  }
  html.st .kbx .kbh__foot {
    display: none;
  }
}

@media (max-width: 760px) {
  html.st .kbx .sec-head .sec-head__rule {
    display: none;
  }
  html.st .kbx .sec-head .sec-head__foot .desc {
    font-size: 12.6px;
    line-height: 1.44;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
  }
}

/* ==========================================================================
   ⑩ LIÊN HỆ & CHÂN TRANG — giữ nguyên giao diện & chuyển động gốc như letuanviet.com
   ========================================================================== */
#lien-he .bio__photo::after {
  inset: 40% 0 0;
  background: linear-gradient(180deg, transparent 0%, rgb(var(--ivory-rgb) / 0.76) 54%, rgb(var(--ivory-rgb) / 0.98) 100%);
}
#lien-he .bio__body {
  margin-top: -104px;
}
#lien-he .bio__sig {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 2px;
  pointer-events: none;
  user-select: none;
}
#lien-he .bio__sig img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: contain;
}

/* ==========================================================================
   ⑪ CHÂN TRANG → HERO (PORTAL LOOP TRANSITION KIỂU SANTALARCH × GOOGLE ANTIGRAVITY)
   - Lướt hết nội dung .footer (tới hết chữ lớn "Le Tuan Viet"), cuộn thêm sẽ ghim đáy footer
   - Màn đóng màu trắng với các hạt chấm xanh Google Antigravity thu về Logo LTV xanh gradient
   - Cuộn tiếp sẽ mở cổng từ Logo LTV ra lại Hero section (#trang-chu) và lặp vô tận về đầu trang
   ========================================================================== */
html.st .footer.footer--portal {
  padding-top: 0;
  overflow: clip;
}
html.st .footer.footer--portal .footer__sticky {
  position: sticky;
  top: min(0px, calc(100vh - var(--fh, 100vh)));
  top: min(0px, calc(100svh - var(--fh, 100svh)));
  min-height: 100vh;
  min-height: 100svh;
  padding-top: clamp(72px, 9vw, 116px);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  will-change: transform;
}
html.st .footer.footer--portal .footer__runway {
  height: var(--fp-runway, 265vh);
  pointer-events: none;
  user-select: none;
}

.fportal {
  position: fixed;
  inset: 0;
  z-index: 115;
  pointer-events: none;
  user-select: none;
  opacity: 0;
  visibility: hidden;
  overflow: hidden;
  contain: layout style paint;
}
.fportal.is-active {
  opacity: 1;
  visibility: visible;
}
.fportal__canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}
.fportal__center {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  pointer-events: none;
}
.fportal__logo-wrap {
  width: clamp(92px, 8.8vw, 128px);
  height: clamp(92px, 8.8vw, 128px);
  border-radius: 50%;
  background: #FFFFFF;
  box-shadow: 0 16px 40px -10px rgb(19 86 242 / .20), 0 0 0 1px rgb(19 86 242 / .07);
  display: grid;
  place-items: center;
  transform-origin: 50% 50%;
  will-change: transform, opacity;
  opacity: 0;
}
.fportal__logo {
  width: 68%;
  height: 68%;
  display: block;
  overflow: visible;
}
/* Khi cổng mở sang Hero section (nửa sau quãng cuộn): đưa #trang-chu và #nav lên ngay dưới lớp cổng (.fportal z=115) */
html.is-fportal-hero #trang-chu .hero__sticky {
  position: fixed !important;
  inset: 0 !important;
  width: 100% !important;
  z-index: 112 !important;
  pointer-events: none !important;
  will-change: transform;
  transform: scale(var(--fp-hero-scale, 1));
  transform-origin: 50% 50%;
}
html.is-fportal-hero #nav {
  z-index: 113 !important;
  transform: translateY(0) !important;
  --nav-bar: 62px;
  --nav-ctl: 40px;
}
html.is-fportal-hero #nav .nav__inner {
  background: rgb(var(--ivory-rgb) / .62);
}
@media (max-width: 1024px) {
  html.is-fportal-hero #nav { --nav-bar: 60px; --nav-ctl: 44px; }
}
@media (max-width: 760px) {
  html.is-fportal-hero #nav { --nav-bar: 58px; --nav-ctl: 44px; }
}
html.is-fportal-on .totop,
html.is-fportal-on .lang-float {
  opacity: calc(1 - var(--fp-hide-ui, 0)) !important;
  pointer-events: none !important;
}

/* ==========================================================================
   GÓC KIẾN THỨC (các trang /goc-kien-thuc/) — thẻ nhô lên theo cuộn, đầu trang trôi chậm
   ========================================================================== */
html.st.kbs .kbs-c:not(.is-done) { transform-origin: 50% 100%; opacity: calc(.1 + var(--e, 0) * .9);
  transform: perspective(1500px) translate3d(0, calc((1 - var(--e, 0)) * (70px + var(--k, 0) * 22px)), calc((1 - var(--e, 0)) * -220px)) rotateX(calc((1 - var(--e, 0)) * 16deg)); }
html.st.kbs .kb-top > :first-child { transform: translate3d(0, calc(max(var(--tq, 0), 0) * 70px), 0); opacity: calc(1 - max(var(--tq, 0), 0) * .85); }
html.st.kbs .kbs-f:not(.is-done) { opacity: calc(.15 + var(--e, 0) * .85); transform: translate3d(0, calc((1 - var(--e, 0)) * 40px), 0) scale(calc(.97 + var(--e, 0) * .03)); }

/* ==========================================================================
   ③ GIÁ TRỊ — điện thoại / máy tính bảng (≤ 1024px): xếp dọc 5 thẻ pha lê mở/đóng mượt, hiện trọn ảnh 3D + chữ, không khoảng trống thừa
   ========================================================================== */
@media (max-width: 1024px) {
  html.st #gia-tri.vsc {
    padding-block: clamp(72px, 9.5vw, 112px);
  }
  html.st #gia-tri.vsc .sec-head {
    margin-bottom: clamp(22px, 3.6vw, 32px);
  }
  html.st #gia-tri.vsc .vcards {
    display: flex;
    flex-direction: column;
    height: auto;
    min-height: 0;
    gap: 12px;
    perspective: none;
  }
  html.st #gia-tri.vsc .vcard {
    width: 100%;
    transition: none;
  }
  html.st #gia-tri.vsc .vcard:not(.is-active) {
    flex: 0 0 60px;
    height: 60px;
    min-height: 60px;
    border-radius: 18px;
  }
  html.st #gia-tri.vsc .vcard:not(.is-active) .vcard__inner {
    height: 60px;
    display: block;
    transform: none !important;
    opacity: 1;
  }
  html.st #gia-tri.vsc .vcard:not(.is-active) .vcard__body {
    display: none !important;
  }
  html.st #gia-tri.vsc .vcard.is-active {
    flex: 0 0 auto;
    height: auto;
    min-height: 0;
    border-radius: 24px;
  }
  html.st #gia-tri.vsc .vcard.is-active .vcard__inner {
    height: auto;
    display: flex;
    flex-direction: column;
    background: #FFFFFF;
    transform: none !important;
    opacity: 1;
  }
  html.st #gia-tri.vsc .vcard.is-active .vcard__collapsed {
    display: none !important;
  }
  html.st #gia-tri.vsc .vcard.is-active .vcard__stage {
    position: relative;
    left: auto;
    right: auto;
    top: auto;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 10;
    transform: none !important;
    overflow: hidden;
    flex: none;
    background: linear-gradient(180deg, #CFE0F9 0%, #DCE9FC 42%, #EEF5FF 82%, #FFFFFF 100%);
  }
  html.st #gia-tri.vsc .vcard.is-active .vcard__art {
    width: 100%;
    height: 100%;
    transform: translate3d(0, var(--fy, 0px), 0) scale(1.02);
  }
  html.st #gia-tri.vsc .vcard__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 46%;
  }
  html.st #gia-tri.vsc .vcard:not(.is-active) .vcard__stage {
    position: absolute;
    width: 170px;
    left: auto;
    right: 0;
    top: 0;
    height: 100%;
    aspect-ratio: auto;
    transform: scale(1);
    opacity: .88;
  }
  html.st #gia-tri.vsc .vcard:not(.is-active) .vcard__shade {
    background: linear-gradient(90deg, #0B1636 0%, #0F204A 52%, rgb(17 34 78 / .52) 80%, rgb(17 34 78 / .32) 100%);
  }
  html.st #gia-tri.vsc .vcard__num {
    top: 50%;
    left: 16px;
    transform: translateY(-50%);
    width: auto;
    height: auto;
    font-size: 16px;
  }
  html.st #gia-tri.vsc .vcard.is-active .vcard__num {
    top: 16px;
    left: 18px;
    transform: none;
    font-size: 20px;
  }
  html.st #gia-tri.vsc .vcard__collapsed {
    inset: 0;
    height: 100%;
    padding: 0 16px 0 48px;
    align-items: center;
  }
  html.st #gia-tri.vsc .vcard__vtitle {
    writing-mode: horizontal-tb;
    transform: none;
    display: block;
    width: 100%;
    white-space: nowrap !important;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: clamp(13.5px, 3.6vw, 15px);
    line-height: 1.3;
    gap: 0;
  }
  html.st #gia-tri.vsc .vcard__vtitle > span {
    display: inline;
  }
  html.st #gia-tri.vsc .vcard__vtitle > span:first-child::after {
    content: " ";
  }
  html.st #gia-tri.vsc .vcard.is-active .vcard__body {
    position: relative;
    left: auto;
    right: auto;
    bottom: auto;
    z-index: 4;
    padding-top: 2px;
    background: #FFFFFF;
    opacity: 1 !important;
    transform: none !important;
    pointer-events: auto;
    flex: none;
  }
  html.st #gia-tri.vsc .vcard.is-active .vcard__panel {
    width: 100%;
    padding: 12px 18px 20px;
    gap: 10px;
  }
  html.st #gia-tri.vsc .vcard__title {
    font-size: clamp(1.08rem, 4.4vw, 1.32rem);
    white-space: nowrap !important;
    overflow: hidden;
    text-overflow: clip;
  }
  html.st #gia-tri.vsc .vcard__desc {
    font-size: clamp(13.2px, 3.5vw, 14.4px);
    line-height: 1.58;
    text-align: justify;
    text-align-last: left;
  }
  html.st #gia-tri.vsc .vcard__proof {
    gap: 12px;
  }
  html.st #gia-tri.vsc .vcard__badge {
    font-size: 12.5px;
    padding-right: 12px;
  }
  html.st #gia-tri.vsc .vcard__proof-txt {
    font-size: clamp(12.6px, 3.35vw, 13.6px);
    line-height: 1.5;
    text-align: justify;
    text-align-last: left;
  }
}

@media (max-width: 760px) {
  html.st #gia-tri.vsc .sec-head .sec-head__rule {
    display: none;
  }
}