/* thichvenha.com/huongdan/tag — hệ tag 1 → 9. Khung trang dùng chung /ui/site.css (biến màu, chế độ sáng / tối, thanh trên, nút);
   file này chỉ thêm phần riêng. CSP /huongdan/*: không style nội tuyến → màu từng nhóm đặt bằng class k1…k9 (--s nét, --f nền).
   Màu nhóm có 2 bộ: tối (nét sáng trên nền tối) và sáng (nét đậm trên nền trắng). .dark-scope (khung hình thử + bảng tag) luôn dùng bộ tối. */

/* ---------- 2 thứ tiếng: <span lang="vi"> / <span lang="en"> trong body, html[data-lang] chọn bên hiện ---------- */
:root[data-lang="en"] body [lang="vi"], :root:not([data-lang="en"]) body [lang="en"] { display:none !important; }

/* ---------- màu nhóm: 1–4 (ở đâu) tông ấm / xanh lá, 5–9 (là gì) tông lạnh + gỗ ---------- */
:root, .dark-scope {
  --k1:#86efac; --k1f:rgba(134,239,172,.16); --k2:#5eead4; --k2f:rgba(94,234,212,.16); --k3:#fb923c; --k3f:rgba(251,146,60,.16);
  --k4:#f9a8d4; --k4f:rgba(249,168,212,.16); --k5:#cbd5e1; --k5f:rgba(203,213,225,.26); --k6:#7dd3fc; --k6f:rgba(125,211,252,.16);
  --k7:#e0b48f; --k7f:rgba(224,180,143,.24); --k8:#fcd34d; --k8f:rgba(252,211,77,.26); --k9:#c4b5fd; --k9f:rgba(196,181,253,.26);
  --kS:#94a3b8; --kSf:rgba(148,163,184,.16); --on-k:#03081f;
  --code-bg:rgba(255,255,255,.07); --code-fg:#e2e8f0;
}
:root[data-theme="light"] {
  --k1:#16a34a; --k1f:rgba(22,163,74,.09); --k2:#0d9488; --k2f:rgba(13,148,136,.09); --k3:#ea580c; --k3f:rgba(234,88,12,.09);
  --k4:#db2777; --k4f:rgba(219,39,119,.08); --k5:#64748b; --k5f:rgba(100,116,139,.11); --k6:#0284c7; --k6f:rgba(2,132,199,.09);
  --k7:#a86a3d; --k7f:rgba(168,106,61,.11); --k8:#b7791f; --k8f:rgba(202,138,4,.11); --k9:#7c3aed; --k9f:rgba(124,58,237,.09);
  --kS:#64748b; --kSf:rgba(100,116,139,.09); --on-k:#fff;
  --code-bg:#eef2f7; --code-fg:#0f172a;
}
.k1 { --s:var(--k1); --f:var(--k1f); } .k2 { --s:var(--k2); --f:var(--k2f); } .k3 { --s:var(--k3); --f:var(--k3f); }
.k4 { --s:var(--k4); --f:var(--k4f); } .k5 { --s:var(--k5); --f:var(--k5f); } .k6 { --s:var(--k6); --f:var(--k6f); }
.k7 { --s:var(--k7); --f:var(--k7f); } .k8 { --s:var(--k8); --f:var(--k8f); } .k9 { --s:var(--k9); --f:var(--k9f); }
.ks { --s:var(--kS); --f:var(--kSf); }

/* ---------- thanh trên: nút VI / EN cạnh nút sáng / tối + đăng nhập ---------- */
.lang { display:flex; flex:none; padding:3px; border:1px solid var(--line); border-radius:999px; background:var(--overlay); }
.lang button { height:32px; min-width:42px; padding:0 12px; border:0; border-radius:999px; background:transparent; color:var(--muted);
  font-family:inherit; font-size:13px; font-weight:700; letter-spacing:.06em; cursor:pointer; }
.lang button:hover { color:var(--strong); }
.lang button[aria-pressed="true"] { background:var(--hover2); color:var(--strong); box-shadow:inset 0 0 0 1px var(--line2); }
.lang button:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
.crumb-row { display:flex; align-items:center; justify-content:space-between; gap:12px; margin:0 0 18px; }
.lang-m { display:none; }
@media (max-width:560px) {
  .top .lang { display:none; }
  .lang-m { display:flex; }
  .lang-m button { height:28px; min-width:36px; padding:0 9px; }
}

/* ---------- khối chung của trang ---------- */
.tg main section { padding:60px 0; }
.tg main section + section { border-top:1px solid var(--line); }
.tg main .hero-t { padding:46px 0 48px; }
.crumb { margin:0; font-size:14px; color:var(--muted); }
.crumb a { color:var(--muted); text-decoration:none; }
.crumb a:hover { color:var(--accent); }
.hero-t h1 em { font-style:normal; color:var(--accent); white-space:nowrap; }
.tg h2 .n { display:inline-grid; place-items:center; width:36px; height:36px; margin-right:12px; border-radius:10px; vertical-align:5px;
  font-size:17px; color:var(--on-cu); background:var(--cu); }
.tg h3.mt { margin-top:36px; }
.tg code { font:13.5px/1.4 Consolas, "Cascadia Mono", monospace; color:var(--code-fg); background:var(--code-bg); border-radius:6px; padding:1px 6px; }
.tg .feat a { color:var(--accent); }
.hint { margin:12px 0 0; font-size:14px; color:var(--muted); }
.num { display:inline-grid; place-items:center; flex:none; width:26px; height:26px; border-radius:8px; background:var(--s); color:var(--on-k); font-weight:800; font-size:13.5px; }
.tchip { display:inline-flex; align-items:center; padding:1px 9px; border-radius:7px; font-size:13.5px; line-height:1.55; color:var(--strong);
  background:var(--f); box-shadow:inset 0 0 0 1px var(--s); }

/* ---------- đầu trang: thang 1 → 9 to dần thành nhỏ ---------- */
.ladder { list-style:none; margin:38px 0 0; padding:0; display:grid; grid-template-columns:repeat(9, minmax(0, 1fr)); gap:10px; align-items:end; }
.ladder li { display:flex; flex-direction:column; align-items:center; gap:8px; text-align:center; font-size:13.5px; line-height:1.3; }
.ladder .ic { display:grid; place-items:center; border-radius:18px; background:var(--f); box-shadow:inset 0 0 0 1px var(--s); color:var(--s); }
.ladder .ic svg { width:54%; height:54%; }
.ladder li:nth-child(1) .ic { width:92px; height:92px; }
.ladder li:nth-child(2) .ic { width:84px; height:84px; }
.ladder li:nth-child(3) .ic { width:76px; height:76px; }
.ladder li:nth-child(4) .ic { width:68px; height:68px; }
.ladder li:nth-child(5) .ic { width:61px; height:61px; border-radius:15px; }
.ladder li:nth-child(6) .ic { width:55px; height:55px; border-radius:14px; }
.ladder li:nth-child(7) .ic { width:49px; height:49px; border-radius:13px; }
.ladder li:nth-child(8) .ic { width:44px; height:44px; border-radius:12px; }
.ladder li:nth-child(9) .ic { width:40px; height:40px; border-radius:11px; }
.ladder b { display:inline-grid; place-items:center; width:24px; height:24px; border-radius:50%; background:var(--s); color:var(--on-k); font-size:13px; }
.ladder .t { color:var(--strong); font-weight:600; }
.split { display:grid; grid-template-columns:4fr 5fr; gap:10px; margin-top:14px; font-size:14px; color:var(--muted); }
.split > span { border-top:2px solid; padding-top:8px; text-align:center; }
.split b { color:var(--strong); }
.split .where { border-color:var(--k3); }
.split .what { border-color:var(--k6); }
.toc-t { display:flex; flex-wrap:wrap; gap:8px; margin:30px 0 0; padding:0; list-style:none; }
.toc-t a { display:inline-flex; align-items:center; gap:8px; padding:6px 14px 6px 6px; border-radius:999px; border:1px solid var(--line);
  text-decoration:none; font-size:14px; background:var(--overlay); box-shadow:var(--shadow); }
.toc-t a:hover { border-color:var(--line2); color:var(--strong); }
.toc-t b { display:inline-grid; place-items:center; width:22px; height:22px; border-radius:50%; background:rgba(193,147,120,.22); color:var(--cu); font-size:12px; }
@media (max-width:760px) {
  .ladder { grid-template-columns:repeat(3, minmax(0, 1fr)); gap:18px 10px; }
  .ladder li:nth-child(n) .ic { width:62px; height:62px; border-radius:16px; }
  .split { grid-template-columns:1fr; }
  .split > span { text-align:left; }
}

/* ---------- 1. trước / sau ---------- */
.ba { display:grid; grid-template-columns:1fr auto 1fr; gap:18px; align-items:center; margin-top:28px; }
.ba .arrow { font-size:34px; color:var(--cu); }
.tp { margin:0; overflow:hidden; align-self:stretch; }
.tp figcaption { display:flex; flex-wrap:wrap; gap:4px 8px; padding:12px 16px; border-bottom:1px solid var(--line); font-size:14px; color:var(--muted); }
.tp.bad figcaption b { color:#ef4444; }
.tp.good figcaption b { color:var(--k1); }
.tlist { list-style:none; margin:0; padding:8px 0; font-size:14px; }
.tlist li { display:flex; align-items:center; gap:10px; padding:4px 16px; }
.tlist li::before { content:''; flex:none; width:15px; height:9px; border:1.5px solid rgba(148,163,184,.7); border-radius:50%; }
.tp.bad .tlist li { color:var(--text); font-family:Consolas, "Cascadia Mono", monospace; font-size:13.5px; }
.tlist .fo { color:var(--strong); font-weight:700; font-size:13.5px; letter-spacing:.02em; }
.tlist .fo::after { content:''; order:-1; width:10px; height:10px; border-radius:3px; background:var(--s); flex:none; }
.tlist .ch { padding-left:52px; color:var(--text); }
.why { margin-top:28px; }
.why .feat h3 { margin-bottom:8px; }
.why .feat code { font-size:12.5px; }
@media (max-width:760px) {
  .ba { grid-template-columns:1fr; }
  .ba .arrow { justify-self:center; transform:rotate(90deg); }
}

/* ---------- 2. ở đâu / là gì ---------- */
.wv { display:grid; grid-template-columns:1fr 1.25fr; gap:20px; margin-top:28px; }
.wv > .box { padding:22px; }
.wv h3 { font-size:20px; }
.wv p.muted { margin:4px 0 16px; font-size:14.5px; }
.nb { border:1.5px dashed var(--s); border-radius:14px; padding:10px 12px 12px; background:var(--f); }
.nb .lb { display:block; margin-bottom:8px; font-size:12.5px; font-weight:800; letter-spacing:.08em; color:var(--s); }
.nb .core { padding:12px; border-radius:10px; text-align:center; font-size:13.5px; color:var(--strong); background:var(--overlay); border:1px solid var(--line); }
.build { list-style:none; margin:0; padding:0; display:grid; gap:10px; }
.build li { display:grid; grid-template-columns:auto 1fr auto; gap:12px; align-items:center; padding:10px 12px; border-radius:12px; background:var(--f); border-left:3px solid var(--s); }
.build .t { display:block; color:var(--strong); }
.build small { display:block; color:var(--muted); font-size:13px; line-height:1.4; }
.build .who { font-size:12.5px; color:var(--s); font-weight:600; text-align:right; }
.gcards { display:grid; gap:14px; grid-template-columns:repeat(auto-fill, minmax(min(100%, 250px), 1fr)); margin-top:16px; }
.gc { padding:16px 18px; border-top:3px solid var(--s); }
.gc h4 { display:flex; align-items:center; gap:10px; margin:0 0 6px; color:var(--strong); font-size:14.5px; letter-spacing:.04em; }
.gc p { margin:0 0 10px; color:var(--muted); font-size:14px; }
.gc .ex { display:flex; flex-wrap:wrap; gap:6px; }
.gc .ex .tchip { font-size:12.5px; }
@media (max-width:860px) { .wv { grid-template-columns:1fr; } }
@media (max-width:480px) { .build li { grid-template-columns:auto 1fr; } .build .who { grid-column:2; text-align:left; } }

/* ---------- 3. cây group lồng nhau ---------- */
.nest-wrap { display:grid; grid-template-columns:1.1fr 1fr; gap:20px; align-items:start; margin-top:26px; }
.nest-wrap > .box { padding:20px 22px; }
.tree, .tree ul { list-style:none; margin:0; padding:0; }
.tree ul { margin:6px 0 0 12px; padding-left:20px; border-left:1px dashed rgba(148,163,184,.5); }
.tree li { position:relative; margin:9px 0; line-height:2; }
.tree ul > li::before { content:''; position:absolute; left:-20px; top:15px; width:14px; border-top:1px dashed rgba(148,163,184,.5); }
.tree small { margin-left:8px; color:var(--muted); font-size:13px; }
.cb { display:inline-block; margin-left:8px; padding:0 8px; border:1px solid var(--s); border-radius:999px; color:var(--s); font-size:11.5px; font-style:normal; line-height:1.6; white-space:nowrap; }
.rules { display:grid; gap:12px; }
.rule { padding:16px 18px; }
.rule h3 { font-size:16px; }
.rule p { margin:6px 0 0; color:var(--muted); font-size:14.5px; }
@media (max-width:860px) { .nest-wrap { grid-template-columns:1fr; } }

/* ---------- 4. bảng tag thử — khung tối cả 2 chế độ (như cửa sổ SketchUp) ---------- */
.presets { display:flex; flex-wrap:wrap; gap:8px; margin-top:24px; }
.demo-t { display:grid; grid-template-columns:minmax(0, 1fr) 310px; gap:16px; margin-top:14px; align-items:start; }
.dark-scope { color:var(--text); }
.stage { margin:0; padding:12px; background-color:#050d24; }
.stage figcaption { min-height:1.6em; margin-top:8px; font-size:13.5px; color:var(--muted); }
.stage figcaption b { color:var(--strong); font-weight:600; }
.house { display:block; width:100%; height:auto; }
.house .f { fill:var(--f); stroke:var(--s); stroke-width:1.4; }
.house .w { fill:var(--f); fill-opacity:.45; stroke:var(--s); stroke-opacity:.35; stroke-width:1; }
.house .solid { fill:#272042; }
.house .l { fill:none; stroke:var(--s); stroke-width:1.6; stroke-linecap:round; }
.house .thin { stroke-width:1; opacity:.55; }
.house .cone { fill:rgba(252,211,77,.10); stroke:none; }
.house .glow { fill:none; stroke:#fde68a; stroke-width:3; stroke-linecap:round; filter:drop-shadow(0 0 4px #fbbf24); }
.house .off { display:none; }
.house [data-t] > :not(g) { transition:opacity .2s ease; }
.house.focus [data-t]:not(.lit) > :not(g) { opacity:.13; }
.panel { padding:0; overflow:hidden; background-color:#050d24; }
.panel .ph { display:flex; align-items:baseline; justify-content:space-between; gap:10px; padding:10px 14px; border-bottom:1px solid var(--line); color:var(--strong); font-weight:700; font-size:14px; }
.panel .ph small { color:var(--muted); font-weight:400; font-size:12.5px; }
.tpanel { max-height:560px; overflow:auto; padding:6px 0 8px; }
.fd + .fd { margin-top:2px; border-top:1px solid rgba(34,211,238,.06); padding-top:2px; }
.trow { display:flex; align-items:center; gap:8px; margin:0 4px; padding:2px 8px 2px 4px; border-radius:8px; font-size:13.5px; line-height:1.35; }
.trow:hover, .trow:focus-within { background:rgba(34,211,238,.07); }
.trow.fold { color:var(--strong); font-weight:700; font-size:12.5px; letter-spacing:.04em; }
.trow.child { padding-left:30px; }
.trow .num { width:20px; height:20px; border-radius:6px; font-size:11.5px; }
.trow .cb { margin-left:auto; font-size:10.5px; }
.trow.dim { opacity:.42; }
.znote { margin:0 4px; padding:2px 8px 2px 40px; font-size:12px; color:var(--muted); }
.eye { display:grid; place-items:center; flex:none; width:30px; height:30px; padding:0; border:0; border-radius:8px; background:transparent; color:var(--text); cursor:pointer; }
.eye:hover { background:rgba(255,255,255,.08); }
.eye:focus-visible { outline:2px solid var(--accent); outline-offset:-2px; }
.eye svg { width:18px; height:18px; }
.eye .c { display:none; }
.eye[aria-pressed="false"] { color:var(--muted); }
.eye[aria-pressed="false"] .o { display:none; }
.eye[aria-pressed="false"] .c { display:inline; }
@media (max-width:900px) {
  .demo-t { grid-template-columns:1fr; }
  /* điện thoại: hình dính trên cùng khi cuộn bảng tag bên dưới — bấm mắt là thấy ngay */
  .stage { position:sticky; top:104px; z-index:5; }
  .tpanel { max-height:none; }
}
@media (min-width:561px) and (max-width:900px) { .stage { top:72px; } }

/* ---------- 5. tìm tag + ca khó ---------- */
.find { margin-top:24px; padding:18px; }
.find label { display:block; margin-bottom:8px; color:var(--strong); font-weight:700; }
.find input { width:100%; height:46px; padding:0 16px; border-radius:12px; border:1px solid var(--field-bd); background:var(--field);
  color:var(--strong); font-family:inherit; font-size:16px; }
.find input:focus { outline:none; border-color:var(--line2); box-shadow:0 0 0 3px var(--hover2); }
.sres { list-style:none; margin:0; padding:0; display:grid; gap:8px; }
.sres:not(:empty) { margin-top:12px; }
.sres li { display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 10px; padding:10px 12px; border-radius:10px; background:var(--hover); border:1px solid var(--line); }
.sres small { color:var(--muted); }
.sres .d { flex-basis:100%; color:var(--muted); font-size:13.5px; }
.sres .none { display:block; color:var(--muted); background:none; border:0; padding:4px 2px; }
.tw { margin-top:16px; padding:6px 10px; overflow-x:auto; }
.cases { width:100%; border-collapse:collapse; font-size:14.5px; }
.cases th, .cases td { padding:10px 10px; text-align:left; vertical-align:top; border-bottom:1px solid var(--line); }
.cases tr:last-child td { border-bottom:0; }
.cases th { color:var(--muted); font-size:12.5px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; }
.cases td:first-child { color:var(--strong); font-weight:600; }
.cases td:last-child { color:var(--muted); }
.cases .tchip { white-space:nowrap; }
@media (max-width:640px) {
  .cases thead { display:none; }
  .cases tr { display:block; padding:10px 0; border-bottom:1px solid var(--line); }
  .cases tr:last-child { border-bottom:0; }
  .cases td { display:block; padding:3px 4px; border:0; }
  .cases .tchip { white-space:normal; }
}

/* ---------- 6. ký hiệu phụ ---------- */
.sides { display:grid; gap:14px; grid-template-columns:repeat(auto-fill, minmax(min(100%, 200px), 1fr)); margin-top:24px; }
.sd { padding:18px; }
.sd .px { display:block; font:800 30px/1 Consolas, "Cascadia Mono", monospace; color:var(--cu); }
.sd h3 { margin:12px 0 4px; font-size:16px; }
.sd p { margin:0 0 12px; color:var(--muted); font-size:14px; }

/* ---------- 7. luật nhỏ ---------- */
.checks { list-style:none; margin:24px 0 0; padding:0; display:grid; gap:10px; grid-template-columns:repeat(auto-fill, minmax(min(100%, 330px), 1fr)); counter-reset:c; }
.checks li { position:relative; padding:14px 16px 14px 56px; counter-increment:c; }
.checks li::before { content:counter(c); position:absolute; left:16px; top:14px; width:26px; height:26px; display:grid; place-items:center;
  border-radius:50%; background:rgba(193,147,120,.22); color:var(--cu); font-weight:700; font-size:13px; }
.checks b { color:var(--strong); }
.checks small { display:block; margin-top:3px; color:var(--muted); font-size:13.5px; }

/* ---------- 8. bảng đầy đủ: lọc theo nhóm + mỗi nhóm 1 bảng rộng hết khung (tên đang chọn · tên thứ tiếng kia · mô tả) ---------- */
.dl { display:flex; flex-wrap:wrap; gap:10px; margin-top:22px; }
.gfilter { display:flex; flex-wrap:wrap; gap:8px; margin-top:26px; }
.gfilter .chip { display:inline-flex; align-items:center; gap:8px; padding:0 14px 0 6px; }
.gfilter .chip.all { padding:0 16px; }
.gfilter .chip .num { width:24px; height:24px; border-radius:50%; font-size:12px; }
.tbls { display:grid; gap:16px; margin-top:16px; }
.gt { padding:0; overflow:hidden; border-top:3px solid var(--s); }
.gt h3 { display:flex; align-items:center; flex-wrap:wrap; gap:4px 12px; margin:0; padding:14px 18px; font-size:15.5px; letter-spacing:.04em; }
.gt h3 small { color:var(--muted); font-size:12.5px; font-weight:500; letter-spacing:.03em; }
.gt h3 .cnt { margin-left:auto; font-size:12.5px; font-weight:600; letter-spacing:0; color:var(--s); }
.gt table { width:100%; border-collapse:collapse; table-layout:fixed; font-size:14.5px; }
.gt col.c1 { width:26%; } .gt col.c2 { width:24%; }
.gt.two col.c1, .gt.two col.c2 { width:50%; }
.gt th { padding:8px 18px; text-align:left; font-size:11.5px; font-weight:700; letter-spacing:.07em; text-transform:uppercase; color:var(--muted); background:var(--hover); border-top:1px solid var(--line); }
.gt td { padding:9px 18px; border-top:1px solid var(--line); vertical-align:top; overflow-wrap:anywhere; }
.gt td.n1 { color:var(--strong); font-weight:600; }
.gt td.n2 { color:var(--text); }
.gt td.ds { color:var(--muted); }
.gt tbody tr:hover td { background:var(--hover); }
.gt .mats { display:flex; flex-wrap:wrap; gap:6px; padding:12px 18px 16px; border-top:1px solid var(--line); }
.gt .mats code { font-size:12.5px; }
@media (max-width:640px) {
  .gt thead { display:none; }
  .gt table, .gt tbody, .gt tr { display:block; width:auto; }
  .gt tr { padding:10px 16px; border-top:1px solid var(--line); }
  .gt td { display:inline; padding:0; border:0; }
  .gt td.n2 { margin-left:8px; color:var(--muted); font-size:13px; }
  .gt td.ds { display:block; margin-top:2px; font-size:13.5px; }
  .gt tbody tr:hover td { background:none; }
}