/* =========================================================
   🌙 t2tDigital · STT ĐÊM KHUYA · v2.2 (scoped styles)
   - Hoàn toàn nằm trong .t2t-stt (không đụng global)
   - Palette đêm ấm, “đom đóm” thương hiệu
   - Quote chính nổi bật kem ấm + underline mảnh
   - Divider thơ mờ dần, full-width trắng trước CTA
   ========================================================= */

.t2t-stt {
  /* palette đêm */
  --stt-ink: var(--t2t-text-light, #e8f6ff);
  --stt-sub: rgba(255, 255, 255, 0.76);
  --stt-dim: rgba(255, 255, 255, 0.56);
  --stt-soft: rgba(255, 255, 255, 0.12);
  --stt-accent: var(--t2t-brand-primary, #00ffd5);
  --stt-accent-2: var(--t2t-brand-secondary, #00b7ff);
  --stt-cream: #ffe9c2; /* màu quote chính */
  --stt-glow: 0 0 0.6rem color-mix(in oklab, var(--stt-accent), #fff 18%);
  --stt-gap: clamp(16px, 2.2vmin, 24px); /* spacing nhịp đêm */
  --stt-max: clamp(720px, 90vw, 980px); /* chiều rộng thống nhất */
  --stt-body-pad: min(4vw, 18px);
  color: var(--stt-ink);
}

/* —— STT · Body container —— */
.t2t-stt .t2t-mf-body {
  max-width: var(--stt-max); /* canh giữa cùng khung với quote */
  margin: 2rem auto 3.6rem; /* tạo nhịp dọc mềm */
  padding: 0 var(--stt-body-pad); /* sử dụng biến chuẩn biên trái/phải */
}
.t2t-stt .t2t-mf-body p {
  margin: 0.9rem 0; /* nhịp câu trong lời ngỏ */
}

/* ---------- NAV (top/bottom) ---------- */
.t2t-stt .t2t-stt-nav {
  display: flex;
  gap: 0.5rem;
  justify-content: center;
  margin: 1.25rem 0 0.5rem;
}
.t2t-stt .t2t-stt-nav a {
  padding: 0.42rem 0.8rem;
  border-radius: 999px;
  text-decoration: none;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.02));
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: var(--stt-accent-2);
  font-size: 0.95rem;
}
.t2t-stt .t2t-stt-nav a:hover {
  color: var(--stt-accent);
  box-shadow: var(--stt-glow);
}

/* ---------- LỜI NGỎ ---------- */

/* Mặc định: mọi .t2t-intro trong trang STT */
.t2t-stt .t2t-intro {
  max-width: var(--stt-max);
  margin: 1.25rem auto 1.75rem;
  padding: 0 0.75rem; /* cho mobile đỡ dính mép, giữ hay bỏ tùy huynh */
  color: var(--stt-sub);
  line-height: 1.75;
}

/* Intro nằm ngay sau nav – chỉ nới nhịp trên/dưới, vẫn giữ max-width */
.t2t-stt-nav + .t2t-intro {
  max-width: var(--stt-max);
  margin: 2.4rem auto 2.4rem;
}

/* Manifesto – khổ thơ dùng intro nhưng cần nhịp chặt hơn */
.t2t-stt-manifesto .t2t-intro {
  max-width: var(--stt-max);
  margin: 0.35rem auto 0.55rem;
}

/* Link inline trong intro */
.t2t-stt .t2t-inline-link {
  color: var(--stt-accent);
}
.t2t-stt .t2t-inline-link:hover {
  color: var(--stt-accent-2);
}

/* ---------- KHỐI QUOTE ---------- */
.t2t-stt .t2t-after2am-item {
  max-width: var(--stt-max);
  margin: 1.25rem auto;
}
.t2t-stt .t2t-stt-quote {
  position: relative;
  margin: 0;
  padding: 1.1rem 1rem 1rem 1.25rem;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.09);
}
/* vạch đứng xanh nhạt ở trái mỗi quote */
.t2t-stt .t2t-stt-quote::before {
  content: '';
  position: absolute;
  left: 0.55rem;
  top: 0.9rem;
  bottom: 0.9rem;
  width: 3px;
  border-radius: 3px;
  background: linear-gradient(180deg, var(--stt-accent), transparent);
}
/* quote chính: kem ấm + gạch mảnh */
.t2t-stt .t2t-quote-main {
  color: var(--stt-cream);
  font-style: italic;
  font-size: clamp(1.06rem, 2.2vmin + 0.6rem, 1.35rem);
  line-height: 1.7;
  margin: 0 0 0.35rem;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.25);
}
.t2t-stt .t2t-quote-main::after {
  content: '';
  display: block;
  width: 38%;
  height: 2px;
  margin: 0.5rem 0 0;
  background: linear-gradient(90deg, rgba(255, 233, 194, 0.9), rgba(255, 233, 194, 0));
}
/* chữ ký thương hiệu: gradient + “đom đóm” khi hover */
.t2t-stt .t2t-signature {
  display: inline-block;
  margin: 0.2rem 0 0.2rem 0.25rem;
  background: linear-gradient(90deg, var(--stt-accent) 0%, var(--stt-accent-2) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  opacity: 0.9;
  transition: filter 0.25s, opacity 0.25s;
}
.t2t-stt .t2t-signature:hover {
  filter: drop-shadow(0 0 0.6rem var(--stt-accent));
  opacity: 1;
}

/* context + meta thời gian */
.t2t-stt .t2t-quote-context {
  color: var(--stt-sub);
  margin: 0.4rem 0 0.25rem;
  line-height: 1.7;
}
.t2t-stt .t2t-quote-meta {
  color: var(--stt-dim);
  font-size: 0.92rem;
}

/* keyword pills */
.t2t-stt .t2t-keywords {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin: 0.55rem 0 0;
  padding: 0;
}
.t2t-stt .t2t-keywords li {
  list-style: none;
}
.t2t-stt .t2t-keywords a {
  display: inline-block;
  padding: 0.28rem 0.6rem;
  border-radius: 999px;
  font-size: 0.9rem;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: var(--stt-ink);
  text-decoration: none;
}
.t2t-stt .t2t-keywords a:hover {
  color: var(--stt-accent);
  box-shadow: var(--stt-glow);
}

/* =========================================================
 * 🌙 STT ĐÊM KHUYA — DIVIDERS (Final v3.1)
 * ========================================================= */

/* 1. Divider thơ mờ dần giữa các quote (list STT) */
.t2t-stt .t2t-divider--poetic {
  height: 2px;
  margin: 1.15rem auto;
  max-width: 46ch;
  opacity: 0.85;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.35), transparent);
}

/* 2. Full-width divider trắng mờ (ngăn hero / block lớn) */
.t2t-stt .t2t-divider--full {
  height: 1px;
  margin: 1.25rem 0;
  border: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.55), transparent);
}

/* 3. Manifesto – divider ngắn, trắng “thở nhẹ” */
.t2t-stt-manifesto .t2t-stt-manifesto-divider {
  width: 4.5rem;
  height: 1px;
  margin: 1.6rem 0 1.8rem;
  background: linear-gradient(to right, rgba(255, 255, 255, 0.85), rgba(255, 255, 255, 0.1));
  opacity: 0.9;
  animation: stt-divider-breathe 1.6s ease-out 1;
}

/* Nhịp sáng “breathe” 1 lần khi load */
@keyframes stt-divider-breathe {
  from {
    opacity: 0;
    transform: translateX(-12px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* 4. Manifesto — Quote trắng minimal (không card, chỉ vạch đứng) */
.t2t-stt .t2t-stt-manifesto blockquote.t2t-stt-quote-white {
  background: transparent;
  border-radius: 0;
  box-shadow: none;
  border: 0;
  padding: 0.4rem 0 0.2rem 1.4rem; /* chừa chỗ cho vạch trắng */
  margin-top: 1.4rem;
}

/* =========================================================
 * 🌙 STT ĐÊM KHUYA — QUOTE POLISH (v1.1)
 *  - Làm chữ “thở” hơn, bar trái mịn hơn, không phá layout cũ
 * ========================================================= */

/* Thân quote chính trong card STT */
.t2t-stt .t2t-stt-quote .t2t-quote-main {
  font-size: clamp(1.02rem, 2vw, 1.22rem);
  line-height: 1.75;
  letter-spacing: 0.01em;
  word-spacing: 0.03em;
  color: rgba(255, 244, 225, 0.96);
  text-shadow: 0 0 10px rgba(0, 0, 0, 0.7);
}

/* Khoảng thở trên dưới cho quote trong card */
.t2t-stt blockquote.t2t-stt-quote {
  padding-top: 1.35rem;
  padding-bottom: 1.2rem;
}

/* Hàng “— t2tDigital” ngay dưới tiêu đề quote */
.t2t-stt .t2t-quote-author {
  font-size: 0.82rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.8;
}

/* Dòng caption cuối quote (date + note) – cho lắng hơn chút */
.t2t-stt .t2t-quote-meta {
  font-size: 0.82rem;
  opacity: 0.78;
}

/* 🌙 STT ĐÊM KHUYA — TỨ / NGŨ TRỤ (Final)
   4/5 câu linh hồn, đứng trên dòng thời gian */

.t2t-stt .t2t-stt-pillars {
  max-width: var(--stt-max);
  margin: 0 auto 2.8rem;
  padding: 0 1.25rem;
}

.t2t-stt .t2t-stt-pillars-head {
  max-width: 46rem;
  margin: 0 auto 1.8rem;
  font-size: 0.98rem;
  line-height: 1.7;
  color: var(--stt-sub, rgba(255, 255, 255, 0.78));
  text-align: center;
}

/* Mỗi trụ là một “card mỏng” không viền, chỉ có vạch và chữ */
.t2t-stt .t2t-stt-pillar {
  position: relative;
  padding-left: 1.5rem;
}

/* Divider giữa các trụ – nhịp thở đều */
.t2t-stt .t2t-stt-pillar + .t2t-stt-pillar {
  margin-top: 1.9rem;
  padding-top: 1.6rem;
}

.t2t-stt .t2t-stt-pillar + .t2t-stt-pillar::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0.1rem;
  right: 0;
  height: 1px;
  opacity: 0.85;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.42), transparent);
}

/* Vạch đứng mảnh cho từng trụ */
.t2t-stt .t2t-stt-pillar::after {
  content: '';
  position: absolute;
  top: 0.2rem;
  bottom: 0.2rem;
  left: 0;
  width: 2px;
  border-radius: 999px;
  background: linear-gradient(
    to bottom,
    rgba(0, 255, 213, 0.9),
    rgba(0, 183, 255, 0.4),
    rgba(0, 183, 255, 0.06)
  );
}

/* Câu triết lý chính */
.t2t-stt .t2t-stt-pillar-main {
  font-size: clamp(1.15rem, 2.4vw, 1.35rem);
  font-style: italic;
  color: rgba(255, 245, 225, 0.96);
  margin: 0 0 0.55rem;
  text-shadow: 0 0 14px rgba(0, 0, 0, 0.85);
}

/* Context đời, giải thích sâu */
.t2t-stt .t2t-stt-pillar-note {
  margin: 0 0 0.4rem;
  font-size: 0.98rem;
  line-height: 1.7;
  color: var(--stt-body, rgba(255, 255, 255, 0.84));
}

/* Xuất xứ mềm, giọng thì thầm */
.t2t-stt .t2t-stt-pillar-origin {
  margin: 0.15rem 0 0;
  font-size: 0.9rem;
  font-style: italic;
  color: var(--stt-sub, rgba(255, 255, 255, 0.68));
  opacity: 0.9;
}

/* Vạch đứng trắng mờ dần xuống dưới */
.t2t-stt .t2t-stt-manifesto blockquote.t2t-stt-quote-white::before {
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.1));
}

/* Nhịp thở giữa Tứ Trụ và quote đầu tiên */
.t2t-stt-pillars + .t2t-after2am-item {
  margin-top: 3.4rem; /* huynh có thể thử 3.0 – 3.6rem để chọn nhịp vừa mắt */
}

/* =========================================================
 * 🌙 STT ĐÊM KHUYA — KẾT TRANG (Final v3.1)
 * ========================================================= */

/* 1. Hai câu kết trang ("Đêm không chỉ tối...") */
.t2t-stt .t2t-stt-manifesto-end {
  max-width: var(--stt-max);
  margin: 2.4rem auto 0.75rem; /* cách manifesto trên một nhịp thở */
  text-align: center;
}

.t2t-stt .t2t-stt-manifesto-end .t2t-stt-manifesto-line {
  font-size: clamp(1.05rem, 2.6vw, 1.3rem);
  line-height: 1.7;
  opacity: 0.92;
  color: rgba(255, 255, 255, 0.92);
  margin: 0.25rem 0;
  font-style: italic; /* một chút thì thầm, không quá “hô khẩu hiệu” */
  text-shadow: 0 0 12px rgba(0, 0, 0, 0.55);
}

/* 2. ENDNOTE + CTA mềm ở cuối trang STT */
.t2t-stt .t2t-stt-endnote {
  max-width: var(--stt-max);
  margin: 1.1rem auto 1.6rem; /* cách hai câu kết một nhịp nhỏ */
  text-align: center;
}

/* từng dòng endnote */
.t2t-stt .t2t-stt-endnote .t2t-endline {
  margin: 0.3rem 0;
  color: var(--stt-sub);
  font-size: clamp(0.95rem, 2.1vw, 1.1rem);
}

/* link CTA mềm */
.t2t-stt .t2t-stt-endnote .t2t-mini-link {
  color: var(--stt-accent);
  text-decoration: none;
}

.t2t-stt .t2t-stt-endnote .t2t-mini-link:hover {
  color: var(--stt-accent-2);
  text-decoration: underline;
}

/* INTRO TYPO — dùng chung cho mọi viewport
   - Boost sáng nhẹ + halo đều mép */
.t2t-stt #stt-hero .stt-intro p {
  font-size: clamp(0.95rem, 0.3vw + 0.9rem, 1.06rem);
  color: rgba(255, 255, 255, 0.92);
  opacity: 0.97;
  text-shadow: 0 0 10px rgba(0, 0, 0, 0.75), 0 0 14px rgba(0, 0, 0, 0.65);
}

/* câu nghiêng (soft line) */
.t2t-stt #stt-hero .stt-intro .t2t-line-soft {
  color: rgba(255, 255, 255, 0.965);
  opacity: 0.99;
  text-shadow: 0 0 14px rgba(0, 0, 0, 0.85), 0 0 22px rgba(0, 0, 0, 0.78);
}

/* Chữ nghiêng nhẹ, sáng nhẹ ở trung tâm, tắt dần ở rìa */
.t2t-stt-manifesto-line {
  opacity: 0.92;
  font-style: italic;
  color: rgba(255, 255, 255, 0.88);
  margin: 1.2rem 0 2rem;
  text-shadow: 0 0 8px rgba(0, 0, 0, 0.55);
}

/* 🌙 INTRO · Tối ưu nhịp thở */
.t2t-stt .t2t-intro {
  font-size: 1.02rem;
  max-width: var(--stt-max);
  margin: 1.4rem auto 1.9rem;
  line-height: 1.78;
  letter-spacing: 0.01em;
  color: var(--stt-sub);
  text-align: center;
}

/* Khối dẫn TỨ TRỤ – sâu, lặng hơn một nhịp */
.t2t-stt-pillars .t2t-intro {
  margin: 1rem auto 1.6rem;
  line-height: 1.8;
  opacity: 0.92;
}

/* Nhịp mở đầu của TỨ TRỤ */
.t2t-stt-pillars-head p {
  margin-bottom: 1.4rem;
}

/* Modifier: intro canh trái */
.t2t-intro.t2t-left {
  text-align: left;
}

/* 🌙 TỨ TRỤ — Hover cực nhẹ, không phá độ tĩnh */
.t2t-stt .t2t-stt-pillar {
  transition: transform 0.22s ease-out, box-shadow 0.28s ease-out;
  will-change: transform;
}

.t2t-stt .t2t-stt-pillar:hover {
  transform: translateY(-2px);
}

.t2t-stt .t2t-stt-pillar:hover::before {
  box-shadow: 0 0 12px rgba(0, 255, 213, 0.85), 0 0 26px rgba(0, 0, 0, 0.96);
}

/* =========================================================
 * 🌙 STT ĐÊM KHUYA — TỨ / NGŨ TRỤ · SCROLL REVEAL (v1.1)
 *  - Mặc định: trụ hơi mờ & thấp
 *  - Khi scroll tới: fade + nhích lên nhẹ
 *  - Desktop: hover vẫn nâng thêm một chút
 * ========================================================= */

/* Trạng thái mặc định: hơi thấp & mờ, chờ được “gọi tên” */
.t2t-stt .t2t-stt-pillars .t2t-stt-pillar {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.55s ease-out, transform 0.55s ease-out;
}

/* Stagger rất nhẹ giữa các trụ – cho cảm giác lần lượt “đứng dậy” */
.t2t-stt .t2t-stt-pillars .t2t-stt-pillar:nth-of-type(2) {
  transition-delay: 0.08s;
}
.t2t-stt .t2t-stt-pillars .t2t-stt-pillar:nth-of-type(3) {
  transition-delay: 0.16s;
}
.t2t-stt .t2t-stt-pillars .t2t-stt-pillar:nth-of-type(4) {
  transition-delay: 0.24s;
}

/* Khi được IntersectionObserver “gọi” → trụ về đúng vị trí & rõ nét */
.t2t-stt .t2t-stt-pillars .t2t-stt-pillar.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Desktop hover: chỉ nâng khi đã visible, để khỏi giật trên mobile */
@media (hover: hover) and (pointer: fine) {
  .t2t-stt .t2t-stt-pillars .t2t-stt-pillar.is-visible:hover {
    transform: translateY(-4px);
  }
}

/* Tôn trọng người dùng hạn chế chuyển động */
@media (prefers-reduced-motion: reduce) {
  .t2t-stt .t2t-stt-pillars .t2t-stt-pillar {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* 🌙 STT Đêm Khuya — Divider glow trễ nhịp một chút */
.t2t-stt .t2t-stt-manifesto-divider,
.t2t-stt .t2t-divider--poetic {
  animation-name: t2t-divider-glow;
  animation-duration: 1.4s;
  animation-timing-function: ease-out;
  animation-fill-mode: forwards;
  animation-delay: 5s; /* >2s để người xem “ngấm” hero & manifesto trước */
  opacity: 0;
}

/* Nếu huynh đã có @keyframes t2t-divider-glow rồi thì giữ nguyên.
   Nếu chưa, có thể dùng lại: */

@keyframes t2t-divider-glow {
  0% {
    opacity: 0;
    box-shadow: none;
  }
  40% {
    opacity: 0.95;
    box-shadow: 0 0 12px rgba(0, 255, 213, 0.55);
  }
  100% {
    opacity: 0.45;
    box-shadow: 0 0 0 rgba(0, 0, 0, 0);
  }
}

/* Elementor Editor – luôn hiển thị Tứ Trụ để dễ soạn nội dung */
.elementor-editor-active .t2t-stt .t2t-stt-pillars .t2t-stt-pillar {
  opacity: 1 !important;
  transform: none !important;
  animation: none !important;
}

/* =========================================================
   🌙 t2tDigital · STT ĐÊM KHUYA · HERO (Background Model) + Mood
   v5.0 CLEAN — Single Source of Truth (SSOT)
   - Hero = Elementor Container background
   - Hero owns height (fix "cha ghẻ 27px" -> overlay rớt)
   - Fullbleed vw + svw
   - Overlay system: t2t-overlay-text + t2t-bottom-left/right (ONLY)
   - Mood panel fade edges (no mask)
   Scope: .t2t-stt only
========================================================= */

.t2t-stt {
  /* palette + nhịp */
  --stt-ink: var(--t2t-text-light, #e8f6ff);
  --stt-sub: rgba(255, 255, 255, 0.76);
  --stt-dim: rgba(255, 255, 255, 0.56);
  --stt-soft: rgba(255, 255, 255, 0.12);
  --stt-accent: var(--t2t-brand-primary, #00ffd5);
  --stt-accent-2: var(--t2t-brand-secondary, #00b7ff);
  --stt-glow: 0 0 0.6rem color-mix(in oklab, var(--stt-accent), #fff 18%);
  --stt-gap: clamp(14px, 2.2vmin, 22px);

  /* hero tokens */
  --stt-hero-radius: var(--hero-radius, 18px);
  --stt-hero-min: clamp(520px, 56.25vw, 920px); /* desktop */
  --stt-hero-pad: clamp(16px, 3.2vw, 36px);

  color: var(--stt-ink);
  overflow-x: clip;
}

/* =========================================================
   [SSOT] STT · HERO overlay + title/subtitle/subline sizing
   - Consolidated (v2.2 carry-over) into v5 CLEAN
   - Scope: .t2t-stt #stt-hero only
========================================================= */

/* Overlay mood */
.t2t-stt #stt-hero.has-overlay::after{
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  background: radial-gradient(
    120% 80% at var(--hero-focal-x, 60%) var(--hero-focal-y, 40%),
    transparent 0 48%,
    rgba(0,0,0,.55) 72%,
    rgba(0,0,0,.82) 100%
  );
}

/* Đảm bảo text nằm trên overlay */
.t2t-stt #stt-hero .t2t-overlay-text{
  position: relative;
  z-index: 2;
}

/* Subtitle: dùng màu brand secondary (thay vì emotion) */
.t2t-stt #stt-hero .t2t-mf-subtitle{
  margin-bottom: .25rem;
  color: var(--t2t-brand-secondary, #00b7ff);
}

/* Title sizing (Mobile boost) */
.t2t-stt #stt-hero .t2t-mf-title{
  font-size: clamp(1.9rem, 4.8vw + 0.35rem, 2.6rem);
  line-height: 1.15;
  letter-spacing: .2px;

  /* fallback color nếu không dùng gradient */
  color: var(--t2t-emotion-soft, #eae3cf);
}

/* Nếu có .is-gradient: ép gradient ăn chắc (đè Kadence h1 color) */
.t2t-stt #stt-hero .t2t-mf-title.is-gradient{
  background-image: linear-gradient(
    90deg,
    var(--t2t-brand-primary, #00ffd5),
    var(--t2t-brand-secondary, #00b7ff)
  );
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent !important;
  -webkit-text-fill-color: transparent;
}

@media (max-width: 360px){
  .t2t-stt #stt-hero .t2t-mf-title{
    font-size: clamp(1.9rem, 5.6vw + 0.2rem, 2.45rem);
  }
}

/* Subline */
.t2t-stt #stt-hero .t2t-mf-subline{
  margin-top: .35rem;
  max-width: clamp(40ch, 6vw + 44ch, 66ch);
  text-wrap: balance;
}

@media (max-width: 767px){
  .t2t-stt #stt-hero .t2t-mf-subline{ max-width: 36ch; }
}

/* ---------------------------------------------------------
   1) HERO box (background handled by Elementor)
   - FIX ROOT CAUSE: hero MUST have height
--------------------------------------------------------- */
.t2t-stt #stt-hero {
  position: relative;
  min-height: var(--stt-hero-min) !important; /* critical */
  border-radius: var(--stt-hero-radius);
  overflow: hidden;
  isolation: isolate;

  /* background-image do Elementor set:
     background-size: cover;
     background-position: 55% 42%;
     background-repeat: no-repeat;
  */
}

/* Elementor hay tạo inner/wrap làm "cha ghẻ" co lại -> ép inherit chiều cao */
.t2t-stt #stt-hero > .e-con-inner,
.t2t-stt #stt-hero > .elementor-container,
.t2t-stt #stt-hero > .elementor-widget-wrap {
  min-height: inherit !important;
}

/* Fullbleed */
.t2t-stt #stt-hero.is-fullbleed {
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}
@supports (width: 100svw) {
  .t2t-stt #stt-hero.is-fullbleed {
    width: 100svw;
    max-width: 100svw;
    margin-left: calc(50% - 50svw);
    margin-right: calc(50% - 50svw);
  }
}

/* Overlay tint (để chữ nổi trên ảnh nền) */
.t2t-stt #stt-hero.has-overlay::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  background: radial-gradient(
    140% 120% at 20% 85%,
    rgba(0, 0, 0, 0.68) 0%,
    rgba(0, 0, 0, 0.45) 38%,
    rgba(0, 0, 0, 0.1) 70%,
    rgba(0, 0, 0, 0) 100%
  );
}

/* ---------------------------------------------------------
   2) HERO OVERLAY (ONLY ONE SYSTEM)
   - Adopt .t2t-overlay-text + modifiers t2t-bottom-left/right
   - STT: no vertical left bar, panel nhẹ
--------------------------------------------------------- */

/* overlay base */
.t2t-stt #stt-hero .t2t-overlay-text {
  position: absolute;
  z-index: 3; /* above tint (::after = 1) */
  color: var(--stt-ink);
  max-width: min(560px, calc(100% - (var(--stt-hero-pad) * 2)));
  padding: clamp(14px, 2.6vw, 22px);

  /* STT style: bỏ panel dày & vạch đứng */
  background: none;
  border-left: 0;
  border-radius: 12px;

  text-shadow: 0 0 12px rgba(0, 0, 0, 0.55);
}

/* ensure children keep base ink
   - dùng :where() để selector = 0 specificity -> KHÔNG đè các class con (subtitle/subline)
*/
.t2t-stt #stt-hero .t2t-overlay-text :where(p, em, strong, span, h1, h2, h3) {
  color: inherit;
}

/* Subtitle: brand secondary (phải thắng overlay) */
.t2t-stt #stt-hero .t2t-mf-subtitle {
  margin-bottom: 0.25rem;
  color: var(--t2t-brand-secondary, #00b7ff);
}

/* Subline: dùng emotion-soft như huynh muốn (thay vì dính stt-ink) */
.t2t-stt #stt-hero .t2t-mf-subline {
  color: var(--t2t-emotion-soft, #eae3cf);
}

/* bottom-left */
.t2t-stt #stt-hero .t2t-overlay-text.t2t-bottom-left {
  left: var(--stt-hero-pad);
  bottom: var(--stt-hero-pad);
  top: auto;
  right: auto;
  text-align: left;
}

/* bottom-right */
.t2t-stt #stt-hero .t2t-overlay-text.t2t-bottom-right {
  right: var(--stt-hero-pad);
  bottom: var(--stt-hero-pad);
  top: auto;
  left: auto;
  max-width: min(520px, calc(100% - (var(--stt-hero-pad) * 2)));
  text-align: left;

  /* STT: một chút “mood” cho khối phải */
  background: linear-gradient(270deg, rgba(0, 10, 16, 0.62), rgba(0, 10, 16, 0.22), transparent);
  border-radius: 12px;
}

/* Desktop lớn: bóp max-width để 2 khối không húc nhau */
@media (min-width: 1024px) {
  .t2t-stt #stt-hero .t2t-overlay-text.t2t-bottom-left {
    max-width: 520px;
  }
  .t2t-stt #stt-hero .t2t-overlay-text.t2t-bottom-right {
    max-width: 460px;
  }
}

/* Mobile: gom 1 cột (đỡ đè nhau) */
@media (max-width: 767.98px) {
  .t2t-stt #stt-hero {
    min-height: 72vh !important;
    border-radius: 16px;
  }

  .t2t-stt #stt-hero .t2t-overlay-text {
    left: 16px;
    right: 16px;
    max-width: none;
    padding: 14px 16px;
    text-align: left;
  }

  .t2t-stt #stt-hero .t2t-overlay-text.t2t-bottom-left {
    bottom: 132px;
  }
  .t2t-stt #stt-hero .t2t-overlay-text.t2t-bottom-right {
    bottom: 16px;
  }
}

/* =========================================================
   🌙 STT — LOCK subtitle color (t2tDigital tagline)
   Fix: bị theme/Elementor override màu
========================================================= */
.t2t-stt #stt-hero .t2t-overlay-text .t2t-mf-subtitle{
  text-shadow: 0 0 14px rgba(0,0,0,.7), 0 0 18px rgba(0,183,255,.18) !important;
}

/* =========================================================
   🌙 STT HERO — Final positioning rules (clean & explicit)
   Targets ONLY the two hero overlay blocks:
   - H1 block: .t2t-overlay-text.t2t-bottom-left
   - Intro  : .t2t-overlay-text.t2t-overlay--intro (currently has t2t-bottom-right in markup)
========================================================= */

/* --- Keep intro panel "no background" as already decided --- */
.t2t-stt #stt-hero .t2t-overlay-text.t2t-overlay--intro{
  background: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}

/* =========================================================
   1) DESKTOP (>=1024): ABSOLUTE overlay
   - H1: bottom-left
   - Intro: bottom-right
========================================================= */
@media (min-width: 1024px){
  .t2t-stt #stt-hero{
    position: relative;
    overflow: hidden; /* desktop ok */
  }

  /* H1 block → bottom-left */
  .t2t-stt #stt-hero .t2t-overlay-text.t2t-bottom-left{
    position: absolute !important;
    left: var(--stt-hero-pad, 22px) !important;
    right: auto !important;
    bottom: var(--stt-hero-pad, 22px) !important;
    top: auto !important;

    text-align: left !important;
    max-width: min(64vw, 720px) !important;
    z-index: 5 !important;
  }

  /* Intro → bottom-right (không sửa “nội dung/kiểu chữ”, chỉ sửa vị trí) */
  .t2t-stt #stt-hero .t2t-overlay-text.t2t-overlay--intro{
    position: absolute !important;
    right: var(--stt-hero-pad, 22px) !important;
    left: auto !important;
    bottom: var(--stt-hero-pad, 22px) !important;
    top: auto !important;

    text-align: left !important;
    max-width: min(46vw, 520px) !important;
    z-index: 6 !important;
  }
}

/* =========================================================
   🌙 STT HERO — Text overlay (CLEAN)
   Desktop: DO NOT TOUCH
   Intro:   DO NOT TOUCH (không khai báo gì về intro ở đây)
   Only:    Tablet + Mobile H1 overlay block (.t2t-bottom-left)
========================================================= */

/* =========================
   TABLET (768–1023.98px)
   - H1 block: top-right (top = 30px, right = 18px)
   - “Ngôn ngữ” chữ:
       tagline: left
       H1:      left (theo ý Thanh mới chốt)
       subline: right
========================= */
@media (min-width: 768px) and (max-width: 1023.98px){

  .t2t-stt #stt-hero{
    position: relative !important;
    overflow: hidden !important;
  }

  /* chỉ đảm bảo overlay text là absolute trong breakpoint này */
  .t2t-stt #stt-hero .t2t-overlay-text{
    position: absolute !important;
    inset: auto !important;
    transform: none !important;
  }

  /* H1 overlay block = top-right */
  .t2t-stt #stt-hero .t2t-overlay-text.t2t-bottom-left{
    top: 30px !important;
    right: var(--stt-hero-pad, 18px) !important;
    left: auto !important;
    bottom: auto !important;

    max-width: min(72vw, 620px) !important;
    z-index: 5 !important;

    /* container neo phải (để cảm giác “đứng góc phải”) */
    text-align: right !important;
  }

  /* Tagline: left */
  .t2t-stt #stt-hero .t2t-overlay-text.t2t-bottom-left .t2t-mf-subtitle{
    display: block !important;
    width: 100% !important;
    text-align: left !important;
  }

  /* H1: left — đánh thẳng vào ID để thắng mọi patch cũ */
  .t2t-stt #stt-hero .t2t-overlay-text.t2t-bottom-left #stt-hero-title{
    display: block !important;
    width: 100% !important;
    text-align: left !important;
  }

  /* Subline: right */
  .t2t-stt #stt-hero .t2t-overlay-text.t2t-bottom-left .t2t-mf-subline{
    display: block !important;
    width: 100% !important;
    text-align: right !important;
  }

  /* Intro → bottom-left (GIỮ NGUYÊN) */
  .t2t-stt #stt-hero .t2t-overlay-text.t2t-overlay--intro {
    left: var(--stt-hero-pad, 18px) !important;
    right: auto !important;
    bottom: var(--stt-hero-pad, 18px) !important;
    top: auto !important;

    max-width: min(72vw, 620px) !important;
    text-align: left !important;
    z-index: 6 !important;
  }
}

/* =========================
   MOBILE (<=767.98px)
   - H1 block full-width thật sự:
       left=0, right=0
       top=17px
       padding L/R = 17px
   - “Ngôn ngữ” chữ:
       tagline + H1: left
       subline: right (và full width để né đèn)
========================= */
@media (max-width: 767.98px){

  .t2t-stt #stt-hero{
    position: relative !important;
    overflow: hidden !important;
  }

  .t2t-stt #stt-hero .t2t-overlay-text{
    position: absolute !important;
    inset: auto !important;
    transform: none !important;
  }

  /* H1 overlay block full-width */
  .t2t-stt #stt-hero .t2t-overlay-text.t2t-bottom-left{
    top: 17px !important;

    left: 0 !important;
    right: 0 !important;
    bottom: auto !important;

    width: 100% !important;
    max-width: none !important;
    box-sizing: border-box !important;

    padding-left: 17px !important;
    padding-right: 17px !important;

    z-index: 5 !important;
    text-align: left !important; /* mặc định cho tagline + H1 */
  }

  /* Tagline + H1: left */
  .t2t-stt #stt-hero .t2t-overlay-text.t2t-bottom-left .t2t-mf-subtitle{
    display: block !important;
    width: 100% !important;
    text-align: left !important;
  }

  .t2t-stt #stt-hero .t2t-overlay-text.t2t-bottom-left #stt-hero-title{
    display: block !important;
    width: 100% !important;
    text-align: left !important;
  }

  /* Subline: MUST full width rồi mới canh phải có tác dụng */
  .t2t-stt #stt-hero .t2t-overlay-text.t2t-bottom-left .t2t-mf-subline{
    display: block !important;
    width: 100% !important;
    max-width: none !important;

    text-align: right !important;
    padding-right: 0 !important; /* không “lụt” vì padding cũ */
    white-space: normal !important;
  }

  /* Intro → bottom-left (GIỮ NGUYÊN TINH THẦN) */
  .t2t-stt #stt-hero .t2t-overlay-text.t2t-overlay--intro {
    left: var(--stt-hero-pad, 16px) !important;
    right: var(--stt-hero-pad, 16px) !important;
    bottom: var(--stt-hero-pad, 14px) !important;
    top: auto !important;

    max-width: none !important;
    text-align: left !important;
    z-index: 6 !important;
  }
}

/* =========================================================
   STT · MF Fade Edge (modifier only)
   - Chỉ tan biên trái/phải để hòa vào .t2t-archive-panel
   - KHÔNG tô nền toàn trang
   - KHÔNG biến .t2t-mf thành card
   Target: .t2t-mf.t2t-after2am trong không gian panel
========================================================= */

/* 1) đảm bảo MF trong STT vẫn là typography */
.t2t-stt .t2t-archive-panel .t2t-mf.t2t-after2am{
  position: relative !important;
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  overflow: visible !important;
  isolation: isolate;
}

/* 2) lớp tan biên */
.t2t-stt .t2t-archive-panel .t2t-mf.t2t-after2am::before{
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;

  /* độ rộng tan biên */
  --mf-fade-edge: clamp(28px, 5vw, 96px);

  /* tan vào nền panel (tone xanh đậm) */
  background: linear-gradient(
    90deg,
    rgba(6, 9, 14, 1) 0%,
    rgba(6, 9, 14, 0) var(--mf-fade-edge),
    rgba(6, 9, 14, 0) calc(100% - var(--mf-fade-edge)),
    rgba(6, 9, 14, 1) 100%
  );
}

/* 3) nội dung luôn nằm trên lớp fade */
.t2t-stt .t2t-archive-panel .t2t-mf.t2t-after2am > *{
  position: relative;
  z-index: 1;
}