/* ==========================================================================
   EMAGAZINE DATA JOURNALISM STYLESHEET
   Thiết kế báo chí dữ liệu hiện đại, chuyên nghiệp, tối ưu đa thiết bị
   Đảm bảo toàn bộ infographic chữ tối thiểu 18px, toàn trang chữ tối thiểu 16px.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Be+Vietnam+Pro:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400&family=Newsreader:ital,opsz,wght@0,6..72,400;0,6..72,500;0,6..72,600;0,6..72,700;1,6..72,400&family=Plus+Jakarta+Sans:wght@500;600;700;800&display=swap');

:root {
  /* Color Palette - Báo chí dữ liệu sinh thái cao cấp */
  --color-bg-primary: #FAF8F4;      /* Màu nền giấy ngà sang trọng */
  --color-bg-alt: #F2ECE1;          /* Nền nhấn phụ */
  --color-bg-card: #FFFFFF;         /* Nền card trắng tinh tế */
  --color-bg-dark: #0F1F17;         /* Nền rừng sâu thẫm */
  --color-bg-dark-card: #162E23;    /* Nền card tối */

  --color-text-main: #1D2821;       /* Màu chữ chính tương phản cao */
  --color-text-muted: #4F5E55;      /* Màu chữ phụ, trích dẫn */
  --color-text-light: #E9F0EC;      /* Màu chữ sáng trên nền tối */
  --color-text-light-muted: #9BB0A4;/* Chữ sáng phụ */

  --color-emerald-deep: #143826;    /* Xanh đàn hương đậm */
  --color-emerald: #1F5F3E;         /* Xanh lá chủ đạo */
  --color-emerald-light: #3D885B;   /* Xanh lá đọt non */
  --color-emerald-glow: #76C893;    /* Xanh điểm sáng */
  
  --color-amber: #C98A2C;           /* Vàng hổ phách / đất gỗ */
  --color-amber-light: #E5B25D;     /* Vàng sáng */
  --color-amber-bg: #FCF6EC;        /* Nền vàng nhạt */

  --color-border: #DCD5C9;          /* Đường kẻ ngăn cách */
  --color-border-dark: #264736;     /* Đường kẻ trên nền tối */

  /* Typography */
  --font-serif: 'Newsreader', Georgia, serif;
  --font-sans: 'Be Vietnam Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-display: 'Plus Jakarta Sans', sans-serif;

  /* Spacing & Layout */
  --max-content-width: 780px;       /* Chiều rộng tối ưu cho mắt đọc báo chí */
  --max-breakout-width: 1140px;     /* Chiều rộng cho Infographic và ảnh lớn */
  --section-spacing: clamp(60px, 9vw, 120px);
  --border-radius-sm: 8px;
  --border-radius-md: 16px;
  --border-radius-lg: 24px;
  --shadow-subtle: 0 4px 20px rgba(15, 31, 23, 0.05);
  --shadow-elevated: 0 12px 36px rgba(15, 31, 23, 0.08);
}

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

html {
  font-size: 16px; /* Cỡ tối thiểu toàn trang là 16px */
  scroll-behavior: smooth;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

body {
  background-color: var(--color-bg-primary);
  color: var(--color-text-main);
  font-family: var(--font-sans);
  font-size: 19px; /* Body text chuẩn báo chí đọc rất dễ chịu */
  line-height: 1.82;
  font-weight: 400;
  overflow-x: hidden;
  padding: 0;
  margin: 0;
}

/* Tối ưu hiển thị ảnh */
img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* ==========================================================================
   LAYOUT CONTAINERS
   ========================================================================== */
.container-story {
  width: 90%;
  max-width: var(--max-content-width);
  margin-left: auto;
  margin-right: auto;
  position: relative;
}

.container-breakout {
  width: 94%;
  max-width: var(--max-breakout-width);
  margin-left: auto;
  margin-right: auto;
  position: relative;
}

/* ==========================================================================
   HERO & ARTICLE HEADER
   Bìa mở đầu phong cách E-magazine đỉnh cao, không menu / header cố định
   ========================================================================== */
.magazine-hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  background-color: var(--color-bg-dark);
  color: #FFFFFF;
  overflow: hidden;
  padding: 80px 0 60px;
}

.hero-bg-parallax {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 120%;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
}

.hero-bg-parallax img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  filter: brightness(0.62) contrast(1.1);
  transform: translateY(0);
  will-change: transform;
  transition: transform 0.1s cubic-bezier(0.2, 0, 0.2, 1);
}

.hero-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  background: linear-gradient(
    180deg,
    rgba(15, 31, 23, 0.35) 0%,
    rgba(15, 31, 23, 0.6) 40%,
    rgba(15, 31, 23, 0.94) 90%,
    #0F1F17 100%
  );
}

.hero-content {
  position: relative;
  z-index: 3;
  padding-top: 100px;
  padding-bottom: 40px;
}

.article-topic-kicker {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-amber-light);
  margin-bottom: 24px;
}

.article-topic-kicker::before {
  content: "";
  display: inline-block;
  width: 32px;
  height: 2px;
  background-color: var(--color-amber-light);
}

.article-headline {
  font-family: var(--font-serif);
  font-size: clamp(34px, 5.2vw, 62px);
  font-weight: 700;
  line-height: 1.22;
  letter-spacing: -0.015em;
  color: #FFFFFF;
  margin-bottom: 32px;
  text-shadow: 0 3px 18px rgba(0, 0, 0, 0.35);
}

.hero-meta-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 20px;
  padding-top: 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.2);
  font-size: 18px;
  color: var(--color-text-light-muted);
}

.meta-author {
  font-weight: 600;
  color: #FFFFFF;
}

.meta-tag-pill {
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.2);
  padding: 4px 14px;
  border-radius: 20px;
  font-size: 16px;
  color: var(--color-text-light);
}

.scroll-indicator {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 36px;
  font-size: 16px;
  color: rgba(255, 255, 255, 0.7);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  font-weight: 500;
}

.scroll-mouse-icon {
  width: 20px;
  height: 32px;
  border: 2px solid rgba(255, 255, 255, 0.6);
  border-radius: 12px;
  display: flex;
  justify-content: center;
  padding-top: 6px;
}

.scroll-mouse-icon::after {
  content: "";
  width: 4px;
  height: 6px;
  background: #FFFFFF;
  border-radius: 2px;
  animation: scrollWheel 2s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

@keyframes scrollWheel {
  0% { transform: translateY(0); opacity: 1; }
  100% { transform: translateY(12px); opacity: 0; }
}

/* ==========================================================================
   SAPO / LEAD SECTION
   ========================================================================== */
.magazine-lead-section {
  padding-top: 60px;
  padding-bottom: 50px;
  background-color: var(--color-bg-primary);
  border-bottom: 1px solid var(--color-border);
}

.lead-box {
  background: var(--color-card-bg, #FFFFFF);
  border-left: 5px solid var(--color-emerald);
  padding: 36px 40px;
  border-radius: 0 var(--border-radius-md) var(--border-radius-md) 0;
  box-shadow: var(--shadow-subtle);
}

.lead-paragraph {
  font-family: var(--font-serif);
  font-size: clamp(21px, 2.3vw, 25px);
  line-height: 1.68;
  color: var(--color-emerald-deep);
  font-weight: 500;
  margin-bottom: 22px;
}

.lead-paragraph:last-child {
  margin-bottom: 0;
  color: var(--color-text-main);
  font-size: clamp(20px, 2.1vw, 23px);
  font-weight: 400;
}

/* ==========================================================================
   EDITORIAL SECTIONS (3 PHẦN MẠCH LẠC)
   ========================================================================== */
.story-chapter {
  position: relative;
  padding: var(--section-spacing) 0;
  border-bottom: 1px solid var(--color-border);
}

.story-chapter:last-of-type {
  border-bottom: none;
}

.chapter-header {
  margin-bottom: 40px;
}

.chapter-number-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 700;
  color: var(--color-emerald);
  background: rgba(31, 95, 62, 0.08);
  padding: 6px 16px;
  border-radius: 20px;
  margin-bottom: 16px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.chapter-title {
  font-family: var(--font-serif);
  font-size: clamp(28px, 4vw, 42px);
  font-weight: 700;
  line-height: 1.28;
  color: var(--color-emerald-deep);
  letter-spacing: -0.01em;
}

/* Nội dung văn bản đọc chuẩn báo chí */
.article-text-block {
  margin-bottom: 28px;
  color: var(--color-text-main);
}

.article-text-block p {
  margin-bottom: 26px;
  font-size: clamp(18px, 1.35vw, 20px);
  line-height: 1.84;
}

.article-text-block p:last-child {
  margin-bottom: 0;
}

/* Dropcap chữ cái đầu phần */
.dropcap::first-letter {
  float: left;
  font-family: var(--font-serif);
  font-size: 82px;
  line-height: 68px;
  padding-top: 4px;
  padding-right: 14px;
  padding-bottom: 4px;
  font-weight: 700;
  color: var(--color-emerald);
}

/* Photo Break - Tĩnh lặng, không text, ít/không người */
.editorial-photo-break {
  margin: 50px 0;
  position: relative;
  border-radius: var(--border-radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-elevated);
}

.editorial-photo-break img {
  width: 100%;
  height: clamp(320px, 46vw, 540px);
  object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.editorial-photo-break:hover img {
  transform: scale(1.02);
}

.photo-caption {
  padding: 16px 24px;
  background: #FFFFFF;
  border-top: 1px solid var(--color-border);
  font-family: var(--font-sans);
  font-size: 17px; /* Cỡ chữ rõ ràng, chuẩn báo chí */
  line-height: 1.65;
  color: var(--color-text-muted);
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.photo-caption::before {
  content: "";
  display: inline-block;
  width: 4px;
  height: 22px;
  background-color: var(--color-emerald);
  flex-shrink: 0;
  margin-top: 3px;
  border-radius: 2px;
}

.photo-caption strong {
  color: var(--color-emerald-deep);
  font-weight: 600;
}

.infographic-caption {
  margin-top: 28px;
  padding-top: 18px;
  border-top: 1px dashed rgba(31, 95, 62, 0.25);
  font-family: var(--font-sans);
  font-size: 18px; /* Tối thiểu 18px theo yêu cầu nghiêm ngặt */
  line-height: 1.6;
  color: var(--color-text-muted);
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.infographic-caption::before {
  content: "ℹ";
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: rgba(31, 95, 62, 0.12);
  color: var(--color-emerald);
  font-size: 17px;
  font-weight: 700;
  flex-shrink: 0;
  margin-top: 1px;
}

.infographic-caption strong {
  color: var(--color-emerald-deep);
  font-weight: 700;
}

.hero-photo-caption {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 16px;
  color: rgba(255, 255, 255, 0.75);
  margin-top: 16px;
  background: rgba(0, 0, 0, 0.3);
  padding: 6px 14px;
  border-radius: 20px;
  backdrop-filter: blur(4px);
  border: 1px solid rgba(255, 255, 255, 0.15);
}

/* ==========================================================================
   INFOGRAPHICS SYSTEM
   Quy tắc nghiêm ngặt:
   - Thuần dữ liệu, SVG, icon, biểu đồ, con số
   - Cỡ chữ tại infographic TỐI THIỂU 18px!
   - Tối ưu Responsive, nhịp nhàng giữa bài viết
   ========================================================================== */
.infographic-wrapper {
  margin: 55px auto;
  position: relative;
}

.infographic-card {
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius-lg);
  box-shadow: var(--shadow-elevated);
  padding: clamp(28px, 4vw, 48px);
  position: relative;
  overflow: hidden;
}

.infographic-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 6px;
  background: linear-gradient(90deg, var(--color-emerald), var(--color-amber));
}

.info-header {
  margin-bottom: 32px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  padding-bottom: 20px;
}

.info-badge {
  display: inline-block;
  font-family: var(--font-display);
  font-size: 18px; /* Tối thiểu 18px */
  font-weight: 700;
  color: var(--color-emerald);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 8px;
}

.info-title {
  font-family: var(--font-serif);
  font-size: clamp(22px, 2.5vw, 30px);
  font-weight: 700;
  color: var(--color-emerald-deep);
  line-height: 1.35;
}

/* Lưới dữ liệu cho Infographic */
.info-data-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px;
  margin-bottom: 32px;
}

.data-stat-card {
  background: var(--color-bg-primary);
  border: 1px solid rgba(31, 95, 62, 0.12);
  border-radius: var(--border-radius-md);
  padding: 24px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: transform 0.3s ease, border-color 0.3s ease;
}

.data-stat-card:hover {
  transform: translateY(-4px);
  border-color: var(--color-emerald);
}

.stat-number-wrap {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin-bottom: 10px;
}

.stat-counter {
  font-family: var(--font-display);
  font-size: clamp(38px, 4.2vw, 52px);
  font-weight: 800;
  color: var(--color-emerald-deep);
  line-height: 1;
  letter-spacing: -0.02em;
}

.stat-unit {
  font-family: var(--font-display);
  font-size: 22px; /* Tối thiểu 18px */
  font-weight: 700;
  color: var(--color-emerald);
}

.stat-label {
  font-family: var(--font-display);
  font-size: 19px; /* Tối thiểu 18px */
  font-weight: 700;
  color: var(--color-text-main);
  line-height: 1.4;
  margin-bottom: 6px;
}

.stat-subtext {
  font-size: 18px; /* Tối thiểu 18px */
  color: var(--color-text-muted);
  line-height: 1.5;
}

/* --------------------------------------------------------------------------
   INFOGRAPHIC 1 SPECIFICS: Mô hình bán ký sinh & Tỷ lệ 2:1
   -------------------------------------------------------------------------- */
.symbiosis-diagram-box {
  background: #F4F8F5;
  border-radius: var(--border-radius-md);
  padding: 30px;
  margin-top: 10px;
  border: 1px dashed var(--color-emerald);
}

.diagram-legend-row {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  margin-bottom: 24px;
}

.legend-item {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 19px; /* Tối thiểu 18px */
  font-weight: 600;
  color: var(--color-emerald-deep);
}

.legend-color-dot {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  display: inline-block;
}

.dot-sandalwood {
  background-color: var(--color-emerald);
}

.dot-host {
  background-color: var(--color-amber);
}

.symbiosis-visual-svg-container {
  width: 100%;
  height: auto;
  min-height: 220px;
}

.svg-diagram-text {
  font-family: var(--font-sans);
  font-size: 18px; /* Tối thiểu 18px */
  font-weight: 600;
  fill: var(--color-emerald-deep);
}

.ratio-bar-container {
  margin-top: 24px;
  background: #E8EFEA;
  border-radius: 12px;
  overflow: hidden;
  height: 52px;
  position: relative;
  display: flex;
}

.ratio-segment-sandalwood {
  width: 66.67%;
  background: linear-gradient(90deg, #1F5F3E, #2A7E53);
  display: flex;
  align-items: center;
  padding-left: 20px;
  color: #FFFFFF;
  font-family: var(--font-display);
  font-size: 18px; /* Tối thiểu 18px */
  font-weight: 700;
}

.ratio-segment-host {
  width: 33.33%;
  background: linear-gradient(90deg, #C98A2C, #D89838);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding-right: 20px;
  color: #FFFFFF;
  font-family: var(--font-display);
  font-size: 18px; /* Tối thiểu 18px */
  font-weight: 700;
}

/* --------------------------------------------------------------------------
   INFOGRAPHIC 2 SPECIFICS: Chu kỳ dòng tiền & 3 nấc thang giá trị
   -------------------------------------------------------------------------- */
.conversion-flow-wrap {
  background: #FAF7F0;
  border-radius: var(--border-radius-md);
  padding: 30px;
  margin-bottom: 30px;
  border: 1px solid #EADBCC;
}

.conversion-steps {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-around;
  gap: 20px;
}

.flow-step-box {
  background: #FFFFFF;
  border: 1px solid #DFD5C6;
  border-radius: var(--border-radius-sm);
  padding: 20px 24px;
  text-align: center;
  min-width: 220px;
  flex: 1;
}

.flow-step-val {
  font-family: var(--font-display);
  font-size: 34px;
  font-weight: 800;
  color: var(--color-emerald-deep);
  line-height: 1.1;
  margin-bottom: 4px;
}

.flow-step-title {
  font-family: var(--font-display);
  font-size: 19px; /* Tối thiểu 18px */
  font-weight: 700;
  color: var(--color-emerald);
}

.flow-step-desc {
  font-size: 18px; /* Tối thiểu 18px */
  color: var(--color-text-muted);
  margin-top: 4px;
}

.flow-arrow-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-amber);
}

/* Trục 3 Tầng Giá Trị (Value Staircase) */
.timeline-stages-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 20px;
}

.stage-card {
  background: #FFFFFF;
  border: 2px solid #E2EAE5;
  border-radius: var(--border-radius-md);
  padding: 26px;
  position: relative;
  transition: all 0.3s ease;
}

.stage-card.active-stage {
  border-color: var(--color-emerald);
  background: #F8FCF9;
  box-shadow: 0 8px 24px rgba(31, 95, 62, 0.08);
}

.stage-time-tag {
  display: inline-block;
  background: var(--color-emerald-deep);
  color: #FFFFFF;
  font-family: var(--font-display);
  font-size: 18px; /* Tối thiểu 18px */
  font-weight: 700;
  padding: 4px 14px;
  border-radius: 6px;
  margin-bottom: 14px;
}

.stage-title {
  font-family: var(--font-serif);
  font-size: 22px; /* Tối thiểu 18px */
  font-weight: 700;
  color: var(--color-emerald-deep);
  margin-bottom: 8px;
  line-height: 1.35;
}

.stage-desc {
  font-size: 18px; /* Tối thiểu 18px */
  color: var(--color-text-main);
  line-height: 1.55;
}

/* --------------------------------------------------------------------------
   INFOGRAPHIC 3 SPECIFICS: Liên kết, việc làm & Kỷ luật cách ly 2 tháng
   -------------------------------------------------------------------------- */
.safety-isolation-banner {
  background: linear-gradient(135deg, #143826 0%, #1A4630 100%);
  color: #FFFFFF;
  border-radius: var(--border-radius-md);
  padding: 28px 32px;
  margin-bottom: 30px;
  display: flex;
  align-items: center;
  gap: 24px;
}

.isolation-badge-circle {
  flex-shrink: 0;
  width: 90px;
  height: 90px;
  border-radius: 50%;
  background: rgba(235, 201, 75, 0.15);
  border: 3px solid #ECC94B;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.isolation-number {
  font-family: var(--font-display);
  font-size: 32px;
  font-weight: 800;
  color: #ECC94B;
  line-height: 1;
}

.isolation-unit {
  font-family: var(--font-display);
  font-size: 18px; /* Tối thiểu 18px */
  font-weight: 700;
  color: #ECC94B;
}

.isolation-content-title {
  font-family: var(--font-serif);
  font-size: 24px;
  font-weight: 700;
  color: #FFFFFF;
  margin-bottom: 8px;
}

.isolation-content-desc {
  font-size: 19px; /* Tối thiểu 18px */
  color: #E2ECE5;
  line-height: 1.55;
}

/* Mô hình chuỗi liên kết 4 mắt xích */
.ecosystem-chain-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 18px;
}

.chain-node-box {
  background: #FFFFFF;
  border: 1px solid #D5E1D9;
  border-radius: var(--border-radius-sm);
  padding: 22px;
  position: relative;
  transition: transform 0.25s ease;
}

.chain-node-box:hover {
  transform: translateY(-3px);
  border-color: var(--color-emerald);
}

.chain-node-index {
  display: inline-block;
  font-family: var(--font-display);
  font-size: 18px; /* Tối thiểu 18px */
  font-weight: 800;
  color: var(--color-emerald);
  margin-bottom: 6px;
}

.chain-node-title {
  font-family: var(--font-display);
  font-size: 20px; /* Tối thiểu 18px */
  font-weight: 700;
  color: var(--color-emerald-deep);
  margin-bottom: 8px;
}

.chain-node-text {
  font-size: 18px; /* Tối thiểu 18px */
  color: var(--color-text-muted);
  line-height: 1.5;
}

/* ==========================================================================
   ARTICLE SIGNATURE & FOOTER
   ========================================================================== */
.article-byline-box {
  margin-top: 60px;
  padding: 36px 0;
  border-top: 2px solid var(--color-emerald-deep);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 20px;
}

.byline-author-name {
  font-family: var(--font-serif);
  font-size: 26px;
  font-weight: 700;
  color: var(--color-emerald-deep);
}

.byline-source-info {
  font-size: 18px;
  color: var(--color-text-muted);
}

.magazine-colophon {
  background: var(--color-bg-dark);
  color: var(--color-text-light-muted);
  padding: 60px 0 80px;
  text-align: center;
  border-top: 1px solid var(--color-border-dark);
}

.colophon-emblem {
  width: 48px;
  height: 48px;
  margin: 0 auto 20px;
  color: var(--color-amber-light);
}

.colophon-title {
  font-family: var(--font-serif);
  font-size: 24px;
  font-weight: 700;
  color: #FFFFFF;
  margin-bottom: 8px;
}

.colophon-desc {
  font-size: 18px;
  max-width: 680px;
  margin: 0 auto;
  line-height: 1.6;
}

/* ==========================================================================
   SCROLL TRIGGER & ANIMATION CLASSES
   ========================================================================== */
[data-animate] {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}

[data-animate].is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Stagger delay */
[data-animate-delay="1"] { transition-delay: 0.15s; }
[data-animate-delay="2"] { transition-delay: 0.3s; }
[data-animate-delay="3"] { transition-delay: 0.45s; }

/* Line and bar animation */
.animated-bar {
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 1.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.animated-bar.is-expanded {
  transform: scaleX(1);
}

/* ==========================================================================
   RESPONSIVE DESIGN (TABLET & MOBILE)
   Đảm bảo responsive hoàn chỉnh và cỡ chữ infographic >= 18px
   ========================================================================== */
@media (max-width: 1024px) {
  :root {
    --section-spacing: 70px;
  }
  
  .timeline-stages-container {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  html {
    font-size: 16px;
  }

  body {
    font-size: 18px;
    line-height: 1.76;
  }

  .magazine-hero {
    min-height: 90vh;
    padding: 60px 0 40px;
  }

  .article-headline {
    font-size: 32px;
    line-height: 1.26;
  }

  .lead-box {
    padding: 24px 20px;
    border-left-width: 4px;
  }

  .infographic-card {
    padding: 24px 18px;
    border-radius: var(--border-radius-md);
  }

  .info-data-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .conversion-steps {
    flex-direction: column;
    align-items: stretch;
  }

  .flow-arrow-icon {
    transform: rotate(90deg);
    margin: 8px 0;
  }

  .safety-isolation-banner {
    flex-direction: column;
    text-align: center;
    padding: 24px 20px;
  }

  .ratio-bar-container {
    height: auto;
    flex-direction: column;
  }

  .ratio-segment-sandalwood,
  .ratio-segment-host {
    width: 100%;
    padding: 12px 16px;
    justify-content: flex-start;
  }

  .article-byline-box {
    flex-direction: column;
    align-items: flex-start;
  }
}