:root{
      --bg:#ffffff;
      --bg-soft:#e8f1ff;
      --card:#ffffff;
      --text:#0b1220;
      --muted:#575757;
      --line:rgba(0,96,239,.12);
      --brand:#0099ff;
      --brand-strong:#0060ef;
      --brand2:#00e38c;
      --codebg:#f4f8ff;
      --shadow: 0 10px 30px rgba(0,96,239,.10);
      --radius:16px;
      --max: 1100px;
    }
    *{box-sizing:border-box}
    body{
      margin:0;
      font-family: Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
      background: radial-gradient(1200px 600px at 30% -10%, rgba(0,153,255,.18), transparent 60%),
                  radial-gradient(900px 500px at 90% 0%, rgba(0,227,140,.12), transparent 55%),
                  var(--bg);
      color:var(--text);
      line-height:1.6;
    }
    a{color:inherit}
    .wrap{
      max-width: var(--max);
      margin: 0 auto;
      padding: 28px 18px 60px;
    }
    header{
      background: linear-gradient(135deg, rgba(0,153,255,.14), rgba(0,227,140,.10));
      border:1px solid var(--line);
      border-radius: var(--radius);
      box-shadow: var(--shadow);
      padding: 22px 22px;
      position: relative;
      overflow: hidden;
    }
    header h1{
      margin:0 0 6px;
      font-size: clamp(22px, 4vw, 34px);
      letter-spacing:.2px;
    }
    header p{
      margin:0;
      color: var(--muted);
      max-width: 75ch;
    }
    .meta{
      display:flex;
      gap:10px;
      flex-wrap:wrap;
      margin-top:14px;
    }
    .pill{
      border:1px solid var(--line);
      background: var(--bg-soft);
      padding: 6px 10px;
      border-radius: 999px;
      color: var(--muted);
      font-size: 13px;
    }

    main{
      display:grid;
      grid-template-columns: 320px 1fr;
      gap: 18px;
      margin-top: 18px;
      align-items:start;
    }
    @media (max-width: 980px){
      main{grid-template-columns: 1fr}
      nav{position: static !important}
    }

    nav{
      position: sticky;
      top: 14px;
      background: var(--card);
      border:1px solid var(--line);
      border-radius: var(--radius);
      padding: 14px;
      box-shadow: var(--shadow);
    }
    nav h2{
      font-size: 14px;
      margin: 0 0 10px;
      color: var(--muted);
      text-transform: uppercase;
      letter-spacing: .12em;
    }
    .toc{
      list-style:none;
      margin:0;
      padding:0;
      display:flex;
      flex-direction:column;
      gap:6px;
    }
    .toc a{
      display:block;
      text-decoration:none;
      padding: 8px 10px;
      border-radius: 10px;
      border: 1px solid transparent;
      color: var(--text);
      background: var(--bg-soft);
    }
    .toc a:hover{
      border-color: rgba(0,96,239,.35);
      background: rgba(0,153,255,.14);
      color: var(--brand-strong);
    }
    .hint{
      margin-top: 10px;
      font-size: 13px;
      color: var(--muted);
      border-top:1px solid var(--line);
      padding-top: 10px;
    }

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

    section{
      background: var(--card);
      border: 1px solid var(--line);
      border-radius: var(--radius);
      padding: 18px 18px;
      box-shadow: var(--shadow);
    }
    section h2{
      margin:0 0 10px;
      font-size: 20px;
      color: var(--brand-strong);
    }
    section h3{
      margin: 26px 0 10px;
      padding-top: 16px;
      border-top: 1px solid var(--line);
      font-size: 16px;
      color: var(--text);
      display: flex;
      align-items: center;
      gap: 8px;
    }
    /* thanh màu đầu mỗi tiểu mục để phân biệt nhóm */
    section h3::before{
      content:"";
      flex: 0 0 auto;
      width: 4px;
      height: 17px;
      border-radius: 3px;
      background: var(--brand);
    }
    /* hai tiêu đề liền nhau: bỏ vạch ngăn để không bị đôi */
    section h3 + h3{
      border-top: 0;
      margin-top: 6px;
      padding-top: 0;
    }
    .subtle{
      color: var(--muted);
      margin: 0 0 14px;
    }
    ul{margin: 10px 0 0 20px}
    ol{margin: 10px 0 0 20px}
    section li{margin: 6px 0}
    section li::marker{color: var(--brand)}
    code, pre{
      font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    }
    pre{
      background: var(--codebg);
      border:1px solid var(--line);
      border-radius: 14px;
      padding: 12px 12px;
      overflow:auto;
    }
    .callout{
      border-left: 4px solid var(--brand);
      background: rgba(0,153,255,.08);
      padding: 10px 12px;
      border-radius: 12px;
      color: var(--muted);
      margin-top: 10px;
    }
    footer{
      margin-top: 18px;
      color: var(--muted);
      text-align:center;
      font-size: 13px;
    }
    .toplink{
      display:inline-block;
      margin-top: 12px;
      font-size: 13px;
      color: var(--muted);
      text-decoration:none;
      border:1px solid var(--line);
      padding:6px 10px;
      border-radius: 999px;
      background: var(--bg-soft);
    }
    .toplink:hover{border-color: rgba(0,227,140,.45); background: rgba(0,227,140,.10); color:#0b8f5a}

    a{transition: color .15s ease}
    strong{color: var(--text)}
    section h3{color: var(--brand-strong)}

    /* Hình ảnh minh hoạ trích từ tài liệu */
    .shots{
      display:flex;
      flex-wrap:wrap;
      gap:12px;
      margin:12px 0 4px;
    }
    .shot{
      flex:1 1 340px;
      margin:0;
      min-width:0;
    }
    .shot.tall{flex:0 1 240px}
    /* Ảnh nhỏ: giữ đúng kích thước gốc, không phóng to (tránh bị mờ) */
    .shot.native{flex:0 0 auto; max-width:100%}
    .shot.native img{width:auto; max-width:100%}
    .shot a.shot-zoom{display:block; cursor:zoom-in}
    .shot img{
      width:100%;
      height:auto;
      display:block;
      background:#fff;
      border:1px solid var(--line);
      border-radius:12px;
      box-shadow: var(--shadow);
      transition: filter .15s ease;
    }
    .shot a.shot-zoom:hover img{filter:brightness(1.03)}
    .shot figcaption{
      margin-top:6px;
      font-size:12px;
      color:var(--muted);
    }

    /* Phân trang theo danh mục */
    .toc a.active{
      border-color: rgba(0,96,239,.45);
      background: rgba(0,153,255,.16);
      color: var(--brand-strong);
      font-weight:600;
    }
    body.paged .content > section.active{display:block; animation: fadein .25s ease}
    @keyframes fadein{from{opacity:0; transform:translateY(6px)} to{opacity:1; transform:none}}

    .pager{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:12px;
      margin-top:4px;
      padding:14px 4px 2px;
      border-top:1px solid var(--line);
    }
    .pager button{
      font:inherit;
      cursor:pointer;
      border:1px solid var(--line);
      background: var(--bg-soft);
      color: var(--brand-strong);
      padding:10px 18px;
      border-radius:999px;
      font-weight:600;
      display:inline-flex;
      align-items:center;
      gap:6px;
      transition:.15s ease;
      white-space:nowrap;
    }
    .pager button:hover:not(:disabled){
      border-color: rgba(0,96,239,.45);
      background: rgba(0,153,255,.14);
      box-shadow: var(--shadow);
    }
    .pager button:disabled{opacity:.35; cursor:not-allowed}
    .pager .pager-info{
      flex:1;
      text-align:center;
      font-size:13px;
      color: var(--muted);
    }
    .pager .pager-info b{color: var(--text)}

    /* Video nhúng từ Google Drive */
    .videos{
      display:flex;
      flex-wrap:wrap;
      gap:12px;
      margin:12px 0 4px;
    }
    .video{flex:1 1 340px; margin:0; min-width:0}
    .video-frame{
      position:relative;
      padding-top:56.25%;            /* tỉ lệ 16:9 */
      border-radius:12px;
      overflow:hidden;
      border:1px solid var(--line);
      box-shadow: var(--shadow);
      background:#000;
    }
    .video-frame iframe{
      position:absolute;
      inset:0;
      width:100%;
      height:100%;
      border:0;
    }
    .video figcaption{
      margin-top:6px;
      font-size:12px;
      color: var(--muted);
    }

    /* Nút điều hướng Trước / Tiếp (dạng link giữa các file) */
    .pgbtn{
      font:inherit; cursor:pointer; text-decoration:none;
      border:1px solid var(--line); background: var(--bg-soft);
      color: var(--brand-strong); padding:10px 18px; border-radius:999px;
      font-weight:600; display:inline-flex; align-items:center; gap:6px;
      transition:.15s ease; white-space:nowrap;
    }
    .pgbtn:hover:not(.is-disabled){
      border-color: rgba(0,96,239,.45); background: rgba(0,153,255,.14);
      box-shadow: var(--shadow);
    }
    .pgbtn.is-disabled{opacity:.35; cursor:not-allowed; pointer-events:none}