:root{
      --red-deep:#7a0e0e; --red-crimson:#8b0000; --gold:#d4af37; --gold-soft:#f1d27a;
      --ink:#111113; --ash:#1c1c1f; --paper:#f5f3e6; --jade:#0f4d4a;

      /* Ảnh hero trái/phải */
      --hero-image-left: url('p_city.jpg');  /* TP ô nhiễm */
      --hero-image-right: url('g_city.jpg'); /* TP xanh */
      /* Hoạ tiết */

  --pattern-image: url('pattern_trong_dong_border.png');
  --quote-image:   url('pagoda_bg.jpg');
  --gallery-pattern: url('pattern_overlay.png');

    }

    *,*::before,*::after{box-sizing:border-box}
    html,body{height:100%}
    body{
      margin:0; color:#e9e7df; background:var(--ink);
      font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
      line-height:1.6;
      scroll-behavior:smooth;
    }
    img{max-width:100%; display:block}
    a{color:inherit; text-decoration:none}
    .container{width:min(1200px, 92%); margin-inline:auto}

    /* Header / Nav */
    .site-header{position:sticky; top:0; z-index:40; backdrop-filter: blur(8px);
      background:linear-gradient(to bottom, rgba(17,17,19,.9), rgba(17,17,19,.4));
      border-bottom:1px solid rgba(212,175,55,.25)}
    .nav{display:flex; align-items:center; justify-content:space-between; padding:14px 0}
    .brand{display:flex; align-items:center; gap:10px; font-weight:800; letter-spacing:.5px;}
    .brand__emblem{width:36px; aspect-ratio:1; border-radius:999px;
      background:conic-gradient(from 0deg, var(--gold), #b8891f, var(--gold));
      border:1px solid rgba(255,255,255,.2);
      box-shadow:0 0 0 2px rgba(212,175,55,.15) inset; position:relative; overflow:hidden}
    .brand__emblem::after{content:""; position:absolute; inset:3px;
      background:var(--pattern-image) center/cover no-repeat; opacity:.25; filter:contrast(120%)}
    .brand__text{font-family:"Noto Serif Display", serif; font-size:18px}
    .nav__menu{display:flex; gap:18px; align-items:center}
    .nav__link{padding:8px 12px; border-radius:999px; font-weight:600; border:1px solid transparent; transition:.25s ease}
    .nav__link:hover{border-color:rgba(212,175,55,.45); box-shadow:0 0 0 2px rgba(212,175,55,.12) inset; color:var(--gold)}

    /* Hero */
    .hero{position:relative; min-height:100vh; display:flex; align-items:center; justify-content:center; overflow:hidden; border-bottom:1px solid rgba(212,175,55,.18)}
    .hero::before,.hero::after{content:""; position:absolute; top:0;bottom:0; width:50%; background-size:cover; background-position:center; background-repeat:no-repeat; z-index:0}
    .hero::before{left:0; background-image:var(--hero-image-left)}
    .hero::after{right:0; background-image:var(--hero-image-right)}
    .hero::after,.hero::before{filter:brightness(40%)}
    .hero .overlay{position:absolute; inset:0;
      background:linear-gradient(90deg, rgba(17,17,19,0.9) 0%, rgba(17,17,19,0) 50%, rgba(17,17,19,0.9) 100%);
      z-index:1; pointer-events:none}
    .hero__inner{max-width:820px; padding:40px; position:relative; z-index:2; text-align:center; text-shadow:0 2px 6px rgba(0,0,0,0.8)}
    .kicker{letter-spacing:.12em; text-transform:uppercase; color:var(--gold-soft); font-weight:800; font-size:12px}
    .title{font-family:"Noto Serif Display",serif; font-size:clamp(30px,5vw,54px); margin:.5rem auto}
    .title__highlight{color:var(--gold)}
    .subtitle{color:#e9e7dfcc; max-width:60ch; margin:16px auto 0}
    .quote-intro{margin-top:18px; font-style:italic; color:#f2e9cc}

    /* Section wrapper */
/* =================== SECTION DECOR =================== */
.section{
  padding:clamp(36px,6vw,72px) 0;
  background:
    radial-gradient(1000px 400px at 10% 0%, rgba(122,14,14,.2), transparent 60%),
    radial-gradient(1000px 400px at 90% 0%, rgba(15,77,74,.12), transparent 60%),
    linear-gradient(#0d0d0f,#151516);
}
.section__head{display:flex; align-items:end; justify-content:flex-start; gap:16px; margin-bottom:32px}
.section__title{font-family:"Noto Serif Display",serif; font-size:clamp(2.2rem, 5vw, 4rem); color:var(--gold, #f1d27a); font-weight:700; letter-spacing:0.01em; text-align:left}

    /* Cards lý thuyết */
    .grid{display:grid; gap:18px; grid-template-columns:repeat(12,1fr)}
    
    .card:hover{transform:translateY(-3px); box-shadow:0 10px 30px rgba(0,0,0,.35); border-color:rgba(241,210,122,.35)}
    .card h3{margin:6px 0 8px 0; font-family:"Noto Serif Display",serif}
    .card p{color:#dcd9c9; opacity:.92}
    @media(min-width:740px){.card{grid-column:span 4}}

    /* Sơ đồ nhỏ: Nguyên nhân → Kết quả */
    .mini-diagram{display:flex; align-items:center; justify-content:center; gap:12px; margin-top:16px}
    .pill{display:inline-flex; align-items:center; gap:8px; padding:8px 12px; border-radius:999px;
      background:linear-gradient(180deg, rgba(212,175,55,.12), rgba(212,175,55,.06));
      border:1px solid rgba(212,175,55,.28); color:var(--gold-soft); font-weight:700; letter-spacing:.04em}
    .arrow{opacity:.9; filter:drop-shadow(0 0 6px rgba(241,210,122,.25))}

    /* Mindmap thực tiễn (CSS đơn giản) */
    .mindmap{display:grid; gap:18px; grid-template-columns:repeat(12,1fr); margin-top:8px}
    .mm-col{grid-column:span 12; background:#0b0b0c; border:1px solid rgba(212,175,55,.18); border-radius:18px; padding:18px}
    .mm-col h4{color:var(--gold); margin:4px 0 10px 0; font-family:"Noto Serif Display",serif}
    .mm-list{display:flex; flex-wrap:wrap; gap:10px}
    .mm-tag{padding:8px 12px; border-radius:999px; background:rgba(212,175,55,.1); border:1px solid rgba(212,175,55,.25)}
    @media(min-width:920px){ .mm-causes{grid-column:span 6} .mm-effects{grid-column:span 6} }

    .images-3{display:grid; grid-template-columns:repeat(1,1fr); gap:14px; margin-top:16px}
    @media(min-width:740px){.images-3{grid-template-columns:repeat(3,1fr)}}
    .tile{position:relative; border-radius:16px; overflow:hidden; border:1px solid rgba(212,175,55,.18); background:#0b0b0c}
    .tile img{width:100%; height:230px; object-fit:cover}
    .tile::after{content:""; position:absolute; inset:0; background:var(--gallery-pattern) center/55% repeat; opacity:.18}

    /* Giải pháp + tương tác */
    .solutions{display:grid; gap:18px; grid-template-columns:repeat(12,1fr)}
    .solutions .col{grid-column:span 12; background:#0b0b0c; border:1px solid rgba(212,175,55,.18); border-radius:18px; padding:18px}
    @media(min-width:920px){ .solutions .col{grid-column:span 6} }
    ul.sol{margin:0; padding-left:18px}
    .btn{background:#4b84ff; color:#fff; border:none; border-radius:10px; padding:12px 16px; font-weight:700; cursor:pointer}
    .btn:hover{filter:brightness(1.1)}
    .muted{color:#bfbba9; font-size:14px}

    /* Quote strip */
    .quote{position:relative; text-align:center; padding:84px 0;
      background:linear-gradient(to bottom, rgba(0,0,0,.7), rgba(0,0,0,.82)), var(--quote-image) center/cover no-repeat fixed;
      border-block:1px solid rgba(212,175,55,.18)}
    .quote__text{font-family:"Noto Serif Display",serif; font-size:clamp(18px,3vw,26px); max-width:60ch; margin:0 auto; color:#f2e9cc}
    .quote__who{color:var(--gold-soft); margin-top:10px; letter-spacing:.04em}

    /* Footer */
    .site-footer{background:linear-gradient(180deg, #0b0b0c, #0a0a0a); border-top:1px solid rgba(212,175,55,.25); color:#ddd7c0}
    .footer__inner{padding:28px 0 36px 0; display:grid; gap:18px}
    .footer__pattern{height:18px; background:var(--pattern-image) center/auto 100% repeat-x; opacity:.9}

/* ================== THEORY: GRID & CARD (MINIMAL) ================== */
/* Lưới 12 cột cho 3 card */
#theory > .container > .grid{
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: 18px;
  row-gap: 18px;
}

/* Mặc định: mỗi card chiếm 4 cột (3 card = 12) */
#theory .grid > .card{
  grid-column: span 4;
  position: relative;
  cursor: pointer;
  padding: 18px;
  border-radius: 16px;
  background: linear-gradient(145deg,#1a1a1d,#202024);
  border: 1px solid rgba(212,175,55,.25);
  color: #f1f1f1;
  transition:
    transform .25s ease,
    box-shadow .25s ease,
    border-color .25s ease,
    background .25s ease,
    grid-column .28s ease,
    opacity .28s ease;
  overflow: hidden; /* để nội dung không tràn bo góc */
}

/* Hover nhẹ để cảm giác là nút */
#theory .grid > .card:hover{
  transform: translateY(-6px) scale(1.04);
  border-color: #d4af37;
  box-shadow: 0 10px 25px rgba(212,175,55,.35);
  background: linear-gradient(145deg,#202024,#2a2a2e);
}

/* Tiêu đề & nội dung (ẩn/hiện bằng data-collapsed) */
#theory .grid > .card h3{
  margin: 2px 0 6px 0;
  font-weight: 700;
  color: #f1d27a; /* vàng mềm */
}
#theory .grid > .card .card__content{
  max-height: 0;
  opacity: 0;
  visibility: hidden;
  overflow: hidden;
  transition: max-height .32s ease, opacity .22s ease .08s, visibility 0s;
}
#theory .grid > .card[data-collapsed="false"] .card__content{
  max-height: 500px;
  opacity: 1;
  visibility: visible;
}

/* ================== FOCUS-TO-CENTER (không popup) ================== */
/* Khi vào chế độ focus: hai card phụ mờ & nhỏ, card active ra giữa */
#theory .grid.is-focused > .card{
  transform: scale(.92);
  opacity: .5;
  pointer-events: none;
}
#theory .grid.is-focused > .card.is-active{
  grid-column: 3 / 11;   /* ra giữa: span 8 cột */
  transform: scale(1.02);
  opacity: 1;
  pointer-events: auto;
  z-index: 1;

  /* KHỐNG CHẾ chiều cao để không “phình vô tội vạ” */
  max-height: 380px;     /* tuỳ chỉnh 320–420 */
  overflow-y: auto;      /* nội dung dài thì scroll trong card */
}
/* Hai card còn lại ép sát hai bên */
#theory .grid.is-focused > .card.pos-left{  grid-column: 1 / span 2; }
#theory .grid.is-focused > .card.pos-right{ grid-column: 11 / span 2; }

/* Khi focus: chỉ card active được mở nội dung */
#theory .grid.is-focused > .card:not(.is-active) .card__content{
  max-height: 0 !important;
  opacity: 0 !important;
  visibility: hidden !important;
}
#theory .grid.is-focused > .card.is-active .card__content{
  max-height: none;  /* để phần nội dung bên trong tự cao, card đã bị giới hạn bằng max-height ở trên */
}

/* Mobile: active full-width cho đẹp */
@media (max-width: 740px){
  #theory .grid.is-focused > .card.is-active{ grid-column: 1 / -1; }
  #theory .grid.is-focused > .card.pos-left{  grid-column: 1 / span 6; }
  #theory .grid.is-focused > .card.pos-right{ grid-column: 7 / span 6; }
}

/* Tôn trọng người dùng giảm chuyển động */
@media (prefers-reduced-motion: reduce){
  #theory .grid > .card,
  #theory .grid > .card .card__content{ transition: none !important; }
}
/* Background ảnh cho section #theory */
#theory{
  position: relative;
  background: url("/assets/theory_section.jpg") center/cover no-repeat;
  z-index: 0;
}

/* Overlay tối sẽ bật khi focus */
#theory::before{
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0); /* ban đầu trong suốt */
  transition: background .3s ease;
  z-index: 1;
}

/* Khi grid có .is-focused thì overlay tối đi */
#theory .grid.is-focused ~ ::before,
#theory.is-focused::before{
  background: rgba(0,0,0,.55); /* chỉnh độ tối tuỳ ý */
}

/* Đảm bảo nội dung section nằm trên overlay */
#theory > .container{
  position: relative;
  z-index: 2;
}

/* ===== Vertical timeline (text only) ===== */
#theory .tl {
  position: relative;
  margin: 12px 0 0 0;
  padding-left: 28px;   /* chừa chỗ cho trục */
  list-style: none;
}

/* Trục timeline */
#theory .tl::before {
  content:"";
  position:absolute;
  left: 12px; top: 0; bottom: 0;
  width: 2px;
  background: rgba(241,210,122,.5);
}

/* Mỗi mục */
#theory .tl__item {
  position: relative;
  margin: 0 0 22px 0;
  cursor: pointer;
}

/* Dot */
#theory .tl__dot {
  position:absolute;
  left: -22px; top: 4px;
  width: 12px; height: 12px;
  border-radius: 50%;
  background: #d4af37;
  box-shadow: 0 0 0 3px rgba(212,175,55,.25);
}

/* Title */
#theory .tl__title {
  margin: 0;
  font-weight: 700;
  color: #f1d27a;
  transition: color .25s ease;
}
#theory .tl__item:hover .tl__title {
  color: #fff;
}

/* Nội dung ẩn/hiện */
#theory .tl__content {
  max-height: 0;
  opacity: 0;
  visibility: hidden;
  overflow: hidden;
  transition: max-height .3s ease, opacity .25s ease;
  color: #eee;
  line-height: 1.6;
  margin-top: 4px;
}
#theory .tl__item[data-open="true"] .tl__content {
  max-height: 260px;
  opacity: 1;
  visibility: visible;
}

#theory {
  position: relative;
  background: url("/assets/theory_section.jpg") center/cover no-repeat;
}

#theory::before {
  content:"";
  position:absolute; inset:0;
  background: rgba(0, 0, 0, 0.55);  /* chỉnh độ tối tùy thích */
  z-index: 1;
}
#theory > .container {
  position: relative;
  z-index: 2;  /* chữ nằm trên overlay */
}

/* Mượt hơn cho title & dot */
#theory .tl__title{
  transition: color .28s cubic-bezier(.2,.7,.2,1), transform .28s cubic-bezier(.2,.7,.2,1);
  will-change: color, transform;
}
#theory .tl__item:hover .tl__title{ transform: translateX(2px); }

/* Dot pulse khi mở */
#theory .tl__dot{
  transition: transform .28s cubic-bezier(.2,.7,.2,1), box-shadow .28s;
  will-change: transform, box-shadow;
}
#theory .tl__item[data-open="true"] .tl__dot{
  transform: scale(1.15);
  box-shadow: 0 0 0 6px rgba(212,175,55,.18);
}

/* Nội dung: dùng transition opacity; chiều cao sẽ do JS animate */
#theory .tl__content{
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  transition: opacity .22s ease;
  will-change: height, opacity;
}
#theory .tl__item[data-open="true"] .tl__content{
  opacity: 1;
  visibility: visible;
}

/* tôn trọng reduced motion */
@media (prefers-reduced-motion: reduce){
  #theory .tl__title, #theory .tl__dot, #theory .tl__content{ transition: none !important; }
}
/* Timeline text-only (override) */
#theory .tl__content{
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  transition: opacity .22s ease;
  will-change: height, opacity;
  /* KHÔNG để max-height ở đây */
}
#theory .tl__item[data-open="true"] .tl__title {
  transform: scale(1.5);
  line-height: 1.2;
  letter-spacing: 0.5px;
}


/* Tiêu đề của mỗi mục timeline */
#theory .tl__title {
  margin: 0;
  font-weight: 700;
  color: #f1d27a;
  transition: transform .3s cubic-bezier(.2,.7,.2,1), color .3s;
  transform-origin: left center;
}

/* Khi mục mở thì phóng to + đổi màu chữ */
#theory .tl__item[data-open="true"] .tl__title {
  transform: scale(1.2);
  color: #fffb00e7; 
}
/* Hiệu ứng chữ kim loại */
.metallic-text {
  font-weight: 800;
  position: relative;
  display: inline-block;
  background: linear-gradient(
    90deg,
    #f7f7f7 0%,
    #d4af37 20%,
    #9c7c38 40%,
    #d4af37 60%,
    #f7f7f7 80%
  );
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: shine 5s linear infinite;
}

/* Hiệu ứng ánh sáng chạy ngang */
@keyframes shine {
  0%   { background-position: 200% center; }
  100% { background-position: -200% center; }
}

/*section thực tiễn*/
#cause-effect-flow{
  position: relative;
  background: url("/assets/thuctien_section_background.jpg") center/cover no-repeat;
  z-index: 0;
}
/* ===== flow grid ===== */
.flow-grid{
  display:grid;
  grid-template-columns: 220px 1fr 420px;
  gap:24px;
  align-items:center;
  margin-top:24px;
}

/* left list */
.topic-list{ display:flex; flex-direction:column; gap:12px; }
.topic{
  background:transparent;
  border:1px solid rgba(212,175,55,.18);
  color:var(--gold-soft);
  padding:10px 14px; border-radius:999px;
  cursor:pointer; text-align:left;
  transition: transform .18s ease, box-shadow .18s, background .18s;
}
.topic:hover{ transform: translateX(4px); box-shadow:0 10px 24px rgba(212,175,55,.06) }
.topic.active{ background: rgba(212,175,55,.06); box-shadow:0 12px 30px rgba(212,175,55,.06) }

/* center svg area */
.flow-center{ display:flex; align-items:center; justify-content:center; height:120px; pointer-events:none; }
.connector{ width:100%; max-width:360px; height:60px; overflow:visible; }
.connector-path{ transition: stroke .2s ease; }
.connector-shine {
  opacity: 0;
  transition: opacity .18s;
}

/* arrow head */
.arrow-head{ transition: opacity .25s ease, transform .25s ease; transform-origin:260px 30px; }

/* right cards */
.flow-right{ display:flex; flex-direction:column; gap:18px; }
.card{
  background: linear-gradient(145deg,#141414,#1a1a1a);
  border: 1.5px solid rgba(212,175,55,.18);
  padding: 32px 28px;         /* tăng padding */
  border-radius: 22px;        /* bo góc lớn hơn */
  color: #eee;
  box-shadow: 0 10px 28px rgba(0,0,0,.5);
  font-size: 1.22rem;         /* tăng cỡ chữ */
  min-height: 110px;          /* cao hơn */
  transition: transform .28s cubic-bezier(.2,.7,.2,1), opacity .24s;
  overflow: auto;
}
.card__title {
  font-size: 1.18rem;         /* tiêu đề lớn hơn */
  font-weight: 600;
  color: var(--gold-soft);
  margin: 0 0 10px 0;
}
.card__body {
  font-size: 1.5rem;         /* nội dung lớn hơn */
  color: #ddd;
  line-height: 1.65;
}

/* reduced motion */
@media (prefers-reduced-motion: reduce){
  .connector-shine, .topic, .card { transition: none !important; }
}
/* Ẩn baseline mặc định */
.connector-path{
  opacity: 1;              /* ẩn đường mờ nền */
}

/* ẩn shine & arrow ban đầu */
.connector-shine,
.arrow-head{
  opacity: 0;
  transition: opacity .18s ease, transform .18s ease;
}

/* khi đang chạy animation, chúng ta sẽ bật opacity via JS */
/* dot vuông/tron nổi bên trái, position fixed để JS set vị trí chính xác */
/* DOT cố định bên trái, JS set left/top (viewport coords) */

/* anchor bên trong card (vô hình, chỉ để đo tọa độ) */
.cause-card { position: relative; } /* ensure anchor absolute is relative to card */
.cause-card .anchor-dot{
  position: absolute;
  left: -12px;   /* đặt anchor nằm bên trái card, chỉnh value để dot cách card nhiều/ít */
  top: 12px;     /* chỉnh để dot nằm ngang hàng với tiêu đề/nguyên nhân */
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: transparent; /* set màu tạm để debug: rgba(255,0,0,0.4) */
  pointer-events: none;
  z-index: 2;
}

/* dot fixed hiển thị ngoài (JS set left/top theo viewport) */

/* đảm bảo section là reference cho dot */
#cause-effect-flow { position: relative; }

/* dot absolute trong section (sẽ cuộn cùng section) */
#flow-dot-left {
  position: absolute;
  left: 260px; /* đúng điểm cuối line SVG */
  top: 30px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: linear-gradient(180deg,#f1d27a,#d4af37);
  border: 3px solid rgba(0,0,0,0.12);
  box-shadow: 0 12px 28px rgba(212,175,55,0.14);
  transform: translate(-50%,-50%);
  z-index: 2;
  opacity: 1;
  transition: box-shadow .18s;
}
#flow-dot-left.active {
  box-shadow:0 22px 44px rgba(212,175,55,0.18);
}

/* responsive: nếu khoảng cách hẹp, giảm kích thước dot */
@media (max-width:740px){
  .flow-dot{ width:18px; height:18px; }
}

/* dot nằm bên trong card, neo theo tiêu đề (adjust theo layout) */
.card { position: relative; }
.card .dot {
  position: absolute;
  left: -18px;    /* điều chỉnh: khoảng cách dot so với cạnh trái card */
  top: 14px;      /* điều chỉnh: cao thấp (căn dọc theo tiêu đề) */
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: linear-gradient(180deg,#f1d27a,#d4af37);
  border: 3px solid rgba(0,0,0,0.12);
  box-shadow: 0 10px 24px rgba(212,175,55,0.12);
  pointer-events: none;
  z-index: 2;
  transition: transform .22s, box-shadow .22s;
}
.card .dot.active { transform: scale(1.12); box-shadow: 0 18px 40px rgba(212,175,55,.18); }

.flow-right { position: relative; }
#flow-dot-left {
  position: absolute;
  left: -32px; /* cách trái card, có thể chỉnh lại */
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #f1d27a;
  box-shadow: 0 0 0 8px #f1d27a88, 0 0 16px 8px #f1d27a44;
  z-index: 2;
  transition: box-shadow 0.2s;
  top: 50%;
  transform: translateY(-50%);
}
#flow-dot-left.active {
  box-shadow: 0 0 0 16px #f1d27a88, 0 0 32px 16px #f1d27a44;
}

/* Brush style for connector line */
.connector-path {
  stroke: url(#brush-gradient);
  stroke-width: 8px;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.7;
  filter: blur(1.2px);
  stroke-dasharray: none;
}

/* Đảm bảo topic nằm trên line */
.flow-left {
  position: relative;
  z-index: 2; /* cao hơn SVG */
}
.flow-center {
  position: relative;
  z-index: 1; /* SVG thấp hơn */
}
.topic-card {
  position: relative;
  z-index: 10; /* Card cao hơn line */
}
.topic {
  position: relative;
  z-index: 10; /* cao nhất */
}

.topic-list {
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.topic-card {
  background: rgba(0, 0, 0, 0.98); /* nền đen gần như đặc, có thể giảm opacity nếu muốn nhẹ hơn */
  border: 2px solid #d4af37;
  border-radius: 16px;
  padding: 16px 18px;
  color: #f1d27a;
  box-shadow: 0 8px 32px rgba(212,175,55,.08);
  transition: transform .22s, box-shadow .22s, background .22s;
  cursor: pointer;
  position: relative;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
.topic-card:hover, .topic-card.active {
  background: rgba(18,18,20, 1); /* đậm hơn khi hover/active */
  box-shadow: 0 12px 36px rgba(212,175,55,.18);
  border-color: #9f9986;
  transform: scale(1.04);
}
.topic-title {
  font-family: "Noto Serif Display", serif;
  font-size: 1.2rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: #f1d27a;
}

.solution-slider {
  background: transparent;
  border: 3.5px solid #cabe96;
  border-radius: 54px 44px 64px 44px;
  color: #f1d27a;
  text-align: center;
  width: 600px;           /* cố định chiều rộng */
  min-height: 520px;      /* cố định chiều cao tối thiểu */
  max-height: 640px;      /* không vượt quá chiều cao này */
  box-sizing: border-box;
  margin: 32px auto;
  box-shadow: 0 8px 32px rgba(212,175,55,.08);
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.slider-title {
  font-size: 2.2rem;
  font-family: "Noto Serif Display", serif;
  font-weight: 700;
  margin: 0 32px;
  color: #f1d27a;
}
.slider-btn {
  background: linear-gradient(90deg, #18181b 60%, #232326 100%);
  color: #f1d27a;
  font-size: 2.6rem;
  font-weight: 800;
  border-radius: 999px;
  cursor: pointer;
  padding: 0 28px;
  box-shadow: 0 2px 12px rgba(212,175,55,.10);
  transition: 
    color .18s,
    background .22s,
    box-shadow .22s,
    border-color .22s;
  outline: none;
}
.slider-btn:hover, .slider-btn:focus {
  background: linear-gradient(90deg, #ffffff 60%, #d4af37 100%);
  color: #4d4d41;
  border-color: #fffbe6;
  box-shadow: 0 4px 24px rgba(212,175,55,.18);
}
.slider-content {
  margin-top: 38px;
  font-size: 2rem;
  color: #eee;
  min-height: 80px;       /* giữ nội dung không bị co lại */
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.slider-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  margin-bottom: 18px;
}
.solution-bg {
  background: url('../assets/quizz_section.jpg') center/cover no-repeat;
  /* hoặc dùng background-color, overlay, ... */
  position: relative;
}

/* Tiêu đề lớn, chủ đề: font serif sang trọng */
.slider-title,
.topic-title,
.section__title {
  font-family: "Noto Serif Display", serif;
  font-weight: 800;
  letter-spacing: 0.02em;
  color: #f1d27a;
}

/* Nút chuyển: giữ font serif, đậm */
.slider-btn {
  font-family: "Noto Serif Display", serif;
  font-weight: 800;
}

/* Nội dung giải pháp, ví dụ, quiz: font hiện đại, dễ đọc */
.slider-content,
.slider-example,
.solution-desc,
.quiz-mini,
.card__body,
.topic-desc {
  font-family: Inter, Arial, sans-serif;
  font-size: 1.18rem;
  color: #eee;
  letter-spacing: 0.01em;
}

/* Nếu có phần ví dụ nhỏ, cho font italic và màu vàng nhạt */
.slider-example {
  font-style: italic;
  color: #f1d27a;
  font-size: 1.08rem;
  margin-top: 18px;
}

/* Quiz mini: font hiện đại, nổi bật */
.quiz-mini {
  font-family: Inter, Arial, sans-serif;
  font-size: 1.12rem;
  color: #f1d27a;
  font-weight: 600;
}

/* Card giải pháp: font hiện đại cho nội dung, serif cho tiêu đề */
.card__title {
  font-family: "Noto Serif Display", serif;
  font-size: 1.22rem;
  font-weight: 700;
  color: var(--gold-soft);
}
.card__body {
  font-family: Inter, Arial, sans-serif;
  font-size: 1.18rem;
  color: #ddd;
}
.solution-stat {
  min-width: 220px;
  padding: 32px 18px;
  background: transparent;
  border: 2px solid #d4af37;
  border-radius: 24px;
  color: #f1d27a;
  font-family: Inter, Arial, sans-serif;
  font-size: 1.18rem;
  box-shadow: 0 4px 24px rgba(212,175,55,.10);
  display: flex;
  align-items: center;
  justify-content: center;
}
.stat-box {
  text-align: center;
}
.stat-value {
  font-size: 1.35rem;
  font-weight: 700;
  color: #fffbe6;
  letter-spacing: 0.02em;
  display: block;
  margin-bottom: 4px;
}
/* Mindmap section: nền đen, padding lớn, chữ sáng */
.mindmap-dark {
  background: #000000;
  padding: 64px 0;
}
.mindmap-dark .section__title,
.mindmap-dark .muted {
  color: #f1d27a;
}
.mindmap-dark img {
  box-shadow: 0 8px 32px #0008;
}

/* Podcast section: nền đen, padding lớn, chữ sáng */
.podcast-dark {
  background: #000000;
  padding: 64px 0;
}
.podcast-dark .section__title,
.podcast-dark .muted {
  color: #f1d27a;
}
.podcast-dark video {
  box-shadow: 0 8px 32px #0008;
}