* { box-sizing: border-box; margin:0; padding:0; }

  body {
    font-family: var(--nml-font, 'Plus Jakarta Sans', system-ui, sans-serif);
    color: var(--nml-tx, #0F172A);
    background: linear-gradient(180deg, #FBFCFE, #EEF3FA);
    min-height: 100vh;
    position: relative;
    overflow-x: hidden;
  }
.page-content a {
    text-decoration:none!important;
}
  /* ===== 06. BACKGROUND SYSTEM ===== */
  .nml-lib-orb-blue   { position:fixed; width:640px; height:640px; top:-160px; right:-160px; background:#2F6BFF; border-radius:50%; filter:blur(80px); opacity:0.12; z-index:-1; pointer-events:none; }
  .nml-lib-orb-green  { position:fixed; width:560px; height:560px; bottom:-140px; left:-140px; background:#22C55E; border-radius:50%; filter:blur(80px); opacity:0.09; z-index:-1; pointer-events:none; }
  .nml-lib-orb-purple { position:fixed; width:420px; height:420px; top:40%; left:40%; background:#7C3AED; border-radius:50%; filter:blur(80px); opacity:0.07; z-index:-1; pointer-events:none; }

  .nml-lib-wrap { max-width: 1280px; margin: 0 auto; padding: 0px 12px 96px; }

  /* ===== 07. GLASSMORPHISM ===== */
  .glass-hero {
    background: rgba(255,255,255,0.60);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255,255,255,0.80);
    border-radius: 16px;
    box-shadow: 0 4px 16px rgba(47,107,255,0.10), inset 0 1px 0 rgba(255,255,255,0.90);
  }

  /* ===== BANNER — 2 cột: chữ trái, hình phải ===== */
  .nml-lib-banner {
    display:flex; align-items:center; gap:48px;
    max-width: 1280px; margin: 0 auto 8px;
  }
  .nml-lib-banner-text { flex: 0 0 44%; text-align:left; }
  .nml-lib-banner-visual { flex: 1 1 56%; min-width:0; }

  @media (max-width: 900px) {
    .nml-lib-banner { flex-direction:column; text-align:center; gap:8px; }
    .nml-lib-banner-text { flex:none; width:100%; text-align:center; }
    .nml-lib-banner-visual { flex:none; width:100%; }
  }

  .nml-lib-eyebrow {
    margon-top:30px!important;
    display:inline-flex; align-items:center; gap:6px;
    font-size:var(--nml-text-overline, 11px); font-weight:var(--nml-fw-bold, 700); letter-spacing:.10em; text-transform:uppercase;
    color: var(--nml-blue, #2F6BFF);
    border-radius: var(--nml-r-pill, 999px)
  }
  .nml-lib-banner-text h1 {
    font-size:  var(--nml-text-display, clamp(36px, 6vw, 56px)) !important;
    font-weight: var(--nml-fw-bold, 700) !important;
    line-height: 1.2 !important; letter-spacing: -.02em !important;
    color: var(--nml-tx, #0F172A) !important;
    margin-bottom: 16px;
  }
  .nml-lib-banner-text h1 span { color: var(--nml-blue, #2F6BFF); }
  .nml-lib-banner-text p { font-size:var(--nml-text-body, clamp(15px,1.5vw,16px)); color: var(--nml-tx2, #475569); line-height:1.6; }

  /* ===== ABOUT / GIỚI THIỆU CHI TIẾT ===== */
  .nml-lib-about { max-width: 860px; margin: 36px auto 0; }
  .nml-lib-about-lead {
    font-size:var(--nml-text-body, clamp(15px,1.5vw,16px)); line-height:1.6; color: var(--nml-tx2, #475569);
    text-align:center; margin-bottom:24px;
  }
  .nml-lib-about-lead strong { color: var(--nml-tx, #0F172A); font-weight: var(--nml-fw-semibold, 600); }

  /* mini before/after flow */
  .nml-lib-flow {
    display:flex; flex-direction:column; gap:8px;
    margin: 0 auto 28px; max-width:560px;
  }
  .nml-lib-flow-row {
    display:flex; align-items:center; justify-content:center; flex-wrap:wrap;
    gap:8px; padding:10px 16px; border-radius: var(--nml-r-pill, 999px);
    background: rgba(148,163,184,.08); border:1px solid rgba(148,163,184,.18);
  }
  .nml-lib-flow-row.good { background: rgba(47,107,255,.05); border-color: rgba(47,107,255,.18); }
  .nml-lib-flow-step {
    font-size:12.5px; font-weight:var(--nml-fw-semibold, 600); color: var(--nml-tx2, #475569);
    padding:4px 10px; border-radius: var(--nml-r-pill, 999px); background:#fff;
  }
  .nml-lib-flow-step.muted { color: var(--nml-tx3, #94A3B8); }
  .nml-lib-flow-step.bad   { color:#DC2626; background:rgba(220,38,38,.08); }
  .nml-lib-flow-step.good  { color: var(--nml-blue, #2F6BFF); background:rgba(47,107,255,.10); }
  .nml-lib-flow-step.best  { color:#15803D; background:rgba(34,197,94,.12); font-weight:var(--nml-fw-bold, 700); }
  .nml-lib-flow-arrow { font-size:13px; color: var(--nml-tx3, #94A3B8); }

  /* ===== ĐỐI TƯỢNG & HƯỚNG SỬ DỤNG — 3 card có hình ===== */
  .nml-lib-persona-wrap { max-width: 1000px; margin: 56px auto 0; }
  .nml-lib-persona-head { text-align:center; margin-bottom: 24px; }
  .nml-lib-persona-head h2 {
    font-size: var(--nml-text-h2, clamp(22px,3.5vw,28px)) !important;
    font-weight: var(--nml-fw-semibold, 600) !important;
    color: var(--nml-tx, #0F172A) !important;
    margin-top:8px;
  }

  .nml-lib-persona-grid { display:grid; grid-template-columns: repeat(3, 1fr); gap:20px; }
  @media (max-width: 800px) { .nml-lib-persona-grid { grid-template-columns: 1fr; } }

  .nml-lib-persona-card {
    background: rgba(255,255,255,0.70);
    backdrop-filter: blur(16px);
    border: 1px solid rgba(255,255,255,0.80);
    border-radius: var(--nml-r-md, 14px);
    overflow:hidden;
    transition: transform var(--nml-t-trans, 250ms) ease, box-shadow var(--nml-t-trans, 250ms) ease;
  }
  .nml-lib-persona-card:hover { transform: translateY(-3px); box-shadow: var(--nml-sh-lg, 0 8px 24px rgba(0,0,0,.10)); }

  .nml-lib-persona-illu { height:132px; display:flex; align-items:center; justify-content:center; }
  .nml-lib-persona-illu svg { width:78%; height:78%; }
  .nml-lib-persona-illu.blue  { background: linear-gradient(135deg, rgba(47,107,255,.10), rgba(47,107,255,.02)); }
  .nml-lib-persona-illu.amber { background: linear-gradient(135deg, rgba(245,158,11,.10), rgba(245,158,11,.02)); }
  .nml-lib-persona-illu.green { background: linear-gradient(135deg, rgba(34,197,94,.10), rgba(34,197,94,.02)); }

  .nml-lib-persona-body { padding: 18px 20px 22px; }
  .nml-lib-persona-body h4 { font-size:var(--nml-text-h3, clamp(18px,2vw,20px)); font-weight:var(--nml-fw-semibold, 600); color: var(--nml-tx, #0F172A); margin-bottom:6px; }
  .nml-lib-persona-body p { font-size:var(--nml-text-caption, 12px); line-height:1.55; color: var(--nml-tx2, #475569); }

  /* ===== HERO ILLUSTRATION ===== */
  .nml-lib-hero-illustration { text-align:center; }
  .nml-lib-hero-illustration svg { width:100%; max-width:100%; height:auto; }
  .nml-lib-hero-caption { margin-top:14px; font-size:var(--nml-text-caption, 12px); color:var(--nml-tx3, #94A3B8); font-style:italic; }
  .nml-lib-hero-cta { margin-top:22px; }

  /* ===== ACCESS METER — Guest+Free (giới hạn) vs Premium (full) ===== */
  .nml-lib-access-meter {
    display:flex; max-width:520px; margin: 40px auto 56px;
    border-radius: var(--nml-r-pill, 999px); overflow:hidden;
    box-shadow: var(--nml-sh-sm, 0 1px 3px rgba(0,0,0,.06));
    border:1px solid var(--nml-border, #E2E8F0);
  }
  .nml-lib-access-seg {
    display:flex; align-items:center; gap:10px;
    padding:14px 20px; font-size:12.5px;
  }
  .nml-lib-access-seg svg { width:18px; height:18px; flex-shrink:0; }
  .nml-lib-access-seg span { display:flex; flex-direction:column; line-height:1.3; }
  .nml-lib-access-seg b { font-size:13px; font-weight:var(--nml-fw-semibold, 600); }
  .nml-lib-access-seg small { font-size:11px; font-weight:var(--nml-fw-regular, 400); }

  .nml-lib-access-seg.muted {
    flex:0.85; background:#fff; color: var(--nml-tx2, #475569);
  }
  .nml-lib-access-seg.muted small { color: var(--nml-tx3, #94A3B8); }

  .nml-lib-access-seg.full {
    flex:1.15; color:#fff;
    background: linear-gradient(135deg, var(--nml-blue, #2F6BFF), var(--nml-green, #22C55E));
  }
  .nml-lib-access-seg.full small { color:rgba(255,255,255,.85); }

  /* ===== 10. MOTION — REVEAL ===== */
  .nml-lib-reveal { opacity:0; transform:translateY(24px); transition: opacity var(--nml-t-reveal, 400ms) ease-out, transform var(--nml-t-reveal, 400ms) ease-out; animation: reveal-in var(--nml-t-reveal, 400ms) ease-out forwards; }
  @keyframes reveal-in { to { opacity:1; transform:translateY(0);} }
  .nml-lib-reveal-grid .nml-lib-reveal:nth-child(1) { animation-delay: 0ms; }
  .nml-lib-reveal-grid .nml-lib-reveal:nth-child(2) { animation-delay: 80ms; }
  .nml-lib-reveal-grid .nml-lib-reveal:nth-child(3) { animation-delay: 160ms; }
  .nml-lib-reveal-grid .nml-lib-reveal:nth-child(4) { animation-delay: 240ms; }

  /* ===== GRID ===== */
  .nml-lib-hub-grid { display:grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
  @media (max-width: 860px) { .nml-lib-hub-grid { grid-template-columns: 1fr; } }

  /* ===== 8.6 CARDS ===== */
  .nml-lib-card {
    background: rgba(255,255,255,0.70);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255,255,255,0.80);
    border-radius: var(--nml-r-md, 14px);
    overflow: hidden;
    transition: transform var(--nml-t-trans, 250ms) ease, box-shadow var(--nml-t-trans, 250ms) ease;
    display:flex; flex-direction:column;
  }
  .nml-lib-card:hover { transform: translateY(-3px); box-shadow: var(--nml-sh-lg, 0 8px 24px rgba(0,0,0,.10), 0 2px 6px rgba(0,0,0,.04)); }

  /* Illustration panel — tier of imagery per card */
  .nml-lib-card-illustration {
    position:relative;
    height: 168px;
    display:flex; align-items:center; justify-content:center;
    overflow:hidden;
  }
  .nml-lib-card-illustration svg { width:100%; height:100%; }

  .nml-lib-illu-quiz   { background: linear-gradient(135deg, rgba(47,107,255,.10), rgba(47,107,255,.02)); }
  .nml-lib-illu-flash  { background: linear-gradient(135deg, rgba(47,107,255,.10), rgba(124,58,237,.03)); }
  .nml-lib-illu-frame  { background: linear-gradient(135deg, rgba(34,197,94,.10), rgba(34,197,94,.02)); }
  .nml-lib-illu-templ  { background: linear-gradient(135deg, rgba(245,158,11,.10), rgba(245,158,11,.02)); }

  .nml-lib-card-status-float {
    position:absolute; top:14px; right:14px;
  }

  .nml-lib-card-body { padding: 26px 28px 28px; display:flex; flex-direction:column; flex-grow:1; }

  .nml-lib-card-zone {
    font-size:var(--nml-text-overline, 11px); font-weight:var(--nml-fw-bold, 700); letter-spacing:.08em; text-transform:uppercase;
    color: var(--nml-tx3, #94A3B8); margin-bottom:8px;
  }

  .nml-lib-card h3 { font-size:var(--nml-text-h3, clamp(18px,2vw,20px))!important; font-weight:var(--nml-fw-semibold, 600)!important; margin-bottom:10px; }
  .nml-lib-card p.nml-lib-desc { font-size:var(--nml-text-body, clamp(15px,1.5vw,16px)); line-height:1.65; color: var(--nml-tx2, #475569); margin-bottom:20px; }

  .nml-lib-feature-list { list-style:none; margin-bottom:24px; flex-grow:1; }
  .nml-lib-feature-list li {
    font-size:13.5px; color: var(--nml-tx2, #475569); padding-left:22px; position:relative;
    margin-bottom:9px; line-height:1.5;
  }
  .nml-lib-feature-list li::before {
    content:''; position:absolute; left:0; top:5px;
    width:14px; height:14px; border-radius:50%;
    background: rgba(47,107,255,.10);
  }
  .nml-lib-feature-list li::after {
    content:''; position:absolute; left:5px; top:8.5px;
    width:4px; height:7px; border-right:2px solid var(--nml-blue, #2F6BFF); border-bottom:2px solid var(--nml-blue, #2F6BFF);
    transform: rotate(45deg);
  }

  .nml-lib-card-footer { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:auto; }
  .nml-lib-meta-tag { font-size:12.5px; color: var(--nml-tx3, #94A3B8); }

  /* ===== 8.5 BUTTONS ===== */
  .nml-lib-btn {
    display: inline-flex; align-items: center; gap: 8px;
    font-family: inherit; font-weight: var(--nml-fw-semibold, 600);
    border-radius: var(--nml-r-pill, 999px); cursor: pointer;
    transition: all var(--nml-t-hover, 150ms) ease; text-decoration: none; border: none; white-space: nowrap;
  }
  .nml-lib-btn--md { font-size:15px; padding:12px 24px; }
  .nml-lib-btn--sm { font-size:13px; padding:9px 18px; }

  .nml-lib-btn--primary {
    background: var(--nml-blue, #2F6BFF) !important; color: #fff !important;
    box-shadow: 0 4px 12px rgba(47,107,255,.30);
  }
  .nml-lib-btn--primary:hover {
    background: #1a55f0 !important; box-shadow: 0 6px 18px rgba(47,107,255,.40) !important; transform: translateY(-1px);
  }
  .nml-lib-btn--secondary {
    background: #fff !important; color: var(--nml-tx, #0F172A) !important;
    border: 1.5px solid var(--nml-border, #E2E8F0) !important; box-shadow: var(--nml-sh-sm, 0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04));
  }
  .nml-lib-btn--secondary:hover { border-color: var(--nml-blue, #2F6BFF) !important; color: var(--nml-blue, #2F6BFF) !important; }

  /* ===== 8.7 BADGES ===== */
  .nml-lib-badge {
    display: inline-flex; align-items: center; gap: 5px;
    font-size: var(--nml-text-overline, 11px); font-weight: var(--nml-fw-bold, 700); letter-spacing: .04em; text-transform: uppercase;
    padding: 4px 10px; border-radius: var(--nml-r-pill, 999px);
    background:#fff; box-shadow: var(--nml-sh-sm, 0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04));
  }
  .nml-lib-badge--live     { background: rgba(34,197,94,.12);  color:#15803D; }
  .nml-lib-badge--priority { background: rgba(245,158,11,.14); color:#92400E; }
  .nml-lib-badge--free     { background: rgba(148,163,184,.16); color:#475569; }

  /* ===== 09. ICON SYSTEM — Tier 1 utility ===== */
  .nml-lib-icon-circle {
    width: 40px; height: 40px; border-radius: 50%;
    display: grid; place-items: center; flex-shrink: 0;
  }
  .nml-lib-icon-circle--blue  { background: #EEF3FF; color: #2F6BFF; }
  .nml-lib-icon-circle--green { background: #EDFBF3; color: #22C55E; }
  .nml-lib-icon-circle svg { width:18px; height:18px; }

  /* Bottom note */
  .nml-lib-hub-note { margin-top:48px; text-align:center; font-size:13.5px; color: var(--nml-tx3, #94A3B8); }

  /* ===== SUBSCRIPTION SECTION ===== */
  .nml-lib-sub-section { margin-top: 80px; }
  .nml-lib-sub-head { text-align:center; max-width:640px; margin:0 auto 36px; }
  .nml-lib-sub-head .nml-lib-eyebrow { background: rgba(34,197,94,.10); color:#15803D; }
  .nml-lib-sub-head h2 {
    font-size: var(--nml-text-h2, clamp(22px,3.5vw,28px)) !important;
    font-weight: var(--nml-fw-semibold, 600) !important;
    color: var(--nml-tx, #0F172A) !important;
    margin-bottom:12px;
  }
  .nml-lib-sub-head p { font-size:var(--nml-text-body, clamp(15px,1.5vw,16px)); color:var(--nml-tx2, #475569); line-height:1.6; }

  .nml-lib-sub-note { margin-top:20px; text-align:center; font-size:12.5px; color:var(--nml-tx3, #94A3B8); }