.lta-wrap { max-width: 1080px; margin: 0 auto; padding: 24px 24px 80px; }

    /* Hero */
    .lta-hero { text-align: center; padding: 20px 0 24px; }
    .lta-hero h1 { font-size: clamp(1.8rem,4vw,2.6rem); font-weight: 800; letter-spacing:-.03em; }
    .lta-hero h1 span { color: #e0556e; }
    .lta-hero p { max-width: 560px; margin: 10px auto 0; color: var(--ink-soft); font-size: .94rem; line-height: 1.6; }

    /* Tabs (centered pill) */
    .lta-tabs-wrap { display: flex; justify-content: center; margin: 0 0 28px; }
    .lta-cat-tabs {
      display: inline-flex; gap: 2px;
      background: #f5f6f8;
      border-radius: 999px;
      padding: 4px;
      border: 1.5px solid var(--line);
      flex-wrap: wrap;
    }
    .lta-tab {
      padding: 8px 16px;
      border: none; background: none;
      border-radius: 999px;
      font-size: .85rem; font-weight: 700;
      color: var(--ink-mute);
      cursor: pointer;
      transition: all .15s var(--ease);
      display: inline-flex; align-items: center; gap: 6px;
      font-family: inherit;
    }
    .lta-tab:hover { color: var(--ink); }
    .lta-tab.active {
      background: #fff;
      color: #c5394d;
      box-shadow: 0 2px 8px rgba(0,0,0,0.06);
    }
    .lta-tab-count {
      font-size: .7rem;
      background: rgba(0,0,0,0.06);
      padding: 1px 7px;
      border-radius: 999px;
      font-weight: 700;
    }
    .lta-tab.active .lta-tab-count { background: #fde7eb; color: #c5394d; }
    .lta-tab-ic { font-size: 1rem; }

    /* Category block */
    .lta-cat-block { margin-bottom: 36px; }
    .lta-cat-bar {
      display: flex; align-items: center; gap: 12px;
      padding: 8px 0 12px;
      margin-bottom: 14px;
      border-bottom: 2px solid var(--line);
    }
    .lta-cat-bar-ic { font-size: 1.25rem; }
    .lta-cat-bar-title { font-size: 1.05rem; font-weight: 800; flex: 1; letter-spacing: -0.01em; }
    .lta-cat-bar-count { font-size: .76rem; color: var(--ink-mute); font-weight: 600; }
    .lta-cat-block[data-cat="communication"] .lta-cat-bar { border-bottom-color: #6c8ff5; }
    .lta-cat-block[data-cat="vocabulary"]    .lta-cat-bar { border-bottom-color: #f5b53b; }
    .lta-cat-block[data-cat="grammar"]       .lta-cat-bar { border-bottom-color: #e0556e; }

    /* Topic cards on index */
    .lta-card-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
      gap: 8px;
    }
    .lta-card {
      display: flex; align-items: center; gap: 10px;
      padding: 12px 14px;
      background: #fff;
      border: 1.5px solid var(--line);
      border-radius: 10px;
      cursor: pointer;
      font-family: inherit;
      text-align: left;
      transition: all .15s var(--ease);
    }
    .lta-card:hover {
      border-color: #e0556e;
      background: #fffafb;
    }
    .lta-card-grade {
      font-size: .68rem; font-weight: 800;
      color: #fff;
      padding: 3px 7px; border-radius: 4px;
      flex-shrink: 0;
      letter-spacing: .03em;
    }
    .lta-card[data-cat="communication"] .lta-card-grade { background: #6c8ff5; }
    .lta-card[data-cat="vocabulary"]    .lta-card-grade { background: #f59e2c; }
    .lta-card[data-cat="grammar"]       .lta-card-grade { background: #e0556e; }
    .lta-card-name { flex: 1; font-size: .9rem; font-weight: 600; color: var(--ink); }
    .lta-card-arrow { color: var(--ink-mute); font-size: .9rem; font-weight: 700; }
    .lta-card:hover .lta-card-arrow { color: #e0556e; }

    /* Back button */
    .lta-back {
      display: inline-flex; align-items: center; gap: 6px;
      font-size: .85rem; font-weight: 700; color: #e0556e;
      cursor: pointer; margin-bottom: 16px; background: none; border: none;
      padding: 4px 0;
      font-family: inherit;
    }
    .lta-back:hover { text-decoration: underline; }

    /* Detail head */
    .lta-detail-head {
      padding-bottom: 18px;
      margin-bottom: 24px;
      border-bottom: 2px solid var(--line);
    }
    .lta-detail-meta {
      display: inline-flex; align-items: center; gap: 8px;
      font-size: .72rem; font-weight: 700;
      text-transform: uppercase; letter-spacing: .06em;
      color: var(--ink-mute);
      margin-bottom: 10px;
    }
    .lta-detail-meta-cat { color: #c5394d; }
    .lta-detail-name { font-size: 1.65rem; font-weight: 800; line-height: 1.25; letter-spacing: -0.02em; color: var(--ink); margin: 0; }

    /* Section block - textbook style */
    .lta-topic-body { display: flex; flex-direction: column; gap: 0; }
    .lta-sec { margin-bottom: 28px; }
    .lta-sec-head {
      display: flex; align-items: baseline; gap: 10px;
      margin-bottom: 14px;
      padding-bottom: 8px;
      border-bottom: 1.5px dashed var(--line);
      flex-wrap: wrap;
    }
    .lta-sec-num {
      font-size: 1.05rem; font-weight: 800;
      color: #e0556e;
      font-family: 'Georgia', 'Times New Roman', serif;
      font-style: italic;
      min-width: 24px;
    }
    .lta-sec-title { font-size: 1.02rem; font-weight: 800; letter-spacing: -0.01em; color: var(--ink); }
    .lta-sec-en { font-size: .7rem; color: var(--ink-mute); font-weight: 700; text-transform: uppercase; letter-spacing: .05em; }
    .lta-sec-hint { font-size: .75rem; color: var(--ink-mute); font-weight: 500; margin-left: auto; }

    /* === Layout 1: Vocabulary grid === */
    .vocab-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(155px, 1fr));
      gap: 8px;
    }
    .vocab-item {
      position: relative;
      padding: 10px 12px;
      background: #fffaf2;
      border: 1.5px solid #f5d9a8;
      border-radius: 8px;
      cursor: pointer;
      transition: all .15s var(--ease);
      font-family: inherit;
      text-align: left;
      display: flex; flex-direction: column;
    }
    .vocab-item::after {
      content: '🔊';
      position: absolute; top: 6px; right: 8px;
      font-size: .72rem; opacity: 0;
      transition: opacity .15s;
    }
    .vocab-item:hover {
      border-color: #f59e2c;
      transform: translateY(-1px);
      box-shadow: 0 4px 12px rgba(245,158,44,0.15);
    }
    .vocab-item:hover::after { opacity: 0.55; }
    .vocab-item.is-playing { background: #ffe9c8; border-color: #f59e2c; }
    .vocab-en { font-size: .98rem; font-weight: 800; color: #5b3d1f; line-height: 1.3; }
    .vocab-vi { font-size: .8rem; color: var(--ink-mute); font-weight: 500; margin-top: 3px; }

    /* === Layout 2: Communication patterns === */
    .pattern-list { display: flex; flex-direction: column; gap: 10px; }
    .pattern-item {
      padding: 14px 18px;
      background: #f4f7ff;
      border-left: 4px solid #6c8ff5;
      border-radius: 6px;
    }
    .pattern-en { font-size: 1rem; font-weight: 700; color: #1e3a8a; line-height: 1.5; }
    .pattern-vi { font-size: .88rem; color: #4b5e8a; margin-top: 4px; font-style: italic; }

    /* === Layout 3: Grammar formula === */
    .formula-list { display: flex; flex-direction: column; gap: 8px; }
    .formula-item {
      padding: 12px 16px;
      background: #fffafb;
      border: 1.5px solid #f3d3da;
      border-left: 4px solid #e0556e;
      border-radius: 6px;
      font-family: 'Consolas', 'Courier New', monospace;
      font-size: .94rem; font-weight: 600;
      color: #5e1a26;
      line-height: 1.55;
    }

    /* === Layout 4: Alphabet 26 grid === */
    .alphabet-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(115px, 1fr));
      gap: 10px;
    }
    .alphabet-card {
      position: relative;
      display: flex; flex-direction: column; align-items: center; gap: 4px;
      padding: 14px 10px 12px;
      background: linear-gradient(160deg, #ffffff, #fff5f7);
      border: 1.5px solid #f0c4ce;
      border-radius: 10px;
      cursor: pointer;
      transition: all .18s var(--ease);
      font-family: inherit;
    }
    .alphabet-card:hover {
      transform: translateY(-3px);
      border-color: #e0556e;
      box-shadow: 0 8px 22px rgba(224,85,110,0.18);
    }
    .alphabet-card.is-playing {
      transform: scale(0.97);
      border-color: #e0556e;
      background: linear-gradient(160deg, #fde7eb, #fbcad2);
    }
    .alphabet-letter {
      display: flex; align-items: baseline; gap: 4px;
      font-weight: 800; line-height: 1;
      background: linear-gradient(135deg, #e0556e, #c5394d);
      -webkit-background-clip: text;
      background-clip: text;
      -webkit-text-fill-color: transparent;
    }
    .alphabet-letter-upper { font-size: 2rem; }
    .alphabet-letter-lower { font-size: 1.4rem; opacity: 0.7; }
    .alphabet-ipa {
      font-family: 'Consolas', 'Courier New', monospace;
      font-size: .82rem; font-weight: 700;
      color: #5e1a26;
    }
    .alphabet-word {
      font-size: .8rem; font-weight: 600;
      color: var(--ink-soft);
    }

    /* Bullet list (uses) */
    .lta-bullet-list { font-size: .94rem; line-height: 1.75; padding-left: 22px; margin: 0; color: var(--ink); }
    .lta-bullet-list li { margin-bottom: 4px; }

    /* Signal/situation chips */
    .lta-sig-wrap { display: flex; flex-wrap: wrap; gap: 8px; }
    .lta-sig-chip {
      background: #fff;
      border: 1.5px solid #e0556e;
      color: #c5394d;
      padding: 5px 12px;
      border-radius: 999px;
      font-size: .82rem; font-weight: 600;
    }

    /* Examples */
    .lta-ex-list { display: flex; flex-direction: column; gap: 8px; }
    .lta-ex-item {
      background: #fafbfc;
      border-left: 3px solid #e0556e;
      padding: 10px 14px;
      border-radius: 4px;
    }
    .lta-ex-en { font-size: .94rem; color: var(--ink); font-weight: 500; line-height: 1.5; }
    .lta-ex-vi { font-size: .82rem; color: var(--ink-mute); margin-top: 4px; font-style: italic; }

    /* Tip box */
    .lta-tip {
      background: #fff8e1;
      border-left: 3px solid #f5872e;
      padding: 12px 16px; border-radius: 6px;
      font-size: .9rem; color: #5b3d1f;
      line-height: 1.6;
      margin-top: 4px;
    }
    .lta-tip strong { color: #c46b1e; font-weight: 800; }

    /* Detail desc (cho tool) */
    .lta-detail-desc { color: var(--ink-mute); font-size: .92rem; margin: 8px 0 0; line-height: 1.55; }

    /* Tool card variant */
    .lta-card-tool { padding: 14px 16px; }
    .lta-card-info { flex: 1; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
    .lta-card-sub { font-size: .76rem; color: var(--ink-mute); font-weight: 500;
                    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

    /* === Tools (number / year / time / verbs) === */
    .tool-box { display: flex; flex-direction: column; gap: 14px; }
    .tool-label { font-size: .85rem; font-weight: 700; color: var(--ink); }
    .tool-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
    .tool-input {
      flex: 1; min-width: 160px;
      padding: 10px 14px;
      border: 1.5px solid var(--line);
      border-radius: 8px;
      font-size: 1rem;
      font-family: inherit;
      background: #fff;
      transition: border-color .15s var(--ease);
    }
    .tool-input:focus { outline: none; border-color: #e0556e; box-shadow: 0 0 0 3px rgba(224,85,110,0.12); }
    .tool-input-sm { flex: 0 0 90px; min-width: 70px; text-align: center; }
    .tool-sep { font-size: 1.4rem; font-weight: 800; color: var(--ink-mute); }
    .tool-btn {
      padding: 10px 16px;
      border: none; border-radius: 8px;
      font-size: .88rem; font-weight: 700;
      cursor: pointer;
      font-family: inherit;
      transition: all .15s var(--ease);
    }
    .tool-btn-speak {
      background: linear-gradient(135deg, #e0556e, #c5394d);
      color: #fff;
      box-shadow: 0 3px 10px rgba(224,85,110,0.25);
    }
    .tool-btn-speak:hover { transform: translateY(-1px); box-shadow: 0 5px 14px rgba(224,85,110,0.32); }
    .tool-out {
      padding: 16px 18px;
      background: linear-gradient(135deg, #fff8fa, #fef0f3);
      border: 1.5px solid #f3d3da;
      border-radius: 10px;
      font-size: 1.1rem; font-weight: 700;
      color: #5e1a26;
      line-height: 1.5;
      min-height: 56px;
      word-break: break-word;
    }
    .tool-quick { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
    .tool-quick-label { font-size: .8rem; color: var(--ink-mute); font-weight: 600; margin-right: 4px; }
    .tool-chip {
      padding: 4px 10px;
      border: 1.5px solid var(--line);
      background: #fff;
      border-radius: 999px;
      font-size: .78rem; font-weight: 600;
      color: var(--ink-soft);
      cursor: pointer;
      font-family: inherit;
      transition: all .12s var(--ease);
    }
    .tool-chip:hover { border-color: #e0556e; color: #c5394d; background: #fffafb; }
    .tool-note {
      background: #f4f7ff;
      border-left: 3px solid #6c8ff5;
      padding: 10px 14px; border-radius: 6px;
      font-size: .85rem; color: #1e3a8a;
      line-height: 1.55;
    }
    .tool-note strong { color: #4f7df0; font-weight: 800; }
    .tool-note em { font-style: italic; color: #1e3a8a; font-weight: 700; }

    /* Tool table (irregular verbs) */
    .tool-table-wrap {
      max-height: 540px; overflow-y: auto;
      border: 1.5px solid var(--line);
      border-radius: 8px;
    }
    .tool-table {
      width: 100%; border-collapse: collapse;
      font-size: .9rem;
    }
    .tool-table thead {
      position: sticky; top: 0; z-index: 1;
      background: #fff8fa;
    }
    .tool-table th {
      text-align: left; padding: 10px 12px;
      font-size: .76rem; font-weight: 800;
      color: #c5394d;
      text-transform: uppercase; letter-spacing: .04em;
      border-bottom: 2px solid #f3d3da;
    }
    .tool-table td {
      padding: 8px 12px;
      border-bottom: 1px solid #f5f6f8;
    }
    .tool-table tbody tr:hover { background: #fffafb; }
    .tool-verb {
      background: none; border: none;
      font-size: .94rem; font-weight: 700;
      color: var(--ink);
      cursor: pointer; padding: 2px 4px;
      font-family: inherit;
      border-radius: 4px;
      transition: background .12s;
    }
    .tool-verb:hover { background: #fde7eb; color: #c5394d; }
    .tool-verb-vi { color: var(--ink-mute); font-size: .85rem; font-style: italic; }

    .lta-hidden { display: none; }

    @media(max-width:640px) {
      .lta-wrap { padding: 20px 16px 60px; }
      .lta-cat-tabs { flex-wrap: wrap; }
      .lta-tab { padding: 7px 12px; font-size: .8rem; }
      .vocab-grid { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); }
      .alphabet-grid { grid-template-columns: repeat(auto-fill, minmax(95px, 1fr)); gap: 8px; }
      .alphabet-letter-upper { font-size: 1.7rem; }
      .alphabet-letter-lower { font-size: 1.2rem; }
      .lta-detail-name { font-size: 1.35rem; }
      .lta-card-grid { grid-template-columns: 1fr; }
    }