/* ===============================
🎯 PHIÊN BẢN CSS TOÀN CỤC (in t2t-child) SAU KHI TÁI CẤU TRÚC BIẾN VAR
→ Dựa trên file CSS ngày 26.07.2025 và biến từ file t2t-vars-css.css
→ Đảm bảo giữ nguyên logic, thay thế triệt để giá trị tĩnh bằng var()
→ Viết lại toàn bộ từ đầu, comment đầy đủ, không sót 1 dòng nào
=============================== */

/* HOTFIX: giữ nền tối toàn cục khi chạy child */
html,
body {
  background: var(--t2t-bg-dark, #0a0f14) !important;
  color: var(--t2t-text-light, #e6f5ff);
}

/* 🔷 GẠCH CHÂN MENU KHI HOVER + ACTIVE */
.main-navigation ul li a {
  position: relative;
  transition: var(--t2t-transition);
}

.main-navigation ul li a::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 0;
  height: 2px;
  background: linear-gradient(
    to right,
    var(--t2t-color-brand-primary),
    var(--t2t-color-brand-secondary)
  );
  transition: width 0.4s ease-in-out;
}

.main-navigation ul li a:hover::after,
.main-navigation ul li.current-menu-item > a::after {
  width: 100%;
}

/* 🌫 MENU DROPDOWN – BO GÓC + MỜ */
.main-navigation ul ul {
  background-color: var(--t2t-bg-glass-dark);
  backdrop-filter: blur(4px);
  border-radius: var(--t2t-radius-small);
  overflow: hidden;
  padding: 0;
}

.main-navigation ul ul li a {
  padding: 10px 20px;
}

/* 🎯 CTA độc lập cho Header */
.t2t-header-cta {
  display: inline-block;
  padding: 10px 24px;
  font-weight: 600;
  color: var(--t2t-text-dark) !important;
  border-radius: 999px;
  background: linear-gradient(
    135deg,
    var(--t2t-color-brand-primary),
    var(--t2t-color-brand-secondary)
  );
  box-shadow: 0 4px 12px var(--t2t-text-glow);
  white-space: nowrap; /* 🏁 Không cho xuống dòng */
  transition: var(--t2t-transition);
}

.t2t-header-cta:hover {
  transform: scale(1.06);
  background: linear-gradient(
    135deg,
    var(--t2t-color-brand-secondary),
    var(--t2t-color-brand-primary)
  );
  box-shadow: 0 12px 26px var(--t2t-text-glow);
}

/* 🎯 CTA MENU HEADER – Cân đối desktop, giữ cảm xúc */
a.button.header-button.button-style-filled {
  background: linear-gradient(
    135deg,
    var(--t2t-color-brand-primary),
    var(--t2t-color-brand-secondary)
  ) !important;
  color: var(--t2t-text-dark) !important;
  border: none !important;
  border-radius: 99px !important;
  padding: 6px 16px !important; /* ✅ Nhỏ hơn nhưng vẫn rõ ràng */
  font-weight: 600;
  font-size: 15px;
  box-shadow: 0 3px 10px var(--t2t-text-glow);
  transition: var(--t2t-transition);
  transform-style: preserve-3d;
  will-change: transform, box-shadow;
  transition:
    transform 0.35s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.35s ease-in-out,
    background 0.35s ease-in-out;
}

a.button.header-button.button-style-filled:hover {
  background: linear-gradient(
    135deg,
    var(--t2t-color-brand-secondary),
    var(--t2t-color-brand-primary)
  ) !important;
  transform: scale(1.04);
  box-shadow: 0 8px 20px var(--t2t-text-glow);
}

.is-stuck a.button.header-button.button-style-filled {
  background: linear-gradient(
    135deg,
    var(--t2t-color-brand-primary),
    var(--t2t-color-brand-secondary)
  ) !important;
  color: var(--t2t-text-dark) !important;
  box-shadow: 0 3px 10px var(--t2t-text-glow) !important;
}

/* Tăng độ ưu tiên để ghi đè transition-duration: 0s của Elementor */
.t2t-cta .elementor-button {
  transition: all 0.4s ease-in-out !important;
  transform: scale(1);
  text-shadow: 0 0 6px rgba(255, 255, 255, 0.3);
  background: linear-gradient(
    135deg,
    var(--t2t-color-brand-primary),
    var(--t2t-color-brand-secondary)
  );
  color: var(--t2t-text-dark);
  font-weight: 700;
  padding: 10px 22px;
  border-radius: 999px;
  font-size: clamp(0.75rem, 1vw, 1.05rem);
  letter-spacing: 0.3px;
  box-shadow: var(--t2t-shadow-cta);
  border: none;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  transform-style: preserve-3d;
  will-change: transform, box-shadow;
}

.t2t-cta .elementor-button:hover {
  transform: scale(1.07) rotate(0.1deg);
  background: linear-gradient(
    135deg,
    var(--t2t-color-brand-secondary),
    var(--t2t-color-brand-primary)
  );
  box-shadow:
    0 12px 26px var(--t2t-text-glow),
    0 0 12px var(--t2t-color-border-accent);
  text-shadow: 0 0 12px var(--t2t-color-border-accent);
}

@media (max-width: 767px) {
  .t2t-cta .button-cta,
  .t2t-cta .elementor-button {
    padding: 10px 18px;
    font-size: clamp(0.8rem, 3.5vw, 0.95rem);
    box-shadow: 0 4px 12px var(--t2t-text-glow);
  }
}

/* 🧠 Nhóm tiếp theo: Hệ thống tiêu đề (H1, H2) và đoạn mở đầu */
/* 🌤️ H1 trên nền tối – Gradient chữ + gạch chân động */
.t2t-heading {
  display: inline-block;
  font-weight: 800;
  font-size: clamp(1.6rem, 2.2vw, 2.3rem) !important;
  background: linear-gradient(
    90deg,
    var(--t2t-color-brand-primary),
    var(--t2t-color-brand-secondary),
    #ddfaff,
    var(--t2t-color-brand-primary)
  );
  background-size: 300% 300%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: t2tTextGradient 8s ease-in-out infinite;
  position: relative;
  z-index: 1;
  text-align: center;
  line-height: 1.3;
  margin-bottom: 1.5em;
}

.t2t-heading::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0;
  height: 4px;
  width: 100%;
  background: linear-gradient(
    to right,
    var(--t2t-color-brand-primary),
    var(--t2t-color-brand-secondary)
  );
  border-radius: 999px;
  transform-origin: left;
  animation: t2tUnderlineAnim 17s ease-in-out infinite;
  opacity: 0.8;
}

/* 🌤️ H1 trên nền sáng */
.t2t-heading-light {
  display: inline-block;
  font-weight: 800;
  font-size: clamp(1.6rem, 2.2vw, 2.3rem) !important;
  background: linear-gradient(90deg, #0077aa, #00aaff, #77ddff, #0077aa);
  background-size: 300% 300%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: t2tTextGradient 8s ease-in-out infinite;
  position: relative;
  z-index: 1;
  text-align: center;
  line-height: 1.3;
  margin-bottom: 1.5em;
}

.t2t-heading-light::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0;
  height: 4px;
  width: 100%;
  background: linear-gradient(to right, #0077aa, #00aaff);
  border-radius: 999px;
  transform-origin: left;
  animation: t2tUnderlineAnim 17s ease-in-out infinite;
  opacity: 0.8;
}

/* ============================================
🌤️ H2 – Giao diện sáng: Gradient nhẹ, KHÔNG gạch chân
→ Dành cho tiêu đề phụ trên nền tối
→ Dịu mắt, giữ phong cách đồng bộ với H1
============================================ */
.t2t-h2 {
  font-weight: 700;
  font-size: clamp(1.3rem, 2.5vw, 2.2rem);
  background: linear-gradient(
    90deg,
    var(--t2t-color-brand-primary),
    var(--t2t-color-brand-secondary),
    #ddfaff,
    var(--t2t-color-brand-primary)
  );
  background-size: 300% 300%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: t2tTextGradient 8s ease-in-out infinite;
  position: relative;
  z-index: 1;
  text-align: center;
  line-height: 1.4;
  margin-bottom: 1.2em;
}

.t2t-h2-light {
  font-weight: 700;
  font-size: clamp(1.3rem, 2.5vw, 2.2rem);
  background: linear-gradient(90deg, #0077aa, #00aaff, #77ddff, #0077aa);
  background-size: 300% 300%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: t2tTextGradient 8s ease-in-out infinite;
  position: relative;
  z-index: 1;
  text-align: center;
  line-height: 1.4;
  margin-bottom: 1.2em;
}
/* H2 calm – giữ h2 để SEO tốt, giảm độ “la to” */
.t2t-h2--calm {
  font-size: clamp(22px, 3.2vw, 28px);
  font-weight: 700;
  line-height: 1.25;
  margin: 0.3rem 0 0.6rem;
}

/* Gạch chân gradient */
.t2t-h2::after,
.t2t-h2-light::after {
  content: '';
  position: absolute;
  bottom: -6px;
  left: 50%;
  transform: translateX(-50%);
  width: 60px;
  height: 3px;
  background: linear-gradient(
    to right,
    var(--t2t-color-brand-primary),
    var(--t2t-color-brand-secondary)
  );
  border-radius: 999px;
  display: block;
}

/* ===============================
🎞️ ANIMATION – Giữ nguyên vì không thể dùng var trong keyframes
=============================== */
@keyframes t2tTextGradient {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

@keyframes t2t-h2-gradient {
  0%,
  100% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
}

@keyframes t2t-h2-gradient-light {
  0%,
  100% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
}

@keyframes t2tUnderlineAnim {
  0% {
    width: 0%;
    opacity: 0;
    transform: translateY(0);
  }
  8% {
    width: 100%;
    opacity: 1;
  }
  10%,
  20%,
  30%,
  40% {
    transform: translateY(-1.5px);
  }
  15%,
  25%,
  35%,
  45% {
    transform: translateY(1.5px);
  }
  70% {
    transform: translateY(0);
  }
  85% {
    width: 100%;
  }
  95%,
  100% {
    width: 0%;
    opacity: 0;
  }
}

@keyframes fadeInLangle {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* 🌿 Dãn cách nhẹ cho tất cả đoạn văn trong toàn site */
p {
  margin-bottom: 0 !important;
}

p + p {
  margin-top: 12px !important;
}

html {
  scroll-behavior: smooth;
}

/* ===============================
🎨 STYLE ICON MẠNG XÃ HỘI – T2TDIGITAL (tái cấu trúc dùng var)
=============================== */
.icon-social {
  color: var(--t2t-color-brand-secondary);
  transition: var(--t2t-transition);
}

.icon-social:hover {
  color: var(--t2t-color-brand-primary);
}

/* ===============================
📦 FOOTER WIDGET HTML
=============================== */
.footer-middle .widget_html {
  width: 100% !important;
  max-width: 100% !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* ===============================
✨ T2T LANGLE FADE EFFECT (pure)
- Chỉ làm fade/opacity, KHÔNG đụng typography
=============================== */
.t2t-langle-fade {
  opacity: 0;
  animation: fadeInLangle 6s ease-in-out forwards;
}

/* Giữ “cỡ chữ note” cho khối Lặng Lẽ (Giới thiệu)
- Chỉ áp dụng khi vừa là hidden-note vừa là langle-fade
- Không ảnh hưởng Founder / các nơi khác
*/
.t2t-hidden-note.t2t-langle-fade {
  font-size: clamp(16px, 2.5vw, 22px);
}

/* ===============================
🧱 VÙNG NỘI DUNG CHÍNH – DÙNG CHO MỌI NỀN: TỐI HOẶC SÁNG
=============================== */
.t2t-block,
.t2t-block-light {
  max-width: var(--t2t-maxwidth-blog); /* 📏 800px */
  width: 100%;
  margin: 0 auto;
  padding: 0 var(--t2t-padding-blog-tablet); /* 📱 16px */
  font-size: clamp(16px, 3.5vw, 22px); /* ⚠️ Chưa có var font-size */
  line-height: 1.6; /* 🔧 Giữ giá trị cứng */
  text-align: left;
  box-sizing: border-box;
  word-break: break-word;
}

/* 🌑 GIAO DIỆN NỀN TỐI */
.t2t-block {
  color: var(--t2t-text-soft); /* #f2f2f2 */
}

/* 🌞 GIAO DIỆN NỀN SÁNG */
.t2t-block-light {
  color: var(--t2t-text-dark); /* #1a1a1a */
}

/* 📱 MOBILE TỐI ƯU */
@media (max-width: 767px) {
  .t2t-block,
  .t2t-block-light {
    padding: var(--t2t-padding-blog-mobile); /* 8px */
    box-sizing: border-box;
  }
}

/* ===============================
🔧 STYLE CODE INLINE TOÀN TRANG
=============================== */
.t2t-block code,
.t2t-hero-text code,
.t2t-section-fade code {
  font-family: var(--t2t-font-code) !important; /* Fira Code */
  font-size: 1em !important;
  color: var(--t2t-code-text); /* #ffd479 */
  background-color: var(--t2t-code-bg); /* rgba(255,255,255,0.08) */
  padding: 0.1em 0.3em;
  border-radius: var(--t2t-radius-small); /* 8px */
}

/* ============================================
🌠 Đoạn chuyển cảm xúc – Hiển thị dần, cảm xúc nhẹ
→ Dùng cho các đoạn dẫn nhập, chuyển mạch, hoặc thổ lộ
=============================================== */

.t2t-transition-text {
  opacity: 0;
  animation: fadeInSoft 2.5s ease-in-out 0.3s forwards;

  font-size: clamp(17px, 3vw, 20px);
  line-height: var(--t2t-lineheight-base); /* 1.6 */
  font-weight: 400;
  color: var(--t2t-text-soft); /* sáng, cảm xúc */

  text-shadow: 0 0 4px rgba(255, 255, 255, 0.05);
}

/* ☯️ Tuỳ chọn nếu muốn đổi màu (ít dùng vì mặc định đã mềm) */
.t2t-transition-dark {
  color: var(--t2t-text-light); /* #ffffff hoặc tone sáng hơn */
  text-shadow: 0 0 6px rgba(255, 255, 255, 0.1);
}

@keyframes fadeInSoft {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ==============================
🔹 FADE-IN ANIMATION – t2tDigital Style
============================== */

/* 🌀 Hiệu ứng trượt lên khi fade */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* Gốc hiệu ứng fade */
.t2t-fadein {
  opacity: 0;
  animation: fadeInUp 1.5s ease forwards;
}

/* Delay từng dòng với nhịp 1.5s + 0.3s */
.t2t-fadein-delay-0 {
  animation-delay: 0s;
}
.t2t-fadein-delay-1 {
  animation-delay: 1.8s;
}
.t2t-fadein-delay-2 {
  animation-delay: 3.6s;
}
.t2t-fadein-delay-3 {
  animation-delay: 5.4s;
}
.t2t-fadein-delay-4 {
  animation-delay: 7.2s;
}
.t2t-fadein-delay-5 {
  animation-delay: 9s;
}
.t2t-fadein-delay-6 {
  animation-delay: 10.8s;
}
.t2t-fadein-delay-7 {
  animation-delay: 12.6s;
}
.t2t-fadein-delay-8 {
  animation-delay: 14.4s;
}
.t2t-fadein-delay-9 {
  animation-delay: 16.2s;
}
.t2t-fadein-delay-10 {
  animation-delay: 18s;
}

/* 💫 Fade in cho từng section – áp dụng cho từng phần tử con */
.t2t-section-fade > * {
  opacity: 0;
  animation: fadeInUp 0.9s ease forwards;
  animation-delay: 0.3s;
}

/* 📜 Khung đoạn văn trái, giới hạn chiều rộng */
.t2t-text-left {
  max-width: 700px;
  margin: 0 auto;
  text-align: left;
  line-height: 1.8; /* giữ nguyên vì chưa có biến line-height-long */
}

/* ✍️ Dòng chữ như viết tay – trầm lắng, cảm xúc */
.t2t-handwriting {
  font-family: var(--t2t-font-emotion);
  font-style: italic;
  font-size: 1.2em;
  color: var(--t2t-emotion-soft); /* tone cảm xúc riêng biệt */
  padding-top: 0.5em;
  padding-bottom: 0.5em;
}

/* 📌 Caption ảnh minh hoạ – nhỏ, nghiêng, tinh tế */
.t2t-image-caption {
  font-size: 17px; /* giá trị đặc thù – không dùng var */
  font-style: italic;
  color: #f4eacb; /* trùng tone handwriting – sau này có thể gom biến */
  text-align: center;
  margin-top: 8px;
  line-height: 1.5; /* chưa cần biến riêng */
}

/* 📌 Căn giữa đoạn văn hoặc nút – khi không chỉnh được trong Elementor */
.t2t-text-center {
  text-align: center;
}

/* 💬 HERO TEXT – Đoạn mở đầu cảm xúc, ngắt dòng có biểu cảm */
.t2t-hero-text {
  padding: 28px 32px;
  font-size: clamp(17px, 3vw, 21px);
  line-height: 1.9; /* riêng biệt – chưa có biến */
  color: var(--t2t-text-soft); /* #f1f1f1 → gần tone text-soft */
  max-width: 860px;
  margin: 0 auto;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 1.2em;
  word-break: break-word;
}

/* 👉 Riêng cho mobile: padding nhỏ hơn để không quá dày */
@media (max-width: 767px) {
  .t2t-hero-text {
    padding: 8px 2px;
  }
}

/* ===== Quote chuẩn (có hỗ trợ tiếng Việt, hết lỗi dấu trên Chrome/Cốc Cốc) ===== */
.t2t-quote {
  border-left: 6px solid;
  border-image: linear-gradient(
      to bottom,
      var(--t2t-color-brand-primary),
      var(--t2t-color-brand-secondary)
    )
    1;
  padding: 12px 20px;
  margin: 10px 0 10px;

  font-style: italic;
  font-weight: 500;
  font-family: var(--t2t-font-serif); /* ✅ Merriweather */
  font-size: 1.05em;
  line-height: 1.7;

  /* Render ổn định trên Windows/Blink */
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-kerning: normal;
  font-feature-settings: 'liga', 'clig', 'kern'; /* ligature + kerning */
  font-variant-ligatures: common-ligatures;

  background: var(--t2t-code-bg);
  border-radius: var(--t2t-radius-small);
  color: var(--t2t-text-quote);
}

/* 💛 Quote cảm xúc – tone kem bơ nhẹ */
.t2t-quote.t2t-quote-emotion {
  border-image: none;
  border-left-color: var(--t2t-emotion-soft); /* #eae3cf */
}

/* 🎯 Câu kết – quote cuối bài (giàu cảm xúc hơn) */
.t2t-quote-final {
  border-left: 6px solid;
  border-image: linear-gradient(
      to bottom,
      var(--t2t-color-brand-primary),
      var(--t2t-color-brand-secondary)
    )
    1;
  padding: 10px 16px;
  margin: 10px 0;

  font-style: italic;
  font-weight: 500;
  font-family: var(--t2t-font-emotion); /* ✅ Cormorant Infant */
  font-size: 1.03em;
  line-height: 1.7;

  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-kerning: normal;
  font-feature-settings: 'liga', 'clig', 'kern';
  font-variant-ligatures: common-ligatures;

  background: var(--t2t-code-bg);
  border-radius: var(--t2t-radius-small);
  color: var(--t2t-text-quote);
}

/* 📋 Danh sách quote – dùng trong block hoặc phần chuyển đoạn */
.t2t-quote-list {
  list-style: none;
  padding-left: 0;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
  font-size: clamp(16px, 3vw, 18px);
  line-height: 1.6;
  color: var(--t2t-emotion-soft); /* #eae3cf */
}

/* ✨ Box nhấn cảm xúc giữa bài – tạo điểm dừng cảm xúc nhẹ */
.t2t-highlight-box {
  background: rgba(255, 255, 255, 0.06);
  padding: 8px 16px;
  border-left: 4px solid var(--t2t-color-border-accent);
  margin: 16px 0;
  font-weight: 500;
  font-size: 1.25em;
  font-family: var(--t2t-font-emotion);
  line-height: 1.8;
  color: #f0f8ff;
  border-radius: var(--t2t-radius-medium);
}

/* 🌟 Nhấn CTA trong quote cuối – dạng inline */
.t2t-cta-inline {
  font-weight: 600;
  font-family: var(--t2t-font-emotion);
  color: var(--t2t-color-brand-secondary);
  transition: var(--t2t-transition);
  display: inline-block;
}

/* ✨ Hover CTA – tỏa sáng nhẹ (áp dụng cho dạng inline mới) */
.t2t-cta-inline:hover {
  color: var(--t2t-text-light); /* #ffffff */
  transform: scale(1.015);
  text-shadow: 0 0 4px rgba(0, 255, 255, 0.4);
  cursor: pointer;
}

/* 📱 Mobile: tinh chỉnh cho quote cuối bài */
@media (max-width: 767px) {
  .t2t-quote-final {
    padding: 6px 12px;
    font-size: clamp(15px, 4vw, 17px);
    line-height: 1.6;
  }
}

/* ===================================================
📐 .t2t-hero-section-2col – layout Flex 2 cột (ảnh là IMG)
→ Dùng khi ảnh nằm trong thẻ img, không phải background-image
→ Cột trái chứa .t2t-hero-text, cột phải chứa .t2t-hero-img-wrapper
====================================================== */
.t2t-hero-section-2col {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: stretch;
  gap: var(--t2t-spacing-lg);
  box-sizing: border-box;
}

/* 🧱 Cột trái – Text */
.t2t-hero-section-2col > .t2t-hero-text {
  flex: 1 1 50%;
  max-width: 50%;
  box-sizing: border-box;
}

/* 🧱 Cột phải – Ảnh (IMG wrapper) */
.t2t-hero-section-2col > .t2t-hero-img-wrapper {
  flex: 1 1 50%;
  max-width: 50%;
  box-sizing: border-box;
  position: relative;
  overflow: hidden;
  z-index: 1;
  border-radius: var(--t2t-radius-medium);
}

/* 🖼️ Ảnh dạng thẻ img bên trong */
.t2t-hero-img {
  width: 100% !important;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: var(--t2t-radius-medium);
}

/* ✅ Tablet: co layout thành 1 cột */
@media (max-width: 1024px) {
  .t2t-hero-section-2col {
    flex-direction: column;
  }

  .t2t-hero-section-2col > .t2t-hero-text,
  .t2t-hero-section-2col > .t2t-hero-img-wrapper {
    max-width: 100%;
  }
}

/* ✅ Mobile: ảnh nằm dưới text cho dễ đọc */
@media (max-width: 768px) {
  .t2t-hero-section-2col {
    flex-direction: column-reverse;
  }

  .t2t-hero-section-2col > .t2t-hero-text,
  .t2t-hero-section-2col > .t2t-hero-img-wrapper {
    max-width: 100%;
  }
}

/* 🌄 .t2t-hero-section-auto
   → Dùng cho layout ảnh trên – chữ dưới (flex column)
   → Phù hợp cho section đơn giản, thơ, tiêu đề hoặc 1 CTA
*/
.t2t-hero-section-auto {
  width: 100%;
  min-height: 100vh;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  position: relative;
  overflow: hidden;
  box-sizing: border-box;
  z-index: 0;
  border-radius: var(--t2t-radius-medium); /* 0.5rem ≈ 8px → dùng biến 12px gần nhất */
}

/* 📱 Tablet (≤1024px) – co lại nhẹ nhàng */
@media (max-width: 1024px) {
  .t2t-hero-section-auto {
    min-height: 80vh;
  }
}

/* 📱 Mobile (≤768px) – tránh dài quá mức */
@media (max-width: 768px) {
  .t2t-hero-section-auto {
    min-height: 65vh;
  }
}

/* 🔥 Wrapper mở rộng full trình duyệt (chuyên dùng cho ảnh Hero đầu bài viết) */
.t2t-hero-img-wrapper--full {
  width: 100vw;
  height: 100vh; /* hoặc min(100vh, 100%) tùy thiết kế */
  margin-left: calc(-50vw + 50%);
  position: relative;
  overflow: hidden;
  border-radius: var(--t2t-radius-medium); /* 0.5rem ≈ 12px */
  box-sizing: border-box;
  margin-bottom: 1.5rem;
  z-index: 1;
}

/* 🧱 Wrapper chứa ảnh (dùng khi ảnh là thẻ img, không phải background-image) */
.t2t-hero-img-wrapper {
  position: relative;
  overflow: hidden;
  z-index: 1;
  width: 100%;
  box-sizing: border-box;
  border-radius: var(--t2t-radius-medium); /* nhất quán với hero */
}

/* 🖼️ Ảnh dạng thẻ img trong Hero – đảm bảo full width và giữ tỉ lệ */
.t2t-hero-img {
  width: 100% !important; /* Bắt buộc do Elementor inject style riêng */
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: var(--t2t-radius-medium);
}

/* 📱 Mobile – tránh ảnh chiếm chiều cao quá lớn */
@media (max-width: 768px) {
  .t2t-hero-img {
    max-height: 65vh;
    object-fit: cover;
  }
}

/* 🖥 Desktop: hiển thị hàng ngang (ảnh – chữ) */
@media (min-width: 1025px) {
  .t2t-row-to-column {
    display: flex !important;
    flex-direction: row !important;
    align-items: center;
    justify-content: space-between;
    gap: 2rem; /* chưa có biến khoảng cách ngang – giữ nguyên */
  }
}

/* 📱 Tablet + Mobile: hiển thị dọc (ảnh trên – chữ dưới) */
@media (max-width: 1024px) {
  .t2t-row-to-column {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start;
    gap: 1.5rem; /* chưa có biến – giữ nguyên */
  }

  .t2t-row-to-column > .elementor-column {
    width: 100% !important;
    max-width: 100% !important;
    flex: none !important;
  }
}

/* 🌙 Footer poetic link – tinh gọn, chỉ dùng 1 nơi duy nhất */
.t2t-footer-link-poetic {
  color: var(--t2t-emotion-soft) !important; /* #eae3cf – tone cảm xúc mềm */
  font-style: italic;
  font-size: var(--t2t-font-base);
  transition: color 0.3s ease;
}

/* Bảo đảm <a> kế thừa đúng màu cha */
.t2t-footer-link-poetic a {
  color: inherit !important;
  text-decoration: none;
}

.t2t-footer-link-poetic a:hover {
  color: var(--t2t-color-brand-primary) !important; /* #00ffd5 */
}

.t2t-footer-link-poetic a:active {
  color: var(--t2t-color-brand-secondary) !important; /* #00b7ff */
}

/* ============ HOME · HERO LEAD STORY ============ */

#home-lead {
  /* thu hẹp một chút để text không kéo quá rộng */
  max-width: 840px;
  margin-inline: auto;
}

/* intro ngay dưới H2 – cho chút khoảng thở */
#home-lead .t2t-intro-text {
  margin-bottom: 1.4rem;
  color: var(--t2t-text-light);
}

/* thân câu chuyện */
#home-lead .t2t-lead-story {
  max-width: 720px;
  line-height: 1.7;
  font-size: 1.02rem;
}

/* mỗi đoạn cách nhau nhẹ nhàng */
#home-lead .t2t-lead-story p + p {
  margin-top: 0.85rem;
}

/* câu chốt ở cuối – nhịp nghỉ + điểm nhấn nhỏ, không phải cả panel */
#home-lead .t2t-lead-kicker {
  margin-top: 1.4rem;
  font-weight: 600;
  font-style: italic;
  position: relative;
  padding-left: 1.2rem;
}

/* chấm sáng nhỏ bên trái – mượn chút "neon" của brand mà không giống STT */
#home-lead .t2t-lead-kicker::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.45em;
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 999px;
  background: var(--t2t-brand-primary);
  box-shadow: 0 0 10px rgba(0, 255, 213, 0.7);
}

#home-lead .t2t-lead-softbox {
  padding: 0.85rem 1.1rem;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  font-style: italic;
  margin: 1rem 0;
}

/* =============================
📌 HỆ THỐNG OVERLAY TEXT TĨNH TOÀN CỤC – v1.1
→ Dùng để hiển thị chữ tĩnh trên ảnh (thơ, quote, tiêu đề mở đầu...)
→ Có thể dùng nền trong hoặc nền mờ tùy chọn (modifier with-bg)
→ Hệ thống hỗ trợ 7 vị trí định vị: top/center/bottom + left/center/right
============================= */
/* 💬 Overlay text tĩnh cơ bản */
.t2t-overlay-text {
  position: absolute;
  height: auto !important;
  font-family: var(--t2t-font-emotion);
  font-style: italic;
  font-weight: 500;
  color: var(--t2t-emotion-soft); /* #eae3cf – màu cảm xúc chính */
  font-size: clamp(18px, 3.5vw, 22px);
  line-height: 1.6;
  word-break: break-word;
  overflow-wrap: break-word;
  text-shadow: 0 0 6px rgba(0, 0, 0, 0.6);
  display: block;
  z-index: 9;
  padding: 0 1rem;
  box-sizing: border-box;
  max-width: 90vw;
  animation: t2tFadeInOverlay 1.8s ease-in-out;
}

/* 🧊 Modifier: Nền mờ (glass) */
.t2t-overlay-text.with-bg {
  background: var(--t2t-bg-glass-dark); /* rgba(0,0,0,0.4) */
  border-radius: var(--t2t-radius-small); /* 8px */
  backdrop-filter: blur(4px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  padding: 8px 16px;
  text-shadow: none;
  color: var(--t2t-text-light); /* #fff */
  font-style: normal;
  font-weight: 600;
}

/* ⚓ Modifier vị trí định vị overlay (7 vị trí chuẩn) */
.t2t-top-left {
  top: 10%;
  left: 5%;
  text-align: left;
}
.t2t-top-center {
  top: 10%;
  left: 50%;
  transform: translateX(-50%);
  text-align: left;
}
.t2t-top-right {
  top: 10%;
  right: 5%;
  text-align: right;
}
.t2t-center {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: left;
}
.t2t-bottom-left {
  bottom: 10%;
  left: 5%;
  text-align: left;
}
.t2t-bottom-center {
  bottom: 10%;
  left: 50%;
  transform: translateX(-50%);
  text-align: left;
}
.t2t-bottom-right {
  bottom: 10%;
  right: 5%;
  text-align: right;
}

/* 📱 Mobile Responsive – tự động canh giữa nếu sát biên */
@media (max-width: 768px) {
  .t2t-overlay-text {
    font-size: 15px;
    text-align: left;
    padding: 0 6vw;
    max-width: 96vw;
  }

  .t2t-top-left,
  .t2t-top-right,
  .t2t-bottom-left,
  .t2t-bottom-right {
    left: 0 !important;
    right: 0 !important;
    text-align: center !important;
  }
}

/* 💫 Fade-in animation không ghi đè transform của vị trí */
@keyframes t2tFadeInOverlay {
  from {
    opacity: 0;
    filter: blur(2px);
  }
  to {
    opacity: 1;
    filter: blur(0);
  }
}

/*============================
🌌 t2tDigital - Hero Section Typewriter Overlay (Tái cấu trúc phối VAR 02H50 27/07/2025)
   📦 Class gốc: .t2t-typewriter-overlay – xử lý định vị và vùng overlay
   ⌨️ Class gốc: .t2t-typewriter-line – xử lý hiệu ứng gõ máy
   🧩 Modifier: chỉ xử lý vị trí (vd: .top-left, .bottom-right)
============================*/
@media (min-width: 1025px) {
  .t2t-typewriter-overlay {
    position: absolute;
    max-width: 60%;
    width: auto;
    z-index: 3;
    box-sizing: border-box;
  }

  /* 🧩 Vị trí định vị – KHÔNG đổi text-align để tránh lỗi caret */
  .t2t-typewriter-overlay.top-left {
    top: 8%;
    left: 5%;
  }
  .t2t-typewriter-overlay.top-center {
    top: 8%;
    left: 50%;
    transform: translateX(-50%);
  }
  .t2t-typewriter-overlay.top-right {
    top: 8%;
    right: 5%;
  }
  .t2t-typewriter-overlay.bottom-left {
    bottom: 12%;
    left: 5%;
  }
  .t2t-typewriter-overlay.bottom-center {
    bottom: 8%;
    left: 50%;
    transform: translateX(-50%);
  }
  .t2t-typewriter-overlay.bottom-right {
    bottom: 8%;
    right: 5%;
  }

  .t2t-typewriter-group {
    display: flex;
    flex-direction: column;
    gap: 0.5em; /* giữ nguyên – cảm xúc của từng dòng gõ */
  }

  .t2t-typewriter-line {
    display: inline-block;
    width: 0;
    white-space: nowrap;
    overflow: hidden;
    animation: typing-line 3.5s steps(50, end);
    animation-fill-mode: forwards;
    text-align: inherit;
    font-family: var(--t2t-font-serif); /* "Georgia", "Noto Serif", "Times New Roman" */
    font-style: italic;
    font-size: clamp(18px, 3vw, 28px);
    line-height: 1.4;
    color: var(--t2t-emotion-soft); /* #eae3cf */
    text-shadow: 0 0 5px rgba(0, 0, 0, 0.6);
    border-right: 2px solid rgba(255, 255, 255, 0.6);
    max-width: fit-content; /* ✅ Fix caret nhảy full chiều rộng */
    box-sizing: border-box;
    word-break: break-word;
    overflow-wrap: break-word;
  }

  .t2t-typewriter-line.no-caret {
    border-right: none;
    animation-fill-mode: forwards;
    opacity: 1;
  }

  .t2t-typewriter-line.with-caret {
    animation:
      typing-line 3.5s steps(50, end),
      blink-caret 0.75s step-end infinite;
    animation-fill-mode: forwards, none;
  }

  /* 🎯 Delay hiệu ứng từng dòng */
  .t2t-typewriter-line.with-caret.delay,
  .t2t-typewriter-line.no-caret.delay {
    opacity: 0;
    animation-delay: 4s;
  }

  .t2t-typewriter-line.with-caret.delay-2,
  .t2t-typewriter-line.no-caret.delay-2 {
    opacity: 0;
    animation-delay: 7s;
  }

  .t2t-typewriter-line.with-caret.delay-3,
  .t2t-typewriter-line.no-caret.delay-3 {
    opacity: 0;
    animation-delay: 10s;
  }

  .t2t-typewriter-line.with-caret.delay-4,
  .t2t-typewriter-line.no-caret.delay-4 {
    opacity: 0;
    animation-delay: 13s;
  }
}

/* ===== 📲 Mobile (≤768px) – Fix overflow, caret, delay, and text-wrap ===== */
@media (max-width: 768px) {
  .t2t-typewriter-overlay {
    position: absolute;
    bottom: 8%;
    left: 5%;
    right: 5%;
    width: auto;
    padding: 0;
    text-align: left;
    box-sizing: border-box;
    z-index: 3;
  }

  .t2t-typewriter-group {
    display: flex;
    flex-direction: column;
    gap: 0.5em;
    align-items: flex-start;
  }

  .t2t-typewriter-line {
    display: inline-block;
    white-space: nowrap;
    width: 0;
    max-width: fit-content;
    min-width: 1px; /* ✅ Fix caret &nbsp */
    padding-right: 0.3em; /* ✅ Giữ khoảng cho caret cuối */
    overflow: hidden;
    animation:
      typing-line 3.5s steps(50, end),
      blink-caret 0.75s step-end infinite;
    animation-fill-mode: forwards, none;
    text-align: left;
    font-family: var(--t2t-font-serif); /* "Georgia", "Noto Serif", "Times New Roman" */
    font-style: italic;
    font-size: clamp(16px, 4vw, 22px);
    line-height: 1.15;
    color: var(--t2t-emotion-soft); /* #eae3cf */
    text-shadow: 0 0 5px rgba(0, 0, 0, 0.6);
    word-break: break-word;
    overflow-wrap: break-word;
    box-sizing: border-box;
    border-right: 2px solid rgba(255, 255, 255, 0.6);
  }

  .t2t-typewriter-line.no-caret {
    border-right: none;
    animation: typing-line 3.5s steps(50, end);
    animation-fill-mode: forwards;
  }

  .t2t-typewriter-line.no-caret.delay {
    opacity: 0;
    animation: typing-line 3.5s steps(50, end) 4s forwards;
  }

  .t2t-typewriter-line.no-caret.delay-2 {
    opacity: 0;
    animation: typing-line 3.5s steps(50, end) 7s forwards;
  }

  .t2t-typewriter-line.no-caret.delay-3 {
    opacity: 0;
    animation: typing-line 3.5s steps(50, end) 10s forwards;
  }

  .t2t-typewriter-line.with-caret.delay {
    opacity: 0;
    animation:
      typing-line 3.5s steps(50, end) 4s forwards,
      blink-caret 0.75s step-end infinite 4s;
    animation-fill-mode: forwards, none;
  }

  .t2t-typewriter-line.with-caret.delay-2 {
    opacity: 0;
    animation:
      typing-line 3.5s steps(50, end) 7s forwards,
      blink-caret 0.75s step-end infinite 7s;
    animation-fill-mode: forwards, none;
  }

  .t2t-typewriter-line.with-caret.delay-3 {
    opacity: 0;
    animation:
      typing-line 3.5s steps(50, end) 10s forwards,
      blink-caret 0.75s step-end infinite 10s;
    animation-fill-mode: forwards, none;
  }
}

/* ===== 💻 Tablet (769px – 1024px) – Mirror Mobile Fixes ===== */
@media (min-width: 769px) and (max-width: 1024px) {
  .t2t-typewriter-overlay {
    position: absolute;
    bottom: 8%;
    left: 5%;
    right: 5%;
    width: auto;
    padding: 0;
    text-align: left;
    box-sizing: border-box;
    z-index: 3;
  }

  .t2t-typewriter-group {
    display: flex;
    flex-direction: column;
    gap: 0.5em;
    align-items: flex-start;
  }

  .t2t-typewriter-line {
    display: inline-block;
    white-space: nowrap;
    width: 0;
    max-width: fit-content;
    min-width: 1px; /* ✅ Fix caret &nbsp */
    padding-right: 0.3em; /* ✅ Giữ khoảng cho caret cuối */
    overflow: hidden;
    animation:
      typing-line 3.5s steps(50, end),
      blink-caret 0.75s step-end infinite;
    animation-fill-mode: forwards, none;
    text-align: left;
    font-family: var(--t2t-font-serif); /* "Georgia", "Noto Serif", "Times New Roman" */
    font-style: italic;
    font-size: clamp(17px, 3.5vw, 24px);
    line-height: 1.25;
    color: var(--t2t-emotion-soft); /* #eae3cf */
    text-shadow: 0 0 5px rgba(0, 0, 0, 0.6);
    word-break: break-word;
    overflow-wrap: break-word;
    box-sizing: border-box;
    border-right: 2px solid rgba(255, 255, 255, 0.6);
  }

  .t2t-typewriter-line.no-caret {
    border-right: none;
    animation: typing-line 3.5s steps(50, end);
    animation-fill-mode: forwards;
  }

  .t2t-typewriter-line.no-caret.delay {
    opacity: 0;
    animation: typing-line 3.5s steps(50, end) 4s forwards;
  }

  .t2t-typewriter-line.no-caret.delay-2 {
    opacity: 0;
    animation: typing-line 3.5s steps(50, end) 7s forwards;
  }

  .t2t-typewriter-line.no-caret.delay-3 {
    opacity: 0;
    animation: typing-line 3.5s steps(50, end) 10s forwards;
  }

  .t2t-typewriter-line.with-caret.delay {
    opacity: 0;
    animation:
      typing-line 3.5s steps(50, end) 4s forwards,
      blink-caret 0.75s step-end infinite 4s;
    animation-fill-mode: forwards, none;
  }

  .t2t-typewriter-line.with-caret.delay-2 {
    opacity: 0;
    animation:
      typing-line 3.5s steps(50, end) 7s forwards,
      blink-caret 0.75s step-end infinite 7s;
    animation-fill-mode: forwards, none;
  }

  .t2t-typewriter-line.with-caret.delay-3 {
    opacity: 0;
    animation:
      typing-line 3.5s steps(50, end) 10s forwards,
      blink-caret 0.75s step-end infinite 10s;
    animation-fill-mode: forwards, none;
  }
}

/* 🎞️ Gõ chữ – xuất hiện từ trái sang phải */
@keyframes typing-line {
  from {
    width: 0;
    opacity: 1;
  }
  to {
    width: 100%;
    opacity: 1;
  }
}

/* 💫 Caret nhấp nháy */
@keyframes blink-caret {
  0%,
  100% {
    border-color: transparent;
  }
  50% {
    border-color: rgba(255, 255, 255, 0.6);
  }
}

/* =========================================================
   🌙 XUYÊN ĐÊM · ARCHIVE TEMPLATE (Scoped CSS)
   Neo:
   - Hero scope (cha): .t2t-hero-overlay-scope
   - Overlay scope (con): .t2t-typewriter-overlay.t2t-xuyendem-tw
   - Rhythm scope: .t2t-typewriter-group.t2t-typewriter--xuyen-dem
   ========================================================= */

/* =============== 0) HERO SCOPE (CHA NEO) ===============
   GẮN class .t2t-hero-overlay-scope vào container hero
   (container đang wrap ảnh hero + overlay typewriter)
   Mục tiêu: overlay absolute bám đúng + hero có chiều cao ổn định
======================================================== */
.t2t-hero-overlay-scope {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  /* ưu tiên: giống style hero full của site, nhưng không đụng legacy */
  height: clamp(520px, 78dvh, 980px);
}

/* desktop có thể nới cao hơn chút để “thở” */
@media (min-width: 1025px) {
  .t2t-hero-overlay-scope {
    height: clamp(560px, 90dvh, 1100px);
  }
}

/* =============== XUYÊN ĐÊM · TYPEWRITER POSITION (Scoped) ===============
   - Unlock core mobile/tablet
   - Cho modifier top-left/bottom-left “ăn”
   - Nudge vị trí theo 3 breakpoint (mobile/tablet/desktop)
======================================================================= */

@media (min-width: 1025px) {
  .t2t-hero-overlay-scope .t2t-typewriter-overlay.t2t-xuyendem-tw {
    position: absolute;
    top: auto;
    right: auto;
    bottom: auto;
    left: auto;
    transform: none;
    z-index: 3;
  }

  /* ✅ Desktop (≥1025): hạ ~1 dòng */
  .t2t-hero-overlay-scope .t2t-typewriter-overlay.t2t-xuyendem-tw.top-left {
    top: calc(8% + 1.5em);
    left: 5%;
  }
  .t2t-hero-overlay-scope .t2t-typewriter-overlay.t2t-xuyendem-tw.bottom-left {
    bottom: max(0px, calc(10% - 1.2em));
    left: 5%;
  }
  .t2t-hero-overlay-scope .t2t-typewriter-overlay.t2t-xuyendem-tw.top-right {
    top: calc(8% + 1.5em);
    right: 5%;
    left: auto;
    text-align: right;
  }
}

/* ✅ Tablet (769–1024): hạ ~1/2 dòng */
@media (min-width: 769px) and (max-width: 1024px) {
  .t2t-hero-overlay-scope .t2t-typewriter-overlay.t2t-xuyendem-tw {
    position: absolute !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
    transform: none !important;
    z-index: 3;
  }

  .t2t-hero-overlay-scope .t2t-typewriter-overlay.t2t-xuyendem-tw.top-left {
    top: 5% !important;
    left: 5% !important;
  }

  .t2t-hero-overlay-scope .t2t-typewriter-overlay.t2t-xuyendem-tw.bottom-left {
    bottom: max(0px, 5%) !important;
    left: 5% !important;
  }

  .t2t-hero-overlay-scope .t2t-typewriter-overlay.t2t-xuyendem-tw.top-right {
    top: 5% !important; /* tablet hạ nhẹ hơn mobile */
    right: 5% !important;
    left: auto !important;
    text-align: right;
  }
}

/* ✅ Mobile (≤768): hạ ~1 dòng */
@media (max-width: 768px) {
  .t2t-hero-overlay-scope .t2t-typewriter-overlay.t2t-xuyendem-tw {
    position: absolute !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
    transform: none !important;
    z-index: 3;
  }

  .t2t-hero-overlay-scope .t2t-typewriter-overlay.t2t-xuyendem-tw.top-left {
    top: 5% !important;
    left: 5% !important;
  }

  .t2t-hero-overlay-scope .t2t-typewriter-overlay.t2t-xuyendem-tw.bottom-left {
    bottom: max(0px, 5%) !important;
    left: 5% !important;
  }

  .t2t-hero-overlay-scope .t2t-typewriter-overlay.t2t-xuyendem-tw.top-right {
    top: 5% !important; /* cùng nhịp với top-left */
    right: 5% !important;
    left: auto !important;
    text-align: right; /* cho hợp top-right */
  }
}

/* =========================================================
   🌙 XUYÊN ĐÊM — FIX “RIGHT TYPEWRITER JUMP”
   Neo overlay sang phải (top-right) nhưng chữ vẫn gõ từ TRÁI -> PHẢI,
   tránh hiện tượng “trồi từ mép phải” + khối nhảy pặc pặc.
   Scope: .t2t-hero-overlay-scope + .t2t-xuyendem-tw
========================================================= */

/* 0) Common: top-right = neo phải, KHÔNG text-align:right */
.t2t-hero-overlay-scope .t2t-typewriter-overlay.t2t-xuyendem-tw.top-right {
  left: auto !important;
  transform: none !important;

  /* QUAN TRỌNG: canh trái để gõ như thật */
  text-align: left !important;
}

/* Đảm bảo group không bị align-end */
.t2t-hero-overlay-scope .t2t-typewriter-overlay.t2t-xuyendem-tw.top-right .t2t-typewriter-group {
  align-items: flex-start !important;
}

/* 1) Desktop (≥1025px) */
@media (min-width: 1025px) {
  .t2t-hero-overlay-scope .t2t-typewriter-overlay.t2t-xuyendem-tw.top-right {
    position: absolute !important;
    top: calc(8% + 1.5em) !important; /* cùng nhịp “hạ 1 dòng” desktop */
    right: 5% !important;

    /* CỐ ĐỊNH BỀ RỘNG để layout không đổi theo dòng dài */
    width: min(56vw, 40rem) !important;
    max-width: none !important;
  }
}

/* 2) Tablet (769–1024px) */
@media (min-width: 769px) and (max-width: 1024px) {
  .t2t-hero-overlay-scope .t2t-typewriter-overlay.t2t-xuyendem-tw.top-right {
    position: absolute !important;
    top: calc(8% + 0.6em) !important; /* tablet hạ nhẹ hơn */
    right: 5% !important;

    width: min(78vw, 34rem) !important;
    max-width: none !important;
  }
}

/* 3) Mobile (≤768px) */
@media (max-width: 768px) {
  .t2t-hero-overlay-scope .t2t-typewriter-overlay.t2t-xuyendem-tw.top-right {
    position: absolute !important;
    top: calc(8% + 1.2em) !important; /* cùng nhịp top-left mobile */
    right: 5% !important;

    width: min(90vw, 30rem) !important;
    max-width: none !important;
  }
}

/* 🌙 XUYÊN ĐÊM · Typewriter Line-Height Tuning */

/* Desktop */
@media (min-width: 1025px) {
  .t2t-typewriter-group.t2t-typewriter--xuyen-dem .t2t-typewriter-line {
    line-height: 1.28; /* tăng rất nhẹ, giữ chiều sâu */
  }
}

/* Tablet */
@media (min-width: 769px) and (max-width: 1024px) {
  .t2t-typewriter-group.t2t-typewriter--xuyen-dem .t2t-typewriter-line {
    line-height: 1.32; /* đủ thở, không loãng */
  }
}

/* Mobile */
@media (max-width: 768px) {
  .t2t-typewriter-group.t2t-typewriter--xuyen-dem .t2t-typewriter-line {
    line-height: 1.38; /* FIX “khó thở” rõ rệt */
  }
}

/* =============== 2) TYPEWRITER RHYTHM MODIFIER ===============
   Nhịp gõ chậm hơn + có khoảng thở, không phá core typing/caret.
   Quy ước nhịp: typing=4.6s, pause=1.6s => step=6.2s
======================================================== */

/* ===== Desktop (≥1025px): chỉ override duration + delay ===== */
@media (min-width: 1025px) {
  .t2t-typewriter-group.t2t-typewriter--xuyen-dem .t2t-typewriter-line {
    animation-duration: 4.6s;
  }

  .t2t-typewriter-group.t2t-typewriter--xuyen-dem .t2t-typewriter-line.with-caret {
    animation-duration: 4.6s, 0.75s;
  }

  /* delay cho mọi line (kể cả no-caret và with-caret) */
  .t2t-typewriter-group.t2t-typewriter--xuyen-dem .t2t-typewriter-line.delay {
    animation-delay: 6.2s;
  }
  .t2t-typewriter-group.t2t-typewriter--xuyen-dem .t2t-typewriter-line.delay-2 {
    animation-delay: 12.4s;
  }
  .t2t-typewriter-group.t2t-typewriter--xuyen-dem .t2t-typewriter-line.delay-3 {
    animation-delay: 18.6s;
  }
  .t2t-typewriter-group.t2t-typewriter--xuyen-dem .t2t-typewriter-line.delay-4 {
    animation-delay: 24.8s;
  }

  /* with-caret có 2 animation => delay đôi cho typing + blink */
  .t2t-typewriter-group.t2t-typewriter--xuyen-dem .t2t-typewriter-line.with-caret.delay {
    animation-delay: 6.2s, 6.2s;
  }
  .t2t-typewriter-group.t2t-typewriter--xuyen-dem .t2t-typewriter-line.with-caret.delay-2 {
    animation-delay: 12.4s, 12.4s;
  }
  .t2t-typewriter-group.t2t-typewriter--xuyen-dem .t2t-typewriter-line.with-caret.delay-3 {
    animation-delay: 18.6s, 18.6s;
  }
  .t2t-typewriter-group.t2t-typewriter--xuyen-dem .t2t-typewriter-line.with-caret.delay-4 {
    animation-delay: 24.8s, 24.8s;
  }
}

/* ===== Mobile/Tablet (≤1024px): override shorthand animation timing ===== */
@media (max-width: 1024px) {
  .t2t-typewriter-group.t2t-typewriter--xuyen-dem .t2t-typewriter-line.no-caret {
    animation: typing-line 4.6s steps(50, end);
    animation-fill-mode: forwards;
  }

  .t2t-typewriter-group.t2t-typewriter--xuyen-dem .t2t-typewriter-line.with-caret {
    animation:
      typing-line 4.6s steps(50, end),
      blink-caret 0.75s step-end infinite;
    animation-fill-mode: forwards, none;
  }

  .t2t-typewriter-group.t2t-typewriter--xuyen-dem .t2t-typewriter-line.no-caret.delay {
    opacity: 0;
    animation: typing-line 4.6s steps(50, end) 6.2s forwards;
  }
  .t2t-typewriter-group.t2t-typewriter--xuyen-dem .t2t-typewriter-line.no-caret.delay-2 {
    opacity: 0;
    animation: typing-line 4.6s steps(50, end) 12.4s forwards;
  }
  .t2t-typewriter-group.t2t-typewriter--xuyen-dem .t2t-typewriter-line.no-caret.delay-3 {
    opacity: 0;
    animation: typing-line 4.6s steps(50, end) 18.6s forwards;
  }
  .t2t-typewriter-group.t2t-typewriter--xuyen-dem .t2t-typewriter-line.no-caret.delay-4 {
    opacity: 0;
    animation: typing-line 4.6s steps(50, end) 24.8s forwards;
  }

  .t2t-typewriter-group.t2t-typewriter--xuyen-dem .t2t-typewriter-line.with-caret.delay {
    opacity: 0;
    animation:
      typing-line 4.6s steps(50, end) 6.2s forwards,
      blink-caret 0.75s step-end infinite 6.2s;
    animation-fill-mode: forwards, none;
  }
  .t2t-typewriter-group.t2t-typewriter--xuyen-dem .t2t-typewriter-line.with-caret.delay-2 {
    opacity: 0;
    animation:
      typing-line 4.6s steps(50, end) 12.4s forwards,
      blink-caret 0.75s step-end infinite 12.4s;
    animation-fill-mode: forwards, none;
  }
  .t2t-typewriter-group.t2t-typewriter--xuyen-dem .t2t-typewriter-line.with-caret.delay-3 {
    opacity: 0;
    animation:
      typing-line 4.6s steps(50, end) 18.6s forwards,
      blink-caret 0.75s step-end infinite 18.6s;
    animation-fill-mode: forwards, none;
  }
  .t2t-typewriter-group.t2t-typewriter--xuyen-dem .t2t-typewriter-line.with-caret.delay-4 {
    opacity: 0;
    animation:
      typing-line 4.6s steps(50, end) 24.8s forwards,
      blink-caret 0.75s step-end infinite 24.8s;
    animation-fill-mode: forwards, none;
  }
}

/* Single Post: typewriter render inline (not overlay absolute) */
.t2t-typewriter-overlay.t2t-tw-inline {
  position: static !important;
  left: auto !important;
  right: auto !important;
  top: auto !important;
  bottom: auto !important;
  transform: none !important;
  max-width: 100% !important;
  pointer-events: auto;
  margin: 10px 0 18px;
}

/* =========================================================
   🌙 XUYÊN ĐÊM — Last line: slower typing + slower caret
   Target: .with-caret.delay-4 (delay = 24.8s)
========================================================= */

/* Desktop: override duration (core desktop đang dùng duration riêng) */
@media (min-width: 1025px) {
  .t2t-hero-overlay-scope
    .t2t-typewriter-group.t2t-typewriter--xuyen-dem
    .t2t-typewriter-line.with-caret.delay-4 {
    animation-duration: 8s, 1.5s; /* typing x2, blink x2 */
    animation-delay: 24.8s, 24.8s; /* ép blink khớp nhịp câu cuối */
  }
}

/* Mobile/Tablet: override shorthand animation cho riêng dòng cuối */
@media (max-width: 1024px) {
  .t2t-hero-overlay-scope
    .t2t-typewriter-group.t2t-typewriter--xuyen-dem
    .t2t-typewriter-line.with-caret.delay-4 {
    opacity: 0;
    animation:
      typing-line 8s steps(80, end) 24.8s forwards,
      blink-caret 1.5s step-end infinite 24.8s;
    animation-fill-mode: forwards, none;
  }
}

/* =========================================================
   🌙 XUYÊN ĐÊM — Letter spacing (cho chữ “thở” nhẹ)
   Chỉ áp dụng cho typewriter Xuyên Đêm
========================================================= */

/* Desktop */
@media (min-width: 1025px) {
  .t2t-hero-overlay-scope .t2t-typewriter-group.t2t-typewriter--xuyen-dem .t2t-typewriter-line {
    letter-spacing: 0.02em;
  }
}

/* Mobile + Tablet */
@media (max-width: 1024px) {
  .t2t-hero-overlay-scope .t2t-typewriter-group.t2t-typewriter--xuyen-dem .t2t-typewriter-line {
    letter-spacing: 0.025em;
  }
}

/* Xuyên Đêm: indent dùng trong typewriter phải tôn trọng nowrap */
.t2t-typewriter-group.t2t-typewriter--xuyen-dem .t2t-indent-05,
.t2t-typewriter-group.t2t-typewriter--xuyen-dem .t2t-indent-1,
.t2t-typewriter-group.t2t-typewriter--xuyen-dem .t2t-indent-2,
.t2t-typewriter-group.t2t-typewriter--xuyen-dem .t2t-indent-3,
.t2t-typewriter-group.t2t-typewriter--xuyen-dem .t2t-indent-deep {
  white-space: inherit; /* kế thừa từ .t2t-typewriter-line (nowrap) */
}

/* 📏 Hero full height – thường dùng cho hero dạng full màn hình */
.t2t-hero-fullscreen {
  height: 100vh;
  position: relative;
  overflow: hidden;
}

/* 🌅 Hình đại diện đầu bài viết – dạng banner cảm xúc */
.t2t-feature-banner {
  width: 100%;
  height: auto;
  border-radius: var(--t2t-radius-large); /* 16px */
  margin-bottom: 2rem; /* chưa có biến spacing-xl */
  display: block;
}

/* 📌 Tóm tắt nội dung đầu bài viết – mở đầu nhẹ nhàng */
.t2t-summary {
  font-size: var(--t2t-font-large); /* 1.1rem */
  font-style: italic;
  color: #ccc; /* chưa có biến --t2t-text-muted-light */
  margin-bottom: 1.5rem; /* giữ nguyên */
}

/* ✅ CTA rõ ràng cuối bài viết – block nổi bật */
.t2t-cta-banner {
  background-color: var(--t2t-bg-deep); /* #111 gần với tone nền bài viết */
  border-left: 4px solid var(--t2t-color-brand-secondary); /* #00b7ff */
  padding: 1rem 1.5rem;
  margin: 2rem 0;
  border-radius: var(--t2t-radius-medium); /* 12px */
  font-size: var(--t2t-font-large); /* 1.1rem */
  line-height: 1.6;
  color: #fff;
}

/* ✅ Link trong CTA – đậm nét và nổi bật */
.t2t-cta-banner a {
  color: var(--t2t-color-brand-primary); /* #00ffd5 */
  font-weight: bold;
  text-decoration: underline;
}

/* 🧱 Khung bọc bài viết blog */
.t2t-blog-wrapper,
.t2t-blog-wrapper-light {
  padding: var(--t2t-blog-padding-desktop);
  border-radius: var(--t2t-blog-radius-desktop);
  margin-top: var(--t2t-blog-margin-vertical);
  margin-bottom: var(--t2t-blog-margin-vertical);
}

/* 🌑 Tone nền đen nhung (mặc định) */
.t2t-blog-wrapper {
  background-color: var(--t2t-bg-deep); /* #101010 */
  color: var(--t2t-text-soft); /* #f0f0f0 → gần với tone mềm */
}

/* 🌫️ Tone nền xám đậm – nhẹ nhàng hơn */
.t2t-blog-wrapper-light {
  background-color: var(--t2t-bg-soft); /* #1a1a1a */
  color: var(--t2t-text-soft); /* #f2f2f2 */
}

/* 👉 Nếu có ảnh hero đặt ở đầu: gán thêm class này */
.t2t-blog-wrapper--has-hero {
  padding-top: 0 !important;
}

.t2t-blog-wrapper--has-hero > .t2t-hero-img-wrapper--full {
  margin-top: 0 !important;
  border-top-left-radius: 0 !important;
  border-top-right-radius: 0 !important;
}

/* Khung hero chứa ảnh + overlay */
.t2t-hero-img-wrapper--full .elementor-widget-container {
  position: relative;
  z-index: 1;
}

/* Ảnh đại diện full width + bo góc */
.t2t-hero-img-wrapper--full .elementor-widget-theme-post-featured-image img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
  border-top-left-radius: var(--t2t-blog-radius-desktop);
  border-top-right-radius: var(--t2t-blog-radius-desktop);
}

/* Text overlay nổi trên ảnh */
.t2t-hero-img-wrapper--full .t2t-overlay-text {
  position: absolute;
  z-index: 3;
}

/* Khối nội dung dưới hero không bị đè */
.t2t-blog-wrapper .elementor-widget-theme-post-title,
.t2t-blog-wrapper .elementor-widget-theme-post-content,
.t2t-blog-wrapper .t2t-meta-text {
  position: relative;
  z-index: 2;
}

/* Khi có hero ở đầu: bỏ padding top của wrapper để ảnh chạm mép trên */
.t2t-blog-wrapper--has-hero {
  padding-top: 0 !important;
}

/* 🎨 Vùng nội dung con trong bài viết */
.t2t-blog-block {
  padding-left: var(--t2t-blog-padding-desktop);
  padding-right: var(--t2t-blog-padding-desktop);
  background-color: #181818; /* chưa có biến riêng → giữ nguyên */
  border-radius: var(--t2t-radius-medium); /* 12px */
  margin-bottom: 2rem;
}

/* Modifier cho intro sau hero */
.t2t-blog-block--intro {
  margin-top: clamp(16px, 4vw, 36px);
  margin-bottom: clamp(20px, 5vw, 48px);
  border-top: 1px solid rgba(255, 255, 255, 0.15);
  background: transparent;
  padding-top: clamp(16px, 2vw, 24px);
}

.t2t-blog-block--intro .t2t-subheading {
  color: var(--t2t-brand-secondary, #00b7ff);
  font-style: italic;
  margin-bottom: 0.5em;
}

/* 💬 Thông tin tác giả */
.t2t-meta-text {
  font-size: var(--t2t-font-meta);
  color: var(--t2t-text-muted, #cccccc); /* fallback nếu chưa khai báo */
  font-style: italic;
  margin-top: 0.5rem;
  margin-bottom: 1.5rem;
  text-align: left;
  opacity: 0.85;
}

/* 🔧 Tablet (≤1024px) */
@media (max-width: 1024px) {
  .t2t-blog-wrapper,
  .t2t-blog-wrapper-light {
    padding: var(--t2t-blog-padding-tablet);
    border-radius: var(--t2t-blog-radius-tablet);
    margin-top: var(--t2t-blog-margin-tablet);
    margin-bottom: var(--t2t-blog-margin-tablet);
  }

  .t2t-blog-block {
    padding-left: var(--t2t-blog-padding-tablet);
    padding-right: var(--t2t-blog-padding-tablet);
    border-radius: 10px; /* chưa có biến 10px – giữ nguyên */
  }

  .t2t-meta-text {
    font-size: var(--t2t-font-meta);
  }

  .t2t-blog-wrapper--has-hero {
    padding-top: 0 !important;
  }

  .t2t-blog-wrapper--has-hero > .t2t-hero-img-wrapper--full {
    margin-top: 0 !important;
    border-top-left-radius: 0 !important;
    border-top-right-radius: 0 !important;
  }
}

/* 📱 Mobile (≤767px) */
@media (max-width: 600px) {
  .t2t-blog-wrapper,
  .t2t-blog-wrapper-light {
    padding: var(--t2t-blog-padding-mobile);
    border-radius: var(--t2t-blog-radius-mobile);
    margin-top: var(--t2t-blog-margin-mobile);
    margin-bottom: var(--t2t-blog-margin-mobile);
  }

  .t2t-blog-block {
    padding-left: var(--t2t-blog-padding-mobile);
    padding-right: var(--t2t-blog-padding-mobile);
    border-radius: 0; /* full khung mobile – chuẩn UX */
  }

  .t2t-meta-text {
    font-size: var(--t2t-font-meta);
  }

  .t2t-block,
  .t2t-block-light {
    box-sizing: border-box; /* đảm bảo không tràn khung mobile */
  }
}

/* =========================================================
   t2tDigital · Content Wrapper FINAL (single source of truth)
   Scope: .t2t-blog-wrapper
   Goal:
   - Chuẩn hoá text-flow (chặn pre-line / pre-wrap)
   - Fix Twemoji (<img class="emoji">) không rớt dòng
   - Giữ nguyên code / pre
   ========================================================= */

/* 1) Text flow chuẩn */
.t2t-blog-wrapper,
.t2t-blog-wrapper p,
.t2t-blog-wrapper li,
.t2t-blog-wrapper blockquote,
.t2t-blog-wrapper .t2t-meta-text,
.t2t-blog-wrapper .t2t-subheading,
.t2t-blog-wrapper .t2t-transition-text,
.t2t-blog-wrapper .t2t-highlight,
.t2t-blog-wrapper .t2t-highlight-box {
  white-space: normal;
}

/* 1b) Trường hợp Elementor Text Editor đè white-space */
.elementor-widget-text-editor .t2t-blog-wrapper,
.elementor-widget-text-editor .t2t-blog-wrapper p,
.elementor-widget-text-editor .t2t-blog-wrapper li,
.elementor-widget-text-editor .t2t-blog-wrapper blockquote {
  white-space: normal !important;
}

/* 2) Giữ đúng hành vi cho code / pre */
.t2t-blog-wrapper pre {
  white-space: pre;
  overflow-x: auto;
}
/* Inline code phải được wrap bình thường */
.t2t-blog-wrapper :not(pre) > code {
  white-space: normal;
}

/* 3) Twemoji inline — ĐIỂM DUY NHẤT dùng !important */
.t2t-blog-wrapper img.emoji {
  display: inline-block !important;
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  max-width: none;
  margin: 0 0.12em 0 0;
}

/* 4) KHÔNG can thiệp img thường trong wrapper
      (ảnh hero / feature đã có class riêng điều khiển) */

/* ============================================
🗨️ VÙNG COMMENT BÀI VIẾT – T2T DIGITAL STYLE
→ Avatar trái, nội dung phải
→ Cảm xúc, tối giản, dịu mắt
→ Giao diện đồng bộ tone site
============================================ */

/* 📦 Toàn bộ vùng bình luận */
.t2t-comments-section {
  margin-top: var(--t2t-spacing-xl);
  border-top: 1px solid #333;
  padding: var(--t2t-spacing-lg);
  padding-inline: var(--t2t-spacing-md);
}

/* 🎯 Tiêu đề vùng comment */
.t2t-comments-title {
  font-size: var(--t2t-font-large);
  font-weight: var(--t2t-font-semibold);
  color: var(--t2t-text-soft);
  margin-bottom: var(--t2t-spacing-md);
}

/* 📌 Mỗi comment đơn */
.t2t-comment-item {
  display: flex;
  align-items: flex-start;
  margin-bottom: var(--t2t-spacing-lg);
}

/* 🖼️ Avatar người bình luận */
.t2t-comment-item .avatar img {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid var(--t2t-color-border-accent);
  margin-right: var(--t2t-spacing-md);
}

/* 📄 Nội dung comment */
.t2t-comment-item .comment-body {
  flex: 1;
}

/* 🕰️ Tên người & thời gian */
.t2t-comment-meta {
  font-size: var(--t2t-font-small);
  color: var(--t2t-text-muted-light);
  margin-bottom: 0.25rem;
}

/* 💬 Nội dung chính */
.t2t-comment-text {
  font-size: var(--t2t-font-base);
  color: var(--t2t-text-light);
  line-height: var(--t2t-lineheight-base);
  margin-bottom: 0.5rem;
}

/* ✨ Các hành động như Reply, Like */
.t2t-comment-actions button {
  background: none;
  border: none;
  padding: 0;
  font-size: var(--t2t-font-small);
  color: var(--t2t-text-muted-light);
  margin-right: 1rem;
  cursor: pointer;
  transition: color 0.3s ease;
}
.t2t-comment-actions button:hover {
  color: var(--t2t-text-light);
}

/* ============================================
🎯 Tối ưu hiển thị bình luận – Fix Safari Edit Mode
→ Gán rõ màu chữ & đảm bảo form comment không bị full width
================================================ */

.comment-author,
.comment-meta,
.comment-content,
.comment-reply-link {
  color: var(--t2t-text-light); /* màu trắng sáng dịu của hệ thống */
}

.comment-list,
.comment-body {
  max-width: 100%;
  padding-left: 0;
  padding-right: 0;
}

/* Đảm bảo phần khối bình luận không bị kéo full width */
.comment-respond,
#comments {
  max-width: var(--t2t-maxwidth-intro, 720px);
  margin-left: auto;
  margin-right: auto;
}

/* Nếu Safari edit bị lặp hoặc sandbox style */
body.elementor-editor-active .comment-content,
body.elementor-editor-active .comment-author {
  color: var(--t2t-text-light);
}

/* =============================
✍️ FORM BÌNH LUẬN
============================= */

/* 📦 Vùng form bao ngoài */
.t2t-comment-form .comment-respond {
  background-color: var(--t2t-bg-soft);
  padding: var(--t2t-spacing-lg);
  border-radius: var(--t2t-radius-medium);
  margin-top: var(--t2t-spacing-xl);
}

/* 📝 Tiêu đề nhỏ "Để lại bình luận" */
.t2t-comment-form .comment-respond h3 {
  font-size: var(--t2t-font-large);
  color: var(--t2t-text-light);
  margin-bottom: var(--t2t-spacing-md);
}

/* 🌐 Các link trong vùng comment */
.t2t-comment-form a {
  color: var(--t2t-color-brand-secondary);
  text-decoration: underline;
  transition: 0.3s ease;
}
.t2t-comment-form a:hover {
  color: var(--t2t-color-brand-primary) !important;
}

/* 🖊️ Các input & textarea */
.t2t-comment-form textarea,
.t2t-comment-form input[type='text'],
.t2t-comment-form input[type='email'],
.t2t-comment-form input[type='url'] {
  width: 100%;
  padding: var(--t2t-padding-sm);
  background-color: var(--t2t-bg-dark);
  color: var(--t2t-text-light);
  border: 1px solid var(--t2t-color-border-accent);
  border-radius: var(--t2t-radius-small);
  margin-bottom: var(--t2t-spacing-md);
  font-family: var(--t2t-font-sans);
  transition: var(--t2t-transition);
}

/* 📨 Nút gửi */
.t2t-comment-form input[type='submit'] {
  background-color: var(--t2t-color-brand-secondary);
  color: #000;
  padding: 10px 24px;
  border-radius: var(--t2t-radius-small);
  font-weight: var(--t2t-font-semibold);
  border: none;
  transition: var(--t2t-transition);
}
.t2t-comment-form input[type='submit']:hover {
  background-color: var(--t2t-color-brand-primary);
  color: #000 !important;
}

/* ℹ️ Dòng "Bạn cần đăng nhập..." */
.t2t-comment-form .must-log-in {
  font-size: var(--t2t-font-small);
  color: var(--t2t-text-muted-light);
  opacity: 0.75;
  margin-bottom: var(--t2t-spacing-lg);
}

/* 🔍 .t2t-seo-image → Dùng cho ảnh tối ưu SEO nhưng không hiển thị
   → Giúp Google crawl alt text, không ảnh hưởng UI
*/
.t2t-seo-image {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
  padding: 0;
  margin: 0;
}
/* =========================================================
   t2t-hidden-note (v2) — Bật mí hậu trường / ghi chú ẩn-hiện
   Phù hợp overlay ảnh: chữ sáng, có text-shadow, panel nền mềm.
   Dùng biến hệ thống t2tDigital để đồng bộ brand & dễ bảo trì.
   ========================================================= */

/* Bao ngoài */
.t2t-hidden-note {
  margin: var(--t2t-spacing-lg) auto;
  text-align: center;
}

/* Hạn chế bề ngang, canh trái nội dung khi bung */
.t2t-hidden-note details {
  display: inline-block;
  max-width: var(--t2t-maxwidth-intro);
  text-align: left;
  transition: var(--t2t-transition);
}

/* Nút mở/đóng (summary) – giọng thủ thỉ, nổi trên ảnh */
.t2t-hidden-note summary {
  list-style: none;
  cursor: pointer;
  user-select: none;
  color: var(--t2t-text-light);
  font-family: var(--t2t-font-sans);
  font-weight: var(--t2t-font-medium);
  font-size: var(--t2t-font-base);
  line-height: var(--t2t-lineheight-base);
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.35);
  opacity: 0.95;
  transition: var(--t2t-transition);
}
.t2t-hidden-note summary::-webkit-details-marker {
  display: none;
}
.t2t-hidden-note summary .hint {
  display: block;
  margin-top: 2px;
  color: var(--t2t-text-muted-light);
  font-size: var(--t2t-font-small);
  opacity: 0.88;
}

/* Panel nội dung khi mở – nền mềm, viền accent theo brand */
.t2t-hidden-note .panel {
  background: var(--t2t-bg-soft);
  color: var(--t2t-text-soft);
  padding: var(--t2t-padding-lg);
  border-radius: var(--t2t-radius-medium);
  margin-top: var(--t2t-spacing-md);
  border: 1px solid var(--t2t-color-border-accent);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35); /* nhẹ hơn --t2t-shadow-cta */
  line-height: var(--t2t-lineheight-base);
}

/* Hiệu ứng mở mềm */
.t2t-hidden-note details[open] .panel {
  animation: t2tNoteFade 0.25s ease;
}
@keyframes t2tNoteFade {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* States */
.t2t-hidden-note summary:hover {
  opacity: 1;
}
.t2t-hidden-note summary:focus {
  outline: 2px dashed rgba(255, 255, 255, 0.28);
  outline-offset: 4px;
}

/* Link trong panel dùng màu brand secondary */
.t2t-hidden-note .panel a {
  color: var(--t2t-color-brand-secondary);
  text-decoration: underline;
  transition: var(--t2t-transition);
}
.t2t-hidden-note .panel a:hover {
  text-shadow: 0 0 8px var(--t2t-text-glow);
}

/* ✍️ Indent utilities – dùng cho overlay, quote, hero text */
.t2t-indent-0 {
  padding-left: 0;
}
.t2t-indent-05 {
  padding-left: calc(var(--t2t-indent-step) / 2);
}
.t2t-indent-1 {
  padding-left: var(--t2t-indent-step);
}
.t2t-indent-2 {
  padding-left: calc(var(--t2t-indent-step) * 2);
}
.t2t-indent-3 {
  padding-left: calc(var(--t2t-indent-step) * 3);
}

.t2t-indent-05,
.t2t-indent-1,
.t2t-indent-2,
.t2t-indent-3 {
  text-indent: 0;
  box-sizing: border-box;
  white-space: normal;
}

/* 📱 Mobile: giảm bậc để không “cắn” mép ảnh */
@media (max-width: 768px) {
  .t2t-indent-05 {
    padding-left: calc(var(--t2t-indent-step) / 3);
  }
  .t2t-indent-1 {
    padding-left: calc(var(--t2t-indent-step) / 2);
  }
  .t2t-indent-2 {
    padding-left: var(--t2t-indent-step);
  }
  .t2t-indent-3 {
    padding-left: calc(var(--t2t-indent-step) * 1.5);
  }
}
/* Gợi ý nhịp câu trong quote cho dễ đọc (không bắt buộc) */

/* ──────────────────────────────────────────────
   t2t · Indent utilities – “deep” poetic line
   Dùng cho dòng cảm xúc đặc biệt (manifesto/xuyên đêm)
   Không dùng cho bố cục kỹ thuật.

   Mục tiêu: ~18rem trên desktop (≈ 288px)
   Giảm dần ở breakpoint nhỏ để tránh tràn.
   ────────────────────────────────────────────── */
.t2t-indent-deep {
  padding-left: 18rem; /* desktop ≥1280px */
  text-indent: 0;
  white-space: normal; /* giữ ngắt dòng tự nhiên */
  box-sizing: border-box;
}

/* Laptop ≤1279px: bớt 1/3 */
@media (max-width: 1279px) {
  .t2t-indent-deep {
    padding-left: 12rem;
  }
}

/* Tablet ≤1024px: tiếp tục giảm */
@media (max-width: 1024px) {
  .t2t-indent-deep {
    padding-left: 9rem;
  }
}

/* Mobile ≤768px: giá trị an toàn, vẫn tạo nhịp “vào sâu” */
@media (max-width: 768px) {
  .t2t-indent-deep {
    padding-left: 7rem;
  }
}

/* Small phones ≤480px */
@media (max-width: 480px) {
  .t2t-indent-deep {
    padding-left: 5rem;
  }
}

/* ============================
🌬️ Biến thể nhịp dòng (soft / break)
t2t-line system v1.2 — hardened for Elementor/TinyMCE
============================ */

/* A) Core: ép block ở mọi nơi */
.t2t-line,
.t2t-line-soft,
.t2t-line-break {
  display: block !important;
  width: 100%;
  line-height: inherit;
  margin: 0;
  padding: 0;
  text-indent: 0;
}

/* B) Nhịp mặc định */
.t2t-line:not(:first-child) {
  margin-top: 0.25em;
}
.t2t-line-soft {
  opacity: 0.96;
  letter-spacing: 0.003em;
}
.t2t-line-soft:not(:first-child) {
  margin-top: 0.15em;
}
.t2t-line-break {
  opacity: 0.98;
}
.t2t-line-break:not(:first-child) {
  margin-top: 0.8em;
}

/* C) Trong quote/stanza cảm xúc: nới nhịp */
.t2t-quote .t2t-line,
.t2t-quote .t2t-line-soft,
.t2t-quote .t2t-line-break,
.t2t-mf-stanza .t2t-line,
.t2t-mf-stanza .t2t-line-soft,
.t2t-mf-stanza .t2t-line-break {
  letter-spacing: 0.01em;
}

.t2t-quote .t2t-line:not(:first-child),
.t2t-mf-stanza .t2t-line:not(:first-child) {
  margin-top: 0.35em;
}
.t2t-quote .t2t-line-soft:not(:first-child),
.t2t-mf-stanza .t2t-line-soft:not(:first-child) {
  margin-top: 0.22em;
}
.t2t-quote .t2t-line-break:not(:first-child),
.t2t-mf-stanza .t2t-line-break:not(:first-child) {
  margin-top: 0.9em;
}

/* D) Mobile: nới nhịp cho dễ đọc */
@media (max-width: 640px) {
  .t2t-line:not(:first-child) {
    margin-top: 0.35em;
  }
  .t2t-line-soft:not(:first-child) {
    margin-top: 0.28em;
  }
  .t2t-line-break:not(:first-child) {
    margin-top: 1em;
  }
}

/* E) Tăng specificity cho vùng Elementor (đảm bảo thắng mọi reset inline) */
.elementor-widget-text-editor .t2t-line,
.elementor-widget-text-editor .t2t-line-soft,
.elementor-widget-text-editor .t2t-line-break,
.t2t-block .elementor-widget-container .t2t-line,
.t2t-block .elementor-widget-container .t2t-line-soft,
.t2t-block .elementor-widget-container .t2t-line-break,
.t2t-section .elementor-widget-container .t2t-line,
.t2t-section .elementor-widget-container .t2t-line-soft,
.t2t-section .elementor-widget-container .t2t-line-break {
  display: block !important;
}

/* ─── BƯỚC 3: Áp dụng font monospace cho NOTE & CODE ─── */

/* =========================================================
   📝 t2t-inline-note — Global (ONE SOURCE OF TRUTH)
   Ý đồ:
   - Default: chú thích “phụ”, mờ vừa đủ để không giành spotlight
   - Hover/Focus: sáng lên để dễ đọc (desktop hover + mobile tap/focus)
   - t2t-mf: giữ mood trầm hơn (hover dùng secondary)
========================================================= */

/* Default: inline note nhỏ trong câu */
.t2t-inline-note {
  display: inline-block;

  font-family: var(--t2t-font-inline);
  font-size: var(--t2t-font-inline-note);
  line-height: 1.4;

  color: var(--t2t-text-muted-light, #bbbbbb);
  opacity: var(--t2t-opacity-text-soft);

  margin-left: 0.25em;
  white-space: normal;
  word-break: break-word;
  max-width: 100%;
  box-sizing: border-box;

  text-decoration: none;
  transition:
    color 0.25s ease,
    opacity 0.25s ease;
}
/* =========================================
   t2t-inline-note — Timeless behavior
   - Inline note dùng trong câu: span/a (inline-block)
   - Inline note dùng như đoạn riêng: p/div/li (full row, chống flex)
========================================= */

/* Default: inline note nhỏ trong câu */
.t2t-inline-note {
  display: inline-block;
  /* giữ các style hiện có của huynh (font/opacity/color/...) */
}

/* Nếu dùng trên block element → luôn xuống hàng, kể cả khi cha là flex */
:is(p, div, li).t2t-inline-note {
  display: block;
  width: 100%;
  flex: 0 0 100%;
}

:is(p, div, li).t2t-inline-note + :is(p, div, li).t2t-inline-note {
  margin-top: var(--t2t-spacing-inline-note);
}

/* Hover + Focus (để mobile tap/focus cũng “sáng lên”) */
.t2t-inline-note:hover,
.t2t-inline-note:focus,
.t2t-inline-note:focus-visible {
  opacity: var(--t2t-opacity-text-full);
  color: var(--t2t-color-brand-primary, var(--t2t-brand-primary, #00ffd5));
}

/* ========== 2) VARIANT: is-link (global) ========== */
.t2t-inline-note.is-link {
  color: var(--t2t-brand-mint);
  font-style: normal;
  opacity: var(--t2t-opacity-text-full);

  text-decoration: underline dotted rgba(0, 255, 213, 0.25);
  text-underline-offset: 0.18em;
}

.t2t-inline-note.is-link:hover,
.t2t-inline-note.is-link:focus,
.t2t-inline-note.is-link:focus-visible {
  opacity: var(--t2t-opacity-text-full);
  color: var(--t2t-color-brand-primary, var(--t2t-brand-primary, #00ffd5));
  text-decoration-style: solid;
  text-decoration-color: currentColor;
}

/* ========== 3) t2t-mf OVERRIDE (mood frame) ========== */
.t2t-mf .t2t-inline-note {
  color: var(--t2t-soft-2);
  font-style: italic;
  font-family: var(--t2t-font-emotion), Georgia, serif;
  opacity: var(--t2t-opacity-text-soft);
}

/* Trong mf: hover/focus dùng secondary (trầm hơn) */
.t2t-mf .t2t-inline-note:hover,
.t2t-mf .t2t-inline-note:focus,
.t2t-mf .t2t-inline-note:focus-visible {
  opacity: var(--t2t-opacity-text-full);
  color: var(--t2t-brand-sky);
}

/* Link trong mf vẫn theo mf */
.t2t-mf .t2t-inline-note.is-link {
  color: var(--t2t-brand-mint);
  font-style: normal;
  opacity: var(--t2t-opacity-text-full);
  text-decoration: underline dotted rgba(0, 255, 213, 0.25);
}

.t2t-mf .t2t-inline-note.is-link:hover,
.t2t-mf .t2t-inline-note.is-link:focus,
.t2t-mf .t2t-inline-note.is-link:focus-visible {
  color: var(--t2t-brand-sky);
  text-decoration-style: solid;
  text-decoration-color: currentColor;
  opacity: var(--t2t-opacity-text-full);
}

/* ============================================
🔗 LIÊN KẾT TOÀN SITE – TONE T2T (REPLACE)
Áp dụng cho:
- [t2t_link] (shortcode)
- <a class="t2t-link"> thủ công khi cần
============================================ */

/* Base link – thắng màu text kế thừa */
a.t2t-link {
  color: var(--t2t-brand-secondary);
  text-decoration: underline;
  text-underline-offset: 0.18em;
  transition:
    color 0.25s ease,
    text-decoration-color 0.25s ease;
}

/* Khi link nằm trong text block (case phổ biến nhất) */
.t2t-block a.t2t-link,
.t2t-blog-block a.t2t-link,
.entry-content a.t2t-link {
  color: var(--t2t-brand-secondary);
}

/* Hover */
a.t2t-link:is(:hover, :focus, :focus-visible) {
  color: var(--t2t-color-brand-primary);
  text-decoration-color: var(--t2t-color-brand-primary);
}

/* Optional: link trong inline-note (dịu hơn một chút) */
.t2t-inline-note a.t2t-link {
  opacity: var(--t2t-opacity-text-soft);
}
.t2t-inline-note a.t2t-link:is(:hover, :focus, :focus-visible) {
  opacity: var(--t2t-opacity-text-full);
}
/*End of inline-note*/

/* Links trong note/memo – đồng bộ monospace & weight đều tay */
.t2t-memo-links a {
  font-family: var(--t2t-font-inline);
  font-weight: 500; /* đều tay, không bị đậm quá trên mobile */
  -webkit-font-smoothing: antialiased;
  position: relative;
  color: var(--t2t-color-brand-secondary, #00b7ff);
  text-decoration: none;
  border-bottom: 1px dashed rgba(0, 183, 255, 0.5);
  transition:
    color 0.25s ease,
    border-color 0.25s ease,
    text-shadow 0.25s ease;
  --memo-icon: '🎵'; /* override được per-link qua style="--memo-icon:'…'" */
}
.t2t-memo-links a:hover {
  color: var(--t2t-color-brand-primary, #00ffd5);
  border-color: rgba(0, 255, 213, 0.75);
  text-shadow: 0 0 8px rgba(0, 255, 213, 0.35);
}
.t2t-memo-links a::after {
  content: var(--memo-icon);
  opacity: 0;
  transform: translateX(0.25em);
  margin-left: 0.25em;
  transition:
    opacity 0.25s ease,
    transform 0.25s ease;
}
.t2t-memo-links a:hover::after {
  opacity: var(--t2t-opacity-text-full);
  transform: translateX(0);
}
.t2t-memo-links a:focus-visible {
  outline: 2px solid var(--t2t-color-border-accent, #00f7ff);
  outline-offset: 2px;
  border-bottom-style: solid;
}
/* Tắt icon nếu cần */
.t2t-memo-links--plain a::after {
  content: '' !important;
}
/* Tôn trọng giảm chuyển động + in ấn */
@media (prefers-reduced-motion: reduce) {
  .t2t-memo-links a,
  .t2t-memo-links a::after {
    transition: none;
  }
}
@media print {
  .t2t-memo-links a {
    text-shadow: none;
    border-bottom: 1px solid #999;
  }
  .t2t-memo-links a::after {
    content: '';
  }
}

/* 3.2 Khối code – đồng bộ monospace & tắt ligatures cho rõ ký tự */
code,
kbd,
samp,
pre {
  font-family: var(--t2t-font-code, var(--t2t-font-inline));
  font-variant-ligatures: none;
}
pre {
  white-space: pre;
}

/* ───── 🎯 Reset mặc định Elementor trong các vùng đặc biệt ───── */
.t2t-block .elementor-element,
.t2t-block-light .elementor-element,
.t2t-hero-text .elementor-element,
.t2t-section-fade .elementor-element,
.t2t-overlay-scope .elementor-element {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* 🧼 Xoá sạch margin, padding, giữ box-sizing + z-index trong các vùng chạm cảm xúc */
.t2t-block .elementor-widget-container,
.t2t-block-light .elementor-widget-container,
.t2t-hero-text .elementor-widget-container,
.t2t-section-fade .elementor-widget-container,
.t2t-overlay-scope .elementor-widget-container {
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  line-height: 1.55; /* ✍️ chưa cần var – giá trị trung bình hợp lý */
  position: relative !important;
  box-sizing: border-box;
  z-index: 1;
  text-align: left !important;
}

/* 🎯 Gói hero full screen dùng cho ảnh đầu bài */
.t2t-hero-img-wrapper--full .elementor-widget-container {
  position: relative;
  padding: 0 !important;
  margin: 0 !important;
  box-sizing: border-box;
  z-index: 1;
}

/* 🚨 Fallback – dành cho trường hợp WPCode chưa load kịp */
.t2t-overlay-scope .elementor-widget-container {
  position: relative !important;
  padding: 0 !important;
  margin: 0 !important;
  box-sizing: border-box;
  z-index: 1;
}

/* ==========================================================================
   t2tDigital · MiniTOC v6.2 (final · autospace · unified gutter · no-overlap)
   - Float dưới header, pill 1 dòng
   - Theme glass + compact; mobile overlay + BackToTop tách hẳn
   ========================================================================== */

/* Base box (khi chưa “nổi”) + gutter dùng chung */
#mini-toc {
  position: static;
  width: max-content;
  max-width: 320px;
  margin-bottom: var(--t2t-spacing-lg, 1.5rem);

  /* Gutter ngang mặc định cho TOC/panel/BackToTop (override được từ :root) */
  --t2t-toc-gutter-x: 16px;
}

/* Bản compact: thu nhỏ gutter mặc định */
#mini-toc.t2t-toc--compact {
  --t2t-toc-gutter-x: 12px;
}

/* Xoá margin mặc định của  details để pill “dính” BackToTop */
#mini-toc details,
#mini-toc details[open] {
  margin: 0;
}

/* Danh sách mục lục */
#mini-toc .t2t-toc__list {
  list-style: none;
  margin: var(--t2t-toc-gap, 8px) 0 0;
  padding: 0;
  max-height: min(60vh, 420px);
  overflow: auto;
}

/* Link: default = emotion-soft; hover/active theo brand */
#mini-toc .t2t-toc__list a {
  display: block;
  padding: 8px 10px;
  border-radius: 10px;
  color: var(--t2t-emotion-soft, #eae3cf);
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.35);
  text-decoration: none;
  transition: var(--t2t-transition, all 0.3s ease);
}
#mini-toc .t2t-toc__list a:hover {
  color: var(--t2t-color-brand-primary, #00ffd5);
  background: rgba(0, 255, 213, 0.06);
}
#mini-toc .t2t-toc__list a.is-active,
#mini-toc .t2t-toc__list a[aria-current='true'] {
  color: var(--t2t-color-brand-secondary, #00b7ff);
  background: rgba(0, 183, 255, 0.12);
  box-shadow: inset 2px 0 0 var(--t2t-color-brand-secondary, #00b7ff);
}
/* Bàn phím */
#mini-toc .t2t-toc__list a:focus-visible {
  outline: 2px solid var(--t2t-color-border-accent, #00f7ff);
  outline-offset: 2px;
}

/* Summary (pill) – 1 dòng + hint linh hoạt */
.t2t-toc__toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  cursor: pointer;
  gap: 10px;
  border: none;
  border-radius: var(--t2t-radius-md, 10px);
  background: linear-gradient(
    135deg,
    var(--t2t-color-brand-primary, #00ffd5),
    var(--t2t-color-brand-secondary, #00b7ff)
  );
  color: var(--t2t-text-dark, #1a1a1a);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.t2t-toc__toggle .hint {
  font-size: 12px;
  opacity: 0.8;
  white-space: nowrap;
}

/* ≤1280px: ẩn hint để giữ 1 dòng */
@media (max-width: 1280px) {
  #mini-toc .t2t-toc__toggle .hint {
    display: none;
  }
}

/* Float: luôn dưới header (JS gán .is-floating) */
#mini-toc.is-floating {
  position: fixed;
  top: var(--header-offset, 84px); /* desktop mặc định */
  left: var(--t2t-toc-gutter-x);
  right: auto;
  bottom: auto;
  z-index: 50;

  /* xếp cột để pill + backtop canh một mép (dùng gap thay vì margin-top) */
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--t2t-toc-gap, 8px);
}
/* Hero: pill bớt “ồn” một chút */
#mini-toc.is-floating .t2t-toc__toggle {
  opacity: 0.92;
}

/* Theme “glass” – mờ, blur, chữ có bóng để đọc trên mọi nền */
.t2t-toc--glass .t2t-toc__toggle {
  background: var(--t2t-bg-glass-dark, rgba(0, 0, 0, 0.28));
  color: var(--t2t-emotion-soft, #eae3cf);
  border: 1px solid var(--t2t-border-strong, rgba(0, 247, 255, 0.25));
  backdrop-filter: saturate(120%) blur(8px);
  -webkit-backdrop-filter: saturate(120%) blur(8px);
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.6);
}
.t2t-toc--glass #toc-panel[open] {
  background: var(--t2t-bg-glass-dark, rgba(0, 0, 0, 0.25));
  border: 1px solid var(--t2t-border-strong, rgba(0, 247, 255, 0.25));
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
}
/* Hover tinh tế hơn trong theme glass */
.t2t-toc--glass .t2t-toc__list a:hover {
  background: rgba(255, 255, 255, 0.07);
  color: var(--t2t-color-brand-primary, #00ffd5);
}

/* Kích thước gọn (compact) */
.t2t-toc--compact .t2t-toc__toggle {
  padding: 8px 12px;
  border-radius: var(--t2t-radius-sm, 6px);
  font-size: clamp(14px, 1.8vw, 15px);
}
.t2t-toc--compact .t2t-toc__list a {
  padding: 6px 8px;
  border-radius: 8px;
  font-size: clamp(14px, 2.1vw, 15px);
}

/* =========================== Mobile / Tablet =========================== */
@media (max-width: 1024px) {
  /* Neo cụm TOC về góc trái dưới, thống nhất gutter */
  #mini-toc.is-floating {
    top: auto;
    bottom: 16px;
    left: var(--t2t-toc-gutter-x);
    right: auto;
  }

  /* Danh sách trong panel: kích cỡ & cuộn mượt */
  #mini-toc .t2t-toc__list {
    font-size: 16px;
    max-height: 55vh;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }

  /* Panel khi mở: bám gutter + tách hẳn khỏi BackToTop (thắng mọi override) */
  #mini-toc.is-floating#mini-toc #toc-panel[open] {
    position: fixed;
    left: var(--t2t-toc-gutter-x) !important;
    right: var(--t2t-toc-gutter-x) !important;

    /* Chọn giá trị LỚN HƠN giữa công thức động và một ngưỡng tối thiểu */
    bottom: max(
      calc(
        env(safe-area-inset-bottom, 0) + var(--t2t-backtop-height, 40px) + var(--t2t-toc-gap, 8px) +
          var(--t2t-toc-safe-gap, 16px) /* A: tăng đệm an toàn */ + 4px /* chống làm tròn px */
      ),
      80px /* ngưỡng tối thiểu */
    ) !important;

    max-height: 55vh;
    padding: 12px 14px;
    background: var(--t2t-bg-glass-dark, rgba(0, 0, 0, 0.25));
    border: 1px solid var(--t2t-color-border-accent, rgba(0, 247, 255, 0.25));
    border-radius: var(--t2t-radius-md, 10px);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
    z-index: 1001; /* panel ở trên khi mở */
    transform: translateZ(0); /* ổn định layer iOS */
  }
  @supports not (backdrop-filter: blur(1px)) {
    #mini-toc.is-floating #toc-panel[open] {
      background: rgba(0, 0, 0, 0.8);
    }
  }

  /* Khi panel mở: hint gọn */
  #mini-toc.is-floating #toc-panel[open] .t2t-toc__toggle {
    justify-content: flex-start;
  }
  #mini-toc.is-floating #toc-panel[open] .t2t-toc__toggle .hint {
    display: inline;
    margin-left: 0.5rem;
    font-size: 11.5px;
    opacity: 0.85;
    white-space: nowrap;
  }

  /* Khi panel mở: BackToTop ở dưới & không nhận click (ngừa “nút ảo”) */
  #mini-toc .t2t-backtop {
    position: relative;
  } /* đảm bảo z-index hoạt động */
  #mini-toc.is-floating #toc-panel[open] ~ .t2t-backtop {
    z-index: 1 !important;
    pointer-events: none;
  }
  #mini-toc.is-floating #toc-panel:not([open]) ~ .t2t-backtop {
    pointer-events: auto;
  }

  /* BackToTop gọn hơn sau khi qua Section 2 */
  #mini-toc.is-floating.after-sec2 .t2t-backtop {
    font-size: 14px;
    padding: 6px 9px;
  }
}

/* Anchor jump: tránh bị header che khi theo link */
[id] {
  scroll-margin-top: calc(var(--header-offset, 84px) + 16px);
}

/* Back to Top — mặc định ẩn; hiện khi qua Section 2 (JS gắn .after-sec2) */
#mini-toc .t2t-backtop {
  display: none;
}
#mini-toc.is-floating.after-sec2 .t2t-backtop {
  display: inline-flex;
  /* KHÔNG dùng margin-top nữa, đã có flex gap ở container */
  margin-top: 0;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  border-radius: var(--t2t-radius-sm, 8px);
  background: var(--t2t-bg-glass-dark, rgba(0, 0, 0, 0.28));
  border: 1px solid var(--t2t-color-border-accent, rgba(0, 247, 255, 0.25));
  color: var(--t2t-emotion-soft, #eae3cf);
  text-decoration: none;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
  backdrop-filter: saturate(120%) blur(6px);
  -webkit-backdrop-filter: saturate(120%) blur(6px);
  transition:
    transform 0.2s ease,
    background 0.2s ease,
    color 0.2s ease;
}
#mini-toc.is-floating.after-sec2 .t2t-backtop:hover {
  transform: translateY(-2px);
  background: rgba(0, 0, 0, 0.34);
  color: var(--t2t-color-brand-primary, #00ffd5);
}

/* Xoá khoảng cách thừa Elementor chèn giữa details và BackToTop */
#mini-toc > br {
  display: none;
}
#mini-toc > p {
  margin: 0;
} /* chỉ p con trực tiếp của #mini-toc */

/* ===== MiniTOC · Side mode (đứng bên trái cột 880px) ===== */
/* Gỡ ảnh hưởng max-width/padding của .t2t-block/.t2t-section lên TOC */
.t2t-block #mini-toc,
.t2t-section #mini-toc {
  max-width: none !important;
  padding: 0 !important;
  margin: 0 !important;
  box-sizing: border-box;
  z-index: 3;
}
#mini-toc.rank-math-toc {
  width: var(--toc-width) !important;
}

/* ✅ Chế độ đứng bên trái cột nội dung (dùng class .is-side) */
#mini-toc.is-side {
  position: sticky !important;
  top: var(--toc-top) !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;

  display: block !important;
  width: var(--toc-width) !important;

  /* đẩy ra trái cột 880px */
  margin-left: calc(
    (100vw - var(--t2t-maxwidth-blog)) / 2 /* mép trái cột */ - var(--toc-gap) /* khoảng cách */ -
      var(--toc-width) /* rộng TOC */
  ) !important;
}

/* Nội dung giữ nguyên cột 880px */
.t2t-section,
.t2t-block {
  position: relative;
}

/* Viewport hẹp → TOC xếp trên, full line */
@media (max-width: 1280px) {
  #mini-toc.is-side {
    position: static !important;
    width: 100% !important;
    margin: 0 0 1rem 0 !important;
  }
}

/* =========================
   t2tDigital · Alias Layer
   Khai báo lớp mỏng để KHÔNG phải sửa HTML
   ========================= */

/* 1) t2t-section = khung nội dung chuẩn như .t2t-block */
.t2t-section {
  max-width: var(--t2t-maxwidth-blog);
  width: 100%;
  margin: 0 auto;
  padding: 0 var(--t2t-padding-blog-tablet);
  box-sizing: border-box;
}
@media (max-width: 767px) {
  .t2t-section {
    padding: var(--t2t-padding-blog-mobile);
  }
}

/* Screen-reader only (thay inline hide) */
.t2t-sr-only {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Quote mở bài (thay inline center + style) */
.t2t-intro-quote {
  text-align: center;
  font-weight: 600;
  color: var(--t2t-color-brand-secondary, #00b7ff);
  font-size: clamp(1.25rem, 2.2vw, 1.75rem);
  margin: 0 0 var(--t2t-spacing-md, 12px);
  font-style: italic;
}

/* 2) t2t-hero = vùng hero bọc media; có modifier .is-fullscreen */
.t2t-hero {
  position: relative;
  overflow: hidden;
}
.t2t-hero.is-fullscreen,
.t2t-hero-fullscreen {
  /* alias sang class sẵn có */
  height: 100vh;
  position: relative;
  overflow: hidden;
}

/* (tuỳ chọn) nếu trang này dùng overlay text “hero text”
   nhưng đang đặt class khác, bạn có thể alias nhẹ: */
@media (min-width: 1025px) {
  .t2t-hero .t2t-hero-text {
    position: absolute;
    max-width: 60%;
    z-index: 3;
    box-sizing: border-box;
  }
  .t2t-hero .t2t-hero-text.top-left {
    top: 8%;
    left: 5%;
  }
  .t2t-hero .t2t-hero-text.top-center {
    top: 8%;
    left: 50%;
    transform: translateX(-50%);
  }
  .t2t-hero .t2t-hero-text.top-right {
    top: 8%;
    right: 5%;
  }
  .t2t-hero .t2t-hero-text.bottom-left {
    bottom: 8%;
    left: 5%;
  }
  .t2t-hero .t2t-hero-text.bottom-center {
    bottom: 8%;
    left: 50%;
    transform: translateX(-50%);
  }
  .t2t-hero .t2t-hero-text.bottom-right {
    bottom: 8%;
    right: 5%;
  }
}

/* 3) t2t-seo-intro = alias của .t2t-intro-text (lead giàu cảm xúc) */
.t2t-seo-intro {
  font-size: clamp(17px, 2.2vw, 24px);
  font-style: italic;
  color: var(--t2t-emotion-soft);
  text-align: left;
  line-height: var(--t2t-lineheight-base);
  margin-bottom: var(--t2t-spacing-lg);
  display: block;
  max-width: var(--t2t-maxwidth-intro);
  padding-left: var(--t2t-padding-xs);
  padding-right: var(--t2t-padding-xs);
}

/* ====== HERO ====== */
.t2t-archive-hero {
  position: relative;
  min-height: clamp(320px, 46vw, 520px);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* t2t-archive-hero.css */
/* đảm bảo ảnh chiếm full bề ngang và không bị tràn khi ảnh dọc */
.t2t-archive-hero .t2t-archive-hero-picture,
.t2t-archive-hero .t2t-archive-hero-img-wrap {
  position: relative;
  z-index: 1;
}

.t2t-archive-hero .t2t-archive-hero-picture img,
.t2t-archive-hero .t2t-archive-hero-img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 0;
  margin: 0 auto;
}

/* overlay luôn nằm trên ảnh */
.t2t-archive-hero .t2t-overlay-text {
  position: absolute;
  z-index: 3;
  inset: auto auto 3.5rem 3.5rem;
}

@media (max-width: 767px) {
  .t2t-archive-hero {
    min-height: 320px;
  }
  .t2t-archive-hero .t2t-overlay-text {
    position: absolute;
    left: 1.5rem;
    right: 1.5rem;
    bottom: 1.5rem;
  }
  .t2t-archive-hero .t2t-archive-hero-picture img {
    width: 100%;
    border-radius: 0;
  }
}

.t2t-archive-hero .t2t-overlay-text {
  max-width: 760px;
  padding: clamp(16px, 3vw, 24px);
  background: linear-gradient(90deg, rgba(0, 10, 16, 0.65), rgba(0, 10, 16, 0.25), transparent);
  border-left: 3px solid var(--t2t-color-brand-secondary, #00b7ff);
  border-radius: 12px;
}
@media (min-width: 1025px) {
  .t2t-archive-hero .bottom-left {
    bottom: 12%;
    left: 5%;
    position: absolute;
  }
}

/* ====== 1) GRID LAYOUT (Elementor Posts) ====== */
.t2t-posts-grid .elementor-posts {
  display: grid;
  gap: clamp(16px, 2.4vw, 24px);
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
@media (max-width: 1024px) {
  .t2t-posts-grid .elementor-posts {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 767px) {
  .t2t-posts-grid .elementor-posts {
    grid-template-columns: 1fr;
  }
}

/* ====== 2) CARD (Elementor Posts) ====== */
.t2t-posts-grid .elementor-post {
  background: var(--t2t-bg-elevated, #0d1014);
  border: 1px solid rgba(0, 247, 255, 0.08);
  border-radius: var(--t2t-radius-xl, 16px);
  overflow: hidden;
  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease,
    border-color 0.25s ease;
}
.t2t-posts-grid .elementor-post:hover {
  transform: translateY(-4px);
  border-color: rgba(0, 247, 255, 0.22);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
}

/* Thumbnail: 16:9, cover */
.t2t-posts-grid .elementor-post__thumbnail {
  display: block !important;
}
.t2t-posts-grid .elementor-post__thumbnail img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
  object-position: center;
  aspect-ratio: 16 / 9;
}

/* Nội dung card */
.t2t-posts-grid .elementor-post__text {
  padding: 14px 16px 18px;
}

/* ====== 3) META / TITLE / EXCERPT / READMORE (Elementor) ====== */
.t2t-posts-grid .elementor-post__meta-data {
  font-size: 12.5px;
  opacity: 0.88;
  color: rgba(255, 255, 255, 0.62);
  margin-bottom: 8px;
}
.t2t-posts-grid .elementor-post__meta-data a {
  color: inherit !important;
  text-decoration: none;
}
.t2t-posts-grid .elementor-post__title {
  margin: 0 0 8px;
  font-size: clamp(18px, 2.2vw, 20px);
  line-height: 1.35;
}

/* Ép màu tiêu đề mặc định + hover brand (đè theme) */
.t2t-archive .t2t-posts-grid .elementor-post__title a {
  color: var(--t2t-text-light, #e9edf2) !important;
  text-decoration: none;
}
.t2t-archive .t2t-posts-grid .elementor-post__title a:hover {
  color: var(--t2t-color-brand-primary, #00ffd5) !important;
  text-shadow: 0 0 8px rgba(0, 255, 213, 0.25);
}

/* EXCERPT/DESC: sáng hơn để dễ đọc */
.t2t-posts-grid .elementor-post__excerpt,
.t2t-posts-grid .elementor-post__excerpt p {
  color: rgba(255, 255, 255, 0.78) !important;
  opacity: 1 !important;
  line-height: 1.65;
}

/* Read more */
.t2t-posts-grid .elementor-post__read-more {
  color: var(--t2t-color-brand-secondary, #00b7ff);
  border-bottom: 1px dashed rgba(0, 183, 255, 0.45);
  text-decoration: none;
  font-weight: 600;
}
.t2t-posts-grid .elementor-post__read-more:hover {
  color: var(--t2t-color-brand-primary, #00ffd5);
  border-bottom-style: solid;
}

/* ====== 4) BADGE / TERMS: bỏ nền trắng, về tone t2tDigital ======
   (cover Elementor + TWBB nếu có) */
.t2t-posts-grid .elementor-post__badge,
.t2t-posts-grid .elementor-post-info__terms-list a,
.t2t-posts-grid .twbb-posts-badge,
.t2t-posts-grid .twbb-posts-terms a {
  background: rgba(0, 255, 213, 0.1) !important;
  color: var(--t2t-color-brand-primary, #00ffd5) !important;
  border: 1px solid rgba(0, 183, 255, 0.35) !important;
  border-radius: 999px;
  padding: 4px 10px;
  font-weight: 700;
  text-decoration: none !important;
  backdrop-filter: blur(6px);
}
.t2t-posts-grid .elementor-post__badge:hover,
.t2t-posts-grid .elementor-post-info__terms-list a:hover,
.t2t-posts-grid .twbb-posts-terms a:hover {
  background: rgba(0, 255, 213, 0.16) !important;
  border-color: rgba(0, 255, 213, 0.55) !important;
}

/* ====== 5) PAGINATION ====== */
.t2t-posts-grid .elementor-pagination a,
.t2t-posts-grid .elementor-pagination span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  height: 36px;
  padding: 0 10px;
  border-radius: 999px;
  background: rgba(0, 247, 255, 0.07);
  border: 1px solid rgba(0, 247, 255, 0.18);
  color: var(--t2t-text-light, #e9edf2);
  transition:
    background 0.2s,
    color 0.2s,
    border-color 0.2s;
}
.t2t-posts-grid .elementor-pagination a:hover,
.t2t-posts-grid .elementor-pagination .page-numbers.current {
  background: linear-gradient(
    to right,
    var(--t2t-color-brand-primary, #00ffd5),
    var(--t2t-color-brand-secondary, #00b7ff)
  );
  border-color: transparent;
  color: #00171f;
}

/* ====== 6) TWBB COMPAT (nếu widget cũ là TWBB) ====== */
.t2t-posts-grid .twbb-posts-item .twbb-posts-title a,
.t2t-posts-grid h3.twbb-posts-title-tag a {
  color: var(--t2t-emotion-soft, #eae3cf) !important;
  text-decoration: none;
  transition:
    color 0.25s ease,
    text-shadow 0.25s ease;
}
/* Hover / focus: bật màu thương hiệu + glow (KHÔNG dùng :is) */
.t2t-posts-grid .twbb-posts-item .twbb-posts-title a:hover,
.t2t-posts-grid .twbb-posts-item .twbb-posts-title a:focus,
.t2t-posts-grid .twbb-posts-item .twbb-posts-title a:focus-visible,
.t2t-posts-grid h3.twbb-posts-title-tag a:hover,
.t2t-posts-grid h3.twbb-posts-title-tag a:focus,
.t2t-posts-grid h3.twbb-posts-title-tag a:focus-visible {
  color: var(--t2t-color-brand-primary, #00ffd5) !important;
  text-shadow: 0 0 10px rgba(0, 255, 213, 0.35);
}

/* TWBB meta/excerpt đồng bộ sáng hơn */
.t2t-posts-grid .twbb-posts-meta,
.t2t-posts-grid .twbb-posts-meta * {
  color: rgba(255, 255, 255, 0.62) !important;
}
.t2t-posts-grid .twbb-posts-excerpt,
.t2t-posts-grid .twbb-posts-excerpt * {
  color: rgba(255, 255, 255, 0.78) !important;
  opacity: 1 !important;
}

/* A) Bắc cầu gradient cho tiêu đề có class t2t-heading */
.t2t-heading .elementor-heading-title {
  display: inline-block;
  font-weight: 800;
  font-size: clamp(1.6rem, 2.2vw, 2.3rem);
  background: linear-gradient(
    90deg,
    var(--t2t-color-brand-primary),
    var(--t2t-color-brand-secondary),
    #ddfaff,
    var(--t2t-color-brand-primary)
  );
  background-size: 300% 300%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: t2tTextGradient 8s ease-in-out infinite;
  line-height: 1.3;
}

/* B) Fallback cho các widget Title (10Web/Theme) – luôn thấy chữ */
.t2t-blog-wrapper .elementor-widget-twbb-post-page-title .elementor-heading-title,
.t2t-blog-wrapper .elementor-widget-twbb-post-title .elementor-heading-title,
.t2t-blog-wrapper .elementor-widget-theme-post-title .elementor-heading-title {
  position: relative;
  z-index: 2;
  color: var(--t2t-text-soft);
}

/* === T2T Blog — HERO (clean final) === */

/* 1) HERO: kích thước & stacking root */
.t2t-hero-img-wrapper--full {
  position: relative;
  isolation: isolate; /* hero làm gốc z-index */
  height: clamp(480px, 75dvh, 110dvh); /* chiều cao THẬT để % bên trong tính đúng */
  overflow: hidden;
  z-index: 1;
  margin: 0 !important;
  padding: 0 !important;

  /* xóa gap/padding mặc định của container (nếu có) */
  --e-con-grid-gap: 0px;
  --e-con-padding-block-start: 0px;
  --e-con-padding-block-end: 0px;
  --e-con-padding-inline-start: 0px;
  --e-con-padding-inline-end: 0px;
}
/* desktop: nới preferred lên để lộ đủ thơ */
@media (min-width: 1025px) {
  .t2t-hero-img-wrapper--full {
    height: clamp(560px, 92dvh, 120dvh); /* thử 90–95dvh tùy ý */
  }
}

/* 2) Container/column trong HERO luôn 100% bề ngang (chặn “50% width”) */
.t2t-hero-img-wrapper--full .elementor-container,
.t2t-hero-img-wrapper--full .elementor-row,
.t2t-hero-img-wrapper--full .elementor-column {
  width: 100% !important;
  max-width: 100% !important;
  flex: 0 0 100% !important;
}

/* 3) Widget ảnh & wrapper: chiếm đủ rộng/cao của hero */
.t2t-hero-img-wrapper--full
  :is(
    .elementor-widget-twbb_featured-image,
    .elementor-widget-twbb-featured-image,
    .elementor-widget-theme-post-featured-image,
    .elementor-widget-image
  ) {
  position: relative !important;
  width: 100% !important;
  max-width: 100% !important;
  flex: 0 0 100% !important;
  align-self: stretch !important;
  height: 100% !important;
  overflow: hidden !important;
  border-radius: inherit;

  /* khóa biến responsive của Elementor */
  --container-widget-width: 100% !important;
  --container-widget-width-tablet: 100% !important;
  --container-widget-width-mobile: 100% !important;
  --container-widget-flex-grow: 0 !important;
}

/* 3b) Trường hợp có .elementor-widget-container ở trong */
.t2t-hero-img-wrapper--full
  :is(
    .elementor-widget-twbb_featured-image,
    .elementor-widget-twbb-featured-image,
    .elementor-widget-theme-post-featured-image,
    .elementor-widget-image
  )
  > .elementor-widget-container {
  width: 100% !important;
  max-width: 100% !important;
  height: 100% !important;
  overflow: hidden !important;
}

/* 3c) Nếu 10Web/Elementor bọc bằng figure */
.t2t-hero-img-wrapper--full figure.wp-caption {
  position: relative !important;
  height: 100% !important;
  overflow: hidden !important;
  border-radius: inherit;
}

/* 4) IMG: phủ kín hero + hạ các hiệu ứng tạo stacking context lạ */
.t2t-hero-img-wrapper--full
  :is(
    .elementor-widget-twbb_featured-image,
    .elementor-widget-twbb-featured-image,
    .elementor-widget-theme-post-featured-image,
    .elementor-widget-image,
    figure.wp-caption
  )
  img {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  object-fit: cover !important;
  object-position: center center !important;
  display: block !important;
  aspect-ratio: auto !important;
  transform: none !important;
  filter: none !important;
  mix-blend-mode: normal !important;
}

/* 5) Overlay: luôn hiện & nổi trên ảnh (gộp 2 block trước đó thành 1) */
.t2t-hero-img-wrapper--full .t2t-typewriter-overlay {
  position: absolute;
  left: clamp(12px, 5vw, 5%);
  bottom: clamp(12px, 7vh, 10vh);
  z-index: 5 !important; /* ảnh ở z=1, overlay ở trên */
  pointer-events: none;
  max-width: min(90vw, 1100px);
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* Nếu lỡ bị dán lớp ẩn của Elementor → bắt buộc hiển thị */
.t2t-typewriter-overlay[class*='elementor-hidden'] {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* 6) Section 2: luôn dưới hero */
.t2t-blog-wrapper {
  position: relative;
  z-index: 2;
  margin-top: 0 !important;
}
.t2t-blog-wrapper--has-hero {
  padding-top: 0 !important;
}

/* =========================================================
   T2T · Single Hero Typewriter (timeless, scoped)
   - Speed by class: .t2t-tw--slow / .t2t-tw--fast
   - Per-line delays via CSS vars from PHP:
     --t2t-tw-delay-1, --t2t-tw-delay-2, --t2t-tw-delay-3
========================================================= */

.t2t-typewriter--single {
  /* fallback nếu PHP chưa set */
  --t2t-tw-delay-1: 0s;
  --t2t-tw-delay-2: 0s;
  --t2t-tw-delay-3: 0s;
}

/* nhịp chậm (mặc định) */
.t2t-typewriter--single.t2t-tw--slow {
  --t2t-tw-typing-duration: 3.5s;
}

/* nhịp nhanh */
.t2t-typewriter--single.t2t-tw--fast {
  --t2t-tw-typing-duration: 1.8s;
}

/* map delay theo từng line */
.t2t-typewriter--single .t2t-tw-line-1 {
  --t2t-tw-delay: var(--t2t-tw-delay-1);
}
.t2t-typewriter--single .t2t-tw-line-2 {
  --t2t-tw-delay: var(--t2t-tw-delay-2);
}
.t2t-typewriter--single .t2t-tw-line-3 {
  --t2t-tw-delay: var(--t2t-tw-delay-3);
}

/* override animation cho single typewriter lines (không ảnh hưởng legacy ngoài single) */
.t2t-typewriter--single .t2t-typewriter-line {
  animation-name: typing-line, blink-caret;
  animation-duration: var(--t2t-tw-typing-duration), 0.7s;
  animation-timing-function: steps(50, end), step-end;
  animation-delay: var(--t2t-tw-delay, 0s), 0s;
  animation-iteration-count: 1, infinite;
  animation-fill-mode: both, none;
}

/* --- A. Sửa lỗi phạm vi: đừng ép mọi wrapper margin-top = 0 --- */
.t2t-blog-wrapper {
  position: relative;
  z-index: 2;
  /* bỏ dòng margin-top: 0 !important; ở rule cũ */
}
/* Chỉ khi có hero mới cần sát mép */
.t2t-blog-wrapper--has-hero {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* --- B. Wrapper riêng cho Intro ở Category --- */
.t2t-blog-wrapper--intro-only {
  background: transparent;
  padding: clamp(8px, 1.5vw, 12px) 0;
  margin-top: clamp(10px, 2vw, 18px); /* kéo gần hero vừa đủ */
  margin-bottom: 0;
}

/* --- C. Khối Intro nổi nhẹ, không fullwidth --- */
.t2t-blog-block--intro {
  /* GIỮ các margin/padding cũ của bạn, thêm/override phần dưới */
  max-width: min(980px, 92vw);
  margin-left: auto;
  margin-right: auto;
  background: rgba(8, 8, 8, 0.72);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 14px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.28);
  padding: clamp(14px, 2vw, 18px) clamp(16px, 2.4vw, 22px);
}

/* Nếu muốn intro gần hero hơn chút xíu */
.t2t-blog-block--intro .t2t-hr--fade {
  margin: 0.75rem 0 1rem;
}

/* 7) Trong editor: cho phép overlay tràn để dễ chỉnh */
.elementor-editor-active .t2t-hero-img-wrapper--full {
  overflow: visible !important;
}

/* 8) Mobile: tránh parent của HTML widget “co/clip” overlay */
@media (max-width: 767px) {
  .t2t-hero-img-wrapper--full .elementor-widget-html,
  .t2t-hero-img-wrapper--full .elementor-widget-html > .elementor-widget-container {
    position: static !important;
    overflow: visible !important;
    height: auto !important;
  }
}
/* Desktop & Tablet: chỉ hiện ảnh ngang */
.t2t-hero-img-wrapper--full .hero-mobile {
  display: none !important;
}
.t2t-hero-img-wrapper--full .hero-desktop {
  display: block !important;
}

/* Mobile: chỉ hiện ảnh dọc */
@media (max-width: 767px) {
  .t2t-hero-img-wrapper--full .hero-mobile {
    display: block !important;
  }
  .t2t-hero-img-wrapper--full .hero-desktop {
    display: none !important;
  }
}

/* ——— Footer · Tuyên ngôn & Chữ ký ——— */
.t2t-manifesto-footnote {
  text-align: center;
  margin: 0 0 0.75rem;
  font-style: italic;
}
.t2t-manifesto-footnote p {
  margin: 0.2rem 0;
}
.t2t-manifesto-footnote .line1 {
  font-weight: 600;
}
.t2t-manifesto-footnote .line2 {
  opacity: 0.92;
}

.t2t-footer-link-poetic {
  color: var(--t2t-color-brand-primary, #00ffd5);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition:
    color 0.25s ease,
    opacity 0.2s ease;
  font-style: italic;
}
.t2t-footer-link-poetic:hover {
  color: var(--t2t-color-brand-secondary, #00b7ff);
  opacity: 0.9;
}

/* Chữ ký © */
.t2t-footer-signature {
  text-align: center;
  font-size: clamp(13px, 0.92rem, 15px);
  line-height: 1.75;
  font-style: italic;
  color: var(--t2t-text-light, #bcbcbc);
  margin: 1.2rem 0 0.8rem;
}
.t2t-footer-signature strong {
  color: var(--t2t-color-brand-primary, #00ffd5);
  font-weight: 600;
  letter-spacing: 0.4px;
}
.t2t-footer-signature .accent {
  color: var(--t2t-color-brand-secondary, #00b7ff);
  font-weight: 500;
}

/* Link trong chữ ký © (Sitemap, Liên hệ, v.v.) */
.t2t-footer-signature a {
  color: var(--t2t-color-brand-secondary, #00b7ff);
  text-decoration: none;
  border-bottom: 1px dashed currentColor;
  text-underline-offset: 2px;
  transition:
    opacity 0.2s ease,
    border-color 0.2s ease;
}
.t2t-footer-signature a:hover {
  opacity: 0.8;
  border-color: transparent;
}
.t2t-footer-signature a:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
  border-color: transparent;
}

/* Tagline trong chữ ký xuống dòng mềm */
.t2t-footer-signature em {
  display: block;
  font-style: italic;
  margin-top: 0.3rem;
  color: var(--t2t-text-light, #bcbcbc);
  opacity: 0.95;
}

/* A11y & polish cho link tuyên ngôn */
.t2t-footer-link-poetic:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
  text-decoration-thickness: from-font;
}
.t2t-footer-link-poetic:visited {
  color: var(--t2t-color-brand-primary, #00ffd5);
  opacity: 0.95;
}

@media (prefers-reduced-motion: reduce) {
  .t2t-footer-link-poetic,
  .t2t-footer-signature a {
    transition: none;
  }
}

/* Nhịp dãn cách nhẹ hơn trên mobile rất nhỏ */
@media (max-width: 480px) {
  .t2t-manifesto-footnote {
    font-size: 0.95rem;
  }
  .t2t-footer-signature {
    font-size: 0.9rem;
  }
}
@media (max-width: 400px) {
  .t2t-manifesto-footnote p {
    margin: 0.16rem 0;
  }
}

/* Gom nhóm link pháp lý lên 1 dòng, có khoảng cách */
.t2t-footer-signature .t2t-legal {
  display: inline-flex;
  gap: 0.6rem; /* khoảng cách giữa liên kết */
  align-items: baseline;
  flex-wrap: nowrap; /* ép cùng dòng */
}

/* Nếu lỡ chèn <br> trước nhóm link, ẩn đi để khỏi xuống dòng */
.t2t-footer-signature br + .t2t-legal {
  display: inline-flex;
}
.t2t-footer-signature .break {
  display: none;
} /* dùng class .break cho <br> nếu muốn chủ động */

/* Đồng bộ màu hover của 2 link với màu primary */
.t2t-footer-signature a:hover,
.t2t-footer-signature a:focus-visible {
  color: var(--t2t-color-brand-primary, #00ffd5);
  border-color: transparent;
  opacity: 1;
}

/* Cho mobile rất hẹp: cho phép xuống 2 dòng nếu cần */
@media (max-width: 420px) {
  .t2t-footer-signature .t2t-legal {
    flex-wrap: wrap;
    row-gap: 0.25rem;
  }
}
/* ───────────────────────────────────────────────
   🌙 t2tDigital · Footer Mini-Manifesto (ver A + ver C)
   Phiên bản gộp hoàn chỉnh · Tone "Kem bơ" đồng bộ poetic links
   ─────────────────────────────────────────────── */

/* Scope rộng để đảm bảo thắng mọi theme/footer */
.site-footer .t2t-mini,
footer .t2t-mini,
.elementor-location-footer .t2t-mini,
.site-footer .t2t-mini--poem,
footer .t2t-mini--poem,
.elementor-location-footer .t2t-mini--poem,
.site-footer .t2t-mini--quote,
footer .t2t-mini--quote,
.elementor-location-footer .t2t-mini--quote {
  text-align: center;
  margin: 0.9rem 0 0.55rem;
  font-style: italic;
  color: var(--t2t-color-butter, #f6e7c8) !important;
  font-size: clamp(0.94rem, 2.2vw, 1.05rem);
}

/* ─── ver A · Poem style ───────────────────────── */

/* Dòng tiêu đề */
.t2t-mini-title {
  font-weight: 700;
  letter-spacing: 0.25px;
  color: var(--t2t-color-butter, #f6e7c8) !important;
}

/* Dải line gradient (phải có phần tử <div class="t2t-mini-line">) */
.t2t-mini-line {
  display: block;
  width: 46px;
  height: 2px;
  margin: 0.55rem auto 0.35rem;
  background: linear-gradient(90deg, var(--t2t-color-butter-strong), var(--t2t-color-butter));
  border-radius: 2px;
  opacity: 0.95;
}

/* Tagline nhỏ */
.t2t-mini-sub {
  margin: 0.38rem auto 0.22rem;
  opacity: 0.92;
  max-width: 36ch;
  color: var(--t2t-color-butter, #f6e7c8) !important;
}

/* Liên kết poetic */
a.t2t-mini-link {
  color: var(--t2t-color-brand-secondary, #00b7ff) !important;
  text-decoration: underline;
  text-underline-offset: 3px;
  transition:
    color 0.22s ease,
    opacity 0.22s ease;
}
a.t2t-mini-link:hover,
a.t2t-mini-link:focus-visible {
  color: var(--t2t-color-brand-primary, #00ffd5) !important;
}
a.t2t-mini-link:visited {
  opacity: 0.98;
}
a.t2t-mini-link:focus-visible {
  outline: 2px solid var(--t2t-color-brand-secondary);
  outline-offset: 2px;
}

/* ─── ver C · Quote block ───────────────────────── */

.t2t-mini--quote .t2t-mini-inner {
  max-width: 640px;
  margin: 0 auto 0.45rem;
  padding: 0.8rem 1rem 0.9rem;
  border-left: 3px solid var(--t2t-color-butter-strong) !important;
  background: rgba(255, 255, 255, 0.03);
  border-radius: 10px;
}

.t2t-mini--quote .t2t-mini-quote {
  margin: 0;
  font-weight: 600;
  line-height: 1.55;
  color: var(--t2t-color-butter, #f6e7c8) !important;
}

.t2t-mini--quote .t2t-mini-cite {
  margin: 0.25rem 0 0;
  display: inline-block;
  color: var(--t2t-color-brand-secondary, #00b7ff) !important;
  opacity: 0.95;
}

/* ─── Hover & focus cho link footer legal (Sitemap, Liên hệ) ─── */
footer .t2t-legal a:hover {
  opacity: 0.9;
  text-decoration: underline;
  text-underline-offset: 3px;
}
footer .t2t-footer-legal a:focus-visible {
  outline: 2px solid var(--t2t-color-brand-secondary);
  outline-offset: 2px;
}

/* ─── Mobile tinh chỉnh ───────────────────────── */
@media (max-width: 480px) {
  .t2t-mini,
  .t2t-mini--poem,
  .t2t-mini--quote {
    font-size: 0.97rem;
  }
  .t2t-mini--quote .t2t-mini-inner {
    padding: 0.7rem 0.9rem;
  }
}

/* Giảm motion */
@media (prefers-reduced-motion: reduce) {
  a.t2t-mini-link {
    transition: none;
  }
}

/* ===== t2t · Manifesto (scope riêng) ======================= */

.t2t-mf {
  /* Body đọc: ≈ 2/3 màn 1920 nhưng fluid */
  --hero-radius: var(--t2t-mf-radius, 18px);
  --body-max: var(--t2t-mf-max-width, clamp(720px, 66vw, 1280px));
  --body-pad: var(--t2t-mf-padding, clamp(18px, 3vw, 28px));

  /* Nền mood frame */
  background: var(
    --t2t-mf-bg-gradient,
    linear-gradient(180deg, #070c10 0%, #0b1218 45%, #05080b 100%)
  );

  /* Tách lớp nhẹ khỏi nền Elementor */
  border-radius: var(--hero-radius);
  padding: var(--body-pad);
  max-width: var(--body-max);
  margin-inline: auto;

  box-shadow:
    var(--t2t-mf-shadow-inner, inset 0 0 0 1px rgba(180, 200, 210, 0.06)),
    var(--t2t-mf-shadow-outer, 0 24px 64px rgba(0, 0, 0, 0.55));

  color: var(--t2t-soft);
  font-family: var(--t2t-font-emotion), Georgia, serif;
  font-size: clamp(1.02rem, 1.2vw + 0.7rem, 1.18rem);
  line-height: 1.95;
}

@media (max-width: 768px) {
  .t2t-mf {
    box-shadow:
      var(--t2t-mf-shadow-inner, inset 0 0 0 1px rgba(180, 200, 210, 0.06)),
      0 16px 40px rgba(0, 0, 0, 0.45);
  }
}

/* =========================================================
   GLOBAL · t2t-mf is TYPOGRAPHY — never a card
   - MF chỉ là áo chữ / nhịp thơ / quote / stanza
   - Không được tự mang nền / shadow / border / radius
========================================================= */
.t2t-mf {
  background: transparent;
  box-shadow: none;
  border: 0;
  border-radius: 0;
}

/* ===================== Hero · Unified v2.2 (final) ===================== */
/* Base setup */
.t2t-mf-hero {
  position: relative;
  isolation: isolate;
  width: 100%;
  margin: 0 auto;
  --hero-radius: 18px;
  --hero-mobile-h: 90vh; /* cao gần full màn hình mobile */
  --hero-focal-x: 50%;
  --hero-focal-y: 35%;
}

/* Image */
.t2t-mf-hero picture,
.t2t-mf-hero img {
  display: block;
  width: 100%;
  height: auto;
}
.t2t-mf-hero img {
  border-radius: var(--hero-radius);
  object-fit: cover;
  object-position: center;
}

/* Overlay gradient (optional) */
.t2t-mf-hero.has-overlay::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: var(--hero-radius);
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.18), rgba(0, 0, 0, 0.36));
  z-index: 2;
  pointer-events: none;
}

/* Text overlay (desktop default = left) */
.t2t-mf-hero .t2t-mf-hero-text {
  position: absolute;
  z-index: 3;
  max-width: min(86ch, 92%);
  color: var(--t2t-soft);
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.45);
  text-align: left;
}
.t2t-mf-hero .t2t-mf-subtitle {
  color: var(--t2t-brand-sky);
  font-weight: 600;
  opacity: 0.95;
  display: inline-block;
  margin: 0 0 0.44rem 0;
  letter-spacing: 0.1px;
}
.t2t-mf-hero .t2t-mf-title {
  color: var(--t2t-brand-mint);
  font-weight: 800;
  line-height: 1.1;
  margin: 0.08rem 0 0.18rem;
}
.t2t-mf-hero .t2t-mf-subline {
  opacity: 0.95;
  line-height: 1.35;
  margin: 0.26rem 0 0;
}

/* Position modifiers */
.t2t-mf-hero .t2t-mf-hero-text.is-bottom-left {
  left: clamp(16px, 4vw, 36px);
  bottom: clamp(14px, 3vw, 34px);
}
.t2t-mf-hero .t2t-mf-hero-text.is-center {
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
}
.t2t-mf-hero .t2t-mf-hero-text.is-top-right {
  right: clamp(16px, 4vw, 36px);
  top: clamp(14px, 3vw, 34px);
}

/* Full-bleed (escape container) */
.t2t-mf-hero.is-fullbleed {
  width: 100vw;
  max-width: 100vw;
  margin-left: 50%;
  transform: translateX(-50%);
  border-radius: 0;
}
.t2t-mf-hero.is-fullbleed img {
  border-radius: 0;
}

/* ---------- Desktop / Tablet: type clamp ---------- */
@media (min-width: 601px) {
  .t2t-mf-hero .t2t-mf-title {
    font-size: clamp(1.75rem, 2.4vw, 2.5rem);
    letter-spacing: 0.1px;
  }
  .t2t-mf-hero .t2t-mf-subline {
    font-size: clamp(1.02rem, 1.1vw, 1.25rem);
  }
  .t2t-mf-hero .t2t-mf-hero-text.is-bottom-left {
    left: clamp(12px, 4.5vw, 20px);
    bottom: clamp(12px, 4.5vw, 22px);
  }
}
@media (max-width: 600px) {
  .t2t-mf-hero-text .t2t-mf-subtitle {
    display: block;
    text-align: left;
    margin-left: clamp(12px, 4vw, 24px);
  }
}
/* ---------- Mobile: full-height + centered layout ---------- */
@media (max-width: 600px) {
  .t2t-mf-hero {
    height: var(--hero-mobile-h);
    overflow: hidden;
  }
  .t2t-mf-hero picture,
  .t2t-mf-hero img {
    width: 100%;
    height: 100%;
    border-radius: var(--hero-radius);
    object-fit: cover;
    object-position: var(--hero-focal-x) var(--hero-focal-y);
    transform: translateZ(0);
  }
  /* block full width + center */
  .t2t-mf-hero .t2t-mf-hero-text {
    left: 0;
    right: 0;
    text-align: center;
    padding: 0.55rem clamp(14px, 4vw, 22px);
    backdrop-filter: none;
  }
  .t2t-mf-hero .t2t-mf-title {
    font-size: clamp(1.18rem, 4.6vw, 1.45rem);
    line-height: 1.25;
    font-weight: 750;
    margin: 0.28rem 0 0.18rem;
    text-shadow: 0 1px 8px rgba(0, 0, 0, 0.35);
    text-wrap: balance;
  }
  .t2t-mf-hero .t2t-mf-subline {
    font-size: clamp(0.95rem, 3.6vw, 1.05rem);
    line-height: 1.35;
    opacity: 0.92;
    max-width: 42ch;
    margin-inline: auto;
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.35);
    text-wrap: balance;
  }
}

/* ---------- (optional) Mobile push-down: chỉ còn subtitle trên ảnh ---------- */
@media (max-width: 600px) {
  .t2t-mf-hero.is-pushdown .t2t-mf-title,
  .t2t-mf-hero.is-pushdown .t2t-mf-subline {
    display: none;
  }
  .t2t-mf-hero.is-pushdown + .t2t-hero-follow {
    display: block;
    margin-top: clamp(12px, 3.5vw, 18px);
  }
}
@media (min-width: 601px) {
  .t2t-hero-follow {
    display: none;
  }
}

/* ---------- Title gradient dịu (tuỳ chọn) ---------- */
.t2t-mf-hero .t2t-mf-title.is-gradient {
  /* fallback */
  background: linear-gradient(90deg, var(--t2t-brand-primary), var(--t2t-brand-sky));
  /* modern, mềm hơn */
  background: linear-gradient(
    90deg,
    color-mix(in oklab, var(--t2t-brand-primary) 70%, #a8f0de 30%),
    color-mix(in oklab, var(--t2t-brand-sky) 65%, #bfe9ff 35%)
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.35);
}

/* Motion respect */
@media (prefers-reduced-motion: reduce) {
  .t2t-mf-hero * {
    transition: none !important;
    animation: none !important;
  }
}

/* ============================================
   DISCOVERY HUB HERO (KHÁM PHÁ CÙNG T2TDIGITAL)
   Page: /kham-pha/
   Concept: Đại sảnh 7 cánh cửa (Category Hub)
   Ghi chú:
   - Đang chạy trên legacy-classic.css (pre-core).
   - Khi switch sang t2t-core.css, copy block này
     sang section Hero override trong core.
============================================= */

/* 1. Hero full-bleed, loại bỏ khoảng đen trên / hai bên */

.t2t-mf-hero--discover {
  margin: 0;
  padding: 0;
}

.t2t-mf-hero--discover .t2t-hero-img-wrapper--full,
.t2t-mf-hero--discover .t2t-hero-img-wrapper--full img {
  display: block;
  width: 100%;
  height: min(100vh, 900px); /* huynh có thể hạ 900px nếu muốn */
  max-height: 100vh;
  object-fit: cover;
}

/* 2. Khối text trong hero: canh đáy + chừa nhịp thở */

.t2t-mf-hero--discover .t2t-mf-hero-text {
  max-width: 720px;
  text-align: left; /* hoặc center nếu huynh muốn */
  padding-bottom: clamp(3rem, 7vw, 5.5rem);
}

/* 3. Kicker riêng của Discover: hết nghiêng, nhãn nhỏ gọn */

.discovery-subheading {
  font-style: normal;
  font-weight: 500;
  font-size: clamp(0.78rem, 1.05vw, 0.95rem);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0.9;
}

/* 4. Spacing quanh H1 + tagline */

#discover-hero-title {
  margin-top: clamp(0.25rem, 0.6vw, 0.5rem);
  margin-bottom: clamp(0.55rem, 1.1vw, 0.9rem);
}

.t2t-mf-hero--discover .t2t-mf-hero-text .t2t-heading + .t2t-preline {
  margin-top: clamp(0.45rem, 1.1vw, 0.8rem);
  max-width: 520px;
}

/* 5. Hero (Contained) – giữ nguyên pattern global cho hero không full-bleed */

.t2t-mf-hero:not(.is-fullbleed) {
  width: min(var(--hero-contained-max, 1200px), 92vw);
  max-width: 100%;
  margin-inline: auto;
  transform: none;
  margin-left: auto;
  margin-right: auto;
  align-self: center;
  overflow: hidden;
}

.t2t-mf-hero:not(.is-fullbleed) picture,
.t2t-mf-hero:not(.is-fullbleed) img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--hero-radius);
}

.elementor-widget-container .t2t-mf-hero:not(.is-fullbleed),
.brxe-section .t2t-mf-hero:not(.is-fullbleed),
.bricks-container .t2t-mf-hero:not(.is-fullbleed) {
  align-self: center;
}

.page-id-PAGEID #discover-hero {
  margin-top: 0;
}

/* ----------------- Body ----------------- */
.t2t-mf .t2t-mf-body {
  max-width: var(--body-max);
  margin: 2rem auto 3.6rem;
  padding: 0 var(--body-pad);
}
.t2t-mf .t2t-mf-body p {
  margin: 0.9rem 0;
}
.t2t-mf .beat {
  margin-top: 1.6rem;
}

/* ====== Poetic Line for STT Đêm Khuya (v1.1 - “Breathline”) ===== */

.t2t-timeline {
  font-size: 0.9em;
  color: var(--t2t-text-light);
  opacity: 0.7;
  text-align: right;
  margin-top: 8px;
  font-style: italic;
}

/* ===== Manifesto · Quote (v4 · phối tone Archive, mềm & mờ dần) ===== */
.t2t-mf .t2t-mf-quote {
  position: relative;
  display: inline-block; /* thu theo nội dung, không full width */
  max-width: min(72ch, 100%); /* tránh tràn dòng quá dài */
  margin: 1.25rem 0 1rem;
  padding: 0.9rem 1.1rem;

  /* Typography – giữ chất Manifesto */
  font-family: var(--t2t-font-emotion), Georgia, serif;
  font-style: italic;
  font-weight: 550;
  font-size: clamp(1.08rem, 1rem + 0.6vw, 1.6rem);
  line-height: 1.75;
  letter-spacing: 0.15px;
  color: var(--t2t-soft);

  /* Nền mềm, mờ dần sang phải (giống Archive) */
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0.05) 0%,
    rgba(255, 255, 255, 0.04) 55%,
    rgba(255, 255, 255, 0) 100%
  );

  /* Bo cong “ôm” về bên phải, viền thật nhẹ */
  border-radius: 12px 24px 24px 12px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  overflow: hidden;

  /* Render TV mịn */
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-kerning: normal;
  font-feature-settings: 'liga', 'clig', 'kern';
}

/* ===== t2t · Quote signature (Cite) ====================== */

/* Mặc định: tone sky nhẹ, tinh tế */
.t2t-mf .t2t-mf-quote cite {
  display: inline-block;
  margin-left: 0.4rem;
  color: var(--t2t-brand-sky);
  font-style: normal;
  font-weight: 600;
  letter-spacing: 0.1px;
  opacity: 0.9;
  transition:
    opacity 0.25s ease,
    filter 0.25s ease;
}

.t2t-mf .t2t-mf-quote cite:hover {
  opacity: 1;
  filter: brightness(1.15);
}

/* Dải sáng bên trái – ôm cong đầu/đuôi, gradient thương hiệu */
.t2t-mf .t2t-mf-quote::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 7px;
  border-radius: 8px 0 0 8px;
  background: linear-gradient(180deg, var(--t2t-brand-mint) 0%, var(--t2t-brand-sky) 100%);
  box-shadow: 0 0 8px rgba(0, 255, 213, 0.25);
}

/* Tuỳ chọn: tone vàng ấm */
.t2t-mf .t2t-mf-quote.is-gold::before {
  background: linear-gradient(180deg, #f3d38b 0%, #f4eacb 100%);
  box-shadow: 0 0 8px rgba(244, 234, 203, 0.25);
}

/* Mobile – gọn hơn một nhịp */
@media (max-width: 640px) {
  .t2t-mf .t2t-mf-quote {
    font-size: 1.18rem;
    padding: 0.8rem 0.9rem;
    border-radius: 10px 18px 18px 10px;
  }
  .t2t-mf .t2t-mf-quote::before {
    width: 6px;
  }
}

/* ===============================
   Manifesto · CTA buttons (pill)
   Replace sạch block CTA cũ
=============================== */
.t2t-mf .t2t-mf-cta {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin: 2.2rem 0 3.6rem;
  text-align: center; /* fallback */
}

/* áp trực tiếp lên thẻ <a class="t2t-btn ..."> do shortcode sinh ra */
.t2t-mf .t2t-mf-cta a.t2t-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;

  /* “chiều cao kiểu header” */
  min-height: 44px; /* tap-friendly + gọn */
  padding: 0 18px; /* ngang vừa, không dày theo chiều dọc */
  line-height: 1; /* tránh đội chiều cao */
  font-weight: 800;

  border-radius: 999px; /* pill */
  border: 0;
  text-decoration: none;

  transition:
    filter 0.18s ease,
    transform 0.15s ease;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
}

/* màu nền + màu chữ */
.t2t-mf .t2t-mf-cta a.t2t-btn--mint {
  background: var(--t2t-brand-mint);
  color: var(--t2t-ink);
}
.t2t-mf .t2t-mf-cta a.t2t-btn--sky {
  background: var(--t2t-brand-sky);
  color: #001018;
}

.t2t-mf .t2t-mf-cta a.t2t-btn:hover {
  filter: brightness(0.95);
  transform: translateY(-1px);
}

.t2t-mf .t2t-mf-cta a.t2t-btn:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
  box-shadow: 0 0 0 3px rgba(0, 255, 213, 0.25);
}

/* ----------------- Fine-tune ----------------- */
/* Tagline dưới H1: italic + nhỉnh cỡ nhưng không “quấy” heading */
.t2t-mf .t2t-mf-subline,
.t2t-mf .t2t-mf-sub {
  font-style: italic;
  display: block;
  margin-top: 0.35rem;
  opacity: 0.95;
  font-size: clamp(1rem, 0.9rem + 0.45vw, 1.25rem); /* dịu hơn */
  line-height: 1.55;
}

/* Body text nhỉnh hơn một nấc – đọc “đã” hơn */
.t2t-mf .t2t-mf-body {
  font-size: clamp(1.08rem, 0.95rem + 0.9vw, 1.28rem);
  line-height: 2.02;
}
.t2t-mf .t2t-mf-body p + p {
  margin-top: 1.05rem;
}

/* ----------------- Mobile ----------------- */
@media (max-width: 640px) {
  .t2t-mf {
    font-size: 1.02rem;
    line-height: 1.9;
  }
  .t2t-mf .t2t-mf-hero-text {
    left: 16px;
    right: 16px;
    bottom: 16px;
  }
  .t2t-mf .t2t-mf-subline,
  .t2t-mf .t2t-mf-sub {
    font-size: 1.12rem;
  }
  .t2t-mf .t2t-mf-quote {
    font-size: 1.24rem;
    border-left-width: 5px;
    max-width: 100%;
  }
}

/* ----------------- Stanza · “giữa đêm” (v2) -----------------
 * - Vạch dẫn mắt mềm: trên rõ, dưới tan
 * - Tone ấm (emotion-soft) để hòa Founder/STT
 * - Không dùng border-left cứng nữa (dễ thô / dễ mất)
 * ---------------------------------------------------------- */
.t2t-mf .t2t-mf-stanza {
  position: relative;

  max-width: min(80%, 72ch);
  margin: 2rem auto 2.4rem;

  font-style: italic;

  /* ✅ Responsive font-size (mobile → desktop) */
  /* min: 1.02rem  | fluid: theo vw | max: 1.10rem */
  font-size: clamp(1.02rem, 0.95rem + 0.35vw, 1.1rem);

  line-height: 1.9;
  opacity: 0.96;
  text-align: left;

  padding-left: clamp(12px, 1.9vw, 24px);
  box-sizing: border-box;
}

/* vệt “đèn bàn” – mềm & tan */
.t2t-mf .t2t-mf-stanza::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.35rem;
  bottom: 0.35rem;
  width: 2px;
  border-radius: 2px;

  background: linear-gradient(
    to bottom,
    rgba(234, 227, 207, 0.55),
    rgba(234, 227, 207, 0.18) 55%,
    rgba(234, 227, 207, 0) 100%
  );

  opacity: 0.9;
  filter: blur(0.15px);
}

/* Khi muốn nhấn đoạn này hơn xíu (tuỳ chọn) */
.t2t-mf .t2t-mf-stanza.em::before {
  width: 3px;
  background: linear-gradient(
    to bottom,
    rgba(234, 227, 207, 0.78),
    rgba(234, 227, 207, 0.28) 60%,
    rgba(234, 227, 207, 0) 100%
  );
}

/* ✅ Mobile tinh chỉnh vệt (giữ như cũ), không cần set font-size nữa */
@media (max-width: 640px) {
  .t2t-mf .t2t-mf-stanza {
    max-width: 94%;
    padding-left: 14px;
  }
  .t2t-mf .t2t-mf-stanza::before {
    top: 0.25rem;
    bottom: 0.25rem;
  }
}

/* ===== t2t · Home Sections (Discovery + Decode) ===== */
.t2t-homesec {
  /* container khống chế chiều rộng & padding 2 bên */
  max-width: clamp(960px, 88vw, 1280px);
  margin: 2.8rem auto;
  padding: 0 clamp(16px, 3vw, 24px);
  color: var(--t2t-soft);
}

.t2t-homesec .t2t-sec-head {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: 0.6rem 1rem;
  margin-bottom: 1.2rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  padding-bottom: 0.6rem;
}
.t2t-homesec h2 {
  margin: 0;
  font-weight: 800;
  color: var(--t2t-brand-mint);
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.35);
}
.t2t-sec-sub {
  opacity: 0.9;
  margin: 0 0.6rem 0 0;
}
.t2t-sec-cta,
.t2t-sec-tabs a {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.48rem 0.8rem;
  border-radius: 0.7rem;
  font-weight: 700;
  background: var(--t2t-brand-sky);
  color: #001018;
  text-decoration: none;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
  transition:
    filter 0.18s ease,
    transform 0.15s ease;
}
.t2t-sec-cta:hover,
.t2t-sec-tabs a:hover {
  filter: brightness(0.92);
  transform: translateY(-1px);
}
.t2t-sec-tabs {
  margin-left: auto;
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

/* Ảnh dẫn cảm xúc (hero nhỏ trong section) – canh biên tuyệt đối */
.t2t-sec-hero {
  margin: 12px 0 18px;
  /* move border lên wrapper để giống .t2t-card */
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 14px;
  overflow: hidden; /* bo góc ảnh bên trong */
  box-sizing: border-box; /* viền tính trong chiều rộng */
}
.t2t-sec-hero img {
  display: block;
  width: 100%;
  height: auto;
  /* bỏ border ở img nếu đã thêm trước đó */
  border: none;
  box-sizing: content-box; /* để mặc định cũng được */
}

/* Grid bài (Discovery) — THẲNG BIÊN container */
.t2t-grid {
  list-style: none;
  padding: 0; /* không padding trái/phải ngoài ý muốn */
  margin: 1.2rem 0 0; /* bỏ margin ngang để thẳng với .t2t-sec-hero */
  display: grid;
  gap: clamp(14px, 2.4vw, 22px);
  justify-content: stretch; /* tránh “tụt” 1-2px ở màn to */
}
.t2t-grid-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
@media (max-width: 900px) {
  .t2t-grid-3 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 560px) {
  .t2t-grid-3 {
    grid-template-columns: 1fr;
  }
}

.t2t-card {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 14px;
  overflow: hidden;
  transition:
    transform 0.15s ease,
    box-shadow 0.2s ease;
  box-sizing: border-box; /* THÊM DÒNG NÀY */
}
.t2t-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.18);
}
.t2t-card-link {
  color: inherit;
  text-decoration: none;
  display: block;
  height: 100%;
}

/* Ổn định khung ảnh, hạn chế CLS và crop tinh tế */
.t2t-thumb {
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #111;
  /* cân tiêu điểm nhẹ xuống 45% nếu ảnh có nhiều chi tiết phía dưới */
  object-position: center 45%;
}
.t2t-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.t2t-card-body {
  padding: 0.8rem 0.95rem 1rem;
  color: var(--t2t-soft);
}
.t2t-tag {
  display: inline-block;
  font-size: 0.82rem;
  font-weight: 700;
  color: #001018;
  background: var(--t2t-brand-mint);
  padding: 0.18rem 0.55rem;
  border-radius: 999px;
  margin-bottom: 0.35rem;
}
.t2t-card-title {
  color: var(--t2t-soft);
  font-weight: 800;
  font-size: clamp(1.05rem, 1.2vw, 1.2rem);
  line-height: 1.25;
  margin: 0.1rem 0 0.35rem;
  text-wrap: balance;
}
.t2t-card:hover .t2t-card-title {
  color: var(--t2t-brand-sky);
}
.t2t-card-meta {
  opacity: 0.85;
  margin: 0;
}

/* Decode grid: 2 cột (tin nhanh + deep dive) */
.t2t-decode-grid {
  display: grid;
  grid-template-columns: 1.1fr 1.9fr;
  gap: clamp(16px, 3vw, 26px);
  margin-top: 1.1rem;
}
@media (max-width: 900px) {
  .t2t-decode-grid {
    grid-template-columns: 1fr;
  }
}

.t2t-fastlane {
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 14px;
  padding: 0.9rem 1rem;
}
.t2t-bullets {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 0.6rem;
}
.t2t-bullets a {
  color: var(--t2t-soft);
  text-decoration: none;
}
.t2t-bullets a:hover {
  text-decoration: underline;
  text-decoration-thickness: 2px;
}

/* ===== Home · Giải mã: Fastlane (tin nhanh có thumbnail) ===== */
/* (Đặt ngay sau phần .t2t-fastlane, .t2t-bullets hiện có trong legacy) */

.t2t-fastlane .t2t-newslist {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: clamp(10px, 1.8vw, 14px);
}

.t2t-fastlane .t2t-newsitem {
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.03);
  transition:
    transform 0.15s ease,
    box-shadow 0.2s ease;
}
.t2t-fastlane .t2t-newsitem:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.18);
}

.t2t-fastlane .t2t-newslink {
  display: grid;
  grid-template-columns: 96px 1fr;
  gap: 12px;
  padding: 10px;
  text-decoration: none;
  color: inherit;
  align-items: center;
}

.t2t-fastlane .t2t-news-thumb {
  width: 100%;
  aspect-ratio: 4/3;
  overflow: hidden;
  border-radius: 10px;
  background: #111;
}
.t2t-fastlane .t2t-news-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.t2t-fastlane .t2t-news-title {
  margin: 0 0 4px;
  font-weight: 800;
  font-size: clamp(1rem, 1.05vw, 1.12rem);
  color: var(--t2t-soft);
  text-wrap: balance;
}
.t2t-fastlane .t2t-newsitem:hover .t2t-news-title {
  color: var(--t2t-brand-sky);
}

.t2t-fastlane .t2t-news-time {
  display: inline-block;
  font-size: 0.9rem;
  opacity: 0.82;
  margin: 0 0 4px;
}

.t2t-fastlane .t2t-news-dek {
  margin: 0;
  opacity: 0.9;
  font-size: 0.95rem;
  line-height: 1.35;
}

/* Mobile tinh gọn */
@media (max-width: 600px) {
  .t2t-fastlane .t2t-newslink {
    grid-template-columns: 84px 1fr;
    padding: 9px;
    gap: 10px;
  }
  .t2t-fastlane .t2t-news-title {
    font-size: clamp(0.98rem, 3.8vw, 1.05rem);
  }
  .t2t-fastlane .t2t-news-dek {
    font-size: 0.92rem;
  }
}

.t2t-featured {
  display: grid;
  gap: clamp(14px, 2vw, 18px);
}
.t2t-feature {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.02));
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 14px;
  padding: 1rem;
}
.t2t-feature a {
  color: inherit;
  text-decoration: none;
  display: grid; /* thay vì block */
  grid-template-rows: auto auto 1fr; /* tiêu đề, mô tả cân đều đáy */
}
.t2t-feature-title {
  margin: 0.15rem 0 0.3rem;
  font-weight: 800;
  color: var(--t2t-brand-mint);
}
.t2t-feature-desc {
  margin: 0;
  opacity: 0.92;
}

.t2t-sec-more {
  margin-top: 1rem;
}

/* Focus + motion respect (giữ từ khối cũ) */
.t2t-sec-cta:focus-visible,
.t2t-sec-tabs a:focus-visible {
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--t2t-brand-sky), #fff 40%);
  outline: none;
}
@media (prefers-reduced-motion: reduce) {
  .t2t-card,
  .t2t-sec-cta,
  .t2t-sec-tabs a {
    transition: none;
  }
}

/* Mobile: khoảng cách gọn hơn */
@media (max-width: 600px) {
  .t2t-grid {
    gap: 14px;
  }
  .t2t-card-body {
    padding: 0.75rem 0.85rem 1rem;
  }
}

@media (max-width: 600px) {
  #home-discovery .t2t-sec-tabs a {
    text-align: center;
    justify-content: center;
    align-items: center;
    display: flex;
  }

  #home-discovery .t2t-sec-cta {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;

    padding-inline: 18px;
    width: 100%;
  }
}

/* ================================
   HOME – Khám phá · Mobile layout
   Cân lại nhịp các pill + CTA
   ================================ */

@media (max-width: 600px) {
  /* Header section xếp theo cột, có khoảng cách nhẹ */
  #home-discovery .t2t-sec-head {
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: flex-start;
  }

  /* Nhóm tabs: 2 nút / hàng, tự wrap */
  #home-discovery .t2t-sec-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    width: 100%;
  }

  #home-discovery .t2t-sec-tabs a {
    flex: 1 1 calc(50% - 8px); /* 2 cột đều nhau */
    text-align: center;
  }

  /* CTA Xem tất cả: 1 hàng riêng, full width, giữa đẹp */
  #home-discovery .t2t-sec-cta {
    align-self: stretch;
    text-align: center;
    margin-top: 2px; /* nhịp thở nhẹ với hàng tabs trên */
  }
}

/* ===== Home · AI Lead-in layout (uses tokens) ===== */
.t2t-ai-leadin {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: clamp(16px, 3vw, 28px);
  align-items: center;
  background: linear-gradient(
    135deg,
    color-mix(in oklab, var(--t2t-surface), #08131a 30%),
    transparent
  );
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 14px;
  padding: clamp(14px, 3.2vw, 26px);
}

.t2t-ai-copy p {
  margin: 0.4rem 0;
}

.t2t-ai-q {
  color: var(--t2t-brand-sky);
}

.t2t-ai-art picture,
.t2t-ai-art img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 10px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18);
}

@media (max-width: 900px) {
  .t2t-ai-leadin {
    grid-template-columns: 1fr;
  }
  .t2t-ai-art {
    order: -1; /* ảnh lên trước text nếu muốn */
  }
}

/* ===== Hero · Full-height mobile crop + pushdown text ===== */
.t2t-mf-hero {
  width: 100vw;
  max-width: 100vw;
  margin-left: 50%;
  transform: translateX(-50%);
}
.t2t-mf-hero {
  position: relative;
  width: 100%;
  margin: 0 auto;
  --hero-radius: 18px;
  --hero-mobile-h: 92vh; /* cao vừa màn hình, có thể 88–100vh */
  --hero-focal-x: 50%; /* tiêu điểm khi crop (object-position) */
  --hero-focal-y: 35%; /* 0% top … 100% bottom */
}
.t2t-mf-hero picture,
.t2t-mf-hero img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--hero-radius);
}

/* Overlay nền nhẹ (tuỳ chọn) */
.t2t-mf-hero.has-overlay::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: var(--hero-radius);
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.18), rgba(0, 0, 0, 0.36));
  pointer-events: none;
}

/* Desktop/tablet: ảnh tự nhiên */
@media (min-width: 601px) {
  .t2t-mf-hero img {
    width: 100%;
    height: auto;
    object-fit: cover;
    object-position: center;
  }
}

/* Mobile: full-height + crop cảm xúc */
@media (max-width: 600px) {
  .t2t-mf-hero {
    height: var(--hero-mobile-h);
    overflow: hidden;
  }
  .t2t-mf-hero picture,
  .t2t-mf-hero img {
    width: 100%;
    height: 100%;
    border-radius: var(--hero-radius);
  }
  .t2t-mf-hero img {
    object-fit: cover;
    object-position: var(--hero-focal-x) var(--hero-focal-y);
    transform: translateZ(0); /* tránh blur khi scale viewport */
  }
}

/* Overlay text: mặc định ở góc dưới trái */
.t2t-mf-hero .t2t-mf-hero-text {
  position: absolute;
  left: clamp(14px, 4vw, 36px);
  right: clamp(14px, 4vw, 36px);
  bottom: clamp(12px, 3vw, 34px);
  max-width: min(86ch, 92%);
  padding: 0.35rem 0.6rem 0.55rem;
  border-radius: 0.6rem;
  backdrop-filter: blur(2px);
}
.t2t-mf-hero .t2t-mf-subtitle {
  color: var(--t2t-brand-sky);
  font-weight: 600;
  opacity: 0.95;
}
.t2t-mf-hero .t2t-mf-title {
  color: var(--t2t-brand-mint);
  font-weight: 800;
  margin: 0.25rem 0 0.15rem;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.35);
}
.t2t-mf-hero .t2t-mf-subline {
  opacity: 0.95;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.45);
}

/* Khối “đệm” nhận H1 + subline dưới ảnh (tận dụng heading style hiện có) */
.t2t-hero-follow .t2t-heading {
  margin: 0.4rem 0 0.25rem;
}
.t2t-hero-follow .t2t-intro {
  margin: 0;
  opacity: 0.95;
}
/* ================== HOME · HERO CONTENT (refine, no new classes) ================== */
/* Phạm vi cục bộ theo ID để không ảnh hưởng trang khác */
#home-lead {
  --lead-max: 72ch; /* độ rộng đọc tối ưu */
  --lead-narrow: 64ch; /* dùng cho intro/quote */
  --lead-gap: clamp(16px, 2.2vw, 28px);
  --lead-gap-lg: clamp(22px, 3vw, 36px);
  --lead-soft: color-mix(in oklab, var(--t2t-soft) 92%, #000 8%);
}

/* canh giữa khối, giới hạn chiều rộng đọc */
#home-lead .t2t-block {
  max-width: var(--lead-max);
  margin-inline: auto;
}

/* Heading: nhỏ lại 1 nhịp + underline “nhẹ” như manifesto */
#home-lead .t2t-heading {
  max-width: var(--lead-max);
  margin: clamp(10px, 2vw, 16px) auto var(--lead-gap);
  line-height: 1.15;
  letter-spacing: 0.2px;
}
#home-lead .t2t-heading::after {
  content: '';
  display: block;
  width: min(220px, 42%);
  height: 2px;
  margin-top: 0.55rem;
  background: linear-gradient(90deg, var(--t2t-brand-sky), transparent);
  opacity: 0.75;
  border-radius: 2px;
}

/* Intro & đoạn thường: nới line-height + spacing nhịp nhàng */
#home-lead .t2t-intro-text,
#home-lead p {
  max-width: var(--lead-narrow);
  margin: 0 auto var(--lead-gap);
  line-height: 1.7;
  color: var(--lead-soft);
}

/* Subheading (dòng nhấn xanh): tạo khoảng đệm trên/dưới để “thở” */
#home-lead .t2t-subheading {
  margin: var(--lead-gap-lg) auto var(--lead-gap);
  color: var(--t2t-text-light);
  line-height: 1.5;
}

/* Hộp highlight ký ức: glass + viền mỏng, đổ bóng dịu */
#home-lead .t2t-highlight-box {
  max-width: var(--lead-narrow);
  margin: var(--lead-gap) auto;
  padding: clamp(12px, 1.6vw, 18px);
  border-radius: 12px;
  background: color-mix(in oklab, #0a0f12 55%, transparent 45%);
  backdrop-filter: blur(4px);
  border: 1px solid color-mix(in oklab, var(--t2t-brand-sky) 28%, #ffffff 2%);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18);
}
#home-lead .t2t-highlight-box em {
  opacity: 0.9;
  display: block;
}

/* Đoạn kết triết lý: “Tri thức chạm cảm xúc …” nổi bật nhưng không chói */
#home-lead .t2t-subheading strong {
  background: linear-gradient(
    90deg,
    color-mix(in oklab, var(--t2t-brand-primary) 70%, #a8f0de 30%),
    color-mix(in oklab, var(--t2t-brand-sky) 65%, #bfe9ff 35%)
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.32);
}

/* CTA nhóm: tách nền, giãn nút như manifesto/STT */
#home-lead .t2t-cta {
  display: flex;
  gap: clamp(10px, 2vw, 14px);
  justify-content: flex-start;
  margin: var(--lead-gap-lg) auto 0;
  max-width: var(--lead-max);
}
#home-lead .t2t-btn {
  padding: 0.7rem 1rem;
  border-radius: 999px;
  backdrop-filter: blur(3px);
  background: color-mix(in oklab, var(--t2t-brand-sky) 18%, #0b1316 82%);
  border: 1px solid color-mix(in oklab, var(--t2t-brand-sky) 35%, transparent);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
}

/* Responsive – thu hẹp thêm cho mobile, tăng khoảng thở */
@media (max-width: 600px) {
  #home-lead {
    --lead-max: 88vw;
    --lead-narrow: 86vw;
  }
  #home-lead .t2t-heading {
    text-align: center;
  }
  #home-lead .t2t-cta {
    justify-content: center;
    flex-wrap: wrap;
  }
}

/* ===========================
   HOME HERO – GREETING LINE
   (phiên bản có vạch đứng mờ dần)
   =========================== */

#home-lead .t2t-lead-greeting {
  font-size: clamp(1.05rem, 2.4vw, 1.45rem);
  font-weight: 400;
  line-height: 1.55;
  letter-spacing: 0.015em;
  margin: 1.6rem 0 1.4rem;

  padding-left: 1rem;
  border-left: 3px solid transparent;

  border-image: linear-gradient(
      to bottom,
      rgba(255, 255, 255, 0.75) 0%,
      rgba(255, 255, 255, 0.35) 55%,
      rgba(255, 255, 255, 0) 100%
    )
    1;
}

#home-lead .t2t-lead-greeting {
  color: var(--t2t-text-light);
}

#home-lead .t2t-lead-greeting strong {
  font-weight: 550;
}

/* ===== MF components → global aliases (safe) ===== */
/* Quote khối (khung mờ, rhythm chữ) */
.t2t-mf .t2t-mf-quote,
.t2t-mf-quote {
  position: relative;
  margin: 1.1rem 0 1.25rem;
  padding: 0.9rem 1.1rem;
  border-radius: 12px;
  background: color-mix(in oklab, #0b0f12 76%, transparent 0%);
  box-shadow:
    0 6px 24px rgba(0, 0, 0, 0.28) inset,
    0 1px 0 rgba(255, 255, 255, 0.06);
  color: var(--t2t-soft);
  line-height: 1.55;
}

/* Nhấn “cảm xúc” (hai gạch dài, bóng nhẹ) */
.t2t-mf .t2t-quote--emotion,
.t2t-quote--emotion {
  border-left: 3px solid color-mix(in oklab, var(--t2t-brand-sky) 72%, #66e 28%);
  padding-left: 1rem;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.04), transparent 40%);
}

/* =========================================
   t2t-signature — hover glow (clean + slow beat)
   - Base: trầm, nhẹ
   - Hover/Focus: sáng lên chậm 1 nhịp (delay)
========================================= */

/* Optional: gradient brand khi muốn “phát sáng” hơn */
.t2t-mf .t2t-signature.is-brand {
  background: linear-gradient(to right, var(--t2t-brand-mint), var(--t2t-brand-sky));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-weight: 700;
  letter-spacing: 0.15px;
}

/* Base (dùng được cả trong/ngoài .t2t-mf) */
.t2t-signature,
.t2t-mf .t2t-signature {
  display: inline-block;
  margin-top: 0.6rem;
  font-style: italic;
  font-weight: 600;
  letter-spacing: 0.2px;

  color: color-mix(in oklab, var(--t2t-brand-sky) 78%, #bfe9ff 22%);
  opacity: 0.85;

  /* “chậm hơn một nhịp” */
  transition-property: opacity, transform, filter;
  transition-duration: 0.32s;
  transition-timing-function: ease;
  transition-delay: 120ms; /* ✅ 80–120ms: chọn 110ms cho đúng vibe STT */
}

/* Hover/Focus */
.t2t-signature:hover,
.t2t-signature:focus,
.t2t-signature:focus-visible {
  opacity: 1;
  transform: translateY(-1px);
  filter: drop-shadow(0 0 10px rgba(0, 183, 255, 0.55));
}

/* Nâng cấp ánh sáng pha màu cho browser mới
    WP CSS parser may warn on color-mix / oklab
    Safe to ignore – progressive enhancement for modern browsers */
@supports (color: color-mix(in oklab, white, black)) {
  .t2t-signature:is(:hover, :focus, :focus-visible) {
    filter: drop-shadow(0 0 10px color-mix(in oklab, var(--t2t-brand-sky) 50%, #fff 50%));
  }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .t2t-signature,
  .t2t-mf .t2t-signature {
    transition-duration: 0.01ms;
    transition-delay: 0ms;
  }
}

/* =========================================
 * t2t · Quote Panel (emotion refined) — v1.1
 * Chỉ nâng cảm xúc, không đổi cấu trúc
 * ========================================= */

.t2t-quote-panel {
  display: inline-block;
  padding: 0.75rem 1rem;
  border-radius: 14px;

  background: color-mix(in oklab, #000 46%, transparent 0%);
  backdrop-filter: blur(3px);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.35);

  color: var(--t2t-emotion-soft, #eae3cf); /* ⬅️ điểm mấu chốt */
  font-style: italic;
  line-height: 1.65;
}

/* Nếu quote rất ngắn (1–2 dòng), cho thở hơn */
.t2t-quote-panel.short {
  padding: 0.65rem 0.95rem;
  font-size: 0.98em;
}

/* Khi t2t-subheading nằm trong khối is-centered → cho phép canh giữa */
.t2t-block.is-centered .t2t-subheading {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
  /* đảm bảo vùng bọc đủ rộng để center đẹp */
  width: 100%;
  max-width: 52ch; /* tùy, giữ nhịp đọc gọn */
}

/* ==== Divider – v1.1 (stronger) ==== */

/* full-width fade line */
.t2t-hr--fade {
  display: block;
  width: 100%;
  height: 2.5px;
  border: 0;
  margin: 1.25rem 0;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.24), rgba(255, 255, 255, 0));
  border-radius: 999px;
  opacity: 0.92;
  box-shadow: 0 0 10px rgba(255, 255, 255, 0.06);
}

/* short poetic line with “glow” ở đầu trái */
.t2t-hr--poetic {
  display: block;
  width: 64px;
  height: 2px;
  border: 0;
  margin: 1.1rem 0 1.25rem;
  background:
    radial-gradient(
      28px 14px at left,
      color-mix(in oklab, var(--t2t-brand-sky) 72%, transparent 28%),
      transparent
    ),
    linear-gradient(90deg, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0));
  border-radius: 999px;
  opacity: 0.92;
  box-shadow: 0 0 14px rgba(255, 255, 213, 0.08);
}

@media (max-width: 640px) {
  .t2t-hr--fade {
    height: 2px;
    margin: 1rem 0;
  }
  .t2t-hr--poetic {
    width: 44px;
    height: 1.6px;
    margin: 1rem 0 1.15rem;
  }
}

/* Optional – khi đặt ngay dưới hero/ảnh tối, tăng hiệu ứng một chút */
.t2t-hr--under-hero {
  margin-top: 0.4rem; /* sát hero hơn */
  filter: brightness(1.08); /* nhấn nhẹ */
}

/* =========================================================
   t2t · HR (Emotion Divider)
   - Vai trò: "nhịp thở" giữa Hero → Body, không phải ranh giới section
   - Default: fade 2 đầu (neutral)
   - Modifier: .t2t-hr--brand (tint brand rất nhẹ)
========================================================= */

/* Base: 2-ends fade, neutral, mềm */
.t2t-hr--fade-both {
  display: block;
  width: 100%;
  border: 0;
  margin: clamp(1.1rem, 2.2vw, 1.55rem) 0;

  /* “sợi ánh sáng” mảnh + responsive */
  height: clamp(1px, 0.18vw, 2px);

  /* fade 2 đầu — giữ tâm nhẹ, rìa tan */
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.1) 12%,
    rgba(255, 255, 255, 0.22) 50%,
    rgba(255, 255, 255, 0.1) 88%,
    rgba(255, 255, 255, 0) 100%
  );

  border-radius: 999px;
  opacity: 0.72;

  /* chỉ “hơi glow”, không thành line gắt */
  box-shadow:
    0 0 8px rgba(255, 255, 255, 0.035),
    0 0 20px rgba(255, 255, 255, 0.02);
}

/* ---------------------------------------------------------
   Brand tint (optional)
   Dùng kèm với .t2t-hr--fade-both:
   <hr class="t2t-hr--fade-both t2t-hr--brand" />
--------------------------------------------------------- */

/* Fallback trước (cho trình duyệt không hỗ trợ color-mix) */
.t2t-hr--brand {
  background: linear-gradient(
    90deg,
    rgba(0, 255, 213, 0) 0%,
    rgba(0, 183, 255, 0.1) 14%,
    rgba(0, 255, 213, 0.18) 50%,
    rgba(0, 183, 255, 0.1) 86%,
    rgba(0, 255, 213, 0) 100%
  );
  opacity: 0.68;
  box-shadow:
    0 0 10px rgba(0, 247, 255, 0.06),
    0 0 22px rgba(0, 183, 255, 0.035);
}

/* Nếu có color-mix thì tinh tế hơn (trộn brand + trắng) */
@supports (color: color-mix(in oklab, #000, #fff)) {
  .t2t-hr--brand {
    background: linear-gradient(
      90deg,
      rgba(0, 255, 213, 0) 0%,
      color-mix(in oklab, var(--t2t-brand-secondary, #00b7ff) 45%, #fff 55%) 14%,
      color-mix(in oklab, var(--t2t-brand-primary, #00ffd5) 55%, #fff 45%) 50%,
      color-mix(in oklab, var(--t2t-brand-secondary, #00b7ff) 45%, #fff 55%) 86%,
      rgba(0, 255, 213, 0) 100%
    );
  }
}

/* Mobile: mảnh hơn + khoảng thở nhẹ hơn */
@media (max-width: 640px) {
  .t2t-hr--fade-both {
    margin: 1rem 0;
    opacity: 0.68;
  }
}

/* Giới thiệu: đảm bảo section làm đúng vai "container/gutter" */
.t2t-about .t2t-section {
  max-width: var(--t2t-maxwidth-blog);
  width: 100%;
  margin: 0 auto;
  padding: 0 var(--t2t-padding-blog-tablet);
  box-sizing: border-box;
}
@media (max-width: 767px) {
  .t2t-about .t2t-section {
    padding: var(--t2t-padding-blog-mobile);
  }
}

/* Giới thiệu: bên trong chỉ cần nhịp dọc, không tự thêm gutter nữa */
.t2t-about .t2t-block {
  background: transparent;
  border-radius: 0;
  padding: 0;
  margin: 1.25rem 0;
}

/* Nếu có quote cảm xúc */
.t2t-about .t2t-quote.t2t-quote--emotion {
  margin-left: 0;
  margin-right: 0;
}

/* Divider dùng chung toàn site (đã chuẩn hóa) */
.t2t-hr--fade {
  display: block;
  width: 100%;
  height: 2.5px;
  border: 0;
  margin: 1.25rem 0;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.24), rgba(255, 255, 255, 0));
  border-radius: 999px;
  opacity: 0.92;
  box-shadow: 0 0 10px rgba(255, 255, 255, 0.06);
}
.t2t-hr--poetic {
  display: block;
  width: 56px;
  height: 2px;
  border: 0;
  margin: 1.1rem 0 1.25rem;
  background:
    radial-gradient(
      24px 12px at left,
      color-mix(in oklab, var(--t2t-brand-sky) 65%, transparent 35%),
      transparent
    ),
    linear-gradient(90deg, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0));
  border-radius: 999px;
  opacity: 0.9;
}
@media (max-width: 640px) {
  .t2t-hr--poetic {
    width: 40px;
    height: 1.5px;
    margin: 1rem 0 1.2rem;
  }
}

/* ===============================
   CATEGORY INTRO – WRAPPER
   =============================== */

.t2t-archive-intro {
  max-width: 960px;
  margin: 28px auto 0;
  padding: 22px 28px 26px;
  border-radius: 22px;
  background:
    radial-gradient(circle at top left, rgba(255, 255, 255, 0.03), transparent 55%),
    rgba(0, 0, 0, 0.6);
  box-shadow:
    0 18px 40px rgba(0, 0, 0, 0.65),
    0 0 0 1px rgba(255, 255, 255, 0.02);
}

/* Đoạn intro – mềm, cảm xúc, canh trái trong panel */
.t2t-archive-intro .t2t-intro-text {
  margin: 0 0 16px;
  font-family: var(--t2t-font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: 1.02rem;
  line-height: 1.75;
  color: var(--t2t-text-light);
  text-align: left;
}

/* ===============================
   CATEGORY INTRO – SUGGESTIONS PANEL
   =============================== */

.t2t-archive-intro .t2t-quote-panel.t2t-suggestions {
  margin: 6px 0 0;
  padding: 10px 18px 12px;
  border-radius: 18px;
  background: radial-gradient(circle at top, rgba(0, 255, 213, 0.1), rgba(0, 0, 0, 0.9));
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.65);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;

  font-family: var(--t2t-font-serif);
  font-style: italic;
  line-height: 1.65;
  color: var(--t2t-text-light);
}

/* Caption – luôn đứng riêng 1 hàng */
.t2t-archive-intro .t2t-panel-caption {
  display: block;
  font-weight: 500;
  margin-bottom: 2px;
}

/* Hàng link – nằm cùng 1 dòng trên desktop, tự wrap khi hẹp */
.t2t-archive-intro .t2t-panel-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px 14px;
}

/* Link – giữ phong cách brand nhưng vẫn mềm */
.t2t-archive-intro .t2t-panel-links a {
  position: relative;
  white-space: nowrap;
  text-decoration: none;
  font-family: var(--t2t-font-serif);
  font-style: italic;
  font-weight: 500;
  text-decoration-thickness: 0.06em;
}

/* Divider giữa các link (chấm nhỏ) */
.t2t-archive-intro .t2t-panel-links a + a::before {
  content: '·';
  margin-right: 6px;
  opacity: 0.7;
}

/* ===============================
   RESPONSIVE
   =============================== */

@media (max-width: 1024px) {
  .t2t-archive-intro {
    max-width: 880px;
    padding: 20px 20px 22px;
    margin-top: 22px;
  }
}

@media (max-width: 768px) {
  .t2t-archive-intro {
    max-width: 100%;
    margin: 18px auto 0;
    padding: 16px 14px 18px;
    border-radius: 16px;
  }

  .t2t-archive-intro .t2t-intro-text {
    font-size: 0.95rem;
    line-height: 1.7;
  }

  .t2t-archive-intro .t2t-quote-panel.t2t-suggestions {
    align-items: flex-start;
    padding: 10px 12px 12px;
  }

  .t2t-archive-intro .t2t-panel-links {
    justify-content: flex-start;
  }
}

/* Fine-tune panel links on mobile */
@media (max-width: 768px) {
  .t2t-archive-intro .t2t-quote-panel {
    padding-left: 0;
  }

  .t2t-archive-intro .t2t-panel-links {
    justify-content: center;
  }

  .t2t-archive-intro .t2t-panel-links a {
    display: inline-block;
    margin-left: 0;
    text-indent: 0;
  }
}

/* Giữ xuống dòng trong source, vẫn cho tự wrap theo màn hình */
.t2t-preline {
  white-space: pre-line;
}

/* =========================================================
   t2t · SUBHEADING (GLOBAL) — works for WP/Gutenberg/Elementor
   Replace old subheading patches with this block
   ========================================================= */

/* 1) Base spec (all contexts) */
.t2t-subheading {
  font-size: clamp(0.88rem, 1.15vw, 1.02rem);
  line-height: 1.35;
  font-weight: 500;
  font-style: normal;

  text-transform: uppercase;
  letter-spacing: 0.12em;

  color: var(--t2t-color-brand-secondary, #00b7ff);
  opacity: 0.92;

  margin: 0 0 0.75rem;
  padding: 0;
}

/* 2) Emoji/icon inside subheading: do not stretch */
.t2t-subheading .emoji,
.t2t-subheading img.emoji {
  font-size: 1em;
  vertical-align: middle;
  margin-right: 0.45em;
}

/* 3) Host wrappers: Gutenberg / WP content / Kadence / Elementor widgets */
.entry-content .t2t-subheading,
.wp-block-post-content .t2t-subheading,
.wp-site-blocks .t2t-subheading,
.kb-content .t2t-subheading,
.elementor-widget-text-editor .elementor-widget-container .t2t-subheading,
.elementor-widget-html .elementor-widget-container .t2t-subheading,
.elementor-widget-shortcode .elementor-widget-container .t2t-subheading {
  font-size: clamp(0.88rem, 1.15vw, 1.02rem);
  line-height: 1.35;
  font-weight: 500;
  font-style: normal;

  text-transform: uppercase;
  letter-spacing: 0.12em;

  color: var(--t2t-color-brand-secondary, #00b7ff);
  opacity: 0.92;

  margin: 0 0 0.75rem;
  padding: 0;
}

/* 4) If subheading is a <p> and theme styles p italic/large: normalize */
.entry-content p.t2t-subheading,
.wp-block-post-content p.t2t-subheading,
.kb-content p.t2t-subheading {
  font-style: normal;
}

/* =========================================================
   t2t · INTRO TEXT (GLOBAL LEAD)
   Áp dụng cho: WP / Gutenberg / Elementor / HTML / Shortcode
   Design language thống nhất toàn site
   ========================================================= */

.t2t-intro-text {
  font-size: clamp(0.95rem, 1.35vw, 1.18rem);
  line-height: 1.65;

  font-weight: 400;
  font-style: normal;

  text-transform: none;
  letter-spacing: 0.01em;

  color: var(--t2t-emotion-soft, #eae3cf);
  opacity: 0.95;

  max-width: 72ch;
  margin: 0 0 1.25rem;
  padding: 0;
}

/* 2) Các host phổ biến của WordPress */
.entry-content .t2t-intro-text,
.wp-block-post-content .t2t-intro-text,
.wp-site-blocks .t2t-intro-text,
.kb-content .t2t-intro-text,

/* Elementor: Text / HTML / Shortcode widget */
.elementor-widget-text-editor .elementor-widget-container .t2t-intro-text,
.elementor-widget-html .elementor-widget-container .t2t-intro-text,
.elementor-widget-shortcode .elementor-widget-container .t2t-intro-text {
  font-size: clamp(1.05rem, 1.45vw, 1.25rem);
  line-height: 1.6;

  font-weight: 400;
  font-style: normal;

  text-transform: none;
  letter-spacing: 0.01em;

  color: var(--t2t-emotion-soft, #eae3cf);
  opacity: 0.95;

  max-width: 72ch;
  margin: 0 0 1.25rem;
  padding: 0;
}

/* 3) Nếu theme có rule mạnh cho <p> (italic / size lớn) */
.entry-content p.t2t-intro-text,
.wp-block-post-content p.t2t-intro-text,
.kb-content p.t2t-intro-text {
  font-style: normal;
}

/* Nhóm text mềm – subtitle / intro / meta */
.t2t-sec-sub,
.t2t-meta-text {
  margin: 0.25rem 0 0;
  font-weight: 400;
  font-size: var(--t2t-font-meta);
  line-height: var(--t2t-lineheight-base, 1.7);
  letter-spacing: 0.01em;
  color: var(--t2t-emotion-soft, #eae3cf);
  opacity: 0.9;
}

/* =========================================================
   t2t · DISCOVERY HUB PILLS (FINAL v1.0)
   7 nút điều hướng Category ngay sau Hero (Đại Sảnh)
   - Pill style (NOT CTA)
   - Glow nhẹ, lan màu kiểu ToTop/ToBottom
   - Auto Active theo body class WP category-*
   ========================================================= */

/* Container (khuyến nghị markup dùng <div class="t2t-pill-nav"> ... ) */
.t2t-pill-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  margin: 0.9rem 0 1.05rem;
  padding: 0;
}

/* Nếu huynh dùng <ul class="t2t-pill-nav"><li>...</li></ul> thì rule này ăn */
.t2t-pill-nav > li {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Link do [t2t_link] sinh ra: class="t2t-pill ..." */
.t2t-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.42rem;

  padding: 0.38rem 0.78rem;
  border-radius: 999px;

  font-size: clamp(0.92rem, 1.1vw, 1rem);
  font-weight: 500;
  line-height: 1;

  text-decoration: none;

  /* base tone */
  color: var(--t2t-color-brand-secondary, #00b7ff);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);

  /* “lan màu” mượt */
  transition:
    transform 160ms ease,
    box-shadow 220ms ease,
    border-color 220ms ease,
    background 220ms ease,
    color 220ms ease;
  will-change: transform, box-shadow;
}

/* Hover/Focus: glow nhẹ */
.t2t-pill:hover,
.t2t-pill:focus-visible {
  color: var(--t2t-color-brand-primary, #00ffd5);
  background: rgba(0, 255, 213, 0.08);
  border-color: rgba(0, 255, 213, 0.3);

  box-shadow:
    0 0 0 1px rgba(0, 255, 213, 0.12),
    0 0 22px rgba(0, 255, 213, 0.22);

  transform: translateY(-1px);
  outline: none;
}

/* Active state (nếu huynh muốn set tay bằng class/aria) */
.t2t-pill.is-active,
.t2t-pill[aria-current='page'] {
  color: var(--t2t-color-brand-primary, #00ffd5);
  background: rgba(0, 255, 213, 0.1);
  border-color: rgba(0, 255, 213, 0.38);

  box-shadow:
    0 0 0 1px rgba(0, 255, 213, 0.16),
    0 0 26px rgba(0, 255, 213, 0.26);
}

/* Emoji/icon đầu dòng */
.t2t-pill .emoji,
.t2t-pill img.emoji {
  font-size: 1em;
  vertical-align: middle;
  margin: 0;
}

/* Mobile: pill vẫn gọn */
@media (max-width: 767px) {
  .t2t-pill-nav {
    gap: 0.5rem;
    margin: 0.75rem 0 0.95rem;
  }
  .t2t-pill {
    padding: 0.36rem 0.72rem;
  }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .t2t-pill {
    transition: none;
    transform: none;
  }
}

/* =========================================================
   AUTO ACTIVE — theo WP body class category-*
   Yêu cầu: mỗi nút có class định danh theo category
   Ví dụ:
   [t2t_link key="cat_hanh_trinh" text="Hành Trình" class="t2t-pill t2t-pill--hanh-trinh"]
   ========================================================= */

.category-hanh-trinh .t2t-pill--hanh-trinh,
.category-giai-ma .t2t-pill--giai-ma,
.category-tin-nhanh .t2t-pill--tin-nhanh,
.category-hieu-sau .t2t-pill--hieu-sau,
.category-cong-cu-va-meo .t2t-pill--cong-cu,
.category-giai-phap .t2t-pill--giai-phap,
.category-cong-dong .t2t-pill--cong-dong {
  color: #0b1216;
  background: linear-gradient(90deg, rgba(0, 255, 213, 0.92), rgba(0, 183, 255, 0.85));
  border-color: rgba(0, 255, 213, 0.25);
  box-shadow:
    0 10px 26px rgba(0, 183, 255, 0.2),
    0 0 0 1px rgba(0, 255, 213, 0.18);
}

/* =========================================================
   FALLBACK (chỉ dùng khi shortcode chưa truyền class)
   Nếu mọi nút đã có class="t2t-pill ..." thì KHÔNG cần.
   Bật fallback bằng cách UNCOMMENT khối dưới.
   ========================================================= */
/*
.t2t-pill-nav a {
  display: inline-flex;
  align-items: center;
  gap: 0.42rem;

  padding: 0.38rem 0.78rem;
  border-radius: 999px;

  font-size: clamp(0.92rem, 1.1vw, 1rem);
  font-weight: 500;
  line-height: 1;

  text-decoration: none;

  color: var(--t2t-color-brand-secondary, #00b7ff);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.10);

  transition:
    transform 160ms ease,
    box-shadow 220ms ease,
    border-color 220ms ease,
    background 220ms ease,
    color 220ms ease;
  will-change: transform, box-shadow;
}
.t2t-pill-nav a:hover,
.t2t-pill-nav a:focus-visible {
  color: var(--t2t-color-brand-primary, #00ffd5);
  background: rgba(0, 255, 213, 0.08);
  border-color: rgba(0, 255, 213, 0.30);
  box-shadow:
    0 0 0 1px rgba(0, 255, 213, 0.12),
    0 0 22px rgba(0, 255, 213, 0.22);
  transform: translateY(-1px);
  outline: none;
}
*/
/* =========================================================
   Founder Hero Overlay – CLEAN FINAL (scoped)
   Scope: chỉ chạy khi hero có class .t2t-overlay-scope
   ========================================================= */

/* A) NEO LAYER: hero là offset-parent, overlay phủ kín */
.t2t-hero-fullscreen.t2t-overlay-scope {
  position: relative;
  overflow: hidden;
}

.t2t-hero-fullscreen.t2t-overlay-scope .t2t-hero-overlay-layer {
  position: absolute;
  inset: 0;
  z-index: 9;
  pointer-events: none;
}

/* chỉ overlay box được click/drag nếu cần */
.t2t-hero-fullscreen.t2t-overlay-scope .t2t-hero-overlay-layer .t2t-founder-hero-copy {
  pointer-events: auto;
}

/* B) CHỐNG ELEMENTOR “BÓP”: không cho widget-container làm offset-parent lạ */
.t2t-hero-fullscreen.t2t-overlay-scope .t2t-hero-overlay-layer .elementor-widget-container {
  position: static !important;
}

/* fix flex shrink bó chữ trong overlay */
.t2t-hero-fullscreen.t2t-overlay-scope .t2t-hero-overlay-layer .e-con,
.t2t-hero-fullscreen.t2t-overlay-scope .t2t-hero-overlay-layer .e-con-inner {
  min-width: 0;
}

/* C) OVERLAY BOX (Founder): đặt đúng vị trí bottom-left */
.t2t-hero-fullscreen.t2t-overlay-scope .t2t-hero-overlay-layer .t2t-founder-hero-copy {
  position: absolute;
  left: 5%;
  bottom: 10%;
  top: auto;
  right: auto;
  transform: none;

  display: flex;
  flex-direction: column;

  /* nhịp đọc chính */
  gap: var(--t2t-founder-gap, clamp(10px, 1.6vw, 18px));

  align-items: flex-start;
  max-width: min(680px, 90vw);
}

/* D) TRIỆT “margin mặc định” nhưng CHỈ triệt trên wrapper Elementor,
      không đè lên spacing tinh chỉnh của ta */
.t2t-hero-fullscreen.t2t-overlay-scope
  .t2t-hero-overlay-layer
  .t2t-founder-hero-copy
  .elementor-widget,
.t2t-hero-fullscreen.t2t-overlay-scope
  .t2t-hero-overlay-layer
  .t2t-founder-hero-copy
  .elementor-widget-container {
  margin: 0 !important;
}

/* E) KIỂU CHỮ: kicker & subline */
.t2t-hero-fullscreen.t2t-overlay-scope
  .t2t-hero-overlay-layer
  .t2t-founder-hero-copy
  .t2t-founder-kicker,
.t2t-hero-fullscreen.t2t-overlay-scope
  .t2t-hero-overlay-layer
  .t2t-founder-hero-copy
  .t2t-founder-subline {
  font-size: var(--t2t-founder-preline-size, clamp(17px, 1.5vw, 22px));
  line-height: var(--t2t-lineheight-loose, 1.8);
  letter-spacing: 0.25px;
  opacity: 1;
}

/* “dòng 3 xa H1 hơn chút” – làm bằng padding-top (không bị reset margin-block) */
.t2t-hero-fullscreen.t2t-overlay-scope
  .t2t-hero-overlay-layer
  .t2t-founder-hero-copy
  .t2t-founder-subline {
  padding-top: var(--t2t-spacing-xs, 4px);
}

/* F) H1: đứng yên, không underline, không gradient animation (chỉ scope này) */
.t2t-hero-fullscreen.t2t-overlay-scope
  .t2t-hero-overlay-layer
  .t2t-founder-hero-copy
  .t2t-founder-title.t2t-heading,
.t2t-hero-fullscreen.t2t-overlay-scope
  .t2t-hero-overlay-layer
  .t2t-founder-hero-copy
  .t2t-founder-title {
  font-size: clamp(1.36rem, 1.87vw, 1.95rem) !important;
  font-weight: 800;
  line-height: 1.25;

  animation: none !important;
  background: none !important;
  -webkit-text-fill-color: currentColor !important;
  color: var(--t2t-emotion-soft) !important;
}

.t2t-hero-fullscreen.t2t-overlay-scope
  .t2t-hero-overlay-layer
  .t2t-founder-hero-copy
  .t2t-founder-title.t2t-heading::after {
  content: none !important;
  display: none !important;
}

/* G) BRIDGE INDENT: indent class đang đặt ở “wrapper Elementor”
      nên phải đẩy padding-left vào phần text thật bên trong */
.t2t-hero-fullscreen.t2t-overlay-scope
  .t2t-hero-overlay-layer
  .t2t-founder-hero-copy
  .t2t-indent-0
  > .elementor-widget-container
  * {
  padding-left: 0 !important;
}

.t2t-hero-fullscreen.t2t-overlay-scope
  .t2t-hero-overlay-layer
  .t2t-founder-hero-copy
  .t2t-indent-05
  > .elementor-widget-container
  * {
  padding-left: calc(var(--t2t-indent-step) / 2) !important;
}

.t2t-hero-fullscreen.t2t-overlay-scope
  .t2t-hero-overlay-layer
  .t2t-founder-hero-copy
  .t2t-indent-1
  > .elementor-widget-container
  * {
  padding-left: var(--t2t-indent-step) !important;
}

.t2t-hero-fullscreen.t2t-overlay-scope
  .t2t-hero-overlay-layer
  .t2t-founder-hero-copy
  .t2t-indent-2
  > .elementor-widget-container
  * {
  padding-left: calc(var(--t2t-indent-step) * 2) !important;
}

.t2t-hero-fullscreen.t2t-overlay-scope
  .t2t-hero-overlay-layer
  .t2t-founder-hero-copy
  .t2t-indent-3
  > .elementor-widget-container
  * {
  padding-left: calc(var(--t2t-indent-step) * 3) !important;
}

/* Mobile: giữ đúng tinh thần indent global (vì global đã xử lý giảm bậc),
   nhưng nếu cần “nhẹ hơn nữa” cho riêng Founder thì dùng biến dưới */
@media (max-width: 768px) {
  .t2t-hero-fullscreen.t2t-overlay-scope .t2t-hero-overlay-layer .t2t-founder-hero-copy {
    max-width: 92vw;
    left: 5%;
    bottom: 10%;
  }
}

/* Force t2t root to own typography context */
.t2t-root {
  color: var(--t2t-text-light, rgba(255, 255, 255, 0.9));
}

.t2t-root p,
.t2t-root li,
.t2t-root blockquote {
  color: inherit;
}

/* =========================================================
   T2T · GLOBAL + EMOTION-SCOPED PATCHES (Paste cuối legacy)
   - Global utilities: divider thơ / divider manifesto
   - Emotion scope: Founder-only kicker + nhịp đoạn + caption
   - Không kéo theo “delay 5s” mặc định (anti tốn máu)
========================================================= */

/* =========================================================
 * 1) GLOBAL UTILITIES — DIVIDERS (Timeless)
 * ========================================================= */

/* --- A) Poetic divider (GLOBAL) ------------------------- */
/* Base: dùng chung toàn site */
.t2t-divider--poetic {
  display: block; /* hỗ trợ div/hr */
  height: 2px;
  margin: 1.15rem auto;
  max-width: 46ch;
  opacity: 0.85;
  border: 0; /* nếu là <hr> */
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.35), transparent);

  /* Safety: chống dính animation/opacity 0 từ scope khác */
  animation: none !important;
}

/* Optional: “nhịp chương” thở rộng hơn ở bài dài (Founder) */
.t2t-divider--poetic.t2t-divider--chapter {
  margin: 1.6rem auto 1.75rem;
  max-width: 52ch;
  opacity: 0.9;
}

/* --- B) Manifesto divider (GLOBAL) ---------------------- */
/* Divider mảnh mong manh kiểu STT manifesto — dùng được mọi nơi */
.t2t-stt-manifesto-divider {
  display: block; /* hỗ trợ div/hr */
  width: 4.5rem;
  height: 1px;
  margin: 1.6rem 0 1.8rem;
  border: 0; /* nếu là <hr> */
  background: linear-gradient(to right, rgba(255, 255, 255, 0.85), rgba(255, 255, 255, 0.1));
  opacity: 0.9;

  /* Không auto-animate global để tránh “thở” tràn lan */
  animation: none;
}

/* Mobile: nhịp gọn lại */
@media (max-width: 767px) {
  .t2t-stt-manifesto-divider {
    margin: 1.3rem 0 1.5rem;
  }
}

/* Opt-in animation: chỉ khi gắn thêm class */
.t2t-divider--breathe {
  animation: stt-divider-breathe 1.6s ease-out 1;
}

/* (Keyframes) nếu STT đã có rồi thì vẫn ok (trùng tên không sao nếu giống) */
@keyframes stt-divider-breathe {
  0% {
    transform: translateY(2px);
    opacity: 0;
  }
  60% {
    transform: translateY(0);
    opacity: 0.95;
  }
  100% {
    opacity: 0.9;
  }
}

/* =========================================================
 * 2) EMOTION SCOPE — Founder-only (KHÔNG dùng tràn lan)
 *    -> Đây đúng loại “khối cảm xúc đặc thù” nên giữ scope.
 * ========================================================= */

/* Gợi ý bọc: <main class="t2t-founder t2t-mf t2t-mf-body"> ... */
.t2t-founder {
  /* giữ tinh thần t2t-mf nhưng “thở” đúng kiểu story dài */
  max-width: var(--body-max, clamp(720px, 66vw, 980px));
  margin: 0 auto;
}

/* Kicker (câu mở đầu như tựa chuyện) */
.t2t-founder .t2t-founder-kicker {
  margin: 0 0 0.6rem;
  opacity: 0.92;
  font-style: italic;
  letter-spacing: 0.01em;
  font-size: clamp(1.04rem, 0.9vw + 0.75rem, 1.18rem);
  line-height: 1.55;
}

/* Nếu sau kicker là divider thơ thì gom nhịp cho gọn */
.t2t-founder .t2t-founder-kicker + .t2t-divider--poetic,
.t2t-founder .t2t-founder-kicker + .t2t-stt-manifesto-divider {
  margin-top: 0.55rem;
  margin-bottom: 1.25rem;
}

/* Nếu không dùng divider thì vẫn tách nhịp bằng khoảng thở */
.t2t-founder .t2t-founder-kicker + p {
  margin-top: 0;
}

/* Caption ảnh tách khỏi body text (anti “lẫn nhịp”) */
.t2t-founder .t2t-caption,
.t2t-founder figcaption {
  opacity: 0.72;
  font-size: 0.92em;
  font-style: italic;
  margin-top: 0.5rem;
}

/* Nhịp đoạn cực nhẹ (anti “đều đều”) */
.t2t-founder p {
  margin: 0 0 1.05rem;
}

/* =========================================================
 * 3) Founder — hook nhẹ cho divider manifesto đúng chỗ
 *    (Chỉ chỉnh margin, còn style base đã GLOBAL ở trên)
 * ========================================================= */
main.t2t-mf.t2t-mf-body .t2t-stt-manifesto-divider {
  margin: 1.8rem 0 2.2rem; /* nới nhẹ để “tách vai” câu đầu */
}

/* Mobile: thu nhịp lại để không loãng */
@media (max-width: 767px) {
  main.t2t-mf.t2t-mf-body .t2t-stt-manifesto-divider {
    margin: 1.4rem 0 1.8rem;
  }
}

/* =========================================================
 * t2t · GLOBAL — Story Title (Poetic) — v1.0
 * Dùng cho các tựa chuyện cảm xúc (Founder/Manifesto/Story)
 * ========================================================= */
.t2t-story-title {
  margin: 0 0 0.65rem;
  font-size: clamp(1.35rem, 1.4vw + 1rem, 2.05rem);
  line-height: 1.25;
  font-weight: 500;
  font-style: italic;
  letter-spacing: 0.02em;
  color: rgba(255, 255, 255, 0.92);
  text-shadow: 0 0 18px rgba(0, 0, 0, 0.55);
}

/* Nếu muốn “kicker vibe” (nhẹ hơn một nấc) */
.t2t-story-title.t2t-story-title--kicker {
  font-size: clamp(1.18rem, 1.1vw + 0.95rem, 1.7rem);
  opacity: 0.92;
}

@media (max-width: 767px) {
  .t2t-story-title {
    font-size: clamp(1.22rem, 3.2vw + 0.9rem, 1.65rem);
    line-height: 1.28;
  }
}
/* =========================================================
 * t2t · GLOBAL — Emotional Lead Panel (soft bar) — v1.1 (REPLACE CLEAN)
 * Dùng cho 1–3 câu dẫn (khác quote)
 * - Default: warm / emotion-soft (hợp Founder / STT vibe)
 * - Có thể đổi accent bằng CSS var: --t2t-lead-accent
 * ========================================================= */

.t2t-lead-panel {
  position: relative;
  padding-left: 1.15rem;
  margin: 0.6rem 0 1.15rem;
  --t2t-lead-accent: rgba(234, 227, 207, 0.95); /* default warm */
  --t2t-lead-accent-weak: rgba(234, 227, 207, 0.18);
  --t2t-lead-text: rgba(255, 255, 255, 0.86);
}

.t2t-lead-panel::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.25rem;
  bottom: 0.25rem;
  width: 2px;
  border-radius: 2px;

  /* phai dần xuống dưới — mềm, “đèn bàn” */
  background: linear-gradient(
    180deg,
    var(--t2t-lead-accent),
    var(--t2t-lead-accent-weak),
    transparent
  );

  opacity: 0.92;
  filter: drop-shadow(0 0 10px rgba(234, 227, 207, 0.1));
}

.t2t-lead-panel p {
  margin: 0;
  color: var(--t2t-lead-text);
  font-style: italic;
  line-height: 1.65;
  text-shadow: 0 0 10px rgba(0, 0, 0, 0.65);
}

/* Optional: nếu ở trang “công nghệ/brand” muốn chuyển về mint (chủ động dùng modifier) */
.t2t-lead-panel.is-mint {
  --t2t-lead-accent: rgba(0, 255, 213, 0.75);
  --t2t-lead-accent-weak: rgba(0, 255, 213, 0.22);
}

/* =========================================================
 * t2t · GLOBAL — Emotion Text Tone — v1.0
 * - Dùng để “nâng” chữ lên tone kem ấm (Founder/STT/Manifesto…)
 * - Không phá body text mặc định
 * ========================================================= */
/* =========================================================
 * t2t · GLOBAL — Emotion Tone override (wins) — v1.0
 * Khi một block vừa là lead-greeting vừa cần tone cảm xúc
 * ========================================================= */
.t2t-lead-greeting.t2t-emotion-text,
.t2t-lead-greeting.t2t-emotion-text * {
  color: var(--t2t-emotion-soft, #eae3cf);
}

#home-lead .t2t-lead-greeting.t2t-emotion-text,
#home-lead .t2t-lead-greeting.t2t-emotion-text * {
  color: var(--t2t-emotion-soft, #eae3cf);
}

.t2t-body-text {
  color: rgba(255, 255, 255, 0.82);
}

/* =========================================================
 * NEO-3 · FOUNDER — Mobile polish (Hero overlay + Quote) v1.1
 * ✅ Replace sạch v1.0 (đừng để cả 2 cùng tồn tại)
 * Chỉ tác động mobile, không chạm desktop
 * ========================================================= */

/* ---------- NEO-3-#1: HERO overlay mobile ---------- */
@media (max-width: 767px) {
  /* 1) Overlay box FULL WIDTH theo parent (Overlay box parent) */
  .t2t-hero-fullscreen.t2t-overlay-scope .t2t-hero-overlay-layer {
    width: 100%;
    max-width: none;
  }

  .t2t-hero-fullscreen.t2t-overlay-scope .t2t-overlay-text.t2t-bottom-left.t2t-founder-hero-copy {
    /* ép container overlay “trải” theo cha */
    width: 100%;
    max-width: none;

    /* giữ an toàn 2 bên + sát đáy hơn */
    left: 14px;
    right: 14px;
    bottom: max(10px, calc(env(safe-area-inset-bottom) + 6px));

    /* nếu overlay-text global có padding làm dày */
    padding: 0;
    margin: 0;
  }

  /* 2) Thu 3 dòng về đúng “một cụm” (như 1 đoạn văn) */
  .t2t-hero-fullscreen.t2t-overlay-scope .t2t-overlay-text.t2t-founder-hero-copy {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px; /* nhịp thở nhẹ thôi */
  }

  /* 3) Mục tiêu: mỗi khối = 1 dòng (khi màn đủ) */
  .t2t-hero-fullscreen.t2t-overlay-scope
    .t2t-overlay-text.t2t-founder-hero-copy
    .t2t-founder-kicker,
  .t2t-hero-fullscreen.t2t-overlay-scope .t2t-overlay-text.t2t-founder-hero-copy .t2t-founder-title,
  .t2t-hero-fullscreen.t2t-overlay-scope
    .t2t-overlay-text.t2t-founder-hero-copy
    .t2t-founder-subline {
    margin: 0 !important;
    white-space: nowrap; /* cố giữ 1 dòng */
    overflow: visible;
    text-wrap: nowrap;
  }

  /* 4) Nếu vẫn ngắt dòng: giảm chữ nhẹ, ưu tiên Title */
  .t2t-hero-fullscreen.t2t-overlay-scope
    .t2t-overlay-text.t2t-founder-hero-copy
    .t2t-founder-kicker {
    font-size: clamp(1.05rem, 3.2vw, 1.22rem);
    line-height: 1.25;
    opacity: 0.92;
  }

  .t2t-hero-fullscreen.t2t-overlay-scope
    .t2t-overlay-text.t2t-founder-hero-copy
    .t2t-founder-title {
    font-size: clamp(1.55rem, 5.4vw, 2.05rem);
    line-height: 1.06;
    letter-spacing: 0.005em;
  }

  .t2t-hero-fullscreen.t2t-overlay-scope
    .t2t-overlay-text.t2t-founder-hero-copy
    .t2t-founder-subline {
    font-size: clamp(1.08rem, 3.5vw, 1.28rem);
    line-height: 1.25;
    opacity: 0.9;
  }

  /* 5) Màn quá hẹp: cho phép wrap (để khỏi “cấn” chữ) */
  @media (max-width: 390px) {
    .t2t-hero-fullscreen.t2t-overlay-scope
      .t2t-overlay-text.t2t-founder-hero-copy
      .t2t-founder-kicker,
    .t2t-hero-fullscreen.t2t-overlay-scope
      .t2t-overlay-text.t2t-founder-hero-copy
      .t2t-founder-title,
    .t2t-hero-fullscreen.t2t-overlay-scope
      .t2t-overlay-text.t2t-founder-hero-copy
      .t2t-founder-subline {
      white-space: normal;
      text-wrap: balance;
    }
  }

  /* 6) OPTION (chỉ khi huynh thấy vẫn đè chi tiết ảnh):
        thêm class "is-raised" vào overlay box (t2t-founder-hero-copy) */
  .t2t-hero-fullscreen.t2t-overlay-scope
    .t2t-overlay-text.t2t-bottom-left.t2t-founder-hero-copy.is-raised {
    bottom: max(18%, calc(env(safe-area-inset-bottom) + 18px));
  }
}

/* ---------- NEO-3-#2: QUOTE panel mobile ---------- */
@media (max-width: 767px) {
  .t2t-quote-panel {
    font-size: 1.15em; /* tăng rõ hơn để cân với body */
    line-height: 1.75;
    padding: 0.95rem 1.1rem;
    max-width: 92%;
  }

  .t2t-quote-panel.short {
    font-size: 1.08em;
    padding: 0.9rem 1.05rem;
  }
}

@media (max-width: 360px) {
  .t2t-quote-panel {
    font-size: 1.06em;
  }
}

/* =========================================================
 * MANIFESTO · Signature (static, trách nhiệm)
 * Không hover – không glow – không mời gọi
 * ========================================================= */

.t2t-manifesto-signature {
  margin-top: 2.2rem;
  text-align: right;

  font-family: var(--t2t-font-emotion, inherit);
  font-style: italic;
  font-size: 0.95rem;
  letter-spacing: 0.04em;

  color: rgba(255, 255, 255, 0.75);
  opacity: 0.85;
}

/* Dòng chú thích dưới chữ ký */
.t2t-manifesto-signature .t2t-signature-note {
  margin-top: 0.35rem;
}

.t2t-manifesto-signature .t2t-signature-note small {
  display: inline-block;
  font-size: 0.78rem;
  font-style: normal;
  letter-spacing: 0.02em;

  color: rgba(255, 255, 255, 0.55);
  opacity: 0.9;
}

/* Link khi đóng vai button */
.t2t-btn-link {
  text-decoration: none;
  color: inherit; /* 🔑 CHỐT HẠ */
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* ===============================
   t2t · Category Nav (FINAL)
   - Wrapper nhịp dọc + giới hạn bề ngang
   - Center H2 đúng cách (t2t-heading là inline-block)
=============================== */

.t2t-category-nav {
  max-width: var(--t2t-maxwidth-content, 860px);
  margin: 0 auto;
  padding: var(--t2t-spacing-lg, 1.5rem) 0;
}

/* căn giữa H2 riêng cho block nav */
.t2t-category-nav .t2t-heading {
  text-align: center;
  display: table;
  margin-left: auto;
  margin-right: auto;
}

/* căn giữa subheading riêng cho block nav */
.t2t-category-nav .t2t-subheading {
  text-align: center;
}

/* nhịp dọc cho block trong nav (không đụng global) */
.t2t-category-nav .t2t-block {
  padding-top: var(--t2t-spacing-lg, 1.5rem);
  padding-bottom: var(--t2t-spacing-lg, 1.5rem);
}

/* ===============================
   t2t MENU CTA DIVIDER (single item)
   Class gán ở WP Menu Item: t2t-menu-cta
   Nhiệm vụ: tạo 1 vạch phân cách trước CTA
=============================== */

/* ---------- DESKTOP: divider dọc (fade trên/dưới) ---------- */
@media (min-width: 1025px) {
  /* cố gắng bám selector phổ biến của Kadence */
  .site-header .primary-navigation ul.menu > li.t2t-menu-cta,
  .site-header .header-navigation ul.menu > li.t2t-menu-cta,
  .kadence-header .primary-navigation ul.menu > li.t2t-menu-cta {
    position: relative;
    /* chừa khoảng thở để divider không đè chữ */
    padding-left: 18px;
    margin-left: 10px;
  }

  .site-header .primary-navigation ul.menu > li.t2t-menu-cta::before,
  .site-header .header-navigation ul.menu > li.t2t-menu-cta::before,
  .kadence-header .primary-navigation ul.menu > li.t2t-menu-cta::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 1px;
    height: 62%;
    pointer-events: none;

    /* vạch dọc mờ dần trên/dưới (đúng vibe “fade-out”) */
    background: linear-gradient(to bottom, transparent, rgba(0, 183, 255, 0.55), transparent);
    opacity: 0.9;
  }
}

/* ---------- MOBILE/TABLET: divider ngang (fade trái/phải) ---------- */
@media (max-width: 1024px) {
  /* trong menu mobile (drawer/offcanvas) CTA thường nằm dạng list dọc */
  .mobile-navigation ul.menu li.t2t-menu-cta,
  .drawer-nav ul.menu li.t2t-menu-cta,
  .kadence-mobile-nav ul.menu li.t2t-menu-cta {
    position: relative;
    margin-top: 12px;
    padding-top: 14px;
  }

  .mobile-navigation ul.menu li.t2t-menu-cta::before,
  .drawer-nav ul.menu li.t2t-menu-cta::before,
  .kadence-mobile-nav ul.menu li.t2t-menu-cta::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    height: 1px;
    width: 100%;
    pointer-events: none;

    /* vạch ngang mờ dần về 2 phía */
    background: linear-gradient(to right, transparent, rgba(0, 183, 255, 0.45), transparent);
    opacity: 0.85;
  }
}

/* ===============================
t2tDigital · Kadence Mobile Drawer (GLASS + BLUE TONE)
Targets: #mobile-drawer .drawer-inner .drawer-content .mobile-navigation
=============================== */

/* 1) NỀN PANEL (toàn bộ off-canvas) */
#mobile-drawer.popup-drawer .drawer-inner {
  /* nền xanh đêm + vignette nhẹ */
  background:
    radial-gradient(900px 460px at 65% -10%, rgba(0, 183, 255, 0.1), transparent 60%),
    radial-gradient(700px 420px at 10% 10%, rgba(0, 255, 213, 0.06), transparent 55%),
    rgba(8, 10, 14, 0.94);

  /* glass feel */
  -webkit-backdrop-filter: blur(10px) saturate(120%);
  backdrop-filter: blur(10px) saturate(120%);

  border: 1px solid rgba(0, 247, 255, 0.1);
  box-shadow: 0 18px 60px rgba(0, 0, 0, 0.55);

  /* giữ màu chữ dịu */
  color: rgba(242, 242, 242, 0.92);
}

/* 2) NỀN KHU VỰC NỘI DUNG (bên trong drawer) */
#mobile-drawer.popup-drawer .drawer-content.mobile-drawer-content {
  background: transparent; /* để nền panel phía trên xuyên qua */
}

/* 3) KHU MENU (mobile-navigation) */
#mobile-drawer .mobile-navigation {
  background: transparent;
}

/* 4) ITEM: bỏ cảm giác “ô hộp”, làm mềm + nhịp thở */
#mobile-drawer .mobile-menu-container ul.menu > li {
  position: relative;
  border-bottom: 1px solid rgba(0, 247, 255, 0.12);
}

/* Divider “mờ dần” về phải (style giống ảnh 1 của huynh) */
#mobile-drawer .mobile-menu-container ul.menu > li::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 1px;
  pointer-events: none;
  background: linear-gradient(90deg, rgba(0, 247, 255, 0.16), rgba(0, 247, 255, 0.04), transparent);
}

/* Link */
#mobile-drawer .mobile-menu-container ul.menu > li > a {
  background: transparent;
  border-radius: 12px;
  padding: 12px 14px;
  color: rgba(242, 242, 242, 0.92);

  /* để hover mềm hơn */
  transition:
    background 0.18s ease,
    transform 0.18s ease;
}

/* Hover/Focus: glass nhẹ */
#mobile-drawer .mobile-menu-container ul.menu > li > a:hover,
#mobile-drawer .mobile-menu-container ul.menu > li > a:focus {
  background: rgba(0, 183, 255, 0.08);
  transform: translateX(1px);
}

/* Active/current */
#mobile-drawer .mobile-menu-container ul.menu > li.current-menu-item > a,
#mobile-drawer .mobile-menu-container ul.menu > li.current_page_item > a {
  background: rgba(0, 255, 213, 0.07);
  color: rgba(242, 242, 242, 0.98);
}

/* 5) Submenu wrapper (huynh có .drawer-nav-drop-wrap) */
#mobile-drawer .drawer-nav-drop-wrap {
  background: transparent;
}

/* 6) Nút toggle submenu (mũi tên) – cho đồng tone */
#mobile-drawer button.drawer-sub-toggle {
  color: rgba(0, 247, 255, 0.85);
}

/* 7) Close button */
#mobile-drawer .menu-toggle-close.drawer-toggle {
  color: rgba(242, 242, 242, 0.9);
}

/* 8) Mobile-only safety (không phá desktop) */
@media (min-width: 1025px) {
  #mobile-drawer.popup-drawer .drawer-inner {
    background: initial;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    border: none;
    box-shadow: none;
  }
}

/* =========================================
🔹 PANEL SEPARATOR – NHỊP NGẮT NHẸ CHO LINK
Nhiệm vụ duy nhất: tạo khoảng nghỉ thị giác
========================================= */

.t2t-panel-sep {
  display: inline-block;
  margin: 0 0.45em;
  opacity: 0.45;
  font-size: 0.9em;
  line-height: 1;
  color: var(--t2t-brand-primary, #00ffd5);
  transform: translateY(-0.05em);
  pointer-events: none;
}

/* Mobile: cho thở hơn, tránh dính chữ */
@media (max-width: 767px) {
  .t2t-panel-sep {
    margin: 0 0.6em;
    opacity: 0.35;
  }
}

/* ===============================
🧠 T2T OVERLAY TEXT – RESPONSIVE BEHAVIOR (REPLACE CLEAN)
1) Global: Tablet/Mobile luôn canh trái (giống desktop)
2) Reception Hero: giữ bottom-left đúng vị trí
=============================== */

/* ------------------------------------------------
(1) GLOBAL: overlay text luôn canh trái trên tablet/mobile
------------------------------------------------- */
@media (max-width: 1024px) {
  /* Nếu trước đây có rule canh giữa, hãy XÓA hoặc sửa thẳng rule đó.
     Đây là "gốc" mới: t2tDigital overlay = left-aligned. */
  .t2t-overlay-text {
    text-align: left;
  }
}

/* (tuỳ chọn) nếu theme/widget gán text-align cho p/heading riêng */
@media (max-width: 1024px) {
  .t2t-overlay-text p,
  .t2t-overlay-text h1,
  .t2t-overlay-text h2,
  .t2t-overlay-text h3 {
    text-align: left;
  }
}

/* =========================================================
   ✅ OVERLAY TEXT – STABLE RULESET (NO PATCH CHỒNG PATCH)
   Mục tiêu:
   - Page hero (Trao đổi / Khám phá…): overlay luôn bottom-left
   - Archive pages: cho phép “stack” (rớt xuống) nếu muốn, NHƯNG chỉ trong body.archive
   - Mobile/Tablet: giữ text-align: left (không ép center)
   ========================================================= */

/* 1) Mặc định: overlay bottom-left là ABSOLUTE (mọi nơi) */
.t2t-archive-hero .t2t-overlay-text.bottom-left,
.t2t-hero-img-wrapper--full .t2t-overlay-text.bottom-left {
  position: absolute;
  left: 3.5rem;
  bottom: 3.5rem;
  right: auto;
  margin: 0;
  text-align: left;
  z-index: 3;
}

/* 2) Tablet/Mobile: vẫn ABSOLUTE, thu vào cho an toàn */
@media (max-width: 1024px) {
  .t2t-archive-hero .t2t-overlay-text.bottom-left,
  .t2t-hero-img-wrapper--full .t2t-overlay-text.bottom-left {
    left: 1.5rem;
    right: 1.5rem;
    bottom: 1.5rem;
    max-width: min(760px, calc(100% - 3rem));
    text-align: left; /* ✅ giữ canh trái */
  }
}

@media (max-width: 767px) {
  .t2t-archive-hero .t2t-overlay-text.bottom-left,
  .t2t-hero-img-wrapper--full .t2t-overlay-text.bottom-left {
    left: 1rem;
    right: 1rem;
    bottom: max(1rem, calc(env(safe-area-inset-bottom) + 0.75rem));
    max-width: calc(100% - 2rem);
    text-align: left; /* ✅ giữ canh trái */
  }
}

/* 3) (TUỲ CHỌN) Nếu archive category huynh vẫn muốn “rớt xuống dưới ảnh” trên tablet/mobile
      thì chỉ áp trong body.archive (không ảnh hưởng page).
      Nếu KHÔNG muốn rớt nữa → xoá nguyên khối này. */
@media (max-width: 1024px) {
  body.archive .t2t-archive-hero .t2t-overlay-text.bottom-left {
    position: static;
    margin: 18px;
    max-width: 760px;
    text-align: left;
  }
}

/* =========================================================
   ARCHIVE PANEL — v2 (Clean + Backward Compatible)
   - New: .t2t-archive-panel  (single-responsibility panel)
   - Backward-compat: .t2t-section.t2t-block.t2t-archive (legacy combo)
   - Wrapper spacing: .t2t-archive (legacy wrapper)  [keep as alias]
========================================================= */

/* 1) PANEL (new + legacy combo cùng ăn 1 kiểu) */
.t2t-archive-panel,
.t2t-section.t2t-block.t2t-archive {
  position: relative;
  overflow: hidden;

  /* width + rhythm giống .t2t-block (để không phải combo 3 class nữa) */
  max-width: var(--t2t-maxwidth-blog);
  width: 100%;
  margin: 0 auto;

  /* nền tối chuẩn t2tDigital */
  background:
    radial-gradient(1200px 400px at 15% 0%, rgba(0, 247, 255, 0.05), transparent 55%),
    radial-gradient(1000px 350px at 85% 10%, rgba(0, 183, 255, 0.05), transparent 55%),
    linear-gradient(#06090e, #06090e);

  border: 1px solid rgba(0, 247, 255, 0.1);
  border-radius: var(--t2t-radius-xl, 16px);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.35);

  color: var(--t2t-text-soft);

  /* spacing chuẩn panel (đừng để “nhảy padding” vì class lạ) */
  padding: var(--t2t-padding-blog-tablet);
  padding-top: clamp(28px, 5vw, 56px);
  padding-bottom: clamp(28px, 6vw, 72px);

  margin-top: clamp(8px, 1.8vw, 20px);
}

/* 2) VIGNETTE (new + legacy combo) */
.t2t-archive-panel::before,
.t2t-section.t2t-block.t2t-archive::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background: radial-gradient(1200px 450px at 65% -10%, rgba(0, 183, 255, 0.06), transparent 60%);
}

/* 3) đảm bảo vignette không đè nội dung */
.t2t-archive-panel > *,
.t2t-section.t2t-block.t2t-archive > * {
  position: relative;
  z-index: 1;
}

@media (max-width: 1024px) {
  .t2t-archive-panel,
  .t2t-section.t2t-block.t2t-archive {
    border-radius: var(--t2t-radius-lg, 14px);
  }
}

@media (max-width: 767px) {
  .t2t-archive-panel,
  .t2t-section.t2t-block.t2t-archive {
    border-radius: var(--t2t-radius-md, 12px);
    padding: var(--t2t-padding-blog-mobile, 16px);
    margin-top: clamp(6px, 1.2vw, 12px);
  }
}

/* 4) WRAPPER spacing (legacy) — giữ lại cho những chỗ đang dùng .t2t-archive */
.t2t-archive {
  padding: clamp(20px, 5vw, 56px) var(--t2t-padding-blog-tablet);
}

@media (max-width: 767px) {
  .t2t-archive {
    padding: var(--t2t-padding-blog-mobile, 16px);
  }
}

/* =========================================================
   GLOBAL · Archive Panel owns the mood background
   - Khi dùng .t2t-archive-panel, thì legacy combo không được
     tự biến thành card cứng chồng nền lên nhau
========================================================= */
.t2t-archive-panel .t2t-section.t2t-block.t2t-archive {
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  overflow: visible !important;
}

/* =========================================================
   t2t · Transparent Skin (utility)
   - Use when a wrapper must visually "disappear"
   - Does NOT touch typography, only container surface
========================================================= */
.t2t-skin--transparent {
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
  border-radius: 0 !important;
}

/* If the wrapper relies on padding but you still want no surface, keep padding intact.
   (No padding reset here on purpose) */

/* =========================================================
   T2T · SINGLE HERO (Hub-like, NO glass, NO left bar)
   Outer (Elementor Section): .t2t-single-hero
   Inner (shortcode wrapper): .t2t-single-hero-inner
   Picture: [t2t_single_hero_picture] -> .t2t-single-hero-picture
   Overlay: [t2t_single_hero] -> .t2t-overlay-scope + .t2t-mf-hero-text
   ========================================================= */

/* 0) Make Elementor hero section a clean stacking context */
.t2t-single-hero {
  position: relative;
  isolation: isolate;
  z-index: 5;
  overflow: visible;
}

/* Elementor sometimes injects overflow:hidden on inner wrappers */
.t2t-single-hero,
.t2t-single-hero .e-con,
.t2t-single-hero .elementor-container,
.t2t-single-hero .elementor-widget-wrap,
.t2t-single-hero .elementor-widget-container {
  overflow: visible !important;
}

/* 1) Inner wrapper becomes the positioning context */
.t2t-single-hero .t2t-single-hero-inner {
  position: relative;
  width: 100%;
  margin: 0;
}

/* 2) Picture sizing: DO NOT force height:100% on desktop/tablet
      -> use aspect-ratio like Hub (stable, no “khoảng đen lạ”) */
.t2t-single-hero .t2t-single-hero-picture,
.t2t-single-hero .t2t-archive-hero-picture {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden; /* crop inside picture wrapper, not the whole section */
}

/* Ensure picture/img fill the wrapper */
.t2t-single-hero .t2t-single-hero-picture picture,
.t2t-single-hero .t2t-archive-hero-picture picture,
.t2t-single-hero .t2t-single-hero-picture img,
.t2t-single-hero .t2t-archive-hero-picture img {
  display: block;
  width: 100%;
  height: 100%;
}

.t2t-single-hero .t2t-single-hero-picture img,
.t2t-single-hero .t2t-archive-hero-picture img {
  object-fit: cover;
  object-position: center;
}

/* 3) Overlay scope sits on top of image (desktop/tablet) */
.t2t-single-hero .t2t-single-hero-inner .t2t-overlay-scope {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
}

/* 4) Hub-like text placement (bottom-left), NO glass background */
.t2t-single-hero .t2t-single-hero-inner .t2t-mf-hero-text {
  position: absolute;
  left: clamp(18px, 3.2vw, 56px);
  bottom: clamp(18px, 3.6vw, 64px);
  right: clamp(18px, 3.2vw, 56px);

  max-width: 720px;
  text-align: left;
  padding: 0; /* no panel */
  background: transparent; /* no glass */
  box-shadow: none;
  border: 0;
  pointer-events: none;

  /* readability “nhẹ như Hub” */
  text-shadow: 0 10px 28px rgba(0, 0, 0, 0.55);
}

/* If old modifier tries to center -> neutralize */
.t2t-single-hero .t2t-single-hero-inner .t2t-mf-hero-text.is-bottom-center {
  left: clamp(18px, 3.2vw, 56px);
  right: clamp(18px, 3.2vw, 56px);
  transform: none;
  text-align: left;
}

/* 5) Title + desc colors */
.t2t-single-hero .t2t-mf-hero-text .t2t-heading {
  color: var(--t2t-text-light, #eafcff);
  margin: 0 0 clamp(8px, 1vw, 12px) 0;
}

.t2t-single-hero .t2t-mf-hero-text .t2t-preline,
.t2t-single-hero .t2t-mf-hero-text p {
  color: rgba(234, 252, 255, 0.86);
  margin: 0;
}

/* =========================================================
   SINGLE HERO · Overlay spacing polish
   - breathe between leadline / H1 / desc
   ========================================================= */

/* Leadline (câu nhỏ trước H1) tách khỏi H1 */
.t2t-single-hero .t2t-single-hero-inner .t2t-mf-hero-text > .t2t-preline:first-child,
.t2t-single-hero .t2t-single-hero-inner .t2t-mf-hero-text > p.t2t-preline:first-child {
  margin-bottom: clamp(10px, 1.2vw, 14px);
}

/* H1 đứng rõ + tạo nhịp trước desc */
.t2t-single-hero .t2t-single-hero-inner .t2t-mf-hero-text .t2t-heading {
  margin-bottom: clamp(14px, 1.6vw, 20px);
}

/* Desc tách khỏi H1 một nhịp nhẹ */
.t2t-single-hero .t2t-single-hero-inner .t2t-mf-hero-text > .t2t-preline:last-child,
.t2t-single-hero .t2t-single-hero-inner .t2t-mf-hero-text > p.t2t-preline:last-child {
  margin-top: clamp(6px, 0.9vw, 10px);
}

/* 6) Anti-overlap: make the next section sit UNDER the hero overlay */
.t2t-single-hero + .elementor-section,
.t2t-single-hero + .e-con {
  position: relative;
  z-index: 1;
}

/* =========================================================
   Tablet: keep overlay on image, but tighten bounds
   ========================================================= */
@media (max-width: 1024px) {
  .t2t-single-hero .t2t-single-hero-picture,
  .t2t-single-hero .t2t-archive-hero-picture {
    aspect-ratio: 16 / 9;
  }

  .t2t-single-hero .t2t-single-hero-inner .t2t-mf-hero-text {
    left: 16px;
    right: 16px;
    bottom: 16px;
    max-width: 680px;
  }
}

/* =========================================================
   Mobile: STACK mode like Hub mobile
   - Text goes UNDER image => wrapper grows => body never covers
   ========================================================= */
@media (max-width: 767px) {
  /* Let image be taller/cinematic on mobile */
  .t2t-single-hero .t2t-single-hero-picture,
  .t2t-single-hero .t2t-archive-hero-picture {
    aspect-ratio: 3 / 4; /* hub-like “đứng” */
  }

  .t2t-single-hero .t2t-single-hero-inner .t2t-overlay-scope {
    position: static;
    inset: auto;
    z-index: auto;
    pointer-events: auto;
  }

  .t2t-single-hero .t2t-single-hero-inner .t2t-mf-hero-text {
    position: static;
    margin: 14px 14px 0 14px;
    max-width: 720px;
    text-shadow: none; /* dưới ảnh rồi, khỏi cần dày */
    pointer-events: auto;
    margin-bottom: max(12px, env(safe-area-inset-bottom));
  }

  /* Hard block if any next section tries to “leo” */
  .t2t-single-hero + .elementor-section,
  .t2t-single-hero + .e-con {
    margin-top: 0 !important;
  }
}

/* =========================================================
   PATCH · SINGLE HERO HEIGHT FIX (kill 100vh, hub-like ratio)
   - Symptoms fixed:
     (1) Desktop: body đè lên hero
     (2) Tablet: khoảng đen dư
     (3) Mobile: overlay/panel bị nuốt
   ========================================================= */

/* 0) Kill any "fit to screen" / 100vh from Elementor wrapper */
.t2t-single-hero,
.t2t-single-hero.e-con,
.t2t-single-hero.t2t-hero-img-wrapper--full,
.t2t-hero-img-wrapper--full.t2t-single-hero {
  height: auto !important;
  min-height: 0 !important; /* <- quan trọng */
}

/* Elementor hay áp min-height lên container con */
.t2t-single-hero .e-con,
.t2t-single-hero .e-con-inner,
.t2t-single-hero .elementor-container,
.t2t-single-hero .elementor-widget-wrap,
.t2t-single-hero .elementor-widget-container {
  min-height: 0 !important;
  height: auto !important;
}

/* 1) Hub-like ratio: để wrapper "giành chỗ" đúng theo ảnh (16:9) */
.t2t-single-hero .t2t-single-hero-picture,
.t2t-single-hero .t2t-archive-hero-picture {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9; /* <- giống Hub */
  height: auto;
}

/* 2) Fill the ratio box (cover) */
.t2t-single-hero .t2t-single-hero-picture picture,
.t2t-single-hero .t2t-archive-hero-picture picture,
.t2t-single-hero .t2t-single-hero-picture img,
.t2t-single-hero .t2t-archive-hero-picture img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 3) Mobile: cho phép ảnh cao hơn một chút (đỡ “lùn” trên màn dọc) */
@media (max-width: 767px) {
  .t2t-single-hero .t2t-single-hero-picture,
  .t2t-single-hero .t2t-archive-hero-picture {
    aspect-ratio: 3 / 4; /* hub mobile cảm giác “đứng” hơn */
  }
}

/* =========================================================
   t2tDigital · HERO REVEAL PATCH v5 (CLEAN)
   Goal:
   - Reveal "kéo màn che" smooth & EVEN (linear)
   - Chữ RÕ NGAY từ ký tự đầu (no fade/blur)
   - Giữ outfit: italic + màu + shadow
   Scope:
   - ONLY .t2t-typewriter-overlay.t2t-tw-reveal
   Vars (per line, set by PHP inline style):
   - --t2t-tw-dur   (duration)
   - --t2t-tw-delay (delay)
========================================================= */

/* 0) Wrapper */
.t2t-typewriter-overlay.t2t-tw-reveal{
  pointer-events: none;
}

.t2t-typewriter-overlay.t2t-tw-reveal .t2t-typewriter-group{
  display: flex;
  flex-direction: column;
  gap: 0.5em;
}

/* 1) Keyframes: curtain reveal (no fade/blur) */
@keyframes t2tTwRevealMask{
  from { clip-path: inset(0 100% 0 0); }
  to   { clip-path: inset(0 0 0 0); }
}

/* 2) Reveal line (outfit + animation) */
.t2t-typewriter-overlay.t2t-tw-reveal .t2t-reveal-line{
  /* vars from PHP (fallback) */
  --t2t-tw-dur: 3.2s;
  --t2t-tw-delay: 0s;

  display: inline-block;
  width: fit-content;
  max-width: 100%;
  box-sizing: border-box;

  /* wrap mềm nếu dòng dài */
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;

  /* outfit (restore) */
  font-family: var(--t2t-font-serif);
  font-style: italic;
  font-size: clamp(18px, 3vw, 28px);
  line-height: 1.4;
  color: var(--t2t-emotion-soft);
  text-shadow: 0 0 5px rgba(0,0,0,0.6);

  /* reveal */
  clip-path: inset(0 100% 0 0);
  animation: t2tTwRevealMask var(--t2t-tw-dur) linear both;
  animation-delay: var(--t2t-tw-delay);
}

/* 3) Fallback when clip-path unsupported */
@supports not (clip-path: inset(0 0 0 0)){
  .t2t-typewriter-overlay.t2t-tw-reveal .t2t-reveal-line{
    clip-path: none;
  }
}

/* 4) Indent helpers stay width-fit */
.t2t-typewriter-overlay.t2t-tw-reveal .t2t-indent-0,
.t2t-typewriter-overlay.t2t-tw-reveal .t2t-indent-1,
.t2t-typewriter-overlay.t2t-tw-reveal .t2t-indent-2{
  width: fit-content;
}