/* Dọn 07/10/2026: bỏ 124 rule thừa/không còn tác dụng (kiểm chứng trên 12 trang × 11 khổ). Bản gốc: tnp-backups-20261002/tnp-global.css.before-cleanup-20261007.bak */
/* ============================================
   THE NEW PAGE — GLOBAL CSS V5 (WordPress)
   Mirrors exactly the V5 style.css design
   ============================================ */
/* 2026-10-03 (đợt 2) — LAYOUT SANG ELEMENTOR: padding / margin / gap / min-height / hướng flex / căn chỉnh / màu nền của các container & widget Elementor đã chuyển vào Elementor (Desktop / Tablet ≤1024 / Mobile Extra ≤820 / Mobile ≤680). Rule tương ứng ở đây đã gỡ, đánh dấu "(layout đã chuyển sang Elementor)". */

/* 2026-10-03 — CHUYỂN SANG ELEMENTOR: các rule ép cỡ chữ/màu/font (!important) nhắm vào widget Elementor
   đã được gỡ khỏi file này; giá trị tương ứng nằm trong Style > Typography của từng widget (Desktop/Tablet/Mobile).
   Font mặc định đặt ở Elementor > Site Settings > Typography (Body: Inter, H1–H3: EB Garamond).
   Các chỗ đã gỡ được đánh dấu "(đã chuyển typography sang Elementor)". */


/* Google Fonts are loaded once in <head> by mu-plugin tnp-global-assets.php (removed duplicate @import 2026-10-02) */

/* ─── RESET & BASE ─── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --deep-forest:      #18271F;
  --forest-secondary: #26382E;
  --warm-ivory:       #F5F1E5;
  --soft-ivory:       #FBF8EF;
  --terracotta:       #D96B52;
  --terracotta-dark:  #C25B44;
  --ink:              #20211E;
  --secondary-text:   #73766D;
  --border-divider:   #D8D4C8;
  --text-on-dark:       rgba(245, 241, 229, 0.94);
  --text-on-dark-mid:   rgba(245, 241, 229, 0.72);
  --text-on-dark-muted: rgba(245, 241, 229, 0.45);
  --border-on-dark:     rgba(245, 241, 229, 0.16);
  --font-serif: 'EB Garamond', Georgia, serif;
  --font-sans:  'Inter', system-ui, -apple-system, sans-serif;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

body {
  font-family: var(--font-sans);
  background: var(--warm-ivory);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
img { display: block; max-width: 100%; height: auto; }
a   { text-decoration: none; color: inherit; }

/* ─── CRISP TYPOGRAPHY (Match Design V5 & Fix Blurriness) ─── */

/* Sans font for body text */

/* ─── SPECIFIC DESIGN V5 TYPOGRAPHY OVERRIDES ─── */
/* Hero Title Second Line: Always EB Garamond Italic (NOT Inter) */
/* (đã chuyển typography sang Elementor) .about-v2-hero .elementor-widget-heading p, .about-v2-hero .hero-title-italic, .hero-title-italic */

/* Donate Action Headings: Always Inter Bold Uppercase (NOT EB Garamond) */
/* (đã chuyển typography sang Elementor) .donate-action-heading, .about-v2-donate-section h3, .about-v2-donate-section h3.elementor-heading-title, .about-v2-donate-section .donate-action-box .elementor-heading-title */

/* Light Background Body Text Color */

/* Dark Background (Section 03 Centerpiece) Text Colors */
/* (đã chuyển typography sang Elementor) .centerpiece-eyebrow, .about-v2-centerpiece .centerpiece-eyebrow */

/* (đã chuyển typography sang Elementor) .centerpiece-question, .about-v2-centerpiece .centerpiece-question */

/* (đã chuyển typography sang Elementor) .centerpiece-sub, .about-v2-centerpiece .centerpiece-sub */

/* ─── SCROLL REVEAL ANIMATION (Matching Design V5 - Safe for Elementor) ─── */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1), transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}
.reveal.visible {
  opacity: 1 !important;
  transform: none !important;
  will-change: auto !important;
}

/* CRITICAL: In Elementor Editor or Preview, ALWAYS 100% visible */
body.elementor-editor-active,
body.elementor-editor-active *,
body.elementor-editor-preview,
body.elementor-editor-preview *,
.elementor-editor-active .reveal,
.elementor-editor-preview .reveal,
.elementor-editor-active [class*="reveal"],
.elementor-editor-active .elementor-element,
.elementor-editor-preview .elementor-element,
.elementor-editor-active .e-con,
.elementor-editor-preview .e-con {
  opacity: 1 !important;
  visibility: visible !important;
}

/* Header Hide/Show on Scroll */
header.elementor-location-header,
header.elementor-18,
.elementor-18 > .e-con,
.elementor-18 .elementor-element-6f45dc93 {
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* ─── WORDPRESS ADMIN BAR OFFSET FOR FIXED HEADER ─── */

::-webkit-scrollbar { width: 5px; }
::-webkit-scrollbar-track { background: var(--warm-ivory); }
::-webkit-scrollbar-thumb { background: var(--border-divider); border-radius: 4px; }

/* Elementor override: Only top-level parent sections stretch to 100% */

/* Accents */

/* ─────────────────────────────────────────
   HEADER (Fixed, Logo left - Nav center - CTA right)
───────────────────────────────────────── */

/* ─────────────────────────────────────────
   FULLSCREEN MENU
───────────────────────────────────────── */

/* ─────────────────────────────────────────
   SHARED: SECTIONS, LABELS, REVEALS, BUTTONS
───────────────────────────────────────── */

/* Buttons */

/* B&W images */
.img-bw {
  filter: grayscale(100%); object-fit: cover;
  width: 100%; height: 100%;
  transition: filter 0.3s ease, transform 0.3s ease;
}

/* Page wrapper offset for fixed header */

/* ─────────────────────────────────────────
   HERO (COVER DEEP FOREST - CENTERED)
───────────────────────────────────────── */

/* ─────────────────────────────────────────
   SECTION 01: VỀ THE NEW PAGE
───────────────────────────────────────── */

/* ─────────────────────────────────────────
   SECTION 02: KHÁM PHÁ
───────────────────────────────────────── */

/* ─────────────────────────────────────────
   SECTION 03: ĐỌC (Featured Articles)
───────────────────────────────────────── */

/* ─────────────────────────────────────────
   SECTION 04: SUY NGHĨ (Thought Cards)
───────────────────────────────────────── */

/* ─────────────────────────────────────────
   SECTION 05: VIẾT (Dark Forest)
───────────────────────────────────────── */

/* ─────────────────────────────────────────
   SECTION 06: MỖI TUẦN MỘT LẦN (CTA)
───────────────────────────────────────── */

/* ─────────────────────────────────────────
   FOOTER (Deep Forest)
───────────────────────────────────────── */

/* ─────────────────────────────────────────
   SUB-PAGE: ĐỌC (doc.html)
───────────────────────────────────────── */

/* ─────────────────────────────────────────
   SUB-PAGE: SUY NGHĨ (suy-nghi.html)
───────────────────────────────────────── */

.thoughts-grid-container {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px;
  width: 100%; max-width: 1296px; margin: 0 auto;
}
.thought-grid-item {
  background: var(--soft-ivory); border: 1px solid var(--border-divider);
  border-radius: 6px; padding: 40px 34px; display: flex; flex-direction: column;
  justify-content: space-between; min-height: 230px; transition: all 0.22s var(--ease);
  text-decoration: none;
}
.thought-grid-item:hover {
  background: #FFFFFF; border-color: var(--deep-forest); transform: translateY(-3px);
  box-shadow: 0 10px 30px rgba(0,0,0,0.05);
}
.thought-item-quote {
  font-family: var(--font-serif); font-size: 19px; line-height: 1.65;
  color: var(--deep-forest); margin-bottom: 20px; font-style: normal;
}
.thought-item-prompt {
  font-family: var(--font-sans); font-size: 12px; font-weight: 700; color: var(--terracotta); align-self: flex-end;
}

/* ─────────────────────────────────────────
   PAGE: INDIVIDUAL THOUGHT (thought-detail.html)
───────────────────────────────────────── */
.thought-detail-main { padding: 160px 24px 108px; }
.thought-detail-container { max-width: 760px; margin: 0 auto; width: 100%; }
.thought-back-nav { margin-bottom: 40px; }
.thought-back-link {
  font-family: var(--font-sans); font-size: 12px; font-weight: 700; letter-spacing: 0.15em; text-transform: uppercase;
  color: var(--secondary-text); text-decoration: none; transition: color 0.2s; display: inline-flex;
}
.thought-back-link:hover { color: var(--deep-forest); }

.opening-thought-wrap { margin-bottom: 40px; }
.opening-thought-text {
  font-family: var(--font-serif); font-size: clamp(28px, 3.8vw, 46px);
  font-weight: 500; line-height: 1.28; letter-spacing: -0.02em; color: var(--deep-forest);
  font-style: normal; margin: 0; padding: 0;
}
.thought-divider-line { height: 1px; width: 100%; background: var(--border-divider); margin-bottom: 40px; }

.thought-reflection-content {
  font-family: var(--font-sans); font-size: 17px; line-height: 1.88;
  color: var(--ink); display: flex; flex-direction: column; gap: 24px; margin-bottom: 56px;
}
.thought-reflection-content p { margin: 0 0 24px 0; }
.thought-reflection-content p:last-child { margin-bottom: 0; }

.thought-prev-next-nav {
  display: flex; justify-content: space-between; border-top: 1px solid var(--border-divider);
  padding: 32px 0; margin-bottom: 32px;
}
.nav-direction-link {
  font-family: var(--font-sans); font-size: 14px; font-weight: 600; color: var(--deep-forest);
  text-decoration: none; transition: color 0.2s;
}
.nav-direction-link:hover { color: var(--terracotta); }

.thought-share-block { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
.share-label {
  font-family: var(--font-sans); font-size: 11px; font-weight: 700; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--secondary-text);
}
.share-links { display: flex; gap: 20px; font-size: 13px; color: var(--deep-forest); }
.share-btn-text {
  font-family: var(--font-sans); font-size: 13px; color: var(--deep-forest);
  transition: color 0.2s; cursor: pointer; text-decoration: none; background: none; border: none; padding: 0;
}
.share-btn-text:hover { color: var(--terracotta); }

@media (max-width: 1024px) {
  .thoughts-grid-container { grid-template-columns: repeat(2, 1fr); gap: 24px; }
  
  .thought-detail-main { padding: 130px 24px 80px; }
}

@media (max-width: 680px) {
  .thoughts-grid-container { grid-template-columns: 1fr; gap: 20px; }
  
  .thought-grid-item { padding: 28px 24px; min-height: 180px; }
    .thought-detail-main { padding: 100px 20px 60px; }
  }

/* ─────────────────────────────────────────
   SUB-PAGE HERO (Đọc, Viết, About)
───────────────────────────────────────── */

/* ─────────────────────────────────────────
   ABOUT PAGE
───────────────────────────────────────── */

/* ─────────────────────────────────────────
   RESPONSIVE
───────────────────────────────────────── */
/* ─────────────────────────────────────────
   RESPONSIVE DESIGN SYSTEM (Post 18, 23, 69)
───────────────────────────────────────── */

/* ── HEADER RESPONSIVE (Post 18) ── */
@media (max-width: 1024px) {
  .elementor-18 .e-con.e-parent > .e-con {
    display: flex !important;
    height: 60px !important;
    width: 100% !important;
    box-sizing: border-box !important;
    position: relative !important;
}
  /* Child 1: Logo */
  .elementor-18 .e-con.e-parent > .e-con > .elementor-element:nth-child(1) {
    order: 1 !important;
    flex: 0 0 auto !important;
    width: auto !important;
    max-width: 160px !important;
  }
    /* Child 3: Substack button container */
  .elementor-18 .e-con.e-parent > .e-con > .elementor-element:nth-child(3) {
    order: 2 !important;
    flex: 0 0 auto !important;
    width: auto !important;
}
  .elementor-18 .e-con.e-parent > .e-con > .elementor-element:nth-child(3) .elementor-button {
    padding: 7px 14px !important;
    white-space: nowrap !important;
}
  /* Child 2: Nav Menu (Hamburger) */
  .elementor-18 .e-con.e-parent > .e-con > .elementor-element:nth-child(2) {
    order: 3 !important;
    flex: 0 0 auto !important;
    width: auto !important;
    padding: 0 !important;
    position: static !important;
}
    .elementor-18 .elementor-menu-toggle {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 38px !important;
    height: 38px !important;
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
    cursor: pointer !important;
    color: #F5F1E5 !important;
  }
  .elementor-18 .elementor-menu-toggle svg {
    width: 24px !important;
    height: 24px !important;
    fill: #F5F1E5 !important;
    stroke: #F5F1E5 !important;
    pointer-events: none !important;
  }
          /* Dropdown Menu Fullscreen Sheet (Gentle, Luxurious, Editorial) */
  .elementor-18 .elementor-element.elementor-element-d65c4781 .elementor-nav-menu--dropdown,
  .elementor-18 .elementor-nav-menu--dropdown {
    position: fixed !important;
    top: 76px !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    height: calc(100dvh - 76px) !important;
    max-height: none !important;
    background: radial-gradient(ellipse 120% 70% at 50% 20%, #1f3329 0%, #18271F 55%, #111a14 100%) !important;
    backdrop-filter: blur(24px) !important;
    -webkit-backdrop-filter: blur(24px) !important;
    border: none !important;
    border-top: 1px solid rgba(245, 241, 229, 0.08) !important;
    border-bottom: none !important;
    box-shadow: none !important;
    padding: 44px 24px 40px !important;
    z-index: 99999 !important;
    box-sizing: border-box !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    align-items: center !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;

    /* Gentle, soft, luxury transition */
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transform: translateY(-8px) scale(0.99) !important;
    transition: opacity 0.38s cubic-bezier(0.16, 1, 0.3, 1), transform 0.38s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.38s ease !important;
  }

  .elementor-18 .elementor-element.elementor-element-d65c4781 .elementor-nav-menu--dropdown.elementor-active,
  .elementor-18 .elementor-nav-menu--dropdown.elementor-active {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: all !important;
    transform: translateY(0) scale(1) !important;
  }

  .elementor-18 .elementor-element.elementor-element-d65c4781 .elementor-nav-menu--dropdown ul.elementor-nav-menu {
    list-style: none !important;
    padding: 0 !important;
    margin: auto 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 22px !important;
    width: 100% !important;
  }

  .elementor-18 .elementor-element.elementor-element-d65c4781 .elementor-nav-menu--dropdown ul.elementor-nav-menu > li {
    width: 100% !important;
    text-align: center !important;
    border: none !important;
    border-bottom: none !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
  }

  /* Main navigation links */
  .elementor-18 .elementor-element.elementor-element-d65c4781 .elementor-nav-menu--dropdown ul.elementor-nav-menu > li > a {
    font-family: 'EB Garamond', Georgia, serif !important;
    font-size: clamp(32px, 8vw, 40px) !important;
    font-weight: 400 !important;
    line-height: 1.2 !important;
    letter-spacing: -0.015em !important;
    color: rgba(245, 241, 229, 0.72) !important;
    padding: 6px 24px !important;
    display: inline-block !important;
    text-decoration: none !important;
    border: none !important;
    border-bottom: none !important;
    background: transparent !important;
    outline: none !important;
    box-shadow: none !important;
    -webkit-tap-highlight-color: transparent !important;
    transition: color 0.24s cubic-bezier(0.16, 1, 0.3, 1), transform 0.24s cubic-bezier(0.16, 1, 0.3, 1) !important;
  }

  .elementor-18 .elementor-element.elementor-element-d65c4781 .elementor-nav-menu--dropdown ul.elementor-nav-menu > li > a:hover,
  .elementor-18 .elementor-element.elementor-element-d65c4781 .elementor-nav-menu--dropdown ul.elementor-nav-menu > li > a:focus,
  .elementor-18 .elementor-element.elementor-element-d65c4781 .elementor-nav-menu--dropdown ul.elementor-nav-menu > li > a:active {
    color: #F5F1E5 !important;
    transform: translateY(-2px) scale(1.05) !important;
    background: transparent !important;
    outline: none !important;
    border: none !important;
    border-bottom: none !important;
    box-shadow: none !important;
  }

  .elementor-18 .elementor-element.elementor-element-d65c4781 .elementor-nav-menu--dropdown ul.elementor-nav-menu > li > a.elementor-item-active {
    color: #D96B52 !important;
    font-style: italic !important;
  }

  /* Clear all borders and box-shadows on any links in dropdown */
  .elementor-18 .elementor-element.elementor-element-d65c4781 .elementor-nav-menu--dropdown a,
  .elementor-18 .elementor-nav-menu--dropdown a {
    border: none !important;
    border-bottom: none !important;
    box-shadow: none !important;
    outline: none !important;
    text-decoration: none !important;
  }

  /* Editorial Footer inside Menu */
  .elementor-18 .elementor-nav-menu--dropdown .menu-editorial-footer-centered {
    width: 100% !important;
    text-align: center !important;
    padding-top: 24px !important;
    border-top: 1px solid rgba(245, 241, 229, 0.08) !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 12px !important;
  }

  .menu-editorial-footer-centered .menu-tagline {
    font-family: 'EB Garamond', Georgia, serif !important;
    font-style: italic !important;
    font-size: 14px !important;
    color: rgba(245, 241, 229, 0.45) !important;
    letter-spacing: 0.01em !important;
  }

  .menu-editorial-footer-centered .menu-socials {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 16px !important;
  }

  .menu-editorial-footer-centered .menu-socials a {
    font-family: 'Inter', system-ui, sans-serif !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    letter-spacing: 0.16em !important;
    text-transform: uppercase !important;
    color: rgba(245, 241, 229, 0.55) !important;
    text-decoration: none !important;
    padding: 0 !important;
    border: none !important;
    border-bottom: none !important;
    background: transparent !important;
    outline: none !important;
    box-shadow: none !important;
    transition: color 0.2s ease !important;
  }
  .menu-editorial-footer-centered .menu-socials a:hover {
    color: #D96B52 !important;
  }

  .menu-editorial-footer-centered .menu-social-dot {
    color: rgba(245, 241, 229, 0.2) !important;
    font-size: 12px !important;
  }

  /* Hamburger toggle icon smooth transition */
  .elementor-18 .elementor-menu-toggle {
    transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1) !important;
    outline: none !important;
    -webkit-tap-highlight-color: transparent !important;
  }
  .elementor-18 .elementor-menu-toggle.elementor-active {
    transform: rotate(90deg) !important;
  }
}

@media (max-width: 680px) {
  /* (layout đã chuyển sang Elementor) .elementor-18 .e-con.e-parent > .e-con */
  /* (đã chuyển typography sang Elementor) .elementor-18 .e-con.e-parent > .e-con > .elementor-element:nth-child(1) a */
}

@media screen and (max-width: 782px) {
  body.admin-bar .elementor-18.elementor-location-header {
    top: 46px !important;
  }
}

/* ── FOOTER RESPONSIVE (Post 69) ── */
.elementor-69 {
  background-color: #18271F !important;
  border-top: 1px solid rgba(245, 241, 229, 0.16) !important;
}
.elementor-69 > .e-con.e-parent > .e-con {
  max-width: 1440px !important;
  width: 100% !important;
  display: grid !important;
  grid-template-columns: 1fr auto 1fr !important;
}
/* (layout đã chuyển sang Elementor) .elementor-69 .e-con.e-parent .e-con */
@media (max-width: 1024px) {
  /* (layout đã chuyển sang Elementor) .elementor-69 > .e-con.e-parent */
  .elementor-69 > .e-con.e-parent > .e-con {
    grid-template-columns: 1fr !important;
    text-align: center !important;
}
  .elementor-69 .e-con.e-parent .elementor-widget {
    justify-content: center !important;
    align-items: center !important;
    text-align: center !important;
  }
  }
@media (max-width: 680px) {
  /* (layout đã chuyển sang Elementor) .elementor-69 > .e-con.e-parent */
  /* (layout đã chuyển sang Elementor) .elementor-69 > .e-con.e-parent > .e-con */
}

/* ══════════════════════════════════════════════════════════════════
   STICKY MARGINALIA TITLES (ABOUT PAGE V5)
   ══════════════════════════════════════════════════════════════════ */
.about-v2-marginalia-layout {
  display: grid !important;
  grid-template-columns: 260px 1fr !important;
}

.about-v2-marginalia-layout > .elementor-element:first-child {
  position: -webkit-sticky !important;
  position: sticky !important;
  top: 130px !important;
  align-self: flex-start !important;
  height: fit-content !important;
  z-index: 10 !important;
}

.about-v2-hero-grid {
  display: grid !important;
  grid-template-columns: 1fr 1.3fr !important;
}

.about-v2-hero-grid > .elementor-element:first-child {
  position: -webkit-sticky !important;
  position: sticky !important;
  top: 120px !important;
  align-self: flex-start !important;
  height: fit-content !important;
  z-index: 10 !important;
}

@media (max-width: 1024px) {
  .about-v2-marginalia-layout {
    grid-template-columns: 1fr !important;
}
  .about-v2-marginalia-layout > .elementor-element:first-child,
  .about-v2-hero-grid > .elementor-element:first-child {
    position: static !important;
    align-self: auto !important;
  }
}

/* ══════════════════════════════════════════════════════════════════
   DONATE SECTION (SECTION 06) EXACT PADDING & BUTTON ALIGNMENT
   ══════════════════════════════════════════════════════════════════ */
/* Ensure both boxes stretch and are flex columns */


/* Ensure widgets and inner containers have zero horizontal padding/margins so text aligns with heading */
/* (layout đã chuyển sang Elementor) .about-v2-donate-section .donate-action-box > .e-con */

/* 2-column prices grid in monthly box */
.donate-prices-grid,
.about-v2-donate-section .donate-prices-grid {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  width: 100% !important;
}


.donate-prices-grid ul.donate-action-list,
.donate-prices-grid ul {
  list-style: none !important;
  list-style-type: none !important;
  padding: 0 !important;
  margin: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
}


.donate-prices-grid a,
.donate-prices-grid li a {
  font-family: 'Inter', sans-serif !important;
  font-size: 15px !important;
  color: #20211E !important;
  line-height: 1.9 !important;
  text-decoration: none !important;
  transition: color 0.15s !important;
  white-space: nowrap !important;
}

.donate-prices-grid a:hover,
.donate-prices-grid li a:hover {
  color: #D96B52 !important;
}

/* Gap below description in once box: exactly 28px */

/* Push BOTH buttons to the bottom of their boxes (margin-top: auto) */

/* Center button text & ensure perfect pill padding */
.about-v2-donate-section .elementor-button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 11px 28px !important;
  border-radius: 100px !important;
  width: fit-content !important;
}

.about-v2-donate-section .donate-action-box--monthly .elementor-button {
  border: 1.5px solid transparent !important;
}

@media (max-width: 768px) {
  
  /* (layout đã chuyển sang Elementor) .about-v2-donate-section .donate-action-box */
}

/* ══════════════════════════════════════════════════════════════════
   GLOBAL TYPOGRAPHY & SECTION SPACING (MIRRORS DESIGN V5 EXACTLY)
   ══════════════════════════════════════════════════════════════════ */

/* Reset paragraph spacing inside text editors */
.elementor-widget-text-editor p:last-child {
  margin-bottom: 0;
}

/* 01. HERO SECTION */

/* (layout đã chuyển sang Elementor) .about-v2-hero .hero-title-italic */

/* 02. SECTION: THE NEW PAGE LÀ GÌ */

/* 03. FULL-BLEED MONUMENTAL CENTERPIECE */
.about-v2-centerpiece {
  color: #F5F1E5 !important;
  text-align: center !important;
}
/* (11/10) độ rộng 880px đã chuyển sang Elementor: container 449d975d > Bố cục > Chiều rộng */
/* (layout đã chuyển sang Elementor) .about-v2-centerpiece .centerpiece-eyebrow, .about-v2-centerpiece .elementor-widget-heading:first-child */
/* (đã chuyển typography sang Elementor) .about-v2-centerpiece .centerpiece-eyebrow .elementor-heading-title, .about-v2-centerpiece .elementor-widget-heading:first-child .elementor-heading-title */
/* (layout đã chuyển sang Elementor) .about-v2-centerpiece .centerpiece-question, .about-v2-centerpiece .elementor-widget-heading:nth-child(2) */
.about-v2-centerpiece .centerpiece-question .elementor-heading-title,
.about-v2-centerpiece h2.elementor-heading-title {
  margin-bottom: 40px !important;
}
/* (layout đã chuyển sang Elementor) .about-v2-centerpiece .centerpiece-sub-wrap, .about-v2-centerpiece .elementor-widget-text-editor:nth-child(3) */
/* (11/10) độ rộng 680px đã chuyển sang Elementor: widget 5db98b9d > Nâng cao > Chiều rộng tuỳ chỉnh */
.about-v2-centerpiece .elementor-widget-text-editor:nth-child(4) p {
  margin-bottom: 18px !important;
}
.about-v2-centerpiece .elementor-widget-text-editor:nth-child(4) p:last-child {
  margin-bottom: 0 !important;
}
@media (max-width: 768px) {
  /* (layout đã chuyển sang Elementor) .about-v2-centerpiece */
}

/* 04. BOOK SPREAD CARD */

/* 05. AUTHOR BIO */

/* (layout đã chuyển sang Elementor) .about-v2-section .elementor-widget-heading:has(h3) */

/* 06. DONATE SECTION */
/* (layout đã chuyển sang Elementor) .about-v2-donate-section .e-con:first-child .elementor-widget:first-child */

/* (layout đã chuyển sang Elementor) .about-v2-donate-section .donate-action-heading */

/* ────────────────────────────────────────────

   PAGE: VIẾT SALES LANDING (viet.html)
───────────────────────────────────────────── */

/* Hero Section: Full Illustrated Background */
.viet-hero-illustrated {
  position: relative;
  display: flex;
  text-align: center;
  background: var(--warm-ivory);
  overflow: hidden;
  border-bottom: 1px solid var(--border-divider);
}

.viet-hero-illustrated-content {
  position: relative;
  z-index: 10;
  max-width: 900px;
  display: flex;
}

.viet-hero-illustrated-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 6px 18px;
  background: rgba(245, 241, 229, 0.88);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(184, 92, 56, 0.28);
  border-radius: 100px;
  margin-bottom: 24px;
  box-shadow: 0 4px 16px rgba(24, 39, 31, 0.04);
}
.badge-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--terracotta);
}
.badge-text {
  font-family: var(--font-sans);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--terracotta);
}

/* (layout đã chuyển sang Elementor) .viet-hero-illustrated-title */

.viet-hero-illustrated-lead {
  max-width: 580px;
  margin-bottom: 36px;
}


/* Shared Container for Viet Page */

/* (layout đã chuyển sang Elementor) .viet-section-title */

.viet-section-desc { max-width: 820px;
}

/* Section 01: Context (Centered Elegant Editorial Block) */
.viet-context-single-block {
  max-width: 860px; text-align: center;
}
.context-pin-indicator {
  display: flex; flex-direction: column; align-items: center; margin: 0 auto 28px;
}
.context-pin-dot {
  width: 11px; height: 11px; border-radius: 50%;
  background: var(--terracotta);
  box-shadow: 0 0 0 4px rgba(217, 107, 82, 0.22);
}
.context-pin-line {
  width: 1px; height: 48px;
  background: linear-gradient(to bottom, var(--terracotta) 0%, rgba(216, 212, 200, 0.8) 100%);
}
.viet-prose-block {
  display: flex; flex-direction: column; gap: 20px;
  text-align: left; max-width: 800px;
}

.viet-context-closing-text strong {
  color: var(--deep-forest); font-weight: 600;
}

/* Section 02: Meaning & 4 Layers (Title Top, 2 Columns Below: Content Left, List Right) */

.viet-meaning-2col-grid {
  display: grid; grid-template-columns: 1fr 1.05fr;
}
.meaning-col-text {
  display: flex; flex-direction: column; gap: 20px;
}
.meaning-col-text .viet-section-desc { margin: 0;
}
.viet-layers-lead-text { margin: 0;
}
.viet-meaning-footer-note {
  margin-top: 10px;
}

/* Unboxed Editorial List (Aligned with Left Column Content) */
.meaning-col-list {
  display: flex;
  border-top: 1px solid var(--border-divider);
}
.viet-layer-list-item { background: none;
  border: none; border-bottom: 1px solid var(--border-divider);
  border-radius: 0; box-shadow: none;
  display: flex;
  transition: transform 0.25s var(--ease), border-color 0.25s var(--ease);
}
.viet-layer-list-item:hover {
  transform: translateX(8px);
  border-bottom-color: var(--terracotta);
}
.viet-layer-list-item .layer-num { flex-shrink: 0;
}
.viet-layer-list-item .layer-core-text { margin: 0;
}

/* Section 03: Modes (Style 2: Staggered Editorial Index - 3 Top, 2 Bottom) */

.viet-modes-staggered-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
}
.viet-modes-staggered-grid .mode-editorial-item:nth-child(1),
.viet-modes-staggered-grid .mode-editorial-item:nth-child(2),
.viet-modes-staggered-grid .mode-editorial-item:nth-child(3) {
  grid-column: span 2;
}
.viet-modes-staggered-grid .mode-editorial-item:nth-child(4),
.viet-modes-staggered-grid .mode-editorial-item:nth-child(5) {
  grid-column: span 3;
}

.mode-editorial-item {
  position: relative;
  background: var(--soft-ivory);
  border: 1px solid rgba(216, 212, 200, 0.7);
  border-radius: 6px;
  display: flex;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(24, 39, 31, 0.03);
  transition: transform 0.25s var(--ease), border-color 0.25s var(--ease), box-shadow 0.25s var(--ease);
}
.mode-editorial-item:hover {
  transform: translateY(-5px);
  border-color: var(--terracotta);
  box-shadow: 0 16px 36px rgba(24, 39, 31, 0.08);
}
.mode-editorial-item:hover .mode-watermark-num {
  color: rgba(217, 107, 82, 0.28);
  transform: scale(1.08);
}
.mode-title-row {
  display: flex;
  position: relative;
  z-index: 2;
}
.mode-icon-wrap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 8px;
  background: rgba(217, 107, 82, 0.1);
  color: var(--terracotta);
  flex-shrink: 0;
  transition: background 0.25s var(--ease), transform 0.25s var(--ease), color 0.25s var(--ease);
}
.mode-editorial-item:hover .mode-icon-wrap {
  background: var(--terracotta);
  color: #FFFFFF;
  transform: translateY(-2px);
}
/* (layout đã chuyển sang Elementor) .mode-editorial-title */
.mode-editorial-desc {
  position: relative;
  z-index: 2;
}

.viet-modes-closing-text {
  margin: 0;
  white-space: nowrap;
}

/* Section 04: 6 Lenses (Deep Forest Dark) */
.viet-lenses-section { background: var(--deep-forest); color: var(--text-on-dark); }

/* (layout đã chuyển sang Elementor) .viet-lenses-title */
.viet-lenses-intro { max-width: 860px;
  display: flex; flex-direction: column; gap: 12px;
}
.viet-lenses-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
}
.lens-box { background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--border-on-dark); border-radius: 8px;
  display: flex;
  transition: transform 0.25s var(--ease), border-color 0.25s var(--ease), background 0.25s var(--ease);
}
.lens-box:hover {
  transform: translateY(-4px); border-color: rgba(217, 107, 82, 0.7);
  background: rgba(255, 255, 255, 0.06);
}
/* (đã chuyển typography sang Elementor) .lens-num */

/* (layout đã chuyển sang Elementor) .lens-heading */
/* (đã chuyển typography sang Elementor) .lens-body */
.viet-lenses-note {
  text-align: center; padding: 28px 32px; border-top: 1px solid var(--border-on-dark);
}

/* Section 05: Visual Timeline & Emotion Curve (Hopson Infographic & Unboxed 2-Col Timeline) */

.visual-feature-single-col {
  display: flex;
  width: 85%;
  max-width: 1100px;
}

/* Feature 1: Hopson 7-Phase Transition Curve Infographic (85% Container) */

.centered-feature-text {
  max-width: 860px;
  text-align: center;
}

/* Common Text Block for Single Column Features */
/* (layout đã chuyển sang Elementor) .visual-feature-text-block .feature-title */
.visual-feature-text-block .feature-desc {
  margin: 0;
}
.visual-feature-text-block .feature-plain-note {
  margin-top: 6px;
}

/* Feature 2: Bản đồ các ngã rẽ (1. Tiêu đề ở giữa - 2. 2 Cột content trái / timeline phải - 3. Button ở giữa) */
.timeline-feature-wrap {
  width: 85%;
  max-width: 1100px;
}

.viet-timeline-feature-2col {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  background: none;
  border: none;
  box-shadow: none;
  width: 100%;
}

.timeline-v-item {
  position: relative;
  z-index: 2;
  display: flex;
}

.timeline-text-col {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.timeline-text-col .feature-plain-note {
  margin-top: 6px;
}

/* Section 06: Foundation & Fit (Combined Layout: Centered Grand Heading + 2-Col Foundation & Fit Checklist) */
.viet-foundation-fit-section {
  position: relative;
  overflow: hidden;
  background: var(--soft-ivory);
}

.foundation-fit-2col-grid {
  display: grid;
  grid-template-columns: 1fr 1.08fr;
  position: relative;
  z-index: 2;
}
.foundation-col-info {
  display: flex;
  flex-direction: column;
}
.foundation-disclaimer-wrap {
  padding-top: 24px;
  border-top: 1px solid rgba(216, 212, 200, 0.9);
}
/* (layout đã chuyển sang Elementor) .fit-sub-heading */
.viet-fit-checklist {
  display: flex;
  border-top: 1px solid var(--border-divider);
}
.fit-check-item {
  display: flex;
  border-bottom: 1px solid var(--border-divider);
  font-size: 16.5px;
  line-height: 1.7;
  color: var(--ink);
}

.nowrap-line {
  white-space: nowrap;
}

/* Section 07: Pricing & Benefits */
.viet-pricing-section { background: var(--deep-forest); color: var(--text-on-dark); }
.pricing-content-grid {
  display: grid; grid-template-columns: 1.35fr 1fr;
}
/* (layout đã chuyển sang Elementor) .pricing-main-heading */
.pricing-features-list {
  list-style: none; display: flex;
}


/* Pricing Ticket Card */
.pricing-ticket-card {
  background: var(--soft-ivory); border: 1px solid var(--border-divider); border-radius: 10px; color: var(--ink); text-align: center;
  box-shadow: 0 20px 48px rgba(0, 0, 0, 0.35);
}
/* (layout đã chuyển sang Elementor) .ticket-title */
.ticket-sub { margin-bottom: 32px;
}
.ticket-price-wrap { border-top: 1px solid var(--border-divider); border-bottom: 1px solid var(--border-divider);
}
/* (đã chuyển typography sang Elementor) .price-amount */
.price-amount .currency { font-size: 22px; font-weight: 500; color: var(--secondary-text); }

/* Section 08: FAQ Accordion (Divider Line Editorial Style) */

.viet-faq-accordion {
  max-width: 880px; margin: 0 auto; display: flex; flex-direction: column;
  border-top: 1px solid var(--border-divider);
}

/* Section 10: Closing Section (Deep Forest Dark & Large Prominent Price) */
.viet-closing-section {
  background: var(--deep-forest); color: var(--text-on-dark);
}

/* (layout đã chuyển sang Elementor) .viet-closing-title */
.viet-closing-prose { display: flex; flex-direction: column; gap: 16px;
}
/* (đã chuyển typography sang Elementor) .closing-plain-line */

/* (đã chuyển typography sang Elementor) .closing-price-amount */
.closing-currency {
  font-size: 0.45em; font-family: var(--font-sans); font-weight: 600; color: var(--terracotta);
  margin-left: 4px; vertical-align: super;
}

@media (max-width: 1024px) {
  /* (layout đã chuyển sang Elementor) .viet-closing-section */
  .viet-meaning-2col-grid { grid-template-columns: 1fr;
}
  .foundation-fit-2col-grid,
.pricing-content-grid { grid-template-columns: 1fr;
}
  
  
        .viet-lenses-grid { grid-template-columns: repeat(2, 1fr); }
    .viet-timeline-feature-2col { grid-template-columns: 1fr;
}
  .viet-modes-closing-text { white-space: normal; }
}

@media (max-width: 680px) {
  /* (layout đã chuyển sang Elementor) .viet-closing-section */
  .viet-modes-staggered-grid, .viet-lenses-grid { grid-template-columns: 1fr; }
  
  /* (layout đã chuyển sang Elementor) .map-header-bar */
  /* (layout đã chuyển sang Elementor) .timeline-v-item */
  /* (layout đã chuyển sang Elementor) .pricing-ticket-card */
}

/* ────────────────────────────────────────────
   ELEMENTOR NATIVE ADAPTER FOR VIẾT PAGE (Post 26)
───────────────────────────────────────────── */

/* 01. Hero Section Multiple Background with Gradient Overlay */
body.page-id-26 .viet-hero-illustrated,
.elementor-26 .elementor-element.viet-hero-illustrated,
.elementor-26 .elementor-element.elementor-element-abcfbdd1,
.viet-hero-illustrated,
.elementor-element.viet-hero-illustrated {
  position: relative !important;
  background-image: 
    linear-gradient(
      180deg,
      rgba(245, 241, 229, 0.94) 0%,
      rgba(245, 241, 229, 0.82) 22%,
      rgba(245, 241, 229, 0.40) 48%,
      rgba(245, 241, 229, 0.12) 70%,
      rgba(245, 241, 229, 0.88) 100%
    ),
    url('https://thenewpage2.topgiaodien.com/wp-content/uploads/2026/10/tnp-viet-hero.webp') !important;
  background-position: center bottom !important;
  background-size: cover !important;
  background-repeat: no-repeat !important;
  overflow: hidden !important;
  border-bottom: 1px solid #D8D4C8 !important;
}

@media (max-width: 1024px) {
  body.page-id-26 .viet-hero-illustrated,
.elementor-26 .elementor-element.viet-hero-illustrated,
.elementor-26 .elementor-element.elementor-element-abcfbdd1,
.viet-hero-illustrated,
.elementor-element.viet-hero-illustrated {
    background-image: 
      linear-gradient(
        180deg,
        rgba(245, 241, 229, 0.96) 0%,
        rgba(245, 241, 229, 0.90) 28%,
        rgba(245, 241, 229, 0.70) 52%,
        rgba(245, 241, 229, 0.30) 75%,
        rgba(245, 241, 229, 0.92) 100%
      ),
      url('https://thenewpage2.topgiaodien.com/wp-content/uploads/2026/10/tnp-viet-hero.webp') !important;
    background-position: center bottom !important;
}
}

@media (max-width: 680px) {
  body.page-id-26 .viet-hero-illustrated,
.elementor-26 .elementor-element.viet-hero-illustrated,
.elementor-26 .elementor-element.elementor-element-abcfbdd1,
.viet-hero-illustrated,
.elementor-element.viet-hero-illustrated {
    background-image: 
      linear-gradient(
        180deg,
        rgba(245, 241, 229, 0.98) 0%,
        rgba(245, 241, 229, 0.95) 32%,
        rgba(245, 241, 229, 0.88) 55%,
        rgba(245, 241, 229, 0.50) 78%,
        rgba(245, 241, 229, 0.96) 100%
      ),
      url('https://thenewpage2.topgiaodien.com/wp-content/uploads/2026/10/tnp-viet-hero.webp') !important;
    background-position: center bottom !important;
    background-size: cover !important;
    background-repeat: no-repeat !important;
}

  /* (layout đã chuyển sang Elementor) .viet-hero-illustrated-title */
.elementor-element.viet-hero-illustrated-title h1,
.elementor-26 .elementor-element.viet-hero-illustrated-title h1 {
    margin-bottom: 16px !important;
}

  .viet-hero-illustrated-lead,
.elementor-element.viet-hero-illustrated-lead-wrap p,
.elementor-26 .viet-hero-illustrated-lead {
    max-width: 300px !important;
    margin: 0 auto 24px !important;
    text-wrap: balance !important;
}

  .viet-hero-illustrated-actions,
.elementor-26 .elementor-element.viet-hero-illustrated-actions {
    display: flex !important;
    width: 100% !important;
    max-width: 300px !important;
}

  
  .viet-hero-illustrated-actions .elementor-button {
    width: 100% !important;
    min-height: 48px !important;
    height: 48px !important;
    padding: 0 20px !important;
    border-radius: 999px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
}
}

/* 04. Section Modes Staggered Grid (Row 1: 3 cards, Row 2: 2 cards) */

@media (max-width: 1024px) {
  .viet-modes-staggered-grid {
    grid-template-columns: repeat(2, 1fr) !important;
}
  .viet-modes-staggered-grid .mode-editorial-item:nth-child(1),
  .viet-modes-staggered-grid .mode-editorial-item:nth-child(2),
  .viet-modes-staggered-grid .mode-editorial-item:nth-child(3),
  .viet-modes-staggered-grid .mode-editorial-item:nth-child(4) {
    grid-column: auto !important;
  }
  .viet-modes-staggered-grid .mode-editorial-item:nth-child(5) {
    grid-column: span 2 !important;
  }
}

@media (max-width: 680px) {
  .viet-modes-staggered-grid {
    grid-template-columns: 1fr !important;
  }
  .viet-modes-staggered-grid .mode-editorial-item:nth-child(5) {
    grid-column: auto !important;
  }
}

.mode-editorial-item:hover {
  transform: translateY(-5px) !important;
  border-color: #D96B52 !important;
  box-shadow: 0 16px 36px rgba(24, 39, 31, 0.08) !important;
}
.mode-watermark-num,
.mode-editorial-item .mode-watermark-num {
  position: absolute !important;
  top: 14px !important;
  right: 22px !important;
  pointer-events: none !important;
  transition: color 0.25s ease, transform 0.25s ease !important;
}
.mode-editorial-item:hover .mode-watermark-num {
  color: rgba(217, 107, 82, 0.32) !important;
  transform: scale(1.08) !important;
}

/* 06. Transition Map Image display */
.transition-map-image-wrap {
  width: 100% !important;
  border-radius: 4px !important;
  overflow: hidden !important;
  box-shadow: 0 4px 20px rgba(24, 39, 31, 0.04) !important;
}

.transition-map-image-wrap img {
  width: 100% !important;
  height: auto !important;
  display: block !important;
  border-radius: 4px !important;
  margin: 0 !important;
}

/* 09. FAQ Accordion Left-Aligned & Styled */

.viet-faq-accordion .elementor-tab-title {
  padding: 24px 0 !important;
  background: transparent !important;
  border: none !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: space-between !important;
  text-align: left !important;
  width: 100% !important;
  cursor: pointer !important;
}
.viet-faq-accordion .elementor-tab-title a {
  font-family: 'EB Garamond', Georgia, serif !important;
  font-size: clamp(20px, 2.3vw, 24px) !important;
  font-weight: 500 !important;
  color: #18271F !important;
  line-height: 1.35 !important;
  text-align: left !important;
  display: block !important;
  flex: 1 !important;
}

.viet-faq-accordion .elementor-tab-content {
  padding: 0 0 24px 0 !important;
  border: none !important;
  background: transparent !important;
  text-align: left !important;
}
.viet-faq-accordion .elementor-tab-content p {
  font-family: 'Inter', system-ui, -apple-system, sans-serif !important;
  font-size: 16px !important;
  line-height: 1.82 !important;
  color: #20211E !important;
  margin: 0 !important;
  text-align: left !important;
}

/* ─── VIET PAGE (ID 26) BUTTON STYLING OVERRIDES ─── */

.page-id-26 .elementor-widget-button .elementor-button,
.page-id-26 .elementor-widget-button a.elementor-button {
  border-radius: 100px !important;
  -webkit-border-radius: 100px !important;
}

/* ─── VIET PAGE (ID 26) CONTENT SPACING RESET (MATCH DESIGN V5 1-1) ─── */
.page-id-26 .viet-prose-block p,
.page-id-26 .meaning-col-text p,
.page-id-26 .viet-lenses-intro p,
.page-id-26 .viet-closing-prose p {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}
/* (layout đã chuyển sang Elementor) .page-id-26 .pricing-features-item */

.page-id-26 .viet-lenses-intro .lenses-big-q {
  margin-top: 4px !important;
  margin-bottom: 4px !important;
}

.page-id-26 .meaning-col-text .viet-meaning-footer-note {
  margin-top: 10px !important;
  margin-bottom: 0 !important;
}

/* (layout đã chuyển sang Elementor) .page-id-26 .visual-feature-text-block */

/* (layout đã chuyển sang Elementor) .page-id-26 .pricing-features-item */


/* (layout đã chuyển sang Elementor) .page-id-26 .closing-price-amount */

.page-id-26 .viet-layer-list-item .layer-num {
  width: auto !important;
}


.page-id-26 .viet-closing-section .context-pin-dot {
  width: 9px !important;
  height: 9px !important;
  border-radius: 50% !important;
  background: #D96B52 !important;
  box-shadow: 0 0 0 3px rgba(217, 107, 82, 0.25) !important;
  margin: 0 auto !important;
  display: block !important;
}

.page-id-26 .viet-closing-section .context-pin-line {
  width: 1px !important;
  height: 48px !important;
  background: linear-gradient(to bottom, #D96B52 0%, rgba(245, 241, 229, 0.15) 100%) !important;
  margin: 0 auto !important;
  display: block !important;
}

/* ────────────────────────────────────────────
   PAGE: EDITORIAL LIBRARY (doc.html) & SINGLE ESSAY (bai-viet.html)
───────────────────────────────────────────── */
/* (2026-10-03) Đã bỏ khối :root thứ hai ghi đè bảng màu (#C85A32, #5A6A60...). Bảng màu gốc ở :root đầu file. */

.editorial-library-main {
  padding: 150px 72px 108px;
  max-width: 1440px;
  margin: 0 auto;
  box-sizing: border-box;
}

.library-hero {
  padding: 40px 0 64px;
  text-align: center;
}

.library-hero-inner {
  max-width: 800px;
  margin: 0 auto;
}


.library-hero-prose {
  display: flex;
  flex-direction: column;
  gap: 18px;
  text-align: left;
  max-width: 700px;
  margin: 0 auto;
}

.library-hero-prose p {
  font-family: var(--font-sans);
  font-size: 17px;
  line-height: 1.85;
  color: var(--ink);
  margin: 0;
}

.library-search-section {
  padding-bottom: 64px;
  margin-bottom: 72px;
  border-bottom: 1px solid var(--border-divider);
}


.search-input {
  flex: 1;
  height: 52px;
  padding: 0 20px;
  font-family: var(--font-sans);
  font-size: 14.5px;
  background: var(--soft-ivory);
  border: 1px solid var(--border-divider);
  border-radius: 6px;
  color: var(--ink);
  box-sizing: border-box;
}

.search-input:focus {
  outline: none;
  border-color: var(--deep-forest);
}

.search-btn {
  height: 52px;
  padding: 0 26px;
  background: var(--deep-forest);
  color: var(--warm-ivory);
  font-weight: 600;
  border-radius: 6px;
  font-size: 14px;
  transition: background 0.2s;
  cursor: pointer;
  border: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.search-btn:hover {
  background: var(--terracotta);
}

.library-categories-section {
  padding-top: 12px;
}

.categories-grid-2x3 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px 88px;
}

.category-block {
  border-top: 1.5px solid var(--deep-forest);
  padding-top: 24px;
  transition: opacity 0.25s ease;
}

.category-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 24px;
}


.category-count {
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 600;
  color: var(--secondary-text);
}

.category-article-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: 24px;
  padding: 0;
  margin-left: 0;
}


.category-article-list li a {
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color 0.2s, border-color 0.2s;
  display: inline-block;
}

.category-article-list li a:hover {
  color: var(--terracotta);
  border-color: var(--terracotta);
}

.category-more-link {
  font-family: var(--font-sans);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--terracotta);
  text-decoration: none;
  transition: opacity 0.2s;
  display: inline-block;
}

.category-more-link:hover {
  opacity: 0.8;
}

/* ── CONCEPTS ACCORDION SECTION (doc.html) ── */
.concepts-section {
  padding-top: 96px;
  margin-top: 96px;
  border-top: 1px solid var(--border-divider);
}

.concepts-accordion-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px 48px;
  align-items: start;
}

.concepts-col {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.concept-accordion-item {
  background: rgba(251, 248, 239, 0.5);
  border: 1px solid rgba(24, 39, 31, 0.08);
  border-radius: 4px;
  overflow: hidden;
  box-shadow: none;
  transition: background 0.2s var(--ease), border-color 0.2s var(--ease);
}

.concept-accordion-item:hover:not([open]) {
  background: rgba(255, 255, 255, 0.55);
  border-color: rgba(24, 39, 31, 0.16);
}

.concept-accordion-item[open] {
  border: 1px solid var(--deep-forest);
  background: #FFFFFF;
  border-radius: 4px;
  box-shadow: none;
}

.concept-summary {
  padding: 18px 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  user-select: none;
  list-style: none;
  transition: background 0.15s;
}

.concept-summary::-webkit-details-marker {
  display: none;
}

.concept-name {
  font-family: var(--font-serif);
  font-size: 20px;
  font-weight: 500;
  color: var(--deep-forest);
  letter-spacing: -0.01em;
}

.concept-icon {
  font-size: 22px;
  line-height: 1;
  color: var(--terracotta);
  transition: transform 0.25s var(--ease);
  font-weight: 300;
}

.concept-accordion-item[open] .concept-icon {
  transform: rotate(45deg);
}

.concept-body {
  padding: 0 22px 22px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.concept-body p {
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 1.78;
  color: var(--ink);
  margin: 0;
}

/* ────────────────────────────────────────────
   PAGE: SINGLE ESSAY / ARTICLE (bai-viet.html)
───────────────────────────────────────────── */
.essay-main {
  padding: 160px 72px 108px;
  box-sizing: border-box;
}

.essay-container {
  max-width: 820px;
  margin: 0 auto;
}

.essay-header {
  text-align: center;
  margin-bottom: 48px;
}

.essay-category-tag {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--terracotta);
  margin-bottom: 18px;
}

.essay-title {
  font-family: var(--font-serif);
  font-size: clamp(38px, 4.8vw, 60px);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--deep-forest);
  margin: 0;
}

.essay-hero-figure {
  margin: 0 0 48px;
}

.essay-hero-img {
  width: 100%;
  max-height: 480px;
  object-fit: cover;
  border-radius: 4px;
  display: block;
}


.essay-caption {
  margin-top: 10px;
  font-size: 12.5px;
  color: var(--secondary-text);
  font-style: italic;
  font-family: var(--font-sans);
}

.essay-body {
  font-family: var(--font-sans);
  font-size: 18px;
  line-height: 1.82;
  color: var(--ink);
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.essay-body p {
  margin: 0;
}

.essay-footer-nav {
  margin: 56px 0 40px;
}

.back-to-library-link {
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--deep-forest);
  border-bottom: 1px solid var(--deep-forest);
  padding-bottom: 2px;
  text-decoration: none;
  transition: color 0.2s, border-color 0.2s;
}

.back-to-library-link:hover {
  color: var(--terracotta);
  border-color: var(--terracotta);
}

.essay-bottom-section {
  border-top: 1px solid var(--border-divider);
  padding: 40px 0;
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 52px;
  align-items: start;
}

.essay-related-col {
  min-width: 0;
}

.related-label {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--secondary-text);
  margin-bottom: 16px;
}

.related-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.related-item-link {
  font-family: var(--font-serif);
  font-size: 17.5px;
  line-height: 1.45;
  color: var(--deep-forest);
  text-decoration: none;
  transition: color 0.2s;
}

.related-item-link:hover {
  color: var(--terracotta);
}

/* Right column: Donate Widget in Essay */
.essay-donate-col {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.essay-donate-intro-block {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.essay-donate-main-title {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--deep-forest);
  margin: 0;
}

.essay-donate-intro {
  font-family: var(--font-sans);
  font-size: 13.5px;
  line-height: 1.65;
  color: var(--secondary-text);
  margin: 0;
}

.essay-donate-block {
  display: flex;
  flex-direction: column;
}

.essay-donate-heading {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--deep-forest);
  margin-bottom: 10px;
  margin-top: 0;
}

.donate-m-list--2col {
  display: grid !important;
  grid-template-columns: 1fr 1fr;
  gap: 6px 14px;
  margin-bottom: 2px;
  list-style: none;
  padding: 0;
}

.donate-m-list--2col li a {
  font-family: var(--font-sans);
  font-size: 13.5px !important;
  line-height: 1.6 !important;
  white-space: nowrap;
  color: var(--deep-forest);
  text-decoration: none;
  transition: color 0.2s;
}

.donate-m-list--2col li a:hover {
  color: var(--terracotta);
}

.essay-donate-rule {
  height: 1px;
  background: var(--border-divider);
  width: 100%;
}

.essay-donate-col .donate-m-btn {
  margin-top: 6px;
  padding: 9px 24px;
  font-size: 11.5px;
  letter-spacing: 0.08em;
  text-align: center;
  text-decoration: none;
  background: var(--deep-forest);
  color: #fff;
  border-radius: 4px;
  display: inline-block;
  font-weight: 600;
  transition: background 0.2s;
}

.essay-donate-col .donate-m-btn:hover {
  background: var(--terracotta);
}

.essay-donate-col .donate-m-cancel {
  font-family: var(--font-sans);
  font-size: 12px;
  color: var(--secondary-text);
  line-height: 1.55;
  margin: 0;
}

.essay-donate-col .donate-m-cancel-link {
  color: var(--terracotta);
  font-weight: 500;
  text-decoration: none;
}

.essay-share-block {
  border-top: 1px solid var(--border-divider);
  padding-top: 24px;
  display: flex;
  gap: 14px;
  font-size: 13px;
  color: var(--secondary-text);
  font-family: var(--font-sans);
  align-items: center;
}


.share-btn-text:hover {
  color: var(--terracotta);
}

/* ── RESPONSIVE MEDIA QUERIES FOR DOC & ESSAY ── */
@media (max-width: 1024px) {
  .categories-grid-2x3 {
    grid-template-columns: 1fr;
    gap: 48px;
  }
  .concepts-accordion-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .editorial-library-main, .essay-main {
    padding: 120px 28px 72px;
  }
}

@media (max-width: 680px) {
  .editorial-library-main, .essay-main {
    padding: 110px 20px 60px;
  }
  .essay-bottom-section {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .search-form {
    flex-direction: column;
  }
  .category-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }
}

/* ── SECTION LABELS & EYEBROWS (TERRACOTTA #D96B52) ── */
.section-label {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  margin-bottom: 28px !important;
}


.section-label.dark .label-text,
.section-label .label-text.dark,
.label-text.dark {
  color: #D96B52 !important;
  font-family: var(--font-sans), 'Inter', sans-serif !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.35em !important;
  text-transform: uppercase !important;
  margin: 0 !important;
}

.library-eyebrow {
  color: #D96B52 !important;
  font-family: var(--font-sans), 'Inter', sans-serif !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.28em !important;
  text-transform: uppercase !important;
  margin-bottom: 20px !important;
}

.library-title {
  font-family: var(--font-serif), 'EB Garamond', Georgia, serif !important;
  font-size: clamp(38px, 5vw, 64px) !important;
  font-weight: 500 !important;
  letter-spacing: -0.02em !important;
  color: #18271F !important;
  line-height: 1.15 !important;
  margin-bottom: 32px !important;
}

.category-name {
  font-family: var(--font-serif), 'EB Garamond', Georgia, serif !important;
  font-size: 28px !important;
  font-weight: 600 !important;
  letter-spacing: -0.01em !important;
  color: #18271F !important;
  margin: 0 !important;
}

/* ── ESSAY ORANGE ACCENTS ── */
.back-to-library-link {
  color: #D96B52 !important;
  border-bottom: 1px solid #D96B52 !important;
}
.back-to-library-link:hover {
  color: #C25B44 !important;
  border-bottom-color: #C25B44 !important;
}

/* ══════════════════════════════════════════════════════════════════
   HOMEPAGE (POST 23) & GLOBAL HEADER/FOOTER RESPONSIVE OVERRIDES
   High-specificity selectors (html body ...) to override Elementor custom CSS
   ══════════════════════════════════════════════════════════════════ */

/* Global overflow containment */
html, body {
  overflow-x: clip !important;
  max-width: 100vw !important;
  width: 100% !important;
}

html body .elementor-23,
html body .elementor-23 .e-con,
html body .elementor-18,
html body .elementor-18 .e-con,
html body .elementor-69,
html body .elementor-69 .e-con {
  max-width: 100% !important;
  box-sizing: border-box !important;
}

/* ─────────────────────────────────────────────────────────────
   TABLET & MOBILE COMBINED (max-width: 1024px)
   ───────────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
  /* ── HEADER 18 (Fixed Top) ── */
  html body .elementor-18 .elementor-element.elementor-element-6f45dc93 {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
    z-index: 9999 !important;
}
  html body .elementor-18 .elementor-element.elementor-element-fcbb55ee {
    display: flex !important;
    width: 100% !important;
    max-width: 100% !important;
}
    /* (đã chuyển typography sang Elementor) html body .elementor-18 .elementor-element.elementor-element-cc727f6d a */
      html body .elementor-18 .elementor-menu-toggle {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 40px !important;
    height: 40px !important;
    cursor: pointer !important;
    background: transparent !important;
  }
    /* (2026-10-03) Bỏ ẩn nút Substack trên tablet/mobile — theo thiết kế V5 nút vẫn hiển thị cạnh nút menu. Ẩn/hiện chỉnh trong Elementor > Container > Advanced > Responsive. */

  /* ── SECTION 00: HERO ── */
  /* (layout đã chuyển sang Elementor) html body .elementor-23 .elementor-element.elementor-element-bbd3c4a5 */
  /* (layout đã chuyển sang Elementor) html body .elementor-23 .elementor-element.elementor-element-c977e650 */
    /* (đã chuyển typography sang Elementor) html body .elementor-23 .elementor-element.elementor-element-8b4bf13e */

  /* ── SECTION 01: VỀ THE NEW PAGE ── */
  html body .elementor-23 .elementor-element.elementor-element-cbdf3572::before,
  html body .elementor-23 .elementor-element.elementor-element-cbdf3572::after {
    display: none !important;
  }
  html body .elementor-23 .elementor-element.elementor-element-c0f7468a {
    display: flex !important;
    grid-template-columns: 1fr !important;
    width: 100% !important;
}
  html body .elementor-23 .elementor-element.elementor-element-5e21e785 {
    border-right: none !important;
    border-bottom: 1px solid #D8D4C8 !important;
    width: 100% !important;
    box-sizing: border-box !important;
}
  /* (đã chuyển typography sang Elementor) html body .elementor-23 .elementor-element.elementor-element-3e2cc4ba .elementor-heading-title */
    html body .elementor-23 .elementor-element.elementor-element-7d5611b6 {
    max-width: 100% !important;
  }

  /* ── SECTION 02: KHÁM PHÁ ── */
  html body .elementor-23 .elementor-element.elementor-element-c0876ca8 {
    display: flex !important;
    grid-template-columns: 1fr !important;
    width: 100% !important;
    box-sizing: border-box !important;
}
  html body .elementor-23 .elementor-element.elementor-element-1e88580e {
    border-right: none !important;
    border-bottom: 1px solid #D8D4C8 !important;
    width: 100% !important;
}
    /* (layout đã chuyển sang Elementor) html body .elementor-23 .elementor-element.elementor-element-47d7642a, html body .elementor-23 .elementor-element.elementor-element-8d15ec4d */
  /* (đã chuyển typography sang Elementor) html body .elementor-23 .elementor-element.elementor-element-da0d7d96 .elementor-heading-title, html body .elementor-23 .elementor-element.elementor-element-2c5b0803 .elementor-heading-title */
    
  /* ── SECTION 03: ĐỌC ── */
  html body .elementor-23 .elementor-element.elementor-element-f99e08f2 {
    display: flex !important;
    grid-template-columns: 1fr !important;
    width: 100% !important;
    box-sizing: border-box !important;
}
  /* (đã chuyển typography sang Elementor) html body .elementor-23 .elementor-element.elementor-element-c8c33c28 .elementor-heading-title */
  
  /* ── SECTION 04: SUY NGHĨ ── */
    /* (đã chuyển typography sang Elementor) html body .elementor-23 .elementor-element.elementor-element-965f2e46 .elementor-heading-title */

  /* ── SECTION 05: VIẾT ── */
    /* (đã chuyển typography sang Elementor) html body .elementor-23 .elementor-element.elementor-element-98314710 .elementor-heading-title */
  html body .elementor-23 .elementor-element.elementor-element-80fcef50 {
    display: flex !important;
    grid-template-columns: 1fr !important;
    width: 100% !important;
}
      
  /* ── SECTION 06: MỖI TUẦN MỘT LẦN ── */
    /* (đã chuyển typography sang Elementor) html body .elementor-23 .elementor-element.elementor-element-d48163a2 .elementor-heading-title */

  /* ── FOOTER 69 ── */
        /* (layout đã chuyển sang Elementor) html body .elementor-69 .elementor-element.elementor-element-4696bcda */
  /* (layout đã chuyển sang Elementor) html body .elementor-69 .elementor-element.elementor-element-605b9f50 */
}

/* ─────────────────────────────────────────────────────────────
   GLOBAL & TABLET TO MOBILE RESPONSIVE FIXES (max-width: 1024px & 820px)
   ───────────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
  /* Prevent nowrap text from overflowing screens */
  .nowrap-line,
  span.nowrap-line {
    white-space: normal !important;
  }
}

@media (max-width: 820px) {
  /* ── SECTION 02: 1-COLUMN STACK & PERFECT CARDS (NO OVERFLOW) ── */
  html body .elementor-23 .elementor-element.elementor-element-c0876ca8 {
    display: flex !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

  
  
  /* (layout đã chuyển sang Elementor) html body .elementor-23 .elementor-element.elementor-element-47d7642a, html body .elementor-23 .elementor-element.elementor-element-8d15ec4d */

  /* Left 4-item list: height auto */
  
  html body .elementor-23 .elementor-element.elementor-element-2715de38,
html body .elementor-23 .elementor-element.elementor-element-8c28f365,
html body .elementor-23 .elementor-element.elementor-element-07e73f4d,
html body .elementor-23 .elementor-element.elementor-element-ee45edd8 {
    height: auto !important;
    box-sizing: border-box !important;
    display: grid !important;
    grid-template-columns: 96px 1fr !important;
    width: 100% !important;
}

  /* Left meta container: exactly 96px width, no text wrap */
  html body .elementor-23 .elementor-element.elementor-element-e7bb77fb,
  html body .elementor-23 .elementor-element.elementor-element-9fe1338c,
  html body .elementor-23 .elementor-element.elementor-element-78397fbd,
  html body .elementor-23 .elementor-element.elementor-element-bb507187 {
    width: 96px !important;
    min-width: 96px !important;
    max-width: 96px !important;
    overflow: visible !important;
  }

  /* Left thumbnail image wrappers */
  html body .elementor-23 .elementor-element.elementor-element-6a4dd580,
html body .elementor-23 .elementor-element.elementor-element-cac290e7,
html body .elementor-23 .elementor-element.elementor-element-b72b5a3b,
html body .elementor-23 .elementor-element.elementor-element-36327b74 {
    width: 100% !important;
    max-width: 220px !important;
    justify-self: end !important;
    height: 72px !important;
    border-radius: 4px !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
}

  /* Right 3-card container: height auto */
  
  /* Right 3 cards: column flex, height auto, flex-wrap nowrap, clean padding */
    
  /* Right card images: full width responsive */
  
  
  
  /* Right card text containers: 100% width, stays inside card */
  }

/* ─────────────────────────────────────────────────────────────
   MOBILE SPECIFIC (max-width: 680px)
   ───────────────────────────────────────────────────────────── */
@media (max-width: 680px) {
  /* ── HEADER ── */
  /* (layout đã chuyển sang Elementor) html body .elementor-18 .elementor-element.elementor-element-6f45dc93 */
  /* (đã chuyển typography sang Elementor) html body .elementor-18 .elementor-element.elementor-element-cc727f6d a */

  /* ── SECTION 00: HERO ── */
  /* (layout đã chuyển sang Elementor) html body .elementor-23 .elementor-element.elementor-element-bbd3c4a5 */
  /* (layout đã chuyển sang Elementor) html body .elementor-23 .elementor-element.elementor-element-c977e650 */
      html body .elementor-23 .elementor-element.elementor-element-8b4bf13e {
    padding: 0 4px !important;
}
  html body .elementor-23 .elementor-element.elementor-element-ba2af391 .elementor-button {
    width: 100% !important;
    max-width: 260px !important;
    padding: 12px 28px !important;
}
  /* (layout đã chuyển sang Elementor) html body .elementor-23 .elementor-element.elementor-element-6123ac48 */
  
  /* ── SECTION 01: VỀ THE NEW PAGE ── */
  /* (layout đã chuyển sang Elementor) html body .elementor-23 .elementor-element.elementor-element-5e21e785 */
  /* (layout đã chuyển sang Elementor) html body .elementor-23 .elementor-element.elementor-element-3512c5c8 */
  /* (layout đã chuyển sang Elementor) html body .elementor-23 .elementor-element.elementor-element-80cc2272 */
    /* (đã chuyển typography sang Elementor) html body .elementor-23 .elementor-element.elementor-element-3e2cc4ba .elementor-heading-title */
  /* (layout đã chuyển sang Elementor) html body .elementor-23 .elementor-element.elementor-element-d498fe6c */
  /* (đã chuyển typography sang Elementor) html body .elementor-23 .elementor-element.elementor-element-d3d678da */
  html body .elementor-23 .elementor-element.elementor-element-ed4bbdec .elementor-heading-title {
    margin-bottom: 12px !important;
}
  /* (đã chuyển typography sang Elementor) html body .elementor-23 .elementor-element.elementor-element-9281e777 */
  /* (đã chuyển typography sang Elementor) html body .elementor-23 .elementor-element.elementor-element-3672d1c9 */

  /* ── SECTION 02: KHÁM PHÁ ── */
  /* (layout đã chuyển sang Elementor) html body .elementor-23 .elementor-element.elementor-element-c0876ca8 */
  /* (layout đã chuyển sang Elementor) html body .elementor-23 .elementor-element.elementor-element-1e88580e */
  /* (layout đã chuyển sang Elementor) html body .elementor-23 .elementor-element.elementor-element-0b7eea89 */
  /* (đã chuyển typography sang Elementor) html body .elementor-23 .elementor-element.elementor-element-da0d7d96 .elementor-heading-title, html body .elementor-23 .elementor-element.elementor-element-2c5b0803 .elementor-heading-title */
  /* (đã chuyển typography sang Elementor) html body .elementor-23 .elementor-element.elementor-element-edd2eb6a */
  /* Action Visual Items */
      /* (đã chuyển typography sang Elementor) html body .elementor-23 .elementor-element.elementor-element-9b654d26 .elementor-heading-title, html body .elementor-23 .elementor-element.elementor-element-761f402a .elementor-heading-title, html body .elementor-23 .elementor-element.elementor-element-c2b9b051 .elementor-heading-title, html body .elementor-23 .elementor-element.elementor-element-fee8b3ab .elementor-heading-title */
  html body .elementor-23 .elementor-element.elementor-element-36056b80 .elementor-heading-title,
html body .elementor-23 .elementor-element.elementor-element-6b9a4a30 .elementor-heading-title,
html body .elementor-23 .elementor-element.elementor-element-5afa01ac .elementor-heading-title,
html body .elementor-23 .elementor-element.elementor-element-29df9d1b .elementor-heading-title {
    white-space: nowrap !important;
}
  html body .elementor-23 .elementor-element.elementor-element-6a4dd580,
html body .elementor-23 .elementor-element.elementor-element-cac290e7,
html body .elementor-23 .elementor-element.elementor-element-b72b5a3b,
html body .elementor-23 .elementor-element.elementor-element-36327b74 {
    height: 68px !important;
    max-width: 220px !important;
    width: 100% !important;
    justify-self: end !important;
    border-radius: 4px !important;
    overflow: hidden !important;
}
    /* (đã chuyển typography sang Elementor) html body .elementor-23 .elementor-element.elementor-element-1058f6de .elementor-heading-title, html body .elementor-23 .elementor-element.elementor-element-be06c47d .elementor-heading-title, html body .elementor-23 .elementor-element.elementor-element-85e9ed8d .elementor-heading-title */

  /* ── SECTION 03: ĐỌC ── */
  /* (layout đã chuyển sang Elementor) html body .elementor-23 .elementor-element.elementor-element-f99e08f2 */
  /* (đã chuyển typography sang Elementor) html body .elementor-23 .elementor-element.elementor-element-c8c33c28 .elementor-heading-title */
  /* (đã chuyển typography sang Elementor) html body .elementor-23 .elementor-element.elementor-element-6e92e470 */
  
  
  

  /* ── SECTION 04: SUY NGHĨ (1-COLUMN ON MOBILE) ── */
  /* (layout đã chuyển sang Elementor) html body .elementor-23 .elementor-element.elementor-element-4cc2836c */
  /* (layout đã chuyển sang Elementor) html body .elementor-23 .elementor-element.elementor-element-36cd9676 */
  /* (đã chuyển typography sang Elementor) html body .elementor-23 .elementor-element.elementor-element-965f2e46 .elementor-heading-title */
  /* (đã chuyển typography sang Elementor) html body .elementor-23 .elementor-element.elementor-element-ef1ed192 */
  html body .elementor-23 .tnp-home-sn-grid {
    display: flex !important;
    flex-direction: column !important;
    grid-template-columns: 1fr !important;
    gap: 16px !important;
    width: 100% !important;
  }
  html body .elementor-23 .tnp-home-sn-card {
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    padding: 28px 22px !important;
    min-height: auto !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }
  

  /* ── SECTION 05: VIẾT (1-COLUMN ON MOBILE) ── */
  /* (layout đã chuyển sang Elementor) html body .elementor-23 .elementor-element.elementor-element-1ab3e121 */
  /* (layout đã chuyển sang Elementor) html body .elementor-23 .elementor-element.elementor-element-fc0a4615 */
  /* (đã chuyển typography sang Elementor) html body .elementor-23 .elementor-element.elementor-element-98314710 .elementor-heading-title */
  /* (đã chuyển typography sang Elementor) html body .elementor-23 .elementor-element.elementor-element-7f950bdf */
    html body .elementor-23 .elementor-element.elementor-element-b74bbc24 {
    border-radius: 8px !important;
    width: 100% !important;
    box-sizing: border-box !important;
}
  html body .elementor-23 .elementor-element.elementor-element-ce161e48 .elementor-heading-title {
    margin-bottom: 16px !important;
}
  html body .elementor-23 .elementor-element.elementor-element-1e87c066 img {
    height: 160px !important;
  }
  /* (layout đã chuyển sang Elementor) html body .elementor-23 .elementor-element.elementor-element-8de78bc7 */
    html body .elementor-23 .elementor-element.elementor-element-46980590,
html body .elementor-23 .elementor-element.elementor-element-e4c55a2b {
    border-radius: 8px !important;
    width: 100% !important;
    box-sizing: border-box !important;
}
  /* (đã chuyển typography sang Elementor) html body .elementor-23 .elementor-element.elementor-element-3f2ccc78 .elementor-heading-title, html body .elementor-23 .elementor-element.elementor-element-7740e7f2 .elementor-heading-title */
  /* (layout đã chuyển sang Elementor) html body .elementor-23 .elementor-element.elementor-element-4fd46745, html body .elementor-23 .elementor-element.elementor-element-c114217e */

  /* ── SECTION 06: MỖI TUẦN MỘT LẦN ── */
  /* (layout đã chuyển sang Elementor) html body .elementor-23 .elementor-element.elementor-element-811e90bd */
  html body .elementor-23 .elementor-element.elementor-element-d48163a2 .elementor-heading-title {
    margin-bottom: 16px !important;
}
  /* (layout đã chuyển sang Elementor) html body .elementor-23 .elementor-element.elementor-element-e8b86e72 */
  html body .elementor-23 .elementor-element.elementor-element-0b6d65bc {
    width: 100% !important;
  }
  html body .elementor-23 .elementor-element.elementor-element-0b6d65bc a {
    width: 100% !important;
    max-width: 100% !important;
    padding: 14px 20px !important;
    min-height: 48px !important;
    box-sizing: border-box !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
}

  /* ── FOOTER 69 ── */
  /* (layout đã chuyển sang Elementor) html body .elementor-69 .elementor-element.elementor-element-6a1f71f8 */
  /* (layout đã chuyển sang Elementor) html body .elementor-69 .elementor-element.elementor-element-9b659278 */
}

/* ═════════════════════════════════════════════════════════════════
   SECTION 02: IMAGE BORDER FRAMES & HOVER STYLES
   Matches Design V5 exactly: 1px solid #D8D4C8, border-radius 4px.
   ═════════════════════════════════════════════════════════════════ */

/* ── Container border frames (All screen sizes) ── */
html body .elementor-23 .elementor-element.elementor-element-0980de3a,
html body .elementor-23 .elementor-element.elementor-element-dccb3429,
html body .elementor-23 .elementor-element.elementor-element-885a0d65,
html body .elementor-23 .elementor-element.elementor-element-6a4dd580,
html body .elementor-23 .elementor-element.elementor-element-cac290e7,
html body .elementor-23 .elementor-element.elementor-element-b72b5a3b,
html body .elementor-23 .elementor-element.elementor-element-36327b74 {
  border: 1px solid #D8D4C8 !important;
  border-radius: 4px !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
  display: block !important;
  line-height: 0 !important;
  -webkit-mask-image: -webkit-radial-gradient(white, black);
  isolation: isolate;
}

/* ── Desktop Sizing (min-width: 821px) ── */
@media (min-width: 821px) {
  /* Right column images: SỐNG, HIỂU, CHỌN */
  
  /* Left column images: 01 ĐỌC, 02 SUY NGHĨ, 03 VIẾT, 04 GIỮ LẠI */
  html body .elementor-23 .elementor-element.elementor-element-6a4dd580,
html body .elementor-23 .elementor-element.elementor-element-cac290e7,
html body .elementor-23 .elementor-element.elementor-element-b72b5a3b,
html body .elementor-23 .elementor-element.elementor-element-36327b74 {
    width: 100% !important;
    max-width: 240px !important;
    height: 76px !important;
}
}

/* ── Inner Widget & Img Elements ── */
html body .elementor-23 .elementor-element.elementor-element-fc82ae31,
html body .elementor-23 .elementor-element.elementor-element-172fa687,
html body .elementor-23 .elementor-element.elementor-element-3b27aec7,
html body .elementor-23 .elementor-element.elementor-element-da0d5932,
html body .elementor-23 .elementor-element.elementor-element-6b1702c3,
html body .elementor-23 .elementor-element.elementor-element-14f26c00,
html body .elementor-23 .elementor-element.elementor-element-8a4ba23e {
  width: 100% !important;
  height: 100% !important;
  display: block !important;
  padding: 0 !important;
  line-height: 0 !important;
}

html body .elementor-23 .elementor-element.elementor-element-fc82ae31 img,
html body .elementor-23 .elementor-element.elementor-element-172fa687 img,
html body .elementor-23 .elementor-element.elementor-element-3b27aec7 img,
html body .elementor-23 .elementor-element.elementor-element-da0d5932 img,
html body .elementor-23 .elementor-element.elementor-element-6b1702c3 img,
html body .elementor-23 .elementor-element.elementor-element-14f26c00 img,
html body .elementor-23 .elementor-element.elementor-element-8a4ba23e img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
  border-radius: 3px !important;
  filter: grayscale(100%);
  transition: filter 0.3s ease, transform 0.3s ease;
}

/* ── Hover Micro-interactions ── */
html body .elementor-23 .elementor-element.elementor-element-0980de3a:hover img,
html body .elementor-23 .elementor-element.elementor-element-dccb3429:hover img,
html body .elementor-23 .elementor-element.elementor-element-885a0d65:hover img,
html body .elementor-23 .elementor-element.elementor-element-6a4dd580:hover img,
html body .elementor-23 .elementor-element.elementor-element-cac290e7:hover img,
html body .elementor-23 .elementor-element.elementor-element-b72b5a3b:hover img,
html body .elementor-23 .elementor-element.elementor-element-36327b74:hover img {
  filter: grayscale(70%);
  transform: scale(1.03);
}

/* ═════════════════════════════════════════════════════════════════
   SECTION 02: 4-ITEM LIST BORDERS & EXACT BASELINE ALIGNMENT
   Matches Design V5 exactly: 5 crisp horizontal lines on left side,
   with top and bottom lines aligning with right column cards.
   ═════════════════════════════════════════════════════════════════ */

/* List container enclosing borders: Line 1 (top) and Line 5 (bottom) */
html body .elementor-23 .elementor-element.elementor-element-c7efeb64 {
  border-top: 1px solid #D8D4C8 !important;
  border-bottom: 1px solid #D8D4C8 !important;
  border-left: none !important;
  border-right: none !important;
  box-sizing: border-box !important;
}

/* Items 1, 2, 3 have bottom divider lines (Lines 2, 3, 4) */
html body .elementor-23 .elementor-element.elementor-element-2715de38,
html body .elementor-23 .elementor-element.elementor-element-8c28f365,
html body .elementor-23 .elementor-element.elementor-element-07e73f4d {
  border-bottom: 1px solid #D8D4C8 !important;
  border-top: none !important;
  border-left: none !important;
  border-right: none !important;
}

/* Item 4 has no bottom border so it does not duplicate with container border-bottom */

/* Desktop exact alignment (min-width: 821px) */
@media (min-width: 821px) {
  /* Left header & Right header bottom spacing to align tops of list and cards */
  /* (layout đã chuyển sang Elementor) html body .elementor-23 .elementor-element.elementor-element-47d7642a */
  /* (layout đã chuyển sang Elementor) html body .elementor-23 .elementor-element.elementor-element-8d15ec4d */

  /* Equal 400px heights for both columns */
  html body .elementor-23 .elementor-element.elementor-element-c7efeb64 {
    height: 400px !important;
    display: flex !important;
}

  html body .elementor-23 .elementor-element.elementor-element-9208db2d {
    height: 400px !important;
    display: flex !important;
}
}

/* ═════════════════════════════════════════════════════════════════
   SECTION 03: ĐỌC (CURATED ARTICLES) NUMBER & TEXT HARMONIOUS BALANCE
   Matches Design V5 exactly: Crisp Inter typography, optical alignment,
   proportional numbering without awkward baseline floating.
   ═════════════════════════════════════════════════════════════════ */
.tnp-home-article-num:hover {
  opacity: 0.8 !important;
}
.tnp-home-article-title,
.tnp-home-article-title a,
h3.tnp-home-article-title,
h3.tnp-home-article-title a {
  font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
  font-size: 17px !important;
  font-weight: 600 !important;
  line-height: 1.45 !important;
  margin: 0 !important;
  padding: 0 !important;
  color: #18271F !important;
  text-decoration: none !important;
  letter-spacing: -0.01em !important;
  transition: color 0.2s ease !important;
}
.tnp-home-article-title a:hover,
h3.tnp-home-article-title a:hover {
  color: #D96B52 !important;
}
.tnp-home-article-excerpt,
.tnp-home-article-excerpt p {
  font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
  font-size: 14.5px !important;
  line-height: 1.65 !important;
  color: #73766D !important;
  margin: 0 !important;
  padding: 0 !important;
}
@media (max-width: 680px) {
  .tnp-home-article-item {
    grid-template-columns: 28px 1fr !important;
    gap: 14px !important;
    padding: 18px 0 !important;
  }
    .tnp-home-article-title,
  .tnp-home-article-title a,
  h3.tnp-home-article-title,
  h3.tnp-home-article-title a {
    font-size: 16px !important;
    line-height: 1.45 !important;
  }
  }

/* ═════════════════════════════════════════════════════════════════
   PAGE /doc/ (ELEMENTOR 24): HERO SECTION PADDING & CLEARANCE
   Fixes header overlap on top and adds 24px side padding on mobile/tablet
   ═════════════════════════════════════════════════════════════════ */
html body .elementor-24 .library-hero {
  padding-top: 150px !important;
  padding-bottom: 64px !important;
  padding-left: 48px !important;
  padding-right: 48px !important;
  box-sizing: border-box !important;
  width: 100% !important;
  text-align: center !important;
}
html body .elementor-24 .elementor-element-1dcb0f61 {
  box-sizing: border-box !important;
  width: 100% !important;
  text-align: center !important;
}

/* (11/10) độ rộng 800px đã chuyển sang Elementor: container 23563978 > Bố cục > Độ rộng nội dung */

/* (11/10) độ rộng 700px đã chuyển sang Elementor: widget 21fe24e7 > Nâng cao > Chiều rộng tuỳ chỉnh */
html body .elementor-24 .elementor-element-21fe24e7 {
  text-align: left !important;
}

html body .elementor-24 .elementor-element-6e6553ba .elementor-heading-title {
  margin-bottom: 20px !important;
  display: inline-block !important;
}

html body .elementor-24 .elementor-element-ae5971a2 .elementor-heading-title {
  margin-bottom: 32px !important;
}

html body .elementor-24 .elementor-element-21fe24e7 p {
  margin-bottom: 18px !important;
}

/* Tablet (max-width: 820px) */
@media (max-width: 820px) {
  html body .elementor-24 .library-hero {
    padding-top: 140px !important;
    padding-bottom: 56px !important;
    padding-left: 28px !important;
    padding-right: 28px !important;
}
/* (layout đã chuyển sang Elementor) html body .elementor-24 .elementor-element-1dcb0f61 */
  /* (đã chuyển typography sang Elementor) html body .elementor-24 .elementor-element-ae5971a2 .elementor-heading-title */
}

/* Mobile (max-width: 680px) */
@media (max-width: 680px) {
  html body .elementor-24 .library-hero {
    padding-top: 130px !important;
    padding-bottom: 48px !important;
    padding-left: 24px !important;
    padding-right: 24px !important;
}
/* (layout đã chuyển sang Elementor) html body .elementor-24 .elementor-element-1dcb0f61 */
  html body .elementor-24 .elementor-element-ae5971a2 .elementor-heading-title {
    margin-bottom: 24px !important;
}
  html body .elementor-24 .elementor-element-21fe24e7 p {
    margin-bottom: 16px !important;
}
}


/* 2026-10-03: Elementor 4 áp gap: var(--row-gap) var(--column-gap) lên cả widget; biến này kế thừa từ container cha.
   Chặn kế thừa để widget hiển thị dạng flex (vd. .foundation-col-info) không bị dính khoảng cách của container. */
.elementor-widget:not(.elementor-widget-nav-menu) { --row-gap: normal; --column-gap: normal; }

/* 2026-10-03: Hiệu ứng xuất hiện (.reveal) — tôn trọng người dùng bật "giảm chuyển động" trong hệ điều hành */
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
}