/* =========================================================
 * PHUN XĂM THẨM MỸ KẾT HỢP VỚI CÁC PHƯƠNG PHÁP – LANDING PAGE
 * Prefix: pxtm-  (kế thừa design token + component từ LP Công nghệ phun mày)
 * Breakpoints: mobile ≤ 768px | tablet 769–1024px | desktop ≥ 1025px
 * ========================================================= */

/* ---------- 1. DESIGN TOKENS ---------- */
#pxtm-landing {
  /* Màu thương hiệu */
  --pxtm-primary: #710dac;
  --pxtm-deep: #451180;
  --pxtm-violet: #9615d2;
  --pxtm-white: #fff;
  --pxtm-bg: #f4eeff;

  /* Font */
  --pxtm-font-serif: "IvyPrestoDisplay", serif;
  --pxtm-font-sans: "Geomanist", sans-serif;

  /* Gradient */
  --pxtm-grad-title-1: linear-gradient(180deg, #de4c33 0%, #9615d2 100%);
  --pxtm-grad-title-2: linear-gradient(180deg, #ac59ff 0%, #f74289 100%);
  --pxtm-grad-cta: linear-gradient(
    90deg,
    #f5935c 0%,
    #e0668a 25%,
    #a45cf2 50%,
    #e0668a 75%,
    #f5935c 100%
  );
  --pxtm-cta-shadow: 0 5px 10px -3px rgba(113, 13, 172, 0.4);

  /* Text mô tả / body */
  --pxtm-text-size: 20px;
  --pxtm-text-color: #710dac;

  /* Radius */
  --pxtm-radius-pill: 999px;
  --pxtm-radius-card: 30px;
  --pxtm-radius-tab: 18px;

  width: 100%;
  overflow: hidden; /* fallback trình duyệt cũ */
  isolation: isolate; /* lớp nền z-index:-1 của các section nằm dưới mọi nội dung */
  background: var(--pxtm-bg);
}

/* Chỉ cắt tràn ngang → brush blur lan dọc liền giữa các section,
 * position: sticky vẫn hoạt động */
@supports (overflow: clip) {
  #pxtm-landing {
    overflow: visible;
    overflow-x: clip;
  }
}

@media (max-width: 768px) {
  #pxtm-landing {
    --pxtm-text-size: 16px;
  }
}

/* ---------- 2. BASE (scoped) ---------- */
#pxtm-landing *,
#pxtm-landing *::before,
#pxtm-landing *::after {
  box-sizing: border-box;
}

#pxtm-landing img {
  display: block;
  max-width: 100%;
  height: auto;
}

.pxtm-sr-only {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Xuống dòng / nội dung theo thiết bị:
 *   <br class="pxtm-br-m">  chỉ xuống dòng trên mobile
 *   <br class="pxtm-br-d">  chỉ xuống dòng trên desktop + tablet
 *   .pxtm-m-only            chỉ hiện trên mobile
 *   .pxtm-d-only            chỉ hiện trên desktop + tablet */
.pxtm-br-m,
.pxtm-m-only {
  display: none;
}

@media (max-width: 768px) {
  .pxtm-br-m,
  .pxtm-m-only {
    display: inline;
  }

  .pxtm-br-d,
  .pxtm-d-only {
    display: none;
  }
}

/* ---------- 3. UTILITIES ---------- */
/* Chữ gradient. Lưu ý: dấu chồng tầng (ổ, ế, Ô…) có thể nhô khỏi hộp chữ và
 * bị tàng hình → element dùng class này cần chừa padding-top (xem .pxtm-grad-safe) */
.pxtm-text-grad-1,
.pxtm-text-grad-2 {
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.pxtm-text-grad-1 {
  background-image: var(--pxtm-grad-title-1);
}

.pxtm-text-grad-2 {
  background-image: var(--pxtm-grad-title-2);
}

/* Chừa chỗ cho dấu tiếng Việt, bù lại bằng margin âm → bố cục không đổi */
.pxtm-grad-safe {
  padding-top: 0.24em;
  padding-bottom: 0.1em;
  margin-top: -0.24em;
  margin-bottom: -0.1em;
}

/* Text mô tả / body: 20px, #710DAC (mobile 16px) */
#pxtm-landing .pxtm-text {
  margin: 0;
  color: var(--pxtm-text-color);
  font-family: var(--pxtm-font-sans);
  font-size: var(--pxtm-text-size);
  font-weight: 400;
  line-height: 1.3;
}

/* ---------- 4. COMPONENT – CTA BUTTON (dùng chung toàn trang) ----------
 * Chuẩn ~279 x 66. Mỗi nơi dùng chỉ cần set --pxtm-btn-w,
 * chiều cao + cỡ chữ tự scale theo.
 */
.pxtm-btn {
  --pxtm-btn-w: 279px;

  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--pxtm-btn-w);
  height: calc(var(--pxtm-btn-w) * 0.235);
  padding: 0 calc(var(--pxtm-btn-w) * 0.07);
  overflow: hidden;
  border: 1.5px solid rgba(255, 255, 255, 0.85);
  border-radius: var(--pxtm-radius-pill);
  background: var(--pxtm-grad-cta);
  background-size: 200% 100%;
  background-position: 0 0;
  box-shadow: var(--pxtm-cta-shadow);
  color: var(--pxtm-white);
  font-family: var(--pxtm-font-sans);
  font-size: calc(var(--pxtm-btn-w) * var(--pxtm-btn-fs, 0.078));
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.02em;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
  animation: pxtm-btn-pulse 2.2s ease-in-out infinite;
  animation-delay: var(--pxtm-delay, 0s);
  transition: transform 0.25s ease, background-position 0.5s ease,
    box-shadow 0.25s ease;
}

/* Vệt sáng quét tự động */
.pxtm-btn::before {
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  width: 40%;
  height: 100%;
  content: "";
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.55) 50%,
    rgba(255, 255, 255, 0) 100%
  );
  transform: translateX(-150%) skewX(-20deg);
  animation: pxtm-btn-shine 3.2s ease-in-out infinite;
  animation-delay: var(--pxtm-delay, 0s);
  pointer-events: none;
}

.pxtm-btn__label {
  position: relative;
  z-index: 1;
  text-shadow: 0 1px 2px rgba(69, 17, 128, 0.25);
}

/* Nút tự giãn theo text dài, giữ nguyên chiều cao + cỡ chữ */
.pxtm-btn--auto {
  width: auto;
  min-width: var(--pxtm-btn-w);
  padding: 0 calc(var(--pxtm-btn-w) * 0.14);
}

.pxtm-btn:hover,
.pxtm-btn:focus-visible {
  color: var(--pxtm-white);
  background-position: 100% 0;
  transform: translateY(-2px);
}

.pxtm-btn:focus-visible {
  outline: 3px solid var(--pxtm-white);
  outline-offset: 3px;
}

/* Mobile: chữ nút to hơn cho dễ đọc */
@media (max-width: 768px) {
  .pxtm-btn {
    --pxtm-btn-fs: 0.092;
  }
}

@keyframes pxtm-btn-pulse {
  0% {
    box-shadow: var(--pxtm-cta-shadow), 0 0 0 0 rgba(113, 13, 172, 0.35);
  }
  70% {
    box-shadow: var(--pxtm-cta-shadow), 0 0 0 9px rgba(113, 13, 172, 0);
  }
  100% {
    box-shadow: var(--pxtm-cta-shadow), 0 0 0 0 rgba(113, 13, 172, 0);
  }
}

@keyframes pxtm-btn-shine {
  0% {
    transform: translateX(-150%) skewX(-20deg);
  }
  55%,
  100% {
    transform: translateX(350%) skewX(-20deg);
  }
}

/* ---------- 5. COMPONENT – STAGE (ảnh banner + CTA HTML đặt đè theo %) ----------
 *   --pxtm-stage-x / --pxtm-stage-y : tâm nút CTA (% của ảnh)
 *   --pxtm-stage-cta-w              : chiều rộng nút (cqw = % chiều rộng ảnh)
 */
.pxtm-stage {
  --pxtm-stage-x: 50%;
  --pxtm-stage-y: 80%;
  --pxtm-stage-cta-w: 279px;

  position: relative;
  width: 100%;
  container-type: inline-size;
}

.pxtm-stage__picture {
  display: block;
  width: 100%;
}

#pxtm-landing .pxtm-stage__image {
  width: 100%;
  height: auto;
}

.pxtm-stage__cta {
  position: absolute;
  top: var(--pxtm-stage-y);
  left: var(--pxtm-stage-x);
  z-index: 2;
  transform: translate(-50%, -50%);
}

.pxtm-stage__cta .pxtm-btn {
  --pxtm-btn-w: var(--pxtm-stage-cta-w);
}

/* ---------- 6. COMPONENT – PILL TITLE (2 ngôi sao góc) ---------- */
.pxtm-pill-title {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 7px 34px 5px;
  border: 1.5px solid #d4b8f5;
  border-radius: var(--pxtm-radius-pill);
  background: linear-gradient(180deg, #fff 0%, #f5edff 100%);
  box-shadow: 0 4px 12px rgba(113, 13, 172, 0.14),
    0 0 8px 2px rgba(255, 255, 255, 0.9) inset;
}

.pxtm-pill-title__text {
  color: var(--pxtm-primary);
  font-family: var(--pxtm-font-sans);
  font-size: 28px;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* Ngôi sao đã đúng góc theo Figma → không xoay, không nhấp nháy */
#pxtm-landing .pxtm-pill-title__star {
  position: absolute;
  z-index: 1;
  height: auto;
  pointer-events: none;
}

#pxtm-landing .pxtm-pill-title__star--left {
  bottom: -12px;
  left: -13px;
  width: 40px;
}

#pxtm-landing .pxtm-pill-title__star--right {
  top: -15px;
  right: -12px;
  width: 40px;
}

@media (max-width: 768px) {
  .pxtm-pill-title {
    padding: 5px 20px 4px;
  }

  .pxtm-pill-title__text {
    font-size: 19px;
  }

  #pxtm-landing .pxtm-pill-title__star--left {
    bottom: -9px;
    left: -10px;
    width: 26px;
  }

  #pxtm-landing .pxtm-pill-title__star--right {
    top: -11px;
    right: -9px;
    width: 26px;
  }
}

@media (max-width: 400px) {
  .pxtm-pill-title {
    padding: 5px 16px 4px;
  }

  .pxtm-pill-title__text {
    font-size: 17px;
  }
}

/* ---------- 6b. COMPONENT – HEADING ----------
 * Dòng "tiền tố/hậu tố" (sans) + "Keyword" (serif italic gradient) + pill.
 * Thứ tự tiền tố/hậu tố quyết định bằng thứ tự HTML, CSS dùng chung.
 */
.pxtm-heading {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0 0 42px;
  text-align: center;
}

.pxtm-heading__line {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 12px;
}

.pxtm-heading__keyword {
  padding-right: 0.08em;
  padding-left: 0.04em;
  font-family: var(--pxtm-font-serif);
  font-size: 96px;
  font-style: italic;
  font-weight: 400;
  line-height: 1.05;
}

.pxtm-heading__sub {
  color: var(--pxtm-primary);
  font-family: var(--pxtm-font-sans);
  font-size: 32px;
  font-weight: 500;
  line-height: 1;
}

.pxtm-heading .pxtm-pill-title {
  margin-top: 6px; /* chừa chỗ cho chân chữ g, y… của keyword */
}

/* Hậu tố xếp 2 dòng bên phải keyword (vd "khách hàng / tin chọn") */
.pxtm-heading__line--center {
  align-items: center;
}

.pxtm-heading__sub--stack {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  line-height: 1.05;
  text-align: left;
}

/* Dòng chữ sans bên dưới pill (vd "Khắc phục mọi khuyết điểm", "là phù hợp?") */
.pxtm-heading__tail {
  margin-top: 10px;
  color: var(--pxtm-primary);
  font-family: var(--pxtm-font-sans);
  font-size: 34px;
  font-weight: 500;
  line-height: 1.2;
}

@media (max-width: 768px) {
  .pxtm-heading {
    margin-bottom: 24px;
  }

  .pxtm-heading__line {
    gap: 6px;
  }

  .pxtm-heading__keyword {
    font-size: 64px;
  }

  .pxtm-heading__sub {
    font-size: 20px;
  }

  .pxtm-heading__tail {
    margin-top: 8px;
    font-size: 20px;
  }
}

@media (max-width: 400px) {
  .pxtm-heading__keyword {
    font-size: 56px;
  }
}

/* ---------- 7. UTILITY – SCROLL REVEAL ----------
 * Gắn data-pxtm-reveal (+ style="--i:n" để lệch nhịp).
 * Chỉ ẩn khi JS chạy (#pxtm-landing.is-js) → không JS vẫn hiện đủ nội dung.
 */
#pxtm-landing.is-js [data-pxtm-reveal] {
  opacity: 0;
  transform: translateY(34px);
  transition: opacity 0.7s ease, transform 0.8s cubic-bezier(0.22, 0.61, 0.36, 1);
  transition-delay: calc(var(--i, 0) * 0.13s);
}

#pxtm-landing.is-js [data-pxtm-reveal].is-in {
  opacity: 1;
  transform: none;
}

/* =========================================================
 * SECTION: HERO
 * Desktop 1920 x 951 | Mobile 420 x 769 (giả định – chỉnh width/height
 * trong mảng $pxtm_hero nếu ảnh xuất khác).
 * Nút CTA đặt theo % ảnh → luôn khớp artwork mọi màn hình.
 * Lệch so với ảnh thì chỉnh 3 biến --pxtm-stage-* bên dưới:
 *   --pxtm-stage-x / -y : tâm nút (% chiều rộng / chiều cao ảnh)
 *   --pxtm-stage-cta-w  : chiều rộng nút (cao + cỡ chữ tự scale)
 * ========================================================= */
.pxtm-hero {
  position: relative;
  width: 100%;
  background: var(--pxtm-bg);
}

.pxtm-hero .pxtm-stage {
  --pxtm-stage-x: 66.7%;
  --pxtm-stage-y: 89.7%;
  /* 279 / 1920 = 14.53% chiều rộng banner */
  --pxtm-stage-cta-w: clamp(150px, 14.53vw, 400px);
}

@supports (width: 1cqw) {
  .pxtm-hero .pxtm-stage {
    --pxtm-stage-cta-w: clamp(150px, 14.53cqw, 400px);
  }
}

@media (max-width: 768px) {
  .pxtm-hero .pxtm-stage {
    --pxtm-stage-x: 51.2%;
    --pxtm-stage-y: 95.8%;
    /* ~214px tại màn 420 (51% chiều rộng banner) */
    --pxtm-stage-cta-w: clamp(160px, 51vw, 340px);
  }

  @supports (width: 1cqw) {
    .pxtm-hero .pxtm-stage {
      --pxtm-stage-cta-w: clamp(160px, 51cqw, 340px);
    }
  }
}

/* =========================================================
 * SECTION: BẠN CÓ ĐANG... (vấn đề khách hàng)
 * Desktop: lưới 3 x 2 | Mobile: lưới 2 cột
 * Mỗi mục: số thứ tự serif italic đè góc trái-trên ảnh tròn + chữ mô tả thường.
 * Biến chỉnh nhanh (khai báo trên .pxtm-issues):
 *   --pxtm-issue-size      : đường kính ảnh tròn (số + chữ scale theo)
 *   --pxtm-issue-gap-x/-y  : khoảng cách cột / hàng
 *   --pxtm-issue-num-scale : cỡ số = đường kính × hệ số
 *   --pxtm-issue-num-x/-y  : vị trí số so với ảnh (theo đường kính)
 *   --pxtm-issue-num-color : màu số (lấy từ Figma #5D1EA4)
 *   --pxtm-issue-text-size : cỡ chữ mô tả
 * Nền: dùng nền tím chung của wrapper (không set background riêng).
 * ========================================================= */
.pxtm-issues {
  --pxtm-issue-size: clamp(220px, 21vw, 300px);
  --pxtm-issue-gap-x: clamp(56px, 7vw, 130px);
  --pxtm-issue-gap-y: 96px;
  --pxtm-issue-num-scale: 0.42;
  --pxtm-issue-num-x: -0.08;
  --pxtm-issue-num-y: -0.14;
  --pxtm-issue-num-color: #5d1ea4;
  --pxtm-issue-text-size: 20px;
  --pxtm-issue-title-gap: 72px; /* khoảng cách tiêu đề → lưới */

  position: relative;
  width: 100%;
  padding: 80px 24px 110px;
}

.pxtm-issues__inner {
  max-width: 1312px;
  margin: 0 auto;
}

#pxtm-landing .pxtm-issues__heading {
  margin-bottom: calc(var(--pxtm-issue-title-gap) + var(--pxtm-issue-size) * 0.1);
}

/* ----- Grid (reset ol/li của Flatsome) ----- */
#pxtm-landing .pxtm-issues__grid {
  display: grid;
  grid-template-columns: repeat(3, var(--pxtm-issue-size));
  justify-content: center;
  column-gap: var(--pxtm-issue-gap-x);
  row-gap: var(--pxtm-issue-gap-y);
  margin: 0;
  padding: 0;
  list-style: none;
}

#pxtm-landing .pxtm-issues__item {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* ----- Ảnh tròn + số ----- */
.pxtm-issues__media {
  position: relative;
  width: var(--pxtm-issue-size);
}

.pxtm-issues__circle {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 0 0 rgba(255, 255, 255, 0), 0 0 0 0 rgba(113, 13, 172, 0);
  transition: box-shadow 0.45s ease, scale 0.45s ease;
}

#pxtm-landing .pxtm-issues__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: scale 0.6s cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* Số nằm TRÊN ảnh (z 2), đè góc trái-trên */
.pxtm-issues__num {
  position: absolute;
  top: calc(var(--pxtm-issue-size) * var(--pxtm-issue-num-y));
  left: calc(var(--pxtm-issue-size) * var(--pxtm-issue-num-x));
  z-index: 2;
  color: var(--pxtm-issue-num-color);
  font-family: var(--pxtm-font-serif);
  font-size: calc(var(--pxtm-issue-size) * var(--pxtm-issue-num-scale));
  font-style: italic;
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.02em;
  pointer-events: none;
  transition: translate 0.45s cubic-bezier(0.22, 0.61, 0.36, 1),
    text-shadow 0.45s ease;
}

/* ----- Chữ mô tả (thường, không đậm) ----- */
#pxtm-landing .pxtm-issues__text {
  margin: 22px 0 0;
  padding: 0 4%;
  color: var(--pxtm-primary);
  font-family: var(--pxtm-font-sans);
  font-size: var(--pxtm-issue-text-size);
  font-weight: 400;
  line-height: 1.35;
}

/* ----- Hover: ảnh zoom + viền sáng + số nhấc lên (dùng scale/translate riêng,
 *        không đè transform của reveal) ----- */
@media (hover: hover) {
  .pxtm-issues__item:hover .pxtm-issues__circle {
    box-shadow: 0 0 0 6px rgba(255, 255, 255, 0.85),
      0 18px 36px rgba(113, 13, 172, 0.28);
    scale: 1.02;
  }

  .pxtm-issues__item:hover .pxtm-issues__image {
    scale: 1.1;
  }

  .pxtm-issues__item:hover .pxtm-issues__num {
    translate: -6px -10px;
    text-shadow: 0 8px 18px rgba(113, 13, 172, 0.3);
  }
}

/* ----- Tablet ----- */
@media (min-width: 769px) and (max-width: 1024px) {
  .pxtm-issues {
    --pxtm-issue-size: clamp(200px, 25vw, 240px);
    --pxtm-issue-gap-x: 44px;
    --pxtm-issue-gap-y: 80px;
    --pxtm-issue-text-size: 18px;
    --pxtm-issue-title-gap: 60px;

    padding: 64px 24px 88px;
  }
}

/* ----- Mobile: 2 mục / hàng ----- */
@media (max-width: 768px) {
  .pxtm-issues {
    /* ~170px tại màn 420 */
    --pxtm-issue-size: min(180px, calc((100vw - 32px - 44px) / 2));
    --pxtm-issue-gap-x: 28px;
    --pxtm-issue-gap-y: 52px;
    /* 16px ở màn 375 → 17px từ màn ~425 */
    --pxtm-issue-text-size: clamp(16px, 4vw, 17px);
    --pxtm-issue-title-gap: 40px;

    padding: 48px 16px 60px;
  }

  #pxtm-landing .pxtm-issues__grid {
    grid-template-columns: repeat(2, var(--pxtm-issue-size));
  }

  #pxtm-landing .pxtm-issues__text {
    margin-top: 14px;
    padding: 0 2%;
    line-height: 1.32;
  }
}

/* =========================================================
 * SECTION: GIẢI PHÁP – Phun xăm thẩm mỹ Mày - Môi - Mí tôn đường nét
 * 3 card ngang xếp dọc: text trái | ảnh before/after (2:1) phải.
 * Mobile vẫn giữ 2 cột trong card (text ~46% | ảnh ~54%).
 * Biến chỉnh nhanh (khai báo trên .pxtm-solution):
 *   --pxtm-sol-max       : chiều rộng tối đa khối card
 *   --pxtm-sol-img-col   : tỉ lệ cột ảnh trong card
 *   --pxtm-sol-img-ratio : tỉ lệ khung ảnh (khớp ảnh xuất 1200x600)
 *   --pxtm-sol-text-size : cỡ chữ trong card
 *   --pxtm-sol-gap       : khoảng cách giữa các card
 * ========================================================= */
.pxtm-solution {
  --pxtm-sol-max: 1100px;
  --pxtm-sol-img-col: 55%;
  --pxtm-sol-img-ratio: 2 / 1;
  --pxtm-sol-text-size: 26px;
  --pxtm-sol-gap: 32px;

  position: relative;
  width: 100%;
  padding: 40px 24px 110px;
}

.pxtm-solution__inner {
  max-width: 1312px;
  margin: 0 auto;
}

/* ----- Tiêu đề: keyword gradient / pill + chữ tím ----- */
#pxtm-landing .pxtm-solution__heading {
  margin-bottom: 26px;
}

.pxtm-solution__title-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 12px 22px;
  margin-top: 10px;
}

#pxtm-landing .pxtm-solution__title-row .pxtm-pill-title {
  margin-top: 0;
}

#pxtm-landing .pxtm-solution__tail {
  margin-top: 0;
}

#pxtm-landing .pxtm-solution__desc {
  max-width: 980px;
  margin: 0 auto 56px;
  text-align: center;
  text-wrap: pretty;
}

/* ----- Danh sách card (reset ul/li Flatsome) ----- */
#pxtm-landing .pxtm-solution__list {
  display: flex;
  flex-direction: column;
  gap: var(--pxtm-sol-gap);
  max-width: var(--pxtm-sol-max);
  margin: 0 auto;
  padding: 0;
  list-style: none;
}

/* ----- Card: CSS theo brief ----- */
#pxtm-landing .pxtm-solution__card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--pxtm-sol-img-col);
  align-items: stretch;
  margin: 0;
  overflow: hidden;
  border: 0.611px solid #fff;
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.2);
  box-shadow: 0 4px 4px 0 rgba(247, 66, 137, 0.17),
    0 0 11.97px 4.886px #fff inset;
  list-style: none;
  transition: translate 0.4s cubic-bezier(0.22, 0.61, 0.36, 1),
    box-shadow 0.4s ease;
}

#pxtm-landing .pxtm-solution__text {
  display: flex;
  align-items: center;
  margin: 0;
  padding: 28px 40px 28px 48px;
  color: var(--pxtm-primary);
  font-family: var(--pxtm-font-sans);
  font-size: var(--pxtm-sol-text-size);
  font-weight: 500;
  line-height: 1.35;
  text-wrap: pretty;
}

.pxtm-solution__media {
  position: relative;
  aspect-ratio: var(--pxtm-sol-img-ratio);
  overflow: hidden;
  border-radius: 0 24px 24px 0;
}

#pxtm-landing .pxtm-solution__image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: scale 0.6s cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* ----- Hover: card nhấc lên + bóng hồng đậm hơn + ảnh zoom nhẹ ----- */
@media (hover: hover) {
  #pxtm-landing .pxtm-solution__card:hover {
    translate: 0 -6px;
    box-shadow: 0 14px 28px 0 rgba(247, 66, 137, 0.22),
      0 0 11.97px 4.886px #fff inset;
  }

  .pxtm-solution__card:hover .pxtm-solution__image {
    scale: 1.06;
  }
}

/* ----- Tablet ----- */
@media (min-width: 769px) and (max-width: 1024px) {
  .pxtm-solution {
    --pxtm-sol-text-size: 22px;
    --pxtm-sol-gap: 26px;

    padding: 32px 24px 88px;
  }

  #pxtm-landing .pxtm-solution__text {
    padding: 24px 28px 24px 36px;
  }
}

/* ----- Mobile ----- */
@media (max-width: 768px) {
  .pxtm-solution {
    --pxtm-sol-img-col: 53%;
    /* 16px từ màn ~410, nhỏ nhất 15px ở màn 375 để card không cao quá ảnh */
    --pxtm-sol-text-size: clamp(15px, 3.9vw, 16px);
    --pxtm-sol-gap: 18px;

    padding: 24px 16px 60px;
  }

  /* Keyword dài → nhỏ hơn heading chuẩn 64px để nằm gọn 1 dòng */
  #pxtm-landing .pxtm-solution__keyword {
    font-size: clamp(36px, 10.6vw, 52px);
  }

  .pxtm-solution__title-row {
    gap: 10px 12px;
    margin-top: 8px;
  }

  #pxtm-landing .pxtm-solution__heading {
    margin-bottom: 18px;
  }

  #pxtm-landing .pxtm-solution__desc {
    margin-bottom: 32px;
  }

  #pxtm-landing .pxtm-solution__card {
    border-radius: 18px;
  }

  #pxtm-landing .pxtm-solution__text {
    padding: 10px 8px 10px 14px;
    line-height: 1.3;
  }

  .pxtm-solution__media {
    border-radius: 0 18px 18px 0;
  }
}

/* =========================================================
 * SECTION: DỊCH VỤ MÀY – MÔI – MÍ
 * Chống "3 layout giống nhau gây nhàm":
 *  1. Thanh chọn dịch vụ dính trên cùng (sticky) + vệt gradient trượt theo
 *     panel đang xem, bấm để nhảy tới panel.
 *  2. Panel zigzag: panel 2 (môi) đảo trái ↔ phải.
 *  3. Mỗi panel 1 tông sáng riêng + số lớn 01/02/03 chìm ở góc.
 *  4. Ảnh chính lộ ra kiểu "kéo rèm" theo hướng của panel, card nảy lệch nhịp.
 *  5. Mobile: card dịch vụ thành hàng vuốt ngang + thanh tiến trình → gọn.
 * Biến chỉnh nhanh:
 *   .pxtm-services  --pxtm-nav-gap       : khoảng cách thanh chọn ↔ header site
 *   .pxtm-svc       --pxtm-svc-tint      : màu sáng nền của từng panel
 *                   --pxtm-svc-media-w   : chiều rộng tối đa ảnh chính
 *                   --pxtm-svc-intro-col : tỉ lệ cột giới thiệu (desktop)
 *   (inline, lấy từ data) --pxtm-svc-cols / --pxtm-svc-card-w / --pxtm-svc-thumb-ratio
 * ========================================================= */
.pxtm-services {
  --pxtm-nav-gap: 12px;

  position: relative;
  width: 100%;
  padding: 30px 24px 110px;
}

/* ----- Thanh chọn dịch vụ (sticky) ----- */
.pxtm-services__nav {
  position: sticky;
  /* --pxtm-sticky-top: chiều cao header dính của site (JS đo chung, chỉ
   * cập nhật khi đổi) – KHÔNG transition "top" để không rung khi cuộn */
  top: calc(var(--pxtm-sticky-top, 0px) + var(--pxtm-nav-gap));
  z-index: 30;
  display: flex;
  justify-content: center;
  margin: 0 auto 44px;
  pointer-events: none;
}

.pxtm-services__tabs {
  position: relative;
  display: inline-flex;
  gap: 4px;
  padding: 6px;
  border: 1px solid #fff;
  border-radius: var(--pxtm-radius-pill);
  background: rgba(255, 255, 255, 0.75);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  box-shadow: 0 10px 26px rgba(113, 13, 172, 0.18),
    0 0 10px 3px #fff inset;
  pointer-events: auto;
}

#pxtm-landing .pxtm-services__tab {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: baseline;
  justify-content: center;
  gap: 8px;
  padding: 13px 34px 12px;
  border-radius: var(--pxtm-radius-pill);
  color: var(--pxtm-primary);
  font-family: var(--pxtm-font-sans);
  font-size: 18px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.02em;
  text-decoration: none;
  text-transform: uppercase;
  white-space: nowrap;
  transition: color 0.35s ease, background-color 0.3s ease;
}

.pxtm-services__tab-num {
  font-family: var(--pxtm-font-serif);
  font-size: 1.2em;
  font-style: italic;
  letter-spacing: 0;
  text-transform: none;
  opacity: 0.75;
}

#pxtm-landing .pxtm-services__tab.is-active {
  color: var(--pxtm-white);
}

@media (hover: hover) {
  #pxtm-landing .pxtm-services__tab:not(.is-active):hover {
    background: rgba(172, 89, 255, 0.12);
  }
}

#pxtm-landing .pxtm-services__tab:focus-visible {
  outline: 3px solid var(--pxtm-primary);
  outline-offset: 2px;
}

/* Không JS: tô trực tiếp nút đầu. Có JS: vệt gradient trượt. */
#pxtm-landing:not(.is-js) .pxtm-services__tab.is-active {
  background: var(--pxtm-grad-cta);
}

.pxtm-services__indicator {
  position: absolute;
  top: 6px;
  bottom: 6px;
  left: 0;
  width: var(--pxtm-ind-w, 0px);
  border-radius: var(--pxtm-radius-pill);
  background: var(--pxtm-grad-cta);
  background-size: 200% 100%;
  box-shadow: var(--pxtm-cta-shadow);
  opacity: 0;
  transform: translateX(var(--pxtm-ind-x, 0px));
  transition: transform 0.55s cubic-bezier(0.65, 0, 0.35, 1),
    width 0.55s cubic-bezier(0.65, 0, 0.35, 1), opacity 0.3s ease;
  animation: pxtm-ind-flow 4s linear infinite;
}

.pxtm-services__indicator.is-ready {
  opacity: 1;
}

@keyframes pxtm-ind-flow {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: 200% 0;
  }
}

/* ----- Danh sách panel ----- */
.pxtm-services__panels {
  display: flex;
  flex-direction: column;
  gap: 56px;
  max-width: 1312px;
  margin: 0 auto;
}

/* ----- Panel: grid 2 cột, cột giới thiệu + cột card ----- */
.pxtm-svc {
  --pxtm-svc-tint: rgba(172, 89, 255, 0.2);
  --pxtm-svc-tint-x: 18%;
  --pxtm-svc-media-w: 460px;
  --pxtm-svc-intro-col: 42fr;
  --pxtm-svc-radius: 40px;

  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: minmax(0, var(--pxtm-svc-intro-col)) minmax(0, 58fr);
  grid-template-rows: 1fr auto auto auto auto 1fr;
  grid-template-areas:
    ". side"
    "head side"
    "media side"
    "text side"
    "cta side"
    ". side";
  column-gap: 56px;
  padding: 56px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.9);
  border-radius: var(--pxtm-svc-radius);
  background: rgba(255, 255, 255, 0.28);
  box-shadow: 0 12px 32px rgba(113, 13, 172, 0.08),
    0 0 16px 6px #fff inset;
}

.pxtm-svc--moi {
  --pxtm-svc-tint: rgba(247, 66, 137, 0.16);
}

.pxtm-svc--mi {
  --pxtm-svc-tint: rgba(150, 21, 210, 0.16);
}

.pxtm-svc--reverse {
  --pxtm-svc-tint-x: 82%;

  grid-template-columns: minmax(0, 58fr) minmax(0, var(--pxtm-svc-intro-col));
  grid-template-areas:
    "side ."
    "side head"
    "side media"
    "side text"
    "side cta"
    "side .";
}

/* Quầng sáng riêng từng panel */
.pxtm-svc::before {
  position: absolute;
  inset: 0;
  z-index: -2;
  content: "";
  background: radial-gradient(
    circle at var(--pxtm-svc-tint-x) 38%,
    var(--pxtm-svc-tint) 0,
    rgba(255, 255, 255, 0) 52%
  );
  pointer-events: none;
}

/* Số lớn chìm ở góc đối diện cột giới thiệu */
.pxtm-svc__num {
  position: absolute;
  top: -0.12em;
  right: 0.12em;
  z-index: -1;
  color: rgba(113, 13, 172, 0.07);
  font-family: var(--pxtm-font-serif);
  font-size: 240px;
  font-style: italic;
  line-height: 1;
  pointer-events: none;
  user-select: none;
}

.pxtm-svc--reverse .pxtm-svc__num {
  right: auto;
  left: 0.08em;
}

/* ----- Cột giới thiệu ----- */
#pxtm-landing .pxtm-svc__head {
  grid-area: head;
  margin: 0 0 22px;
}

#pxtm-landing .pxtm-svc__keyword {
  font-size: 84px;
}

#pxtm-landing .pxtm-svc__tail {
  margin-top: 4px;
  font-size: 30px;
}

.pxtm-svc__media {
  grid-area: media;
  justify-self: center;
  width: 100%;
  max-width: var(--pxtm-svc-media-w);
  aspect-ratio: 6 / 5;
  margin: 0 0 22px;
  overflow: hidden;
  border-radius: 28px;
  /* Viền ảnh mờ dần vào nền như Figma. Bỏ hiệu ứng: mask-image: none */
  -webkit-mask-image: radial-gradient(ellipse 72% 72% at 50% 50%, #000 62%, transparent 100%);
  mask-image: radial-gradient(ellipse 72% 72% at 50% 50%, #000 62%, transparent 100%);
}

/* Lớp "rèm": clip-path đặt ở lớp con, KHÔNG đặt trên phần tử có
 * data-pxtm-reveal (clip kín 100% làm IntersectionObserver không bắt được) */
.pxtm-svc__curtain {
  display: block;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: inherit;
}

#pxtm-landing .pxtm-svc__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

#pxtm-landing .pxtm-svc__text {
  grid-area: text;
  justify-self: center;
  width: 100%;
  max-width: var(--pxtm-svc-media-w);
  margin: 0 0 26px;
  text-wrap: pretty;
}

.pxtm-svc__cta {
  grid-area: cta;
  display: flex;
  justify-content: center;
}

.pxtm-svc__cta .pxtm-btn {
  --pxtm-btn-w: 240px;
}

/* ----- Cột card dịch vụ ----- */
.pxtm-svc__side {
  grid-area: side;
  display: flex;
  flex-direction: column;
  align-items: center;
  align-self: center;
  min-width: 0;
}

#pxtm-landing .pxtm-svc__list {
  display: grid;
  grid-template-columns: repeat(var(--pxtm-svc-cols, 2), minmax(0, var(--pxtm-svc-card-w, 260px)));
  justify-content: center;
  gap: 22px;
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}

#pxtm-landing .pxtm-svc__item {
  display: flex;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Card kính – cùng CSS card của section Giải pháp */
#pxtm-landing .pxtm-svc__card {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  padding: 8px 8px 0;
  border: 0.611px solid #fff;
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.35);
  box-shadow: 0 4px 4px 0 rgba(247, 66, 137, 0.17),
    0 0 11.97px 4.886px #fff inset;
  color: var(--pxtm-primary);
  text-decoration: none;
  transition: translate 0.4s cubic-bezier(0.22, 0.61, 0.36, 1),
    box-shadow 0.4s ease;
}

/* Viền gradient tím → hồng quanh ảnh */
.pxtm-svc__thumb {
  display: block;
  padding: 2px;
  border-radius: 20px;
  background: var(--pxtm-grad-title-2);
}

.pxtm-svc__thumb-inner {
  display: block;
  overflow: hidden;
  border-radius: 18px;
  background: #efe6fb;
}

#pxtm-landing .pxtm-svc__thumb-image {
  width: 100%;
  aspect-ratio: var(--pxtm-svc-thumb-ratio, 5 / 4);
  object-fit: cover;
  transition: scale 0.6s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.pxtm-svc__name {
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  justify-content: center;
  min-height: 3.2em;
  padding: 10px 6px 12px;
  font-family: var(--pxtm-font-sans);
  font-size: 18px;
  font-weight: 500;
  line-height: 1.3;
  text-align: center;
  text-wrap: balance;
}

/* Khóa màu chữ ở mọi trạng thái – theme đổi màu link khi hover (trắng) */
#pxtm-landing .pxtm-svc__card,
#pxtm-landing .pxtm-svc__card:hover,
#pxtm-landing .pxtm-svc__card:focus,
#pxtm-landing .pxtm-svc__card:active,
#pxtm-landing .pxtm-svc__card:visited,
#pxtm-landing .pxtm-svc__card .pxtm-svc__name {
  color: var(--pxtm-primary);
}

#pxtm-landing .pxtm-svc__card:hover .pxtm-svc__name {
  color: #9615d2;
}

/* ----- Card dịch vụ HOT: viền cam → hồng, nền ấm, tag "Hot" ----- */
#pxtm-landing .pxtm-svc__card.is-hot {
  position: relative;
  border: 2px solid transparent;
  background:
    linear-gradient(180deg, rgba(255, 250, 246, 0.92), rgba(255, 240, 246, 0.92)) padding-box,
    linear-gradient(135deg, #ffb04e 0%, #f74289 55%, #ac59ff 100%) border-box;
  box-shadow: 0 10px 26px rgba(247, 66, 137, 0.28), 0 0 0 4px rgba(255, 176, 78, 0.14);
}

#pxtm-landing .pxtm-svc__card.is-hot .pxtm-svc__thumb {
  background: linear-gradient(135deg, #ffb04e 0%, #f74289 100%);
}

#pxtm-landing .pxtm-svc__card.is-hot .pxtm-svc__name {
  color: #c2185b;
  font-weight: 500;
}

.pxtm-svc__hot {
  position: absolute;
  top: -12px;
  left: 50%;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 12px 5px 10px;
  overflow: hidden;
  border: 2px solid #fff;
  border-radius: var(--pxtm-radius-pill);
  background: linear-gradient(135deg, #ff9a3c 0%, #f74289 100%);
  box-shadow: 0 6px 14px rgba(247, 66, 137, 0.45);
  color: #fff;
  font-family: var(--pxtm-font-sans);
  font-size: 13px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  translate: -50% 0;
  animation: pxtm-hot-bob 2.4s ease-in-out infinite;
}

.pxtm-svc__hot svg {
  flex: 0 0 auto;
  animation: pxtm-hot-flame 0.9s ease-in-out infinite alternate;
}

/* Vệt sáng quét qua tag */
.pxtm-svc__hot::after {
  position: absolute;
  top: 0;
  left: -60%;
  width: 40%;
  height: 100%;
  content: "";
  background: linear-gradient(100deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.7) 50%, rgba(255, 255, 255, 0) 100%);
  animation: pxtm-hot-shine 2.8s ease-in-out infinite;
}

@keyframes pxtm-hot-bob {
  0%,
  100% {
    translate: -50% 0;
  }
  50% {
    translate: -50% -3px;
  }
}

@keyframes pxtm-hot-flame {
  from {
    scale: 1;
  }
  to {
    scale: 1.2;
  }
}

@keyframes pxtm-hot-shine {
  0%,
  55% {
    left: -60%;
  }
  100% {
    left: 130%;
  }
}

@media (hover: hover) {
  #pxtm-landing .pxtm-svc__card.is-hot:hover {
    box-shadow: 0 18px 34px rgba(247, 66, 137, 0.36), 0 0 0 5px rgba(255, 176, 78, 0.2);
  }

  #pxtm-landing .pxtm-svc__card.is-hot:hover .pxtm-svc__name {
    color: #f74289;
  }

  #pxtm-landing .pxtm-svc__card:hover {
    translate: 0 -8px;
    box-shadow: 0 16px 30px 0 rgba(247, 66, 137, 0.24),
      0 0 11.97px 4.886px #fff inset;
  }

  .pxtm-svc__card:hover .pxtm-svc__thumb-image {
    scale: 1.08;
  }
}

#pxtm-landing .pxtm-svc__card:focus-visible {
  outline: 3px solid var(--pxtm-primary);
  outline-offset: 3px;
}

/* Thanh tiến trình – chỉ hiện khi hàng card cuộn ngang (mobile) */
#pxtm-landing .pxtm-svc__progress {
  display: none;
}

/* ----- Reveal riêng: ảnh chính "kéo rèm" theo hướng panel ----- */
#pxtm-landing.is-js .pxtm-svc__media[data-pxtm-reveal] {
  opacity: 1;
  transform: none;
}

#pxtm-landing.is-js .pxtm-svc__media[data-pxtm-reveal] .pxtm-svc__curtain {
  clip-path: inset(0 100% 0 0);
  transition: clip-path 1.1s cubic-bezier(0.77, 0, 0.18, 1);
}

#pxtm-landing.is-js .pxtm-svc--reverse .pxtm-svc__media[data-pxtm-reveal] .pxtm-svc__curtain {
  clip-path: inset(0 0 0 100%);
}

#pxtm-landing.is-js .pxtm-svc__media[data-pxtm-reveal] .pxtm-svc__image {
  scale: 1.18;
  transition: scale 1.5s cubic-bezier(0.22, 0.61, 0.36, 1);
}

#pxtm-landing.is-js .pxtm-svc .pxtm-svc__media[data-pxtm-reveal].is-in .pxtm-svc__curtain {
  clip-path: inset(0 0 0 0);
}

#pxtm-landing.is-js .pxtm-svc__media[data-pxtm-reveal].is-in .pxtm-svc__image {
  scale: 1;
}

/* Card: nảy nhẹ khi xuất hiện */
#pxtm-landing.is-js .pxtm-svc__item[data-pxtm-reveal] {
  transform: translateY(40px) scale(0.94);
  transition: opacity 0.6s ease, transform 0.75s cubic-bezier(0.34, 1.45, 0.64, 1);
  transition-delay: calc(0.15s + var(--i, 0) * 0.1s);
}

#pxtm-landing.is-js .pxtm-svc__item[data-pxtm-reveal].is-in {
  transform: none;
}

/* ----- Tablet: 1 cột, lưới card bên dưới ----- */
@media (min-width: 769px) and (max-width: 1024px) {
  .pxtm-services {
    padding: 24px 24px 88px;
  }

  .pxtm-svc,
  .pxtm-svc--reverse {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: none;
    grid-template-areas: "head" "media" "text" "side" "cta";
    padding: 48px 40px;
  }

  #pxtm-landing .pxtm-svc__text {
    margin-bottom: 0;
  }

  .pxtm-svc__side {
    margin-top: 40px;
  }

  .pxtm-svc__cta {
    margin-top: 36px;
  }

  #pxtm-landing .pxtm-svc__list {
    --pxtm-svc-card-w: 210px;
  }

  .pxtm-svc__num {
    font-size: 190px;
  }
}

/* ----- Mobile ----- */
@media (max-width: 768px) {
  .pxtm-services {
    --pxtm-nav-gap: 8px;

    padding: 20px 16px 60px;
  }

  .pxtm-services__nav {
    margin-bottom: 24px;
    /* Tách lớp riêng cho GPU → không rung/nhòe khi cuộn trên mobile */
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
  }

  .pxtm-services__tabs {
    background: rgba(255, 255, 255, 0.96);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 2px;
    width: 100%;
    max-width: 400px;
    padding: 5px;
  }

  #pxtm-landing .pxtm-services__tab {
    gap: 5px;
    padding: 11px 4px 10px;
    font-size: 14px;
    letter-spacing: 0.01em;
  }

  .pxtm-services__indicator {
    top: 5px;
    bottom: 5px;
  }

  .pxtm-services__panels {
    gap: 28px;
  }

  /* Panel 1 cột: tiêu đề → ảnh → mô tả → card → CTA */
  .pxtm-svc,
  .pxtm-svc--reverse {
    --pxtm-svc-radius: 28px;

    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: none;
    grid-template-areas: "head" "media" "text" "side" "cta";
    padding: 30px 18px 28px;
  }

  .pxtm-svc::before {
    background: radial-gradient(
      circle at 50% 22%,
      var(--pxtm-svc-tint) 0,
      rgba(255, 255, 255, 0) 60%
    );
  }

  .pxtm-svc__num,
  .pxtm-svc--reverse .pxtm-svc__num {
    right: 0.06em;
    left: auto;
    font-size: 130px;
  }

  #pxtm-landing .pxtm-svc__head {
    margin-bottom: 16px;
  }

  #pxtm-landing .pxtm-svc__keyword {
    font-size: 60px;
  }

  #pxtm-landing .pxtm-svc__tail {
    font-size: 20px;
  }

  .pxtm-svc__media {
    margin-bottom: 16px;
    border-radius: 22px;
  }

  #pxtm-landing .pxtm-svc__text {
    margin-bottom: 0;
  }

  .pxtm-svc__side {
    margin-top: 26px;
  }

  /* Hàng card vuốt ngang (tràn sát mép panel) */
  #pxtm-landing .pxtm-svc__list {
    display: flex;
    justify-content: flex-start;
    gap: 12px;
    width: auto;
    align-self: stretch;
    margin: 0 -18px;
    padding: 20px 18px 16px; /* chừa chỗ tag "Hot" nhô lên */
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-padding-inline: 18px;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  #pxtm-landing .pxtm-svc__list::-webkit-scrollbar {
    display: none;
  }

  #pxtm-landing .pxtm-svc__item {
    flex: 0 0 43%;
    scroll-snap-align: start;
  }

  #pxtm-landing .pxtm-svc__card {
    padding: 6px 6px 0;
    border-radius: 20px;
  }

  .pxtm-svc__thumb {
    border-radius: 16px;
  }

  .pxtm-svc__thumb-inner {
    border-radius: 14px;
  }

  .pxtm-svc__name {
    min-height: 3em;
    padding: 8px 4px 10px;
    font-size: 15px;
  }

  #pxtm-landing .pxtm-svc__progress {
    position: relative;
    display: block;
    width: 120px;
    height: 4px;
    margin: 4px auto 0;
    overflow: hidden;
    border-radius: var(--pxtm-radius-pill);
    background: #e6dbf5;
  }

  #pxtm-landing .pxtm-svc__progress.is-static {
    display: none;
  }

  .pxtm-svc__progress-bar {
    position: absolute;
    top: 0;
    left: 0;
    width: 40%;
    height: 100%;
    border-radius: inherit;
    background: var(--pxtm-grad-title-2);
  }

  .pxtm-svc__cta {
    margin-top: 24px;
  }

  /* CTA dài (vd "Tư vấn miễn phí theo tình trạng môi") → nút giãn full
   * khung, cho phép xuống 2 dòng thay vì tràn mép */
  #pxtm-landing .pxtm-svc__cta .pxtm-btn {
    width: 100%;
    min-width: 0;
    max-width: 340px;
    height: auto;
    min-height: 52px;
    padding: 12px 18px;
    font-size: 15px;
    line-height: 1.25;
    white-space: normal;
  }

  /* Mobile: ảnh kéo rèm từ dưới lên cho mọi panel */
  #pxtm-landing.is-js .pxtm-svc__media[data-pxtm-reveal] .pxtm-svc__curtain,
  #pxtm-landing.is-js .pxtm-svc--reverse .pxtm-svc__media[data-pxtm-reveal] .pxtm-svc__curtain {
    clip-path: inset(100% 0 0 0);
  }

  #pxtm-landing.is-js .pxtm-svc .pxtm-svc__media[data-pxtm-reveal].is-in .pxtm-svc__curtain {
    clip-path: inset(0 0 0 0);
  }
}

@media (max-width: 380px) {
  #pxtm-landing .pxtm-svc__keyword {
    font-size: 52px;
  }

  .pxtm-services__tab-num {
    display: none;
  }
}

/* =========================================================
 * SECTION: KẾT QUẢ TRƯỚC / SAU
 * Bố cục "showcase" – mỗi lần 1 khách:
 *   ảnh kéo so sánh (trái) chồng lớp lên khung kính thông tin (phải),
 *   dải avatar 5 khách + nút trước/sau bên dưới để chuyển.
 * Tương tác:
 *   - Kéo thanh giữa (chuột / tay / phím ← →), bấm chỗ nào nhảy tới đó.
 *   - Kéo lệch về bên nào, cột chữ tương ứng (Trước / Sau) sáng lên,
 *     cột còn lại mờ đi → chữ "phản hồi" theo tay kéo.
 *   - Lần đầu thấy + mỗi lần đổi khách: thanh tự lắc nhẹ gợi ý kéo.
 * Biến chỉnh nhanh (trên .pxtm-ba):
 *   --pxtm-ba-compare-w : chiều rộng ảnh so sánh (desktop)
 *   --pxtm-ba-ratio     : tỉ lệ ảnh (khớp ảnh xuất 800x1000)
 *   --pxtm-ba-overlap   : độ chồng của ảnh lên khung thông tin
 *   --pxtm-ba-item-size : cỡ chữ dòng mô tả trước/sau
 * ========================================================= */
.pxtm-results {
  position: relative;
  width: 100%;
  padding: 40px 24px 110px;
}

.pxtm-results__inner {
  max-width: 1312px;
  margin: 0 auto;
}

#pxtm-landing .pxtm-results__heading {
  margin-bottom: 56px;
}

.pxtm-ba {
  /* Ảnh so sánh to theo màn hình nhưng luôn lọt khung nhìn:
   * rộng 38vw, cao không quá (100vh - 190px), trong khoảng 420 → 620px */
  --pxtm-ba-compare-w: clamp(420px, min(38vw, calc((100vh - 190px) * 0.8)), 620px);
  --pxtm-ba-ratio: 4 / 5;
  --pxtm-ba-overlap: 100px;
  --pxtm-ba-item-size: 19px;
  --pxtm-ba-dir: 1;

  max-width: 1300px;
  margin: 0 auto;
}

/* ----- Stage: các case chồng cùng 1 ô lưới (chỉ khi có JS) ----- */
.pxtm-ba__stage {
  display: grid;
  gap: 48px;
}

#pxtm-landing.is-js .pxtm-ba__stage {
  gap: 0;
}

#pxtm-landing.is-js .pxtm-ba__case {
  grid-area: 1 / 1;
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.45s ease, visibility 0s linear 0.45s;
}

#pxtm-landing.is-js .pxtm-ba__case.is-active {
  z-index: 1;
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
  transition: opacity 0.45s ease, visibility 0s;
}

/* ----- Case: ảnh trái chồng lên khung thông tin phải ----- */
.pxtm-ba__case {
  display: grid;
  grid-template-columns: var(--pxtm-ba-compare-w) minmax(0, 1fr);
  align-items: center;
}

/* ----- Ảnh kéo so sánh ----- */
.pxtm-ba__compare {
  --pxtm-ba-pos: 50%;

  position: relative;
  z-index: 2;
  isolation: isolate;
  width: 100%;
  aspect-ratio: var(--pxtm-ba-ratio);
  overflow: hidden;
  border: 4px solid #fff;
  border-radius: 30px;
  background: #e9dcf7;
  box-shadow: 0 22px 44px rgba(113, 13, 172, 0.22), 0 4px 10px rgba(247, 66, 137, 0.15);
  cursor: ew-resize;
  touch-action: pan-y; /* vuốt dọc vẫn cuộn trang, vuốt ngang để kéo */
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
}

#pxtm-landing .pxtm-ba__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  pointer-events: none;
  -webkit-user-drag: none;
}

.pxtm-ba__before {
  position: absolute;
  inset: 0;
  z-index: 1;
  clip-path: inset(0 calc(100% - var(--pxtm-ba-pos)) 0 0);
  will-change: clip-path;
}

/* Nhãn TRƯỚC / SAU – tự mờ khi phía đó gần bị che hết */
.pxtm-ba__tag {
  position: absolute;
  bottom: 18px;
  z-index: 3;
  padding: 8px 20px 7px;
  border: 1px solid rgba(255, 255, 255, 0.9);
  border-radius: var(--pxtm-radius-pill);
  background: rgba(255, 255, 255, 0.82);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  color: var(--pxtm-primary);
  font-family: var(--pxtm-font-sans);
  font-size: 15px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.02em;
  text-transform: none;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.pxtm-ba__tag--before {
  left: 18px;
}

.pxtm-ba__tag--after {
  right: 18px;
}

.pxtm-ba__compare.is-hide-before .pxtm-ba__tag--before,
.pxtm-ba__compare.is-hide-after .pxtm-ba__tag--after {
  opacity: 0;
}

/* Thanh chia: phủ kín khung, dịch theo --pxtm-ba-pos (chỉ transform → mượt) */
.pxtm-ba__divider {
  position: absolute;
  inset: 0;
  z-index: 4;
  transform: translateX(var(--pxtm-ba-pos));
  pointer-events: none;
  will-change: transform;
}

.pxtm-ba__divider::before {
  position: absolute;
  top: 0;
  bottom: 0;
  left: -1.5px;
  width: 3px;
  content: "";
  background: #fff;
  box-shadow: 0 0 12px rgba(113, 13, 172, 0.45);
}

.pxtm-ba__handle {
  position: absolute;
  top: 50%;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 58px;
  height: 58px;
  margin: -29px 0 0 -29px;
  border: 3px solid #fff;
  border-radius: 50%;
  background: var(--pxtm-grad-cta);
  background-size: 200% 100%;
  box-shadow: 0 6px 16px rgba(113, 13, 172, 0.4);
  color: #fff;
  cursor: grab;
  pointer-events: auto;
  touch-action: none;
  outline: none;
  transition: scale 0.25s ease, box-shadow 0.25s ease;
}

/* Vòng sóng mời kéo – tắt sau lần kéo đầu */
.pxtm-ba__handle::after {
  position: absolute;
  inset: -3px;
  content: "";
  border: 2px solid rgba(255, 255, 255, 0.9);
  border-radius: 50%;
  animation: pxtm-ba-ring 1.8s ease-out infinite;
  pointer-events: none;
}

.pxtm-ba__compare.is-touched .pxtm-ba__handle::after {
  animation: none;
  opacity: 0;
}

@keyframes pxtm-ba-ring {
  0% {
    opacity: 0.9;
    scale: 1;
  }
  100% {
    opacity: 0;
    scale: 1.7;
  }
}

.pxtm-ba__compare.is-dragging,
.pxtm-ba__compare.is-dragging .pxtm-ba__handle {
  cursor: grabbing;
}

.pxtm-ba__compare.is-dragging .pxtm-ba__handle,
.pxtm-ba__handle:hover {
  scale: 1.1;
  box-shadow: 0 8px 22px rgba(113, 13, 172, 0.5);
}

.pxtm-ba__handle:focus-visible {
  box-shadow: 0 0 0 4px rgba(113, 13, 172, 0.55), 0 6px 16px rgba(113, 13, 172, 0.4);
}

/* ----- Khung kính thông tin (CSS nền theo brief) ----- */
.pxtm-ba__info {
  position: relative;
  z-index: 1;
  isolation: isolate;
  margin-left: calc(var(--pxtm-ba-overlap) * -1);
  padding: 44px 48px 46px calc(var(--pxtm-ba-overlap) + 48px);
  overflow: hidden;
  border: 0.611px solid #fff;
  border-radius: 30px;
  background: rgba(255, 255, 255, 0.2);
  box-shadow: 0 4px 4px 0 rgba(247, 66, 137, 0.17),
    0 0 11.97px 4.886px #fff inset;
}

.pxtm-ba__watermark {
  position: absolute;
  top: -0.14em;
  right: 0.12em;
  z-index: -1;
  color: rgba(113, 13, 172, 0.07);
  font-family: var(--pxtm-font-serif);
  font-size: 200px;
  font-style: italic;
  line-height: 1;
  pointer-events: none;
  user-select: none;
}

.pxtm-ba__meta {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 10px;
}

.pxtm-ba__service {
  display: inline-flex;
  padding: 7px 16px 6px;
  border-radius: var(--pxtm-radius-pill);
  background: var(--pxtm-grad-title-2);
  box-shadow: 0 4px 12px rgba(247, 66, 137, 0.25);
  color: #fff;
  font-family: var(--pxtm-font-sans);
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

#pxtm-landing .pxtm-ba__title {
  display: flex;
  flex-direction: column;
  margin: 0 0 26px;
  padding: 0;
  color: var(--pxtm-primary);
  line-height: 1;
  text-transform: none;
  letter-spacing: 0;
}

.pxtm-ba__title-pre {
  font-family: var(--pxtm-font-sans);
  font-size: 22px;
  font-weight: 400;
  line-height: 1.2;
}

.pxtm-ba__name {
  align-self: flex-start;
  padding-right: 0.1em;
  font-family: var(--pxtm-font-serif);
  font-size: 68px;
  font-style: italic;
  font-weight: 400;
  line-height: 1.05;
}

/* ----- 2 cột Trước → Sau ----- */
.pxtm-ba__cols {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: start;
  gap: 18px;
}

.pxtm-ba__col {
  transition: opacity 0.35s ease, filter 0.35s ease, translate 0.35s ease;
}

#pxtm-landing .pxtm-ba__col-title {
  margin: 0 0 12px;
  padding: 0;
  font-family: var(--pxtm-font-sans);
  font-size: 17px;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: 0.01em;
  text-transform: none;
}

#pxtm-landing .pxtm-ba__col--before .pxtm-ba__col-title {
  color: rgba(113, 13, 172, 0.55);
}

#pxtm-landing .pxtm-ba__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

#pxtm-landing .pxtm-ba__list li {
  position: relative;
  margin: 0 0 12px;
  padding: 0 0 0 30px;
  color: var(--pxtm-primary);
  font-family: var(--pxtm-font-sans);
  font-size: var(--pxtm-ba-item-size);
  font-weight: 400;
  line-height: 1.35;
  list-style: none;
}

#pxtm-landing .pxtm-ba__list li:last-child {
  margin-bottom: 0;
}

/* Dấu đầu dòng: ✕ viền mờ (trước) / ✓ nền gradient (sau) */
#pxtm-landing .pxtm-ba__list li::before {
  position: absolute;
  top: 0.12em;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  font-family: Arial, sans-serif;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
}

#pxtm-landing .pxtm-ba__col--before .pxtm-ba__list li {
  color: rgba(113, 13, 172, 0.75);
}

#pxtm-landing .pxtm-ba__col--before .pxtm-ba__list li::before {
  content: "\2715";
  border: 1.5px solid rgba(113, 13, 172, 0.35);
  color: rgba(113, 13, 172, 0.55);
}

#pxtm-landing .pxtm-ba__col--after .pxtm-ba__list li::before {
  content: "\2713";
  background: var(--pxtm-grad-title-2);
  box-shadow: 0 3px 8px rgba(247, 66, 137, 0.3);
  color: #fff;
}

.pxtm-ba__arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  margin-top: 36px;
  border-radius: 50%;
  background: var(--pxtm-grad-cta);
  box-shadow: var(--pxtm-cta-shadow);
  color: #fff;
}

/* Kéo lệch về phía nào → cột đó nổi, cột kia mờ */
.pxtm-ba__case[data-focus="before"] .pxtm-ba__col--after,
.pxtm-ba__case[data-focus="after"] .pxtm-ba__col--before {
  opacity: 0.35;
  filter: saturate(0.4);
}

.pxtm-ba__case[data-focus="before"] .pxtm-ba__col--before,
.pxtm-ba__case[data-focus="after"] .pxtm-ba__col--after {
  translate: 0 -4px;
}

/* ----- Hiệu ứng khi đổi khách (hướng theo nút bấm) ----- */
.pxtm-ba__case.is-entering .pxtm-ba__compare {
  animation: pxtm-ba-in-compare 0.7s cubic-bezier(0.22, 0.61, 0.36, 1) both;
}

.pxtm-ba__case.is-entering .pxtm-ba__meta,
.pxtm-ba__case.is-entering .pxtm-ba__title,
.pxtm-ba__case.is-entering .pxtm-ba__col--before,
.pxtm-ba__case.is-entering .pxtm-ba__arrow,
.pxtm-ba__case.is-entering .pxtm-ba__col--after {
  animation: pxtm-ba-in-text 0.6s cubic-bezier(0.22, 0.61, 0.36, 1) both;
}

.pxtm-ba__case.is-entering .pxtm-ba__title {
  animation-delay: 0.08s;
}

.pxtm-ba__case.is-entering .pxtm-ba__col--before {
  animation-delay: 0.16s;
}

.pxtm-ba__case.is-entering .pxtm-ba__arrow {
  animation-delay: 0.22s;
}

.pxtm-ba__case.is-entering .pxtm-ba__col--after {
  animation-delay: 0.28s;
}

@keyframes pxtm-ba-in-compare {
  from {
    opacity: 0;
    transform: translateX(calc(var(--pxtm-ba-dir) * 60px)) rotate(calc(var(--pxtm-ba-dir) * 2deg)) scale(0.94);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes pxtm-ba-in-text {
  from {
    opacity: 0;
    transform: translateX(calc(var(--pxtm-ba-dir) * 36px));
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* ----- Điều khiển: nút trước/sau + dải avatar ----- */
.pxtm-ba__controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 22px;
  margin-top: 44px;
}

#pxtm-landing .pxtm-ba__nav {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  min-height: 0;
  margin: 0;
  padding: 0;
  border: 1px solid #fff;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.6);
  box-shadow: 0 6px 16px rgba(113, 13, 172, 0.14), 0 0 8px 2px #fff inset;
  color: var(--pxtm-primary);
  cursor: pointer;
  transition: background 0.3s ease, color 0.3s ease, scale 0.25s ease;
}

#pxtm-landing .pxtm-ba__nav:hover,
#pxtm-landing .pxtm-ba__nav:focus-visible {
  background: var(--pxtm-grad-cta);
  color: #fff;
  scale: 1.08;
}

.pxtm-ba__thumbs {
  display: flex;
  gap: 18px;
}

#pxtm-landing .pxtm-ba__thumb {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  min-height: 0;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
  color: var(--pxtm-primary);
  cursor: pointer;
  opacity: 0.55;
  text-transform: none;
  letter-spacing: 0;
  transition: opacity 0.3s ease, scale 0.35s cubic-bezier(0.34, 1.45, 0.64, 1);
}

.pxtm-ba__avatar {
  display: block;
  width: 64px;
  height: 64px;
  padding: 3px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.8);
  box-shadow: 0 4px 10px rgba(113, 13, 172, 0.15);
  transition: background 0.3s ease, box-shadow 0.3s ease;
}

#pxtm-landing .pxtm-ba__avatar img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  object-position: 50% 28%;
}

.pxtm-ba__thumb-name {
  font-family: var(--pxtm-font-sans);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.1;
  white-space: nowrap;
}

#pxtm-landing .pxtm-ba__thumb:hover {
  opacity: 0.85;
}

#pxtm-landing .pxtm-ba__thumb.is-active {
  opacity: 1;
  scale: 1.08;
}

.pxtm-ba__thumb.is-active .pxtm-ba__avatar {
  background: var(--pxtm-grad-title-2);
  box-shadow: 0 6px 16px rgba(247, 66, 137, 0.35);
}

#pxtm-landing .pxtm-ba__thumb:focus-visible {
  outline: 3px solid var(--pxtm-primary);
  outline-offset: 4px;
  border-radius: 12px;
}

/* ----- Tablet ----- */
@media (min-width: 769px) and (max-width: 1024px) {
  .pxtm-results {
    padding: 32px 24px 88px;
  }

  .pxtm-ba {
    --pxtm-ba-compare-w: 380px;
    --pxtm-ba-overlap: 70px;
    --pxtm-ba-item-size: 16px;
  }

  .pxtm-ba__info {
    padding: 34px 28px 34px calc(var(--pxtm-ba-overlap) + 26px);
  }

  .pxtm-ba__name {
    font-size: 52px;
  }

  .pxtm-ba__watermark {
    font-size: 150px;
  }

  .pxtm-ba__cols {
    gap: 12px;
  }

  .pxtm-ba__arrow {
    width: 32px;
    height: 32px;
  }
}

/* ----- Mobile: ảnh trên, khung thông tin luồn dưới ảnh ----- */
@media (max-width: 768px) {
  .pxtm-results {
    padding: 28px 16px 60px;
  }

  #pxtm-landing .pxtm-results__heading {
    margin-bottom: 28px;
  }

  .pxtm-ba {
    --pxtm-ba-overlap: 44px;
    --pxtm-ba-item-size: 15px;
  }

  .pxtm-ba__case {
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
  }

  .pxtm-ba__compare {
    width: calc(100% - 20px);
    max-width: 380px;
    border-width: 3px;
    border-radius: 24px;
  }

  .pxtm-ba__tag {
    bottom: 12px;
    padding: 6px 14px 5px;
    font-size: 12px;
  }

  .pxtm-ba__tag--before {
    left: 12px;
  }

  .pxtm-ba__tag--after {
    right: 12px;
  }

  .pxtm-ba__handle {
    width: 48px;
    height: 48px;
    margin: -24px 0 0 -24px;
  }

  .pxtm-ba__info {
    width: 100%;
    margin: calc(var(--pxtm-ba-overlap) * -1) 0 0;
    padding: calc(var(--pxtm-ba-overlap) + 20px) 16px 22px;
    border-radius: 24px;
  }

  .pxtm-ba__watermark {
    top: auto;
    bottom: -0.2em;
    font-size: 120px;
  }

  .pxtm-ba__meta {
    justify-content: center;
    margin-bottom: 6px;
  }

  .pxtm-ba__service {
    padding: 6px 12px 5px;
    font-size: 12px;
  }

  #pxtm-landing .pxtm-ba__title {
    align-items: center;
    margin-bottom: 18px;
    text-align: center;
  }

  .pxtm-ba__title-pre {
    font-size: 16px;
  }

  .pxtm-ba__name {
    align-self: center;
    font-size: 46px;
  }

  .pxtm-ba__cols {
    gap: 8px;
  }

  #pxtm-landing .pxtm-ba__col-title {
    margin-bottom: 8px;
    font-size: 14px;
  }

  #pxtm-landing .pxtm-ba__list li {
    margin-bottom: 9px;
    padding-left: 22px;
    line-height: 1.3;
  }

  #pxtm-landing .pxtm-ba__list li::before {
    width: 16px;
    height: 16px;
    font-size: 9px;
  }

  .pxtm-ba__arrow {
    width: 26px;
    height: 26px;
    margin-top: 30px;
  }

  .pxtm-ba__arrow svg {
    width: 14px;
    height: 14px;
  }

  /* Dải avatar lên ngay dưới tiêu đề + dính dưới header khi cuộn xem
   * ảnh / nội dung → đổi khách không cần cuộn xuống */
  .pxtm-ba {
    display: flex;
    flex-direction: column;
  }

  .pxtm-ba__controls {
    position: sticky;
    top: calc(var(--pxtm-sticky-top, 0px) + 8px);
    z-index: 20;
    order: -1;
    margin: 0 0 16px;
    padding: 8px 6px 7px;
    border: 1px solid #fff;
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 8px 22px rgba(113, 13, 172, 0.16), 0 0 8px 2px #fff inset;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
  }

  #pxtm-landing .pxtm-ba__nav {
    display: none;
  }

  .pxtm-ba__thumbs {
    justify-content: center;
    gap: 10px;
  }

  .pxtm-ba__avatar {
    width: 52px;
    height: 52px;
    padding: 2px;
  }

  .pxtm-ba__thumb-name {
    font-size: 11.5px;
  }
}

@media (max-width: 380px) {
  .pxtm-ba__thumbs {
    gap: 6px;
  }

  .pxtm-ba__avatar {
    width: 48px;
    height: 48px;
  }

  .pxtm-ba__thumb-name {
    font-size: 11px;
  }
}

/* =========================================================
 * COMPONENT: VIDEO FACADE (YouTube) – kế thừa LP phun mày
 * Thumbnail maxresdefault (fallback hqdefault), bấm 1 lần → phát.
 *   .pxtm-video--wide  16:9 | .pxtm-video--short 9:16
 * ========================================================= */
.pxtm-video {
  position: relative;
  overflow: hidden;
  border-radius: 24px;
  background: var(--pxtm-deep);
  box-shadow: 0 14px 30px rgba(113, 13, 172, 0.2);
}

.pxtm-video--wide {
  aspect-ratio: 16 / 9;
}

.pxtm-video--short {
  aspect-ratio: 9 / 16;
}

#pxtm-landing .pxtm-video__facade {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  min-height: 0;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  cursor: pointer;
}

#pxtm-landing .pxtm-video__thumb {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: scale 0.6s cubic-bezier(0.22, 0.61, 0.36, 1), filter 0.4s ease;
}

.pxtm-video__play {
  position: absolute;
  top: 50%;
  left: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 72px;
  height: 72px;
  margin: -36px 0 0 -36px;
  padding-left: 4px;
  border: 2px solid rgba(255, 255, 255, 0.85);
  border-radius: 50%;
  background: rgba(113, 13, 172, 0.55);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  color: #fff;
  animation: pxtm-play-pulse 2s ease-out infinite;
  transition: scale 0.3s ease, background 0.3s ease;
}

@media (hover: hover) {
  .pxtm-video__facade:hover .pxtm-video__thumb {
    scale: 1.06;
    filter: brightness(0.9);
  }

  .pxtm-video__facade:hover .pxtm-video__play {
    background: var(--pxtm-grad-title-2);
    scale: 1.1;
  }
}

#pxtm-landing .pxtm-video__facade:focus-visible {
  outline: 3px solid #fff;
  outline-offset: -6px;
}

.pxtm-video iframe,
.pxtm-video .pxtm-video__player {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* Cùng độ ưu tiên với "#pxtm-landing .pxtm-video__facade" để thật sự ẩn */
#pxtm-landing .pxtm-video.is-playing .pxtm-video__facade {
  display: none;
}

/* Nút "Bật tiếng" – mobile: video tự phát KHÔNG tiếng ngay lần chạm đầu
 * (quy định trình duyệt), chạm nút này để mở tiếng */
#pxtm-landing .pxtm-video__unmute {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 4;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 0;
  margin: 0;
  padding: 8px 14px 8px 11px;
  border: 1.5px solid #fff;
  border-radius: var(--pxtm-radius-pill);
  background: var(--pxtm-grad-title-2);
  box-shadow: 0 6px 16px rgba(247, 66, 137, 0.45);
  color: #fff;
  font-family: var(--pxtm-font-sans);
  font-size: 13px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.02em;
  text-transform: none;
  cursor: pointer;
  animation: pxtm-unmute-pulse 1.8s ease-in-out infinite;
}

@keyframes pxtm-unmute-pulse {
  0%,
  100% {
    scale: 1;
  }
  50% {
    scale: 1.06;
  }
}

.pxtm-video.is-loading .pxtm-video__play {
  animation: pxtm-play-spin 0.9s linear infinite;
  border-top-color: transparent;
}

@keyframes pxtm-play-pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.55);
  }
  70% {
    box-shadow: 0 0 0 18px rgba(255, 255, 255, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
  }
}

@keyframes pxtm-play-spin {
  to {
    rotate: 360deg;
  }
}

@media (max-width: 768px) {
  .pxtm-video {
    border-radius: 18px;
  }

  .pxtm-video__play {
    width: 56px;
    height: 56px;
    margin: -28px 0 0 -28px;
  }
}

/* =========================================================
 * SECTION: VIDEO
 * Khối 1 – RẠP CHIẾU (2 video ngang):
 *   video lớn + video "xem tiếp" nổi góc phải dưới (kiểu picture-in-picture),
 *   khung kính thông tin góc phải trên. Bấm video nhỏ / nút "Xem video tiếp"
 *   → 2 video đổi chỗ có chuyển động (video đang phát tự dừng).
 * Khối 2 – COVERFLOW 3D (5 short):
 *   short giữa to + phát được, 2 bên xoay nghiêng lùi sâu; bấm 2 bên / vuốt /
 *   nút / chấm / phím ← → để xoay vòng.
 * Biến chỉnh nhanh:
 *   .pxtm-cinema  --pxtm-cin-main-w  --pxtm-cin-mini-w  --pxtm-cin-mini-top
 *   .pxtm-cf      --pxtm-cf-w (rộng short giữa) --pxtm-cf-step (khoảng dịch)
 *                 --pxtm-cf-tilt (độ xoay) --pxtm-cf-shrink (độ thu nhỏ 2 bên)
 * ========================================================= */
.pxtm-videos {
  position: relative;
  width: 100%;
  padding: 40px 24px 110px;
}

.pxtm-videos__inner {
  max-width: 1312px;
  margin: 0 auto;
}

#pxtm-landing .pxtm-videos__heading {
  margin-bottom: 52px;
}

/* ----- Khối 1: rạp chiếu (desktop) ----- */
.pxtm-cinema {
  --pxtm-cin-main-w: 74%;
  --pxtm-cin-mini-w: 34%;
  --pxtm-cin-mini-top: 60%;
  --pxtm-cin-ease: cubic-bezier(0.65, 0, 0.35, 1);

  position: relative;
  width: 100%;
  max-width: 1180px;
  aspect-ratio: 2 / 1;
  margin: 0 auto;
}

.pxtm-cinema__slot {
  position: absolute;
  transition: top 0.75s var(--pxtm-cin-ease), left 0.75s var(--pxtm-cin-ease),
    width 0.75s var(--pxtm-cin-ease);
}

.pxtm-cinema__slot.is-main {
  top: 0;
  left: 0;
  z-index: 1;
  width: var(--pxtm-cin-main-w);
}

.pxtm-cinema__slot.is-mini {
  top: var(--pxtm-cin-mini-top);
  left: calc(100% - var(--pxtm-cin-mini-w));
  z-index: 3;
  width: var(--pxtm-cin-mini-w);
}

.pxtm-cinema__slot.is-main .pxtm-video {
  border-radius: 28px;
  box-shadow: 0 24px 48px rgba(113, 13, 172, 0.24);
}

.pxtm-cinema__slot.is-mini .pxtm-video {
  border: 4px solid #fff;
  border-radius: 22px;
  box-shadow: 0 18px 36px rgba(113, 13, 172, 0.3), 0 0 0 1px rgba(172, 89, 255, 0.25);
}

/* Lớp bấm "Xem tiếp" chỉ phủ video nhỏ */
#pxtm-landing .pxtm-cinema__swap {
  display: none;
}

#pxtm-landing .pxtm-cinema__slot.is-mini .pxtm-cinema__swap {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
  min-height: 0;
  margin: 0;
  padding: 14px;
  border: 0;
  border-radius: 22px;
  background: linear-gradient(180deg, rgba(69, 17, 128, 0) 45%, rgba(69, 17, 128, 0.55) 100%);
  box-shadow: none;
  cursor: pointer;
}

.pxtm-cinema__swap-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px 7px;
  border-radius: var(--pxtm-radius-pill);
  background: var(--pxtm-grad-cta);
  background-size: 200% 100%;
  box-shadow: var(--pxtm-cta-shadow);
  color: #fff;
  font-family: var(--pxtm-font-sans);
  font-size: 13px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  transition: background-position 0.5s ease, translate 0.3s ease;
}

.pxtm-cinema__slot.is-mini .pxtm-video__play {
  width: 50px;
  height: 50px;
  margin: -25px 0 0 -25px;
}

@media (hover: hover) {
  .pxtm-cinema__slot.is-mini:hover .pxtm-video__thumb {
    scale: 1.08;
  }

  .pxtm-cinema__swap:hover .pxtm-cinema__swap-label {
    background-position: 100% 0;
    translate: 0 -2px;
  }
}

#pxtm-landing .pxtm-cinema__swap:focus-visible {
  outline: 3px solid var(--pxtm-primary);
  outline-offset: 3px;
}

/* Khung kính thông tin (góc phải trên, phía trên video nhỏ) */
.pxtm-cinema__info {
  position: absolute;
  top: 0;
  left: calc(var(--pxtm-cin-main-w) + 3%);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: calc(100% - var(--pxtm-cin-main-w) - 3%);
  height: calc(var(--pxtm-cin-mini-top) - 5%);
  padding: 26px 24px;
  overflow: hidden;
  border: 0.611px solid #fff;
  border-radius: 30px;
  background: rgba(255, 255, 255, 0.2);
  box-shadow: 0 4px 4px 0 rgba(247, 66, 137, 0.17),
    0 0 11.97px 4.886px #fff inset;
}

.pxtm-cinema__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  margin-bottom: 14px;
}

.pxtm-cinema__kicker {
  padding: 6px 12px 5px;
  border-radius: var(--pxtm-radius-pill);
  background: var(--pxtm-grad-title-2);
  color: #fff;
  font-family: var(--pxtm-font-sans);
  font-size: 12px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.pxtm-cinema__count {
  color: var(--pxtm-primary);
  font-family: var(--pxtm-font-serif);
  font-size: 34px;
  font-style: italic;
  line-height: 1;
}

.pxtm-cinema__count small {
  font-size: 0.55em;
  opacity: 0.6;
}

#pxtm-landing .pxtm-cinema__title {
  margin: 0 0 10px;
  color: var(--pxtm-primary);
  font-family: var(--pxtm-font-sans);
  font-size: 20px;
  font-weight: 500;
  line-height: 1.3;
  transition: opacity 0.3s ease;
}

#pxtm-landing .pxtm-cinema__text {
  margin: 0;
  color: rgba(113, 13, 172, 0.8);
  font-family: var(--pxtm-font-sans);
  font-size: 15px;
  line-height: 1.4;
}

#pxtm-landing .pxtm-cinema__next {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 0;
  margin: auto 0 0;
  padding: 10px 0 0;
  border: 0;
  background: none;
  box-shadow: none;
  color: var(--pxtm-primary);
  font-family: var(--pxtm-font-sans);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
}

#pxtm-landing .pxtm-cinema__next svg {
  transition: translate 0.3s ease;
}

#pxtm-landing .pxtm-cinema__next:hover svg {
  translate: 5px 0;
}

.pxtm-cinema.is-swapping .pxtm-cinema__title {
  opacity: 0;
}

/* Chỉ 1 video ngang → video lớn full chiều rộng, ẩn khung phụ */
.pxtm-cinema--single {
  aspect-ratio: 16 / 9;
}

.pxtm-cinema--single .pxtm-cinema__slot.is-main {
  width: 100%;
}

#pxtm-landing .pxtm-cinema--single .pxtm-cinema__info {
  display: none;
}

/* ----- Khối 2: coverflow 3D ----- */
.pxtm-cf {
  --pxtm-cf-w: 290px;
  --pxtm-cf-step: 72%;
  --pxtm-cf-tilt: -16deg;
  --pxtm-cf-shrink: 0.13;

  margin-top: 80px;
}

/* Không JS: hàng cuộn ngang bình thường */
.pxtm-cf__stage {
  display: flex;
  justify-content: flex-start;
  gap: 16px;
  overflow-x: auto;
}

.pxtm-cf__item {
  flex: 0 0 var(--pxtm-cf-w);
}

/* Có JS: sân khấu 3D */
#pxtm-landing.is-js .pxtm-cf__stage {
  position: relative;
  display: block;
  height: calc(var(--pxtm-cf-w) * 16 / 9);
  overflow: visible;
  perspective: 1400px;
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
}

#pxtm-landing.is-js .pxtm-cf__item {
  position: absolute;
  top: 0;
  left: 50%;
  z-index: calc(10 - var(--ad, 0));
  width: var(--pxtm-cf-w);
  margin-left: calc(var(--pxtm-cf-w) / -2);
  transform: translateX(calc(var(--d, 0) * var(--pxtm-cf-step)))
    rotateY(calc(var(--d, 0) * var(--pxtm-cf-tilt)))
    scale(calc(1 - var(--ad, 0) * var(--pxtm-cf-shrink)));
  filter: brightness(calc(1 - var(--ad, 0) * 0.14)) saturate(calc(1 - var(--ad, 0) * 0.2));
  cursor: pointer;
  transition: transform 0.65s cubic-bezier(0.22, 0.61, 0.36, 1),
    filter 0.5s ease, opacity 0.5s ease;
}

#pxtm-landing.is-js .pxtm-cf__item.is-jump {
  transition: none;
}

#pxtm-landing.is-js .pxtm-cf__item.is-active {
  filter: none;
  cursor: auto;
}

/* ----- Short: nhúng thẳng player YouTube (nút play mặc định của YouTube) -----
 * Cú chạm nằm trong khung YouTube → chạm 1 lần là phát trên mọi trình duyệt.
 * iframe loading="lazy": chỉ tải khi sắp cuộn tới. */
.pxtm-short {
  position: relative;
  overflow: hidden;
  aspect-ratio: 9 / 16;
  border-radius: 24px;
  background: var(--pxtm-deep);
  box-shadow: 0 14px 30px rgba(113, 13, 172, 0.2);
  isolation: isolate; /* giữ bo góc cho iframe trên Safari */
}

#pxtm-landing .pxtm-short__frame {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: block;
  width: 100%;
  max-width: none;
  height: 100%;
  margin: 0;
  border: 0;
}

/* Lớp trong suốt bắt chạm: chỉ phủ short 2 bên (bấm → xoay vào giữa) */
#pxtm-landing .pxtm-short__hit {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: block;
  width: 100%;
  min-height: 0;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

/* Short đang ở giữa: tắt lớp bắt chạm → chạm thẳng vào nút play của YouTube */
#pxtm-landing .pxtm-cf__item.is-active .pxtm-short__hit {
  display: none;
}

.pxtm-cf__item.is-active .pxtm-short {
  box-shadow: 0 26px 50px rgba(113, 13, 172, 0.35), 0 0 0 4px #fff,
    0 0 40px 6px rgba(247, 66, 137, 0.25);
}

@media (max-width: 768px) {
  .pxtm-short {
    border-radius: 18px;
  }
}

/* Quầng sáng dưới short giữa */
#pxtm-landing.is-js .pxtm-cf__stage::after {
  position: absolute;
  bottom: -34px;
  left: 50%;
  width: calc(var(--pxtm-cf-w) * 1.3);
  height: 40px;
  margin-left: calc(var(--pxtm-cf-w) * -0.65);
  content: "";
  background: radial-gradient(ellipse at center, rgba(172, 89, 255, 0.35) 0, rgba(172, 89, 255, 0) 70%);
  pointer-events: none;
}

.pxtm-cf__controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 22px;
  margin-top: 46px;
}

#pxtm-landing .pxtm-cf__nav {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  min-height: 0;
  margin: 0;
  padding: 0;
  border: 1px solid #fff;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.6);
  box-shadow: 0 6px 16px rgba(113, 13, 172, 0.14), 0 0 8px 2px #fff inset;
  color: var(--pxtm-primary);
  cursor: pointer;
  transition: background 0.3s ease, color 0.3s ease, scale 0.25s ease;
}

#pxtm-landing .pxtm-cf__nav:hover,
#pxtm-landing .pxtm-cf__nav:focus-visible {
  background: var(--pxtm-grad-cta);
  color: #fff;
  scale: 1.08;
}

.pxtm-cf__dots {
  display: flex;
  gap: 8px;
}

#pxtm-landing .pxtm-cf__dot {
  width: 9px;
  height: 9px;
  min-height: 0;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: var(--pxtm-radius-pill);
  background: rgba(113, 13, 172, 0.25);
  box-shadow: none;
  cursor: pointer;
  transition: width 0.35s ease, background 0.35s ease;
}

#pxtm-landing .pxtm-cf__dot.is-active {
  width: 28px;
  background: var(--pxtm-grad-title-2);
}

/* Không JS: ẩn điều khiển */
#pxtm-landing:not(.is-js) .pxtm-cf__controls {
  display: none;
}

/* ----- Tablet + mobile: rạp chiếu thành lưới ----- */
@media (max-width: 1024px) {
  .pxtm-cinema {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    grid-template-areas: "main main" "mini info";
    gap: 16px;
    aspect-ratio: auto;
  }

  .pxtm-cinema__slot,
  .pxtm-cinema__slot.is-main,
  .pxtm-cinema__slot.is-mini {
    position: relative;
    top: auto;
    left: auto;
    z-index: auto;
    width: auto;
    transition: none;
  }

  .pxtm-cinema__slot.is-main {
    grid-area: main;
  }

  .pxtm-cinema__slot.is-mini {
    grid-area: mini;
    align-self: start;
  }

  .pxtm-cinema__info {
    position: relative;
    top: auto;
    left: auto;
    grid-area: info;
    width: auto;
    height: auto;
    padding: 18px 18px;
  }

  .pxtm-cinema.is-swapping .pxtm-cinema__slot {
    animation: pxtm-cin-swap 0.6s cubic-bezier(0.22, 0.61, 0.36, 1) both;
  }

  .pxtm-cinema.is-swapping .pxtm-cinema__slot.is-mini {
    animation-delay: 0.08s;
  }

  .pxtm-cinema--single {
    grid-template-areas: "main main";
  }
}

@keyframes pxtm-cin-swap {
  from {
    opacity: 0;
    transform: translateY(18px) scale(0.96);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@media (min-width: 769px) and (max-width: 1024px) {
  .pxtm-videos {
    padding: 32px 24px 88px;
  }

  .pxtm-cf {
    --pxtm-cf-w: 250px;
  }
}

/* ----- Mobile ----- */
@media (max-width: 768px) {
  .pxtm-videos {
    padding: 28px 16px 60px;
  }

  #pxtm-landing .pxtm-videos__heading {
    margin-bottom: 28px;
  }

  .pxtm-cinema {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 12px;
  }

  .pxtm-cinema__slot.is-main .pxtm-video {
    border-radius: 20px;
  }

  .pxtm-cinema__slot.is-mini .pxtm-video {
    border-width: 3px;
    border-radius: 16px;
  }

  #pxtm-landing .pxtm-cinema__slot.is-mini .pxtm-cinema__swap {
    padding: 8px;
    border-radius: 16px;
  }

  .pxtm-cinema__swap-label {
    padding: 6px 10px 5px;
    font-size: 10.5px;
  }

  .pxtm-cinema__slot.is-mini .pxtm-video__play {
    width: 38px;
    height: 38px;
    margin: -19px 0 0 -19px;
  }

  .pxtm-cinema__info {
    padding: 12px 12px 12px 14px;
    border-radius: 18px;
  }

  .pxtm-cinema__top {
    margin-bottom: 6px;
  }

  .pxtm-cinema__kicker {
    padding: 5px 8px 4px;
    font-size: 9.5px;
  }

  .pxtm-cinema__count {
    font-size: 24px;
  }

  #pxtm-landing .pxtm-cinema__title {
    display: -webkit-box;
    margin-bottom: 0;
    overflow: hidden;
    font-size: 14px;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
  }

  #pxtm-landing .pxtm-cinema__text {
    display: none;
  }

  #pxtm-landing .pxtm-cinema__next {
    padding-top: 8px;
    font-size: 12px;
  }

  .pxtm-cf {
    --pxtm-cf-w: min(60vw, 240px);
    --pxtm-cf-step: 70%;
    --pxtm-cf-tilt: -12deg;
    --pxtm-cf-shrink: 0.14;

    margin-top: 44px;
  }

  /* Mobile chỉ lộ 1 short mỗi bên */
  #pxtm-landing.is-js .pxtm-cf__item {
    opacity: calc(1 - max(0, var(--ad, 0) - 1));
  }

  .pxtm-cf__controls {
    gap: 16px;
    margin-top: 36px;
  }

  #pxtm-landing .pxtm-cf__nav {
    width: 44px;
    height: 44px;
  }
}

/* =========================================================
 * SECTION: ĐỘI NGŨ MASTER - KỸ THUẬT VIÊN (bản cải tiến UI/UX)
 * Bố cục: chân dung master lớn (cột trái) | khung kính thông tin: chức danh, tên,
 * chỉ số đếm số (năm kinh nghiệm / số danh hiệu), thành tích kèm icon
 * tự nhận diện (cúp / mũ / đồng hồ / sao) | hàng thẻ chọn master có
 * thanh thời gian tự chuyển.
 * Tương tác: bấm thẻ, phím ← → trên thẻ, vuốt / kéo trên chân dung.
 * Tự chuyển: chỉ chạy khi section trong màn hình, dừng khi rê chuột,
 * tắt hẳn khi người dùng tự chọn.
 * Biến chỉnh nhanh (trên .pxtm-team__show):
 *   --pxtm-team-stage-h : chiều cao sân khấu chân dung
 *   --pxtm-team-upscale : giới hạn phóng ảnh master (so với kích thước gốc)
 *   --pxtm-team-dur     : thời gian mỗi master (lấy từ data 'autoplay')
 * Nền: dùng lại cnpmy-team-bg-desktop/mobile của LP phun mày.
 * ========================================================= */
.pxtm-team {
  position: relative;
  isolation: isolate;
  width: 100%;
  padding: 56px 24px 90px;
}

.pxtm-team__bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  display: block;
  overflow: hidden;
  pointer-events: none;
}

#pxtm-landing .pxtm-team__bg-image {
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: center top;
}

.pxtm-team__inner {
  position: relative;
  max-width: 1240px;
  margin: 0 auto;
}

.pxtm-team__title-line {
  align-items: center;
  gap: 18px;
}

.pxtm-team__title-line .pxtm-pill-title {
  margin-top: 10px;
}

#pxtm-landing .pxtm-team__heading {
  margin-bottom: 36px;
}

#pxtm-landing .pxtm-team__heading .pxtm-heading__tail {
  margin-top: 0;
}

/* ----- Khung tổng: sân khấu | thông tin / hàng chọn master ----- */
.pxtm-team__show {
  /* Cột chân dung to hơn: cao theo màn hình 560 → 720px */
  --pxtm-team-stage-h: clamp(560px, 72vh, 720px);
  /* Ảnh 3 master gốc chỉ cao 463px → cho phóng tối đa 1.45 lần */
  --pxtm-team-upscale: 1.45;
  --pxtm-team-dur: 6500ms;

  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  grid-template-areas:
    "stage content"
    "picker picker";
  align-items: center;
  column-gap: 40px;
  row-gap: 34px;
}

/* ----- Sân khấu chân dung ----- */
.pxtm-team__stage {
  position: relative;
  grid-area: stage;
  height: var(--pxtm-team-stage-h);
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
}

/* Chân dung: các ảnh chồng nhau, ảnh active hiện lên */
#pxtm-landing .pxtm-team__portrait {
  position: absolute;
  bottom: 0;
  left: 50%;
  z-index: 2;
  width: auto;
  height: min(100%, calc(var(--pxtm-nat-h, 600px) * var(--pxtm-team-upscale)));
  max-width: 100%;
  object-fit: contain;
  object-position: bottom center;
  opacity: 0;
  filter: blur(8px);
  transform: translateX(-50%) translateY(26px) scale(0.95);
  -webkit-mask-image: linear-gradient(180deg, #000 82%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 82%, transparent 100%);
  pointer-events: none;
  transition: opacity 0.6s ease, filter 0.6s ease,
    transform 0.8s cubic-bezier(0.22, 0.61, 0.36, 1);
}

#pxtm-landing .pxtm-team__portrait.is-active {
  opacity: 1;
  filter: none;
  transform: translateX(-50%);
}

/* ----- Khung thông tin ----- */
.pxtm-team__content {
  grid-area: content;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
  min-width: 0;
}

.pxtm-team__panels {
  display: grid;
  width: 100%;
}

.pxtm-team__panel {
  position: relative;
  padding: 34px 38px 36px;
  border: 0.611px solid #fff;
  border-radius: 30px;
  background: rgba(255, 255, 255, 0.2);
  box-shadow: 0 4px 4px 0 rgba(247, 66, 137, 0.17),
    0 0 11.97px 4.886px #fff inset;
}

/* Có JS: panel chồng cùng ô, đổi mượt */
#pxtm-landing.is-js .pxtm-team__panel {
  grid-area: 1 / 1;
  visibility: hidden;
  opacity: 0;
  translate: 28px 0;
  transition: opacity 0.45s ease, translate 0.6s cubic-bezier(0.22, 0.61, 0.36, 1),
    visibility 0s linear 0.6s;
}

#pxtm-landing.is-js .pxtm-team__panel.is-active {
  visibility: visible;
  opacity: 1;
  translate: 0 0;
  transition: opacity 0.45s ease 0.1s, translate 0.6s cubic-bezier(0.22, 0.61, 0.36, 1) 0.1s,
    visibility 0s;
}

/* Chiều cao khung = panel đang xem (JS đo), đổi master thì co giãn mượt */
#pxtm-landing.is-js .pxtm-team__panels {
  height: var(--pxtm-team-panels-h, auto);
  transition: height 0.5s cubic-bezier(0.22, 0.61, 0.36, 1);
}

#pxtm-landing.is-js .pxtm-team__panel {
  align-self: start;
}

.pxtm-team__cta .pxtm-btn {
  --pxtm-btn-w: 250px;
}

#pxtm-landing:not(.is-js) .pxtm-team__panel + .pxtm-team__panel {
  margin-top: 20px;
}

.pxtm-team__role {
  display: inline-flex;
  margin-bottom: 8px;
  padding: 7px 16px 6px;
  border-radius: var(--pxtm-radius-pill);
  background: var(--pxtm-grad-title-2);
  box-shadow: 0 4px 12px rgba(247, 66, 137, 0.25);
  color: #fff;
  font-family: var(--pxtm-font-sans);
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

#pxtm-landing .pxtm-team__name {
  margin: 0 0 18px;
  padding: 0;
  font-family: var(--pxtm-font-serif);
  font-size: 54px;
  font-style: italic;
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: 0;
  text-transform: none;
}

/* Chỉ số đếm số */
.pxtm-team__stats {
  /* Dàn hết bề ngang khung; mỗi ô = số + nhãn trên 1 dòng. Không đủ chỗ
   * thì cả ô xuống hàng (không bẻ chữ) */
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  width: 100%;
  margin-bottom: 24px;
}

.pxtm-team__stat {
  display: flex;
  flex: 1 1 auto;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 10px 14px;
  text-align: left;
  border: 1px solid rgba(255, 255, 255, 0.9);
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.55);
  box-shadow: 0 6px 16px rgba(113, 13, 172, 0.1);
}

.pxtm-team__stat-num {
  padding: 0.1em 0.06em 0.02em 0;
  background-image: var(--pxtm-grad-title-2);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  font-family: var(--pxtm-font-serif);
  font-size: 46px;
  font-style: italic;
  line-height: 1;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.pxtm-team__stat-label {
  color: var(--pxtm-primary);
  font-family: var(--pxtm-font-sans);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.25;
  white-space: nowrap;
}

#pxtm-landing .pxtm-team__list-title {
  margin: 0 0 12px;
  padding: 0;
  color: rgba(113, 13, 172, 0.6);
  font-family: var(--pxtm-font-sans);
  font-size: 15px;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

#pxtm-landing .pxtm-team__list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

#pxtm-landing .pxtm-team__list li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.pxtm-team__icon {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  color: #fff;
  box-shadow: 0 4px 10px rgba(113, 13, 172, 0.22);
}

.pxtm-team__icon--trophy {
  background: linear-gradient(180deg, #f5b04e 0%, #f74289 100%);
}

.pxtm-team__icon--cap {
  background: linear-gradient(180deg, #ac59ff 0%, #710dac 100%);
}

.pxtm-team__icon--clock {
  background: linear-gradient(180deg, #e0668a 0%, #9615d2 100%);
}

.pxtm-team__icon--star {
  background: var(--pxtm-grad-title-2);
}

.pxtm-team__item-text {
  padding-top: 6px;
  color: var(--pxtm-primary);
  font-family: var(--pxtm-font-sans);
  font-size: 18px;
  line-height: 1.35;
}

/* Thành tích hiện lệch nhịp mỗi lần đổi master */
#pxtm-landing.is-js .pxtm-team__panel.is-active .pxtm-team__list li,
#pxtm-landing.is-js .pxtm-team__panel.is-active .pxtm-team__stat {
  animation: pxtm-team-item-in 0.55s cubic-bezier(0.22, 0.61, 0.36, 1) both;
  animation-delay: calc(0.2s + var(--i, 0) * 0.08s);
}

#pxtm-landing.is-js .pxtm-team__panel.is-active .pxtm-team__stat:nth-child(2) {
  animation-delay: 0.26s;
}

@keyframes pxtm-team-item-in {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* ----- Hàng chọn master ----- */
.pxtm-team__picker {
  grid-area: picker;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}

#pxtm-landing .pxtm-team__pick {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 0;
  margin: 0;
  padding: 12px 14px 16px;
  overflow: hidden;
  border: 0.611px solid #fff;
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.28);
  box-shadow: 0 4px 4px 0 rgba(247, 66, 137, 0.12), 0 0 10px 3px #fff inset;
  color: var(--pxtm-primary);
  text-align: left;
  text-transform: none;
  letter-spacing: 0;
  cursor: pointer;
  transition: background 0.35s ease, box-shadow 0.35s ease, translate 0.35s ease;
}

@media (hover: hover) {
  #pxtm-landing .pxtm-team__pick:hover {
    translate: 0 -3px;
    background: rgba(255, 255, 255, 0.5);
  }
}

#pxtm-landing .pxtm-team__pick.is-active {
  background: rgba(255, 255, 255, 0.72);
  box-shadow: 0 10px 24px rgba(247, 66, 137, 0.22), 0 0 10px 3px #fff inset;
}

#pxtm-landing .pxtm-team__pick:focus-visible {
  outline: 3px solid var(--pxtm-primary);
  outline-offset: 3px;
}

.pxtm-team__avatar {
  display: block;
  flex: 0 0 auto;
  width: 56px;
  height: 56px;
  padding: 2px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.9);
  transition: background 0.35s ease;
}

.pxtm-team__pick.is-active .pxtm-team__avatar {
  background: var(--pxtm-grad-title-2);
}

#pxtm-landing .pxtm-team__avatar img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: linear-gradient(180deg, #f6eefe 0%, #e9dcf7 100%);
  object-fit: cover;
  object-position: 50% 8%;
}

.pxtm-team__pick-text {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.pxtm-team__pick-name {
  font-family: var(--pxtm-font-sans);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.2;
}

.pxtm-team__pick-role {
  color: rgba(113, 13, 172, 0.65);
  font-family: var(--pxtm-font-sans);
  font-size: 13px;
  line-height: 1.2;
}

/* Thanh thời gian tự chuyển */
.pxtm-team__progress {
  position: absolute;
  right: 16px;
  bottom: 7px;
  left: 16px;
  height: 3px;
  overflow: hidden;
  border-radius: var(--pxtm-radius-pill);
  background: rgba(113, 13, 172, 0.1);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.pxtm-team__progress-bar {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  background: var(--pxtm-grad-title-2);
  transform: scaleX(0);
  transform-origin: left center;
}

.pxtm-team__pick.is-active .pxtm-team__progress {
  opacity: 1;
}

.pxtm-team__show.is-autoplay .pxtm-team__pick.is-active .pxtm-team__progress-bar {
  animation: pxtm-team-progress var(--pxtm-team-dur) linear forwards;
}

.pxtm-team__show.is-paused .pxtm-team__pick.is-active .pxtm-team__progress-bar {
  animation-play-state: paused;
}

.pxtm-team__show:not(.is-autoplay) .pxtm-team__progress {
  display: none;
}

@keyframes pxtm-team-progress {
  from {
    transform: scaleX(0);
  }
  to {
    transform: scaleX(1);
  }
}

/* ----- Tablet ----- */
@media (min-width: 769px) and (max-width: 1024px) {
  .pxtm-team {
    padding: 44px 24px 76px;
  }

  .pxtm-team__show {
    --pxtm-team-stage-h: 520px;
    --pxtm-team-upscale: 1.2;

    column-gap: 24px;
  }

  .pxtm-team__panel {
    padding: 26px 24px 28px;
  }

  #pxtm-landing .pxtm-team__name {
    font-size: 42px;
  }

  .pxtm-team__stat {
    gap: 10px;
    padding: 10px 14px;
  }

  .pxtm-team__stat-num {
    font-size: 42px;
  }

  .pxtm-team__stat-label {
    font-size: 15px;
  }

  .pxtm-team__item-text {
    font-size: 16px;
  }

  .pxtm-team__picker {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ----- Mobile: chân dung → hàng avatar → thông tin ----- */
@media (max-width: 768px) {
  .pxtm-team {
    padding: 36px 16px 60px;
  }

  .pxtm-team__title-line {
    flex-direction: column;
    gap: 2px;
  }

  .pxtm-team__title-line .pxtm-pill-title {
    margin-top: 4px;
  }

  #pxtm-landing .pxtm-team__heading {
    margin-bottom: 18px;
  }

  .pxtm-team__show {
    --pxtm-team-stage-h: 420px;
    --pxtm-team-upscale: 0.92;

    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "stage" "picker" "content";
    row-gap: 18px;
  }

  /* Hàng avatar gọn: 4 thẻ dọc */
  .pxtm-team__picker {
    position: relative;
    z-index: 4;
    gap: 8px;
    margin-top: 6px;
  }

  #pxtm-landing .pxtm-team__pick {
    flex-direction: column;
    gap: 6px;
    padding: 8px 4px 12px;
    border-radius: 18px;
    text-align: center;
  }

  .pxtm-team__avatar {
    width: 50px;
    height: 50px;
  }

  .pxtm-team__pick-text {
    align-items: center;
  }

  .pxtm-team__pick-name {
    font-size: clamp(11.5px, 3.2vw, 12.5px);
    white-space: nowrap;
  }

  .pxtm-team__pick-role {
    display: none;
  }

  .pxtm-team__progress {
    right: 12px;
    bottom: 5px;
    left: 12px;
  }

  .pxtm-team__content {
    align-items: stretch;
    gap: 20px;
  }

  .pxtm-team__panel {
    padding: 22px 18px 24px;
    border-radius: 24px;
    text-align: center;
  }

  #pxtm-landing .pxtm-team__name {
    margin-bottom: 14px;
    font-size: 38px;
  }

  /* Mobile: mỗi chỉ số 1 hàng full ngang → chữ nằm 1 dòng, không bị bó */
  .pxtm-team__stats {
    gap: 10px;
    margin-bottom: 18px;
  }

  .pxtm-team__stat {
    flex-basis: 100%;
    gap: 12px;
    padding: 10px 16px;
    border-radius: 16px;
  }

  .pxtm-team__stat-num {
    font-size: 44px;
  }

  .pxtm-team__stat-label {
    font-size: 16px;
    text-align: left;
    white-space: nowrap;
  }

  #pxtm-landing .pxtm-team__list {
    gap: 10px;
    text-align: left;
  }

  .pxtm-team__icon {
    width: 30px;
    height: 30px;
  }

  .pxtm-team__icon svg {
    width: 17px;
    height: 17px;
  }

  .pxtm-team__item-text {
    padding-top: 4px;
    font-size: 16px;
  }

  .pxtm-team__cta {
    display: flex;
    justify-content: center;
  }

  .pxtm-team__cta .pxtm-btn {
    --pxtm-btn-w: 215px;
  }
}

/* =========================================================
 * SECTION: 5 LÝ DO LỰA CHỌN LINH ANH – "bản đồ gương mặt"
 * Desktop: ảnh khuôn mặt tròn ở giữa (quỹ đạo xoay chậm) + 5 thẻ kính
 *   bao quanh (2 trái, 2 phải, 1 dưới); mỗi thẻ nối bằng đường cong tới
 *   1 điểm nóng trên mặt. Rê / bấm thẻ hoặc điểm nóng → cả cặp sáng lên;
 *   khi không tương tác, 5 lý do tự sáng lần lượt.
 * Tablet: mặt trên, thẻ lưới 2 cột (không vẽ đường nối).
 * Mobile: mặt trên, thẻ vuốt ngang đồng bộ điểm nóng + chấm trang.
 * Biến chỉnh nhanh (trên .pxtm-usp__map):
 *   --pxtm-usp-face : đường kính ảnh khuôn mặt
 *   --pxtm-usp-gap  : khoảng cách cột thẻ ↔ ảnh mặt
 * Vị trí điểm nóng: data 'spot' => ['x' => %, 'y' => %].
 * ========================================================= */
.pxtm-usp {
  position: relative;
  width: 100%;
  padding: 56px 24px 72px;
}

.pxtm-usp__inner {
  max-width: 1312px;
  margin: 0 auto;
}

#pxtm-landing .pxtm-usp__heading {
  margin-bottom: 70px;
}

.pxtm-usp__map {
  --pxtm-usp-face: 440px;
  --pxtm-usp-gap: 76px;

  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--pxtm-usp-face) minmax(0, 1fr);
  grid-template-areas:
    "c1 face c3"
    "c2 face c4"
    ".  c5   .";
  align-items: center;
  column-gap: var(--pxtm-usp-gap);
  row-gap: 30px;
}

#pxtm-landing .pxtm-usp__list {
  display: contents;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* ----- Đường nối (SVG phủ toàn khung) ----- */
.pxtm-usp__lines {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}

.pxtm-usp__line {
  fill: none;
  stroke: rgba(172, 89, 255, 0.55);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  opacity: 0.55;
  transition: stroke-dashoffset 1.2s cubic-bezier(0.65, 0, 0.35, 1),
    opacity 0.35s ease, stroke 0.35s ease, stroke-width 0.35s ease;
  transition-delay: calc(0.3s + var(--i, 0) * 0.14s), 0s, 0s, 0s;
}

#pxtm-landing:not(.is-js) .pxtm-usp__line,
.pxtm-usp__map.is-in .pxtm-usp__line {
  stroke-dashoffset: 0;
}

.pxtm-usp__line.is-active {
  stroke: #f74289;
  stroke-width: 2.5;
  opacity: 1;
  filter: drop-shadow(0 0 5px rgba(247, 66, 137, 0.75));
}

/* ----- Ảnh khuôn mặt ----- */
#pxtm-landing .pxtm-usp__visual {
  position: relative;
  grid-area: face;
  width: var(--pxtm-usp-face);
  aspect-ratio: 1;
  margin: 0;
}

.pxtm-usp__orbit {
  position: absolute;
  z-index: 0;
  border-radius: 50%;
  pointer-events: none;
}

.pxtm-usp__orbit--1 {
  inset: -26px;
  border: 1.5px dashed rgba(172, 89, 255, 0.5);
  animation: pxtm-usp-orbit 40s linear infinite;
}

.pxtm-usp__orbit--2 {
  inset: -58px;
  border: 1px solid rgba(255, 255, 255, 0.9);
  background: radial-gradient(circle, rgba(247, 66, 137, 0.14) 0, rgba(172, 89, 255, 0.08) 55%, rgba(172, 89, 255, 0) 71%);
}

/* Chấm sáng chạy trên quỹ đạo */
.pxtm-usp__orbit--1::after {
  position: absolute;
  top: 50%;
  left: -6px;
  width: 11px;
  height: 11px;
  margin-top: -5.5px;
  content: "";
  border-radius: 50%;
  background: #f74289;
  box-shadow: 0 0 10px 3px rgba(247, 66, 137, 0.6);
}

@keyframes pxtm-usp-orbit {
  to {
    rotate: 360deg;
  }
}

.pxtm-usp__frame {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: block;
  overflow: hidden;
  border: 6px solid #fff;
  border-radius: 50%;
  background: linear-gradient(180deg, #f6eefe 0%, #e9dcf7 100%);
  box-shadow: 0 30px 60px rgba(113, 13, 172, 0.25), 0 0 0 1px rgba(172, 89, 255, 0.2);
}

#pxtm-landing .pxtm-usp__face {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ----- Điểm nóng ----- */
#pxtm-landing .pxtm-usp__spot {
  position: absolute;
  top: var(--y);
  left: var(--x);
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  min-height: 0;
  margin: -15px 0 0 -15px;
  padding: 0;
  border: 2px solid #fff;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.85);
  box-shadow: 0 4px 12px rgba(113, 13, 172, 0.35);
  color: var(--pxtm-primary);
  font-family: var(--pxtm-font-sans);
  font-size: 13px;
  font-weight: 500;
  line-height: 1;
  cursor: pointer;
  transition: scale 0.35s cubic-bezier(0.34, 1.45, 0.64, 1), background 0.3s ease,
    color 0.3s ease;
}

#pxtm-landing .pxtm-usp__spot::before {
  position: absolute;
  inset: -2px;
  content: "";
  border: 2px solid rgba(255, 255, 255, 0.9);
  border-radius: 50%;
  animation: pxtm-usp-pulse 2.2s ease-out infinite;
  pointer-events: none;
}

#pxtm-landing .pxtm-usp__spot.is-active {
  background: var(--pxtm-grad-title-2);
  color: #fff;
  scale: 1.3;
}

#pxtm-landing .pxtm-usp__spot.is-active::before {
  border-color: rgba(247, 66, 137, 0.9);
}

#pxtm-landing .pxtm-usp__spot:focus-visible {
  outline: 3px solid var(--pxtm-primary);
  outline-offset: 3px;
}

@keyframes pxtm-usp-pulse {
  0% {
    opacity: 0.9;
    scale: 1;
  }
  100% {
    opacity: 0;
    scale: 2;
  }
}

/* ----- Thẻ lý do (kính trong suốt) ----- */
#pxtm-landing .pxtm-usp__card {
  position: relative;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 18px;
  margin: 0;
  padding: 18px 22px;
  border: 0.611px solid #fff;
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.2);
  box-shadow: 0 4px 4px 0 rgba(247, 66, 137, 0.17),
    0 0 11.97px 4.886px #fff inset;
  list-style: none;
  outline: none;
  transition: translate 0.45s cubic-bezier(0.22, 0.61, 0.36, 1),
    background 0.35s ease, box-shadow 0.35s ease;
}

.pxtm-usp__card--1 {
  grid-area: c1;
}

.pxtm-usp__card--2 {
  grid-area: c2;
}

.pxtm-usp__card--3 {
  grid-area: c3;
}

.pxtm-usp__card--4 {
  grid-area: c4;
}

.pxtm-usp__card--5 {
  grid-area: c5;
  justify-self: center;
  width: 100%;
  max-width: 480px;
  margin-top: 56px !important;
}

/* Thẻ bên trái: ảnh sát phía khuôn mặt, chữ căn phải */
#pxtm-landing .pxtm-usp__card--1,
#pxtm-landing .pxtm-usp__card--2 {
  flex-direction: row-reverse;
  text-align: right;
}

#pxtm-landing .pxtm-usp__card.is-active {
  background: rgba(255, 255, 255, 0.6);
  box-shadow: 0 16px 34px rgba(247, 66, 137, 0.24),
    0 0 11.97px 4.886px #fff inset;
}

#pxtm-landing .pxtm-usp__card--1.is-active,
#pxtm-landing .pxtm-usp__card--2.is-active {
  translate: 10px 0;
}

#pxtm-landing .pxtm-usp__card--3.is-active,
#pxtm-landing .pxtm-usp__card--4.is-active {
  translate: -10px 0;
}

#pxtm-landing .pxtm-usp__card--5.is-active {
  translate: 0 -8px;
}

#pxtm-landing .pxtm-usp__card:focus-visible {
  outline: 3px solid var(--pxtm-primary);
  outline-offset: 3px;
}

.pxtm-usp__media {
  display: block;
  flex: 0 0 auto;
  width: 86px;
  height: 86px;
  padding: 3px;
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 6px 14px rgba(113, 13, 172, 0.15);
  transition: background 0.35s ease, rotate 0.5s cubic-bezier(0.34, 1.45, 0.64, 1);
}

.pxtm-usp__card.is-active .pxtm-usp__media {
  background: var(--pxtm-grad-title-2);
  rotate: -6deg;
}

#pxtm-landing .pxtm-usp__media img {
  width: 100%;
  height: 100%;
  border-radius: 21px;
  background: linear-gradient(180deg, #f6eefe 0%, #e9dcf7 100%);
  object-fit: cover;
}

.pxtm-usp__body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.pxtm-usp__num {
  align-self: flex-start;
  padding: 0.06em 0.08em 0 0;
  background-image: var(--pxtm-grad-title-2);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  font-family: var(--pxtm-font-serif);
  font-size: 34px;
  font-style: italic;
  line-height: 1;
}

.pxtm-usp__card--1 .pxtm-usp__num,
.pxtm-usp__card--2 .pxtm-usp__num {
  align-self: flex-end;
}

.pxtm-usp__text {
  color: var(--pxtm-primary);
  font-family: var(--pxtm-font-sans);
  font-size: 18px;
  line-height: 1.38;
  text-wrap: pretty;
}

/* Chấm trang: chỉ mobile */
.pxtm-usp__pager {
  display: none;
}

.pxtm-usp__cta {
  display: flex;
  justify-content: center;
  margin-top: 56px;
}

.pxtm-usp__cta .pxtm-btn {
  --pxtm-btn-w: 250px;
}

/* ----- Tablet: mặt trên, lưới 2 cột ----- */
@media (min-width: 769px) and (max-width: 1024px) {
  .pxtm-usp {
    padding: 44px 24px 88px;
  }

  #pxtm-landing .pxtm-usp__heading {
    margin-bottom: 76px;
  }

  .pxtm-usp__map {
    --pxtm-usp-face: 380px;

    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas:
      "face face"
      "c1 c3"
      "c2 c4"
      "c5 c5";
    column-gap: 20px;
    row-gap: 20px;
  }

  #pxtm-landing .pxtm-usp__visual {
    justify-self: center;
    margin-bottom: 70px;
  }

  .pxtm-usp__lines {
    display: none;
  }

  #pxtm-landing .pxtm-usp__card--1,
  #pxtm-landing .pxtm-usp__card--2 {
    flex-direction: row;
    text-align: left;
  }

  .pxtm-usp__card--1 .pxtm-usp__num,
  .pxtm-usp__card--2 .pxtm-usp__num {
    align-self: flex-start;
  }

  .pxtm-usp__card--5 {
    margin-top: 0 !important;
  }

  #pxtm-landing .pxtm-usp__card.is-active {
    translate: 0 -6px;
  }

  .pxtm-usp__media {
    width: 72px;
    height: 72px;
  }

  .pxtm-usp__text {
    font-size: 16px;
  }
}

/* ----- Mobile: mặt trên, thẻ vuốt ngang ----- */
@media (max-width: 768px) {
  .pxtm-usp {
    padding: 36px 16px 60px;
  }

  #pxtm-landing .pxtm-usp__heading {
    margin-bottom: 56px;
  }

  .pxtm-usp__map {
    --pxtm-usp-face: min(74vw, 300px);

    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .pxtm-usp__lines {
    display: none;
  }

  #pxtm-landing .pxtm-usp__visual {
    margin-bottom: 50px;
  }

  .pxtm-usp__orbit--1 {
    inset: -18px;
  }

  .pxtm-usp__orbit--2 {
    inset: -38px;
  }

  .pxtm-usp__frame {
    border-width: 4px;
  }

  #pxtm-landing .pxtm-usp__spot {
    width: 26px;
    height: 26px;
    margin: -13px 0 0 -13px;
    font-size: 12px;
  }

  /* Hàng thẻ vuốt ngang, tràn sát mép màn hình */
  #pxtm-landing .pxtm-usp__list {
    display: flex;
    align-self: stretch;
    gap: 12px;
    margin: -14px -16px 0;
    padding: 24px 16px 36px; /* chừa chỗ bóng thẻ, tránh bị cắt thẳng */
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-padding-inline: 16px;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  #pxtm-landing .pxtm-usp__list::-webkit-scrollbar {
    display: none;
  }

  #pxtm-landing .pxtm-usp__card,
  #pxtm-landing .pxtm-usp__card--1,
  #pxtm-landing .pxtm-usp__card--2 {
    flex: 0 0 84%;
    flex-direction: row;
    gap: 14px;
    max-width: none;
    margin: 0 !important;
    padding: 16px 16px 16px 14px;
    text-align: left;
    scroll-snap-align: center;
  }

  .pxtm-usp__card--1 .pxtm-usp__num,
  .pxtm-usp__card--2 .pxtm-usp__num {
    align-self: flex-start;
  }

  #pxtm-landing .pxtm-usp__card.is-active {
    translate: 0 -4px;
  }

  .pxtm-usp__media {
    width: 68px;
    height: 68px;
    border-radius: 20px;
  }

  #pxtm-landing .pxtm-usp__media img {
    border-radius: 17px;
  }

  .pxtm-usp__num {
    font-size: 28px;
  }

  .pxtm-usp__text {
    font-size: 16px;
    line-height: 1.34;
  }

  .pxtm-usp__pager {
    display: flex;
    gap: 8px;
    margin-top: -14px;
  }

  .pxtm-usp__pager-dot {
    width: 8px;
    height: 8px;
    border-radius: var(--pxtm-radius-pill);
    background: rgba(113, 13, 172, 0.25);
    transition: width 0.35s ease, background 0.35s ease;
  }

  .pxtm-usp__pager-dot.is-active {
    width: 26px;
    background: var(--pxtm-grad-title-2);
  }

  .pxtm-usp__cta {
    margin-top: 32px;
  }

  .pxtm-usp__cta .pxtm-btn {
    --pxtm-btn-w: 215px;
  }
}

/* =========================================================
 * SECTION: QUY TRÌNH PHUN XĂM THẨM MỸ
 * Ưu tiên người trung niên: chữ lớn, tương phản rõ, luôn thấy mình đang
 * ở bước mấy / tổng mấy bước.
 *
 * DESKTOP (≥1025px & cao ≥640px) – "ghim section":
 *   khung quy trình đứng yên đúng 1 màn hình; cuộn chuột → chuyển lần lượt
 *   bước 1 → 5 (thanh 5 bước tô màu theo), hết bước 5 trang cuộn tiếp.
 *   Mỗi bước chiếm --pxtm-steps-per chiều cao cuộn.
 * MOBILE / TABLET / màn thấp – "thẻ vuốt":
 *   1 bước / lần, vuốt ngang hoặc nút Bước trước / Bước tiếp; cả section
 *   gọn trong ~1 màn hình.
 * Biến chỉnh nhanh (trên .pxtm-steps__pin):
 *   --pxtm-steps-per   : quãng cuộn cho mỗi bước (desktop), mặc định 60vh
 *   --pxtm-steps-img-h : chiều cao ảnh bước (desktop)
 * ========================================================= */
.pxtm-steps {
  position: relative;
  width: 100%;
  padding: 56px 24px 90px;
}

.pxtm-steps__pin {
  --pxtm-steps-n: 5;
  --pxtm-steps-per: 60vh;
  --pxtm-steps-top: var(--pxtm-sticky-top, 0px); /* header dính của site (JS đo chung) */
  --pxtm-steps-img-h: min(400px, 42vh);

  position: relative;
  max-width: 1180px;
  margin: 0 auto;
}

#pxtm-landing .pxtm-steps__heading {
  margin-bottom: 26px;
}

/* ----- Thanh 5 bước ----- */
.pxtm-steps__rail {
  position: relative;
  max-width: 1100px;
  margin: 0 auto 30px;
}

/* Trục nối tâm vòng đầu → tâm vòng cuối (5 cột đều: 10% → 90%) */
.pxtm-steps__rail-track {
  position: absolute;
  top: 26px;
  right: calc(50% / var(--pxtm-steps-n));
  left: calc(50% / var(--pxtm-steps-n));
  height: 4px;
  margin-top: -2px;
  overflow: hidden;
  border-radius: 4px;
  background: rgba(172, 89, 255, 0.2);
}

.pxtm-steps__rail-fill {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(90deg, #ac59ff 0%, #f74289 100%);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.45s cubic-bezier(0.22, 0.61, 0.36, 1);
  will-change: transform;
}

.pxtm-steps__pin.is-pinned .pxtm-steps__rail-fill {
  transition: transform 0.12s linear;
}

#pxtm-landing .pxtm-steps__rail-list {
  position: relative;
  display: grid;
  grid-template-columns: repeat(var(--pxtm-steps-n), minmax(0, 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
}

#pxtm-landing .pxtm-steps__rail-item {
  display: flex;
  justify-content: center;
  margin: 0;
  padding: 0;
  list-style: none;
}

#pxtm-landing .pxtm-steps__rail-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  min-height: 0;
  margin: 0;
  padding: 0 14px;
  border: 0;
  background: none;
  box-shadow: none;
  color: var(--pxtm-primary);
  text-transform: none;
  letter-spacing: 0;
  cursor: pointer;
}

.pxtm-steps__rail-node {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  padding-right: 0.06em;
  border: 3px solid rgba(172, 89, 255, 0.35);
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 6px 16px rgba(113, 13, 172, 0.14);
  font-family: var(--pxtm-font-serif);
  font-size: 26px;
  font-style: italic;
  line-height: 1;
  transition: background 0.4s ease, color 0.4s ease, border-color 0.4s ease,
    box-shadow 0.4s ease, scale 0.45s cubic-bezier(0.34, 1.45, 0.64, 1);
}

/* Bước đã qua: tím nhạt đầy | bước đang xem: gradient + phóng to */
.pxtm-steps__rail-btn.is-done .pxtm-steps__rail-node {
  border-color: #fff;
  background: #ead9fb;
}

.pxtm-steps__rail-btn.is-active .pxtm-steps__rail-node {
  border-color: #fff;
  background: var(--pxtm-grad-title-2);
  box-shadow: 0 8px 22px rgba(247, 66, 137, 0.4), 0 0 0 5px rgba(247, 66, 137, 0.14);
  color: #fff;
  scale: 1.14;
}

.pxtm-steps__rail-title {
  max-width: 150px;
  font-family: var(--pxtm-font-sans);
  font-size: 15px;
  text-wrap: balance;
  font-weight: 500;
  line-height: 1.3;
  text-align: center;
  opacity: 0.6;
  transition: opacity 0.35s ease;
}

.pxtm-steps__rail-btn.is-active .pxtm-steps__rail-title,
.pxtm-steps__rail-btn.is-done .pxtm-steps__rail-title {
  opacity: 1;
}

.pxtm-steps__rail-btn.is-active .pxtm-steps__rail-title {
  font-weight: 500;
}

#pxtm-landing .pxtm-steps__rail-btn:focus-visible {
  outline: 3px solid var(--pxtm-primary);
  outline-offset: 4px;
  border-radius: 14px;
}

/* ----- Thẻ bước (dùng chung) ----- */
.pxtm-step {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  align-items: center;
  gap: 44px;
}

.pxtm-step__media {
  overflow: hidden;
  aspect-ratio: 4 / 3;
  border: 5px solid #fff;
  border-radius: 28px;
  background: linear-gradient(180deg, #f6eefe 0%, #e9dcf7 100%);
  box-shadow: 0 20px 40px rgba(113, 13, 172, 0.18);
}

#pxtm-landing .pxtm-step__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}

.pxtm-step__body {
  position: relative;
  padding: 34px 36px 36px;
  overflow: hidden;
  border: 0.611px solid #fff;
  border-radius: 28px;
  background: rgba(255, 255, 255, 0.35);
  box-shadow: 0 4px 4px 0 rgba(247, 66, 137, 0.17),
    0 0 11.97px 4.886px #fff inset;
}

/* Số lớn chìm góc phải thẻ */
.pxtm-step__num {
  position: absolute;
  top: -0.12em;
  right: 0.1em;
  z-index: -1;
  color: rgba(113, 13, 172, 0.08);
  font-family: var(--pxtm-font-serif);
  font-size: 150px;
  font-style: italic;
  line-height: 1;
  pointer-events: none;
}

.pxtm-step__body {
  isolation: isolate;
}

.pxtm-step__label {
  display: inline-flex;
  margin-bottom: 14px;
  padding: 7px 16px 6px;
  border-radius: var(--pxtm-radius-pill);
  background: var(--pxtm-grad-title-2);
  box-shadow: 0 4px 12px rgba(247, 66, 137, 0.25);
  color: #fff;
  font-family: var(--pxtm-font-sans);
  font-size: 15px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

#pxtm-landing .pxtm-step__title {
  margin: 0 0 12px;
  padding: 0;
  color: var(--pxtm-primary);
  font-family: var(--pxtm-font-sans);
  font-size: 32px;
  font-weight: 500;
  line-height: 1.22;
  letter-spacing: 0;
  text-transform: none;
}

#pxtm-landing .pxtm-step__text {
  margin: 0;
  color: #4a1a7a;
  font-family: var(--pxtm-font-sans);
  font-size: 21px;
  line-height: 1.5;
}

/* ----- Chân section ----- */
.pxtm-steps__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-top: 30px;
}

.pxtm-steps__cta {
  --pxtm-btn-w: 250px;
}

.pxtm-step__cta {
  display: none;
}

.pxtm-step__cta .pxtm-btn {
  --pxtm-btn-w: 250px;
}

/* Nút Bước trước / Bước tiếp: chỉ ở chế độ thẻ vuốt */
.pxtm-steps__nav {
  display: none;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

#pxtm-landing .pxtm-steps__nav-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 48px;
  margin: 0;
  padding: 0 18px;
  border: 1px solid #fff;
  border-radius: var(--pxtm-radius-pill);
  background: rgba(255, 255, 255, 0.7);
  box-shadow: 0 6px 16px rgba(113, 13, 172, 0.14), 0 0 8px 2px #fff inset;
  color: var(--pxtm-primary);
  font-family: var(--pxtm-font-sans);
  font-size: 16px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0;
  text-transform: none;
  cursor: pointer;
  transition: background 0.3s ease, color 0.3s ease, opacity 0.3s ease;
}

#pxtm-landing .pxtm-steps__nav-btn--next {
  border-color: transparent;
  background: var(--pxtm-grad-cta);
  background-size: 200% 100%;
  box-shadow: var(--pxtm-cta-shadow);
  color: #fff;
}

#pxtm-landing .pxtm-steps__nav-btn:disabled {
  opacity: 0.4;
  cursor: default;
}

.pxtm-steps__count {
  color: var(--pxtm-primary);
  font-family: var(--pxtm-font-serif);
  font-size: 26px;
  font-style: italic;
  line-height: 1;
}

/* =========================================================
 * CHẾ ĐỘ GHIM (desktop đủ cao) – chỉ khi có JS
 * ========================================================= */
@media (min-width: 1025px) and (min-height: 640px) {
  #pxtm-landing.is-js .pxtm-steps {
    padding-top: 0;
    padding-bottom: 12px;
  }

  /* Tổng chiều cao = chiều cao khung dính + quãng cuộn cho các bước sau
   * (JS đo khung dính và ghi height inline; calc dưới chỉ là dự phòng) */
  #pxtm-landing.is-js .pxtm-steps__pin {
    --pxtm-steps-card-w: min(1040px, 70vw);
    --pxtm-steps-card-gap: 64px;

    height: calc(100vh + (var(--pxtm-steps-n) - 1) * var(--pxtm-steps-per));
  }

  /* Nội dung bám mép trên (không căn giữa màn hình) → hết khoảng trống lớn
   * phía trên tiêu đề khi cuộn tới section */
  /* Khung dính cao đúng bằng nội dung (không kéo full màn hình) → hết
   * khoảng trống lớn bên dưới khi rời section */
  #pxtm-landing.is-js .pxtm-steps__sticky {
    position: sticky;
    top: var(--pxtm-steps-top);
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    max-height: calc(100vh - var(--pxtm-steps-top));
    padding: 28px 0 8px;
  }

  #pxtm-landing.is-js .pxtm-steps__heading .pxtm-heading__keyword {
    font-size: clamp(56px, 8vh, 84px);
  }

  /* Dải bước tràn full màn hình, 2 mép mờ dần */
  #pxtm-landing.is-js .pxtm-steps__stage {
    display: grid;
    width: 100vw;
    margin-left: calc(50% - 50vw);
    padding: 20px 0 28px;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 14%, #000 86%, transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0, #000 14%, #000 86%, transparent 100%);
  }

  /* Mỗi bước: chồng cùng ô, JS dịch ngang + thu nhỏ + làm mờ theo khoảng
   * cách tới giữa (cuộn tới đâu trượt tới đó) */
  #pxtm-landing.is-js .pxtm-step {
    grid-area: 1 / 1;
    justify-self: center;
    width: var(--pxtm-steps-card-w);
    transform-origin: center center;
    will-change: transform, opacity;
  }

  #pxtm-landing.is-js .pxtm-step:not(.is-active) {
    cursor: pointer;
  }

  #pxtm-landing.is-js .pxtm-step__media {
    height: var(--pxtm-steps-img-h);
    aspect-ratio: auto;
  }

  /* Cột phải: khung chữ + CTA căn giữa ngay dưới */
  #pxtm-landing.is-js .pxtm-step__side {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 22px;
  }

  #pxtm-landing.is-js .pxtm-step__cta {
    display: flex;
    justify-content: center;
  }

  /* Chân section không cần ở chế độ ghim (CTA đã nằm trong từng bước) */
  #pxtm-landing.is-js .pxtm-steps__foot {
    display: none;
  }
}

/* Desktop màn thấp (640–880px cao): thu gọn để vừa khít 1 màn hình */
@media (min-width: 1025px) and (min-height: 640px) and (max-height: 880px) {
  #pxtm-landing.is-js .pxtm-steps__sticky {
    padding: 16px 0 12px;
  }

  #pxtm-landing.is-js .pxtm-steps__heading {
    margin-bottom: 14px;
  }

  #pxtm-landing.is-js .pxtm-steps__heading .pxtm-heading__keyword {
    font-size: clamp(46px, 7vh, 64px);
  }

  #pxtm-landing.is-js .pxtm-steps__heading .pxtm-pill-title__text {
    font-size: 20px;
  }

  #pxtm-landing.is-js .pxtm-steps__heading .pxtm-heading__tail {
    margin-top: 4px;
    font-size: 24px;
  }

  #pxtm-landing.is-js .pxtm-steps__rail {
    margin-bottom: 16px;
  }

  #pxtm-landing.is-js .pxtm-steps__rail-node {
    width: 44px;
    height: 44px;
    font-size: 22px;
  }

  #pxtm-landing.is-js .pxtm-steps__rail-track {
    top: 22px;
  }

  #pxtm-landing.is-js .pxtm-steps__rail-btn {
    gap: 6px;
  }

  #pxtm-landing.is-js .pxtm-steps__rail-title {
    font-size: 14px;
  }

  #pxtm-landing.is-js .pxtm-steps__rail-btn {
    gap: 10px;
  }

  #pxtm-landing.is-js .pxtm-steps__pin {
    --pxtm-steps-img-h: 34vh;
  }

  #pxtm-landing.is-js .pxtm-step__body {
    padding: 22px 28px 24px;
  }

  #pxtm-landing.is-js .pxtm-step__label {
    margin-bottom: 10px;
  }

  #pxtm-landing.is-js .pxtm-step__title {
    margin-bottom: 8px;
    font-size: 27px;
  }

  #pxtm-landing.is-js .pxtm-step__text {
    font-size: 19px;
  }

  #pxtm-landing.is-js .pxtm-steps__foot {
    margin-top: 16px;
  }

  #pxtm-landing.is-js .pxtm-step__cta .pxtm-btn {
    --pxtm-btn-w: 220px;
  }

  #pxtm-landing.is-js .pxtm-step__side {
    gap: 16px;
  }
}

/* Desktop không JS / màn thấp: xếp các bước dọc bình thường */
@media (min-width: 1025px) {
  #pxtm-landing:not(.is-js) .pxtm-steps__stage {
    display: flex;
    flex-direction: column;
    gap: 36px;
  }
}

/* =========================================================
 * CHẾ ĐỘ THẺ VUỐT: tablet, mobile, desktop thấp (<640px)
 * ========================================================= */
@media (max-width: 1024px), (max-height: 639px) {
  /* Đệm trên/dưới đủ rộng cho bóng thẻ, tránh bị khung cuộn cắt thẳng */
  #pxtm-landing .pxtm-steps__stage {
    display: flex;
    gap: 16px;
    margin: -18px -24px -20px;
    padding: 24px 24px 48px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-padding-inline: 24px;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  #pxtm-landing .pxtm-steps__stage::-webkit-scrollbar {
    display: none;
  }

  .pxtm-step {
    flex: 0 0 100%;
    scroll-snap-align: center;
    scroll-snap-stop: always;
  }

  .pxtm-steps__foot {
    flex-direction: column;
    align-items: stretch;
    margin-top: 6px;
  }

  .pxtm-steps__nav {
    display: flex;
  }

  .pxtm-steps__cta {
    align-self: center;
  }
}

@media (min-width: 769px) and (max-width: 1024px) {
  .pxtm-steps {
    padding: 44px 24px 80px;
  }

  .pxtm-step {
    gap: 24px;
  }

  .pxtm-step__body {
    padding: 26px 24px 28px;
  }

  #pxtm-landing .pxtm-step__title {
    font-size: 26px;
  }

  #pxtm-landing .pxtm-step__text {
    font-size: 19px;
  }
}

/* ----- Mobile ----- */
@media (max-width: 768px) {
  .pxtm-steps {
    padding: 36px 16px 56px;
  }

  #pxtm-landing .pxtm-steps__heading {
    margin-bottom: 20px;
  }

  .pxtm-steps__rail {
    margin-bottom: 14px;
  }

  .pxtm-steps__rail-track {
    top: 20px;
    height: 3px;
    margin-top: -1.5px;
  }

  .pxtm-steps__rail-node {
    width: 40px;
    height: 40px;
    border-width: 2px;
    font-size: 20px;
  }

  /* Mobile chỉ hiện số; tên bước đã có trong thẻ bên dưới */
  .pxtm-steps__rail-title {
    display: none;
  }

  #pxtm-landing .pxtm-steps__stage {
    gap: 12px;
    margin: -16px -16px -18px;
    padding: 24px 16px 40px;
    scroll-padding-inline: 16px;
  }

  .pxtm-step {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
  }

  .pxtm-step__media {
    position: relative;
    z-index: 1;
    aspect-ratio: 16 / 10;
    border-width: 4px;
    border-radius: 22px;
  }

  /* Thẻ chữ luồn lên dưới mép ảnh */
  .pxtm-step__body {
    margin: -26px 8px 0;
    padding: 40px 18px 22px;
    border-radius: 0 0 22px 22px;
  }

  .pxtm-step__num {
    top: auto;
    bottom: -0.2em;
    font-size: 110px;
  }

  .pxtm-step__label {
    margin-bottom: 10px;
    padding: 6px 12px 5px;
    font-size: 13px;
  }

  #pxtm-landing .pxtm-step__title {
    font-size: 23px;
  }

  #pxtm-landing .pxtm-step__text {
    font-size: 17px;
  }

  .pxtm-steps__foot {
    gap: 18px;
  }

  #pxtm-landing .pxtm-steps__nav-btn {
    min-height: 46px;
    padding: 0 16px;
    font-size: 15px;
  }

  .pxtm-steps__cta {
    --pxtm-btn-w: 215px;
  }
}

@media (max-width: 380px) {
  #pxtm-landing .pxtm-steps__nav-btn {
    padding: 0 12px;
    font-size: 14px;
  }
}

/* =========================================================
 * COMPONENT: SLIDER (cuộn ngang native + scroll-snap)
 * Desktop: kéo chuột / cuộn trackpad, thanh tiến trình tím (bấm để nhảy)
 * Mobile : vuốt tay + dots
 * ========================================================= */
.pxtm-slider {
  --pxtm-slider-gap: 21px;

  position: relative;
  min-width: 0;
}

.pxtm-slider__viewport {
  position: relative;
  display: flex;
  justify-content: flex-start;
  gap: var(--pxtm-slider-gap);
  padding: 10px 0 18px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  cursor: grab;
  outline: none;
}

.pxtm-slider__viewport::-webkit-scrollbar {
  display: none;
}

.pxtm-slider__viewport.is-dragging {
  scroll-snap-type: none;
  cursor: grabbing;
  user-select: none;
}

.pxtm-slider__viewport:focus-visible {
  outline: 3px solid var(--pxtm-primary);
  outline-offset: 2px;
}

.pxtm-slider__item {
  flex: 0 0 auto;
  scroll-snap-align: start;
}

.pxtm-slider__progress {
  position: relative;
  height: 6px;
  margin-top: 6px;
  overflow: hidden;
  border-radius: var(--pxtm-radius-pill);
  background: #e6dbf5;
  cursor: pointer;
}

.pxtm-slider__progress-bar {
  position: absolute;
  top: 0;
  left: 0;
  width: var(--pxtm-slider-w, 30%);
  height: 100%;
  border-radius: inherit;
  background: var(--pxtm-primary);
  transform: translateX(var(--pxtm-slider-x, 0%));
}

.pxtm-slider__dots {
  display: none;
  justify-content: center;
  gap: 8px;
  margin-top: 4px;
}

#pxtm-landing .pxtm-slider__dot {
  width: 8px;
  height: 8px;
  min-height: 0;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(113, 13, 172, 0.25);
  cursor: pointer;
  transition: width 0.3s ease, background-color 0.3s ease;
}

#pxtm-landing .pxtm-slider__dot.is-active {
  width: 22px;
  border-radius: var(--pxtm-radius-pill);
  background: var(--pxtm-primary);
}

@media (max-width: 768px) {
  .pxtm-slider__progress {
    display: none;
  }

  .pxtm-slider__dots {
    display: flex;
  }

  .pxtm-slider__viewport {
    cursor: auto;
  }
}

/* =========================================================
 * SECTION: CHỨNG NHẬN
 * 2 ảnh bằng + cúp (PNG nền trong), pattern nền chỉ desktop
 * ========================================================= */
.pxtm-awards {
  position: relative;
  z-index: 1;
  width: 100%;
  padding: 70px 24px 96px;
  overflow: hidden;
  background: var(--pxtm-bg);
}

#pxtm-landing .pxtm-awards__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: center bottom;
  pointer-events: none;
}

.pxtm-awards__inner {
  position: relative;
  z-index: 1;
  max-width: 1320px;
  margin: 0 auto;
}

.pxtm-awards__heading {
  margin-bottom: 80px;
}

.pxtm-awards__year {
  margin-top: 8px;
  color: var(--pxtm-deep);
  font-family: var(--pxtm-font-serif);
  font-size: 54px;
  font-style: italic;
  font-weight: 400;
  line-height: 1.1;
}

/* Đoạn giới thiệu chỉ có trên mobile */
#pxtm-landing .pxtm-awards__intro {
  display: none;
}

.pxtm-awards__grid {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 110px;
}

.pxtm-awards__item {
  margin: 0;
}

#pxtm-landing .pxtm-awards__image {
  width: auto;
  max-height: 600px;
  filter: drop-shadow(0 22px 30px rgba(69, 17, 128, 0.22));
  transition: transform 0.4s ease, filter 0.4s ease;
}

.pxtm-awards__item:hover .pxtm-awards__image {
  transform: translateY(-10px) scale(1.03);
  filter: drop-shadow(0 30px 40px rgba(69, 17, 128, 0.3))
    drop-shadow(0 0 22px rgba(255, 214, 120, 0.45));
}

/* ----- Tablet ----- */
@media (min-width: 769px) and (max-width: 1199px) {
  .pxtm-awards__grid {
    gap: 40px;
  }

  .pxtm-awards__item {
    flex: 0 1 50%;
  }

  #pxtm-landing .pxtm-awards__image {
    width: 100%;
    max-height: none;
  }
}

/* ----- Mobile ----- */
@media (max-width: 768px) {
  .pxtm-awards {
    padding: 36px 16px 48px;
  }

  #pxtm-landing .pxtm-awards__bg {
    display: none;
  }

  .pxtm-awards__heading {
    margin-bottom: 14px;
  }

  .pxtm-awards__year {
    margin-top: 4px;
    font-size: 40px;
  }

  #pxtm-landing .pxtm-awards__intro {
    display: block;
    max-width: 420px;
    margin: 0 auto 22px;
  }

  .pxtm-awards__grid {
    flex-direction: column;
    align-items: center;
    gap: 28px;
  }

  .pxtm-awards__item {
    width: 92%;
    max-width: 380px;
  }

  #pxtm-landing .pxtm-awards__image {
    width: 100%;
    max-height: none;
  }

  .pxtm-awards__item:hover .pxtm-awards__image {
    transform: none;
  }
}

/* =========================================================
 * SECTION: BÁO CHÍ
 * Container 1565 | Cột trái: tiêu đề + mô tả | Cột phải: slider card 260 x 524
 * ========================================================= */
.pxtm-press {
  position: relative;
  z-index: 1;
  width: 100%;
  padding: 90px 24px 40px;
}

.pxtm-press__inner {
  display: grid;
  grid-template-columns: minmax(0, 613px) minmax(0, 900px);
  justify-content: center;
  align-items: center;
  gap: 60px;
  max-width: 1565px;
  margin: 0 auto;
}

.pxtm-press__intro {
  text-align: center;
}

.pxtm-press__intro .pxtm-heading {
  margin-bottom: 18px;
}

#pxtm-landing .pxtm-press__desc {
  max-width: 613px;
  margin: 0 auto;
}

/* Slider báo chí: nút ‹ › 2 bên (desktop), dots (mobile) – dùng component .pxtm-slider */
.pxtm-press__slider {
  --pxtm-slider-gap: 25px;

  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 18px;
}

.pxtm-press__slider .pxtm-slider__viewport {
  padding: 14px 4px 22px; /* chừa chỗ cho bóng đổ card */
}

.pxtm-press__slider .pxtm-slider__dots {
  grid-column: 1 / -1;
}

#pxtm-landing .pxtm-press__nav {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 56px;
  min-height: 0;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  color: var(--pxtm-primary);
  cursor: pointer;
  transition: transform 0.25s ease, color 0.25s ease;
}

#pxtm-landing .pxtm-press__nav--prev:hover {
  color: var(--pxtm-violet);
  transform: translateX(-4px) scale(1.18);
}

#pxtm-landing .pxtm-press__nav--next:hover {
  color: var(--pxtm-violet);
  transform: translateX(4px) scale(1.18);
}

#pxtm-landing .pxtm-press__nav:focus-visible {
  outline: 3px solid var(--pxtm-primary);
  outline-offset: 2px;
}

.pxtm-press__card {
  width: 260px;
}

/* Ảnh báo đã cắt kèm viền bo tròn → không khung nền, chỉ đổ bóng theo dáng ảnh */
.pxtm-press__link {
  display: block;
  filter: drop-shadow(0 8px 14px rgba(113, 13, 172, 0.14));
  transition: transform 0.3s ease, filter 0.3s ease;
}

a.pxtm-press__link:hover {
  filter: drop-shadow(0 16px 24px rgba(113, 13, 172, 0.24));
  transform: translateY(-8px);
}

#pxtm-landing .pxtm-press__image {
  width: 100%;
  height: auto;
}

/* ----- Tablet ----- */
@media (min-width: 769px) and (max-width: 1199px) {
  .pxtm-press__inner {
    grid-template-columns: minmax(0, 1fr);
    gap: 32px;
    max-width: 900px;
  }
}

/* ----- Mobile: vuốt + dots, card crop phần đầu bài báo ----- */
@media (max-width: 768px) {
  .pxtm-press {
    padding: 40px 16px 24px;
  }

  .pxtm-press__inner {
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
    max-width: 420px;
  }

  #pxtm-landing .pxtm-press__desc {
    text-align: left;
  }

  .pxtm-press__slider {
    --pxtm-slider-gap: 18px;

    grid-template-columns: minmax(0, 1fr);
  }

  #pxtm-landing .pxtm-press__nav {
    display: none;
  }

  .pxtm-press__slider .pxtm-slider__viewport {
    margin-right: -16px; /* card kế tiếp ló ra sát mép màn hình */
    padding: 8px 16px 18px 2px;
  }

  .pxtm-press__card {
    width: 66%;
  }

  /* Mobile: hiện trọn ảnh báo (không crop) để giữ viền bo tròn đã cắt sẵn */
}

/* =========================================================
 * SECTION: GIẢI ĐÁP THẮC MẮC (accordion)
 * Header dùng Gradient tím 2 (#AC59FF → #F74289), chữ trắng.
 * Mở/đóng mượt bằng grid-template-rows 0fr → 1fr.
 * ========================================================= */
.pxtm-faq {
  position: relative;
  z-index: 1;
  width: 100%;
  padding: 70px 24px 100px;
  background: var(--pxtm-bg);
}

.pxtm-faq__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 896px);
  align-items: start;
  gap: 60px;
  max-width: 1440px;
  margin: 0 auto;
}

/* Tiêu đề dính theo khi đọc câu trả lời dài */
.pxtm-faq__aside {
  position: sticky;
  top: 120px;
  padding-top: 6px;
}

.pxtm-faq__heading {
  margin-bottom: 0;
}

/* ----- Item ----- */
.pxtm-faq__list {
  display: flex;
  flex-direction: column;
  gap: 27px;
}

.pxtm-faq__item {
  position: relative;
}

#pxtm-landing .pxtm-faq__question {
  position: relative;
  z-index: 2;
  margin: 0;
  font-size: inherit;
}

#pxtm-landing .pxtm-faq__trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  width: 100%;
  min-height: 62px;
  margin: 0;
  padding: 12px 30px;
  border: 0;
  border-radius: var(--pxtm-radius-tab);
  background: var(--pxtm-grad-title-2);
  box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);
  color: #fff;
  font-family: var(--pxtm-font-sans);
  font-size: 19px;
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: 0;
  text-align: left;
  text-shadow: none;
  text-transform: none;
  cursor: pointer;
  transition: transform 0.25s ease, box-shadow 0.25s ease, filter 0.25s ease;
}

#pxtm-landing .pxtm-faq__trigger:hover {
  filter: brightness(1.06) saturate(1.1);
  box-shadow: 0 8px 18px rgba(172, 89, 255, 0.35);
  transform: translateY(-2px);
}

#pxtm-landing .pxtm-faq__trigger:focus-visible {
  outline: 3px solid var(--pxtm-primary);
  outline-offset: 3px;
}

.pxtm-faq__icon {
  flex: 0 0 auto;
  transition: transform 0.35s ease;
}

.pxtm-faq__item.is-open .pxtm-faq__icon {
  transform: rotate(180deg);
}

/* ----- Panel ----- */
.pxtm-faq__panel {
  display: grid;
  grid-template-rows: 1fr; /* không JS: luôn mở */
}

#pxtm-landing.is-js .pxtm-faq__panel {
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.45s cubic-bezier(0.22, 0.61, 0.36, 1),
    margin-top 0.45s cubic-bezier(0.22, 0.61, 0.36, 1);
}

#pxtm-landing.is-js .pxtm-faq__item.is-open .pxtm-faq__panel {
  grid-template-rows: 1fr;
}

/* Khi mở: khung trắng luồn dưới header 18px (bo góc header đè lên khung) */
#pxtm-landing .pxtm-faq__item.is-open .pxtm-faq__panel,
#pxtm-landing:not(.is-js) .pxtm-faq__panel {
  margin-top: -18px;
}

.pxtm-faq__panel-inner {
  min-height: 0;
  overflow: hidden;
}

/* Khung trắng trả lời */
.pxtm-faq__answer {
  margin: 0;
  padding: 36px 30px 24px;
  border-radius: 0 0 var(--pxtm-radius-tab) var(--pxtm-radius-tab);
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 0 8px 3px #fff inset;
  opacity: 0;
  transform: translateY(-10px);
  transition: opacity 0.35s ease, transform 0.35s ease;
}

.pxtm-faq__item.is-open .pxtm-faq__answer,
#pxtm-landing:not(.is-js) .pxtm-faq__answer {
  opacity: 1;
  transform: none;
}

#pxtm-landing .pxtm-faq__answer p,
#pxtm-landing .pxtm-faq__answer ul {
  margin: 0 0 8px;
}

#pxtm-landing .pxtm-faq__answer > :last-child {
  margin-bottom: 0;
}

#pxtm-landing .pxtm-faq__answer ul {
  padding: 0;
  list-style: none;
}

#pxtm-landing .pxtm-faq__answer li {
  position: relative;
  margin: 0 0 4px;
  padding-left: 16px;
}

#pxtm-landing .pxtm-faq__answer li::before {
  position: absolute;
  top: 0;
  left: 0;
  content: "-";
}

/* ----- Tablet ----- */
@media (min-width: 769px) and (max-width: 1199px) {
  .pxtm-faq__inner {
    grid-template-columns: minmax(0, 1fr);
    gap: 32px;
    max-width: 896px;
  }

  .pxtm-faq__aside {
    position: static;
  }
}

/* ----- Mobile ----- */
@media (max-width: 768px) {
  .pxtm-faq {
    padding: 36px 16px 56px;
  }

  .pxtm-faq__inner {
    grid-template-columns: minmax(0, 1fr);
    gap: 22px;
    max-width: 420px;
  }

  .pxtm-faq__aside {
    position: static;
    padding-top: 0;
  }

  .pxtm-faq__list {
    gap: 14px;
  }

  #pxtm-landing .pxtm-faq__trigger {
    min-height: 50px;
    padding: 10px 16px;
    font-size: 16px;
  }

  #pxtm-landing .pxtm-faq__trigger:hover {
    transform: none;
  }

  .pxtm-faq__answer {
    padding: 30px 18px 18px;
  }
}

/* Chứng nhận – mobile: pill dài ("Thương hiệu phun xăm hàng đầu Việt Nam")
 * được xuống 2 dòng thay vì tràn 2 mép màn hình */
@media (max-width: 768px) {
  .pxtm-awards .pxtm-pill-title {
    max-width: calc(100% - 40px);
  }

  #pxtm-landing .pxtm-awards .pxtm-pill-title__text {
    font-size: clamp(15px, 4.1vw, 17px);
    line-height: 1.25;
    text-align: center;
    white-space: normal;
  }
}

/* =========================================================
 * HIỆU NĂNG – mượt trên điện thoại cấu hình yếu
 * 1. Section nằm ngoài màn hình → tạm dừng mọi animation lặp bên trong
 *    (JS gắn .is-idle) → không tốn CPU/GPU vẽ lại thứ khách không thấy.
 * 2. Mobile: tắt backdrop-filter (blur nền) – thủ phạm chính gây giật
 *    khi cuộn; các khung đã có nền bán trong nên vẫn đẹp.
 * 3. Máy yếu / bật tiết kiệm dữ liệu (JS gắn .is-lite): tắt các hiệu ứng
 *    lặp trang trí (pulse, shine, vòng sóng, xoay quỹ đạo…), bỏ filter
 *    trên coverflow → chỉ còn transform / opacity (GPU xử lý nhẹ).
 * ========================================================= */
/* Chỉ dừng các hiệu ứng LẶP VÔ HẠN (không đụng animation xuất hiện) */
#pxtm-landing .is-idle .pxtm-btn,
#pxtm-landing .is-idle .pxtm-btn::before,
#pxtm-landing .is-idle .pxtm-btn::after,
#pxtm-landing .is-idle .pxtm-services__indicator,
#pxtm-landing .is-idle .pxtm-svc__hot,
#pxtm-landing .is-idle .pxtm-svc__hot svg,
#pxtm-landing .is-idle .pxtm-svc__hot::after,
#pxtm-landing .is-idle .pxtm-ba__handle::after,
#pxtm-landing .is-idle .pxtm-video__play,
#pxtm-landing .is-idle .pxtm-video__unmute,
#pxtm-landing .is-idle .pxtm-usp__orbit--1,
#pxtm-landing .is-idle .pxtm-usp__spot::before {
  animation-play-state: paused !important;
}

@media (max-width: 1024px) {
  #pxtm-landing *,
  #pxtm-landing *::before,
  #pxtm-landing *::after {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }

  /* Coverflow: chỉ dùng opacity thay cho filter sáng/tối */
  #pxtm-landing.is-js .pxtm-cf__item {
    filter: none;
  }

  #pxtm-landing.is-js .pxtm-cf__item:not(.is-active) {
    opacity: calc(1 - var(--ad, 0) * 0.28);
  }
}

@media (max-width: 768px) {
  #pxtm-landing.is-js .pxtm-cf__item:not(.is-active) {
    opacity: calc(0.72 - max(0, var(--ad, 0) - 1));
  }
}

#pxtm-landing.is-lite .pxtm-btn,
#pxtm-landing.is-lite .pxtm-btn::before,
#pxtm-landing.is-lite .pxtm-btn::after,
#pxtm-landing.is-lite .pxtm-services__indicator,
#pxtm-landing.is-lite .pxtm-svc__hot,
#pxtm-landing.is-lite .pxtm-svc__hot svg,
#pxtm-landing.is-lite .pxtm-svc__hot::after,
#pxtm-landing.is-lite .pxtm-ba__handle::after,
#pxtm-landing.is-lite .pxtm-video__play,
#pxtm-landing.is-lite .pxtm-video__unmute,
#pxtm-landing.is-lite .pxtm-usp__orbit--1,
#pxtm-landing.is-lite .pxtm-usp__spot::before {
  animation: none !important;
}

#pxtm-landing.is-lite .pxtm-usp__line.is-active {
  filter: none;
}

/* ===== [END CSS] CSS section mới thêm PHÍA TRÊN dòng này ===== */

/* ---------- REDUCED MOTION (luôn để cuối file) ---------- */
@media (prefers-reduced-motion: reduce) {
  #pxtm-landing *,
  #pxtm-landing *::before,
  #pxtm-landing *::after {
    animation: none !important;
    transition: none !important;
  }
}