/* Trang giới thiệu (introduction.html): dùng lại biến, phông và các khối chung của style.css. */
body.docs { padding-top: 76px; }
.docs .nav-links a[aria-current] { color: var(--ink); font-weight: 500; }
.docs section[id] { scroll-margin-top: 96px; }
.muted { color: var(--muted); }

/* ---------- mở đầu ---------- */
.d-hero { display: grid; justify-items: center; gap: 26px; margin-top: 8px; padding: clamp(64px, 9vw, 132px) clamp(20px, 5vw, 80px) clamp(48px, 6vw, 88px); text-align: center; }
.d-hero-glow { position: absolute; inset: 0; z-index: -1; background: radial-gradient(60% 70% at 50% 0%, color-mix(in srgb, var(--accent) 30%, transparent), transparent 70%), radial-gradient(rgba(220,255,240,.28) 1px, transparent 1.4px) 0 0 / 14px 14px; -webkit-mask: linear-gradient(#000 30%, transparent); mask: linear-gradient(#000 30%, transparent); }
.d-kick { display: inline-flex; align-items: center; gap: 10px; padding: 8px 16px; color: #d5ece2; border: 1px solid var(--dline); border-radius: 999px; background: rgba(255,255,255,.04); font-size: 14px; }
.d-kick .dot { width: 8px; height: 8px; border-radius: 50%; background: #5ef2b5; box-shadow: 0 0 12px #5ef2b5; }
.d-title { font-family: var(--serif); font-size: clamp(42px, 7.2vw, 108px); font-weight: 650; line-height: 1.02; letter-spacing: -.045em; background: linear-gradient(180deg, #ffffff 30%, #a7f3d4); -webkit-background-clip: text; background-clip: text; color: transparent; }
.d-sub { max-width: 720px; color: #a9bcb4; font-size: clamp(17px, 1.7vw, 22px); line-height: 1.45; }
.d-hero-cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px 28px; }
.d-pills { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 10px; }
.d-pills li { padding: 8px 14px; color: #c3d6ce; background: rgba(255,255,255,.05); border: 1px solid var(--dline); border-radius: 999px; font-size: 13.5px; }

/* ---------- bố cục: mục lục bên trái ---------- */
.d-layout { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: clamp(28px, 5vw, 80px); padding-top: clamp(40px, 6vw, 90px); }
.d-toc { position: sticky; top: 100px; align-self: start; display: grid; gap: 2px; max-height: calc(100vh - 120px); overflow: auto; padding-right: 8px; font-size: 14.5px; }
.d-toc b { margin-bottom: 8px; color: var(--faint); font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.d-toc a { padding: 6px 10px; margin-left: -10px; color: #4f5f58; border-radius: 8px; transition: background .2s, color .2s; }
.d-toc a:hover { color: var(--ink); background: var(--bg2); }
.d-toc a.on { color: var(--ink); background: #e3ece7; font-weight: 500; }
.d-main { min-width: 0; }

/* ---------- mục ---------- */
.d-sec { padding-bottom: clamp(56px, 8vw, 120px); }
.d-tag { margin-bottom: 14px; color: var(--accent-d); font-size: 13px; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; }
.d-h2 { max-width: 16ch; font-family: var(--serif); font-size: clamp(34px, 4.6vw, 64px); font-weight: 650; line-height: 1.04; letter-spacing: -.04em; }
.d-lede { max-width: 760px; margin-top: 20px; color: #4f5f58; font-size: clamp(17px, 1.5vw, 21px); line-height: 1.5; letter-spacing: -.012em; }
.d-lede a, .d-note a, .faq-list a, .d-more a { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: color-mix(in srgb, var(--accent) 60%, transparent); }
.d-lede b { color: var(--ink); font-weight: 600; }
.d-note { max-width: 760px; margin-top: 22px; padding: 14px 18px; color: #56665f; background: var(--card); border: 1px solid var(--rule); border-radius: 14px; font-size: 14.5px; line-height: 1.5; }
.d-grid { display: grid; gap: 16px; margin-top: clamp(28px, 4vw, 48px); }
.d-grid.g3 { grid-template-columns: repeat(3, 1fr); } .d-grid.g2 { grid-template-columns: repeat(2, 1fr); }
.d-card { padding: clamp(20px, 2.2vw, 30px); background: var(--card); border: 1px solid var(--rule); border-radius: 22px; transition: transform .3s cubic-bezier(.2,.8,.2,1), box-shadow .3s, border-color .3s; }
.d-card:hover { transform: translateY(-3px); box-shadow: 0 22px 44px -28px rgba(10,40,30,.4); border-color: color-mix(in srgb, var(--accent) 40%, var(--rule)); }
.d-card h3 { font-family: var(--serif); font-size: clamp(21px, 1.9vw, 27px); font-weight: 600; letter-spacing: -.025em; line-height: 1.15; }
.d-card p { margin-top: 10px; color: #56665f; font-size: 15.5px; line-height: 1.55; }
.d-split { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: clamp(24px, 4vw, 56px); align-items: start; margin-top: clamp(28px, 4vw, 48px); }
.d-list { display: grid; gap: 12px; }
.d-list li { position: relative; padding-left: 22px; color: #3e4d47; font-size: 16px; line-height: 1.5; }
.d-list li::before { content: ''; position: absolute; left: 2px; top: .62em; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }
.d-list li b { color: var(--ink); font-weight: 600; }
.d-list.sm { gap: 8px; margin-top: 12px; } .d-list.sm li { font-size: 15px; color: #56665f; }
.d-list code, .d-card code, .d-main p code, .faq-list code { padding: 1px 6px; background: #eaf0ed; border-radius: 6px; font-size: .88em; }
.d-list.lim { margin-top: 28px; }

/* ---------- terminal cài nhanh ---------- */
.term { margin-top: 30px; overflow: hidden; color: #e6f2ed; background: var(--dark); border-radius: 22px; box-shadow: 0 30px 60px -34px rgba(5,30,22,.6); }
.term-tabs { display: flex; align-items: center; gap: 4px; padding: 10px 12px; background: var(--dark2); border-bottom: 1px solid var(--dline); }
.term-tabs button { padding: 7px 14px; color: #a9bcb4; border-radius: 999px; font-size: 14px; font-weight: 500; transition: background .2s, color .2s; }
.term-tabs button:hover { color: #fff; }
.term-tabs button[aria-selected=true] { color: #fff; background: rgba(255,255,255,.12); }
.term-auto { margin-left: auto; padding-right: 8px; color: #5ef2b5; font-size: 12.5px; }
.term-body { padding: clamp(16px, 2.4vw, 28px); }
.term .cmd { margin-top: 0; padding: 14px 12px 14px 18px; background: #07110e; border: 1px solid var(--dline); }
.term .cmd code { padding: 0; background: none; color: #eaf5f0; font-size: clamp(13px, 1.4vw, 16px); }
.term .cmd code::before { content: '$ '; color: var(--accent); }
.term-pane[data-pane=win] .cmd code::before { content: 'PS> '; }
.term-pane p { margin-top: 16px; color: #a9bcb4; font-size: 15px; line-height: 1.55; }
.term-pane p b { color: #e6f2ed; font-weight: 600; } .term .term-pane p code { padding: 2px 8px; background: rgba(255,255,255,.14); color: #f4fbf8; font-size: .9em; white-space: nowrap; }
.d-more { margin-top: 18px; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.d-more summary { padding: 16px 0; cursor: pointer; font-size: 16px; font-weight: 500; list-style: none; } .d-more summary::-webkit-details-marker { display: none; }
.d-more summary::after { content: '+'; float: right; color: var(--muted); font-size: 22px; line-height: 1; } .d-more[open] summary::after { content: '–'; }
.d-more-body { display: grid; gap: 12px; padding-bottom: 20px; } .d-more-body p { color: #56665f; font-size: 15px; }
.d-more .cmd { margin-top: 0; } .d-more .cmd code { font-size: 12.5px; }

/* ---------- minh họa nhỏ bằng CSS ---------- */
.m-picker, .m-chat, .m-tool { color: #e6f2ed; background: var(--dark); border-radius: 22px; box-shadow: 0 30px 60px -34px rgba(5,30,22,.6); }
.m-picker { padding: 12px; display: grid; gap: 2px; font-size: 14px; }
.m-search { margin-bottom: 8px; padding: 10px 14px; color: #879a92; background: #07110e; border: 1px solid var(--dline); border-radius: 12px; }
.m-grp { display: flex; align-items: center; gap: 8px; padding: 10px 12px 4px; color: #879a92; font-size: 12px; font-weight: 600; letter-spacing: .04em; } .m-grp .pi { font-size: 15px; }
.m-opt { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 10px; } .m-opt .pi { font-size: 17px; } .m-opt em { margin-left: auto; color: var(--accent); font-style: normal; }
.m-opt.on { background: rgba(255,255,255,.08); }
.m-picker, .m-chat, .m-tool { min-width: 0; max-width: 100%; } .m-file { flex-wrap: wrap; } .m-chat { display: grid; gap: 12px; padding: clamp(16px, 2vw, 24px); font-size: 14.5px; }
.m-u { justify-self: end; max-width: 85%; padding: 10px 16px; background: #1a2b25; border-radius: 18px; }
.m-b { color: #cbdcd4; line-height: 1.5; }
.m-file { display: flex; align-items: center; gap: 12px; padding: 12px; background: #10211c; border: 1px solid var(--dline); border-radius: 16px; }
.m-ico { display: grid; place-items: center; flex: none; width: 40px; height: 40px; color: #fff; background: #d24726; border-radius: 10px; font-style: normal; font-weight: 700; }
.m-file div { flex: 1; min-width: 0; } .m-file b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; } .m-file small { color: #879a92; }
.m-btn, .m-tool-b span { padding: 7px 12px; border-radius: 9px; background: rgba(255,255,255,.08); font-size: 13px; font-weight: 500; white-space: nowrap; }
.m-btn.hot, .m-tool-b .hot { color: #0a1512; background: var(--accent); }
.m-tool { padding: 16px; display: grid; gap: 12px; font-size: 13.5px; }
.m-tool-h { display: flex; align-items: center; gap: 10px; } .m-tool-h small { margin-left: auto; color: #879a92; } .m-tool-h code { color: #eaf5f0; }
.m-tool pre { margin: 0; padding: 12px; color: #cbdcd4; background: #07110e; border-radius: 10px; font-size: 12.5px; overflow: auto; }
.m-tool-b { display: flex; flex-wrap: wrap; gap: 8px; }

/* ---------- định dạng tệp, phím tắt ---------- */
.d-fmt { display: grid; gap: 0; margin-bottom: 22px; border-top: 1px solid var(--rule); }
.d-fmt > div { display: grid; grid-template-columns: 120px 1fr; column-gap: 16px; align-items: baseline; padding: 14px 0; border-bottom: 1px solid var(--rule); }
.d-fmt b { font-size: 16px; font-weight: 600; } .d-fmt span { grid-column: 2; order: 3; color: var(--faint); font: 12.5px var(--mono); } .d-fmt p { grid-column: 2; color: #56665f; font-size: 15px; line-height: 1.45; }
.d-keys { display: grid; gap: 0; margin-top: 28px; border-top: 1px solid var(--rule); max-width: 640px; }
.d-keys > div { display: flex; align-items: center; gap: 6px; padding: 14px 0; border-bottom: 1px solid var(--rule); } .d-keys span { margin-left: auto; color: #4f5f58; }
kbd { padding: 3px 9px; background: var(--card); border: 1px solid var(--rule); border-bottom-width: 2px; border-radius: 8px; font: 13px var(--mono); }

/* ---------- nhật ký thay đổi ---------- */
.cl { position: relative; display: grid; gap: 22px; margin-top: 36px; padding-left: 26px; }
.cl::before { content: ''; position: absolute; left: 6px; top: 8px; bottom: 8px; width: 2px; background: linear-gradient(var(--accent), var(--rule)); }
.cl-item { position: relative; padding: clamp(20px, 2.4vw, 32px); background: var(--card); border: 1px solid var(--rule); border-radius: 22px; }
.cl-item::before { content: ''; position: absolute; left: -26px; top: 32px; width: 14px; height: 14px; background: var(--bg); border: 3px solid var(--accent); border-radius: 50%; }
.cl-item header { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; margin-bottom: 16px; }
.cl-item header b { font-family: var(--serif); font-size: clamp(24px, 2.4vw, 32px); font-weight: 600; letter-spacing: -.03em; }
.cl-item time { color: var(--muted); font-size: 14px; }
.cl-now { padding: 3px 10px; color: #fff; background: var(--accent-d); border-radius: 999px; font-size: 12px; font-weight: 600; }
.cl-item ul { display: grid; gap: 10px; }
.cl-item li { color: #3e4d47; font-size: 15.5px; line-height: 1.5; } .cl-item li .t { display: inline-block; height: 22px; margin-right: 12px; padding: 0 10px; line-height: 22px; vertical-align: 1px; }
.t { flex: none; min-width: 74px; padding: 2px 8px; border-radius: 8px; font-size: 12px; font-style: normal; font-weight: 600; letter-spacing: .02em; text-align: center; }
.t.new { color: #1d6b43; background: #dff3e6; } .t.up { color: #1d4f8a; background: #e1ecfa; } .t.fix { color: #8a4a1d; background: #f7e7d6; }

@media (max-width: 1000px) {
  .d-layout { grid-template-columns: 1fr; } .d-toc { display: none; }
  .d-grid.g3 { grid-template-columns: repeat(2, 1fr); } .d-split { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .d-grid.g3, .d-grid.g2 { grid-template-columns: 1fr; } .d-fmt > div { grid-template-columns: 1fr; } .d-fmt span, .d-fmt p { grid-column: 1; }
  .docs .nav-links > a:not(.btn) { display: none; } .term-tabs { flex-wrap: wrap; } .term-auto { display: none; }
  .cl { padding-left: 18px; } .cl-item::before { left: -18px; } .cl-item li .t { display: block; width: max-content; margin: 0 0 4px; }
}