.tools-page{
  --e0:0 1px 2px rgba(13,17,23,.06);
  --e1:0 1px 2px rgba(13,17,23,.08),0 2px 6px rgba(13,17,23,.05);
  --e2:0 2px 4px rgba(13,17,23,.08),0 6px 16px rgba(13,17,23,.08);
  --e3:0 4px 8px rgba(13,17,23,.10),0 12px 28px rgba(13,17,23,.10);
}
:root[data-theme="dark"] .tools-page{
  --e0:0 1px 2px rgba(0,0,0,.4);
  --e1:0 1px 2px rgba(0,0,0,.5),0 2px 6px rgba(0,0,0,.35);
  --e2:0 2px 4px rgba(0,0,0,.5),0 6px 16px rgba(0,0,0,.45);
  --e3:0 4px 8px rgba(0,0,0,.55),0 12px 28px rgba(0,0,0,.5);
}

/* ── 1. the cong cu dang O ICON ─────────────────────────────────────────────── */
.tools-page .card[data-c="calculators"]  {--t:var(--c-calculators)}
.tools-page .card[data-c="skins"]        {--t:var(--c-skins)}
.tools-page .card[data-c="world"]        {--t:var(--c-world)}
.tools-page .card[data-c="building"]     {--t:var(--c-building)}
.tools-page .card[data-c="commands"]     {--t:var(--c-commands)}
.tools-page .card[data-c="datapack"]     {--t:var(--c-datapack)}
.tools-page .card[data-c="resourcepack"] {--t:var(--c-resourcepack)}
.tools-page .card[data-c="reference"]    {--t:var(--c-reference)}
.tools-page .card[data-c="server"]       {--t:var(--c-server)}
.tools-page .card{--t:var(--muted)}

.tools-page .sec:not(#popular) .grid{gap:10px;
  grid-template-columns:repeat(auto-fill,minmax(268px,1fr))}
.tools-page .card.tile{flex-direction:row;align-items:center;gap:12px;
  padding:10px 15px 10px 10px;border-radius:14px;border-color:transparent;
  background:var(--raise);box-shadow:none;
  transition:transform .16s cubic-bezier(.2,.7,.3,1),box-shadow .16s,background .16s}
.tools-page .card.tile:hover{transform:translateY(-2px);background:var(--paper);
  box-shadow:var(--e2);border-color:transparent}
.tools-page .card.tile:active{transform:translateY(0);box-shadow:var(--e0)}
.tools-page .tico{width:50px;height:50px;flex:none;border-radius:13px;
  display:grid;place-items:center;background:var(--paper);
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--t) 26%,transparent),
             0 1px 2px color-mix(in srgb,var(--t) 16%,transparent)}
:root[data-theme="dark"] .tools-page .tico{
  background:color-mix(in srgb,var(--t) 15%,var(--sunk))}
.tools-page .tico img{width:30px;height:30px;display:block;image-rendering:pixelated}
.tools-page .card.tile .cb{padding:0;gap:2px;min-width:0;flex:1}
.tools-page .card.tile .ct{font-size:14.5px;line-height:1.3;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tools-page .card.tile .cd{font-size:12.5px;line-height:1.45}
/* muc Popular giu anh that — chi lam mem vien va nang do bong len loi noi */
.tools-page #popular .card{border-color:transparent;background:var(--raise);
  box-shadow:none;border-radius:16px}
.tools-page #popular .card:hover{box-shadow:var(--e3);background:var(--paper)}
@media(max-width:640px){
  .tools-page .sec:not(#popular) .grid{grid-template-columns:1fr;gap:8px}
  .tools-page .card.tile{padding:9px 13px 9px 9px;gap:11px;border-radius:13px}
  .tools-page .tico{width:44px;height:44px;border-radius:12px}
  .tools-page .tico img{width:27px;height:27px}
  /* ⛔ ĐA BO luat `#popular .grid` o day: no co ID nen do uu tien (1,2,0) — THANG
     moi luat chi co lop, ke ca `html .tools-page .sec .grid` (0,3,1) o lop g-floating.
     Ket qua: tren dien thoai muc Popular van chia HAI cot 176px du da chot mot cot,
     va chu trong the bi cat. Mot selector co ID lot vao la du lat nguoc ca he thong. */
}

/* ── 2. dai nhom: xuong dong, bo cuon ngang ─────────────────────────────────── */
.tools-page .chips{flex-wrap:wrap;overflow:visible;padding-bottom:0;cursor:default;
  scroll-snap-type:none;row-gap:8px}
.tools-page .chips.dragging{cursor:default;user-select:auto}
.tools-page .chip-nav{display:none!important}
.tools-page .barin{align-items:flex-start}
.tools-page .bar{padding:11px 0;border-bottom:1px solid var(--line);box-shadow:none}
.tools-page .sbox{flex:0 0 288px;align-self:center}
@media(max-width:900px){.tools-page .sbox{flex:1 1 auto;align-self:stretch}}

/* ── 3. khoi huong dan gon lai ──────────────────────────────────────────────── */
.tools-page .rel.gd{background:none;border:0;border-top:1px solid var(--line);
  border-radius:0;padding:20px 0 0;margin-top:30px}
.tools-page .rel.gd .gdhead{gap:9px;margin:0 0 11px}
.tools-page .rel.gd .gdicon{width:22px;height:22px;border-radius:7px;box-shadow:none}
.tools-page .rel.gd .gdicon svg{width:13px;height:13px}
.tools-page .rel.gd h2{font-size:12px;letter-spacing:.08em;font-weight:700}
/* `auto-fit` chu khong phai `auto-fill`: 85/100 cong cu chi co MOT bai huong dan,
   ma `auto-fill` giu nguyen 3 cot rong nen the do chi rong 1/3 trong khi cac hang
   Hoi/Dap ngay duoi rong het khung — nhin nhu hai khoi roi nhau. */
.tools-page .rel.gd .g{gap:8px;grid-template-columns:repeat(auto-fit,minmax(340px,1fr))}
.tools-page .rel.gd .g a,.tools-page .gdcard{display:flex;align-items:center;gap:10px;
  padding:10px 14px;border-radius:11px;border-color:transparent;background:var(--raise);
  min-height:44px;transition:background .15s,box-shadow .15s,transform .15s}
.tools-page .rel.gd .g a:hover,.tools-page .gdcard:hover{background:var(--paper);
  box-shadow:var(--e1);transform:none;border-color:transparent}
.tools-page .rel.gd .g a::before{content:"";width:5px;height:5px;border-radius:50%;
  background:var(--brand);flex:none}
.tools-page .rel.gd .g b,.tools-page .gdcard b{margin:0;font-size:13.5px;line-height:1.4;
  font-weight:500;color:var(--body);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.tools-page .rel.gd .g a:hover b{color:var(--ink)}
/* ⛔ Doan trich bi an CO CHU Y: tieu de bai o day von da la mot cau tron ven
   ("server.properties: the settings that change performance, and the ones that do
   nothing"), nen doan trich chi lap lai y do bang chu nhat — ton 2 dong moi the. */
.tools-page .rel.gd .g span,.tools-page .gdcard span{display:none}

/* hoi & dap — gap lai, mo ra khi bam (khoi FAQ dung chung voi khoi huong dan) */
.tools-page .faq{display:grid;gap:6px;margin:12px 0 0}
.tools-page .faq details{border-radius:11px;background:var(--raise);overflow:hidden;
  transition:background .15s,box-shadow .15s}
.tools-page .faq details[open]{background:var(--paper);box-shadow:var(--e1)}
.tools-page .faq summary{list-style:none;cursor:pointer;display:flex;align-items:center;
  gap:10px;padding:11px 14px;font:500 13.5px/1.42 Inter,sans-serif;color:var(--body)}
.tools-page .faq summary::-webkit-details-marker{display:none}
.tools-page .faq summary::after{content:"";margin-inline-start:auto;flex:none;
  width:8px;height:8px;border-right:2px solid var(--muted);
  border-bottom:2px solid var(--muted);transform:rotate(45deg) translate(-2px,-2px);
  transition:transform .18s}
.tools-page .faq details[open] summary::after{
  transform:rotate(-135deg) translate(-2px,-2px)}
.tools-page .faq summary:hover{color:var(--ink)}
/* ⛔ TEN LOP `.fa` DA DINH THAT: `bundle-global.css` cua 9minecraft nap Font Awesome,
   ma Font Awesome dat `.fa{display:inline-block;width:1em}`. Khoi dap an tut xuong
   28px be ngang -> chu xuong dong TUNG TU MOT. CSS cua minh khong he sai; no chi
   khong dat `display` nen thua. Moi ten lop moi phai kiem truoc xem theme da dung
   chua. */
.tools-page .faq .faq-a{padding:0 14px 13px 14px;font-size:13.5px;line-height:1.62;
  /* ⛔ Dap an phai DAM hon cau hoi, khong nhat hon: dap an moi la noi dung. Ban dau
     de `--muted` nen cau hoi ro ma cau tra loi mo — nguoc voi thu tu doc. */
  color:var(--body)}
.tools-page .faq .faq-a p{margin:0 0 9px}
.tools-page .faq .faq-a p:last-child{margin:0}
.tools-page .faq .faq-a code{font:12.5px/1.5 ui-monospace,SFMono-Regular,Menlo,monospace;
  background:var(--sunk);border-radius:5px;padding:1px 5px}
.tools-page .faq .faq-a a{color:var(--brand-ink);text-decoration:underline;
  text-underline-offset:2px}

/* ── 7. BA COT + hien DU chu (user 28/09: "bo tri 3 cot thoi... khong an text nao") ─ */
/* ⛔ Truoc day luoi tu chia cot theo `auto-fill minmax(268px)` — o 1200px thanh 4 cot
   rong 280px, khong du cho mot cau mo ta nen phai cat bang `ellipsis`. Chot 3 cot thi
   moi o rong ~380px, du de xuong dong ma van doc duoc. */
.tools-page .grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.tools-page .sec:not(#popular) .grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.tools-page .rel .g.gimg,.tools-page .hlgrid{
  grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
@media(max-width:1040px){
  .tools-page .grid,.tools-page .sec:not(#popular) .grid,
  .tools-page .rel .g.gimg,.tools-page .hlgrid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:680px){
  .tools-page .grid,.tools-page .sec:not(#popular) .grid,
  .tools-page .rel .g.gimg,.tools-page .hlgrid{grid-template-columns:1fr}
}
/* ⛔ BO het cat chu. Ba cho cung cat mot kieu: `.ct` va `.cd` cua the, va cau dan o
   dau trang. Chu bi cat la nguoi doc phai doan xem tool do lam gi. */
.tools-page .card.tile{align-items:flex-start;padding:13px 16px 13px 12px}
.tools-page .card.tile .tico{margin-top:1px}
.tools-page .card.tile .ct,.tools-page .card .ct{white-space:normal;overflow:visible;
  text-overflow:clip;line-height:1.32}
.tools-page .card.tile .cd,.tools-page .card .cd{white-space:normal;overflow:visible;
  text-overflow:clip;display:block;-webkit-line-clamp:none;line-clamp:none;
  line-height:1.5;margin-top:1px}
.tools-page .hero p{white-space:normal;overflow:visible;text-overflow:clip;display:block}
/* dai "More <nhom> tools" + "More on 9Minecraft" cung doi sang hang co o icon */
.tools-page .relcard,.tools-page .hlcard{flex-direction:row;align-items:flex-start;
  gap:12px;padding:13px 16px 13px 12px;overflow:visible}
.tools-page .relcard .rct,.tools-page .hlcard .hlbody{padding:0;min-width:0;display:block;
  font-weight:400}
.tools-page .relcard b,.tools-page .hlcard b{display:block;font:600 14.5px/1.32 Inter,
  sans-serif;color:var(--ink);margin:0}
.tools-page .relcard span,.tools-page .hlcard span{display:block;white-space:normal;
  overflow:visible;-webkit-line-clamp:none;line-clamp:none;font-size:12.5px;
  line-height:1.5;color:var(--muted);margin-top:2px}
.tools-page .hlcard .hlbody i{display:none}
/* ⛔ `.relcard` nam trong `.rel .g`, ma luat nen cua no la `.tools-page .rel .g span`
   — do uu tien (0,3,1), MANH HON `.tools-page .relcard span` (0,2,1). Viet luat bo cat
   chu o do uu tien thap hon thi no THUA ma khong bao gi: do lai van thay `line-clamp:2`
   va `overflow:hidden`. Phai neo du ca ba lop. */
.tools-page .rel .g .relcard b{display:block;font:600 14.5px/1.32 Inter,sans-serif;
  color:var(--ink);margin:0}
.tools-page .rel .g .relcard span{display:block;white-space:normal;overflow:visible;
  -webkit-line-clamp:none;line-clamp:none;font-size:12.5px;line-height:1.5;
  color:var(--muted);margin-top:2px}
/* ⛔ `.hlcard` khong co `<b>` — ten nam ngay trong `<span>`. Luat chung o tren bien
   `span` thanh chu phu (xam, 12,5px), nen ten cua dai "More on 9Minecraft" tut xuong
   thanh chu mo. Tra lai dung vai tro TIEU DE cho no. */
.tools-page .hlcard .hlbody span{font:600 14.5px/1.32 Inter,sans-serif;color:var(--ink);
  margin-top:0}
.tools-page .hlcard{align-items:center}

/* ── 6. Nut chon ngon ngu (28/09/2026) ────────────────────────── */
/* Dat o dau phai dai breadcrumb — dai do co tren MOI loai trang, nam ngay dau trang va
   phan ben phai von de trong. Thanh loc dinh khong dung duoc vi chip da xuong hai dong. */
#breadcrumbs .lgpick{position:relative;margin-inline-start:auto;font-family:Inter,
  -apple-system,'Segoe UI',Roboto,sans-serif}
#breadcrumbs .lgbtn{display:inline-flex;align-items:center;gap:7px;cursor:pointer;
  font:500 12.5px/1 Inter,sans-serif;color:var(--body);background:var(--paper);
  border:1px solid var(--line);border-radius:100px;padding:6px 11px 6px 9px;
  transition:background .15s,box-shadow .15s,border-color .15s}
#breadcrumbs .lgbtn:hover{background:var(--raise);border-color:var(--line-2);
  box-shadow:var(--e0)}
#breadcrumbs .lgbtn svg{width:14px;height:14px;flex:none;fill:none;stroke:currentColor;
  stroke-width:1.7}
#breadcrumbs .lgbtn .lgar{width:6px;height:6px;flex:none;margin-inline-start:1px;
  border-right:1.6px solid var(--muted);border-bottom:1.6px solid var(--muted);
  transform:rotate(45deg) translate(-1px,-1px);transition:transform .18s}
#breadcrumbs .lgpick.mo .lgar{transform:rotate(-135deg) translate(-1px,-1px)}
/* ⛔⛔ LOI THAT, user bao "bam vao khong xo xuong": JS bat/tat bang thuoc tinh
   `hidden`, ma luat UA cua trinh duyet la `[hidden]{display:none}` voi do uu tien
   (0,1,0) — THUA luat `#breadcrumbs .lgmenu{display:grid}` ben duoi (1,1,0). Ket qua:
   menu MO SAN vinh vien, bam nut doi `hidden` nhung khong thay doi gi tren man hinh.
   Cu đặt `display:grid` len mot phan tu co the `hidden` la dinh bay nay. */
#breadcrumbs .lgmenu[hidden]{display:none}
#breadcrumbs .lgmenu{position:absolute;z-index:60;inset-inline-end:0;top:calc(100% + 6px);
  min-width:300px;max-height:60vh;overflow:auto;padding:6px;
  background:var(--paper);border:1px solid var(--line);border-radius:14px;
  box-shadow:var(--e3);display:grid;grid-template-columns:1fr 1fr;gap:2px}
#breadcrumbs .lgmenu a{display:block;padding:8px 11px;border-radius:9px;font-size:13px;
  line-height:1.3;color:var(--body);text-decoration:none;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
#breadcrumbs .lgmenu a:hover{background:var(--raise);color:var(--ink);
  text-decoration:none}
#breadcrumbs .lgmenu a[aria-current]{background:var(--brand-wash);
  color:var(--brand-ink);font-weight:600}
@media(max-width:600px){
  /* ⛔ Breadcrumb tu xuong dong o khung hep; de `auto` thi nut bi day ra mot minh mot
     dong lech phai. Cho no ve dau dong, chiem tron be rong con lai. */
  #breadcrumbs .lgpick{margin-inline-start:0;margin-top:4px}
  #breadcrumbs .lgmenu{grid-template-columns:1fr;min-width:210px;max-height:56vh}
}

/* ── 5. Soat tuong phan + tran ngang (28/09/2026, do bang `soi_giao_dien.py`) ── */
/* `--muted` cu la #6b7683: tren nen trang chi duoc 4,31:1, duoi nguong AA 4,5:1 — ma no
   dung cho MO TA cua ca 100 the va moi doan dan. Ha mot nac la ca trang qua nguong. */
.tools-page{--muted:#5c6773}
:root[data-theme="dark"] .tools-page{--muted:#97a3b0}
/* Dong ngay thang cua bai huong dan ghi cung mau xam nhat (do duoc 2,85:1). */
.tools-page .prose .meta,.tools-page .prose time,.tools-page .prose .meta *{
  color:var(--muted)}
/* ⛔ Bang CUA CONG CU tran ngang tren dien thoai: do that 640px trong khung 412px, 47 cho.
   `.prose table` da co `overflow-x` nhung bang ben trong `#tool-root` thi khong. Chi ap o
   khung hep — tren desktop bang van la bang that. */
@media(max-width:760px){
  .tools-page main.main #tool-root table{display:block;overflow-x:auto;
    max-width:100%;-webkit-overflow-scrolling:touch}
}
/* Nen o trang cong cu do duoc L=0,92 (xam) trong khi trang danh sach va trang bai la
   L=1,00 (trang) — cung mot site ma hai nen khac nhau. Dua ve mot moi. */
.tools-page{background:var(--paper)}

/* ── 4. nut: nen phang + bong thap, nang len khi re chuot ───────────────────── */
.tools-page .gcta{background:var(--brand);background-image:none;border-radius:100px;
  font-weight:500;font-size:15px;letter-spacing:.01em;padding:12px 26px;
  box-shadow:var(--e1);
  transition:transform .16s cubic-bezier(.2,.7,.3,1),box-shadow .16s,background .16s}
.tools-page .gcta:hover{transform:translateY(-1px);filter:none;
  background:var(--brand-ink);box-shadow:var(--e2)}
.tools-page .gcta:active{transform:translateY(0);box-shadow:var(--e0)}
.tools-page .gcta:focus-visible{outline:3px solid color-mix(in srgb,var(--brand) 40%,
  transparent);outline-offset:2px}
.tools-page .chip{border-color:var(--line);background:var(--paper);font-weight:500;
  padding:8px 15px;box-shadow:none;transition:background .15s,box-shadow .15s,
  border-color .15s,color .15s}
.tools-page .chip:hover{background:var(--raise);border-color:var(--line-2);
  box-shadow:var(--e0)}
.tools-page .chip.on{background:var(--brand-wash);border-color:transparent;
  color:var(--brand-ink);font-weight:600;box-shadow:var(--e0)}
.tools-page .chip.on i{background:var(--brand-ink)}
.tools-page .back,.tools-page .hl,.tools-page .lgbar a{border-color:var(--line);
  background:var(--paper);box-shadow:none;transition:background .15s,box-shadow .15s,
  border-color .15s,color .15s,transform .15s}
.tools-page .back:hover,.tools-page .hl:hover,.tools-page .lgbar a:hover{
  background:var(--raise);box-shadow:var(--e0);transform:translateY(-1px)}
.tools-page .back{padding:7px 15px}
.tools-page .fsbtn{border-radius:100px;padding:9px 16px;font-weight:500;
  background:rgba(15,17,25,.72);border-color:rgba(255,255,255,.14);
  box-shadow:var(--e2)}
.tools-page .fsbtn:hover{background:rgba(15,17,25,.88);box-shadow:var(--e3)}
.tools-page .relcard,.tools-page .hlcard,.tools-page .gcard{border-color:transparent;
  background:var(--raise);border-radius:14px}
.tools-page .relcard:hover,.tools-page .hlcard:hover,.tools-page .gcard:hover{
  background:var(--paper);box-shadow:var(--e2);border-color:transparent}
.tools-page .relcard img,.tools-page .hlcard img{border-bottom:0}
.tools-page .gbox{border-color:transparent;background:var(--raise);border-radius:14px}
@media (prefers-reduced-motion:reduce){
  .tools-page .card,.tools-page .card.tile,.tools-page .gcta,.tools-page .back,
  .tools-page .hl,.tools-page .relcard,.tools-page .hlcard,.tools-page .gcard{
    transition:none!important}
  .tools-page .card.tile:hover,.tools-page .gcta:hover,.tools-page .back:hover{
    transform:none}
}