/* =========================================================
 * TRANG CHỦ TỔNG HỢP – LANDING PAGE
 * Prefix: tctt-  (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 ---------- */
#tctt-landing {
  /* Màu thương hiệu */
  --tctt-primary: #710dac;
  --tctt-deep: #451180;
  --tctt-violet: #9615d2;
  --tctt-white: #fff;
  --tctt-bg: #f4eeff;

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

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

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

  /* Radius */
  --tctt-radius-pill: 999px;
  --tctt-radius-card: 30px;
  --tctt-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(--tctt-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) {
  #tctt-landing {
    overflow: visible;
    overflow-x: clip;
  }
}

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

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

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

.tctt-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="tctt-br-m">  chỉ xuống dòng trên mobile
 *   <br class="tctt-br-d">  chỉ xuống dòng trên desktop + tablet
 *   .tctt-m-only            chỉ hiện trên mobile
 *   .tctt-d-only            chỉ hiện trên desktop + tablet */
.tctt-br-m,
.tctt-m-only {
  display: none;
}

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

  .tctt-br-d,
  .tctt-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 .tctt-grad-safe) */
.tctt-text-grad-1,
.tctt-text-grad-2 {
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

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

.tctt-text-grad-2 {
  background-image: var(--tctt-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 */
.tctt-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) */
#tctt-landing .tctt-text {
  margin: 0;
  color: var(--tctt-text-color);
  font-family: var(--tctt-font-sans);
  font-size: var(--tctt-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 --tctt-btn-w,
 * chiều cao + cỡ chữ tự scale theo.
 */
.tctt-btn {
  --tctt-btn-w: 279px;

  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--tctt-btn-w);
  height: calc(var(--tctt-btn-w) * 0.235);
  padding: 0 calc(var(--tctt-btn-w) * 0.07);
  overflow: hidden;
  border: 1.5px solid rgba(255, 255, 255, 0.85);
  border-radius: var(--tctt-radius-pill);
  background: var(--tctt-grad-cta);
  background-size: 200% 100%;
  background-position: 0 0;
  box-shadow: var(--tctt-cta-shadow);
  color: var(--tctt-white);
  font-family: var(--tctt-font-sans);
  font-size: calc(var(--tctt-btn-w) * var(--tctt-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: tctt-btn-pulse 2.2s ease-in-out infinite;
  animation-delay: var(--tctt-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 */
.tctt-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: tctt-btn-shine 3.2s ease-in-out infinite;
  animation-delay: var(--tctt-delay, 0s);
  pointer-events: none;
}

.tctt-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ữ */
.tctt-btn--auto {
  width: auto;
  min-width: var(--tctt-btn-w);
  padding: 0 calc(var(--tctt-btn-w) * 0.14);
}

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

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

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

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

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

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

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

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

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

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

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

/* ---------- 6. COMPONENT – PILL TITLE (2 ngôi sao góc) ---------- */
.tctt-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(--tctt-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;
}

.tctt-pill-title__text {
  color: var(--tctt-primary);
  font-family: var(--tctt-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 */
#tctt-landing .tctt-pill-title__star {
  position: absolute;
  z-index: 1;
  height: auto;
  pointer-events: none;
}

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

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

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

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

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

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

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

  .tctt-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.
 */
.tctt-heading {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0 0 42px;
  text-align: center;
}

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

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

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

.tctt-heading .tctt-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") */
.tctt-heading__line--center {
  align-items: center;
}

.tctt-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?") */
.tctt-heading__tail {
  margin-top: 10px;
  color: var(--tctt-primary);
  font-family: var(--tctt-font-sans);
  font-size: 34px;
  font-weight: 500;
  line-height: 1.2;
}

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

  .tctt-heading__line {
    gap: 6px;
  }

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

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

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

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

/* ---------- 7. UTILITY – SCROLL REVEAL ----------
 * Gắn data-tctt-reveal (+ style="--i:n" để lệch nhịp).
 * Chỉ ẩn khi JS chạy (#tctt-landing.is-js) → không JS vẫn hiện đủ nội dung.
 */
#tctt-landing.is-js [data-tctt-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);
}

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

/* =========================================================
 * SECTION: HERO + KHUNG ƯU ĐÃI ĐẾM NGƯỢC
 * Banner: desktop 1920 x 977 | mobile 420 x 741 (ảnh cắt trọn, KHÔNG kèm khung ưu đãi)
 * Khung ưu đãi là HTML, đè lên mép dưới banner.
 *   Desktop: 1198 x ~229, 2 cột [ƯU ĐÃI 50%] | [Kết thúc trong + đồng hồ / nút CTA]
 *   Mobile : 386 x ~184, 2 cột [ƯU ĐÃI / 50%] | [Kết thúc trong / đồng hồ], nút CTA đè mép dưới
 *
 * Toàn bộ chữ/khối trong khung tính theo đơn vị --tctt-ou (= 1% chiều rộng khung)
 * → khung co giãn đồng bộ trên laptop/tablet, không vỡ bố cục.
 *
 * BIẾN TINH CHỈNH (đặt trên .tctt-hero):
 *   --tctt-offer-w        : chiều rộng tối đa khung (desktop 1198px, mobile 480px)
 *   --tctt-offer-side     : khoảng hở tối thiểu 2 bên màn hình
 *   --tctt-offer-overlap  : khung đè lên banner bao nhiêu (theo vw → khớp artwork)
 *   --tctt-hero-pb        : khoảng trống dưới section
 *   --tctt-offer-border   : gradient viền khung
 *   --tctt-offer-divider  : gradient đường kẻ giữa
 *   --tctt-offer-label-color : màu chữ "Kết thúc trong"
 *   --tctt-cd-bg          : gradient ô số đồng hồ
 * ========================================================= */
.tctt-hero {
  --tctt-offer-w: 1198px;
  --tctt-offer-side: 40px;
  /* 104 / 1920 = 5.42% chiều rộng banner */
  --tctt-offer-overlap: clamp(36px, 5.42vw, 150px);
  --tctt-hero-pb: 40px;
  --tctt-offer-radius: 30px;
  --tctt-offer-border: linear-gradient(180deg, #f5c8bd 0%, #e2a6d6 55%, #b886ee 100%);
  --tctt-offer-divider: linear-gradient(180deg, #de4c33 0%, #9615d2 100%);
  --tctt-offer-label-color: #a12caa;
  --tctt-cd-bg: linear-gradient(180deg, #7414a8 0%, #d84e3a 100%);

  position: relative;
  width: 100%;
  padding-bottom: var(--tctt-hero-pb);
}

.tctt-hero__banner {
  display: block;
  width: 100%;
}

#tctt-landing .tctt-hero__banner-img {
  width: 100%;
  height: auto;
}

/* ----- Wrapper khung: là container để chữ bên trong scale theo khung ----- */
.tctt-hero__offer {
  /* Đơn vị dự phòng (trình duyệt chưa hỗ trợ container query):
   * tính từ viewport, xấp xỉ 1% chiều rộng khung */
  --tctt-ou: calc(min(var(--tctt-offer-w), 100vw - var(--tctt-offer-side)) / 100);

  position: relative;
  z-index: 2;
  width: min(var(--tctt-offer-w), calc(100% - var(--tctt-offer-side)));
  margin: calc(-1 * var(--tctt-offer-overlap)) auto 0;
  container-type: inline-size;
}

@supports (width: 1cqw) {
  .tctt-hero__offer .tctt-offer {
    --tctt-ou: 1cqw;
  }
}

/* ----- Khung trắng viền gradient ----- */
.tctt-offer {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  padding: calc(var(--tctt-ou) * 2.6) calc(var(--tctt-ou) * 5);
  border: 1.5px solid transparent;
  border-radius: var(--tctt-offer-radius);
  background: linear-gradient(#fff, #fff) padding-box,
    var(--tctt-offer-border) border-box;
  box-shadow: 0 14px 34px -12px rgba(113, 13, 172, 0.28),
    0 0 0 6px rgba(255, 255, 255, 0.35);
  animation: tctt-offer-in 0.9s cubic-bezier(0.22, 0.61, 0.36, 1) 0.2s both;
}

/* Cột trái: ƯU ĐÃI 50% */
#tctt-landing .tctt-offer__deal {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(var(--tctt-ou) * 2.25);
  margin: 0;
  padding: 0;
  line-height: 1;
}

.tctt-offer__label {
  font-family: var(--tctt-font-serif);
  font-size: calc(var(--tctt-ou) * 4.7);
  font-style: normal;
  font-weight: 400;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
}

.tctt-offer__value {
  padding-right: 0.1em; /* chừa phần nghiêng của chữ italic */
  font-family: var(--tctt-font-serif);
  font-size: calc(var(--tctt-ou) * 14);
  font-style: italic;
  font-weight: 400;
  line-height: 0.95;
  white-space: nowrap;
}

/* Đường kẻ giữa + 2 hạt kim cương 2 đầu */
.tctt-offer__divider {
  position: relative;
  display: block;
  width: 1.5px;
  height: calc(var(--tctt-ou) * 13.9);
  background: var(--tctt-offer-divider);
}

.tctt-offer__divider::before,
.tctt-offer__divider::after {
  position: absolute;
  left: 50%;
  width: 7px;
  height: 7px;
  content: "";
  transform: translate(-50%, -50%) rotate(45deg);
}

.tctt-offer__divider::before {
  top: 0;
  background: #de4c33;
}

.tctt-offer__divider::after {
  top: 100%;
  background: #9615d2;
}

/* Cột phải: Kết thúc trong + đồng hồ / nút */
.tctt-offer__side {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(var(--tctt-ou) * 2.3);
}

.tctt-offer__timer {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(var(--tctt-ou) * 1.4);
}

#tctt-landing .tctt-offer__timer-label {
  margin: 0;
  padding: 0;
  color: var(--tctt-offer-label-color);
  font-family: var(--tctt-font-sans);
  font-size: calc(var(--tctt-ou) * 2.34);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: 0;
  text-transform: uppercase;
  white-space: nowrap;
}

/* ----- Đồng hồ đếm ngược ----- */
.tctt-countdown {
  display: flex;
  align-items: center;
  gap: calc(var(--tctt-ou) * 0.6);
}

.tctt-countdown__box {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(var(--tctt-ou) * 5.1);
  height: calc(var(--tctt-ou) * 4.95);
  overflow: hidden;
  border-radius: calc(var(--tctt-ou) * 0.85);
  background: var(--tctt-cd-bg);
  box-shadow: 0 4px 10px -3px rgba(113, 13, 172, 0.45),
    0 1px 0 rgba(255, 255, 255, 0.35) inset;
}

.tctt-countdown__num {
  display: block;
  color: #fff;
  font-family: var(--tctt-font-sans);
  font-size: calc(var(--tctt-ou) * 2.6);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

/* Số vừa đổi: trượt từ trên xuống + nảy nhẹ (class do JS gắn) */
.tctt-countdown__num.is-tick {
  animation: tctt-cd-tick 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.tctt-countdown__sep {
  color: #8f86a0;
  font-family: var(--tctt-font-sans);
  font-size: calc(var(--tctt-ou) * 2);
  font-weight: 500;
  line-height: 1;
  animation: tctt-cd-blink 1s steps(1) infinite;
}

/* Nút CTA: 260 / 1198 = 21.7% khung.
 * Lớp bao .tctt-offer__cta tạo viền kính trắng + quầng hồng quanh nút như Figma */
.tctt-offer__cta {
  display: inline-flex;
  padding: calc(var(--tctt-ou) * 0.45);
  border-radius: var(--tctt-radius-pill);
  background: rgba(255, 255, 255, 0.6);
  box-shadow: 0 8px 22px -6px rgba(224, 102, 138, 0.45);
}

.tctt-offer__cta .tctt-btn {
  --tctt-btn-w: max(180px, calc(var(--tctt-ou) * 21.7));
}

/* Ngôi sao pha lê góc phải dưới: 80px ≈ 6.7% khung, lơ lửng */
#tctt-landing .tctt-offer__star {
  position: absolute;
  right: calc(var(--tctt-ou) * -1.75);
  bottom: calc(var(--tctt-ou) * -1.1);
  z-index: 3;
  width: calc(var(--tctt-ou) * 6.7);
  height: auto;
  pointer-events: none;
  animation: tctt-star-float 3.6s ease-in-out infinite;
}

/* ----- Tablet ----- */
@media (max-width: 1024px) {
  .tctt-hero {
    --tctt-offer-radius: 24px;
  }
}

/* ----- Mobile: khung 386 / 420, nút đè mép dưới khung ----- */
@media (max-width: 768px) {
  .tctt-hero {
    --tctt-offer-w: 480px;
    --tctt-offer-side: 34px;
    /* 26 / 420 = 6.2% chiều rộng banner */
    --tctt-offer-overlap: 6.2vw;
    --tctt-hero-pb: 48px;
    --tctt-offer-radius: 24px;
    --tctt-offer-divider: linear-gradient(180deg, #9615d2 0%, #de4c33 100%);
  }

  .tctt-offer {
    padding: calc(var(--tctt-ou) * 4.7) calc(var(--tctt-ou) * 3.5)
      calc(var(--tctt-ou) * 13.7);
  }

  .tctt-offer__divider::before {
    background: #9615d2;
  }

  .tctt-offer__divider::after {
    background: #de4c33;
  }

  #tctt-landing .tctt-offer__deal {
    flex-direction: column;
    gap: calc(var(--tctt-ou) * 0.6);
  }

  .tctt-offer__label {
    font-size: calc(var(--tctt-ou) * 7);
  }

  .tctt-offer__value {
    font-size: calc(var(--tctt-ou) * 21.8);
  }

  .tctt-offer__divider {
    height: calc(var(--tctt-ou) * 29.3);
  }

  /* Cột phải chỉ còn nhãn + đồng hồ; nút tách xuống đè mép khung */
  .tctt-offer__timer {
    flex-direction: column;
    gap: calc(var(--tctt-ou) * 3);
  }

  #tctt-landing .tctt-offer__timer-label {
    font-size: calc(var(--tctt-ou) * 4.66);
  }

  .tctt-countdown {
    gap: calc(var(--tctt-ou) * 1);
  }

  .tctt-countdown__box {
    width: calc(var(--tctt-ou) * 11.1);
    height: calc(var(--tctt-ou) * 11.4);
    border-radius: calc(var(--tctt-ou) * 2.6);
  }

  .tctt-countdown__num {
    font-size: calc(var(--tctt-ou) * 5.7);
  }

  .tctt-countdown__sep {
    font-size: calc(var(--tctt-ou) * 4);
  }

  /* Tâm nút nằm đúng mép dưới khung. Tách lớp định vị (.tctt-offer__cta)
   * và nút (.tctt-btn) → hover/pulse của nút không đè transform định vị */
  .tctt-offer__cta {
    padding: calc(var(--tctt-ou) * 1.2);
    position: absolute;
    bottom: 0;
    left: 50%;
    z-index: 2;
    transform: translate(-50%, 50%);
  }

  /* 213 / 386 = 55.2% khung */
  .tctt-offer__cta .tctt-btn {
    --tctt-btn-w: calc(var(--tctt-ou) * 55.2);
  }

  /* 51px ≈ 13.2% khung */
  #tctt-landing .tctt-offer__star {
    right: calc(var(--tctt-ou) * -3.4);
    bottom: calc(var(--tctt-ou) * 1.2);
    width: calc(var(--tctt-ou) * 13.2);
  }
}

@keyframes tctt-offer-in {
  from {
    opacity: 0;
    translate: 0 40px;
    scale: 0.96;
  }
  to {
    opacity: 1;
    translate: 0 0;
    scale: 1;
  }
}

@keyframes tctt-cd-tick {
  0% {
    opacity: 0;
    transform: translateY(-60%) scale(0.85);
  }
  100% {
    opacity: 1;
    transform: none;
  }
}

@keyframes tctt-cd-blink {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.35;
  }
}

@keyframes tctt-star-float {
  0%,
  100% {
    translate: 0 0;
    rotate: 0deg;
    filter: drop-shadow(0 6px 10px rgba(113, 13, 172, 0.25)) brightness(1);
  }
  50% {
    translate: 0 -8px;
    rotate: -8deg;
    filter: drop-shadow(0 12px 16px rgba(150, 21, 210, 0.35)) brightness(1.12);
  }
}

/* =========================================================
 * SECTION: TOP DỊCH VỤ HOT TẠI PHÒNG KHÁM THẨM MỸ LINH ANH
 * Kế thừa section "Dịch vụ làm chân mày" LP phun mày.
 * Desktop: 3 card 1 hàng, cụm khung thấy được rộng = khung ưu đãi (1198px)
 * Tablet : 2 card + 1 card căn giữa | Mobile: 1 cột
 * PNG card 393 x 560 (xuất @2x 786 x 1120), hiển thị tối đa 412px.
 *
 * Card = ảnh PNG (khung + ảnh dịch vụ + ngôi sao) tự quyết định chiều cao card.
 * Lớp .tctt-svc__frame phủ đúng vùng KHUNG bên trong ảnh; chữ + nút định vị
 * theo khung bằng cqw (1cqw = 1% chiều rộng khung) → khớp mọi màn hình.
 *
 * ⚙️ BIẾN TINH CHỈNH:
 *   --tctt-svc-pad-x / -pad-top / -pad-bot : bù vùng bóng đổ trong suốt của PNG
 *     (PNG xuất sát khung → đặt cả 3 = 0%)
 *   --tctt-svc-card-w : chiều rộng tối đa 1 card PNG
 *   --tctt-svc-gap-x / --tctt-svc-gap-y : khoảng cách giữa các card PNG
 *   --tctt-svc-pt / --tctt-svc-pb : khoảng trống trên / dưới section
 * ========================================================= */
.tctt-svc {
  --tctt-svc-card-w: 412px;
  --tctt-svc-gap-x: 0px;
  --tctt-svc-gap-y: 40px;
  --tctt-svc-pt: 0px;
  --tctt-svc-pb: 48px; /* + 20px bóng đổ PNG = 68px tới hình ưu đãi (Figma) */

  position: relative;
  width: 100%;
  padding: var(--tctt-svc-pt) 24px var(--tctt-svc-pb);
}

/* Nền riêng desktop – nằm dưới cùng, không che brush section kề */
.tctt-svc__bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}

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

.tctt-svc__inner {
  position: relative;
  z-index: 1;
  max-width: calc(var(--tctt-svc-card-w) * 3 + var(--tctt-svc-gap-x) * 2);
  margin: 0 auto;
}

/* Tiêu đề: "Top" + pill cùng 1 dòng (canh theo chân chữ), dòng tail bên dưới */
.tctt-svc__heading {
  margin-bottom: 23px; /* 42px tới mép khung – trừ 19px bóng đổ trong suốt trên PNG */
}

.tctt-svc__title-line {
  gap: 14px;
}

/* ----- Grid ----- */
.tctt-svc__grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--tctt-svc-gap-y) var(--tctt-svc-gap-x);
}

/* ----- Card ----- */
.tctt-svc__card {
  --tctt-svc-pad-x: 4.6%;
  --tctt-svc-pad-top: 3.4%;
  --tctt-svc-pad-bot: 3.4%;

  position: relative;
  flex: 0 0 calc((100% - var(--tctt-svc-gap-x) * 2) / 3);
  max-width: var(--tctt-svc-card-w);
}

/* Hover nhấc card: áp lên ảnh + lớp khung (card đã dùng transform cho hiệu ứng reveal) */
#tctt-landing .tctt-svc__card-bg {
  position: relative;
  display: block;
  width: 100%;
  height: auto;
  transition: transform 0.35s ease, filter 0.35s ease;
}

.tctt-svc__card:hover .tctt-svc__card-bg {
  filter: drop-shadow(0 18px 26px rgba(113, 13, 172, 0.18));
  transform: translateY(-8px);
}

.tctt-svc__card:hover .tctt-svc__frame {
  transform: translateY(-8px);
}

.tctt-svc__frame {
  position: absolute;
  top: var(--tctt-svc-pad-top);
  right: var(--tctt-svc-pad-x);
  bottom: var(--tctt-svc-pad-bot);
  left: var(--tctt-svc-pad-x);
  z-index: 1;
  container-type: inline-size;
  transition: transform 0.35s ease;
}

/* Tiêu đề trong tab (1–2 dòng, căn giữa theo chiều cao tab).
 * Padding dọc chừa chỗ cho dấu tiếng Việt (Ẫ, Ẩ, Ệ…) */
#tctt-landing .tctt-svc__card-title {
  position: absolute;
  top: 0;
  left: 4.4cqw;
  display: flex;
  align-items: center;
  width: 66cqw;
  height: 14.5cqw;
  margin: 0;
  font-family: var(--tctt-font-sans);
  font-size: 5cqw;
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: 0;
  text-transform: uppercase;
}

.tctt-svc__card-title > span {
  display: block;
  margin: -0.28em 0 -0.12em;
  padding: 0.28em 0.04em 0.12em 0;
}

#tctt-landing .tctt-svc__card-text {
  position: absolute;
  top: 83cqw;
  right: 3.7cqw;
  left: 4.1cqw;
  margin: 0;
  color: var(--tctt-text-color);
  font-family: var(--tctt-font-sans);
  font-size: 4.5cqw;
  font-weight: 400;
  line-height: 1.38;
  text-align: justify;
}

/* CTA: nút .tctt-btn chung, rộng 56.5% khung */
.tctt-svc__card-cta {
  position: absolute;
  right: 0;
  bottom: 6.9cqw;
  left: 0;
  display: flex;
  justify-content: center;
}

.tctt-svc__card-cta .tctt-btn {
  --tctt-btn-w: 56.5cqw;
}

/* Trình duyệt cũ không hỗ trợ cqw: dùng px theo khung ~375px */
@supports not (width: 1cqw) {
  #tctt-landing .tctt-svc__card-title {
    left: 16px;
    width: 247px;
    height: 54px;
    font-size: 18px;
  }

  #tctt-landing .tctt-svc__card-text {
    top: 311px;
    right: 14px;
    left: 15px;
    font-size: 16px;
  }

  .tctt-svc__card-cta {
    bottom: 26px;
  }

  .tctt-svc__card-cta .tctt-btn {
    --tctt-btn-w: 212px;
  }
}

/* ----- Tablet: 2 card + 1 card căn giữa ----- */
@media (min-width: 769px) and (max-width: 1024px) {
  .tctt-svc {
    --tctt-svc-gap-x: 16px;
  }

  .tctt-svc__card {
    flex-basis: calc((100% - var(--tctt-svc-gap-x)) / 2);
  }
}

/* ----- Mobile: 1 cột, không nền riêng ----- */
@media (max-width: 768px) {
  .tctt-svc {
    --tctt-svc-gap-y: 0px; /* khoảng hở thấy được ~40px nhờ bóng đổ trong suốt của PNG */
    --tctt-svc-pt: 4px;
    --tctt-svc-pb: 48px;

    padding-right: 16px;
    padding-left: 16px;
  }

  .tctt-svc__bg {
    display: none;
  }

  .tctt-svc__heading {
    margin-bottom: 8px; /* + 20px bóng đổ PNG = ~28px tới mép khung */
  }

  .tctt-svc__title-line {
    gap: 8px;
  }

  /* Lưới tràn ra 12px mỗi bên → khung card (không tính bóng đổ PNG)
   * cách mép màn hình ~22px như Figma (khung 376 / 420) */
  .tctt-svc__grid {
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: center;
    margin: 0 -12px;
  }

  .tctt-svc__card {
    flex: 0 0 auto;
    width: 100%;
    max-width: 420px;
  }

  .tctt-svc__card:hover .tctt-svc__card-bg,
  .tctt-svc__card:hover .tctt-svc__frame {
    filter: none;
    transform: none;
  }
}

/* Màn rất hẹp: "Top" + pill không đủ 1 dòng → xếp dọc */
@media (max-width: 360px) {
  .tctt-svc__title-line {
    flex-direction: column;
    align-items: center;
    gap: 2px;
  }
}

/* =========================================================
 * SECTION: ƯU ĐÃI 50% TẤT CẢ DỊCH VỤ
 * Ảnh ưu đãi: desktop 1347 x 585 | mobile 577 x 692 (nút CTA HTML đặt đè)
 * Kế thừa section Ưu đãi LP phun mày (component stage).
 *
 * Nền desktop vẽ bằng CSS: ngôi sao 5 cánh mờ sát mép trái + brush phấn hồng
 * đè lên phía trên ngôi sao (lan nhẹ lên section trên, nằm dưới mọi nội dung).
 * Mobile tắt nền.
 *
 * ⚙️ BIẾN TINH CHỈNH (đặt trên .tctt-promo):
 *   --tctt-promo-star-x / -y     : tâm ngôi sao (x từ mép trái màn hình, y từ đỉnh ảnh ưu đãi)
 *   --tctt-promo-star-size       : kích thước ngôi sao
 *   --tctt-promo-star-blur       : độ nhòe ngôi sao
 *   --tctt-promo-star-color      : màu ngôi sao
 *   --tctt-promo-brush-x / -y / -w / -h : vị trí + kích thước brush
 *   --tctt-promo-brush-color     : màu brush
 *   --tctt-promo-shift           : dời ảnh ngang (desktop 1.4%, mobile 0%)
 * Vị trí / kích thước nút: 3 biến --tctt-stage-* trên .tctt-promo .tctt-stage
 * ========================================================= */
.tctt-promo {
  --tctt-promo-star-x: 30px;
  --tctt-promo-star-y: 221px;
  --tctt-promo-star-size: 420px;
  --tctt-promo-star-blur: 20px;
  --tctt-promo-star-color: linear-gradient(160deg, #f58f9e 0%, #f9b3bd 55%, #fcd3dc 100%);
  --tctt-promo-brush-x: 40px;
  --tctt-promo-brush-y: 40px;
  --tctt-promo-brush-w: 620px;
  --tctt-promo-brush-h: 460px;
  --tctt-promo-brush-color: rgba(250, 168, 177, 0.68);

  position: relative;
  width: 100%;
  padding: 0 24px 60px;
}

/* ----- Nền desktop ----- */
.tctt-promo__bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}

/* Ngôi sao: lớp ngoài làm nhòe + trôi nhẹ, ::before cắt hình ngôi sao
 * (filter ở lớp ngoài → viền ngôi sao mềm như Figma) */
.tctt-promo__star {
  position: absolute;
  top: calc(var(--tctt-promo-star-y) - var(--tctt-promo-star-size) / 2);
  left: calc(var(--tctt-promo-star-x) - var(--tctt-promo-star-size) / 2);
  width: var(--tctt-promo-star-size);
  height: var(--tctt-promo-star-size);
  opacity: 0.85;
  filter: blur(var(--tctt-promo-star-blur));
  animation: tctt-promo-star-drift 9s ease-in-out infinite;
}

.tctt-promo__star::before {
  position: absolute;
  inset: 0;
  content: "";
  background: var(--tctt-promo-star-color);
  clip-path: polygon(
    50% 0%, 62.9% 32.2%, 97.6% 34.5%, 70.9% 56.8%, 79.4% 90.5%,
    50% 72%, 20.6% 90.5%, 29.1% 56.8%, 2.4% 34.5%, 37.1% 32.2%
  );
  /* xoay để 1 cánh chĩa sang phải, 1 cánh chĩa xuống chéo như Figma */
  transform: rotate(82deg);
}

/* Brush phấn hồng đè lên phần trên ngôi sao, lan lên section trên */
.tctt-promo__brush {
  position: absolute;
  top: calc(var(--tctt-promo-brush-y) - var(--tctt-promo-brush-h) / 2);
  left: calc(var(--tctt-promo-brush-x) - var(--tctt-promo-brush-w) / 2);
  width: var(--tctt-promo-brush-w);
  height: var(--tctt-promo-brush-h);
  border-radius: 50%;
  background: radial-gradient(50% 50% at 50% 50%, var(--tctt-promo-brush-color) 0%, rgba(250, 168, 177, 0) 100%);
  filter: blur(68.2px);
}

/* ----- Ảnh + nút ----- */
.tctt-promo .tctt-stage {
  max-width: 1347px;
  margin: 0 auto;
  /* Hộp quà nhô ra bên phải ảnh → dời ảnh sang phải 1.4% (≈19px)
   * để thân banner căn giữa thẳng hàng cụm card phía trên như Figma */
  translate: var(--tctt-promo-shift, 1.4%) 0;
  --tctt-stage-x: 20%;
  --tctt-stage-y: 79.3%;
  --tctt-stage-cta-w: 272px;
}

@supports (width: 1cqw) {
  .tctt-promo .tctt-stage {
    /* 272 / 1347 = 20.2% chiều rộng ảnh ưu đãi */
    --tctt-stage-cta-w: clamp(150px, 20.2cqw, 280px);
  }
}

/* Ảnh + nút cùng "thở" nhẹ (thuộc tính translate → không đè transform có sẵn) */
.tctt-promo .tctt-stage__picture,
.tctt-promo .tctt-stage__cta {
  animation: tctt-promo-breathe 5s ease-in-out infinite;
}

@keyframes tctt-promo-breathe {
  0%,
  100% {
    translate: 0 0;
  }
  50% {
    translate: 0 -8px;
  }
}

@keyframes tctt-promo-star-drift {
  0%,
  100% {
    translate: 0 0;
    rotate: 0deg;
  }
  50% {
    translate: 10px -14px;
    rotate: 8deg;
  }
}

@media (max-width: 768px) {
  .tctt-promo {
    padding: 8px 16px 24px;
  }

  .tctt-promo__bg {
    display: none;
  }

  /* Ảnh mobile 577px có vùng trong suốt 2 bên → hiển thị 577/420 = 137.4%
   * chiều rộng màn hình để khung ưu đãi tràn sát 2 mép như Figma, phần thừa tự cắt.
   * Chỉnh độ phóng tại --tctt-promo-zoom (tính theo chiều rộng màn hình). */
  .tctt-promo .tctt-stage {
    --tctt-promo-zoom: 0.974;
    --tctt-promo-shift: 0%;
    --tctt-stage-x: 50%;
    --tctt-stage-y: 87.6%;
    --tctt-stage-cta-w: 230px;

    width: calc(100vw * var(--tctt-promo-zoom));
    max-width: none;
    margin-left: calc(50% - 50vw * var(--tctt-promo-zoom));
  }

  @supports (width: 1cqw) {
    .tctt-promo .tctt-stage {
      /* ~230px trên màn 420 (230 / 577 = 39.9% ảnh) như Figma */
      --tctt-stage-cta-w: clamp(170px, 39.9cqw, 300px);
    }
  }
}

/* =========================================================
 * 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
 * ========================================================= */
.tctt-slider {
  --tctt-slider-gap: 21px;

  position: relative;
  min-width: 0;
}

.tctt-slider__viewport {
  position: relative;
  display: flex;
  justify-content: flex-start;
  gap: var(--tctt-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;
}

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

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

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

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

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

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

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

#tctt-landing .tctt-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;
}

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

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

  .tctt-slider__dots {
    display: flex;
  }

  .tctt-slider__viewport {
    cursor: auto;
  }
}

/* Slider không cuộn được (đủ chỗ hiển thị hết) → ẩn thanh tiến trình, tắt con trỏ kéo.
 * Class .is-static do JS gắn/gỡ theo kích thước thực tế. */
/* Thanh tiến trình kéo được (JS) → chặn cuộn trang khi kéo bằng tay trên mobile */
.tctt-slider__progress {
  touch-action: none;
}

.tctt-slider__progress.is-dragging .tctt-slider__progress-bar {
  box-shadow: 0 0 0 3px rgba(113, 13, 172, 0.18);
}

.tctt-slider.is-static .tctt-slider__progress {
  display: none;
}

.tctt-slider.is-static .tctt-slider__viewport {
  cursor: auto;
}

/* =========================================================
 * COMPONENT: TAB PILL (dùng chung: Đội ngũ, Phòng khám…)
 * Chưa chọn: nền #E7CFF8 | Đang chọn: nền #710DAC, 216 x 70 (spec Figma)
 * Mỗi section chỉnh kích thước qua biến:
 *   --tctt-tab-w / --tctt-tab-h / --tctt-tab-fs / --tctt-tab-pad
 * ========================================================= */
#tctt-landing .tctt-tab {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5.937px;
  min-width: var(--tctt-tab-w, 216px);
  height: var(--tctt-tab-h, 70px);
  min-height: 0;
  margin: 0;
  padding: var(--tctt-tab-pad, 18.998px 26.716px 17.217px 29.684px);
  overflow: hidden;
  border: 1.187px solid #fff;
  border-radius: 52.837px;
  background: #e7cff8;
  box-shadow: none;
  color: var(--tctt-primary);
  font-family: var(--tctt-font-sans);
  font-size: var(--tctt-tab-fs, 20px);
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.3s ease, color 0.3s ease, box-shadow 0.3s ease,
    translate 0.3s ease;
}

#tctt-landing .tctt-tab:hover {
  background: #dcb8f5;
  translate: 0 -2px;
}

#tctt-landing .tctt-tab.is-active {
  background: #710dac;
  box-shadow: 0 10px 22px -6px rgba(113, 13, 172, 0.55);
  color: #fff;
}

/* Vệt sáng quét qua tab đang chọn */
#tctt-landing .tctt-tab.is-active::before {
  position: absolute;
  top: 0;
  left: 0;
  width: 40%;
  height: 100%;
  content: "";
  background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.35) 50%, rgba(255, 255, 255, 0) 100%);
  transform: translateX(-150%) skewX(-20deg);
  animation: tctt-btn-shine 3.2s ease-in-out infinite;
  pointer-events: none;
}

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

/* =========================================================
 * SECTION: ĐỘI NGŨ BÁC SĨ / MASTER
 * Desktop: tiêu đề trái + 2 tab phải; khung kính 1760 (gradient cam đào),
 *          3 ảnh thành viên 1 hàng (canh đáy khung ảnh thẳng hàng).
 * Tablet (≤1199): 2 người/lượt + thanh tiến trình.
 * Mobile (≤768) : tiêu đề + tab căn giữa, khung tràn viền, 1 người/lượt,
 *                 vuốt ngang + thanh tiến trình tím như Figma.
 * Ảnh thành viên = PNG gộp sẵn (khung + ảnh + chữ), thiết kế 496 x 700.
 *
 * ⚙️ BIẾN TINH CHỈNH (đặt trên .tctt-team):
 *   --tctt-team-w        : chiều rộng tối đa khung (1760px)
 *   --tctt-team-head-px  : lề trái/phải của hàng tiêu đề + tab so với khung
 *   --tctt-team-gap      : khoảng cách giữa các ảnh thành viên
 *   --tctt-team-per-view : số người hiển thị 1 lượt (desktop 3, tablet 2, mobile 1)
 *   --tctt-tab-w / --tctt-tab-h : kích thước nút tab (component TAB PILL)
 * ========================================================= */
.tctt-team {
  --tctt-team-w: 1760px;
  --tctt-team-head-px: 86px;
  --tctt-team-gap: 51px;
  --tctt-team-per-view: 3;
  --tctt-tab-w: 216px;
  --tctt-tab-h: 70px;

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

.tctt-team__inner {
  max-width: var(--tctt-team-w);
  margin: 0 auto;
}

/* ----- Hàng tiêu đề + tab ----- */
/* Grid 2 cột cố định: tiêu đề bên trái – tab luôn nằm cùng hàng, sát lề phải
 * (không dùng flex-wrap → theme/font thật rộng hơn cũng không đẩy tab xuống dòng) */
.tctt-team__head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 18px 24px;
  margin-bottom: 30px;
  padding: 0 var(--tctt-team-head-px);
}

/* Chặn width/margin của theme cho h2 → tiêu đề chỉ rộng bằng nội dung */
#tctt-landing .tctt-team__heading {
  grid-column: 1;
  align-items: flex-start;
  justify-self: start;
  width: auto;
  max-width: none;
  margin: 0;
  text-align: left;
}

.tctt-team__tabs {
  grid-column: 2;
  justify-self: end;
}

.tctt-team__title-line {
  gap: 14px;
  white-space: nowrap;
}

.tctt-team__heading .tctt-heading__tail {
  margin-top: 0;
}

/* ----- Tab ----- */
.tctt-team__tabs {
  display: flex;
  flex: 0 0 auto;
  gap: 13px;
  padding-bottom: 4px;
}

/* ----- Khung kính (spec Figma) ----- */
.tctt-team__box {
  position: relative;
  padding: 26px 66px 52px;
  border: 2px solid rgba(255, 255, 255, 0.5);
  border-radius: 30px;
  background: linear-gradient(180deg, #ffdbc0 0%, rgba(255, 255, 255, 0.2) 100%);
  box-shadow: 4px 4px 6px 0 rgba(0, 0, 0, 0.1);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

/* Panel ẩn: phải thắng display của class (xem lỗi #2 playbook) */
#tctt-landing .tctt-team__panel[hidden] {
  display: none;
}

/* ----- Slider thành viên ----- */
.tctt-team__slider {
  --tctt-slider-gap: var(--tctt-team-gap);
}

.tctt-team .tctt-team__track {
  align-items: flex-end; /* ảnh cắt sát đầu → cao thấp khác nhau, canh đáy khung */
}

.tctt-team__member {
  flex: 0 0 calc((100% - var(--tctt-team-gap) * (var(--tctt-team-per-view) - 1)) / var(--tctt-team-per-view));
  min-width: 0;
}

/* Hover nhấc ảnh (item dùng scroll-snap → hiệu ứng đặt trên ảnh con) */
#tctt-landing .tctt-team__member-image {
  width: 100%;
  height: auto;
  user-select: none;
  -webkit-user-drag: none;
  transition: translate 0.35s ease, filter 0.35s ease;
}

.tctt-team__member:hover .tctt-team__member-image {
  filter: drop-shadow(0 18px 24px rgba(113, 13, 172, 0.2));
  translate: 0 -8px;
}

/* Đổi tab: ảnh bay lên + hiện dần lệch nhịp (JS gắn .is-entering) */
.tctt-team__panel.is-entering .tctt-team__member-image {
  animation: tctt-team-enter 0.7s cubic-bezier(0.22, 0.61, 0.36, 1) both;
  animation-delay: calc(var(--i, 0) * 0.12s);
}

@keyframes tctt-team-enter {
  from {
    opacity: 0;
    transform: translateY(40px) scale(0.96);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.tctt-team .tctt-slider__progress {
  max-width: 600px;
  margin: 10px auto 0;
}

/* ----- Laptop ----- */
@media (max-width: 1440px) {
  .tctt-team {
    --tctt-team-head-px: 40px;
    --tctt-team-gap: 32px;
  }

  .tctt-team__box {
    padding: 22px 40px 40px;
  }
}

/* ----- Tablet: 2 người/lượt ----- */
@media (max-width: 1199px) {
  .tctt-team {
    --tctt-team-per-view: 2;
    --tctt-team-head-px: 8px;
    --tctt-team-gap: 24px;
    --tctt-tab-w: 180px;
    --tctt-tab-h: 60px;
    --tctt-tab-pad: 0 22px;
    --tctt-tab-fs: 17px;
  }

  .tctt-team__box {
    padding: 20px 28px 28px;
  }
}

/* ----- Tablet hẹp: không đủ chỗ cho tiêu đề + tab cùng hàng → tab xuống dưới ----- */
@media (min-width: 769px) and (max-width: 960px) {
  .tctt-team__head {
    grid-template-columns: minmax(0, 1fr);
  }

  .tctt-team__tabs {
    grid-column: 1;
    justify-self: start;
  }
}

/* ----- Mobile: xếp dọc, khung tràn viền, 1 người/lượt ----- */
@media (max-width: 768px) {
  .tctt-team {
    --tctt-team-per-view: 1;
    --tctt-team-head-px: 0px;
    --tctt-team-gap: 16px;
    --tctt-tab-h: 60px;

    padding: 12px 16px 48px;
  }

  .tctt-team__head {
    grid-template-columns: minmax(0, 1fr);
    gap: 18px;
    margin-bottom: 12px;
  }

  #tctt-landing .tctt-team__heading {
    align-items: center;
    justify-self: stretch;
    text-align: center;
  }

  .tctt-team__tabs {
    grid-column: 1;
    justify-self: stretch;
  }

  .tctt-team__title-line {
    flex-direction: column;
    align-items: center;
    gap: 0;
  }

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

  .tctt-team__heading .tctt-heading__tail {
    margin-top: 6px;
  }

  .tctt-team__tabs {
    gap: 10px;
    padding-bottom: 0;
  }

  #tctt-landing .tctt-team__tab {
    flex: 1 1 0;
    min-width: 0;
    padding: 0 10px;
    font-size: 16px;
  }

  /* Khung tràn sát 2 mép màn hình, bỏ bo góc / viền / bóng */
  .tctt-team__box {
    margin: 0 -16px;
    padding: 12px 0 20px;
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }

  .tctt-team .tctt-team__track {
    justify-content: flex-start; /* lỗi #3 playbook: không để item đầu bị đẩy khỏi mép trái */
    padding: 0 0 6px;
    scroll-snap-type: x mandatory;
  }

  .tctt-team .tctt-slider__item {
    scroll-snap-align: center;
  }

  .tctt-team__member:hover .tctt-team__member-image {
    filter: none;
    translate: none;
  }

  /* Mobile dùng thanh tiến trình (không dùng dots) như Figma */
  .tctt-team .tctt-slider__progress {
    display: block;
    max-width: none;
    height: 8px;
    margin: 14px 16px 0;
    background: #fff;
  }
}

/* =========================================================
 * SECTION: PHÒNG KHÁM THẨM MỸ ĐẲNG CẤP QUỐC TẾ
 * Tiêu đề (pill → keyword → tail) căn giữa.
 * Banner 1600 x 615: ảnh gốc + lớp tím trái + chữ HTML; góc phải trên khoét
 *   bo tròn chứa 2 tab (JS cắt bằng clip-path theo kích thước thật).
 * Dưới banner: dải 10 ảnh / tab, 3 ảnh mỗi lượt, kéo / vuốt / kéo thanh tiến trình.
 * Mobile: tab nằm trên banner, banner dọc 386 x 498 (chữ trên, lớp tím từ trên xuống),
 *   vẫn giữ góc khoét nhỏ như Figma.
 *
 * ⚙️ BIẾN TINH CHỈNH (đặt trên .tctt-clinic):
 *   --tctt-clinic-w          : chiều rộng tối đa banner + dải ảnh (1600px)
 *   --tctt-clinic-radius     : bo góc ngoài banner
 *   --tctt-notch-pad-x / -y  : khoảng hở quanh cụm tab trong góc khoét (desktop)
 *   --tctt-notch-w / -h      : kích thước góc khoét khi tab KHÔNG nằm trong banner (mobile)
 *   --tctt-notch-c           : bán kính bo 2 góc chuyển của phần khoét
 *   --tctt-clinic-overlay    : lớp màu tím phủ lên ảnh (dưới chữ)
 *   --tctt-clinic-gap        : khoảng cách giữa các ảnh trong dải
 * ========================================================= */
.tctt-clinic {
  --tctt-clinic-w: 1600px;
  --tctt-clinic-radius: 30px;
  --tctt-clinic-gap: 22px;
  --tctt-notch-pad-x: 24px;
  --tctt-notch-pad-y: 28px;
  --tctt-notch-c: 24px;
  --tctt-clinic-overlay: linear-gradient(
    90deg,
    rgba(69, 17, 128, 0.96) 0%,
    rgba(96, 18, 158, 0.82) 28%,
    rgba(113, 13, 172, 0.35) 52%,
    rgba(113, 13, 172, 0) 70%
  );
  --tctt-tab-w: 196px;
  --tctt-tab-h: 66px;
  --tctt-tab-pad: 0 24px;
  --tctt-tab-fs: 18px;

  position: relative;
  width: 100%;
  padding: 20px 24px 90px;
}

/* Brush hồng góc phải dưới (desktop) */
.tctt-clinic__bg {
  position: absolute;
  right: -160px;
  bottom: -80px;
  z-index: -1;
  width: 620px;
  height: 520px;
  border-radius: 50%;
  background: radial-gradient(50% 50% at 50% 50%, rgba(250, 168, 177, 0.68) 0%, rgba(250, 168, 177, 0) 100%);
  filter: blur(68.2px);
  pointer-events: none;
}

.tctt-clinic__inner {
  max-width: var(--tctt-clinic-w);
  margin: 0 auto;
}

/* Tiêu đề: pill nằm TRÊN keyword */
.tctt-clinic__heading {
  margin-bottom: 56px;
}

.tctt-clinic__heading .tctt-pill-title {
  margin: 0 0 2px;
}

.tctt-clinic__heading .tctt-heading__tail {
  margin-top: 4px;
}

/* ----- Stage: tab + panel ----- */
.tctt-clinic__stage {
  position: relative;
}

.tctt-clinic__tabs {
  position: absolute;
  top: 12px;
  right: 0;
  z-index: 3;
  display: flex;
  gap: 12px;
}

#tctt-landing .tctt-clinic__panel[hidden] {
  display: none;
}

/* ----- Banner ----- */
/* Bóng đổ đặt ở lớp bọc (clip-path của banner cắt mất box-shadow) */
.tctt-clinic__banner-wrap {
  filter: drop-shadow(0 12px 24px rgba(113, 13, 172, 0.16));
}

.tctt-clinic__banner {
  position: relative;
  overflow: hidden;
  border-radius: var(--tctt-clinic-radius); /* dự phòng khi chưa có JS */
  background: var(--tctt-deep);
}

.tctt-clinic__banner-picture {
  display: block;
}

#tctt-landing .tctt-clinic__banner-image {
  width: 100%;
  height: auto;
  transition: scale 0.8s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.tctt-clinic__banner:hover .tctt-clinic__banner-image {
  scale: 1.04;
}

/* Lớp tím phủ dưới chữ */
.tctt-clinic__banner::after {
  position: absolute;
  inset: 0;
  z-index: 1;
  content: "";
  background: var(--tctt-clinic-overlay);
  pointer-events: none;
}

.tctt-clinic__content {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: min(760px, 58%);
  padding: 0 0 0 clamp(28px, 3.1vw, 60px);
  color: #fff;
}

#tctt-landing .tctt-clinic__title {
  margin: 0;
  padding: 0.2em 0 0;
  color: #fff;
  font-family: var(--tctt-font-sans);
  font-size: clamp(40px, 4.2vw, 80px);
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0;
  text-transform: uppercase;
}

#tctt-landing .tctt-clinic__subtitle {
  margin: 0.35em 0 0;
  color: #fff;
  font-family: var(--tctt-font-sans);
  font-size: clamp(18px, 1.8vw, 34px);
  font-weight: 400;
  line-height: 1.15;
  text-transform: uppercase;
}

#tctt-landing .tctt-clinic__text {
  max-width: 640px;
  margin: 18px 0 0;
  color: rgba(255, 255, 255, 0.92);
  font-family: var(--tctt-font-sans);
  font-size: clamp(14px, 0.95vw, 18px);
  font-weight: 400;
  line-height: 1.35;
}

/* ----- Dải ảnh ----- */
.tctt-clinic__gallery {
  --tctt-slider-gap: var(--tctt-clinic-gap);

  margin-top: 20px;
}

.tctt-clinic .tctt-clinic__track {
  padding: 0 0 6px;
}

#tctt-landing .tctt-clinic__photo {
  flex: 0 0 calc((100% - var(--tctt-clinic-gap) * 2) / 3);
  min-width: 0;
  margin: 0;
  padding: 0;
}

#tctt-landing .tctt-clinic__photo-image {
  width: 100%;
  height: auto;
  user-select: none;
  -webkit-user-drag: none;
  transition: translate 0.35s ease, filter 0.35s ease;
}

/* Nút bọc ảnh (mở lightbox) – reset style button của Flatsome */
#tctt-landing .tctt-clinic__zoom {
  position: relative;
  display: block;
  width: 100%;
  min-height: 0;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  line-height: 0;
  text-transform: none;
  cursor: zoom-in;
}

/* Icon kính lúp hiện giữa ảnh khi rê chuột */
#tctt-landing .tctt-clinic__zoom::after {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 56px;
  height: 56px;
  content: "";
  border: 1.5px solid rgba(255, 255, 255, 0.9);
  border-radius: 50%;
  background: rgba(113, 13, 172, 0.72)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5'/%3E%3Cpath d='m20 20-4.8-4.8M10.5 7.5v6M7.5 10.5h6'/%3E%3C/svg%3E")
    center / 26px no-repeat;
  box-shadow: 0 8px 20px rgba(69, 17, 128, 0.35);
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.6);
  transition: opacity 0.3s ease, transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
  pointer-events: none;
}

#tctt-landing .tctt-clinic__photo:hover .tctt-clinic__zoom::after,
#tctt-landing .tctt-clinic__zoom:focus-visible::after {
  opacity: 1;
  transform: translate(-50%, calc(-50% - 6px)) scale(1); /* theo ảnh đang nhấc 6px */
}

#tctt-landing .tctt-clinic__zoom:focus-visible {
  outline: 3px solid var(--tctt-primary);
  outline-offset: 3px;
  border-radius: 18px;
}

.tctt-clinic__photo:hover .tctt-clinic__photo-image {
  filter: drop-shadow(0 14px 20px rgba(113, 13, 172, 0.22)) brightness(0.92);
  translate: 0 -6px;
}

.tctt-clinic .tctt-slider__progress {
  height: 10px;
  margin-top: 30px;
  background: #fff;
  box-shadow: 0 0 0 1px rgba(113, 13, 172, 0.06) inset;
}

/* ----- Đổi tab: banner hiện dần + zoom nhẹ, ảnh dải bay lên lệch nhịp ----- */
.tctt-clinic__panel.is-entering .tctt-clinic__banner-wrap {
  animation: tctt-clinic-enter 0.75s cubic-bezier(0.22, 0.61, 0.36, 1) both;
}

.tctt-clinic__panel.is-entering .tctt-clinic__content {
  animation: tctt-clinic-text 0.8s cubic-bezier(0.22, 0.61, 0.36, 1) 0.15s both;
}

.tctt-clinic__panel.is-entering .tctt-clinic__photo-image {
  animation: tctt-team-enter 0.6s cubic-bezier(0.22, 0.61, 0.36, 1) both;
  animation-delay: calc(0.2s + var(--i, 0) * 0.1s);
}

@keyframes tctt-clinic-enter {
  from {
    opacity: 0;
    transform: scale(0.98);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes tctt-clinic-text {
  from {
    opacity: 0;
    transform: translateX(-40px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* ----- Tablet ----- */
@media (max-width: 1024px) {
  .tctt-clinic {
    --tctt-clinic-gap: 16px;
    --tctt-tab-w: 160px;
    --tctt-tab-h: 54px;
    --tctt-tab-pad: 0 18px;
    --tctt-tab-fs: 15px;
    --tctt-notch-pad-x: 18px;
    --tctt-notch-pad-y: 20px;
    --tctt-notch-c: 20px;

    padding-bottom: 72px;
  }

  .tctt-clinic__tabs {
    top: 8px;
    gap: 10px;
  }

  .tctt-clinic__heading {
    margin-bottom: 40px;
  }

  /* Banner thấp hơn → khối chữ rộng hơn cho đủ dòng */
  .tctt-clinic__content {
    width: 64%;
  }
}

/* ----- Mobile: tab trên banner, banner dọc, chữ ở trên ----- */
@media (max-width: 768px) {
  .tctt-clinic {
    --tctt-clinic-radius: 24px;
    --tctt-clinic-gap: 7px;
    --tctt-notch-w: 90px;
    --tctt-notch-h: 52px;
    --tctt-notch-c: 18px;
    --tctt-clinic-overlay: linear-gradient(
      180deg,
      rgba(69, 17, 128, 0.96) 0%,
      rgba(96, 18, 158, 0.78) 30%,
      rgba(113, 13, 172, 0.2) 55%,
      rgba(113, 13, 172, 0) 70%
    );
    --tctt-tab-w: 0px;
    --tctt-tab-h: 60px;
    --tctt-tab-pad: 0 10px;
    --tctt-tab-fs: 16px;

    padding: 12px 16px 48px;
  }

  .tctt-clinic__bg {
    display: none;
  }

  .tctt-clinic__heading {
    margin-bottom: 18px;
  }

  .tctt-clinic__tabs {
    position: static;
    gap: 12px;
    margin-bottom: 14px;
  }

  #tctt-landing .tctt-clinic__tab {
    flex: 1 1 0;
    min-width: 0;
  }

  .tctt-clinic__content {
    top: 0;
    right: 0;
    bottom: auto;
    justify-content: flex-start;
    width: auto;
    padding: 14px 18px 0;
  }

  #tctt-landing .tctt-clinic__title {
    padding-top: 0.15em;
    font-size: 36px;
  }

  #tctt-landing .tctt-clinic__subtitle {
    margin-top: 0.3em;
    font-size: 16px;
  }

  #tctt-landing .tctt-clinic__text {
    margin-top: 10px;
    font-size: 15px;
  }

  .tctt-clinic__gallery {
    margin-top: 12px;
  }

  .tctt-clinic__photo:hover .tctt-clinic__photo-image {
    filter: none;
    translate: none;
  }

  /* Mobile: icon kính lúp nhỏ, luôn hiện ở góc để khách biết bấm được */
  #tctt-landing .tctt-clinic__zoom::after {
    top: auto;
    right: 6px;
    bottom: 6px;
    left: auto;
    width: 24px;
    height: 24px;
    background-size: 13px;
    opacity: 0.9;
    transform: none;
  }

  #tctt-landing .tctt-clinic__photo:hover .tctt-clinic__zoom::after {
    transform: none;
  }

  /* Mobile vẫn dùng thanh tiến trình (không dùng dots) như Figma */
  .tctt-clinic .tctt-slider__progress {
    display: block;
    height: 7px;
    margin-top: 16px;
  }
}

/* =========================================================
 * SECTION: CHỨNG NHẬN VÀ GIẢI THƯỞNG
 * Desktop: tiêu đề + đoạn giới thiệu căn giữa; 4 giải (PNG 347 x 495, đã gộp
 *          tên giải + bằng + cúp) đứng trên bục; nền pattern riêng desktop.
 * Tablet : 2 giải / lượt, nút ‹ › + dots.
 * Mobile : 1 giải / lượt, nút ‹ › 2 bên + dots (quay vòng), bục mobile, không nền.
 * Bấm vào giải → phóng to (component LIGHTBOX).
 *
 * ⚙️ BIẾN TINH CHỈNH (đặt trên .tctt-awards):
 *   --tctt-awards-item-w   : chiều rộng tối đa 1 giải (347px)
 *   --tctt-awards-gap      : khoảng cách giữa các giải
 *   --tctt-awards-per-view : số giải mỗi lượt (4 / 2 / 1)
 *   --tctt-awards-podium-w : chiều rộng bục
 *   --tctt-awards-overlap  : giải "lún" xuống mặt bục bao nhiêu px (chân cúp chạm mặt bục)
 *   --tctt-awards-nav-top  : vị trí dọc nút ‹ › (mobile, % chiều cao ảnh)
 * ========================================================= */
.tctt-awards {
  --tctt-awards-item-w: 347px;
  --tctt-awards-gap: 37px;
  --tctt-awards-per-view: 4;
  --tctt-awards-podium-w: 1626px;
  --tctt-awards-overlap: 44px;
  --tctt-awards-nav-top: 62%;

  position: relative;
  width: 100%;
  padding: 64px 24px 90px;
}

/* Nền pattern desktop – nằm dưới cùng, không che brush section kề */
.tctt-awards__bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
  /* mờ dần ở mép trên để nối liền nền section phía trên */
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 12%);
  mask-image: linear-gradient(180deg, transparent 0, #000 12%);
}

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

.tctt-awards__inner {
  position: relative;
  max-width: 1626px;
  margin: 0 auto;
}

.tctt-awards__heading {
  margin-bottom: 22px;
}

.tctt-awards__title-line {
  gap: 14px;
}

#tctt-landing .tctt-awards__intro {
  max-width: 1110px;
  margin: 0 auto 52px;
  text-align: center;
}

/* ----- Hàng giải + bục ----- */
.tctt-awards__stage {
  --tctt-slider-gap: var(--tctt-awards-gap);
}

.tctt-awards__rail {
  position: relative;
  z-index: 2; /* giải nằm trên bục */
  max-width: calc(var(--tctt-awards-item-w) * var(--tctt-awards-per-view) + var(--tctt-awards-gap) * (var(--tctt-awards-per-view) - 1));
  margin: 0 auto;
}

.tctt-awards .tctt-awards__track {
  align-items: flex-end;
  padding: 0;
}

#tctt-landing .tctt-awards__item {
  flex: 0 0 calc((100% - var(--tctt-awards-gap) * (var(--tctt-awards-per-view) - 1)) / var(--tctt-awards-per-view));
  min-width: 0;
  margin: 0;
  padding: 0;
}

/* Nút bọc ảnh (mở lightbox) – reset style button của Flatsome */
#tctt-landing .tctt-awards__zoom {
  display: block;
  width: 100%;
  min-height: 0;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  line-height: 0;
  cursor: zoom-in;
}

#tctt-landing .tctt-awards__zoom:focus-visible {
  outline: 3px solid var(--tctt-primary);
  outline-offset: 4px;
  border-radius: 16px;
}

#tctt-landing .tctt-awards__image {
  width: 100%;
  height: auto;
  user-select: none;
  -webkit-user-drag: none;
  filter: drop-shadow(0 18px 22px rgba(69, 17, 128, 0.16));
  transition: translate 0.4s ease, scale 0.4s ease, filter 0.4s ease;
}

/* Hover: giải nhấc lên + ánh vàng quanh cúp */
.tctt-awards__item:hover .tctt-awards__image {
  translate: 0 -12px;
  scale: 1.03;
  filter: drop-shadow(0 30px 34px rgba(69, 17, 128, 0.26))
    drop-shadow(0 0 22px rgba(255, 214, 120, 0.5));
}

/* Bục: kéo lên dưới chân giải */
.tctt-awards__podium {
  position: relative;
  z-index: 1;
  display: block;
  max-width: var(--tctt-awards-podium-w);
  margin: calc(-1 * var(--tctt-awards-overlap)) auto 0;
}

#tctt-landing .tctt-awards__podium-image {
  width: 100%;
  height: auto;
}

/* Nút ‹ › + dots: chỉ hiện khi hàng giải cuộn được (tablet / mobile) */
#tctt-landing .tctt-awards__nav {
  position: absolute;
  top: var(--tctt-awards-nav-top);
  z-index: 3;
  display: none;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  min-height: 0;
  margin: -23px 0 0;
  padding: 0;
  border: 1.5px solid #fff;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.88);
  box-shadow: 0 8px 20px rgba(113, 13, 172, 0.25);
  color: var(--tctt-primary);
  line-height: 1;
  cursor: pointer;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  transition: background 0.3s ease, color 0.3s ease, transform 0.25s ease;
}

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

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

#tctt-landing .tctt-awards__nav--prev {
  left: -6px;
}

#tctt-landing .tctt-awards__nav--next {
  right: -6px;
}

#tctt-landing .tctt-awards__nav svg {
  pointer-events: none;
}

.tctt-awards .tctt-awards__dots {
  display: none;
  margin-top: 14px;
}

#tctt-landing .tctt-awards__stage:not(.is-static) .tctt-awards__nav {
  display: flex;
}

.tctt-awards__stage:not(.is-static) .tctt-awards__dots {
  display: flex;
}

/* Desktop: 4 giải vừa khung → căn giữa như lưới */
@media (min-width: 1200px) {
  .tctt-awards .tctt-awards__track {
    justify-content: center;
  }
}

/* ----- Laptop: co giải cho vừa 4 cột ----- */
@media (max-width: 1440px) {
  .tctt-awards {
    --tctt-awards-gap: 28px;
    --tctt-awards-overlap: 36px;
  }
}

/* ----- Tablet: 2 giải / lượt ----- */
@media (max-width: 1199px) {
  .tctt-awards {
    --tctt-awards-per-view: 2;
    --tctt-awards-gap: 24px;
    --tctt-awards-overlap: 30px;
    --tctt-awards-nav-top: 60%;
  }

  .tctt-awards .tctt-awards__track {
    justify-content: flex-start;
  }
}

/* ----- Mobile: 1 giải / lượt, bục mobile, không nền ----- */
@media (max-width: 768px) {
  .tctt-awards {
    --tctt-awards-per-view: 1;
    --tctt-awards-gap: 16px;
    --tctt-awards-item-w: 376px;
    --tctt-awards-podium-w: none;
    --tctt-awards-overlap: 20px;
    --tctt-awards-nav-top: 64%; /* giữa khung bằng chứng nhận */

    padding: 36px 16px 44px;
  }

  .tctt-awards__bg {
    display: none;
  }

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

  .tctt-awards__title-line {
    flex-direction: column;
    align-items: center;
    gap: 0;
  }

  .tctt-awards__title-line .tctt-pill-title {
    margin-top: 4px;
  }

  #tctt-landing .tctt-awards__intro {
    margin-bottom: 26px;
    text-align: justify;
  }

  .tctt-awards .tctt-slider__item {
    scroll-snap-align: center;
  }

  .tctt-awards__item:hover .tctt-awards__image {
    translate: none;
    scale: none;
    filter: drop-shadow(0 18px 22px rgba(69, 17, 128, 0.16));
  }

  /* Bục mobile tràn sát 2 mép màn hình */
  .tctt-awards__podium {
    margin-right: -16px;
    margin-left: -16px;
  }

  #tctt-landing .tctt-awards__nav {
    width: 42px;
    height: 42px;
    margin-top: -21px;
  }

  #tctt-landing .tctt-awards__nav--prev {
    left: 0;
  }

  #tctt-landing .tctt-awards__nav--next {
    right: 0;
  }
}

/* =========================================================
 * COMPONENT: VIDEO YOUTUBE (Shorts)
 * Nhúng thẳng player YouTube (khung 9:16, bo góc), dùng nút play mặc định của
 * YouTube → cú chạm nằm trong khung YouTube nên chạm 1 lần là phát có tiếng
 * trên mọi trình duyệt. iframe loading="lazy": chỉ tải khi sắp cuộn tới,
 * tab đang ẩn chưa tải.
 * ========================================================= */
.tctt-video {
  position: relative;
  overflow: hidden;
  aspect-ratio: 9 / 16;
  border-radius: 24px;
  background: var(--tctt-deep);
  box-shadow: 0 14px 30px rgba(69, 17, 128, 0.28);
  isolation: isolate; /* giữ bo góc cho iframe trên Safari */
}

#tctt-landing .tctt-video__frame {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  max-width: none;
  height: 100%;
  margin: 0;
  border: 0;
}


/* =========================================================
 * SECTION: SAO VIỆT ĐỒNG HÀNH CÙNG LINH ANH + VIDEO SHORTS
 * Nền desktop 1920 x 2204 (ảnh) | mobile: gradient CSS cùng tông.
 * Mỗi nhóm (Phun xăm / Công nghệ cao): nhãn tím + hàng 5 ảnh vuông 574.
 *   Desktop: ảnh đang chọn bung 574 x 574, ảnh khác thu 145 x 284 (cắt lấy phần
 *   gương mặt bên trái), bấm ảnh thu → bung mượt, ảnh cũ thu lại.
 *   Mobile : xổ dọc toàn bộ ảnh vuông, thu gọn còn 2,5 ảnh (mờ mép dưới)
 *   + nút Xem thêm / Thu gọn (thu gọn → cuộn mượt về đầu nhóm).
 * Dải video: desktop 5 cột | mobile cuộn ngang ~1,3 video / màn + thanh tiến trình.
 *
 * ⚙️ BIẾN TINH CHỈNH (đặt trên .tctt-stars):
 *   --tctt-stars-active    : kích thước ảnh đang bung (574px)
 *   --tctt-stars-thumb-w / -thumb-h : kích thước ảnh thu (145 x 284)
 *   --tctt-stars-gap       : khoảng cách giữa các ảnh trong hàng
 *   --tctt-stars-focus-x   : vị trí cắt ngang của ảnh thu (0% = mép trái ảnh)
 *   --tctt-stars-thumb-radius / -thumb-border : bo góc + viền trắng ảnh thu
 *   --tctt-stars-active-radius : bo góc ảnh bung (khớp góc bo cắt sẵn trong PNG)
 *   --tctt-stars-speed     : thời gian hiệu ứng bung / thu
 *   --tctt-stars-video-gap : khoảng cách giữa các video
 * ========================================================= */
.tctt-stars {
  --tctt-stars-active: 574px;
  --tctt-stars-thumb-w: 145px;
  --tctt-stars-thumb-h: 284px;
  --tctt-stars-gap: 14px;
  --tctt-stars-focus-x: 16%;
  --tctt-stars-thumb-radius: 18px; /* bo góc ảnh thu */
  --tctt-stars-thumb-border: 2px; /* viền trắng ảnh thu */
  --tctt-stars-active-radius: 28px; /* khớp góc bo sẵn trong PNG 574 */
  --tctt-stars-speed: 0.75s;
  --tctt-stars-ease: cubic-bezier(0.65, 0, 0.35, 1);
  --tctt-stars-video-gap: 19px;

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

.tctt-stars__bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
  /* Nền dự phòng khi ảnh chưa tải / mobile (cùng tông Figma) */
  background: linear-gradient(
    180deg,
    #f4eeff 0%,
    #f9e3d8 9%,
    #f9e3d8 50%,
    #e8b6e2 68%,
    #cc6cfb 92%,
    #f4eeff 100%
  );
}

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

.tctt-stars__inner {
  max-width: 1610px;
  margin: 0 auto;
}

/* Tiêu đề: "Sao Việt" / "đồng hành cùng" + pill "LINH ANH" */
.tctt-stars__heading {
  margin-bottom: 24px;
}

.tctt-stars__title-sub {
  gap: 10px;
  margin-top: 2px;
}

/* ----- Nhãn nhóm ----- */
/* Thanh nhãn chỉ dài theo chữ (~490px với "PHUN XĂM THẨM MỸ" như Figma):
 * width: fit-content chặn theme kéo h3 rộng 100%; phần đuôi phải mờ dần.
 * ⚙️ --tctt-stars-label-fade: độ dài đuôi mờ | --tctt-stars-label-star: cỡ ngôi sao */
#tctt-landing .tctt-stars__label {
  --tctt-stars-label-fade: 120px;
  --tctt-stars-label-star: 64px;

  position: relative;
  display: flex;
  align-items: center;
  width: fit-content;
  max-width: calc(100% - 24px);
  min-height: 62px;
  margin: 0 0 18px 24px;
  padding: 6px var(--tctt-stars-label-fade) 4px 50px;
  border-radius: var(--tctt-radius-pill) 0 0 var(--tctt-radius-pill);
  background: linear-gradient(
    90deg,
    #710dac 0%,
    #8a1fd0 calc(100% - var(--tctt-stars-label-fade) * 1.4),
    rgba(150, 21, 210, 0) 100%
  );
  color: #fff;
  font-family: var(--tctt-font-sans);
  font-size: 34px;
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: 0.01em;
  text-transform: uppercase;
}

/* Ngôi sao riêng từng nhóm (tcth-sv-star-px / -tmcnc), đè mép trái thanh nhãn */
#tctt-landing .tctt-stars__label-star {
  position: absolute;
  top: 50%;
  left: calc(var(--tctt-stars-label-star) * -0.38);
  width: var(--tctt-stars-label-star);
  max-width: none;
  height: auto;
  transform: translateY(-50%);
  filter: drop-shadow(0 4px 10px rgba(113, 13, 172, 0.3));
}

.tctt-stars__group + .tctt-stars__group {
  margin-top: 34px;
}

/* ----- Hàng ảnh co / bung (desktop) ----- */
.tctt-stars__row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--tctt-stars-gap);
  min-height: var(--tctt-stars-active);
}

#tctt-landing .tctt-stars__card {
  position: relative;
  flex: 0 0 auto;
  min-width: 0; /* chặn ảnh 574px bên trong kéo giãn card (min-width: auto của flex item) */
  max-width: none;
  width: var(--tctt-stars-thumb-w);
  height: var(--tctt-stars-thumb-h);
  min-height: 0;
  margin: 0;
  padding: 0;
  overflow: hidden;
  /* PNG đã cắt sẵn khung viền + bo góc → không thêm nền / bóng khối.
   * Ảnh THU bị cắt ngang nên mất góc bo + viền trắng bên phải → bo lại cả 4 góc
   * (--tctt-stars-thumb-radius) + vẽ viền trắng mảnh bằng ::after như Figma.
   * Ảnh BUNG: bo khớp đúng góc bo sẵn trong PNG, viền ::after ẩn đi. */
  border: 0;
  border-radius: var(--tctt-stars-thumb-radius);
  background: transparent;
  box-shadow: none;
  line-height: 0;
  cursor: pointer;
  transition: width var(--tctt-stars-speed) var(--tctt-stars-ease),
    height var(--tctt-stars-speed) var(--tctt-stars-ease),
    border-radius var(--tctt-stars-speed) var(--tctt-stars-ease),
    filter 0.4s ease, translate 0.35s ease;
}

/* Viền trắng mảnh cho ảnh thu (thay phần viền PNG bị cắt mất ở mép phải) */
#tctt-landing .tctt-stars__card::after {
  position: absolute;
  inset: 0;
  z-index: 1;
  content: "";
  border: var(--tctt-stars-thumb-border) solid rgba(255, 255, 255, 0.95);
  border-radius: inherit;
  opacity: 1;
  transition: opacity 0.4s ease;
  pointer-events: none;
}

#tctt-landing .tctt-stars__card.is-active::after {
  opacity: 0;
}

#tctt-landing .tctt-stars__card.is-active {
  width: var(--tctt-stars-active);
  height: var(--tctt-stars-active);
  border-radius: var(--tctt-stars-active-radius);
  cursor: default;
}

#tctt-landing .tctt-stars__image {
  display: block;
  width: 100%;
  min-width: 0;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: var(--tctt-stars-focus-x) center;
  user-select: none;
  -webkit-user-drag: none;
  transition: object-position var(--tctt-stars-speed) var(--tctt-stars-ease), filter 0.4s ease;
}

#tctt-landing .tctt-stars__card.is-active .tctt-stars__image {
  object-position: center;
}

/* Ảnh thu: rê chuột nhấc lên + bóng tím bám theo khung PNG (drop-shadow theo alpha) */
#tctt-landing .tctt-stars__card:not(.is-active):hover {
  filter: drop-shadow(0 16px 18px rgba(113, 13, 172, 0.35));
  translate: 0 -8px;
}

#tctt-landing .tctt-stars__card:not(.is-active):hover .tctt-stars__image {
  filter: brightness(1.06) saturate(1.08);
}

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

/* Nút Xem thêm / Thu gọn: chỉ mobile */
.tctt-stars__more,
#tctt-landing .tctt-stars__more[hidden] {
  display: none;
}

/* ----- Dải video ----- */
.tctt-stars__videos {
  --tctt-slider-gap: var(--tctt-stars-video-gap);

  margin-top: 44px;
}

.tctt-stars .tctt-stars__video-track {
  padding: 0 0 8px;
}

#tctt-landing .tctt-stars__video-item {
  flex: 0 0 calc((100% - var(--tctt-stars-video-gap) * 4) / 5);
  min-width: 0;
}

.tctt-stars .tctt-slider__progress {
  max-width: 600px;
  margin: 16px auto 0;
  background: rgba(255, 255, 255, 0.55);
}

/* ----- Laptop: co hàng ảnh cho vừa ----- */
@media (max-width: 1360px) {
  .tctt-stars {
    --tctt-stars-active: 500px;
    --tctt-stars-thumb-w: 128px;
    --tctt-stars-thumb-h: 250px;
    --tctt-stars-thumb-radius: 16px;
    --tctt-stars-active-radius: 24px;
    --tctt-stars-video-gap: 14px;
  }
}

/* ----- Tablet ----- */
@media (max-width: 1024px) {
  .tctt-stars {
    --tctt-stars-active: 420px;
    --tctt-stars-thumb-w: 104px;
    --tctt-stars-thumb-h: 206px;
    --tctt-stars-thumb-radius: 14px;
    --tctt-stars-active-radius: 20px;
    --tctt-stars-gap: 10px;
    --tctt-stars-video-gap: 12px;

    padding: 56px 24px 80px;
  }

  #tctt-landing .tctt-stars__label {
    --tctt-stars-label-fade: 90px;
    --tctt-stars-label-star: 52px;

    min-height: 50px;
    padding-left: 40px;
    font-size: 26px;
  }

  /* 3 video / màn, cuộn ngang */
  #tctt-landing .tctt-stars__video-item {
    flex-basis: calc((100% - var(--tctt-stars-video-gap) * 2) / 3);
  }

  .tctt-video {
    border-radius: 18px;
  }
}

/* ----- Mobile: xổ dọc + Xem thêm; video cuộn ngang ----- */
@media (max-width: 768px) {
  .tctt-stars {
    --tctt-stars-gap: 18px;
    --tctt-stars-video-gap: 14px;

    padding: 36px 16px 56px;
  }

  #tctt-landing .tctt-stars__bg-image {
    display: none; /* mobile dùng nền gradient CSS */
  }

  .tctt-stars__heading {
    margin-bottom: 18px;
  }

  .tctt-stars__title-sub {
    gap: 6px;
  }

  #tctt-landing .tctt-stars__label {
    --tctt-stars-label-fade: 60px;
    --tctt-stars-label-star: 40px;

    min-height: 40px;
    margin: 0 0 14px 14px;
    padding: 4px var(--tctt-stars-label-fade) 3px 30px;
    font-size: 18px;
  }

  .tctt-stars__group + .tctt-stars__group {
    margin-top: 32px;
  }

  /* Xổ dọc: mọi ảnh vuông full chiều ngang */
  .tctt-stars__row {
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    min-height: 0;
  }

  #tctt-landing .tctt-stars__card,
  #tctt-landing .tctt-stars__card.is-active {
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
    border-radius: 0;
    cursor: default;
    transition: none;
  }

  /* Mobile hiện trọn khung PNG → không vẽ thêm viền */
  #tctt-landing .tctt-stars__card::after {
    display: none;
  }

  #tctt-landing .tctt-stars__card:not(.is-active):hover {
    filter: none;
    translate: none;
  }

  #tctt-landing .tctt-stars__image {
    object-position: center;
    transition: none;
  }

  /* Khung thu gọn (JS đặt max-height = 2,5 ảnh) + mờ mép dưới */
  .tctt-stars__list {
    position: relative;
    overflow: hidden;
    transition: max-height 0.7s cubic-bezier(0.65, 0, 0.35, 1);
  }

  .tctt-stars__list.is-collapsed {
    -webkit-mask-image: linear-gradient(180deg, #000 0, #000 calc(100% - 180px), transparent 100%);
    mask-image: linear-gradient(180deg, #000 0, #000 calc(100% - 180px), transparent 100%);
  }

  /* Nút Xem thêm / Thu gọn luôn nằm DƯỚI dải ảnh (không đè lên ảnh đang mờ),
   * nhãn nhóm kế tiếp cách nút 32px → không chồng lên ảnh */
  .tctt-stars__more {
    position: relative;
    z-index: 2;
    display: flex;
    justify-content: center;
    margin-top: 16px;
  }

  #tctt-landing .tctt-stars__more-btn {
    min-width: 150px;
    height: 48px;
    min-height: 0;
    margin: 0;
    padding: 0 28px;
    border: 1.187px solid #fff;
    border-radius: var(--tctt-radius-pill);
    background: #e7cff8;
    box-shadow: 0 10px 22px -8px rgba(113, 13, 172, 0.45);
    color: var(--tctt-primary);
    font-family: var(--tctt-font-sans);
    font-size: 16px;
    font-weight: 500;
    line-height: 1;
    letter-spacing: 0.01em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background 0.3s ease, color 0.3s ease;
  }

  #tctt-landing .tctt-stars__more-btn::after {
    display: inline-block;
    width: 8px;
    height: 8px;
    margin-left: 10px;
    content: "";
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: translateY(-3px) rotate(45deg);
    transition: transform 0.3s ease;
  }

  #tctt-landing .tctt-stars__more-btn[aria-expanded="true"]::after {
    transform: translateY(1px) rotate(-135deg);
  }

  #tctt-landing .tctt-stars__more-btn:active {
    background: #710dac;
    color: #fff;
  }

  /* Video: ~1,3 video / màn, vuốt ngang, bắt đầu sát mép trái (lỗi #3 playbook) */
  .tctt-stars__videos {
    margin-top: 40px;
  }

  .tctt-stars .tctt-stars__video-track {
    justify-content: flex-start;
    margin-right: -16px;
    padding-right: 16px;
  }

  #tctt-landing .tctt-stars__video-item {
    flex-basis: 74%;
  }

  .tctt-stars .tctt-slider__progress {
    display: block;
    max-width: none;
    height: 7px;
    margin-top: 14px;
  }
}

/* =========================================================
 * SECTION: HÌNH ẢNH THỰC TẾ CỦA KHÁCH HÀNG (before / after)
 * Desktop: tiêu đề trái ("Hình ảnh" / pill "THỰC TẾ" + "của khách hàng"),
 *   3 tab phải; khung kính tím 1600, mỗi lượt 3 card 487px, kéo / cuộn / kéo
 *   thanh tiến trình để xem tiếp (6 card / tab).
 * Card: ảnh before/after PNG (kèm chữ TRƯỚC / SAU) + khung trắng HTML
 *   (tên – tuổi, pill dịch vụ gradient, gạch đầu dòng mô tả), khung trắng
 *   bo góc trên đè lên đáy ảnh 20px như Figma.
 * Mobile: lưới 2 hàng × n cột, mỗi lượt 1 cột (2 card), vuốt ngang + thanh tiến trình.
 *
 * ⚙️ BIẾN TINH CHỈNH (đặt trên .tctt-results):
 *   --tctt-results-w        : chiều rộng tối đa khung (1600px)
 *   --tctt-results-per-view : số card / lượt desktop (3)
 *   --tctt-results-gap      : khoảng cách giữa các card
 *   --tctt-results-overlap  : khung trắng đè lên đáy ảnh bao nhiêu px
 *   --tctt-results-pill     : gradient pill tên dịch vụ
 * ========================================================= */
.tctt-results {
  --tctt-results-w: 1600px;
  --tctt-results-per-view: 3;
  --tctt-results-gap: 25px;
  --tctt-results-overlap: 20px;
  --tctt-results-pill: linear-gradient(90deg, #d2463f 0%, #b43a8a 45%, #8a1fc9 100%);
  --tctt-tab-w: 0px;
  --tctt-tab-h: 68px;
  --tctt-tab-pad: 0 30px;
  --tctt-tab-fs: 18px;

  position: relative;
  width: 100%;
  padding: 50px 24px 70px;
}

.tctt-results__inner {
  max-width: var(--tctt-results-w);
  margin: 0 auto;
}

/* ----- Tiêu đề + tab (grid 2 cột, tab sát lề phải) ----- */
.tctt-results__head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 18px 24px;
  margin-bottom: 30px;
  padding: 0 0 0 18px;
}

#tctt-landing .tctt-results__heading {
  align-items: flex-start;
  justify-self: start;
  width: auto;
  max-width: none;
  margin: 0;
  text-align: left;
}

.tctt-results__title-sub {
  gap: 10px;
  margin-left: -10px;
}

.tctt-results__tabs {
  display: flex;
  gap: 10px;
  padding-bottom: 2px;
}

.tctt-results__tab-text {
  position: relative;
  z-index: 1;
}

/* ----- Khung ----- */
.tctt-results__box {
  position: relative;
  padding: 34px 42px 38px;
  border: 2px solid rgba(255, 255, 255, 0.7);
  border-radius: 26px;
  background: #e2d0f6;
  box-shadow: 0 16px 40px -18px rgba(113, 13, 172, 0.3), 0 0 22px 2px rgba(255, 255, 255, 0.5) inset;
}

#tctt-landing .tctt-results__panel[hidden] {
  display: none;
}

.tctt-results__panel.is-entering .tctt-results__card {
  animation: tctt-team-enter 0.6s cubic-bezier(0.22, 0.61, 0.36, 1) both;
  animation-delay: calc(var(--i, 0) * 0.08s);
}

.tctt-results__slider {
  --tctt-slider-gap: var(--tctt-results-gap);
}

.tctt-results .tctt-results__track {
  align-items: stretch;
  padding: 4px 0 10px;
}

/* ----- Card ----- */
#tctt-landing .tctt-results__card {
  display: flex;
  flex: 0 0 calc((100% - var(--tctt-results-gap) * (var(--tctt-results-per-view) - 1)) / var(--tctt-results-per-view));
  flex-direction: column;
  min-width: 0;
  margin: 0;
  overflow: hidden;
  border-radius: 24px;
  background: #fff;
  box-shadow: 0 10px 24px -12px rgba(113, 13, 172, 0.35);
  transition: translate 0.35s ease, box-shadow 0.35s ease;
}

#tctt-landing .tctt-results__card:hover {
  box-shadow: 0 22px 34px -14px rgba(113, 13, 172, 0.45);
  translate: 0 -6px;
}

.tctt-results__media {
  position: relative;
  overflow: hidden;
  line-height: 0;
}

#tctt-landing .tctt-results__image {
  width: 100%;
  height: auto;
  user-select: none;
  -webkit-user-drag: none;
  transition: scale 0.6s cubic-bezier(0.22, 0.61, 0.36, 1);
}

#tctt-landing .tctt-results__card:hover .tctt-results__image {
  scale: 1.04;
}

/* Khung trắng bo góc trên đè lên đáy ảnh */
.tctt-results__body {
  position: relative;
  z-index: 1;
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  align-items: center;
  margin-top: calc(-1 * var(--tctt-results-overlap));
  padding: 16px 26px 22px;
  border-radius: 24px 24px 0 0;
  background: #fff;
}

#tctt-landing .tctt-results__name {
  margin: 0;
  color: var(--tctt-primary);
  font-family: var(--tctt-font-sans);
  font-size: 20px;
  font-weight: 400;
  line-height: 1.3;
  text-align: center;
}

#tctt-landing .tctt-results__service {
  margin: 10px 0 0;
  font-family: var(--tctt-font-sans);
  font-size: 26px;
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: 0;
  text-align: center;
  text-transform: none;
}

.tctt-results__service > span {
  display: inline-block;
  padding: 3px 26px 4px;
  border-radius: var(--tctt-radius-pill);
  background: var(--tctt-results-pill);
  box-shadow: 0 6px 14px -6px rgba(150, 21, 210, 0.55);
  color: #fff;
}

#tctt-landing .tctt-results__points {
  align-self: stretch;
  margin: 10px 0 0;
  padding: 0 0 0 20px;
  color: var(--tctt-primary);
  font-family: var(--tctt-font-sans);
  font-size: 16px;
  line-height: 1.3;
  list-style: disc;
}

#tctt-landing .tctt-results__points li {
  margin: 0;
  padding: 0;
  list-style: disc;
}

#tctt-landing .tctt-results__points li::marker {
  color: var(--tctt-violet);
}

.tctt-results .tctt-slider__progress {
  height: 12px;
  margin-top: 22px;
  background: #fff;
}

.tctt-results .tctt-slider__progress-bar {
  background: #6618a8;
}

/* ----- Laptop ----- */
@media (max-width: 1440px) {
  .tctt-results__box {
    padding: 28px 28px 32px;
  }

  #tctt-landing .tctt-results__service {
    font-size: 22px;
  }

  #tctt-landing .tctt-results__name {
    font-size: 18px;
  }
}

/* ----- Tablet: 2 card / lượt ----- */
@media (max-width: 1024px) {
  .tctt-results {
    --tctt-results-per-view: 2;
    --tctt-results-gap: 18px;
    --tctt-tab-h: 56px;
    --tctt-tab-pad: 0 18px;
    --tctt-tab-fs: 15px;

    padding: 40px 24px 60px;
  }

  .tctt-results__head {
    grid-template-columns: minmax(0, 1fr);
    padding: 0;
  }

  .tctt-results__tabs {
    justify-self: start;
  }

  .tctt-results__box {
    padding: 24px 20px 28px;
  }
}

/* ----- Mobile: lưới 2 hàng, mỗi lượt 1 cột (2 card) ----- */
@media (max-width: 768px) {
  .tctt-results {
    --tctt-results-gap: 16px;
    --tctt-results-overlap: 16px;
    --tctt-tab-h: 62px;
    --tctt-tab-pad: 0 12px;
    --tctt-tab-fs: 15px;

    padding: 32px 16px 40px;
  }

  .tctt-results__head {
    gap: 18px;
    margin-bottom: 20px;
  }

  #tctt-landing .tctt-results__heading {
    align-items: center;
    justify-self: stretch;
    text-align: center;
  }

  .tctt-results__title-sub {
    gap: 6px;
    margin-left: 0;
  }

  .tctt-results__tabs {
    flex-wrap: wrap;
    justify-content: center;
    justify-self: stretch;
    gap: 16px 12px;
  }

  #tctt-landing .tctt-results__tab {
    flex: 0 0 calc(50% - 6px);
    min-width: 0;
    line-height: 1.2;
    white-space: normal;
  }

  /* Khung gần tràn viền (chừa 4px 2 bên) */
  .tctt-results__box {
    margin: 0 -12px;
    padding: 18px 8px 22px;
    border-radius: 22px;
  }

  /* Lưới 2 hàng, cột chảy ngang; mỗi cột rộng bằng khung → vuốt 1 lần = 2 card mới */
  .tctt-results .tctt-results__track {
    display: grid;
    grid-auto-columns: 100%;
    grid-auto-flow: column;
    grid-template-rows: repeat(2, auto);
    gap: var(--tctt-results-gap);
    justify-content: start;
    padding: 2px 0 8px;
  }

  .tctt-results .tctt-slider__item {
    scroll-snap-align: start;
  }

  #tctt-landing .tctt-results__card:hover {
    translate: none;
  }

  #tctt-landing .tctt-results__card:hover .tctt-results__image {
    scale: none;
  }

  .tctt-results__body {
    padding: 14px 16px 18px;
  }

  #tctt-landing .tctt-results__name {
    font-size: 19px;
  }

  #tctt-landing .tctt-results__service {
    margin-top: 8px;
    font-size: 22px;
  }

  #tctt-landing .tctt-results__points {
    font-size: 16px;
  }

  .tctt-results .tctt-slider__progress {
    display: block;
    height: 8px;
    margin-top: 16px;
  }
}

/* =========================================================
 * SECTION: VIDEO KHÁCH HÀNG (tab Phun xăm / Công nghệ cao / Phẫu thuật)
 * Desktop: tiêu đề trái ("Video" + pill), 3 tab phải; khung kính tím nhạt 1600,
 *   2 "cánh" pha lê 2 bên (nút ‹ ›), tối đa 3 video 324 x 575 / lượt, căn giữa.
 *   Tab ít video (vd Phẫu thuật: 1) → video căn giữa, cánh mờ đi (không cuộn).
 * Mobile: tiêu đề + tab căn giữa (2 tab + 1 tab, chữ 2 dòng), khung gần tràn viền,
 *   ~1,25 video / màn, vuốt ngang + thanh tiến trình. Ẩn cánh.
 *
 * ⚙️ BIẾN TINH CHỈNH (đặt trên .tctt-cvideo):
 *   --tctt-cvideo-w        : chiều rộng tối đa khung (1600px)
 *   --tctt-cvideo-item-w   : chiều rộng 1 video (324px)
 *   --tctt-cvideo-gap      : khoảng cách giữa các video
 *   --tctt-cvideo-per-view : số video 1 lượt (3 desktop)
 *   --tctt-cvideo-wing-w   : chiều rộng cánh pha lê 2 bên
 *   --tctt-cvideo-wing-gap : khoảng cách cánh ↔ hàng video
 * ========================================================= */
.tctt-cvideo {
  --tctt-cvideo-w: 1600px;
  --tctt-cvideo-item-w: 324px;
  --tctt-cvideo-gap: 22px;
  --tctt-cvideo-per-view: 3;
  --tctt-cvideo-wing-w: 92px;
  --tctt-cvideo-wing-gap: 64px;
  --tctt-tab-w: 0px;
  --tctt-tab-h: 68px;
  --tctt-tab-pad: 0 30px;
  --tctt-tab-fs: 18px;

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

/* Brush nền: hồng góc trái dưới + tím góc phải trên (desktop) */
.tctt-cvideo__bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}

.tctt-cvideo__bg::before,
.tctt-cvideo__bg::after {
  position: absolute;
  content: "";
  border-radius: 50%;
  filter: blur(68.2px);
}

.tctt-cvideo__bg::before {
  bottom: -60px;
  left: -180px;
  width: 560px;
  height: 460px;
  background: radial-gradient(50% 50% at 50% 50%, rgba(250, 168, 177, 0.6) 0%, rgba(250, 168, 177, 0) 100%);
}

.tctt-cvideo__bg::after {
  top: -80px;
  right: -140px;
  width: 620px;
  height: 480px;
  background: radial-gradient(50% 50% at 50% 50%, rgba(208, 107, 255, 0.45) 0%, rgba(208, 107, 255, 0) 100%);
}

.tctt-cvideo__inner {
  max-width: var(--tctt-cvideo-w);
  margin: 0 auto;
}

/* ----- Hàng tiêu đề + tab (grid 2 cột như section Đội ngũ) ----- */
.tctt-cvideo__head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 18px 24px;
  margin-bottom: 30px;
  padding: 0 0 0 18px;
}

#tctt-landing .tctt-cvideo__heading {
  align-items: flex-start;
  justify-self: start;
  width: auto;
  max-width: none;
  margin: 0;
  text-align: left;
}

.tctt-cvideo__heading .tctt-pill-title {
  margin: 0 0 0 -12px;
}

.tctt-cvideo__tabs {
  display: flex;
  gap: 10px;
  padding-bottom: 2px;
}

.tctt-cvideo__tab-text {
  position: relative;
  z-index: 1;
}

/* ----- Khung kính ----- */
.tctt-cvideo__box {
  position: relative;
  overflow: hidden;
  padding: 31px 24px;
  border: 2px solid rgba(255, 255, 255, 0.65);
  border-radius: 26px;
  background: rgba(230, 207, 247, 0.72);
  box-shadow: 0 16px 40px -18px rgba(113, 13, 172, 0.3), 0 0 22px 2px rgba(255, 255, 255, 0.55) inset;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

#tctt-landing .tctt-cvideo__panel[hidden] {
  display: none;
}

.tctt-cvideo__panel.is-entering .tctt-video {
  animation: tctt-team-enter 0.6s cubic-bezier(0.22, 0.61, 0.36, 1) both;
  animation-delay: calc(var(--i, 0) * 0.1s);
}

/* Cánh + hàng video */
.tctt-cvideo__rail {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--tctt-cvideo-wing-gap);
}

.tctt-cvideo__slider {
  --tctt-slider-gap: var(--tctt-cvideo-gap);
}

.tctt-cvideo .tctt-cvideo__track {
  flex: 0 1 auto;
  width: calc(var(--tctt-cvideo-item-w) * var(--tctt-cvideo-per-view) + var(--tctt-cvideo-gap) * (var(--tctt-cvideo-per-view) - 1));
  min-width: 0;
  padding: 0;
}

/* Không cuộn được (đủ chỗ) → căn giữa (vd tab chỉ 1 video) */
.tctt-cvideo__slider.is-static .tctt-cvideo__track {
  justify-content: center;
}

#tctt-landing .tctt-cvideo__item {
  flex: 0 0 calc((100% - var(--tctt-cvideo-gap) * (var(--tctt-cvideo-per-view) - 1)) / var(--tctt-cvideo-per-view));
  min-width: 0;
}

/* Cánh pha lê = nút ‹ › */
#tctt-landing .tctt-cvideo__wing {
  position: relative;
  flex: 0 0 var(--tctt-cvideo-wing-w);
  align-self: stretch;
  width: var(--tctt-cvideo-wing-w);
  height: auto;
  min-height: 0;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  line-height: 0;
  cursor: pointer;
  transition: translate 0.35s ease, opacity 0.35s ease, filter 0.35s ease;
}

#tctt-landing .tctt-cvideo__wing--next .tctt-cvideo__wing-art {
  transform: scaleX(-1); /* cánh phải = cánh trái lật ngang */
}

.tctt-cvideo__wing-art {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.tctt-cvideo__wing-arrow {
  fill: #b98ae6;
  transition: fill 0.3s ease;
}

#tctt-landing .tctt-cvideo__wing:hover,
#tctt-landing .tctt-cvideo__wing:focus-visible {
  filter: drop-shadow(0 0 14px rgba(255, 255, 255, 0.9));
}

#tctt-landing .tctt-cvideo__wing--prev:hover {
  translate: -6px 0;
}

#tctt-landing .tctt-cvideo__wing--next:hover {
  translate: 6px 0;
}

#tctt-landing .tctt-cvideo__wing:hover .tctt-cvideo__wing-arrow,
#tctt-landing .tctt-cvideo__wing:focus-visible .tctt-cvideo__wing-arrow {
  fill: var(--tctt-primary);
}

#tctt-landing .tctt-cvideo__wing:focus-visible {
  outline: 2px solid #fff;
  outline-offset: -6px;
}

/* Tab không cuộn được → cánh chỉ còn trang trí */
#tctt-landing .tctt-cvideo__slider.is-static .tctt-cvideo__wing {
  cursor: default;
  pointer-events: none;
}

.tctt-cvideo__slider.is-static .tctt-cvideo__wing-arrow {
  fill: #cfb2ee;
}

.tctt-cvideo .tctt-slider__progress {
  max-width: 600px;
  margin: 18px auto 0;
  background: rgba(255, 255, 255, 0.8);
}

/* ----- Laptop ----- */
@media (max-width: 1440px) {
  .tctt-cvideo {
    --tctt-cvideo-wing-gap: 40px;
  }
}

/* ----- Tablet ----- */
@media (max-width: 1024px) {
  .tctt-cvideo {
    --tctt-cvideo-item-w: 250px;
    --tctt-cvideo-gap: 14px;
    --tctt-cvideo-wing-w: 60px;
    --tctt-cvideo-wing-gap: 16px;
    --tctt-tab-h: 56px;
    --tctt-tab-pad: 0 18px;
    --tctt-tab-fs: 15px;

    padding: 36px 24px 72px;
  }

  .tctt-cvideo__head {
    grid-template-columns: minmax(0, 1fr);
    padding: 0;
  }

  .tctt-cvideo__tabs {
    justify-self: start;
  }

  .tctt-cvideo__box {
    padding: 24px 12px;
  }
}

/* ----- Mobile ----- */
@media (max-width: 768px) {
  .tctt-cvideo {
    --tctt-cvideo-gap: 13px;
    --tctt-tab-h: 62px;
    --tctt-tab-pad: 0 12px;
    --tctt-tab-fs: 15px;

    padding: 32px 16px 48px;
  }

  .tctt-cvideo__bg {
    display: none;
  }

  .tctt-cvideo__head {
    gap: 18px;
    margin-bottom: 20px;
  }

  #tctt-landing .tctt-cvideo__heading {
    align-items: center;
    justify-self: stretch;
    text-align: center;
  }

  .tctt-cvideo__heading .tctt-pill-title {
    margin: 2px 0 0;
  }

  /* 2 tab trên + 1 tab căn giữa dưới, chữ 2 dòng */
  .tctt-cvideo__tabs {
    flex-wrap: wrap;
    justify-content: center;
    justify-self: stretch;
    gap: 16px 12px;
  }

  #tctt-landing .tctt-cvideo__tab {
    flex: 0 0 calc(50% - 6px);
    min-width: 0;
    line-height: 1.2;
    white-space: normal;
  }

  /* Khung gần tràn viền, chỉ chừa 4px 2 bên */
  .tctt-cvideo__box {
    margin: 0 -12px;
    padding: 26px 0 22px 12px;
    border-radius: 22px;
  }

  #tctt-landing .tctt-cvideo__wing {
    display: none;
  }

  .tctt-cvideo .tctt-cvideo__track {
    flex: 1 1 auto;
    justify-content: flex-start; /* lỗi #3 playbook */
    width: auto;
    padding-right: 12px;
  }

  /* Tab 1 video vẫn căn giữa trên mobile */
  .tctt-cvideo__slider.is-static .tctt-cvideo__track {
    justify-content: center;
  }

  #tctt-landing .tctt-cvideo__item {
    flex-basis: 80%;
  }

  .tctt-cvideo .tctt-slider__progress {
    display: block;
    max-width: none;
    height: 7px;
    margin: 16px 12px 0 0;
  }
}

/* =========================================================
 * SECTION: ĐỐI TÁC CỦA PHÒNG KHÁM
 * Dải nền trắng, brush hồng nhạt bên trái (desktop).
 * Tiêu đề "Đối tác" + "của phòng khám" / pill "THẨM MỸ LINH ANH".
 * 10 logo chạy marquee liên tục (CSS animation, dải nhân đôi → dịch -50% là lặp
 * liền mạch), 2 mép mờ dần; rê chuột dừng lại, logo phóng nhẹ.
 *
 * ⚙️ BIẾN TINH CHỈNH (đặt trên .tctt-partners):
 *   --tctt-partners-slot-w : chiều rộng 1 ô logo (gồm khoảng trống)
 *   --tctt-partners-logo-w / -logo-h : kích thước tối đa logo trong ô
 *   --tctt-partners-speed  : thời gian chạy hết 1 vòng (càng lớn càng chậm)
 *   --tctt-partners-fade   : độ rộng vùng mờ 2 mép
 * ========================================================= */
.tctt-partners {
  --tctt-partners-slot-w: 330px;
  --tctt-partners-logo-w: 200px;
  --tctt-partners-logo-h: 64px;
  --tctt-partners-speed: 38s;
  --tctt-partners-fade: 14%;

  position: relative;
  width: 100%;
  padding: 44px 0 52px;
  overflow: hidden;
  background: linear-gradient(90deg, #f4d2cc 0%, #fbeeeb 12%, #fff 30%, #fff 100%);
}

.tctt-partners__inner {
  max-width: 1600px;
  margin: 0 auto;
  padding: 0 24px;
}

.tctt-partners__heading {
  margin-bottom: 34px;
}

/* ----- Dải logo ----- */
.tctt-partners__marquee {
  position: relative;
  width: 100%;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 var(--tctt-partners-fade), #000 calc(100% - var(--tctt-partners-fade)), transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 var(--tctt-partners-fade), #000 calc(100% - var(--tctt-partners-fade)), transparent 100%);
}

.tctt-partners__track {
  display: flex;
  width: max-content;
  animation: tctt-marquee var(--tctt-partners-speed) linear infinite;
}

.tctt-partners__marquee:hover .tctt-partners__track {
  animation-play-state: paused;
}

/* Reset ul/li của Flatsome */
#tctt-landing .tctt-partners__list {
  display: flex;
  flex: 0 0 auto;
  margin: 0;
  padding: 0;
  list-style: none;
}

#tctt-landing .tctt-partners__item {
  display: flex;
  flex: 0 0 var(--tctt-partners-slot-w);
  align-items: center;
  justify-content: center;
  height: calc(var(--tctt-partners-logo-h) + 20px);
  margin: 0;
  padding: 0;
  list-style: none;
}

#tctt-landing .tctt-partners__logo {
  width: var(--tctt-partners-logo-w);
  max-width: 100%;
  height: var(--tctt-partners-logo-h);
  object-fit: contain;
  user-select: none;
  -webkit-user-drag: none;
  transition: scale 0.35s ease, filter 0.35s ease;
}

#tctt-landing .tctt-partners__item:hover .tctt-partners__logo {
  scale: 1.12;
  filter: drop-shadow(0 6px 12px rgba(113, 13, 172, 0.2));
}

@keyframes tctt-marquee {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}

@media (max-width: 1024px) {
  .tctt-partners {
    --tctt-partners-slot-w: 260px;
    --tctt-partners-logo-w: 170px;
    --tctt-partners-logo-h: 56px;
  }
}

@media (max-width: 768px) {
  .tctt-partners {
    --tctt-partners-slot-w: 150px;
    --tctt-partners-logo-w: 116px;
    --tctt-partners-logo-h: 44px;
    --tctt-partners-speed: 30s;
    --tctt-partners-fade: 10%;

    padding: 32px 0 36px;
    background: #fff;
  }

  .tctt-partners__inner {
    padding: 0 16px;
  }

  .tctt-partners__heading {
    margin-bottom: 22px;
  }
}

/* Giảm chuyển động: dừng chạy, cho phép vuốt / cuộn ngang để xem logo */
@media (prefers-reduced-motion: reduce) {
  .tctt-partners__marquee {
    overflow-x: auto;
  }
}

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

.tctt-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;
}

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

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

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

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

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

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

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

#tctt-landing .tctt-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(--tctt-primary);
  cursor: pointer;
  transition: transform 0.25s ease, color 0.25s ease;
}

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

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

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

.tctt-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 */
.tctt-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.tctt-press__link:hover {
  filter: drop-shadow(0 16px 24px rgba(113, 13, 172, 0.24));
  transform: translateY(-8px);
}

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

/* ----- Tablet ----- */
@media (min-width: 769px) and (max-width: 1199px) {
  .tctt-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) {
  .tctt-press {
    padding: 40px 16px 24px;
  }

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

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

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

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

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

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

  .tctt-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.
 * ========================================================= */
.tctt-faq {
  position: relative;
  z-index: 1;
  width: 100%;
  padding: 70px 24px 100px;
  background: var(--tctt-bg);
}

.tctt-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 */
.tctt-faq__aside {
  position: sticky;
  top: 120px;
  padding-top: 6px;
}

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

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

.tctt-faq__item {
  position: relative;
}

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

#tctt-landing .tctt-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(--tctt-radius-tab);
  background: var(--tctt-grad-title-2);
  box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);
  color: #fff;
  font-family: var(--tctt-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;
}

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

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

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

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

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

#tctt-landing.is-js .tctt-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);
}

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

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

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

/* Khung trắng trả lời */
.tctt-faq__answer {
  margin: 0;
  padding: 36px 30px 24px;
  border-radius: 0 0 var(--tctt-radius-tab) var(--tctt-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;
}

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

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

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

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

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

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

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

  .tctt-faq__aside {
    position: static;
  }
}

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

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

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

  .tctt-faq__list {
    gap: 14px;
  }

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

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

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

/* =========================================================
 * COMPONENT: LIGHTBOX (phóng to ảnh)
 * JS tự tạo khung .tctt-lightbox gắn vào <body> (tránh bị cha có transform/filter
 * làm lệch position: fixed). Ảnh bay ra từ đúng vị trí thumbnail, đóng thì bay về.
 * Desktop: nút ‹ › 2 bên | Mobile: vuốt ngang đổi ảnh, vuốt xuống để đóng.
 * ⚙️ --tctt-lb-max-w / --tctt-lb-max-h : kích thước tối đa ảnh phóng to
 * ========================================================= */
.tctt-lightbox {
  --tctt-lb-max-w: min(92vw, 1180px);
  --tctt-lb-max-h: 78vh;

  position: fixed;
  inset: 0;
  z-index: 999999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  font-family: "Geomanist", sans-serif;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.35s ease, visibility 0s linear 0.35s;
}

.tctt-lightbox.is-open {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.35s ease, visibility 0s;
}

.tctt-lightbox[hidden] {
  display: none;
}

.tctt-lightbox__backdrop {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 40%, rgba(113, 13, 172, 0.55) 0%, rgba(33, 8, 56, 0.94) 70%);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

.tctt-lightbox__stage {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0;
  touch-action: none; /* tự xử lý vuốt */
}

/* Ảnh luôn phóng vừa khung tối đa theo đúng tỉ lệ (--r = rộng/cao, JS gắn khi ảnh tải xong) */
.tctt-lightbox .tctt-lightbox__img {
  display: block;
  width: min(var(--tctt-lb-max-w), calc(var(--tctt-lb-max-h) * var(--r, 1.36)));
  max-width: none;
  height: auto;
  max-height: none;
  border-radius: 24px;
  box-shadow: 0 30px 80px -20px rgba(0, 0, 0, 0.6);
  transform-origin: 0 0;
  user-select: none;
  -webkit-user-drag: none;
  transition: opacity 0.3s ease, translate 0.35s cubic-bezier(0.22, 0.61, 0.36, 1);
  will-change: transform;
}

/* Đổi ảnh: trượt ra theo hướng bấm */
.tctt-lightbox .tctt-lightbox__img.is-leaving-next {
  opacity: 0;
  translate: -60px 0;
}

.tctt-lightbox .tctt-lightbox__img.is-leaving-prev {
  opacity: 0;
  translate: 60px 0;
}

.tctt-lightbox .tctt-lightbox__img.is-entering-next {
  opacity: 0;
  translate: 60px 0;
  transition: none;
}

.tctt-lightbox .tctt-lightbox__img.is-entering-prev {
  opacity: 0;
  translate: -60px 0;
  transition: none;
}

.tctt-lightbox__caption {
  max-width: var(--tctt-lb-max-w);
  margin-top: 16px;
  color: rgba(255, 255, 255, 0.92);
  font-size: 16px;
  line-height: 1.35;
  text-align: center;
  transition: opacity 0.3s ease;
}

.tctt-lightbox__counter {
  position: absolute;
  top: 22px;
  left: 24px;
  z-index: 2;
  padding: 8px 16px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.04em;
}

/* Nút: reset style button của Flatsome bằng selector đủ mạnh */
body .tctt-lightbox button.tctt-lightbox__btn {
  position: absolute;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  min-height: 0;
  margin: 0;
  padding: 0;
  border: 1.5px solid rgba(255, 255, 255, 0.55);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.14);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
  color: #fff;
  line-height: 1;
  cursor: pointer;
  transition: background 0.3s ease, transform 0.25s ease, border-color 0.3s ease;
}

body .tctt-lightbox button.tctt-lightbox__btn[hidden] {
  display: none;
}

body .tctt-lightbox button.tctt-lightbox__btn:hover,
body .tctt-lightbox button.tctt-lightbox__btn:focus-visible {
  border-color: #fff;
  background: linear-gradient(90deg, #f5935c 0%, #e0668a 50%, #a45cf2 100%);
  transform: scale(1.08);
}

body .tctt-lightbox button.tctt-lightbox__btn:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 3px;
}

body .tctt-lightbox button.tctt-lightbox__btn svg {
  width: 24px;
  height: 24px;
  pointer-events: none;
}

body .tctt-lightbox button.tctt-lightbox__close {
  top: 18px;
  right: 22px;
}

body .tctt-lightbox button.tctt-lightbox__prev {
  top: 50%;
  left: 24px;
  margin-top: -28px;
}

body .tctt-lightbox button.tctt-lightbox__next {
  top: 50%;
  right: 24px;
  margin-top: -28px;
}

/* Khóa cuộn trang khi mở lightbox */
html.tctt-lightbox-lock,
html.tctt-lightbox-lock body {
  overflow: hidden !important;
}

@media (max-width: 768px) {
  .tctt-lightbox {
    --tctt-lb-max-w: calc(100vw - 24px);
    --tctt-lb-max-h: 70vh;

    padding: 12px;
  }

  .tctt-lightbox .tctt-lightbox__img {
    border-radius: 16px;
  }

  .tctt-lightbox__caption {
    font-size: 14px;
  }

  .tctt-lightbox__counter {
    top: 16px;
    left: 16px;
    font-size: 13px;
  }

  body .tctt-lightbox button.tctt-lightbox__btn {
    width: 46px;
    height: 46px;
  }

  body .tctt-lightbox button.tctt-lightbox__close {
    top: 12px;
    right: 14px;
  }

  /* Mobile: 2 nút ‹ › xuống đáy màn hình cho dễ bấm */
  body .tctt-lightbox button.tctt-lightbox__prev,
  body .tctt-lightbox button.tctt-lightbox__next {
    top: auto;
    bottom: 22px;
    margin-top: 0;
  }

  body .tctt-lightbox button.tctt-lightbox__prev {
    left: calc(50% - 58px);
  }

  body .tctt-lightbox button.tctt-lightbox__next {
    right: calc(50% - 58px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .tctt-lightbox,
  .tctt-lightbox * {
    transition: none !important;
  }
}

/* ===== [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) {
  #tctt-landing *,
  #tctt-landing *::before,
  #tctt-landing *::after {
    animation: none !important;
    transition: none !important;
  }
}