/* =========================================================
 * THẨM MỸ CÔNG NGHỆ CAO – LANDING PAGE
 * Prefix: tmcnc-  (kế thừa design system + component từ LP Công nghệ phun mày)
 * Breakpoints: mobile ≤ 768px | tablet 769–1024px | desktop ≥ 1025px
 * ========================================================= */

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.tmcnc-heading__line {
  display: flex;
  flex-wrap: nowrap;
  align-items: baseline;
  justify-content: center;
  gap: 12px;
  white-space: nowrap; /* keyword + phụ đề luôn 1 dòng; JS thu chữ khi màn hẹp */
}

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

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

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

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

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

  .tmcnc-heading__line {
    gap: 6px;
  }

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

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

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

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

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

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

/* =========================================================
 * SECTION: HERO
 * Desktop 1920 x 951 | Mobile 420 x 769  (ảnh cắt trọn, KHÔNG kèm nút)
 * Nút CTA đặt theo % ảnh → luôn khớp artwork mọi màn hình.
 * Lệch so với ảnh thì chỉnh 3 biến --tmcnc-stage-* bên dưới:
 *   --tmcnc-stage-x / -y : tâm nút (% chiều rộng / chiều cao banner)
 *   --tmcnc-stage-cta-w  : chiều rộng nút (cqw = % chiều rộng banner)
 * ========================================================= */
.tmcnc-hero {
  position: relative;
  width: 100%;
  background: var(--tmcnc-bg);
}

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

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

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

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

/* =========================================================
 * SECTION: VẤN ĐỀ – CHỊ EM ƠI! BẠN ĐANG PHẢI CHỊU ĐỰNG ĐIỀU GÌ?
 * Desktop: cột trái tiêu đề + 6 nút tình trạng (400px) + CTA |
 *          cột phải ảnh mẫu (~1060px) + hình tròn zoom + đường nối.
 * ≤1024  : xếp dọc – tiêu đề, ảnh mẫu, lưới nút 2 cột, CTA.
 * Hover / bấm nút → hình tròn trượt tới vùng da tương ứng (JS tween)
 * + crossfade ảnh zoom. Tọa độ chỉnh trong mảng $tmcnc_issues (PHP).
 * ========================================================= */
.tmcnc-issues {
  /* Tinh chỉnh nhanh */
  --tmcnc-issues-kw: 110px;          /* cỡ chữ "Chị em ơi!" */
  --tmcnc-issues-col: 660px;         /* chiều rộng cột trái */
  --tmcnc-issues-btn-w: 400px;       /* chiều rộng nút tình trạng */
  --tmcnc-issues-btn-h: 88px;        /* chiều cao tối thiểu nút */
  --tmcnc-issues-btn-fs: 20px;
  --tmcnc-issues-gap: 30px;          /* khoảng cách giữa các nút */
  --tmcnc-issues-shift: 52px;        /* nút active trượt sang phải */
  --tmcnc-issues-lens: 23%;          /* đường kính hình tròn zoom (% ảnh mẫu) */
  --tmcnc-issues-stage-x: -40px;     /* ảnh mẫu lấn sang cột trái */

  position: relative;
  padding: 0 0 44px;
}

/* ----- Nền: brush blur, lan liền sang section kề ----- */
.tmcnc-issues__bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}

.tmcnc-issues__brush {
  position: absolute;
  border-radius: 50%;
  filter: blur(68.2px);
}

.tmcnc-issues__brush--violet {
  top: 20%;
  left: -10%;
  width: 36vw;
  height: 36vw;
  max-width: 700px;
  max-height: 700px;
  background: radial-gradient(50% 50% at 50% 50%, rgba(208, 107, 255, 0.4) 0%, rgba(208, 107, 255, 0) 100%);
}

/* ----- Lưới ----- */
.tmcnc-issues__container {
  display: grid;
  grid-template-columns: var(--tmcnc-issues-col) minmax(0, 1fr);
  grid-template-rows: auto auto 1fr;
  grid-template-areas:
    "head stage"
    "list stage"
    "cta  stage";
  width: min(1700px, calc(100% - 80px));
  margin: 0 auto;
}

#tmcnc-landing .tmcnc-issues__heading {
  grid-area: head;
  margin: 0;
  padding: 70px 0 0;
  margin-bottom: 44px;
}

.tmcnc-issues .tmcnc-heading__keyword {
  font-size: var(--tmcnc-issues-kw);
}

/* ----- Danh sách nút ----- */
#tmcnc-landing .tmcnc-issues__list {
  grid-area: list;
  display: flex;
  flex-direction: column;
  gap: var(--tmcnc-issues-gap);
  justify-self: center;
  width: var(--tmcnc-issues-btn-w);
  max-width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}

#tmcnc-landing .tmcnc-issues__item {
  margin: 0;
  padding: 0;
  list-style: none;
}

#tmcnc-landing .tmcnc-issues__btn {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: var(--tmcnc-issues-btn-h);
  margin: 0;
  padding: 12px 26px;
  overflow: hidden;
  border: 0.6px solid #fff;
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 6px 16px rgba(113, 13, 172, 0.14), 0 0 11.76px 4.8px #fff inset;
  color: var(--tmcnc-primary);
  font-family: var(--tmcnc-font-sans);
  font-size: var(--tmcnc-issues-btn-fs);
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: 0;
  text-align: center;
  text-transform: none;
  cursor: pointer;
  translate: 0 0;
  transition: translate 0.45s cubic-bezier(0.22, 0.61, 0.36, 1), color 0.35s ease,
    box-shadow 0.35s ease;
}

/* Lớp gradient active (fade opacity để chuyển mượt) */
#tmcnc-landing .tmcnc-issues__btn::before {
  position: absolute;
  inset: 0;
  z-index: -1;
  content: "";
  background: var(--tmcnc-grad-title-1);
  opacity: 0;
  transition: opacity 0.4s ease;
}

/* Vệt sáng quét khi active */
#tmcnc-landing .tmcnc-issues__btn::after {
  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.45) 50%, rgba(255, 255, 255, 0) 100%);
  transform: translateX(-150%) skewX(-20deg);
  pointer-events: none;
}

#tmcnc-landing .tmcnc-issues__btn:hover {
  translate: 0 -2px;
  box-shadow: 0 10px 22px rgba(113, 13, 172, 0.22), 0 0 11.76px 4.8px #fff inset;
}

#tmcnc-landing .tmcnc-issues__btn.is-active {
  translate: var(--tmcnc-issues-shift) 0;
  color: #fff;
  box-shadow: 0 8px 22px rgba(150, 21, 210, 0.45), 0 0 14px 2px rgba(255, 255, 255, 0.55) inset;
}

#tmcnc-landing .tmcnc-issues__btn.is-active::before {
  opacity: 1;
}

#tmcnc-landing .tmcnc-issues__btn.is-active::after {
  animation: tmcnc-btn-shine 3.2s ease-in-out infinite;
}

#tmcnc-landing .tmcnc-issues__btn:focus-visible {
  outline: 3px solid var(--tmcnc-violet);
  outline-offset: 3px;
}

.tmcnc-issues__btn-label {
  position: relative;
  z-index: 1;
}

/* ----- CTA ----- */
.tmcnc-issues__cta {
  grid-area: cta;
  align-self: start;
  justify-self: center;
  margin-top: 48px;
}

.tmcnc-issues__cta .tmcnc-btn {
  --tmcnc-btn-w: 330px;
  --tmcnc-btn-fs: 0.066; /* text dài → chữ nhỏ hơn nút chuẩn */
}

/* ----- Ảnh mẫu + zoom ----- */
.tmcnc-issues__stage {
  position: relative;
  grid-area: stage;
  align-self: start;
  width: calc(100% - var(--tmcnc-issues-stage-x));
  max-width: 1100px;
  margin-left: var(--tmcnc-issues-stage-x);
}

.tmcnc-issues__model {
  display: block;
  width: 100%;
}

#tmcnc-landing .tmcnc-issues__model-img {
  width: 100%;
  height: auto;
  /* đáy ảnh tan vào nền */
  -webkit-mask-image: linear-gradient(180deg, #000 82%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 82%, transparent 100%);
}

.tmcnc-issues__line {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.4s ease;
}

#tmcnc-landing.is-js .tmcnc-issues__line.is-ready {
  opacity: 1;
}

.tmcnc-issues__line line {
  stroke: rgba(255, 255, 255, 0.95);
  stroke-width: 1.5;
  filter: drop-shadow(0 0 2px rgba(113, 13, 172, 0.35));
}

/* Chấm trên mặt mẫu + sóng lan */
.tmcnc-issues__dot {
  position: absolute;
  z-index: 3;
  width: 14px;
  height: 14px;
  border: 2px solid #fff;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.35);
  box-shadow: 0 0 6px rgba(113, 13, 172, 0.45);
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.tmcnc-issues__dot::after {
  position: absolute;
  inset: -2px;
  content: "";
  border: 2px solid rgba(255, 255, 255, 0.9);
  border-radius: 50%;
  animation: tmcnc-issues-ping 1.8s ease-out infinite;
}

/* Hình tròn zoom */
.tmcnc-issues__lens {
  position: absolute;
  z-index: 4;
  width: var(--tmcnc-issues-lens);
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
}

.tmcnc-issues__lens-view {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border: 5px solid rgba(255, 255, 255, 0.85);
  border-radius: 50%;
  background: #f3e6f2;
  box-shadow: 0 14px 34px rgba(113, 13, 172, 0.28), 0 0 0 1px rgba(113, 13, 172, 0.08);
  animation: tmcnc-issues-pop 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.tmcnc-issues__lens.is-switching .tmcnc-issues__lens-view {
  animation: none;
}

/* Viền nét đứt xoay chậm */
.tmcnc-issues__lens-ring {
  position: absolute;
  inset: -9%;
  border: 1.5px dashed rgba(150, 110, 170, 0.75);
  border-radius: 50%;
  animation: tmcnc-issues-spin 26s linear infinite;
  pointer-events: none;
}

#tmcnc-landing .tmcnc-issues__zoom {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  scale: 1.18;
  transition: opacity 0.55s ease, scale 0.9s cubic-bezier(0.22, 0.61, 0.36, 1);
}

#tmcnc-landing .tmcnc-issues__zoom.is-current {
  opacity: 1;
  scale: 1;
}

@keyframes tmcnc-issues-ping {
  0% {
    opacity: 0.9;
    scale: 1;
  }
  100% {
    opacity: 0;
    scale: 2.6;
  }
}

@keyframes tmcnc-issues-spin {
  to {
    rotate: 360deg;
  }
}

@keyframes tmcnc-issues-pop {
  0% {
    scale: 0.9;
  }
  100% {
    scale: 1;
  }
}

/* ----- Laptop ----- */
@media (min-width: 1025px) and (max-width: 1440px) {
  .tmcnc-issues {
    --tmcnc-issues-kw: 92px;
    --tmcnc-issues-col: 520px;
    --tmcnc-issues-btn-w: 360px;
    --tmcnc-issues-btn-h: 76px;
    --tmcnc-issues-btn-fs: 18px;
    --tmcnc-issues-gap: 20px;
    --tmcnc-issues-shift: 36px;
  }

  .tmcnc-issues .tmcnc-pill-title__text {
    font-size: 22px;
  }
}

@media (min-width: 1025px) and (max-width: 1199px) {
  .tmcnc-issues {
    --tmcnc-issues-col: 440px;
    --tmcnc-issues-btn-w: 320px;
    --tmcnc-issues-kw: 80px;
    --tmcnc-issues-shift: 26px;
  }

  .tmcnc-issues .tmcnc-pill-title__text {
    font-size: 18px;
  }
}

/* ----- Tablet + Mobile: xếp dọc, lưới nút 2 cột ----- */
@media (max-width: 1024px) {
  .tmcnc-issues {
    --tmcnc-issues-kw: 88px;
    --tmcnc-issues-lens: 33%;
    --tmcnc-issues-btn-h: 62px;
    --tmcnc-issues-btn-fs: 17px;
    --tmcnc-issues-gap: 12px;

    padding-bottom: 34px;
  }

  .tmcnc-issues__container {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto;
    grid-template-areas:
      "head"
      "stage"
      "list"
      "cta";
    width: min(720px, calc(100% - 24px));
  }

  #tmcnc-landing .tmcnc-issues__heading {
    padding-top: 36px;
    margin-bottom: 8px;
  }

  .tmcnc-issues__stage {
    width: 100%;
    max-width: none;
    margin-left: 0;
  }

  #tmcnc-landing .tmcnc-issues__model-img {
    -webkit-mask-image: linear-gradient(180deg, #000 78%, transparent 100%);
    mask-image: linear-gradient(180deg, #000 78%, transparent 100%);
  }

  #tmcnc-landing .tmcnc-issues__list {
    position: relative;
    z-index: 5;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--tmcnc-issues-gap);
    width: 100%;
    margin-top: -36px; /* chồng nhẹ lên phần đáy ảnh đã tan */
  }

  #tmcnc-landing .tmcnc-issues__btn {
    height: 100%;
    padding: 8px 10px;
    border-radius: 26px;
  }

  #tmcnc-landing .tmcnc-issues__btn.is-active {
    translate: 0 0;
  }

  .tmcnc-issues__cta {
    margin-top: 28px;
  }

  .tmcnc-issues__cta .tmcnc-btn {
    --tmcnc-btn-w: 300px;
  }

  .tmcnc-issues__lens-view {
    border-width: 4px;
  }
}

@media (max-width: 768px) {
  .tmcnc-issues {
    --tmcnc-issues-kw: 80px;
  }

  /* ảnh mẫu tràn sát 2 mép màn hình */
  .tmcnc-issues__stage {
    width: calc(100% + 24px);
    margin-left: -12px;
  }

  .tmcnc-issues__cta .tmcnc-btn {
    --tmcnc-btn-w: 290px;
    --tmcnc-btn-fs: 0.057;
    padding: 0 20px;
  }
}

@media (max-width: 400px) {
  .tmcnc-issues {
    --tmcnc-issues-kw: 68px;
    --tmcnc-issues-btn-fs: 15.5px;
  }

  .tmcnc-issues__cta .tmcnc-btn {
    --tmcnc-btn-fs: 0.051;
    max-width: 100%;
    padding: 0 14px;
  }
}

/* =========================================================
 * SECTION: GIẢI PHÁP CHUYÊN SÂU CHO TỪNG VẤN ĐỀ DA
 * 2 tab nhóm (Điều trị da | Nâng cơ & trẻ hóa da) – thanh gradient trượt theo tab.
 * Desktop (≥1025): menu dọc trái (380) | card dịch vụ phải: ảnh lớn + khung kính
 *   chữ đè lấn ảnh; đổi dịch vụ = ảnh mở màn (clip-path) + chữ trượt lên lệch nhịp.
 *   Mũi tên trước/sau + đếm; vuốt ngang được trên tablet ngang.
 * ≤1024: chip cuộn ngang + slider card vuốt (scroll-snap) đồng bộ 2 chiều,
 *   thanh tiến trình dưới slider. Không JS vẫn xem đủ nội dung.
 * ========================================================= */
.tmcnc-sol {
  /* Tinh chỉnh nhanh */
  --tmcnc-sol-nav-w: 340px;       /* chiều rộng menu trái */
  --tmcnc-sol-gap: 40px;          /* khoảng cách menu ↔ card */
  --tmcnc-sol-overlap: 64px;      /* khung chữ lấn sang ảnh */
  --tmcnc-sol-name: 44px;         /* cỡ chữ tên dịch vụ */
  --tmcnc-sol-media-ratio: 1 / 1;   /* ảnh vuông, to hơn – điểm nhấn */
  --tmcnc-sol-cols: 1.32fr 1fr;      /* tỉ lệ cột ảnh : khung chữ */

  position: relative;
  padding: 72px 0 76px;
}

/* ----- Nền: brush blur (không set background → brush lan liền section kề) ----- */
.tmcnc-sol__bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}

.tmcnc-sol__brush {
  position: absolute;
  border-radius: 50%;
  filter: blur(68.2px);
}

.tmcnc-sol__brush--violet {
  top: 22%;
  right: -8%;
  width: 42vw;
  height: 42vw;
  max-width: 820px;
  max-height: 820px;
  background: radial-gradient(50% 50% at 50% 50%, rgba(208, 107, 255, 0.4) 0%, rgba(208, 107, 255, 0) 100%);
}

.tmcnc-sol__container {
  width: min(1440px, calc(100% - 80px));
  margin: 0 auto;
}

#tmcnc-landing .tmcnc-sol__heading {
  margin-bottom: 40px;
}

.tmcnc-sol .tmcnc-heading__sub {
  margin-bottom: 4px;
}

/* ----- Tab nhóm ----- */
.tmcnc-sol__tabs {
  position: relative;
  display: flex;
  width: fit-content;
  max-width: 100%;
  margin: 0 auto 52px;
  padding: 6px;
  border: 1px solid rgba(255, 255, 255, 0.95);
  border-radius: var(--tmcnc-radius-pill);
  background: rgba(255, 255, 255, 0.62);
  box-shadow: 0 10px 30px rgba(113, 13, 172, 0.12), 0 0 10px 3px #fff inset;
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}

.tmcnc-sol__tabs-ind {
  position: absolute;
  top: 6px;
  bottom: 6px;
  left: 6px;
  width: 0;
  border-radius: var(--tmcnc-radius-pill);
  background: var(--tmcnc-grad-title-1);
  box-shadow: 0 8px 20px rgba(150, 21, 210, 0.4);
  opacity: 0;
  transition: left 0.55s cubic-bezier(0.65, 0, 0.35, 1), width 0.55s cubic-bezier(0.65, 0, 0.35, 1),
    opacity 0.3s ease;
}

.tmcnc-sol__tabs.is-ready .tmcnc-sol__tabs-ind {
  opacity: 1;
}

#tmcnc-landing .tmcnc-sol__tab {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-width: 300px;
  margin: 0;
  padding: 14px 34px;
  border: 0;
  border-radius: var(--tmcnc-radius-pill);
  background: transparent;
  box-shadow: none;
  color: var(--tmcnc-primary);
  font-family: var(--tmcnc-font-sans);
  line-height: 1.2;
  text-transform: none;
  letter-spacing: 0;
  cursor: pointer;
  transition: color 0.4s ease;
}

.tmcnc-sol__tab-label {
  font-size: 22px;
  font-weight: 500;
}

.tmcnc-sol__tab-count {
  font-size: 15px;
  font-weight: 400;
  opacity: 0.75;
}

#tmcnc-landing .tmcnc-sol__tab.is-active {
  color: #fff;
}

/* Chưa có JS: tab active tự tô gradient */
#tmcnc-landing:not(.is-js) .tmcnc-sol__tab.is-active {
  background: var(--tmcnc-grad-title-1);
}

#tmcnc-landing .tmcnc-sol__tab:focus-visible {
  outline: 3px solid var(--tmcnc-violet);
  outline-offset: 2px;
}

/* ----- Panel ----- */
.tmcnc-sol__panel {
  display: grid;
  grid-template-columns: var(--tmcnc-sol-nav-w) minmax(0, 1fr);
  gap: var(--tmcnc-sol-gap);
  align-items: start;
}

.tmcnc-sol__panel + .tmcnc-sol__panel {
  margin-top: 60px; /* chỉ khi không JS (2 panel cùng hiện) */
}

#tmcnc-landing.is-js .tmcnc-sol__panel {
  margin-top: 0;
}

#tmcnc-landing.is-js .tmcnc-sol__panel:not(.is-active) {
  display: none;
}

#tmcnc-landing.is-js .tmcnc-sol__panel.is-active {
  animation: tmcnc-sol-panel-in 0.6s ease both;
}

@keyframes tmcnc-sol-panel-in {
  from {
    opacity: 0;
    translate: 0 18px;
  }
  to {
    opacity: 1;
    translate: 0 0;
  }
}

/* ----- Menu dịch vụ (desktop: danh sách dọc trong khung kính) ----- */
.tmcnc-sol__nav {
  position: relative;
  padding: 28px 22px;
  border: 1px solid rgba(255, 255, 255, 0.95);
  border-radius: var(--tmcnc-radius-card);
  background: rgba(255, 255, 255, 0.5);
  box-shadow: 0 14px 40px rgba(113, 13, 172, 0.1), 0 0 10px 3px rgba(255, 255, 255, 0.8) inset;
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}

.tmcnc-sol__navgroup + .tmcnc-sol__navgroup {
  margin-top: 22px;
}

#tmcnc-landing .tmcnc-sol__navlabel {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 10px 6px;
  color: var(--tmcnc-violet);
  font-family: var(--tmcnc-font-sans);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.2;
}

.tmcnc-sol__navlabel::before {
  width: 22px;
  height: 2px;
  border-radius: 2px;
  content: "";
  background: var(--tmcnc-grad-cta);
}

#tmcnc-landing .tmcnc-sol__navlist {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

#tmcnc-landing .tmcnc-sol__navitem {
  margin: 0;
  padding: 0;
  list-style: none;
}

#tmcnc-landing .tmcnc-sol__navbtn {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  margin: 0;
  padding: 15px 18px 15px 20px;
  overflow: hidden;
  border: 1px solid #fff;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.8);
  box-shadow: 0 4px 12px rgba(113, 13, 172, 0.08);
  color: var(--tmcnc-primary);
  font-family: var(--tmcnc-font-sans);
  font-size: 19px;
  font-weight: 400;
  line-height: 1.25;
  letter-spacing: 0;
  text-align: left;
  text-transform: none;
  cursor: pointer;
  translate: 0 0;
  transition: translate 0.4s cubic-bezier(0.22, 0.61, 0.36, 1), color 0.35s ease,
    box-shadow 0.35s ease, background-color 0.3s ease;
}

#tmcnc-landing .tmcnc-sol__navbtn::before {
  position: absolute;
  inset: 0;
  z-index: -1;
  content: "";
  background: var(--tmcnc-grad-title-1);
  opacity: 0;
  transition: opacity 0.4s ease;
}

.tmcnc-sol__navicon {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  opacity: 0.45;
  transition: opacity 0.3s ease, translate 0.3s ease;
}

#tmcnc-landing .tmcnc-sol__navbtn:hover {
  background-color: #fff;
  translate: 4px 0;
}

#tmcnc-landing .tmcnc-sol__navbtn:hover .tmcnc-sol__navicon {
  opacity: 0.9;
  translate: 3px 0;
}

#tmcnc-landing .tmcnc-sol__navbtn.is-active {
  color: #fff;
  box-shadow: 0 8px 20px rgba(150, 21, 210, 0.38);
  translate: 12px 0;
}

#tmcnc-landing .tmcnc-sol__navbtn.is-active::before {
  opacity: 1;
}

#tmcnc-landing .tmcnc-sol__navbtn.is-active .tmcnc-sol__navicon {
  opacity: 1;
  translate: 3px 0;
}

#tmcnc-landing .tmcnc-sol__navbtn:focus-visible {
  outline: 3px solid var(--tmcnc-violet);
  outline-offset: 2px;
}

/* ----- Card dịch vụ ----- */
.tmcnc-sol__stage {
  position: relative;
  min-width: 0;
  touch-action: pan-y;
}

.tmcnc-sol__track {
  position: relative;
  display: grid;
  gap: 40px; /* chỉ khi không JS (card xếp dọc) */
}

.tmcnc-sol__card {
  display: grid;
  grid-template-columns: var(--tmcnc-sol-cols);
  align-items: center;
  min-width: 0;
}

.tmcnc-sol__media {
  position: relative;
  aspect-ratio: var(--tmcnc-sol-media-ratio);
  overflow: hidden;
  border-radius: 32px;
  background: #eadcf7;
  box-shadow: 0 24px 50px rgba(69, 17, 128, 0.18);
}

.tmcnc-sol__media::after {
  position: absolute;
  inset: 0;
  content: "";
  border: 1.5px solid rgba(255, 255, 255, 0.65);
  border-radius: inherit;
  pointer-events: none;
}

#tmcnc-landing .tmcnc-sol__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.tmcnc-sol__media-tag {
  position: absolute;
  top: 20px;
  left: 20px;
  z-index: 1;
  padding: 8px 16px;
  border: 1px solid rgba(255, 255, 255, 0.9);
  border-radius: var(--tmcnc-radius-pill);
  background: rgba(255, 255, 255, 0.78);
  color: var(--tmcnc-primary);
  font-family: var(--tmcnc-font-sans);
  font-size: 15px;
  font-weight: 500;
  line-height: 1;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

.tmcnc-sol__body {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin-left: calc(var(--tmcnc-sol-overlap) * -1);
  padding: 44px 44px 40px;
  border: 1px solid rgba(255, 255, 255, 0.95);
  border-radius: var(--tmcnc-radius-card);
  background: rgba(255, 255, 255, 0.8);
  box-shadow: 0 20px 50px rgba(113, 13, 172, 0.16), 0 0 12px 4px #fff inset;
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}

#tmcnc-landing .tmcnc-sol__eyebrow {
  margin: 0 0 12px;
  color: var(--tmcnc-violet);
  font-family: var(--tmcnc-font-sans);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: 0.02em;
}

#tmcnc-landing .tmcnc-sol__name {
  margin: 0;
  padding: 0;
  font-family: var(--tmcnc-font-sans);
  font-size: var(--tmcnc-sol-name);
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: 0;
  text-transform: none;
}

.tmcnc-sol__name > span {
  display: inline-block;
}

#tmcnc-landing .tmcnc-sol__alias {
  margin: 4px 0 0;
  color: var(--tmcnc-primary);
  font-family: var(--tmcnc-font-serif);
  font-size: 26px;
  font-style: italic;
  font-weight: 400;
  line-height: 1.25;
}

#tmcnc-landing .tmcnc-sol__desc {
  margin-top: 18px;
}

.tmcnc-sol__cta {
  margin-top: 30px;
}

/* ----- Điều hướng ----- */
.tmcnc-sol__controls {
  display: none;
}

/* Không còn nút ‹ › / bộ đếm. Thanh tiến trình chỉ dùng trên mobile (≤1024) */
.tmcnc-sol__controls {
  display: none;
}

.tmcnc-sol__progress {
  display: none;
}

/* ----- Desktop có JS: card xếp chồng + hiệu ứng chuyển ----- */
@media (min-width: 1025px) {
  #tmcnc-landing.is-js .tmcnc-sol__track {
    gap: 0;
  }

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

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

  /* Ảnh mở màn từ trái sang + zoom lùi (clip trên ảnh → giữ đổ bóng khung) */
  #tmcnc-landing.is-js .tmcnc-sol__img {
    clip-path: inset(0 100% 0 0);
    scale: 1.18;
    transition: clip-path 0.9s cubic-bezier(0.65, 0, 0.35, 1),
      scale 1.4s cubic-bezier(0.22, 0.61, 0.36, 1);
  }

  #tmcnc-landing.is-js .tmcnc-sol__card.is-active .tmcnc-sol__img {
    clip-path: inset(0 0 0 0);
    scale: 1;
  }

  /* Khung chữ trượt vào + từng dòng lên lệch nhịp */
  #tmcnc-landing.is-js .tmcnc-sol__body {
    translate: 40px 0;
    transition: translate 0.8s cubic-bezier(0.22, 0.61, 0.36, 1) 0.1s;
  }

  #tmcnc-landing.is-js .tmcnc-sol__card.is-active .tmcnc-sol__body {
    translate: 0 0;
  }

  #tmcnc-landing.is-js .tmcnc-sol__anim {
    opacity: 0;
    translate: 0 22px;
    transition: opacity 0.5s ease, translate 0.6s cubic-bezier(0.22, 0.61, 0.36, 1);
  }

  #tmcnc-landing.is-js .tmcnc-sol__card.is-active .tmcnc-sol__anim {
    opacity: 1;
    translate: 0 0;
    transition-delay: calc(0.25s + var(--d, 0) * 0.09s);
  }
}

/* ----- Laptop ----- */
@media (min-width: 1025px) and (max-width: 1440px) {
  .tmcnc-sol {
    --tmcnc-sol-nav-w: 320px;
    --tmcnc-sol-gap: 36px;
    --tmcnc-sol-overlap: 52px;
    --tmcnc-sol-cols: 1.25fr 1fr;
    --tmcnc-sol-name: 38px;
  }

  #tmcnc-landing .tmcnc-sol__navbtn {
    padding: 13px 16px;
    font-size: 17px;
  }

  .tmcnc-sol__body {
    padding: 34px 32px 32px;
  }

  #tmcnc-landing .tmcnc-sol .tmcnc-sol__desc {
    font-size: 18px;
  }

  #tmcnc-landing .tmcnc-sol__alias {
    font-size: 22px;
  }
}

/* Màn hẹp desktop: ảnh trên, khung chữ đè lên đáy ảnh */
@media (min-width: 1025px) and (max-width: 1199px) {
  .tmcnc-sol {
    --tmcnc-sol-nav-w: 290px;
    --tmcnc-sol-cols: 1fr;
    --tmcnc-sol-media-ratio: 16 / 9;
  }

  .tmcnc-sol__card {
    grid-template-columns: minmax(0, 1fr);
  }

  .tmcnc-sol__body {
    margin: -70px 26px 0;
  }

  #tmcnc-landing.is-js .tmcnc-sol__body {
    translate: 0 30px;
  }
}

/* ----- Tablet + Mobile: chip cuộn ngang + slider vuốt ----- */
@media (max-width: 1024px) {
  .tmcnc-sol {
    --tmcnc-sol-name: 28px;

    padding: 40px 0 44px;
  }

  .tmcnc-sol__container {
    width: calc(100% - 24px);
  }

  #tmcnc-landing .tmcnc-sol__heading {
    margin-bottom: 26px;
  }

  .tmcnc-sol__tabs {
    width: 100%;
    max-width: 560px;
    margin-bottom: 20px;
    padding: 5px;
  }

  .tmcnc-sol__tabs-ind {
    top: 5px;
    bottom: 5px;
  }

  #tmcnc-landing .tmcnc-sol__tab {
    flex: 1 1 0;
    min-width: 0;
    padding: 10px 8px;
  }

  .tmcnc-sol__tab-label {
    font-size: 16px;
  }

  .tmcnc-sol__tab-count {
    font-size: 12.5px;
  }

  .tmcnc-sol__panel {
    display: block;
  }

  /* Chip */
  .tmcnc-sol__nav {
    display: flex;
    flex-wrap: nowrap;
    justify-content: flex-start; /* hàng cuộn ngang: không center */
    gap: 8px;
    margin: 0 -12px 8px;
    padding: 6px 12px 12px;
    overflow-x: auto;
    border: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  .tmcnc-sol__nav::-webkit-scrollbar {
    display: none;
  }

  .tmcnc-sol__navgroup,
  #tmcnc-landing .tmcnc-sol__navlist,
  #tmcnc-landing .tmcnc-sol__navitem {
    display: contents;
  }

  .tmcnc-sol__navgroup + .tmcnc-sol__navgroup {
    margin-top: 0;
  }

  #tmcnc-landing .tmcnc-sol__navlabel,
  .tmcnc-sol__navicon {
    display: none;
  }

  #tmcnc-landing .tmcnc-sol__navbtn {
    flex: 0 0 auto;
    width: auto;
    padding: 10px 18px;
    border-radius: var(--tmcnc-radius-pill);
    font-size: 15px;
    white-space: nowrap;
  }

  #tmcnc-landing .tmcnc-sol__navbtn:hover,
  #tmcnc-landing .tmcnc-sol__navbtn.is-active {
    translate: 0 0;
  }

  /* Slider */
  #tmcnc-landing .tmcnc-sol__track {
    display: flex;
    gap: 14px;
    margin: 0 -12px;
    padding: 6px 12px 26px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding: 0 12px;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  .tmcnc-sol__track::-webkit-scrollbar {
    display: none;
  }

  .tmcnc-sol__card {
    display: flex;
    flex: 0 0 min(86%, 520px);
    flex-direction: column;
    align-items: stretch; /* ghi đè center của desktop – tránh ảnh lazy co về 0 */
    scroll-snap-align: start;
  }

  .tmcnc-sol__media {
    flex: 0 0 auto;
    aspect-ratio: 6 / 5;
    border-radius: 24px;
    box-shadow: 0 14px 30px rgba(69, 17, 128, 0.16);
  }

  .tmcnc-sol__media-tag {
    top: 14px;
    left: 14px;
    padding: 7px 13px;
    background: rgba(255, 255, 255, 0.9);
    font-size: 13px;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }

  /* Trong vùng cuộn ngang, backdrop-filter gây vệt nền → tắt, tăng độ đục bù lại */
  .tmcnc-sol__body {
    flex: 1 1 auto;
    margin: -46px 12px 0;
    padding: 22px 18px 24px;
    border-radius: 22px;
    background: rgba(255, 255, 255, 0.93);
    box-shadow: 0 8px 18px rgba(113, 13, 172, 0.12), 0 0 12px 4px #fff inset;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }

  #tmcnc-landing .tmcnc-sol__eyebrow {
    margin-bottom: 8px;
    font-size: 13.5px;
  }

  #tmcnc-landing .tmcnc-sol__alias {
    font-size: 20px;
  }

  #tmcnc-landing .tmcnc-sol__desc {
    margin-top: 12px;
  }

  .tmcnc-sol__cta {
    margin-top: auto;
    padding-top: 20px;
  }

  .tmcnc-sol__cta .tmcnc-btn {
    --tmcnc-btn-w: 230px;
    --tmcnc-btn-fs: 0.078;
  }

  /* Thanh tiến trình theo vị trí cuộn của slider */
  #tmcnc-landing.is-js .tmcnc-sol__controls {
    display: flex;
    justify-content: center;
  }

  .tmcnc-sol__progress {
    position: relative;
    display: block;
    width: 140px;
    height: 4px;
    overflow: hidden;
    border-radius: 4px;
    background: rgba(113, 13, 172, 0.14);
  }

  .tmcnc-sol__progress-bar {
    position: absolute;
    top: 0;
    left: 0;
    width: 30%;
    height: 100%;
    border-radius: 4px;
    background: var(--tmcnc-grad-cta);
  }
}

@media (max-width: 768px) {
  .tmcnc-sol .tmcnc-heading__sub {
    font-size: 20px;
  }
}

@media (max-width: 400px) {
  .tmcnc-sol {
    --tmcnc-sol-name: 25px;
  }

  .tmcnc-sol__tab-label {
    font-size: 14.5px;
  }
}

/* =========================================================
 * SECTION: HIỆU QUẢ TRƯỚC & SAU
 * Desktop: khung so sánh trước/sau (kéo thanh giữa) trái | 8 ý hiệu quả
 *          (thumbnail + text) cột phải – bấm ý nào, khung đổi ảnh ý đó.
 * ≤1024  : khung so sánh vuông trên, ý hiệu quả thành card cuộn ngang.
 * Khung tự "lắc" thanh so sánh gợi ý kéo khi vào màn hình / đổi ý.
 * ========================================================= */
.tmcnc-result {
  /* Tinh chỉnh nhanh */
  --tmcnc-result-ratio: 5 / 4;     /* tỉ lệ khung so sánh desktop */
  --tmcnc-result-side: 560px;      /* chiều rộng cột danh sách */
  --tmcnc-result-gap: 56px;
  --tmcnc-result-thumb: 64px;
  --tmcnc-result-btn-fs: 18px;

  position: relative;
  padding: 72px 0 76px;
}

.tmcnc-result__bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}

.tmcnc-result__brush {
  position: absolute;
  border-radius: 50%;
  filter: blur(68.2px);
}

.tmcnc-result__brush--violet {
  right: -8%;
  bottom: 6%;
  width: 36vw;
  height: 36vw;
  max-width: 700px;
  max-height: 700px;
  background: radial-gradient(50% 50% at 50% 50%, rgba(208, 107, 255, 0.4) 0%, rgba(208, 107, 255, 0) 100%);
}

.tmcnc-result__container {
  width: min(1440px, calc(100% - 80px));
  margin: 0 auto;
}

#tmcnc-landing .tmcnc-result__heading {
  margin-bottom: 52px;
}

.tmcnc-result__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--tmcnc-result-side);
  gap: var(--tmcnc-result-gap);
  align-items: start;
}

/* ----- Khung so sánh ----- */
#tmcnc-landing .tmcnc-result__viewer {
  min-width: 0;
  margin: 0;
}

.tmcnc-result__frame {
  --tmcnc-result-pos: 50%;

  position: relative;
  aspect-ratio: var(--tmcnc-result-ratio);
  overflow: hidden;
  border: 4px solid rgba(255, 255, 255, 0.9);
  border-radius: 32px;
  background: #eadcf7;
  box-shadow: 0 24px 54px rgba(69, 17, 128, 0.2);
  cursor: ew-resize;
  touch-action: pan-y; /* cuộn dọc vẫn mượt, kéo ngang = so sánh */
  user-select: none;
  -webkit-user-select: none;
}

#tmcnc-landing .tmcnc-result__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
  transition: opacity 0.35s ease, scale 0.6s cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* Ảnh "sau" nằm trên, chỉ hiện phần bên phải thanh kéo */
#tmcnc-landing .tmcnc-result__img--after {
  clip-path: inset(0 0 0 var(--tmcnc-result-pos));
}

.tmcnc-result__frame.is-swap .tmcnc-result__img {
  opacity: 0;
  scale: 1.05;
}

.tmcnc-result__label {
  position: absolute;
  top: 20px;
  z-index: 2;
  padding: 8px 18px;
  border: 1px solid rgba(255, 255, 255, 0.9);
  border-radius: var(--tmcnc-radius-pill);
  font-family: var(--tmcnc-font-sans);
  font-size: 16px;
  font-weight: 500;
  line-height: 1;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.tmcnc-result__label--before {
  left: 20px;
  background: rgba(255, 255, 255, 0.85);
  color: var(--tmcnc-primary);
}

.tmcnc-result__label--after {
  right: 20px;
  background: var(--tmcnc-grad-title-1);
  color: #fff;
  box-shadow: 0 6px 14px rgba(150, 21, 210, 0.35);
}

/* Nhãn mờ đi khi thanh kéo che gần hết một bên */
.tmcnc-result__frame.is-hide-before .tmcnc-result__label--before,
.tmcnc-result__frame.is-hide-after .tmcnc-result__label--after {
  opacity: 0;
}

.tmcnc-result__handle {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--tmcnc-result-pos);
  z-index: 3;
  width: 0;
  outline: none;
}

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

.tmcnc-result__knob {
  position: absolute;
  top: 50%;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 58px;
  height: 58px;
  border: 3px solid #fff;
  border-radius: 50%;
  background: var(--tmcnc-grad-cta);
  box-shadow: 0 8px 22px rgba(113, 13, 172, 0.45);
  color: #fff;
  transform: translate(-50%, -50%);
  transition: scale 0.25s ease;
}

.tmcnc-result__knob::after {
  position: absolute;
  inset: -3px;
  content: "";
  border: 2px solid rgba(255, 255, 255, 0.85);
  border-radius: 50%;
  animation: tmcnc-issues-ping 2s ease-out infinite;
}

.tmcnc-result__knob svg {
  width: 26px;
  height: 26px;
}

.tmcnc-result__frame:hover .tmcnc-result__knob,
.tmcnc-result__frame.is-dragging .tmcnc-result__knob {
  scale: 1.1;
}

.tmcnc-result__handle:focus-visible .tmcnc-result__knob {
  outline: 3px solid var(--tmcnc-violet);
  outline-offset: 3px;
}

.tmcnc-result__hint {
  position: absolute;
  top: calc(50% + 42px);
  left: 0;
  padding: 6px 12px;
  border-radius: var(--tmcnc-radius-pill);
  background: rgba(69, 17, 128, 0.72);
  color: #fff;
  font-family: var(--tmcnc-font-sans);
  font-size: 13px;
  font-weight: 400;
  line-height: 1;
  white-space: nowrap;
  transform: translateX(-50%);
  transition: opacity 0.4s ease;
  pointer-events: none;
}

.tmcnc-result__frame.is-touched .tmcnc-result__hint {
  opacity: 0;
}

/* Chú thích dưới khung */
.tmcnc-result__caption {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 18px;
  padding: 18px 26px;
  border: 1px solid rgba(255, 255, 255, 0.95);
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.78);
  box-shadow: 0 10px 26px rgba(113, 13, 172, 0.1), 0 0 10px 3px #fff inset;
}

.tmcnc-result__caption-count {
  flex: 0 0 auto;
  padding: 6px 12px;
  border-radius: var(--tmcnc-radius-pill);
  background: var(--tmcnc-grad-title-1);
  color: #fff;
  font-family: var(--tmcnc-font-sans);
  font-size: 15px;
  font-weight: 500;
  line-height: 1;
}

.tmcnc-result__caption-text {
  min-height: 2.6em;
  display: flex;
  align-items: center;
  color: var(--tmcnc-primary);
  font-family: var(--tmcnc-font-sans);
  font-size: 20px;
  font-weight: 500;
  line-height: 1.3;
  transition: opacity 0.3s ease, translate 0.4s ease;
}

.tmcnc-result__caption-text.is-swap {
  opacity: 0;
  translate: 0 8px;
}

/* ----- Danh sách ý hiệu quả ----- */
.tmcnc-result__side {
  min-width: 0;
}

#tmcnc-landing .tmcnc-result__list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

#tmcnc-landing .tmcnc-result__item {
  margin: 0;
  padding: 0;
  list-style: none;
}

#tmcnc-landing .tmcnc-result__btn {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  gap: 16px;
  width: 100%;
  margin: 0;
  padding: 8px 20px 8px 8px;
  overflow: hidden;
  border: 1px solid #fff;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.8);
  box-shadow: 0 4px 12px rgba(113, 13, 172, 0.08);
  color: var(--tmcnc-primary);
  font-family: var(--tmcnc-font-sans);
  font-size: var(--tmcnc-result-btn-fs);
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: 0;
  text-align: left;
  text-transform: none;
  cursor: pointer;
  translate: 0 0;
  transition: translate 0.4s cubic-bezier(0.22, 0.61, 0.36, 1), color 0.35s ease,
    box-shadow 0.35s ease, background-color 0.3s ease;
}

#tmcnc-landing .tmcnc-result__btn::before {
  position: absolute;
  inset: 0;
  z-index: -1;
  content: "";
  background: var(--tmcnc-grad-title-1);
  opacity: 0;
  transition: opacity 0.4s ease;
}

.tmcnc-result__thumb {
  position: relative;
  flex: 0 0 auto;
  width: var(--tmcnc-result-thumb);
  height: var(--tmcnc-result-thumb);
  overflow: hidden;
  border: 2px solid #fff;
  border-radius: 50%;
  background: #eadcf7;
  box-shadow: 0 3px 8px rgba(113, 13, 172, 0.18);
}

#tmcnc-landing .tmcnc-result__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.tmcnc-result__btn-text {
  position: relative;
  z-index: 1;
}

#tmcnc-landing .tmcnc-result__btn:hover {
  background-color: #fff;
  translate: -4px 0;
}

#tmcnc-landing .tmcnc-result__btn.is-active {
  color: #fff;
  box-shadow: 0 8px 20px rgba(150, 21, 210, 0.38);
  translate: -12px 0; /* trượt về phía khung ảnh */
}

#tmcnc-landing .tmcnc-result__btn.is-active::before {
  opacity: 1;
}

#tmcnc-landing .tmcnc-result__btn:focus-visible {
  outline: 3px solid var(--tmcnc-violet);
  outline-offset: 2px;
}

.tmcnc-result__progress {
  display: none;
}

/* ----- CTA + ghi chú ----- */
.tmcnc-result__footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  margin-top: 48px;
}

#tmcnc-landing .tmcnc-result__note {
  max-width: none;
  margin: 0;
  color: var(--tmcnc-primary);
  font-family: var(--tmcnc-font-sans);
  font-size: clamp(12px, 1.15vw, 15px);
  font-style: italic;
  font-weight: 400;
  line-height: 1.4;
  text-align: center;
  white-space: nowrap; /* desktop: 1 hàng, không rớt chữ */
  opacity: 0.75;
}

/* ----- Laptop ----- */
@media (min-width: 1025px) and (max-width: 1440px) {
  .tmcnc-result {
    --tmcnc-result-side: 440px;
    --tmcnc-result-gap: 40px;
    --tmcnc-result-thumb: 54px;
    --tmcnc-result-btn-fs: 16px;
  }

  #tmcnc-landing .tmcnc-result__list {
    gap: 8px;
  }

  .tmcnc-result__caption-text {
    font-size: 18px;
  }
}

@media (min-width: 1025px) and (max-width: 1199px) {
  .tmcnc-result {
    --tmcnc-result-side: 380px;
    --tmcnc-result-ratio: 1 / 1;
    --tmcnc-result-thumb: 48px;
    --tmcnc-result-btn-fs: 15px;
  }
}

/* ----- Tablet + Mobile ----- */
@media (max-width: 1024px) {
  .tmcnc-result {
    --tmcnc-result-ratio: 1 / 1;
    --tmcnc-result-thumb: 52px;
    --tmcnc-result-btn-fs: 15px;

    padding: 40px 0 44px;
  }

  .tmcnc-result__container {
    width: calc(100% - 24px);
  }

  #tmcnc-landing .tmcnc-result__heading {
    margin-bottom: 28px;
  }

  .tmcnc-result__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
  }

  #tmcnc-landing .tmcnc-result__viewer {
    width: 100%;
    max-width: 640px;
    margin: 0 auto;
  }

  .tmcnc-result__frame {
    border-width: 3px;
    border-radius: 24px;
  }

  .tmcnc-result__label {
    top: 14px;
    padding: 7px 14px;
    font-size: 14px;
  }

  .tmcnc-result__label--before {
    left: 14px;
  }

  .tmcnc-result__label--after {
    right: 14px;
  }

  .tmcnc-result__knob {
    width: 48px;
    height: 48px;
  }

  .tmcnc-result__knob svg {
    width: 22px;
    height: 22px;
  }

  .tmcnc-result__caption {
    gap: 12px;
    margin-top: 12px;
    padding: 12px 16px;
    border-radius: 18px;
  }

  .tmcnc-result__caption-count {
    font-size: 13px;
  }

  .tmcnc-result__caption-text {
    font-size: 16px;
  }

  /* Card cuộn ngang */
  /* padding dọc đủ rộng để bóng card không bị vùng cuộn cắt thành vệt */
  #tmcnc-landing .tmcnc-result__list {
    flex-direction: row;
    gap: 10px;
    margin: -8px -12px -6px;
    padding: 14px 12px 22px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding: 0 12px;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  #tmcnc-landing .tmcnc-result__list::-webkit-scrollbar {
    display: none;
  }

  #tmcnc-landing .tmcnc-result__item {
    display: flex;
    flex: 0 0 min(76%, 300px);
    scroll-snap-align: start;
  }

  #tmcnc-landing .tmcnc-result__btn {
    padding: 8px 14px 8px 8px;
    border-radius: 18px;
  }

  #tmcnc-landing .tmcnc-result__btn:hover,
  #tmcnc-landing .tmcnc-result__btn.is-active {
    translate: 0 0;
  }

  #tmcnc-landing .tmcnc-result__btn.is-active {
    box-shadow: 0 6px 12px rgba(150, 21, 210, 0.3);
  }

  .tmcnc-result__progress {
    position: relative;
    display: block;
    width: 140px;
    height: 4px;
    margin: 4px auto 0;
    overflow: hidden;
    border-radius: 4px;
    background: rgba(113, 13, 172, 0.14);
  }

  .tmcnc-result__progress-bar {
    position: absolute;
    top: 0;
    left: 0;
    width: 30%;
    height: 100%;
    border-radius: 4px;
    background: var(--tmcnc-grad-cta);
  }

  .tmcnc-result__footer {
    gap: 12px;
    margin-top: 28px;
  }

  .tmcnc-result__footer .tmcnc-btn {
    --tmcnc-btn-w: 240px;
    --tmcnc-btn-fs: 0.078;
  }

  #tmcnc-landing .tmcnc-result__note {
    max-width: 640px;
    font-size: 13px;
    white-space: normal; /* tablet / mobile: cho xuống dòng, cân đều 2 dòng */
    text-wrap: balance;
  }
}

/* =========================================================
 * SECTION: CÔNG NGHỆ MÁY MÓC & HOẠT CHẤT
 * Gọn trong ~1 màn hình:
 *   Desktop (≥1025): 2 khung kính cạnh nhau – Máy móc | Hoạt chất, mỗi khung 3 x 2.
 *   Tablet (769–1024): 2 khung xếp dọc, mỗi khung 6 cột 1 hàng.
 *   Mobile: 2 khung xếp dọc, mỗi khung 3 x 2.
 * Card vuông: PNG sản phẩm lơ lửng trên quầng sáng, nhãn tên HTML đè đáy ảnh.
 * Hover: nghiêng 3D theo chuột + nhấc card + phóng ảnh + nhãn đổi gradient.
 * ========================================================= */
.tmcnc-tech {
  /* Tinh chỉnh nhanh */
  --tmcnc-tech-kw: 72px;          /* cỡ chữ "Sức mạnh" (nhỏ hơn chuẩn để gọn 1 màn) */
  --tmcnc-tech-gap: 16px;         /* khoảng cách giữa các card */
  --tmcnc-tech-name-fs: 17px;     /* cỡ chữ nhãn tên */
  --tmcnc-tech-img-pad: 9% 12% 24%; /* vùng đệm quanh PNG: trên | ngang | dưới (chừa nhãn) */
  --tmcnc-tech-ratio: 1 / 0.92;   /* tỉ lệ card MÁY MÓC (rộng / cao) – giảm số sau dấu / để card CAO hơn */
  --tmcnc-tech-machine-pad: 3% 4% 20%; /* đệm quanh ảnh MÁY (nhỏ = máy to). Trên | ngang | dưới */
  --tmcnc-tech-split: 1.7fr 1fr;  /* tỉ lệ cột Máy móc : Hoạt chất (desktop) */

  position: relative;
  padding: 48px 0 54px;
}

.tmcnc-tech__bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}

.tmcnc-tech__brush {
  position: absolute;
  border-radius: 50%;
  filter: blur(68.2px);
}

.tmcnc-tech__brush--violet {
  top: 30%;
  left: 20%;
  width: 40vw;
  height: 40vw;
  max-width: 780px;
  max-height: 780px;
  background: radial-gradient(50% 50% at 50% 50%, rgba(208, 107, 255, 0.36) 0%, rgba(208, 107, 255, 0) 100%);
}

.tmcnc-tech__container {
  width: min(1620px, calc(100% - 80px));
  margin: 0 auto;
}

/* ----- Tiêu đề + mô tả ----- */
.tmcnc-tech__head {
  margin-bottom: 26px;
  text-align: center;
}

#tmcnc-landing .tmcnc-tech__heading {
  margin-bottom: 10px;
}

.tmcnc-tech .tmcnc-heading__keyword {
  font-size: var(--tmcnc-tech-kw);
}

#tmcnc-landing .tmcnc-tech__desc {
  max-width: 860px;
  margin: 0 auto;
  text-align: center;
}

/* ----- 2 khung nhóm ----- */
.tmcnc-tech__groups {
  display: grid;
  grid-template-columns: var(--tmcnc-tech-split);
  gap: 28px;
  align-items: stretch;
}

.tmcnc-tech__group {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 20px 22px 22px;
  border: 1px solid rgba(255, 255, 255, 0.95);
  border-radius: 36px;
  background: rgba(255, 255, 255, 0.45);
  box-shadow: 0 18px 44px rgba(113, 13, 172, 0.1), 0 0 12px 4px rgba(255, 255, 255, 0.8) inset;
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}

.tmcnc-tech__group-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
  padding: 0 4px;
}

#tmcnc-landing .tmcnc-tech__group-title {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0;
  padding: 0;
  color: var(--tmcnc-primary);
  font-family: var(--tmcnc-font-sans);
  font-size: 26px;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: 0;
  text-transform: none;
}

.tmcnc-tech__group-title::before {
  width: 30px;
  height: 3px;
  border-radius: 3px;
  content: "";
  background: var(--tmcnc-grad-cta);
}

.tmcnc-tech__group-count {
  flex: 0 0 auto;
  padding: 7px 14px;
  border-radius: var(--tmcnc-radius-pill);
  background: var(--tmcnc-grad-title-1);
  color: #fff;
  font-family: var(--tmcnc-font-sans);
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
  box-shadow: 0 5px 12px rgba(150, 21, 210, 0.3);
}

/* ----- Lưới card ----- */
#tmcnc-landing .tmcnc-tech__grid {
  display: grid;
  flex: 1 1 auto;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: repeat(2, minmax(0, 1fr));
  gap: var(--tmcnc-tech-gap);
  margin: 0;
  padding: 0;
  list-style: none;
}

#tmcnc-landing .tmcnc-tech__item {
  min-width: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

#tmcnc-landing .tmcnc-tech__card {
  position: relative;
  aspect-ratio: var(--tmcnc-tech-ratio);
  margin: 0;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.95);
  border-radius: 26px;
  background: radial-gradient(90% 80% at 50% 38%, #fff 0%, #faf5ff 45%, #eee1fb 100%);
  box-shadow: 0 10px 24px rgba(113, 13, 172, 0.12);
  transform: perspective(700px) rotateX(var(--tmcnc-rx, 0deg)) rotateY(var(--tmcnc-ry, 0deg));
  translate: 0 0;
  transition: translate 0.4s cubic-bezier(0.22, 0.61, 0.36, 1), box-shadow 0.4s ease,
    transform 0.25s ease-out;
}

/* Quầng sáng sau sản phẩm */
.tmcnc-tech__glow {
  position: absolute;
  top: 12%;
  left: 50%;
  width: 70%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(50% 50% at 50% 50%, rgba(247, 66, 137, 0.22) 0%, rgba(172, 89, 255, 0.16) 45%, rgba(172, 89, 255, 0) 72%);
  transform: translateX(-50%);
  opacity: 0.7;
  transition: opacity 0.4s ease, scale 0.5s ease;
  pointer-events: none;
}

/* Bóng đổ dưới chân sản phẩm */
#tmcnc-landing .tmcnc-tech__card::after {
  position: absolute;
  bottom: 22%;
  left: 50%;
  width: 46%;
  height: 7%;
  border-radius: 50%;
  content: "";
  background: radial-gradient(50% 50% at 50% 50%, rgba(69, 17, 128, 0.22) 0%, rgba(69, 17, 128, 0) 100%);
  transform: translateX(-50%);
  transition: opacity 0.4s ease, scale 0.4s ease;
  pointer-events: none;
}

#tmcnc-landing .tmcnc-tech__img {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  padding: var(--tmcnc-tech-img-pad);
  object-fit: contain;
  filter: drop-shadow(0 10px 12px rgba(69, 17, 128, 0.16));
  animation: tmcnc-tech-float 5s ease-in-out infinite;
  animation-delay: calc(var(--k, 0) * -0.8s);
  transition: scale 0.5s cubic-bezier(0.22, 0.61, 0.36, 1);
}

#tmcnc-landing .tmcnc-tech__name {
  position: absolute;
  right: 10px;
  bottom: 12px;
  left: 10px;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  margin: 0;
  padding: 6px 10px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.95);
  border-radius: var(--tmcnc-radius-pill);
  background: rgba(255, 255, 255, 0.88);
  box-shadow: 0 4px 12px rgba(113, 13, 172, 0.12);
  color: var(--tmcnc-primary);
  font-family: var(--tmcnc-font-sans);
  font-size: var(--tmcnc-tech-name-fs);
  font-weight: 500;
  line-height: 1.15;
  text-align: center;
  isolation: isolate;
  transition: color 0.35s ease, box-shadow 0.35s ease;
}

#tmcnc-landing .tmcnc-tech__name::before {
  position: absolute;
  inset: 0;
  z-index: -1;
  content: "";
  background: var(--tmcnc-grad-title-1);
  opacity: 0;
  transition: opacity 0.35s ease;
}

/* ----- Biến thể: MÁY MÓC = card to, ảnh máy phóng lớn; HOẠT CHẤT = card cao vừa khung ----- */
#tmcnc-landing .tmcnc-tech__group--machine .tmcnc-tech__card {
  aspect-ratio: var(--tmcnc-tech-ratio);
}

#tmcnc-landing .tmcnc-tech__group--machine .tmcnc-tech__img {
  padding: var(--tmcnc-tech-machine-pad);
  filter: drop-shadow(0 14px 16px rgba(69, 17, 128, 0.2));
}

#tmcnc-landing .tmcnc-tech__group--machine .tmcnc-tech__glow {
  top: 6%;
  width: 82%;
}

#tmcnc-landing .tmcnc-tech__group--machine .tmcnc-tech__name {
  font-size: calc(var(--tmcnc-tech-name-fs) + 2px);
}

#tmcnc-landing .tmcnc-tech__group--active .tmcnc-tech__item,
#tmcnc-landing .tmcnc-tech__group--active .tmcnc-tech__card {
  height: 100%;
}

#tmcnc-landing .tmcnc-tech__group--active .tmcnc-tech__card {
  aspect-ratio: auto;
}

#tmcnc-landing .tmcnc-tech__group--active .tmcnc-tech__name {
  padding-right: 6px;
  padding-left: 6px;
  font-size: calc(var(--tmcnc-tech-name-fs) - 1px);
}

/* Hover (chỉ thiết bị có chuột) */
@media (hover: hover) {
  #tmcnc-landing .tmcnc-tech__card:hover {
    translate: 0 -8px;
    box-shadow: 0 22px 40px rgba(113, 13, 172, 0.22);
  }

  #tmcnc-landing .tmcnc-tech__card:hover .tmcnc-tech__img {
    scale: 1.07;
  }

  #tmcnc-landing .tmcnc-tech__card:hover .tmcnc-tech__glow {
    opacity: 1;
    scale: 1.25;
  }

  #tmcnc-landing .tmcnc-tech__card:hover::after {
    opacity: 0.6;
    scale: 1.15;
  }

  #tmcnc-landing .tmcnc-tech__card:hover .tmcnc-tech__name {
    color: #fff;
    box-shadow: 0 6px 16px rgba(150, 21, 210, 0.38);
  }

  #tmcnc-landing .tmcnc-tech__card:hover .tmcnc-tech__name::before {
    opacity: 1;
  }
}

@keyframes tmcnc-tech-float {
  0%,
  100% {
    translate: 0 0;
  }
  50% {
    translate: 0 -6px;
  }
}

/* ----- Laptop ----- */
@media (min-width: 1025px) and (max-width: 1440px) {
  .tmcnc-tech {
    --tmcnc-tech-kw: 64px;
    --tmcnc-tech-gap: 12px;
    --tmcnc-tech-name-fs: 15px;
    --tmcnc-tech-ratio: 1 / 0.9;
    --tmcnc-tech-img-pad: 7% 14% 26%;
    --tmcnc-tech-machine-pad: 2% 3% 19%;
    --tmcnc-tech-split: 1.6fr 1fr;

    padding: 40px 0 46px;
  }

  .tmcnc-tech__groups {
    gap: 20px;
  }

  .tmcnc-tech__group {
    padding: 20px 20px 22px;
    border-radius: 30px;
  }

  #tmcnc-landing .tmcnc-tech__group-title {
    font-size: 22px;
  }

  #tmcnc-landing .tmcnc-tech__name {
    right: 8px;
    bottom: 8px;
    left: 8px;
    min-height: 34px;
  }
}

@media (min-width: 1025px) and (max-width: 1199px) {
  .tmcnc-tech {
    --tmcnc-tech-name-fs: 13.5px;
    --tmcnc-tech-split: 1.45fr 1fr;
  }

  #tmcnc-landing .tmcnc-tech__card {
    border-radius: 20px;
  }
}

/* ----- Tablet + Mobile: 2 khung xếp dọc ----- */
@media (max-width: 1024px) {
  .tmcnc-tech {
    --tmcnc-tech-kw: 64px;
    --tmcnc-tech-gap: 10px;
    --tmcnc-tech-name-fs: 14px;

    padding: 40px 0 44px;
  }

  .tmcnc-tech__container {
    width: calc(100% - 24px);
  }

  .tmcnc-tech__head {
    margin-bottom: 24px;
  }

  #tmcnc-landing .tmcnc-tech__heading {
    margin-bottom: 12px;
  }

  .tmcnc-tech__groups {
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
  }

  #tmcnc-landing .tmcnc-tech__grid {
    grid-template-rows: none;
  }

  #tmcnc-landing .tmcnc-tech__group--active .tmcnc-tech__item,
  #tmcnc-landing .tmcnc-tech__group--active .tmcnc-tech__card {
    height: auto;
  }

  #tmcnc-landing .tmcnc-tech__group--active .tmcnc-tech__card {
    aspect-ratio: var(--tmcnc-tech-ratio);
  }

  .tmcnc-tech__group {
    padding: 16px 14px 16px;
    border-radius: 26px;
  }

  .tmcnc-tech__group-head {
    margin-bottom: 12px;
  }

  #tmcnc-landing .tmcnc-tech__group-title {
    gap: 10px;
    font-size: 19px;
  }

  .tmcnc-tech__group-title::before {
    width: 22px;
  }

  .tmcnc-tech__group-count {
    padding: 6px 11px;
    font-size: 12.5px;
  }

  #tmcnc-landing .tmcnc-tech__card {
    border-radius: 20px;
  }

  #tmcnc-landing .tmcnc-tech__name {
    right: 6px;
    bottom: 7px;
    left: 6px;
    min-height: 30px;
    padding: 5px 6px;
  }
}

/* Tablet: 6 card 1 hàng */
@media (min-width: 769px) and (max-width: 1024px) {
  #tmcnc-landing .tmcnc-tech__grid {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
}

@media (max-width: 768px) {
  .tmcnc-tech {
    --tmcnc-tech-name-fs: 12.5px;
    --tmcnc-tech-gap: 8px;
    --tmcnc-tech-img-pad: 8% 10% 27%;
    --tmcnc-tech-machine-pad: 4% 5% 25%;
    --tmcnc-tech-ratio: 4 / 5;      /* mobile: card đứng cho máy cao hiện to */
  }

  #tmcnc-landing .tmcnc-tech__group--machine .tmcnc-tech__name {
    font-size: var(--tmcnc-tech-name-fs);
  }

  #tmcnc-landing .tmcnc-tech__group--active .tmcnc-tech__card {
    aspect-ratio: 1 / 1;
  }

  #tmcnc-landing .tmcnc-tech__card {
    border-radius: 18px;
  }

  #tmcnc-landing .tmcnc-tech__name {
    right: 5px;
    bottom: 5px;
    left: 5px;
    min-height: 0;
    padding: 5px 4px;
    border-radius: 12px;
  }
}

@media (max-width: 400px) {
  .tmcnc-tech {
    --tmcnc-tech-kw: 56px;
    --tmcnc-tech-name-fs: 11.5px;
  }
}

/* =========================================================
 * SECTION: ĐỘI NGŨ BÁC SĨ – CHUYÊN GIA
 * Desktop/tablet (≥769): 3 thẻ chọn bác sĩ (avatar + tên + KN) → "sân khấu" 1 bác sĩ:
 *   ảnh lớn trên vòm kính gân + huy hiệu số năm KN chạy số | thẻ kính thông tin lấn
 *   sang ảnh: vai trò, tên gradient, điểm nhấn, dải chứng chỉ (bấm → lightbox).
 *   Đổi bác sĩ = ảnh trượt vào, thẻ thông tin trượt + từng dòng lên lệch nhịp.
 * Mobile (≤768): 1 bác sĩ vừa khít viewport, 88% chiều rộng – lộ mép bác sĩ kế;
 *   vuốt ngang (scroll-snap) hoặc bấm avatar để đổi; thanh tiến trình + gợi ý vuốt.
 * Không JS: các bác sĩ xếp dọc, đủ nội dung.
 * ========================================================= */
.tmcnc-doc {
  /* Tinh chỉnh nhanh */
  --tmcnc-doc-photo-w: 580px;      /* chiều rộng khung ảnh bác sĩ (desktop) */
  --tmcnc-doc-overlap: 20px;       /* thẻ thông tin lấn sang ảnh (nhỏ = thẻ nhích sang phải, nhường chỗ cho ảnh) */
  --tmcnc-doc-badge: var(--tmcnc-primary); /* màu solid huy hiệu số năm kinh nghiệm */
  --tmcnc-doc-name: 48px;          /* cỡ chữ tên bác sĩ */
  --tmcnc-doc-point-fs: 19px;      /* cỡ chữ điểm nhấn */
  --tmcnc-doc-cert-w: 176px;       /* chiều rộng thumbnail chứng chỉ */
  --tmcnc-doc-slide-h: 640px;      /* chiều cao 1 bác sĩ (mobile) */
  --tmcnc-doc-img-scale: 108%;     /* độ phóng ảnh bác sĩ so với khung (desktop) */

  position: relative;
  padding: 72px 0 76px;
}

.tmcnc-doc__bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}

.tmcnc-doc__brush {
  position: absolute;
  border-radius: 50%;
  filter: blur(68.2px);
}

.tmcnc-doc__brush--violet {
  right: -6%;
  bottom: 8%;
  width: 40vw;
  height: 40vw;
  max-width: 780px;
  max-height: 780px;
  background: radial-gradient(50% 50% at 50% 50%, rgba(208, 107, 255, 0.4) 0%, rgba(208, 107, 255, 0) 100%);
}

.tmcnc-doc__container {
  width: min(1440px, calc(100% - 80px));
  margin: 0 auto;
}

#tmcnc-landing .tmcnc-doc__heading {
  margin-bottom: 44px;
}

/* ----- Thẻ chọn bác sĩ ----- */
.tmcnc-doc__tabs {
  display: flex;
  justify-content: center;
  gap: 16px;
  margin-bottom: 64px;
}

#tmcnc-landing:not(.is-js) .tmcnc-doc__tabs {
  display: none;
}

#tmcnc-landing .tmcnc-doc__tab {
  position: relative;
  isolation: isolate;
  display: flex;
  flex: 0 1 380px;
  align-items: center;
  gap: 14px;
  min-width: 0;
  margin: 0;
  padding: 10px 26px 10px 10px;
  overflow: hidden;
  border: 1px solid #fff;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.82);
  box-shadow: 0 8px 22px rgba(113, 13, 172, 0.1), 0 0 10px 3px #fff inset;
  color: var(--tmcnc-primary);
  font-family: var(--tmcnc-font-sans);
  letter-spacing: 0;
  text-align: left;
  text-transform: none;
  cursor: pointer;
  translate: 0 0;
  transition: translate 0.4s cubic-bezier(0.22, 0.61, 0.36, 1), color 0.35s ease,
    box-shadow 0.35s ease;
}

#tmcnc-landing .tmcnc-doc__tab::before {
  position: absolute;
  inset: 0;
  z-index: -1;
  content: "";
  background: var(--tmcnc-grad-title-1);
  opacity: 0;
  transition: opacity 0.4s ease;
}

#tmcnc-landing .tmcnc-doc__tab:hover {
  translate: 0 -3px;
  box-shadow: 0 14px 28px rgba(113, 13, 172, 0.2), 0 0 10px 3px #fff inset;
}

#tmcnc-landing .tmcnc-doc__tab.is-active {
  color: #fff;
  box-shadow: 0 12px 28px rgba(150, 21, 210, 0.42);
}

#tmcnc-landing .tmcnc-doc__tab.is-active::before {
  opacity: 1;
}

#tmcnc-landing .tmcnc-doc__tab:focus-visible {
  outline: 3px solid var(--tmcnc-violet);
  outline-offset: 3px;
}

.tmcnc-doc__tab-avatar {
  flex: 0 0 auto;
  width: 64px;
  height: 64px;
  overflow: hidden;
  border: 2px solid #fff;
  border-radius: 50%;
  background: linear-gradient(180deg, #f7ecff, #f0dcfb);
  box-shadow: 0 3px 10px rgba(113, 13, 172, 0.25);
}

#tmcnc-landing .tmcnc-doc__tab-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 8%;
}

.tmcnc-doc__tab-text {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.tmcnc-doc__tab-name {
  overflow: hidden;
  font-size: 19px;
  font-weight: 500;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tmcnc-doc__tab-meta {
  overflow: hidden;
  font-size: 14.5px;
  font-weight: 400;
  line-height: 1.2;
  opacity: 0.8;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ----- Sân khấu ----- */
.tmcnc-doc__viewport {
  position: relative;
}

.tmcnc-doc__track {
  display: grid;
  gap: 90px; /* chỉ khi không JS: các bác sĩ xếp dọc */
}

#tmcnc-landing.is-js .tmcnc-doc__track {
  gap: 0;
}

.tmcnc-doc__slide {
  display: grid;
  grid-template-columns: var(--tmcnc-doc-photo-w) minmax(0, 1fr);
  align-items: center;
  width: min(100%, 1340px);
  min-width: 0;
  margin: 0 auto;
}

/* Desktop: các bác sĩ xếp chồng 1 ô, chỉ bác sĩ active hiện */
@media (min-width: 769px) {
  #tmcnc-landing.is-js .tmcnc-doc__slide {
    grid-area: 1 / 1;
    visibility: hidden;
    pointer-events: none;
    transition: visibility 0s linear 0.6s;
  }

  #tmcnc-landing.is-js .tmcnc-doc__slide.is-active {
    visibility: visible;
    pointer-events: auto;
    transition: visibility 0s;
  }
}

/* Ảnh + vòm kính gân */
.tmcnc-doc__photo {
  position: relative;
  z-index: 1;
  aspect-ratio: 5 / 6.3;
  width: 100%;
}

#tmcnc-landing .tmcnc-doc__img {
  position: absolute;
  bottom: 0;
  left: 50%;
  z-index: 1;
  width: var(--tmcnc-doc-img-scale);
  max-width: none;
  height: auto;
  filter: drop-shadow(0 18px 20px rgba(69, 17, 128, 0.22));
  transform: translateX(-50%);
}

/* Huy hiệu số năm kinh nghiệm */
.tmcnc-doc__exp {
  position: absolute;
  top: 44px;
  left: -46px;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 158px;
  height: 158px;
  border: 3px solid #fff;
  border-radius: 50%;
  background: var(--tmcnc-doc-badge, var(--tmcnc-primary));
  box-shadow: 0 16px 34px rgba(113, 13, 172, 0.4);
  color: #fff;
  text-align: center;
}

.tmcnc-doc__exp-ring {
  position: absolute;
  inset: -12px;
  border: 1.5px dashed rgba(113, 13, 172, 0.55);
  border-radius: 50%;
  animation: tmcnc-issues-spin 24s linear infinite;
}

.tmcnc-doc__exp-num {
  font-family: var(--tmcnc-font-serif);
  font-size: 64px;
  font-style: italic;
  font-weight: 400;
  line-height: 0.95;
  text-shadow: 0 2px 8px rgba(69, 17, 128, 0.35);
}

.tmcnc-doc__exp-label {
  margin-top: 4px;
  max-width: 90px;
  font-family: var(--tmcnc-font-sans);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.15;
}

/* Thẻ thông tin */
.tmcnc-doc__info {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin-left: calc(var(--tmcnc-doc-overlap) * -1);
  padding: 46px 48px 40px calc(var(--tmcnc-doc-overlap) + 44px);
  border: 1px solid rgba(255, 255, 255, 0.95);
  border-radius: 40px;
  background: rgba(255, 255, 255, 0.84);
  box-shadow: 0 26px 60px rgba(113, 13, 172, 0.18), 0 0 14px 4px #fff inset;
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}

#tmcnc-landing .tmcnc-doc__role {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 10px;
  color: var(--tmcnc-violet);
  font-family: var(--tmcnc-font-sans);
  font-size: 19px;
  font-weight: 500;
  line-height: 1.2;
}

.tmcnc-doc__role::before {
  width: 34px;
  height: 3px;
  border-radius: 3px;
  content: "";
  background: var(--tmcnc-grad-cta);
}

#tmcnc-landing .tmcnc-doc__name {
  margin: 0;
  padding: 0;
  font-family: var(--tmcnc-font-sans);
  font-size: var(--tmcnc-doc-name);
  font-weight: 500;
  line-height: 1.12;
  letter-spacing: 0;
  text-transform: none;
}

.tmcnc-doc__name > span {
  display: inline-block;
}

#tmcnc-landing .tmcnc-doc__points {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin: 26px 0 0;
  padding: 0;
  list-style: none;
}

#tmcnc-landing .tmcnc-doc__point {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
  color: var(--tmcnc-text-color);
  font-family: var(--tmcnc-font-sans);
  font-size: var(--tmcnc-doc-point-fs);
  font-weight: 400;
  line-height: 1.35;
}

.tmcnc-doc__check {
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  margin-top: 1px;
  color: var(--tmcnc-violet);
}

/* Dải chứng chỉ */
.tmcnc-doc__certbox {
  width: 100%;
  margin-top: 30px;
  padding-top: 24px;
  border-top: 1px dashed rgba(113, 13, 172, 0.3);
}

#tmcnc-landing .tmcnc-doc__certlabel {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 14px;
  color: var(--tmcnc-primary);
  font-family: var(--tmcnc-font-sans);
  font-size: 18px;
  font-weight: 500;
  line-height: 1.2;
}

.tmcnc-doc__certs {
  display: flex;
  gap: 14px;
  margin: 0 -6px;
  padding: 8px 6px 14px;
  overflow-x: auto;
  scrollbar-width: none;
}

.tmcnc-doc__certs::-webkit-scrollbar {
  display: none;
}

#tmcnc-landing .tmcnc-doc__cert {
  position: relative;
  flex: 0 0 var(--tmcnc-doc-cert-w);
  width: var(--tmcnc-doc-cert-w);
  aspect-ratio: 7 / 5;
  margin: 0;
  padding: 0;
  overflow: hidden;
  border: 3px solid #fff;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 8px 20px rgba(69, 17, 128, 0.18);
  cursor: zoom-in;
  translate: 0 0;
  transition: translate 0.35s cubic-bezier(0.22, 0.61, 0.36, 1), box-shadow 0.35s ease;
}

#tmcnc-landing .tmcnc-doc__cert img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: scale 0.5s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.tmcnc-doc__cert-cap {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 18px 10px 7px;
  background: linear-gradient(180deg, rgba(69, 17, 128, 0) 0%, rgba(69, 17, 128, 0.82) 100%);
  color: #fff;
  font-family: var(--tmcnc-font-sans);
  font-size: 12.5px;
  font-weight: 400;
  line-height: 1.2;
  text-align: left;
}

.tmcnc-doc__cert-zoom {
  position: absolute;
  top: 7px;
  right: 7px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 3px 8px rgba(69, 17, 128, 0.25);
  color: var(--tmcnc-primary);
  transition: background 0.3s ease, color 0.3s ease;
}

.tmcnc-doc__cert-zoom svg {
  width: 18px;
  height: 18px;
}

#tmcnc-landing .tmcnc-doc__cert:hover {
  translate: 0 -4px;
  box-shadow: 0 16px 28px rgba(69, 17, 128, 0.3);
}

#tmcnc-landing .tmcnc-doc__cert:hover img {
  scale: 1.08;
}

#tmcnc-landing .tmcnc-doc__cert:hover .tmcnc-doc__cert-zoom {
  background: var(--tmcnc-primary);
  color: #fff;
}

#tmcnc-landing .tmcnc-doc__cert:focus-visible {
  outline: 3px solid var(--tmcnc-violet);
  outline-offset: 2px;
}

/* Footer + điều hướng mobile */
.tmcnc-doc__footer {
  display: flex;
  justify-content: center;
  margin-top: 36px;
}

.tmcnc-doc__nav {
  display: none;
}

/* ----- Hiệu ứng chuyển bác sĩ (desktop có JS) ----- */
@media (min-width: 769px) {
  #tmcnc-landing.is-js .tmcnc-doc__photo {
    opacity: 0;
    translate: -50px 0;
    transition: opacity 0.5s ease, translate 0.8s cubic-bezier(0.22, 0.61, 0.36, 1);
  }

  #tmcnc-landing.is-js .tmcnc-doc__info {
    opacity: 0;
    translate: 50px 0;
    transition: opacity 0.5s ease, translate 0.8s cubic-bezier(0.22, 0.61, 0.36, 1) 0.12s;
  }

  #tmcnc-landing.is-js .tmcnc-doc__slide.is-active .tmcnc-doc__photo,
  #tmcnc-landing.is-js .tmcnc-doc__slide.is-active .tmcnc-doc__info {
    opacity: 1;
    translate: 0 0;
  }

  #tmcnc-landing.is-js .tmcnc-doc__anim {
    opacity: 0;
    translate: 0 20px;
    transition: opacity 0.5s ease, translate 0.6s cubic-bezier(0.22, 0.61, 0.36, 1);
  }

  #tmcnc-landing.is-js .tmcnc-doc__slide.is-active .tmcnc-doc__anim {
    opacity: 1;
    translate: 0 0;
    transition-delay: calc(0.3s + var(--d, 0) * 0.09s);
  }

  #tmcnc-landing.is-js .tmcnc-doc__slide.is-active .tmcnc-doc__exp {
    animation: tmcnc-doc-pop 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) 0.35s both;
  }
}

@keyframes tmcnc-doc-pop {
  from {
    opacity: 0;
    scale: 0.4;
  }
  to {
    opacity: 1;
    scale: 1;
  }
}

@keyframes tmcnc-doc-shine {
  0%,
  55% {
    transform: translateX(-160%) skewX(-18deg);
  }
  100% {
    transform: translateX(420%) skewX(-18deg);
  }
}

/* ----- Laptop ----- */
@media (min-width: 1025px) and (max-width: 1440px) {
  .tmcnc-doc {
    --tmcnc-doc-photo-w: 470px;
    --tmcnc-doc-overlap: 16px;
    --tmcnc-doc-name: 40px;
    --tmcnc-doc-point-fs: 17px;
    --tmcnc-doc-cert-w: 150px;

    padding: 60px 0 64px;
  }

  .tmcnc-doc__exp {
    left: -34px;
    width: 138px;
    height: 138px;
  }

  .tmcnc-doc__exp-num {
    font-size: 54px;
  }

  .tmcnc-doc__info {
    padding: 38px 38px 32px calc(var(--tmcnc-doc-overlap) + 36px);
  }

  #tmcnc-landing .tmcnc-doc__tab {
    flex-basis: 340px;
  }
}

/* ----- Tablet ----- */
@media (min-width: 769px) and (max-width: 1024px) {
  .tmcnc-doc {
    --tmcnc-doc-photo-w: 350px;
    --tmcnc-doc-overlap: 14px;
    --tmcnc-doc-name: 32px;
    --tmcnc-doc-point-fs: 16px;
    --tmcnc-doc-cert-w: 128px;

    padding: 46px 0 52px;
  }

  .tmcnc-doc__container {
    width: calc(100% - 48px);
  }

  .tmcnc-doc__tabs {
    gap: 10px;
    margin-bottom: 48px;
  }

  #tmcnc-landing .tmcnc-doc__tab {
    gap: 10px;
    padding-right: 16px;
  }

  .tmcnc-doc__tab-avatar {
    width: 52px;
    height: 52px;
  }

  .tmcnc-doc__tab-name {
    font-size: 15.5px;
  }

  .tmcnc-doc__tab-meta {
    font-size: 12.5px;
  }

  .tmcnc-doc__exp {
    top: 28px;
    left: -22px;
    width: 108px;
    height: 108px;
  }

  .tmcnc-doc__exp-num {
    font-size: 42px;
  }

  .tmcnc-doc__exp-label {
    font-size: 11.5px;
  }

  .tmcnc-doc__info {
    padding: 30px 26px 24px calc(var(--tmcnc-doc-overlap) + 26px);
    border-radius: 30px;
  }

  #tmcnc-landing .tmcnc-doc__role {
    font-size: 16px;
  }

  #tmcnc-landing .tmcnc-doc__points {
    gap: 10px;
    margin-top: 18px;
  }

  .tmcnc-doc__certbox {
    margin-top: 20px;
    padding-top: 16px;
  }

  .tmcnc-doc__cert-cap {
    font-size: 11px;
  }
}

/* ----- Mobile: 1 bác sĩ vừa viewport, vuốt ngang ----- */
@media (max-width: 768px) {
  .tmcnc-doc {
    /* 100svh trừ header + hàng tab + lề; kẹp để không quá thấp / quá cao */
    --tmcnc-doc-slide-h: clamp(560px, calc(100svh - 190px), 700px);
    --tmcnc-doc-point-fs: 14px;

    padding: 40px 0 44px;
  }

  .tmcnc-doc__container {
    width: calc(100% - 24px);
  }

  #tmcnc-landing .tmcnc-doc__heading {
    margin-bottom: 20px;
  }

  /* Tab avatar 3 cột */
  .tmcnc-doc__tabs {
    gap: 8px;
    margin-bottom: 14px;
  }

  #tmcnc-landing .tmcnc-doc__tab {
    flex: 1 1 0;
    justify-content: center;
    gap: 6px;
    padding: 4px 8px 4px 4px;
  }

  .tmcnc-doc__tab-avatar {
    width: 34px;
    height: 34px;
  }

  .tmcnc-doc__tab-name {
    overflow: visible;
    font-size: 13px;
    text-overflow: clip;
  }

  .tmcnc-doc__tab-meta {
    display: none;
  }

  /* Slider */
  #tmcnc-landing .tmcnc-doc__track {
    display: flex;
    gap: 10px;
    margin: 0 -12px;
    padding: 4px 12px 20px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding: 0 12px;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  .tmcnc-doc__track::-webkit-scrollbar {
    display: none;
  }

  #tmcnc-landing .tmcnc-doc__slide {
    display: flex;
    flex: 0 0 88%;
    flex-direction: column;
    align-items: stretch;
    width: auto;
    height: auto;
    min-height: var(--tmcnc-doc-slide-h); /* track flex stretch → mọi slide cao bằng nhau */
    margin: 0;
    scroll-snap-align: start;
  }

  /* Ảnh chiếm phần còn lại của chiều cao */
  .tmcnc-doc__photo {
    flex: 1 1 0;
    min-height: 220px;
    aspect-ratio: auto;
  }

  /* Ảnh bác sĩ nằm gọn trong vùng (track cuộn ngang sẽ cắt phần thừa) */
  #tmcnc-landing .tmcnc-doc__img {
    top: 2%;
    bottom: auto;
    width: auto;
    max-width: 100%;
    height: 98%;
    object-fit: contain;
    object-position: 50% 100%;
  }

  .tmcnc-doc__exp {
    top: 12px;
    right: 8px;
    left: auto;
    width: 84px;
    height: 84px;
    border-width: 2px;
  }

  .tmcnc-doc__exp-ring {
    inset: -7px;
  }

  .tmcnc-doc__exp-num {
    font-size: 32px;
  }

  .tmcnc-doc__exp-label {
    max-width: 62px;
    margin-top: 2px;
    font-size: 9.5px;
  }

  /* Thẻ thông tin đè lên đáy ảnh */
  .tmcnc-doc__info {
    flex: 0 0 auto;
    margin: -64px 8px 0;
    padding: 16px 16px 12px;
    border-radius: 24px;
    background: rgba(255, 255, 255, 0.94);
    box-shadow: 0 12px 24px rgba(113, 13, 172, 0.16), 0 0 12px 4px #fff inset;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }

  #tmcnc-landing .tmcnc-doc__role {
    gap: 8px;
    margin-bottom: 4px;
    font-size: 13.5px;
  }

  .tmcnc-doc__role::before {
    width: 22px;
  }

  #tmcnc-landing .tmcnc-doc__name {
    font-size: 25px;
  }

  #tmcnc-landing .tmcnc-doc__points {
    gap: 6px;
    margin-top: 10px;
    margin-bottom: 10px;
  }

  #tmcnc-landing .tmcnc-doc__point {
    gap: 8px;
    line-height: 1.32;
  }

  .tmcnc-doc__check {
    width: 18px;
    height: 18px;
  }

  /* thẻ thông tin được JS kéo cao bằng nhau → chứng chỉ dồn xuống đáy thẻ cho đều */
  .tmcnc-doc__certbox {
    margin-top: auto;
    padding-top: 10px;
  }

  #tmcnc-landing .tmcnc-doc__certlabel {
    margin-bottom: 4px;
    font-size: 14px;
  }

    .tmcnc-doc__certs {
    gap: 8px;
    padding: 4px 6px 4px;
  }

  #tmcnc-landing .tmcnc-doc__cert {
    --tmcnc-doc-cert-w: 88px;

    border-width: 2px;
    border-radius: 10px;
  }

  .tmcnc-doc__cert-cap {
    display: none;
  }

  .tmcnc-doc__cert-zoom {
    top: 4px;
    right: 4px;
    width: 22px;
    height: 22px;
  }

  .tmcnc-doc__cert-zoom svg {
    width: 13px;
    height: 13px;
  }

  /* Gợi ý vuốt + tiến trình */
  .tmcnc-doc__nav {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
  }

  #tmcnc-landing:not(.is-js) .tmcnc-doc__nav {
    display: none;
  }

  #tmcnc-landing .tmcnc-doc__swipe {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 7px 14px;
    border: 1px solid rgba(255, 255, 255, 0.95);
    border-radius: var(--tmcnc-radius-pill);
    background: rgba(255, 255, 255, 0.85);
    box-shadow: 0 4px 12px rgba(113, 13, 172, 0.12);
    color: var(--tmcnc-primary);
    font-family: var(--tmcnc-font-sans);
    font-size: 13.5px;
    font-weight: 400;
    line-height: 1;
    transition: opacity 0.4s ease, translate 0.4s ease;
  }

  .tmcnc-doc__swipe svg {
    width: 18px;
    height: 18px;
    animation: tmcnc-doc-nudge 1.4s ease-in-out infinite;
  }

  .tmcnc-doc.is-touched .tmcnc-doc__swipe {
    opacity: 0;
    translate: 0 -6px;
    pointer-events: none;
  }

  .tmcnc-doc__progress {
    position: relative;
    display: block;
    width: 140px;
    height: 4px;
    overflow: hidden;
    border-radius: 4px;
    background: rgba(113, 13, 172, 0.14);
  }

  .tmcnc-doc__progress-bar {
    position: absolute;
    top: 0;
    left: 0;
    width: 30%;
    height: 100%;
    border-radius: 4px;
    background: var(--tmcnc-grad-cta);
  }

  .tmcnc-doc__footer {
    margin-top: 26px;
  }

  .tmcnc-doc__footer .tmcnc-btn {
    --tmcnc-btn-w: 240px;
    --tmcnc-btn-fs: 0.078;
  }
}

@keyframes tmcnc-doc-nudge {
  0%,
  100% {
    translate: 0 0;
  }
  50% {
    translate: 5px 0;
  }
}

@media (max-width: 400px) {
  #tmcnc-landing .tmcnc-doc__name {
    font-size: 23px;
  }
}

/* =========================================================
 * COMPONENT: LIGHTBOX ẢNH (dùng chung – chứng chỉ, ảnh phóng to)
 * Mở từ [data-tmcnc-lb-item] trong [data-tmcnc-lb-group]; ← → / vuốt để chuyển,
 * bấm ảnh để phóng 2.4x rồi kéo để xem chi tiết, Esc / bấm nền để đóng.
 * ========================================================= */
html.tmcnc-lb-open {
  overflow: hidden;
}

.tmcnc-lb[hidden] {
  display: none;
}

.tmcnc-lb {
  position: fixed;
  inset: 0;
  z-index: 999999;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.35s ease;
}

.tmcnc-lb.is-open {
  opacity: 1;
}

.tmcnc-lb__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(30, 8, 56, 0.88);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

.tmcnc-lb__panel {
  position: relative;
  display: flex;
  flex-direction: column;
  width: min(1200px, 100%);
  height: 100%;
  padding: 24px 76px 18px;
  pointer-events: none; /* chỉ các control bên trong nhận sự kiện */
  scale: 0.94;
  transition: scale 0.45s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.tmcnc-lb.is-open .tmcnc-lb__panel {
  scale: 1;
}

.tmcnc-lb__stage {
  position: relative;
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  justify-content: center;
  min-height: 0;
  overflow: hidden;
  border-radius: 20px;
  pointer-events: auto;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}

#tmcnc-landing .tmcnc-lb__img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  border: 4px solid #fff;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5);
  cursor: zoom-in;
  transform: translate(var(--tmcnc-lb-x, 0px), var(--tmcnc-lb-y, 0px)) scale(var(--tmcnc-lb-s, 1));
  transition: transform 0.35s cubic-bezier(0.22, 0.61, 0.36, 1), opacity 0.3s ease;
}

#tmcnc-landing .tmcnc-lb.is-zoomed .tmcnc-lb__img {
  cursor: grab;
}

#tmcnc-landing .tmcnc-lb.is-dragging .tmcnc-lb__img {
  cursor: grabbing;
  transition: none;
}

#tmcnc-landing .tmcnc-lb.is-loading .tmcnc-lb__img {
  opacity: 0.25;
}

.tmcnc-lb__spinner {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 42px;
  height: 42px;
  margin: -21px 0 0 -21px;
  border: 3px solid rgba(255, 255, 255, 0.3);
  border-top-color: #fff;
  border-radius: 50%;
  opacity: 0;
  pointer-events: none;
  animation: tmcnc-issues-spin 0.8s linear infinite;
}

.tmcnc-lb.is-loading .tmcnc-lb__spinner {
  opacity: 1;
}

#tmcnc-landing .tmcnc-lb__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  margin: 0;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.16);
  box-shadow: none;
  color: #fff;
  cursor: pointer;
  pointer-events: auto;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  transition: background 0.3s ease, color 0.3s ease, scale 0.3s ease;
}

#tmcnc-landing .tmcnc-lb__btn svg {
  width: 24px;
  height: 24px;
}

#tmcnc-landing .tmcnc-lb__btn:hover {
  background: #fff;
  color: var(--tmcnc-primary);
  scale: 1.08;
}

#tmcnc-landing .tmcnc-lb__btn:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 3px;
}

#tmcnc-landing .tmcnc-lb__close {
  position: absolute;
  top: 18px;
  right: 18px;
  z-index: 3;
}

#tmcnc-landing .tmcnc-lb__nav {
  position: absolute;
  top: 50%;
  z-index: 2;
  margin-top: -44px;
}

#tmcnc-landing .tmcnc-lb__nav--prev {
  left: 12px;
}

#tmcnc-landing .tmcnc-lb__nav--next {
  right: 12px;
}

#tmcnc-landing .tmcnc-lb[data-single] .tmcnc-lb__nav {
  display: none;
}

.tmcnc-lb__bar {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  gap: 18px;
  margin-top: 16px;
}

.tmcnc-lb__meta {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  color: #fff;
  font-family: var(--tmcnc-font-sans);
  text-align: left;
  pointer-events: auto;
}

.tmcnc-lb__meta strong {
  font-size: 19px;
  font-weight: 500;
  line-height: 1.2;
}

.tmcnc-lb__meta span:empty {
  display: none;
}

.tmcnc-lb__meta span {
  font-size: 15px;
  font-weight: 400;
  line-height: 1.25;
  opacity: 0.85;
}

.tmcnc-lb__count {
  flex: 0 0 auto;
  padding: 8px 14px;
  border-radius: var(--tmcnc-radius-pill);
  background: var(--tmcnc-grad-title-1);
  color: #fff;
  font-family: var(--tmcnc-font-sans);
  font-size: 15px;
  font-weight: 500;
  line-height: 1;
  pointer-events: auto;
}

@media (max-width: 768px) {
  .tmcnc-lb__panel {
    padding: 62px 10px 14px;
  }

  #tmcnc-landing .tmcnc-lb__close {
    top: 10px;
    right: 10px;
    width: 44px;
    height: 44px;
  }

  /* Nút ← → nằm dưới ảnh, không che nội dung */
  #tmcnc-landing .tmcnc-lb__nav {
    top: auto;
    bottom: 12px;
    width: 44px;
    height: 44px;
    margin: 0;
  }

  #tmcnc-landing .tmcnc-lb__nav--prev {
    left: 10px;
  }

  #tmcnc-landing .tmcnc-lb__nav--next {
    right: 10px;
  }

  .tmcnc-lb__bar {
    gap: 10px;
    min-height: 44px;
    padding: 0 54px;
  }

  #tmcnc-landing .tmcnc-lb__zoom {
    display: none;
  }

  .tmcnc-lb__meta strong {
    font-size: 15px;
  }

  .tmcnc-lb__meta span {
    font-size: 13px;
  }
}

/* =========================================================
 * SECTION: CƠ SỞ VẬT CHẤT & CÔNG NGHỆ
 * 2 khối zigzag (khối 2 đảo chiều). Mỗi khối = 1 thẻ kính lớn:
 *   ảnh minh họa "trồi" khỏi mép trên thẻ (khung viền lệch + vệt sáng quét) |
 *   tiêu đề 3 dòng (keyword serif gradient; "200+" chạy số) + mô tả + chip ý chính,
 *   phía dưới là dải 8 ảnh nhỏ → bấm mở lightbox.
 * Desktop (≥1025): 8 ảnh nằm gọn 1 hàng, rê chuột vào ảnh nào ảnh đó nở rộng,
 *   các ảnh còn lại co lại. ≤1024: xếp dọc, dải ảnh cuộn ngang + thanh tiến trình.
 * ========================================================= */
.tmcnc-infra {
  /* Tinh chỉnh nhanh */
  --tmcnc-infra-kw: 68px;         /* cỡ chữ keyword ("chỉn chu", "200+") – nhỏ hơn tiêu đề section */
  --tmcnc-infra-lead: 32px;       /* cỡ chữ dòng lead + tail */
  --tmcnc-infra-cols: 1.12fr 1fr; /* tỉ lệ cột ảnh : chữ */
  --tmcnc-infra-lift: 60px;       /* ảnh trồi lên khỏi mép trên thẻ */
  --tmcnc-infra-thumb-h: 128px;   /* chiều cao dải ảnh nhỏ */
  --tmcnc-infra-expand: 2.6;      /* mức nở của ảnh khi rê chuột (1 = tắt) */

  position: relative;
  padding: 72px 0 76px;
}

.tmcnc-infra__bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}

.tmcnc-infra__brush {
  position: absolute;
  border-radius: 50%;
  filter: blur(68.2px);
}

.tmcnc-infra__brush--violet {
  top: 22%;
  right: -8%;
  width: 42vw;
  height: 42vw;
  max-width: 820px;
  max-height: 820px;
  background: radial-gradient(50% 50% at 50% 50%, rgba(208, 107, 255, 0.4) 0%, rgba(208, 107, 255, 0) 100%);
}

.tmcnc-infra__container {
  width: min(1440px, calc(100% - 80px));
  margin: 0 auto;
}

#tmcnc-landing .tmcnc-infra__heading {
  margin-bottom: 40px;
}

.tmcnc-infra__blocks {
  display: flex;
  flex-direction: column;
  gap: 40px;
}

/* ----- Khối ----- */
.tmcnc-infra__block {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr);
  grid-template-areas:
    "hero text"
    "strip strip";
  column-gap: 56px;
  padding: 0 36px 32px;
}

.tmcnc-infra__block--flip {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr);
  grid-template-areas:
    "text hero"
    "strip strip";
}

.tmcnc-infra__card {
  position: absolute;
  inset: var(--tmcnc-infra-lift) 0 0;
  z-index: 0;
  border: 1px solid rgba(255, 255, 255, 0.95);
  border-radius: 44px;
  background: rgba(255, 255, 255, 0.72);
  box-shadow: 0 24px 60px rgba(113, 13, 172, 0.12), 0 0 14px 4px rgba(255, 255, 255, 0.85) inset;
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}

/* ----- Ảnh minh họa ----- */
.tmcnc-infra__hero {
  position: relative;
  z-index: 1;
  grid-area: hero;
}

.tmcnc-infra__frame {
  position: absolute;
  inset: 0;
  border: 2px solid rgba(172, 89, 255, 0.55);
  border-radius: 36px;
  background: linear-gradient(135deg, rgba(172, 89, 255, 0.12), rgba(247, 66, 137, 0.12));
  translate: 20px 20px;
  transition: translate 0.6s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.tmcnc-infra__block--flip .tmcnc-infra__frame {
  translate: -20px 20px;
}

.tmcnc-infra__hero:hover .tmcnc-infra__frame {
  translate: 10px 10px;
}

.tmcnc-infra__block--flip .tmcnc-infra__hero:hover .tmcnc-infra__frame {
  translate: -10px 10px;
}

.tmcnc-infra__pic {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border: 4px solid #fff;
  border-radius: 36px;
  background: #eadcf7;
  box-shadow: 0 26px 54px rgba(69, 17, 128, 0.24);
  isolation: isolate;
}

#tmcnc-landing .tmcnc-infra__hero-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: scale 1.2s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.tmcnc-infra__hero:hover .tmcnc-infra__hero-img {
  scale: 1.06;
}

/* Vệt sáng quét định kỳ */
.tmcnc-infra__pic::after {
  position: absolute;
  top: -10%;
  bottom: -10%;
  left: 0;
  z-index: 1;
  width: 30%;
  content: "";
  background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.4) 50%, rgba(255, 255, 255, 0) 100%);
  transform: translateX(-160%) skewX(-18deg);
  animation: tmcnc-doc-shine 7s ease-in-out infinite;
  pointer-events: none;
}

/* Chip "Xem 8 hình" */
#tmcnc-landing .tmcnc-infra__all {
  position: absolute;
  bottom: 22px;
  left: 22px;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin: 0;
  padding: 11px 20px 11px 16px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.95);
  border-radius: var(--tmcnc-radius-pill);
  background: rgba(255, 255, 255, 0.88);
  box-shadow: 0 8px 20px rgba(69, 17, 128, 0.25);
  color: var(--tmcnc-primary);
  font-family: var(--tmcnc-font-sans);
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 0;
  line-height: 1;
  text-transform: none;
  cursor: pointer;
  isolation: isolate;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  transition: color 0.35s ease, translate 0.35s ease;
}

#tmcnc-landing .tmcnc-infra__all::before {
  position: absolute;
  inset: 0;
  z-index: -1;
  content: "";
  background: var(--tmcnc-grad-title-1);
  opacity: 0;
  transition: opacity 0.35s ease;
}

.tmcnc-infra__all svg {
  width: 19px;
  height: 19px;
}

#tmcnc-landing .tmcnc-infra__all:hover {
  color: #fff;
  translate: 0 -3px;
}

#tmcnc-landing .tmcnc-infra__all:hover::before {
  opacity: 1;
}

#tmcnc-landing .tmcnc-infra__all:focus-visible {
  outline: 3px solid var(--tmcnc-violet);
  outline-offset: 3px;
}

/* ----- Tiêu đề + mô tả ----- */
.tmcnc-infra__text {
  position: relative;
  z-index: 1;
  grid-area: text;
  align-self: center;
  padding: var(--tmcnc-infra-lift) 8px 0 0;
  text-align: center;
}

.tmcnc-infra__block--flip .tmcnc-infra__text {
  padding: var(--tmcnc-infra-lift) 0 0 8px;
}

#tmcnc-landing .tmcnc-infra__title {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0;
  padding: 0;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
}

.tmcnc-infra__lead,
.tmcnc-infra__tail {
  color: var(--tmcnc-primary);
  font-family: var(--tmcnc-font-sans);
  font-size: var(--tmcnc-infra-lead);
  font-weight: 500;
  line-height: 1.15;
}

.tmcnc-infra__lead {
  margin-bottom: 16px;
}

.tmcnc-infra__tail {
  margin-top: 12px;
}

#tmcnc-landing .tmcnc-infra__keyword {
  /* ghi đè grad-safe: bỏ margin âm (đang kéo chữ lên dính dòng trên) */
  margin: 0;
  padding: 0.16em 0.08em 0.1em 0.04em;
  font-family: var(--tmcnc-font-serif);
  font-size: var(--tmcnc-infra-kw);
  font-style: italic;
  font-weight: 400;
  line-height: 1.1;
}

#tmcnc-landing .tmcnc-infra__desc {
  max-width: 560px;
  margin: 22px auto 0;
  text-align: center;
}

#tmcnc-landing .tmcnc-infra__chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin: 26px 0 0;
  padding: 0;
  list-style: none;
}

#tmcnc-landing .tmcnc-infra__chip {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin: 0;
  padding: 10px 18px 10px 14px;
  border: 1px solid #fff;
  border-radius: var(--tmcnc-radius-pill);
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 5px 14px rgba(113, 13, 172, 0.12);
  color: var(--tmcnc-primary);
  font-family: var(--tmcnc-font-sans);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.1;
  list-style: none;
}

.tmcnc-infra__chip::before {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  content: "";
  background: var(--tmcnc-grad-title-1);
  box-shadow: 0 0 0 3px rgba(150, 21, 210, 0.15);
}

/* ----- Dải 8 ảnh ----- */
.tmcnc-infra__strip {
  position: relative;
  z-index: 1;
  grid-area: strip;
  margin-top: 34px;
  padding-top: 20px;
  border-top: 1px dashed rgba(113, 13, 172, 0.3);
}

#tmcnc-landing .tmcnc-infra__striphead {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 14px;
  color: var(--tmcnc-primary);
  font-family: var(--tmcnc-font-sans);
  font-size: 18px;
  font-weight: 500;
  line-height: 1.2;
}

.tmcnc-infra__striphead em {
  color: var(--tmcnc-violet);
  font-size: 14px;
  font-style: italic;
  font-weight: 400;
}

.tmcnc-infra__thumbs {
  display: flex;
  gap: 12px;
  height: var(--tmcnc-infra-thumb-h);
  margin: 0 -6px;
  padding: 8px 6px;
  box-sizing: content-box;
}

#tmcnc-landing .tmcnc-infra__thumb {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
  border: 3px solid #fff;
  border-radius: 18px;
  background: #eadcf7;
  box-shadow: 0 8px 20px rgba(69, 17, 128, 0.18);
  cursor: zoom-in;
  translate: 0 0;
  transition: flex-grow 0.6s cubic-bezier(0.22, 0.61, 0.36, 1), translate 0.4s ease,
    box-shadow 0.4s ease;
}

#tmcnc-landing .tmcnc-infra__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: scale 0.7s cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* Lớp tím nhẹ, mất dần khi rê chuột */
.tmcnc-infra__thumb::after {
  position: absolute;
  inset: 0;
  content: "";
  background: linear-gradient(180deg, rgba(113, 13, 172, 0) 40%, rgba(69, 17, 128, 0.35) 100%);
  opacity: 1;
  transition: opacity 0.4s ease;
  pointer-events: none;
}

.tmcnc-infra__thumb-zoom {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 2px solid #fff;
  border-radius: 50%;
  background: var(--tmcnc-grad-cta);
  box-shadow: 0 6px 16px rgba(69, 17, 128, 0.4);
  color: #fff;
  opacity: 0;
  scale: 0.5;
  translate: -50% -50%;
  transition: opacity 0.35s ease, scale 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
  pointer-events: none;
}

.tmcnc-infra__thumb-zoom svg {
  width: 22px;
  height: 22px;
}

#tmcnc-landing .tmcnc-infra__thumb:focus-visible {
  outline: 3px solid var(--tmcnc-violet);
  outline-offset: 2px;
}

.tmcnc-infra__progress {
  display: none;
}

/* Desktop: rê chuột → ảnh nở rộng, ảnh khác co lại */
@media (min-width: 1025px) {
  #tmcnc-landing .tmcnc-infra__thumb:hover,
  #tmcnc-landing .tmcnc-infra__thumb:focus-visible {
    flex-grow: var(--tmcnc-infra-expand);
    translate: 0 -6px;
    box-shadow: 0 18px 32px rgba(69, 17, 128, 0.32);
  }

  #tmcnc-landing .tmcnc-infra__thumb:hover img,
  #tmcnc-landing .tmcnc-infra__thumb:focus-visible img {
    scale: 1.06;
  }

  .tmcnc-infra__thumb:hover::after,
  .tmcnc-infra__thumb:focus-visible::after {
    opacity: 0;
  }

  .tmcnc-infra__thumb:hover .tmcnc-infra__thumb-zoom,
  .tmcnc-infra__thumb:focus-visible .tmcnc-infra__thumb-zoom {
    opacity: 1;
    scale: 1;
  }
}

/* ----- Laptop ----- */
@media (min-width: 1025px) and (max-width: 1440px) {
  .tmcnc-infra {
    --tmcnc-infra-kw: 60px;
    --tmcnc-infra-lead: 26px;
    --tmcnc-infra-thumb-h: 104px;
    --tmcnc-infra-lift: 48px;

    padding: 60px 0 64px;
  }

  .tmcnc-infra__block {
    column-gap: 40px;
    padding: 0 28px 26px;
  }

  .tmcnc-infra__card {
    border-radius: 36px;
  }

  #tmcnc-landing .tmcnc-infra__desc {
    font-size: 18px;
  }

  #tmcnc-landing .tmcnc-infra__chip {
    padding: 8px 15px 8px 12px;
    font-size: 14.5px;
  }
}

/* ----- Tablet + Mobile: xếp dọc, dải ảnh cuộn ngang ----- */
@media (max-width: 1024px) {
  .tmcnc-infra {
    --tmcnc-infra-kw: 56px;
    --tmcnc-infra-lead: 22px;
    --tmcnc-infra-lift: 34px;
    --tmcnc-infra-thumb-h: 100px;

    padding: 40px 0 44px;
  }

  .tmcnc-infra__container {
    width: calc(100% - 24px);
  }

  #tmcnc-landing .tmcnc-infra__heading {
    margin-bottom: 26px;
  }

  .tmcnc-infra__blocks {
    gap: 28px;
  }

  .tmcnc-infra__block,
  .tmcnc-infra__block--flip {
    display: flex;
    flex-direction: column;
    padding: 0 14px 18px;
  }

  .tmcnc-infra__card {
    border-radius: 30px;
  }

  .tmcnc-infra__hero {
    width: 100%;
    max-width: 640px;
    margin: 0 auto;
  }

  .tmcnc-infra__frame,
  .tmcnc-infra__block--flip .tmcnc-infra__frame {
    border-radius: 26px;
    translate: 8px 8px;
  }

  .tmcnc-infra__pic {
    border-width: 3px;
    border-radius: 26px;
    box-shadow: 0 16px 34px rgba(69, 17, 128, 0.22);
  }

  #tmcnc-landing .tmcnc-infra__all {
    bottom: 12px;
    left: 12px;
    padding: 9px 15px 9px 12px;
    font-size: 14px;
  }

  .tmcnc-infra__all svg {
    width: 17px;
    height: 17px;
  }

  .tmcnc-infra__text,
  .tmcnc-infra__block--flip .tmcnc-infra__text {
    padding: 22px 4px 0;
  }

  #tmcnc-landing .tmcnc-infra__desc {
    margin-top: 12px;
  }

  #tmcnc-landing .tmcnc-infra__chips {
    gap: 8px;
    margin-top: 16px;
  }

  #tmcnc-landing .tmcnc-infra__chip {
    padding: 8px 14px 8px 11px;
    font-size: 14px;
  }

  .tmcnc-infra__strip {
    margin-top: 20px;
    padding-top: 14px;
  }

  #tmcnc-landing .tmcnc-infra__striphead {
    margin-bottom: 4px;
    font-size: 15px;
  }

  .tmcnc-infra__striphead em {
    font-size: 12.5px;
  }

  /* Dải cuộn ngang */
  .tmcnc-infra__thumbs {
    gap: 10px;
    height: var(--tmcnc-infra-thumb-h);
    margin: 0 -14px;
    padding: 8px 14px 12px;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    scroll-padding: 0 14px;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  .tmcnc-infra__thumbs::-webkit-scrollbar {
    display: none;
  }

  #tmcnc-landing .tmcnc-infra__thumb {
    flex: 0 0 calc(var(--tmcnc-infra-thumb-h) * 1.34);
    border-width: 2px;
    border-radius: 14px;
    scroll-snap-align: start;
  }

  /* Cảm ứng: hiện biểu tượng phóng to nhỏ ở góc thay cho hover */
  .tmcnc-infra__thumb-zoom {
    top: 6px;
    right: 6px;
    left: auto;
    width: 26px;
    height: 26px;
    border-width: 1.5px;
    opacity: 1;
    scale: 1;
    translate: 0 0;
  }

  .tmcnc-infra__thumb-zoom svg {
    width: 14px;
    height: 14px;
  }

  .tmcnc-infra__progress {
    position: relative;
    display: block;
    width: 120px;
    height: 4px;
    margin: 4px auto 0;
    overflow: hidden;
    border-radius: 4px;
    background: rgba(113, 13, 172, 0.14);
  }

  .tmcnc-infra__progress-bar {
    position: absolute;
    top: 0;
    left: 0;
    width: 30%;
    height: 100%;
    border-radius: 4px;
    background: var(--tmcnc-grad-cta);
  }
}

/* Khối tiêu đề "Không gian đầu tư / chỉn chu / Cơ sở hạ tầng đồng bộ": dòng sát nhau hơn */
@media (max-width: 1024px) {
  .tmcnc-infra__lead {
    margin-bottom: 2px;
  }

  #tmcnc-landing .tmcnc-infra__keyword {
    padding: 0.08em 0.08em 0.02em 0.04em;
    line-height: 1.02;
  }

  .tmcnc-infra__tail {
    margin-top: 0;
  }

  #tmcnc-landing .tmcnc-infra__desc {
    margin-top: 10px;
  }
}

@media (min-width: 769px) and (max-width: 1024px) {
  .tmcnc-infra {
    --tmcnc-infra-thumb-h: 118px;
    --tmcnc-infra-kw: 62px;
  }
}

@media (max-width: 768px) {
  .tmcnc-infra {
    --tmcnc-infra-kw: 50px;
    --tmcnc-infra-lead: 20px;
  }
}

@media (max-width: 400px) {
  .tmcnc-infra {
    --tmcnc-infra-kw: 46px;
  }
}

/* =========================================================
 * SECTION: HỘI THẢO CHUYÊN MÔN, HỘI NHẬP QUỐC TẾ
 * Desktop (≥1200): tiêu đề + mô tả nằm CHÍNH GIỮA; 4 ảnh cụm trái + 4 ảnh cụm phải,
 *   mỗi ảnh to nhỏ / mờ rõ / nghiêng khác nhau (chỉnh ở .tmcnc-sem__cell--N), trôi nhẹ;
 *   rê chuột: ảnh nét lại, thẳng ra, phóng lên và nổi trên cùng.
 * ≤1199: lưới 3 cột (ô chữ trên, ảnh 1 to 2x2). ≤768: lưới 2 cột (bản mobile đã duyệt).
 *   Ảnh 7–8 chỉ dùng cho desktop + lightbox.
 * Bấm ảnh → lightbox chung (chuyển giữa 8 ảnh).
 * ========================================================= */
.tmcnc-sem {
  /* Tinh chỉnh nhanh */
  --tmcnc-sem-kw: 104px;           /* cỡ chữ "Hội thảo" */
  --tmcnc-sem-row: 210px;          /* chiều cao mỗi hàng ảnh (tablet / mobile) */
  --tmcnc-sem-gap: 12px;
  --tmcnc-sem-radius: 24px;
  --tmcnc-sem-center: 560px;       /* chiều rộng cột chữ ở giữa (desktop) */
  --tmcnc-sem-blur: 3px;           /* độ mờ của ảnh "xa" (0 = tắt hiệu ứng mờ) */

  position: relative;
  padding: 72px 0 76px;
}

.tmcnc-sem__container {
  width: min(1560px, calc(100% - 64px));
  margin: 0 auto;
}

/* ----- Lưới (tablet / mobile) – mặc định ----- */
.tmcnc-sem__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: auto repeat(3, var(--tmcnc-sem-row));
  grid-template-areas:
    "txt txt txt"
    "p1  p1  p2"
    "p1  p1  p3"
    "p4  p5  p6";
  gap: var(--tmcnc-sem-gap);
}

/* Cụm trái / phải chỉ là lớp bọc: ≤1199 để ô ảnh xếp thẳng vào lưới */
.tmcnc-sem__cluster {
  display: contents;
}

/* ----- Ô chữ ----- */
.tmcnc-sem__text {
  position: relative;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  grid-area: txt;
  padding: 36px 30px 34px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.95);
  border-radius: 32px;
  background: rgba(255, 255, 255, 0.78);
  box-shadow: 0 24px 56px rgba(113, 13, 172, 0.14), 0 0 14px 4px rgba(255, 255, 255, 0.85) inset;
  text-align: center;
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}

#tmcnc-landing .tmcnc-sem__heading {
  position: relative;
  z-index: 1;
  margin: 0 0 16px;
}

.tmcnc-sem .tmcnc-heading__keyword {
  font-size: var(--tmcnc-sem-kw);
}

.tmcnc-sem__sub {
  margin: 2px 0 0;
}

#tmcnc-landing .tmcnc-sem__heading .tmcnc-pill-title {
  margin-top: 14px;
}

#tmcnc-landing .tmcnc-sem__desc {
  position: relative;
  z-index: 1;
  max-width: 720px;
  margin: 0;
  text-align: center;
}

/* Quỹ đạo trang trí xoay chậm (gợi "hội nhập toàn cầu") */
.tmcnc-sem__orbit {
  position: absolute;
  right: -110px;
  bottom: -120px;
  width: 260px;
  height: 260px;
  pointer-events: none;
}

.tmcnc-sem__ring {
  position: absolute;
  border-radius: 50%;
}

.tmcnc-sem__ring--a {
  inset: 0;
  border: 1.5px dashed rgba(172, 89, 255, 0.5);
  animation: tmcnc-issues-spin 40s linear infinite;
}

.tmcnc-sem__ring--b {
  inset: 42px;
  border: 1.5px solid rgba(172, 89, 255, 0.28);
  animation: tmcnc-issues-spin 26s linear infinite reverse;
}

.tmcnc-sem__planet {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 16px;
  height: 16px;
  margin: -8px 0 0 -8px;
  border: 2px solid #fff;
  border-radius: 50%;
  background: var(--tmcnc-grad-title-1);
  box-shadow: 0 0 14px rgba(150, 21, 210, 0.6);
  animation: tmcnc-sem-orbit 12s linear infinite;
}

@keyframes tmcnc-sem-orbit {
  from {
    transform: rotate(0deg) translateX(130px) rotate(0deg);
  }
  to {
    transform: rotate(360deg) translateX(130px) rotate(-360deg);
  }
}

/* ----- Ô ảnh ----- */
.tmcnc-sem__cell {
  position: relative;
  min-width: 0;
  min-height: 0;
}

.tmcnc-sem__cell--1 { grid-area: p1; }
.tmcnc-sem__cell--2 { grid-area: p2; }
.tmcnc-sem__cell--3 { grid-area: p3; }
.tmcnc-sem__cell--4 { grid-area: p4; }
.tmcnc-sem__cell--5 { grid-area: p5; }
.tmcnc-sem__cell--6 { grid-area: p6; }
.tmcnc-sem__cell--7,
.tmcnc-sem__cell--8 { display: none; } /* chỉ desktop */

/* Ảnh lấp đầy ô (absolute) → kích thước ảnh gốc không làm phình hàng lưới */
#tmcnc-landing .tmcnc-sem__photo {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
  border: 3px solid #fff;
  border-radius: var(--tmcnc-sem-radius);
  background: #eadcf7;
  box-shadow: 0 14px 34px rgba(69, 17, 128, 0.2);
  cursor: zoom-in;
  isolation: isolate;
  translate: 0 0;
  transition: translate 0.5s cubic-bezier(0.22, 0.61, 0.36, 1), box-shadow 0.5s ease;
}

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

.tmcnc-sem__shade {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, rgba(69, 17, 128, 0) 45%, rgba(69, 17, 128, 0.62) 100%);
  opacity: 0;
  transition: opacity 0.5s ease;
  pointer-events: none;
}

.tmcnc-sem__cap {
  position: absolute;
  right: 18px;
  bottom: 16px;
  left: 18px;
  z-index: 2;
  color: #fff;
  font-family: var(--tmcnc-font-sans);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.25;
  text-align: left;
  text-shadow: 0 1px 6px rgba(30, 8, 56, 0.6);
  translate: 0 12px;
  opacity: 0;
  transition: translate 0.5s cubic-bezier(0.22, 0.61, 0.36, 1), opacity 0.5s ease;
}

.tmcnc-sem__zoom {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border: 2px solid #fff;
  border-radius: 50%;
  background: var(--tmcnc-grad-cta);
  box-shadow: 0 6px 16px rgba(69, 17, 128, 0.4);
  color: #fff;
  opacity: 0;
  scale: 0.5;
  transition: opacity 0.4s ease, scale 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
  pointer-events: none;
}

.tmcnc-sem__zoom svg {
  width: 21px;
  height: 21px;
}

@media (hover: hover) {
  #tmcnc-landing .tmcnc-sem__photo:hover,
  #tmcnc-landing .tmcnc-sem__photo:focus-visible {
    translate: 0 -8px;
    box-shadow: 0 26px 46px rgba(69, 17, 128, 0.34);
  }

  #tmcnc-landing .tmcnc-sem__photo:hover .tmcnc-sem__img,
  #tmcnc-landing .tmcnc-sem__photo:focus-visible .tmcnc-sem__img {
    scale: 1.08;
  }

  .tmcnc-sem__photo:hover .tmcnc-sem__shade,
  .tmcnc-sem__photo:focus-visible .tmcnc-sem__shade,
  .tmcnc-sem__photo:hover .tmcnc-sem__cap,
  .tmcnc-sem__photo:focus-visible .tmcnc-sem__cap {
    opacity: 1;
  }

  .tmcnc-sem__photo:hover .tmcnc-sem__cap,
  .tmcnc-sem__photo:focus-visible .tmcnc-sem__cap {
    translate: 0 0;
  }

  .tmcnc-sem__photo:hover .tmcnc-sem__zoom,
  .tmcnc-sem__photo:focus-visible .tmcnc-sem__zoom {
    opacity: 1;
    scale: 1;
  }
}

#tmcnc-landing .tmcnc-sem__photo:focus-visible {
  outline: 3px solid var(--tmcnc-violet);
  outline-offset: 3px;
}

/* Cảm ứng: caption luôn hiện, kính lúp nhỏ ở góc */
@media (hover: none) {
  .tmcnc-sem__shade,
  .tmcnc-sem__cap {
    opacity: 1;
    translate: 0 0;
  }

  .tmcnc-sem__zoom {
    top: 10px;
    right: 10px;
    width: 30px;
    height: 30px;
    opacity: 1;
    scale: 1;
  }

  .tmcnc-sem__zoom svg {
    width: 16px;
    height: 16px;
  }
}

/* =========================================================
 * DESKTOP ≥1200 – chữ ở giữa, 4 ảnh trái + 4 ảnh phải (tản ngẫu nhiên)
 * Mỗi ảnh có biến riêng:
 *   --w   chiều rộng (% bề ngang cụm)   --ar  tỉ lệ khung    --r  góc nghiêng
 *   --t / --l / --rt  vị trí (top / left / right, % của cụm)
 *   --b   độ mờ (nhân với --tmcnc-sem-blur)   --o  độ trong   --z  lớp trên/dưới
 *   --fd  độ trễ nhịp trôi (s)
 * ========================================================= */
@media (min-width: 1200px) {
  .tmcnc-sem__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(440px, var(--tmcnc-sem-center)) minmax(0, 1fr);
    grid-template-rows: auto;
    grid-template-areas: "left txt right";
    align-items: center;
    gap: 0;
  }

  .tmcnc-sem__text {
    grid-area: txt;
    padding: 52px 44px 48px;
    border-radius: 40px;
  }

  .tmcnc-sem__cluster {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 11 / 17;
    align-self: center;
  }

  .tmcnc-sem__cluster--left {
    grid-area: left;
    margin-right: -34px;
  }

  .tmcnc-sem__cluster--right {
    grid-area: right;
    margin-left: -34px;
  }

  /* Ô ảnh: đặt tuyệt đối, nghiêng bằng thuộc tính rotate (không đụng transform của reveal) */
  .tmcnc-sem__cell,
  .tmcnc-sem__cell--7,
  .tmcnc-sem__cell--8 {
    position: absolute;
    display: block;
    grid-area: auto;
    top: var(--t);
    left: var(--l, auto);
    right: var(--rt, auto);
    z-index: var(--z, 1);
    width: var(--w);
    aspect-ratio: var(--ar, 1 / 1);
    animation: tmcnc-sem-float 8s ease-in-out infinite alternate;
    animation-delay: var(--fd, 0s);
  }

  /* Nghiêng / mờ / độ trong áp lên KHUNG ẢNH (con), vì ô cha đang dùng transform + opacity của hiệu ứng reveal */
  #tmcnc-landing .tmcnc-sem__photo {
    rotate: var(--r, 0deg);
    opacity: var(--o, 1);
    filter: blur(calc(var(--tmcnc-sem-blur) * var(--b, 0)));
    transition: rotate 0.7s cubic-bezier(0.22, 0.61, 0.36, 1), scale 0.7s cubic-bezier(0.22, 0.61, 0.36, 1),
      opacity 0.5s ease, filter 0.5s ease, translate 0.5s cubic-bezier(0.22, 0.61, 0.36, 1), box-shadow 0.5s ease;
  }

  .tmcnc-sem__cell:hover,
  .tmcnc-sem__cell:focus-within {
    z-index: 6;
    animation-play-state: paused;
  }

  #tmcnc-landing .tmcnc-sem__cell:hover .tmcnc-sem__photo,
  #tmcnc-landing .tmcnc-sem__cell:focus-within .tmcnc-sem__photo {
    rotate: 0deg;
    scale: 1.07;
    opacity: 1;
    filter: none;
  }

  /* --- Cụm TRÁI (ảnh 1–4) --- */
  .tmcnc-sem__cell--1 { --t: 0%;   --l: 4%;   --w: 56%; --ar: 4 / 5; --r: -4deg; --b: 0; --o: 1;    --z: 3; --fd: 0s; }
  .tmcnc-sem__cell--2 { --t: 9%;   --rt: 0%;  --w: 38%; --ar: 1 / 1; --r: 5deg;  --b: 1; --o: 0.8;  --z: 2; --fd: -2s; }
  .tmcnc-sem__cell--3 { --t: 47%;  --l: 0%;   --w: 44%; --ar: 4 / 3; --r: 6deg;  --b: 1; --o: 0.78; --z: 1; --fd: -4s; }
  .tmcnc-sem__cell--4 { --t: 58%;  --rt: 2%;  --w: 52%; --ar: 1 / 1; --r: -3deg; --b: 0; --o: 1;    --z: 4; --fd: -1s; }

  /* --- Cụm PHẢI (ảnh 5–8) – bố cục khác cụm trái cho tự nhiên --- */
  .tmcnc-sem__cell--5 { --t: 4%;   --rt: 2%;  --w: 50%; --ar: 1 / 1; --r: 4deg;  --b: 0; --o: 1;    --z: 3; --fd: -3s; }
  .tmcnc-sem__cell--6 { --t: 14%;  --l: 0%;   --w: 36%; --ar: 4 / 5; --r: -6deg; --b: 1; --o: 0.78; --z: 1; --fd: -5s; }
  .tmcnc-sem__cell--7 { --t: 50%;  --l: 6%;   --w: 54%; --ar: 4 / 3; --r: -3deg; --b: 0; --o: 1;    --z: 4; --fd: -2s; }
  .tmcnc-sem__cell--8 { --t: 60%;  --rt: 0%;  --w: 40%; --ar: 4 / 5; --r: 5deg;  --b: 1; --o: 0.8;  --z: 2; --fd: -6s; }
}

@keyframes tmcnc-sem-float {
  from {
    translate: 0 -5px;
  }
  to {
    translate: 0 7px;
  }
}

/* ----- Laptop 1200–1440 ----- */
@media (min-width: 1200px) and (max-width: 1440px) {
  .tmcnc-sem {
    --tmcnc-sem-kw: 84px;
    --tmcnc-sem-center: 500px;

    padding: 60px 0 64px;
  }

  .tmcnc-sem__text {
    padding: 40px 32px 36px;
    border-radius: 34px;
  }

  #tmcnc-landing .tmcnc-sem__desc {
    font-size: 17px;
  }

  #tmcnc-landing .tmcnc-sem__heading {
    margin-bottom: 18px;
  }
}

/* ----- Tablet + Mobile ----- */
@media (max-width: 1199px) {
  .tmcnc-sem {
    --tmcnc-sem-kw: 84px;
    --tmcnc-sem-radius: 24px;

    padding: 40px 0 44px;
  }

  .tmcnc-sem__container {
    width: calc(100% - 24px);
  }

  #tmcnc-landing .tmcnc-sem__desc {
    max-width: 720px;
  }

  .tmcnc-sem__orbit {
    right: -110px;
    bottom: -120px;
  }
}

/* Mobile: lưới 2 cột an toàn – xem đủ 6 ảnh không cần vuốt (bản đã duyệt) */
@media (max-width: 768px) {
  .tmcnc-sem {
    --tmcnc-sem-kw: 68px;
    --tmcnc-sem-gap: 10px;
    --tmcnc-sem-radius: 20px;
  }

  .tmcnc-sem__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: none;
    grid-template-areas:
      "txt txt"
      "p1  p1"
      "p2  p3"
      "p4  p5"
      "p6  p6";
    grid-auto-rows: auto;
  }

  .tmcnc-sem__text {
    padding: 30px 20px 28px;
    border-radius: 28px;
  }

  .tmcnc-sem__cell--1,
  .tmcnc-sem__cell--6 {
    aspect-ratio: 16 / 10;
  }

  .tmcnc-sem__cell--2,
  .tmcnc-sem__cell--3,
  .tmcnc-sem__cell--4,
  .tmcnc-sem__cell--5 {
    aspect-ratio: 1 / 1;
  }

  #tmcnc-landing .tmcnc-sem__photo {
    border-width: 2px;
    box-shadow: 0 8px 20px rgba(69, 17, 128, 0.18);
  }

  .tmcnc-sem__cap {
    right: 12px;
    bottom: 10px;
    left: 12px;
    font-size: 13.5px;
  }

  .tmcnc-sem__orbit {
    right: -120px;
    bottom: -130px;
    width: 260px;
    height: 260px;
  }
}

@media (max-width: 400px) {
  .tmcnc-sem {
    --tmcnc-sem-kw: 60px;
  }
}

/* =========================================================
 * SECTION: SAO VIỆT TIN CHỌN
 * Ảnh 1:1 936 x 936 đã có sẵn KOL + kết quả + tên → HTML chỉ có tiêu đề + điều hướng.
 * Desktop (≥1025, có JS): "accordion" 1 ô mở to đúng 1:1 (ảnh KHÔNG bị cắt) + 4 ô thu gọn
 *   (lát ảnh dọc, phủ veil tím + thẻ tên). Rê chuột / bấm ô, bấm tên, mũi tên, phím ← →
 *   để đổi; tự chạy vòng khi chưa tương tác (thanh chạy dưới tên đang chọn).
 * Mobile / tablet (≤1024) và khi không có JS: slider vuốt ngang – mỗi ô 1:1 đầy đủ,
 *   lộ mép ô kế bên, ô đang chọn to nhất, tên KOL dạng chip cuộn ngang + thanh tiến trình.
 * ========================================================= */
.tmcnc-star {
  /* Tinh chỉnh nhanh */
  --tmcnc-star-h: clamp(420px, 34vw, 640px);   /* chiều cao hàng = chiều rộng ô đang mở (1:1) */
  --tmcnc-star-col: calc(var(--tmcnc-star-h) * 0.27); /* chiều rộng ô thu gọn */
  --tmcnc-star-gap: 14px;
  --tmcnc-star-radius: 30px;

  position: relative;
  padding: 72px 0 76px;
}

.tmcnc-star__bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}

.tmcnc-star__brush {
  position: absolute;
  border-radius: 50%;
  filter: blur(68.2px);
}

.tmcnc-star__brush--violet {
  top: 20%;
  left: -6%;
  width: 40vw;
  height: 40vw;
  max-width: 780px;
  max-height: 780px;
  background: radial-gradient(50% 50% at 50% 50%, rgba(208, 107, 255, 0.4) 0%, rgba(208, 107, 255, 0) 100%);
}

.tmcnc-star__container {
  width: min(1440px, calc(100% - 80px));
  margin: 0 auto;
}

#tmcnc-landing .tmcnc-star__heading {
  margin-bottom: 44px;
}

/* ----- Nền tảng: slider vuốt ngang (mobile / tablet / không JS) ----- */
.tmcnc-star__stage {
  position: relative;
}

.tmcnc-star__row {
  display: flex;
  gap: 12px;
  margin: 0 -12px;
  padding: 10px 12px 22px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.tmcnc-star__row::-webkit-scrollbar {
  display: none;
}

.tmcnc-star__card {
  position: relative;
  flex: 0 0 min(80%, 460px);
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border: 3px solid #fff;
  border-radius: 28px;
  background: #eadcf7;
  box-shadow: 0 16px 34px rgba(69, 17, 128, 0.22);
  scroll-snap-align: center;
  scale: 0.94;
  opacity: 0.78;
  transition: scale 0.5s cubic-bezier(0.22, 0.61, 0.36, 1), opacity 0.5s ease;
}

.tmcnc-star__card.is-active {
  scale: 1;
  opacity: 1;
}

/* Căn đầu/cuối slider ra giữa màn hình */
.tmcnc-star__row::before,
.tmcnc-star__row::after {
  flex: 0 0 calc((100% - min(80%, 460px)) / 2 - 12px);
  content: "";
}

#tmcnc-landing .tmcnc-star__img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  user-select: none;
  -webkit-user-drag: none;
}

.tmcnc-star__veil,
.tmcnc-star__tag {
  display: none;
}

/* ----- Điều hướng ----- */
.tmcnc-star__ctrl {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-top: 6px;
}

#tmcnc-landing:not(.is-js) .tmcnc-star__ctrl,
#tmcnc-landing:not(.is-js) .tmcnc-star__progress {
  display: none;
}

.tmcnc-star__arrow {
  display: none;
}

.tmcnc-star__tabs {
  display: flex;
  gap: 8px;
  min-width: 0;
  max-width: 100%;
  padding: 6px;
  overflow-x: auto;
  scrollbar-width: none;
  border: 1px solid rgba(255, 255, 255, 0.95);
  border-radius: var(--tmcnc-radius-pill);
  background: rgba(255, 255, 255, 0.66);
  box-shadow: 0 10px 26px rgba(113, 13, 172, 0.12), 0 0 10px 3px #fff inset;
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}

.tmcnc-star__tabs::-webkit-scrollbar {
  display: none;
}

#tmcnc-landing .tmcnc-star__tab {
  position: relative;
  isolation: isolate;
  flex: 0 0 auto;
  margin: 0;
  padding: 11px 20px;
  overflow: hidden;
  border: 0;
  border-radius: var(--tmcnc-radius-pill);
  background: transparent;
  box-shadow: none;
  color: var(--tmcnc-primary);
  font-family: var(--tmcnc-font-sans);
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 0;
  line-height: 1;
  text-transform: none;
  white-space: nowrap;
  cursor: pointer;
  transition: color 0.35s ease;
}

#tmcnc-landing .tmcnc-star__tab::before {
  position: absolute;
  inset: 0;
  z-index: -1;
  content: "";
  border-radius: inherit;
  background: var(--tmcnc-grad-title-1);
  opacity: 0;
  transition: opacity 0.4s ease;
}

#tmcnc-landing .tmcnc-star__tab:hover {
  background: rgba(255, 255, 255, 0.9);
}

#tmcnc-landing .tmcnc-star__tab.is-active {
  color: #fff;
  box-shadow: 0 6px 16px rgba(150, 21, 210, 0.36);
}

#tmcnc-landing .tmcnc-star__tab.is-active::before {
  opacity: 1;
}

#tmcnc-landing .tmcnc-star__tab:focus-visible {
  outline: 3px solid var(--tmcnc-violet);
  outline-offset: 2px;
}

/* Thanh chạy tự chuyển dưới tên đang chọn */
.tmcnc-star__fill {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 4px;
  background: rgba(255, 255, 255, 0.85);
}

.tmcnc-star.is-autoplay .tmcnc-star__tab.is-active .tmcnc-star__fill {
  animation: tmcnc-star-fill var(--tmcnc-star-auto, 4500ms) linear forwards;
}

@keyframes tmcnc-star-fill {
  from {
    width: 0;
  }
  to {
    width: 100%;
  }
}

.tmcnc-star__progress {
  position: relative;
  display: block;
  width: 140px;
  height: 4px;
  margin: 16px auto 0;
  overflow: hidden;
  border-radius: 4px;
  background: rgba(113, 13, 172, 0.14);
}

.tmcnc-star__progress-bar {
  position: absolute;
  top: 0;
  left: 0;
  width: 30%;
  height: 100%;
  border-radius: 4px;
  background: var(--tmcnc-grad-cta);
}

/* ----- Desktop (có JS): accordion 1 ô mở + các ô thu gọn ----- */
@media (min-width: 1025px) {
  #tmcnc-landing.is-js .tmcnc-star__row {
    align-items: stretch;
    justify-content: center;
    gap: var(--tmcnc-star-gap);
    height: calc(var(--tmcnc-star-h) + 40px);
    margin: 0;
    padding: 20px 0;
    overflow: visible;
    scroll-snap-type: none;
  }

  #tmcnc-landing.is-js .tmcnc-star__row::before,
  #tmcnc-landing.is-js .tmcnc-star__row::after {
    display: none;
  }

  #tmcnc-landing.is-js .tmcnc-star__card {
    flex: 0 0 var(--tmcnc-star-col);
    width: var(--tmcnc-star-col);
    height: var(--tmcnc-star-h);
    aspect-ratio: auto;
    border-radius: var(--tmcnc-star-radius);
    box-shadow: 0 14px 30px rgba(69, 17, 128, 0.2);
    cursor: pointer;
    scale: 1;
    opacity: 1;
    transition: none; /* chưa bật hiệu ứng cho tới khi JS khởi tạo xong (.is-ready) → không giật lúc tải trang */
  }

  #tmcnc-landing.is-js .tmcnc-star.is-ready .tmcnc-star__card {
    transition: flex-basis 0.75s cubic-bezier(0.22, 0.61, 0.36, 1), width 0.75s cubic-bezier(0.22, 0.61, 0.36, 1),
      box-shadow 0.6s ease, translate 0.5s ease;
  }

  #tmcnc-landing.is-js .tmcnc-star__card.is-active {
    flex-basis: var(--tmcnc-star-h);
    width: var(--tmcnc-star-h);
    box-shadow: 0 30px 60px rgba(69, 17, 128, 0.34);
    cursor: default;
  }

  #tmcnc-landing.is-js .tmcnc-star__card:not(.is-active):hover {
    translate: 0 -8px;
    box-shadow: 0 24px 44px rgba(69, 17, 128, 0.32);
  }

  /* Ảnh cố định kích thước vuông; ô co giãn chỉ "mở cửa sổ" nhìn vào ảnh */
  #tmcnc-landing.is-js .tmcnc-star__img {
    position: absolute;
    top: 0;
    left: 50%;
    width: auto;
    height: 100%;
    aspect-ratio: 1 / 1;
    object-fit: fill;
    transform: translateX(calc(var(--tmcnc-star-focus, 0.62) * -100%));
  }

  #tmcnc-landing.is-js .tmcnc-star.is-ready .tmcnc-star__img {
    transition: transform 0.75s cubic-bezier(0.22, 0.61, 0.36, 1);
  }

  #tmcnc-landing.is-js .tmcnc-star__card.is-active .tmcnc-star__img {
    transform: translateX(-50%);
  }

  /* Phủ tím + thẻ tên trên ô thu gọn */
  #tmcnc-landing.is-js .tmcnc-star__veil {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: block;
    background: linear-gradient(180deg, rgba(113, 13, 172, 0.18) 0%, rgba(69, 17, 128, 0.42) 100%);
    opacity: 1;
    transition: opacity 0.6s ease;
    pointer-events: none;
  }

  #tmcnc-landing.is-js .tmcnc-star__card:not(.is-active):hover .tmcnc-star__veil {
    opacity: 0.55;
  }

  #tmcnc-landing.is-js .tmcnc-star__card.is-active .tmcnc-star__veil {
    opacity: 0;
  }

  #tmcnc-landing.is-js .tmcnc-star__tag {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 70px 8px 20px;
    background: linear-gradient(180deg, rgba(45, 8, 84, 0) 0%, rgba(45, 8, 84, 0.9) 70%);
    color: #fff;
    font-family: var(--tmcnc-font-sans);
    text-align: center;
    transition: opacity 0.4s ease, translate 0.5s ease;
    pointer-events: none;
  }

  .tmcnc-star__tag small {
    font-size: 13px;
    font-weight: 400;
    line-height: 1.1;
    opacity: 0.85;
  }

  .tmcnc-star__tag strong {
    font-size: 18px;
    font-weight: 500;
    line-height: 1.15;
  }

  #tmcnc-landing.is-js .tmcnc-star__card.is-active .tmcnc-star__tag {
    opacity: 0;
    translate: 0 14px;
  }

  /* Mũi tên */
  .tmcnc-star__ctrl {
    margin-top: 12px;
  }

  #tmcnc-landing.is-js .tmcnc-star__arrow {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    margin: 0;
    padding: 0;
    border: 1px solid rgba(113, 13, 172, 0.22);
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.88);
    box-shadow: 0 6px 16px rgba(113, 13, 172, 0.12);
    color: var(--tmcnc-primary);
    cursor: pointer;
    transition: background 0.3s ease, color 0.3s ease, translate 0.3s ease;
  }

  .tmcnc-star__arrow svg {
    width: 22px;
    height: 22px;
  }

  #tmcnc-landing .tmcnc-star__arrow:hover {
    background: var(--tmcnc-primary);
    color: #fff;
  }

  #tmcnc-landing .tmcnc-star__arrow:first-child:hover {
    translate: -3px 0;
  }

  #tmcnc-landing .tmcnc-star__arrow:last-child:hover {
    translate: 3px 0;
  }

  #tmcnc-landing .tmcnc-star__arrow:focus-visible {
    outline: 3px solid var(--tmcnc-violet);
    outline-offset: 2px;
  }

  .tmcnc-star__progress {
    display: none;
  }
}

/* ----- Laptop ----- */
@media (min-width: 1025px) and (max-width: 1440px) {
  .tmcnc-star {
    --tmcnc-star-h: clamp(420px, 36vw, 520px);
    --tmcnc-star-radius: 26px;

    padding: 60px 0 64px;
  }

  #tmcnc-landing .tmcnc-star__tab {
    padding: 10px 16px;
    font-size: 15px;
  }
}

/* ----- Tablet + Mobile ----- */
@media (max-width: 1024px) {
  .tmcnc-star {
    padding: 40px 0 44px;
  }

  .tmcnc-star__container {
    width: calc(100% - 24px);
  }

  #tmcnc-landing .tmcnc-star__heading {
    margin-bottom: 20px;
  }

  .tmcnc-star__ctrl {
    margin-top: 2px;
  }

  /* Chip tên cuộn ngang: KHÔNG center để không cụt đầu hàng */
  .tmcnc-star__tabs {
    justify-content: flex-start;
    padding: 5px;
  }

  #tmcnc-landing .tmcnc-star__tab {
    padding: 10px 16px;
    font-size: 14.5px;
  }

  .tmcnc-star__fill {
    display: none;
  }
}

@media (max-width: 768px) {
  .tmcnc-star__card {
    flex-basis: 82%;
    border-width: 2px;
    border-radius: 22px;
    box-shadow: 0 10px 24px rgba(69, 17, 128, 0.2);
  }

  .tmcnc-star__row::before,
  .tmcnc-star__row::after {
    flex-basis: calc((100% - 82%) / 2 - 12px);
  }
}

/* =========================================================
 * SECTION: FEEDBACK KHÁCH HÀNG (tab theo dịch vụ)
 * 2 tab nhóm (thanh gradient trượt) → hàng tab dịch vụ (chip) → panel:
 *   Desktop: thẻ thông tin dịch vụ (300) | 2 thẻ khách hàng cạnh nhau (ảnh trước/sau gộp + tên, tuổi, cảm nhận).
 *   Tablet ≤1024: 2 thẻ cạnh nhau, ẩn thẻ thông tin. Mobile ≤768: 2 thẻ xếp dọc (xem hết, không cần vuốt).
 * Ảnh tĩnh, không slider. Panel ẩn dùng display:none → ảnh lazy chỉ tải khi mở tab.
 * Không JS: mọi nhóm + dịch vụ xếp dọc, đủ nội dung.
 * ========================================================= */
.tmcnc-fb {
  /* Tinh chỉnh nhanh */
  --tmcnc-fb-kw: 104px;            /* cỡ chữ "10.000+" */
  --tmcnc-fb-ratio: 4 / 3;         /* tỉ lệ ảnh trước/sau gộp */
  --tmcnc-fb-info-w: 300px;        /* chiều rộng thẻ thông tin dịch vụ (desktop) */
  --tmcnc-fb-gap: 24px;
  --tmcnc-fb-radius: 32px;
  --tmcnc-fb-text-fs: 18px;        /* cỡ chữ cảm nhận */

  position: relative;
  padding: 72px 0 76px;
}

.tmcnc-fb__bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}

.tmcnc-fb__brush {
  position: absolute;
  border-radius: 50%;
  filter: blur(68.2px);
}

.tmcnc-fb__brush--violet {
  bottom: 10%;
  left: -8%;
  width: 40vw;
  height: 40vw;
  max-width: 780px;
  max-height: 780px;
  background: radial-gradient(50% 50% at 50% 50%, rgba(208, 107, 255, 0.4) 0%, rgba(208, 107, 255, 0) 100%);
}

.tmcnc-fb__container {
  width: min(1440px, calc(100% - 80px));
  margin: 0 auto;
}

#tmcnc-landing .tmcnc-fb__heading {
  margin-bottom: 40px;
}

.tmcnc-fb .tmcnc-heading__keyword {
  font-size: var(--tmcnc-fb-kw);
}

/* ----- Tab nhóm ----- */
.tmcnc-fb__gtabs {
  position: relative;
  display: flex;
  width: fit-content;
  max-width: 100%;
  margin: 0 auto 22px;
  padding: 6px;
  border: 1px solid rgba(255, 255, 255, 0.95);
  border-radius: var(--tmcnc-radius-pill);
  background: rgba(255, 255, 255, 0.62);
  box-shadow: 0 10px 30px rgba(113, 13, 172, 0.12), 0 0 10px 3px #fff inset;
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}

#tmcnc-landing:not(.is-js) .tmcnc-fb__gtabs,
#tmcnc-landing:not(.is-js) .tmcnc-fb__chips {
  display: none;
}

.tmcnc-fb__gind {
  position: absolute;
  top: 6px;
  bottom: 6px;
  left: 6px;
  width: 0;
  border-radius: var(--tmcnc-radius-pill);
  background: var(--tmcnc-grad-title-1);
  box-shadow: 0 8px 20px rgba(150, 21, 210, 0.4);
  opacity: 0;
  transition: left 0.55s cubic-bezier(0.65, 0, 0.35, 1), width 0.55s cubic-bezier(0.65, 0, 0.35, 1),
    opacity 0.3s ease;
}

.tmcnc-fb__gtabs.is-ready .tmcnc-fb__gind {
  opacity: 1;
}

#tmcnc-landing .tmcnc-fb__gtab {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-width: 300px;
  margin: 0;
  padding: 13px 32px;
  border: 0;
  border-radius: var(--tmcnc-radius-pill);
  background: transparent;
  box-shadow: none;
  color: var(--tmcnc-primary);
  font-family: var(--tmcnc-font-sans);
  letter-spacing: 0;
  line-height: 1.2;
  text-transform: none;
  cursor: pointer;
  transition: color 0.4s ease;
}

.tmcnc-fb__gtab-label {
  font-size: 21px;
  font-weight: 500;
}

.tmcnc-fb__gtab-count {
  font-size: 14.5px;
  font-weight: 400;
  opacity: 0.75;
}

#tmcnc-landing .tmcnc-fb__gtab.is-active {
  color: #fff;
}

#tmcnc-landing .tmcnc-fb__gtab:focus-visible,
#tmcnc-landing .tmcnc-fb__chip:focus-visible {
  outline: 3px solid var(--tmcnc-violet);
  outline-offset: 2px;
}

/* ----- Nhóm + tab dịch vụ ----- */
.tmcnc-fb__group + .tmcnc-fb__group {
  margin-top: 60px; /* chỉ khi không JS */
}

#tmcnc-landing.is-js .tmcnc-fb__group + .tmcnc-fb__group {
  margin-top: 0;
}

#tmcnc-landing.is-js .tmcnc-fb__group:not(.is-active) {
  display: none;
}

.tmcnc-fb__chips {
  display: flex;
  justify-content: center;
  gap: 8px;
  width: fit-content;
  max-width: 100%;
  margin: 0 auto 34px;
  padding: 6px;
  overflow-x: auto;
  scrollbar-width: none;
  border: 1px solid rgba(255, 255, 255, 0.95);
  border-radius: var(--tmcnc-radius-pill);
  background: rgba(255, 255, 255, 0.5);
  box-shadow: 0 8px 22px rgba(113, 13, 172, 0.08);
}

.tmcnc-fb__chips::-webkit-scrollbar {
  display: none;
}

#tmcnc-landing .tmcnc-fb__chip {
  position: relative;
  isolation: isolate;
  flex: 0 0 auto;
  margin: 0;
  padding: 12px 22px;
  overflow: hidden;
  border: 0;
  border-radius: var(--tmcnc-radius-pill);
  background: transparent;
  box-shadow: none;
  color: var(--tmcnc-primary);
  font-family: var(--tmcnc-font-sans);
  font-size: 17px;
  font-weight: 500;
  letter-spacing: 0;
  line-height: 1;
  text-transform: none;
  white-space: nowrap;
  cursor: pointer;
  transition: color 0.35s ease, background-color 0.3s ease;
}

#tmcnc-landing .tmcnc-fb__chip::before {
  position: absolute;
  inset: 0;
  z-index: -1;
  content: "";
  border-radius: inherit;
  background: var(--tmcnc-grad-title-1);
  opacity: 0;
  transition: opacity 0.4s ease;
}

#tmcnc-landing .tmcnc-fb__chip:hover {
  background: rgba(255, 255, 255, 0.95);
}

#tmcnc-landing .tmcnc-fb__chip.is-active {
  color: #fff;
  box-shadow: 0 6px 16px rgba(150, 21, 210, 0.36);
}

#tmcnc-landing .tmcnc-fb__chip.is-active::before {
  opacity: 1;
}

/* ----- Panel ----- */
.tmcnc-fb__panel {
  display: grid;
  grid-template-columns: minmax(0, var(--tmcnc-fb-info-w)) minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--tmcnc-fb-gap);
  align-items: stretch;
}

.tmcnc-fb__panel + .tmcnc-fb__panel {
  margin-top: 40px; /* chỉ khi không JS */
}

#tmcnc-landing.is-js .tmcnc-fb__panel + .tmcnc-fb__panel {
  margin-top: 0;
}

#tmcnc-landing.is-js .tmcnc-fb__panel:not(.is-active) {
  display: none;
}

/* Thẻ thông tin dịch vụ */
.tmcnc-fb__info {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 36px 32px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.95);
  border-radius: var(--tmcnc-fb-radius);
  background: rgba(255, 255, 255, 0.7);
  box-shadow: 0 18px 44px rgba(113, 13, 172, 0.12), 0 0 12px 4px rgba(255, 255, 255, 0.85) inset;
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}

.tmcnc-fb__quote-bg {
  position: absolute;
  top: -34px;
  right: 8px;
  color: rgba(172, 89, 255, 0.14);
  font-family: var(--tmcnc-font-serif);
  font-size: 220px;
  font-style: italic;
  line-height: 1;
  pointer-events: none;
  user-select: none;
}

#tmcnc-landing .tmcnc-fb__eyebrow {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 14px;
  color: var(--tmcnc-violet);
  font-family: var(--tmcnc-font-sans);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.2;
}

.tmcnc-fb__eyebrow::before {
  width: 26px;
  height: 3px;
  border-radius: 3px;
  content: "";
  background: var(--tmcnc-grad-cta);
}

#tmcnc-landing .tmcnc-fb__svc {
  position: relative;
  margin: 0;
  padding: 0;
  font-family: var(--tmcnc-font-sans);
  font-size: 38px;
  font-weight: 500;
  line-height: 1.12;
  letter-spacing: 0;
  text-transform: none;
}

.tmcnc-fb__svc > span {
  display: inline-block;
}

#tmcnc-landing .tmcnc-fb__alias {
  position: relative;
  margin: 8px 0 0;
  color: var(--tmcnc-primary);
  font-family: var(--tmcnc-font-serif);
  font-size: 24px;
  font-style: italic;
  font-weight: 400;
  line-height: 1.25;
}

#tmcnc-landing .tmcnc-fb__meta {
  position: relative;
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: 9px;
  margin: 26px 0 0;
  padding: 9px 16px 9px 12px;
  border: 1px solid #fff;
  border-radius: var(--tmcnc-radius-pill);
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 5px 14px rgba(113, 13, 172, 0.12);
  color: var(--tmcnc-primary);
  font-family: var(--tmcnc-font-sans);
  font-size: 15px;
  font-weight: 500;
  line-height: 1.1;
}

.tmcnc-fb__meta svg {
  width: 20px;
  height: 20px;
  color: var(--tmcnc-violet);
}

/* Thẻ khách hàng */
.tmcnc-fb__card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.95);
  border-radius: var(--tmcnc-fb-radius);
  background: rgba(255, 255, 255, 0.88);
  box-shadow: 0 20px 48px rgba(69, 17, 128, 0.16), 0 0 12px 4px #fff inset;
  translate: 0 0;
  transition: translate 0.5s cubic-bezier(0.22, 0.61, 0.36, 1), box-shadow 0.5s ease;
}

.tmcnc-fb__card:hover {
  translate: 0 -6px;
  box-shadow: 0 30px 56px rgba(69, 17, 128, 0.24), 0 0 12px 4px #fff inset;
}

.tmcnc-fb__media {
  position: relative;
  flex: 0 0 auto;
  aspect-ratio: var(--tmcnc-fb-ratio);
  overflow: hidden;
  background: #eadcf7;
}

#tmcnc-landing .tmcnc-fb__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: scale 0.9s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.tmcnc-fb__card:hover .tmcnc-fb__media img {
  scale: 1.04;
}

.tmcnc-fb__tag {
  position: absolute;
  bottom: 14px;
  left: 14px;
  padding: 8px 15px;
  border: 1px solid rgba(255, 255, 255, 0.95);
  border-radius: var(--tmcnc-radius-pill);
  background: rgba(255, 255, 255, 0.88);
  box-shadow: 0 4px 12px rgba(69, 17, 128, 0.2);
  color: var(--tmcnc-primary);
  font-family: var(--tmcnc-font-sans);
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

.tmcnc-fb__body {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 12px;
  padding: 22px 26px 26px;
}

.tmcnc-fb__who {
  display: flex;
  align-items: center;
  gap: 12px;
}

#tmcnc-landing .tmcnc-fb__name {
  margin: 0;
  padding: 0;
  color: var(--tmcnc-primary);
  font-family: var(--tmcnc-font-sans);
  font-size: 24px;
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: 0;
  text-transform: none;
}

.tmcnc-fb__age {
  padding: 6px 13px;
  border-radius: var(--tmcnc-radius-pill);
  background: var(--tmcnc-grad-title-1);
  color: #fff;
  font-family: var(--tmcnc-font-sans);
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
}

#tmcnc-landing .tmcnc-fb__text {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin: 0;
  color: var(--tmcnc-text-color);
  font-family: var(--tmcnc-font-sans);
  font-size: var(--tmcnc-fb-text-fs);
  font-weight: 400;
  line-height: 1.4;
}

.tmcnc-fb__qicon {
  flex: 0 0 auto;
  width: 26px;
  height: 20px;
  margin-top: 4px;
  color: rgba(172, 89, 255, 0.45);
}

/* Hiệu ứng vào khi mở tab (chỉ khi có JS) */
#tmcnc-landing.is-js .tmcnc-fb__panel.is-active .tmcnc-fb__info,
#tmcnc-landing.is-js .tmcnc-fb__panel.is-active .tmcnc-fb__card {
  animation: tmcnc-fb-in 0.7s cubic-bezier(0.22, 0.61, 0.36, 1) both;
}

#tmcnc-landing.is-js .tmcnc-fb__panel.is-active .tmcnc-fb__card {
  animation-delay: calc(0.1s + var(--c, 0) * 0.12s);
}

@keyframes tmcnc-fb-in {
  from {
    opacity: 0;
    translate: 0 26px;
  }
  to {
    opacity: 1;
    translate: 0 0;
  }
}

.tmcnc-fb__footer {
  display: flex;
  justify-content: center;
  margin-top: 36px;
}

/* ----- Laptop ----- */
@media (min-width: 1025px) and (max-width: 1440px) {
  .tmcnc-fb {
    --tmcnc-fb-kw: 84px;
    --tmcnc-fb-info-w: 250px;
    --tmcnc-fb-gap: 18px;
    --tmcnc-fb-radius: 28px;
    --tmcnc-fb-text-fs: 16.5px;

    padding: 60px 0 64px;
  }

  #tmcnc-landing .tmcnc-fb__gtab {
    min-width: 260px;
  }

  #tmcnc-landing .tmcnc-fb__chip {
    padding: 11px 16px;
    font-size: 15.5px;
  }

  .tmcnc-fb__info {
    padding: 28px 24px;
  }

  #tmcnc-landing .tmcnc-fb__svc {
    font-size: 30px;
  }

  #tmcnc-landing .tmcnc-fb__alias {
    font-size: 20px;
  }

  .tmcnc-fb__body {
    padding: 18px 20px 22px;
  }

  #tmcnc-landing .tmcnc-fb__name {
    font-size: 21px;
  }
}

/* ----- Tablet + Mobile ----- */
@media (max-width: 1024px) {
  .tmcnc-fb {
    --tmcnc-fb-kw: 76px;
    --tmcnc-fb-gap: 14px;
    --tmcnc-fb-radius: 26px;
    --tmcnc-fb-text-fs: 16px;

    padding: 40px 0 44px;
  }

  .tmcnc-fb__container {
    width: calc(100% - 24px);
  }

  #tmcnc-landing .tmcnc-fb__heading {
    margin-bottom: 24px;
  }

  .tmcnc-fb__gtabs {
    width: 100%;
    max-width: 560px;
    margin-bottom: 14px;
    padding: 5px;
  }

  .tmcnc-fb__gind {
    top: 5px;
    bottom: 5px;
  }

  #tmcnc-landing .tmcnc-fb__gtab {
    flex: 1 1 0;
    min-width: 0;
    padding: 10px 8px;
  }

  .tmcnc-fb__gtab-label {
    font-size: 15.5px;
  }

  .tmcnc-fb__gtab-count {
    font-size: 12.5px;
  }

  /* Chip dịch vụ cuộn ngang – KHÔNG center để không cụt đầu hàng */
  .tmcnc-fb__chips {
    justify-content: flex-start;
    width: 100%;
    margin-bottom: 20px;
    padding: 5px;
  }

  #tmcnc-landing .tmcnc-fb__chip {
    padding: 11px 16px;
    font-size: 14.5px;
  }

  /* Ẩn thẻ thông tin: chip + nhãn trên ảnh đã đủ ngữ cảnh */
  .tmcnc-fb__panel {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .tmcnc-fb__info {
    display: none;
  }

  .tmcnc-fb__body {
    gap: 10px;
    padding: 16px 18px 20px;
  }

  #tmcnc-landing .tmcnc-fb__name {
    font-size: 20px;
  }

  .tmcnc-fb__age {
    padding: 5px 11px;
    font-size: 13px;
  }

  .tmcnc-fb__qicon {
    width: 22px;
    height: 17px;
  }

  .tmcnc-fb__footer {
    margin-top: 32px;
  }
}

@media (max-width: 768px) {
  .tmcnc-fb {
    --tmcnc-fb-kw: 64px;
  }

  .tmcnc-fb__panel {
    grid-template-columns: minmax(0, 1fr);
  }

  .tmcnc-fb__card:hover {
    translate: 0 0;
  }

  .tmcnc-fb__tag {
    bottom: 10px;
    left: 10px;
    padding: 7px 12px;
    font-size: 13px;
  }
}

@media (max-width: 400px) {
  .tmcnc-fb {
    --tmcnc-fb-kw: 56px;
  }
}

/* =========================================================
 * COMPONENT: SLIDER (cuộn ngang native + scroll-snap)
 * Kéo chuột desktop, thanh tiến trình bấm để nhảy, nút prev/next quay vòng,
 * phím ←/→. Không tràn (vừa khung) → JS thêm .is-static: ẩn nút + thanh.
 * ========================================================= */
.tmcnc-slider {
  --tmcnc-slider-gap: 24px;

  position: relative;
  min-width: 0;
}

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

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

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

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

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

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

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

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

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

/* =========================================================
 * COMPONENT: VIDEO YOUTUBE (Shorts) – bản final trang chủ tổng hợp
 * Nhúng thẳng player YouTube (khung 9:16, bo góc), dùng thumbnail + nút play
 * mặc định của YouTube → 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.
 * ========================================================= */
.tmcnc-video {
  position: relative;
  overflow: hidden;
  aspect-ratio: 9 / 16;
  border-radius: 24px;
  background: var(--tmcnc-deep);
  box-shadow: 0 14px 30px rgba(69, 17, 128, 0.28);
  isolation: isolate; /* giữ bo góc cho iframe trên Safari */
}

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

/* =========================================================
 * SECTION: DẢI VIDEO SHORTS – VIDEO KHÁCH HÀNG THỰC TẾ
 * Desktop: tối đa 5 video 1 hàng, nhịp sóng (video chẵn hạ thấp), căn giữa;
 * > 5 video → slider có nút ‹ › 2 bên + thanh tiến trình.
 * Mobile: cuộn ngang ~1,6 video / màn (video kế lấp ló) + thanh tiến trình.
 * Biến chỉnh nhanh (trên .tmcnc-vid):
 *   --tmcnc-vid-cols   số video / màn (desktop 5, tablet 3) – video tự co cho vừa
 *   --tmcnc-vid-max    độ rộng tối đa 1 video
 *   --tmcnc-vid-gap    khoảng cách video
 *   --tmcnc-vid-wave   độ lệch sóng của video chẵn (0 = thẳng hàng)
 * ========================================================= */
.tmcnc-vid {
  --tmcnc-vid-cols: 5;
  --tmcnc-vid-max: 268px;
  --tmcnc-vid-gap: 24px;
  --tmcnc-vid-wave: 40px;

  position: relative;
  width: 100%;
  padding: 72px 0 76px;
}

.tmcnc-vid__inner {
  position: relative;
  z-index: 1;
  width: min(1434px, calc(100% - 80px));
  margin: 0 auto;
}

.tmcnc-vid .tmcnc-heading {
  margin-bottom: 40px;
}

.tmcnc-vid__slider {
  --tmcnc-slider-gap: var(--tmcnc-vid-gap);

  padding: 0 64px;
}

.tmcnc-vid__viewport {
  /* đệm ngang 32px + margin âm 28px: giữ nguyên độ rộng vùng chứa video,
     nhưng bóng đổ video đầu / cuối không bị vùng cuộn cắt thành vệt thẳng */
  margin: 0 -28px;
  padding: 24px 32px calc(var(--tmcnc-vid-wave) + 40px);
}

/* Căn giữa khi ít video; khi tràn, margin auto = 0 → không mất video đầu */
.tmcnc-vid__item:first-child {
  margin-left: auto;
}

.tmcnc-vid__item:last-child {
  margin-right: auto;
}

.tmcnc-vid__item {
  width: min(
    var(--tmcnc-vid-max),
    calc((100% - (var(--tmcnc-vid-cols) - 1) * var(--tmcnc-vid-gap)) / var(--tmcnc-vid-cols))
  );
}

.tmcnc-vid__item:nth-child(even) {
  margin-top: var(--tmcnc-vid-wave);
}

.tmcnc-vid__item .tmcnc-video {
  transition: translate 0.4s cubic-bezier(0.22, 0.61, 0.36, 1), box-shadow 0.4s ease;
}

.tmcnc-vid__item:hover .tmcnc-video {
  translate: 0 -8px;
  box-shadow: 0 24px 44px rgba(69, 17, 128, 0.34);
}

/* Nút ‹ › 2 bên */
#tmcnc-landing .tmcnc-vid__nav {
  position: absolute;
  top: calc(50% - 24px);
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  min-height: 0;
  margin: 0;
  padding: 0;
  border: 1.5px solid rgba(255, 255, 255, 0.9);
  border-radius: 50%;
  background: var(--tmcnc-grad-title-1);
  box-shadow: 0 8px 18px rgba(150, 21, 210, 0.3);
  color: #fff;
  cursor: pointer;
  transition: scale 0.25s ease;
}

#tmcnc-landing .tmcnc-vid__nav:hover {
  scale: 1.08;
}

#tmcnc-landing .tmcnc-vid__nav:focus-visible {
  outline: 3px solid var(--tmcnc-violet);
  outline-offset: 3px;
}

.tmcnc-vid__nav--prev { left: 0; }
.tmcnc-vid__nav--next { right: 0; }

#tmcnc-landing .tmcnc-slider.is-static .tmcnc-vid__nav {
  display: none;
}

.tmcnc-vid__progress {
  max-width: 420px;
  margin: 0 auto;
}

/* ----- Laptop / tablet ----- */
@media (max-width: 1199px) {
  .tmcnc-vid {
    --tmcnc-vid-cols: 3;
    --tmcnc-vid-gap: 18px;
    --tmcnc-vid-wave: 28px;
  }

  .tmcnc-vid__slider {
    padding: 0 60px;
  }
}

/* ----- Mobile ----- */
@media (max-width: 768px) {
  .tmcnc-vid {
    --tmcnc-vid-cols: 1.6; /* ~1,6 video / màn → video kế lấp ló */
    --tmcnc-vid-max: 250px;
    --tmcnc-vid-gap: 12px;
    --tmcnc-vid-wave: 0px;

    padding: 40px 0 44px;
  }

  .tmcnc-vid__inner {
    width: calc(100% - 24px);
  }

  .tmcnc-vid .tmcnc-heading {
    margin-bottom: 20px;
  }

  .tmcnc-vid__slider {
    padding: 0;
  }

  .tmcnc-vid__viewport {
    margin: 0 -12px;
    padding: 8px 12px 40px; /* đủ chỗ cho bóng đổ video, tránh vệt cắt */
    scroll-padding-inline: 12px;
    cursor: auto;
  }

  #tmcnc-landing .tmcnc-vid__nav {
    display: none;
  }

  .tmcnc-vid__item:hover .tmcnc-video {
    translate: none;
  }

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

  .tmcnc-vid__progress {
    max-width: 200px;
    margin-top: -12px;
  }
}

/* =========================================================
 * SECTION: ĐỐI TÁC CỦA PHÒNG KHÁM (copy nguyên từ trang chủ tổng hợp)
 * 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 .tmcnc-partners):
 *   --tmcnc-partners-slot-w : chiều rộng 1 ô logo (gồm khoảng trống)
 *   --tmcnc-partners-logo-w / -logo-h : kích thước tối đa logo trong ô
 *   --tmcnc-partners-speed  : thời gian chạy hết 1 vòng (càng lớn càng chậm)
 *   --tmcnc-partners-fade   : độ rộng vùng mờ 2 mép
 * ========================================================= */
.tmcnc-partners {
  --tmcnc-partners-slot-w: 330px;
  --tmcnc-partners-logo-w: 200px;
  --tmcnc-partners-logo-h: 64px;
  --tmcnc-partners-speed: 38s;
  --tmcnc-partners-fade: 14%;

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

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

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

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

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

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

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

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

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

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

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

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

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

    padding: 26px 0 30px;
    background: #fff;
  }

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

  .tmcnc-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) {
  .tmcnc-partners__marquee {
    overflow-x: auto;
  }
}

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

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

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

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

.tmcnc-faq__item {
  position: relative;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  .tmcnc-faq__aside {
    position: static;
  }
}

/* ----- Mobile ----- */
@media (max-width: 768px) {
  .tmcnc-faq {
    padding: 28px 16px 40px;
  }

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

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

  .tmcnc-faq__list {
    gap: 14px;
  }

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

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

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

/* Tiêu đề FAQ của LP này: "Câu hỏi" / "thường gặp" / pill "Giải đáp cùng chuyên gia".
   Tiêu đề dài hơn LP phun mày → cột trái tối thiểu 490px (cột câu hỏi co lại ở màn 1200–1500). */
.tmcnc-faq__sub {
  margin: 2px 0 0;
}

@media (min-width: 1200px) {
  .tmcnc-faq__inner {
    grid-template-columns: minmax(490px, 1fr) minmax(0, 896px);
    gap: 40px;
  }
}

#tmcnc-landing .tmcnc-faq__heading .tmcnc-pill-title {
  margin-top: 14px;
}

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