/* wiki.9minecraft.net — "Google Floating" minimalist theme (2026-09-27)
   Thẻ nổi bo tròn + shadow mềm + accent Google-blue + Roboto. Light + Dark. */
:root{
  --bg:#f6f8fc; --surface:#ffffff; --surface2:#f1f3f4; --chip:#e8f0fe;
  --text:#202124; --muted:#5f6368; --line:#e4e7eb;
  --accent:#1a73e8; --accent-2:#1765cc; --on-accent:#fff;
  --radius:18px; --radius-sm:12px; --radius-xs:8px;
  --shadow:0 1px 2px rgba(60,64,67,.10),0 1px 3px 1px rgba(60,64,67,.06);
  --shadow-h:0 1px 3px rgba(60,64,67,.16),0 6px 14px 2px rgba(60,64,67,.10);
  --sans:'Roboto',system-ui,-apple-system,'Segoe UI',sans-serif;
  --mono:'Roboto Mono',ui-monospace,'IBM Plex Mono',monospace;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#1b1c1d; --surface:#26282b; --surface2:#303134; --chip:#1f2a3b;
  --text:#e8eaed; --muted:#9aa0a6; --line:#3c4043;
  --accent:#8ab4f8; --accent-2:#aecbfa; --on-accent:#0b213f;
  --shadow:0 1px 2px rgba(0,0,0,.34),0 1px 3px 1px rgba(0,0,0,.20);
  --shadow-h:0 1px 3px rgba(0,0,0,.44),0 6px 14px 2px rgba(0,0,0,.28);
}}
:root[data-theme="dark"]{
  --bg:#1b1c1d; --surface:#26282b; --surface2:#303134; --chip:#1f2a3b;
  --text:#e8eaed; --muted:#9aa0a6; --line:#3c4043;
  --accent:#8ab4f8; --accent-2:#aecbfa; --on-accent:#0b213f;
  --shadow:0 1px 2px rgba(0,0,0,.34),0 1px 3px 1px rgba(0,0,0,.20);
  --shadow-h:0 1px 3px rgba(0,0,0,.44),0 6px 14px 2px rgba(0,0,0,.28);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--sans);
  font-size:15px;line-height:1.6;-webkit-font-smoothing:antialiased}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}
code{font-family:var(--mono);font-size:.86em;background:var(--surface2);
  padding:.12em .42em;border-radius:6px;color:var(--muted)}
h1{font-size:28px;font-weight:700;letter-spacing:-.4px;margin:.1em 0 .35em}
h2{font-size:20px;font-weight:700;letter-spacing:-.2px;margin:1.4em 0 .5em;
  padding-bottom:.35em;border-bottom:1px solid var(--line)}
h3{font-size:16px;font-weight:600;margin:1.1em 0 .4em}
p{margin:.5em 0}
.iid{font-family:var(--mono);font-size:12.5px;color:var(--muted);margin:-.2em 0 1em;word-break:break-all}
.src{color:var(--muted);font-size:13.5px;margin:.2em 0 .8em}

/* ---- topbar (floating pill) ---- */
.topbar{position:sticky;top:0;z-index:40;background:var(--bg);padding:10px 0}
.twrap{max-width:1180px;margin:0 auto;padding:8px 14px;display:flex;align-items:center;gap:14px;
  background:var(--surface);border-radius:999px;box-shadow:var(--shadow)}
.brand{display:flex;align-items:center;flex:0 0 auto}
.brand img{height:26px!important;width:auto}
.wikiname{font-weight:600;font-size:14.5px;white-space:nowrap;color:var(--muted)}
.wikiname a{color:var(--text)}
.wikiname a:hover{text-decoration:none;color:var(--accent)}
.search{position:relative;flex:1 1 auto;max-width:560px;margin:0 auto}
.search input{width:100%;border:1px solid transparent;background:var(--surface2);
  border-radius:999px;padding:10px 18px;font:inherit;font-size:14px;color:var(--text);outline:none;transition:.15s}
.search input:focus{background:var(--surface);border-color:var(--line);box-shadow:var(--shadow-h)}
.sres{position:absolute;top:110%;left:0;right:0;background:var(--surface);border-radius:16px;
  box-shadow:var(--shadow-h);overflow:hidden;z-index:50}
.sres a{display:block;padding:10px 16px;color:var(--text);border-bottom:1px solid var(--line)}
.sres a:hover{background:var(--surface2);text-decoration:none}
.tbtn{flex:0 0 auto;width:38px;height:38px;border:none;border-radius:50%;background:var(--surface2);
  color:var(--muted);font-size:18px;cursor:pointer;transition:.15s}
.tbtn:hover{background:var(--chip);color:var(--accent)}

/* ---- layout ---- */
.layout{max-width:1180px;margin:14px auto;padding:0 14px;display:grid;
  grid-template-columns:230px 1fr;gap:18px;align-items:start}
.side{position:sticky;top:78px;display:flex;flex-direction:column;gap:14px}
.side .box{background:var(--surface);border-radius:var(--radius);box-shadow:var(--shadow);padding:14px 8px}
.side .box h3{margin:.2em 12px .5em;font-size:12px;letter-spacing:.6px;text-transform:uppercase;color:var(--muted)}
.side .box a{display:block;padding:8px 14px;border-radius:999px;color:var(--text);font-size:14px;font-weight:500}
.side .box a:hover{background:var(--surface2);text-decoration:none}
.side .box a.on{background:var(--chip);color:var(--accent);font-weight:700}
main{min-width:0}
.crumb{font-size:13px;color:var(--muted);margin:2px 4px 12px}
.crumb a{color:var(--muted)}
article{background:var(--surface);border-radius:var(--radius);box-shadow:var(--shadow);
  padding:26px 30px;overflow:hidden}
article>h2:first-of-type,article>h1:first-child{margin-top:.1em}

/* ---- hero ---- */
.hero{margin:-4px 0 8px}
.hero h1{margin-bottom:.15em}
.hero .iid{margin-bottom:.7em}
.hero p{font-size:16px;color:var(--text);max-width:none}

/* ---- guides ---- */
.gguide{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:12px;margin:10px 0}
.gcard{display:block;padding:16px 18px;border:1px solid var(--line);border-radius:var(--radius-sm);
  text-decoration:none;font-weight:600;line-height:1.4;color:var(--text);background:var(--surface);transition:.15s}
.gcard:hover{text-decoration:none;box-shadow:var(--shadow-h);transform:translateY(-2px);border-color:transparent}

/* ---- FAQ ---- */
details.faq{border:1px solid var(--line);border-radius:var(--radius-sm);padding:2px 16px;margin:8px 0;background:var(--surface)}
details.faq>summary{cursor:pointer;font-weight:600;padding:12px 0;list-style:none}
details.faq>summary::-webkit-details-marker{display:none}
details.faq>summary::before{content:"+";color:var(--accent);font-weight:700;margin-right:10px}
details.faq[open]>summary::before{content:"–"}
details.faq[open]>summary{border-bottom:1px solid var(--line)}
details.faq>div{padding:12px 0;color:var(--text)}

/* ---- processes chips ---- */
.chip{display:inline-flex;align-items:center;gap:6px;margin:4px 6px 4px 0;padding:7px 15px;
  background:var(--chip);color:var(--accent);border-radius:999px;font-size:13px;font-weight:600}
.chip:hover{text-decoration:none;box-shadow:var(--shadow)}

/* ---- item / block grid ---- */
.azjump{display:flex;flex-wrap:wrap;gap:5px;margin:8px 0 12px;position:sticky;top:70px;
  background:var(--surface);padding:6px 0;z-index:5}
.azjump a{display:inline-block;min-width:26px;text-align:center;padding:4px 8px;border-radius:8px;
  background:var(--surface2);color:var(--text);font-weight:600;font-size:13px}
.azjump a:hover{background:var(--chip);color:var(--accent);text-decoration:none}
.azh{margin:16px 0 6px;font-size:14px;font-weight:700;color:var(--muted);scroll-margin-top:120px}
.igrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px;margin:6px 0}
.icell{display:flex;align-items:center;gap:10px;padding:10px 12px;border:1px solid var(--line);
  border-radius:var(--radius-sm);background:var(--surface);color:var(--text);font-size:13.5px;
  line-height:1.25;transition:.15s;min-height:56px}
.icell:hover{text-decoration:none;box-shadow:var(--shadow-h);transform:translateY(-2px);border-color:transparent}
.icell img{width:34px;height:34px;object-fit:contain;flex:0 0 auto;image-rendering:pixelated}
.noimg{display:inline-block;width:34px;height:34px;flex:0 0 auto;border:1px dashed var(--line);border-radius:8px;opacity:.5}

/* ---- list pagination + filter ---- */
.ifilter{width:100%;max-width:420px;border:1px solid var(--line);background:var(--surface2);
  border-radius:999px;padding:10px 18px;font:inherit;font-size:14px;color:var(--text);outline:none;margin:2px 0 10px}
.ifilter:focus{background:var(--surface);box-shadow:var(--shadow-h)}
.allbtn{display:inline-block;margin:8px 0;padding:9px 18px;background:var(--accent);color:var(--on-accent);
  border-radius:999px;font-weight:600;font-size:14px}
.allbtn:hover{text-decoration:none;box-shadow:var(--shadow-h)}
.pagenav{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:16px 0;justify-content:center}
.pagenav a{min-width:36px;text-align:center;padding:7px 12px;border-radius:10px;background:var(--surface2);
  color:var(--text);font-weight:600;font-size:14px}
.pagenav a:hover{background:var(--chip);color:var(--accent);text-decoration:none}
.pagenav a.on{background:var(--accent);color:var(--on-accent)}
.pagenav .dots{color:var(--muted);padding:0 4px}

/* ---- mobs ---- */
.mobgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px;margin:8px 0}
.mobgrid span{padding:12px 14px;border:1px solid var(--line);border-radius:var(--radius-sm);
  background:var(--surface);font-size:13.5px;font-weight:500}

/* ---- recipe ---- */
.recipe{display:flex;align-items:center;flex-wrap:wrap;gap:14px;background:var(--surface2);
  border-radius:var(--radius-sm);padding:14px 18px;margin:10px 0}
.cgrid{display:grid;gap:4px}
.slot{width:46px;height:46px;display:flex;align-items:center;justify-content:center;
  background:var(--surface);border:1px solid var(--line);border-radius:8px}
.slot img{width:34px;height:34px;object-fit:contain;image-rendering:pixelated}
.arrow{color:var(--muted);font-size:22px}
.result .slot.big{width:56px;height:56px}
.result .slot.big img{width:42px;height:42px}
.result{position:relative}
.count{position:absolute;right:-4px;bottom:-4px;background:var(--accent);color:var(--on-accent);
  font-size:11px;font-weight:700;border-radius:999px;padding:1px 6px}
.rmeta{font-size:12.5px;color:var(--muted);margin:2px 0 10px}
.rmeta a{color:var(--accent)}
.legend{font-size:12px;color:var(--muted);margin:0 0 10px}
.legend code{margin-right:4px}

/* ---- infobox ---- */
.infobox{float:right;width:270px;margin:0 0 18px 22px;background:var(--surface);
  border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden}
.infobox .head{background:var(--accent);color:var(--on-accent);font-weight:700;padding:12px 16px;text-align:center}
.infobox .pic{display:flex;justify-content:center;padding:18px;background:var(--surface2)}
.infobox .pic img{width:64px;height:64px;object-fit:contain;image-rendering:pixelated}
.infobox table{width:100%;border-collapse:collapse;font-size:13px}
.infobox td{padding:9px 14px;border-top:1px solid var(--line);vertical-align:top}
.infobox td:first-child{color:var(--muted);width:32%}

/* ---- data table ---- */
table.dv{border-collapse:collapse;font-size:13.5px;margin:6px 0}
table.dv td{padding:8px 14px;border:1px solid var(--line)}
table.dv td:first-child{color:var(--muted);background:var(--surface2)}
.gbody{max-width:74ch;line-height:1.7}
.gbody h3{margin:20px 0 6px}

/* ---- footer ---- */
footer{max-width:1180px;margin:26px auto;padding:20px 20px 40px;text-align:center;color:var(--muted);font-size:12.5px}
.fnav a{color:var(--muted)}
.dis{margin-top:8px;font-size:11px;opacity:.7}

/* ---- responsive ---- */
@media (max-width:860px){
  .layout{grid-template-columns:1fr}
  .side{position:static;flex-direction:row;flex-wrap:wrap}
  .side .box{flex:1 1 auto}
  .infobox{float:none;width:auto;margin:0 0 18px}
  .wikiname{display:none}
  article{padding:20px 16px}
  .azjump{top:66px}
}


/* ── Khoi VA cho khung dung chung (cau truc, khong phai thiet ke) — xem wiki-g.9 ── */
/* ═══ VÁ CHO KHUNG DÙNG CHUNG (hf.*.css) ═══════════════════════════════════════
   ⛔ KHÔNG sửa hf.*.css: tệp đó phải giữ y như site chính, để lần trích xuất lại không mất vá.
      Vì vậy tệp NÀY phải nạp SAU hf.*.css (xem head.html) — nạp trước thì bị hf đè lại. */

/* 1. Chừa chỗ cho header cố định.
   hf CSS chỉ có `html.is-header-shrunk body{padding-top:48px}`, KHÔNG có giá trị mặc định —
   ở site chính con số đó nằm trong CSS riêng của theme WordPress. Thiếu nó thì 70px đầu trang
   nằm DƯỚI header cố định (mắt thường khó thấy vì chỗ bị che thường là khoảng trắng). */
body{padding-top:70px}
html.is-header-shrunk body{padding-top:48px}
@media(max-width:991px){body{padding-top:52px}html.is-header-shrunk body{padding-top:38px}}

/* 2. Cột đơn không được phình theo nội dung rộng.
   hf đặt `.b__grid{grid-template-columns:1fr}` = minmax(AUTO,1fr): một khung quảng cáo rộng
   381px kéo cả cột thành 381px trong khung 375px → tràn ngang trên điện thoại. minmax(0,1fr)
   cho phép cột co lại, phần thừa bị `.adbox{overflow:hidden}` cắt. */
.b__grid{grid-template-columns:minmax(0,1fr)}
@media(min-width:992px){.b__grid{grid-template-columns:minmax(0,1fr) 300px}}
.b__main,#rsidebar{min-width:0}
.b__main>*,#rsidebar>*{max-width:100%}

/* 3. Sidebar phải: widget của wiki dùng lại đúng lớp .widget/.net-list của site chính,
   chỉ cần chặn tràn cho ô quảng cáo rail. */
#rsidebar .adbox{margin:16px 0}


/* ═══ SIDEBAR VỀ BÊN TRÁI — như giao diện wiki cũ (28/09) ═══════════════════════════════════
   Bản 28/09 dùng `.layout{grid-template-columns:230px 1fr}`: cột điều hướng của wiki ở TRÁI,
   bài ở phải, cột trái dính khi cuộn (`top:78px`). Lượt ghép khung site chính (30/09) đổi thành
   `.b__grid` với sidebar bên PHẢI.

   Markup của 168.495 trang viết theo thứ tự `.b__main` rồi `#rsidebar`, nhưng CSS Grid cho phép
   ĐẶT LẠI VỊ TRÍ bằng `grid-column` mà không cần đụng tới HTML — nên đổi bên chỉ là chuyện của
   tệp CSS này.

   ⛔ Giữ 300px chứ không 230px như bản cũ: sidebar bây giờ có ô quảng cáo rail 300×600. Ép còn
      230px thì ô đó tràn ra ngoài cột.
   ⛔ `grid-row: 1` cho cả hai: thiếu nó thì trình duyệt xếp chúng vào hai HÀNG khác nhau (vì
      thứ tự trong HTML là main trước), thành bài nằm trên, sidebar nằm dưới.
   ⛔ Chỉ đổi từ 992px trở lên. Dưới mức đó lưới vốn đã một cột, mà khi một cột thì ĐIỀU HƯỚNG
      phải nằm DƯỚI bài — đẩy nó lên trên là mỗi lần mở trang trên điện thoại đều phải cuộn qua
      cả cột điều hướng mới tới nội dung.
   ═══════════════════════════════════════════════════════════════════════════════════════════ */
@media (min-width: 992px) {
  .b__grid { grid-template-columns: 300px minmax(0, 1fr); }
  .b__grid > #rsidebar { grid-column: 1; grid-row: 1; }
  .b__grid > .b__main  { grid-column: 2; grid-row: 1; }

  /* cột trái dính khi cuộn, đúng như bản cũ */
  #rsidebar {
    position: sticky;
    top: 86px;                 /* 70px header cố định + 16px thở */
    align-self: start;
    max-height: calc(100vh - 104px);
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
  }
}


/* ═══ TRỞ VỀ KHUNG RIÊNG CỦA WIKI (01/10/2026) ═══════════════════════════════════════════════
   Header `.topbar` cũ là `position: sticky`, KHÔNG phải `fixed` như header site chính — nên gỡ
   `body{padding-top:70px}`, giữ lại là một dải trống 70px ở đầu mọi trang.
   ⛔ Vẫn nạp `hf.*.css` của site chính vì các lớp BỐ CỤC (.b__inner .b__grid #rsidebar .widget
      .widgettitle .net-list) nằm trong đó, trang nào cũng dùng. Luật về .h-bar-desktop/.ymega/
      .f.gf trong tệp đó nay trỏ vào phần tử không còn tồn tại nên vô hại.
   ⛔ Bộ luật header dưới đây lấy NGUYÊN từ wiki-g.9.css — đó là nơi markup `.topbar` hiện tại
      được style đúng. wiki-g.3.css (28/09) KHÔNG có luật nào cho `.homelink` và `.twrap` vì nút
      đó ra đời sau; ghép nhầm thì icon nhà phình to 60px và thanh header cao 123px (đã dính).
   ═══════════════════════════════════════════════════════════════════════════════════════════ */
body { padding-top: 0; }
html.is-header-shrunk body { padding-top: 0; }
@media (max-width: 991px) {
  body { padding-top: 0; }
  html.is-header-shrunk body { padding-top: 0; }
}

/* ---- topbar (floating pill) ---- */ .topbar{position:sticky;top:0;z-index:40;background:var(--bg);padding:10px 0}
.twrap{max-width:1180px;margin:0 auto;padding:8px 14px;display:flex;align-items:center;gap:14px; background:var(--surface);border-radius:999px;box-shadow:var(--shadow)}
.brand{display:flex;align-items:center;flex:0 0 auto}
.brand img{height:44px!important;width:auto;transition:height .18s ease}
/* logo là chữ TỐI (độ sáng TB 97/255) → chìm trên nền tối; đổi thành bóng trắng khi dark */ /* logo moi da la chu TRANG vien den -> KHONG dao mau o che do toi, dao se thanh chu den tren nen toi = mat hut. Chi giam nhe do choi. */ :root.dark .brand img,:root[data-theme="dark"] .brand img{opacity:.96}
.wikiname{font-weight:600;font-size:14.5px;color:var(--muted)}
.wikiname a{color:var(--text)}
.wikiname a:hover{text-decoration:none;color:var(--accent)}
.sres{position:absolute;top:110%;left:0;right:0;background:var(--surface);border-radius:16px; box-shadow:var(--shadow-h);overflow:hidden;z-index:50}
.sres a{display:block;padding:10px 16px;color:var(--text);border-bottom:1px solid var(--line)}
.sres a:hover{background:var(--surface2);text-decoration:none}
.tbtn{flex:0 0 auto;width:38px;height:38px;border:none;border-radius:50%;background:var(--surface2); color:var(--muted);font-size:18px;cursor:pointer;transition:.15s}
.tbtn:hover{background:var(--chip);color:var(--accent)}
.wikiname{display:none}
.homelink span{display:none}
.homelink{padding:0;width:38px;justify-content:center}
/* ---- link ve trang chu 9minecraft.net (cum dieu khien phai, canh nut sang/toi) ---- */ .homelink{flex:0 0 auto;display:inline-flex;align-items:center;gap:7px;height:38px;padding:0 15px; border-radius:999px;background:var(--surface2);color:var(--muted);font-weight:600;font-size:13.5px; white-space:nowrap;transition:background .15s,color .15s,box-shadow .15s}
.homelink:hover{background:var(--chip);color:var(--accent);box-shadow:var(--shadow);text-decoration:none}
.homelink svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2; stroke-linecap:round;stroke-linejoin:round;flex:none}
/* ---- logo to + thu nho khi cuon (chep cong thuc site goc 9minecraft) ---- Site goc: header 70px -> 48px, logo max-height 36px, class tren the goc, nguong 60px. */ :root.is-header-shrunk .topbar{padding:4px 0}
:root.is-header-shrunk .twrap{padding:4px 14px}
:root.is-header-shrunk .brand img{height:30px!important}

/* Cột trái dính theo header sticky (không còn header cố định 70px che) */
@media (min-width: 992px) {
  #rsidebar { top: 16px; max-height: calc(100vh - 32px); }
}

/* Footer riêng của wiki — gọn, không phải footer lớn của site chính */
footer { max-width: 1180px; margin: 28px auto 0; padding: 20px 14px 36px; }
footer .fnav { margin: 0 0 6px; font-size: 13.5px; }
footer .dis { margin: 0; font-size: 11.5px; color: var(--muted); letter-spacing: .02em; }

/* ── Bù luật cho các khối giao diện ra đời SAU 28/09 (wgrid/wcard/wsearch/hlogo/grow/iso/cfgt).
   Lấy nguyên từ wiki-g.9.css — nơi markup hiện tại được style đúng. Thiếu chúng thì trang chủ
   mất hẳn lưới: ảnh hiện bằng kích thước gốc, tên thành link xanh trần. ── */
:root.dark img.iso,:root.dark .icell img,:root.dark .slot img,:root[data-theme="dark"] img.iso,:root[data-theme="dark"] .icell img,:root[data-theme="dark"] .slot img{filter:none}
.hero .grow{min-width:0;flex:1 1 auto}
.hlogo{width:72px;height:72px;object-fit:contain;border-radius:14px;flex:0 0 auto; background:var(--surface2);padding:6px;box-shadow:var(--shadow)}
@media (max-width:560px){.hlogo{width:52px;height:52px}}
/* ---- trang chủ + /wikis/ (thẻ wiki có logo mod) ---- */ .wsearch{margin:14px 0 20px;position:relative}
.wsearch input{width:100%;max-width:640px;border:1px solid var(--line);background:var(--surface); border-radius:999px;padding:14px 24px;font:inherit;font-size:16px;color:var(--text);outline:none; box-shadow:var(--shadow);transition:.15s}
.wsearch input:focus{box-shadow:var(--shadow-h);border-color:transparent}
.wgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:12px;margin:10px 0}
.wcard{display:flex;align-items:center;gap:12px;padding:12px 14px;border:1px solid var(--line); border-radius:var(--radius-sm);background:var(--surface);color:var(--text);font-weight:600; font-size:14px;line-height:1.3;transition:.15s;min-height:62px}
.wcard:hover{text-decoration:none;box-shadow:var(--shadow-h);transform:translateY(-2px);border-color:transparent}
.wcard img{width:38px;height:38px;object-fit:contain;border-radius:8px;flex:0 0 auto}
.wcard .noimg{width:38px;height:38px}
/* ---- Commands / Configuration (2 nhom moi, dat tren FAQ) ---- */ .cmdt,.cfgt{width:100%;border-collapse:collapse;margin:10px 0 18px;font-size:14px}
.cmdt th,.cfgt th{text-align:left;font-weight:600;color:var(--muted);font-size:12px; letter-spacing:.04em;text-transform:uppercase;padding:8px 12px;border-bottom:1px solid var(--line)}
.cmdt td,.cfgt td{padding:9px 12px;border-bottom:1px solid var(--line);vertical-align:top}
.cmdt tr:last-child td,.cfgt tr:last-child td{border-bottom:0}
.cmdt td:first-child,.cfgt td:first-child{width:34%;min-width:150px}
.cmdt code,.cfgt code{font-family:var(--mono,ui-monospace,monospace);font-size:13px; background:var(--surface2);border-radius:6px;padding:2px 7px;display:inline-block; overflow-wrap:anywhere;word-break:break-word}
@media (max-width:640px){.cmdt,.cfgt{display:block;font-size:13.5px}.cmdt thead,.cfgt thead{display:none}.cmdt tr,.cfgt tr{display:block;border-bottom:1px solid var(--line);padding:8px 0}.cmdt td,.cfgt td{display:block;width:auto;border:0;padding:3px 0}.cmdt td:first-child,.cfgt td:first-child{width:auto}}
/* ═══ Nút về trang chính: viên thuốc có favicon + tên miền + mũi tên ra ngoài ════════════════
   Đổi từ icon ngôi nhà sang kiểu này theo yêu cầu 01/10. Cùng một kiểu với nút đang dùng ở
   servers.9minecraft.net và bedrock-servers.9minecraft.net — ba site cùng một ngôn ngữ hình.
   ⛔ Favicon trỏ thẳng vào theme của site chính: wiki sắp có favicon RIÊNG, dùng `/favicon-32x32.png`
      của wiki là nút "về 9minecraft" lại hiện logo wiki, sai hẳn ý nghĩa.
   ⛔ Mũi tên ↗ là quy ước "mở sang site khác" — giữ, đừng bỏ cho gọn. */
.b9 {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 38px;
  padding: 0 14px;
  border-radius: 999px;
  background: var(--surface2);
  color: var(--text);
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  text-decoration: none;
  transition: background-color .15s ease;
}
.b9:hover { background: var(--chip); color: var(--accent); text-decoration: none; }
.b9 img { width: 18px; height: 18px; border-radius: 4px; display: block; flex: 0 0 auto; }
.b9 svg {
  width: 13px; height: 13px; flex: 0 0 auto;
  fill: none; stroke: currentColor; stroke-width: 2.2;
  stroke-linecap: round; stroke-linejoin: round;
  opacity: .6;
}
@media (max-width: 760px) { .b9 span { display: none; } .b9 { padding: 0 11px; } }




/* ═══ YÊU CẦU 01/10/2026 ═════════════════════════════════════════════════════════════════════
   1. logo nhỏ lại (đang 44px, nhìn mờ) — lấy đúng cỡ lúc cuộn thu nhỏ
   2. "Browse by genre" lên mega-menu, nút hamburger bên TRÁI logo
   3. cột trái chỉ còn mục lục của wiki, neo cố định khi cuộn
   4. trang home + category: full chiều ngang, không cột trái
   ═══════════════════════════════════════════════════════════════════════════════════════════ */

/* ── 1. Logo: 44px → 34px ────────────────────────────────────────────────────────────────────
   Ảnh logo gốc 612×104. Ở 44px cao thì bị thu xuống 42% — chữ "WIKI" nhỏ bên dưới nhoè thành
   một vệt. 34px là đúng cỡ mà luật `is-header-shrunk` vẫn dùng, nhìn sắc hơn hẳn. */
.brand img { height: 34px !important; }
html.is-header-shrunk .brand img { height: 30px !important; }

/* Mega-menu đã tách sang `mega.css` (01/10) — dựng lại theo Google floating UI. */

/* ── 3. Cột trái: mục lục của wiki, neo khi cuộn ───────────────────────────────────────────
   User 01/10: "Sửa lại style mục lục cột trái để phân biệt nhãn và nội dung mục lục. Khi cuộn
   trang thì thiết kế cố định chưa hợp lý dẫn tới 1 phần mục lục bị ẩn bởi Header."

   ⛔ `top: 16px` là SAI: `.topbar` dính ở đỉnh và cao ~76px, nên mục lục trượt chui xuống dưới
      header và mất mấy dòng đầu. Phải trừ đúng chiều cao header (`--mw-top`) rồi mới cộng lề.
   ⛔ Nhãn và nội dung trước đây cùng cỡ 15px, chỉ khác độ đậm — nhìn ra một khối chữ. Theo công
      thức nhà: nhãn 11px IN HOA màu xám, mục 14px thường. Phân cấp bằng cỡ chữ và màu. */
@media (min-width: 992px) {
  #rsidebar {
    position: sticky;
    top: calc(var(--mw-top) + 14px);
    align-self: start;
    max-height: calc(100vh - var(--mw-top) - 28px);
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
  }
}
#rsidebar .widget {
  background: var(--surface);
  border: 0; border-radius: 20px;
  box-shadow: var(--mw-bong, var(--shadow));
  padding: 6px 0 8px; margin: 0 0 14px;
  overflow: hidden;
}
#rsidebar .widgettitle {
  margin: 0; padding: 12px 18px 8px;
  font: 500 11px/1.3 var(--sans);
  text-transform: uppercase; letter-spacing: .9px; color: var(--muted);
}
#rsidebar .net-list { list-style: none; margin: 0; padding: 0 8px; }
#rsidebar .net-list li { list-style: none; }
#rsidebar .net-list a {
  display: block; padding: 9px 14px; margin: 1px 0;
  border: 0; border-radius: 999px;
  color: var(--text); font: 400 14px/1.35 var(--sans); text-decoration: none;
  transition: background .12s ease, color .12s ease;
}
#rsidebar .net-list a:hover {
  background: var(--mw-nhan-nhat, var(--surface2)); color: var(--mw-nhan, var(--accent));
  text-decoration: none;
}
#rsidebar .net-list a b { font-weight: 400; }
#rsidebar .net-list li:first-child a b { font-weight: 500; }

/* ── 4. Trang KHÔNG có mục lục riêng (home, /genre/, /wikis/) → FULL chiều ngang ───────────
   Sau khi sidebar dùng chung để rỗng, `#rsidebar` trên các trang đó không còn widget nào —
   nhưng nó vẫn chiếm 300px cột trái. `:has()` nhận ra ô rỗng và cho bài chiếm cả hai cột.
   ⛔ Dùng `:has()` chứ không JS: JS chạy sau khi vẽ xong, người dùng sẽ thấy bố cục NHẢY một
      nhịp từ hai cột sang một cột. */
@media (min-width: 992px) {
  .b__grid:not(:has(#rsidebar .widget)) { grid-template-columns: minmax(0, 1fr); }
  .b__grid:not(:has(#rsidebar .widget)) > #rsidebar { display: none; }
  .b__grid:not(:has(#rsidebar .widget)) > .b__main { grid-column: 1; }
}

/* ── 4b. KÍNH LÚP trong ô tìm ───────────────────────────────────────────────────────────────
   User 01/10: "Thiết kế cũng thiếu icon kính lúp để có thể click chuột vào search".
   ⛔ Phải là <button> thật chứ không phải ảnh nền: ảnh nền thì bấm vào không có gì xảy ra, mà
      người dùng vẫn cứ bấm — đó chính là lý do ô tìm bị cho là "không hoạt động".
   ⛔ Ô tìm là `input[type=search]`, Chrome tự vẽ nút xoá ✕ bên phải; kính lúp phải nằm bên
      TRÁI, nếu không hai nút chồng lên nhau. */
.search .kinh {
  position: absolute; left: 6px; top: 50%; transform: translateY(-50%);
  width: 32px; height: 32px; padding: 0; z-index: 2;
  display: inline-flex; align-items: center; justify-content: center;
  border: 0; border-radius: 50%; background: transparent;
  color: var(--muted); cursor: pointer;
  transition: background .15s ease, color .15s ease;
}
.search .kinh:hover { background: var(--surface); color: var(--accent); }
.search .kinh svg { width: 17px; height: 17px; display: block; }
.search input { padding-left: 40px !important; padding-right: 38px; }
/* ── Nút ✕ trong ô tìm ──────────────────────────────────────────────────────────────────────
   User 01/10: "Search form ở top >> thiếu dấu X để gõ sai có thể click chuột hay bấm dấu X".

   Một nút làm hai việc, tuỳ ngữ cảnh — thêm nút thứ ba vào ô tìm 38px thì chật:
     · có chữ trong ô  → XOÁ chữ (mọi khổ màn hình)
     · ô rỗng, đang ở mobile → ĐÓNG ô tìm, trả hàng logo về như cũ

   ⛔ Ẩn mặc định và chỉ hiện khi có chữ (JS đặt lớp `mcw-co-chu`). Trước đây nút này chỉ được
      `display:none` BÊN TRONG media query mobile, nên desktop không có luật nào áp vào → nó
      hiện thành vệt trắng 16×21 rơi xuống dưới ô tìm, kéo header từ 80px lên 104px.
   ⛔ KHÔNG dựa vào nút ✕ sẵn có của `input[type=search]`: Chrome vẽ nó, Firefox và Safari thì
      không, và không tạo kiểu được. */
.search .dong-tim {
  display: none;
  position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
  width: 30px; height: 30px; padding: 0; z-index: 2;
  align-items: center; justify-content: center;
  border: 0; border-radius: 50%; background: transparent; color: var(--muted); cursor: pointer;
  transition: background .15s ease, color .15s ease;
}
.search .dong-tim:hover { background: var(--surface2); color: var(--text); }
.search .dong-tim svg { width: 15px; height: 15px; display: block; }
body.mcw-co-chu .search .dong-tim { display: inline-flex; }
.sres .nor { padding: 12px 16px; color: var(--muted); font: 400 14px/1.3 var(--sans); }
body:has(.mw-hero) .search .kinh { color: rgba(255, 255, 255, .72); }
body:has(.mw-hero) .search .kinh:hover { background: rgba(255, 255, 255, .16); color: #fff; }

/* ── 4c. TRANG KẾT QUẢ TÌM KIẾM `/search/` ───────────────────────────────────────────────────
   User 01/10: "nếu user không chọn kết quả có sẵn thì cũng phải có trang result để liệt kê
   những kết quả ra". Mỗi dòng cho ba tầng thông tin: tên bài, bài đó thuộc mod nào, và đường
   dẫn — đường dẫn quan trọng vì nhiều vật phẩm trùng tên ở các mod khác nhau. */
/* Ô tìm trên trang kết quả: viên thuốc, kính lúp trái, nút ✕ phải */
.sr-box { position: relative; margin: 0 0 18px; }
.sr-box .sr-kinh {
  position: absolute; left: 18px; top: 50%; transform: translateY(-50%);
  width: 19px; height: 19px; color: var(--muted); pointer-events: none;
}
.sr-box input {
  width: 100%; height: 50px; padding: 0 50px 0 48px;
  border: 0; border-radius: 999px;
  background: var(--surface); color: var(--text);
  box-shadow: var(--mw-bong, var(--shadow));
  font: inherit; font-size: 16px; outline: none;
}
.sr-box input:focus { box-shadow: var(--mw-bong-sau, var(--shadow-h)); }
.sr-xoa {
  position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  width: 36px; height: 36px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border: 0; border-radius: 50%; background: transparent; color: var(--muted); cursor: pointer;
  transition: background .15s ease, color .15s ease;
}
.sr-xoa:hover { background: var(--surface2); color: var(--text); }
.sr-xoa[hidden] { display: none; }
.sr-xoa svg { width: 17px; height: 17px; display: block; }

/* Thẻ NỔI BẬT — kết quả đầu nếu đó là một mod, giống khung tri thức của Google */
.sr-nb {
  display: flex; gap: 16px; align-items: flex-start;
  padding: 18px; margin: 0 0 18px;
  background: var(--surface); border: 0; border-radius: 20px;
  box-shadow: var(--mw-bong, var(--shadow));
  text-decoration: none; color: inherit;
}
.sr-nb:hover { box-shadow: var(--mw-bong-sau, var(--shadow-h)); text-decoration: none; }
.sr-nb__ic { width: 64px; height: 64px; flex: 0 0 auto; border-radius: 14px; object-fit: contain;
             image-rendering: pixelated; background: var(--surface2); }
.sr-nb__t { min-width: 0; }
.sr-nb__t b { display: block; font: 600 20px/1.25 var(--sans); color: var(--text); }
.sr-nb__t em { display: block; margin: 3px 0 8px; font-style: normal;
               font: 400 12.5px/1.3 var(--sans); color: var(--muted); }
.sr-nb__t > span { display: block; font: 400 14px/1.5 var(--sans); color: var(--text); opacity: .86; }
.sr-nb__go { display: inline-block; margin-top: 10px;
             font: 500 13.5px/1 var(--sans); color: var(--mw-nhan, var(--accent)); }

/* Dòng kết quả: icon + đường dẫn + tên + mô tả — ba tầng như kết quả Google */
.sr-ds { display: flex; flex-direction: column; gap: 4px; margin: 10px 0 0; }
.sr-i {
  display: flex; gap: 14px; align-items: flex-start;
  padding: 12px 14px; border: 0; border-radius: 14px;
  text-decoration: none; color: inherit;
}
.sr-i:hover { background: var(--surface2); text-decoration: none; }
.sr-ic { width: 34px; height: 34px; flex: 0 0 auto; border-radius: 8px;
         object-fit: contain; image-rendering: pixelated; margin-top: 2px; }
.sr-ic--trong { display: inline-block; background: var(--surface2);
                box-shadow: inset 0 0 0 1px var(--line); }
.sr-t { min-width: 0; }
.sr-t em { display: block; font-style: normal; font: 400 12px/1.3 var(--sans);
           color: var(--muted);
           /* ⛔ KHÔNG `text-transform: capitalize` ở đây: dòng này có cả tên miền, và
              "wiki.9minecraft.net" sẽ thành "Wiki.9minecraft.Net". JS viết hoa riêng các
              đoạn đường dẫn, chừa tên miền ra. */
           overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sr-t b { display: block; margin: 1px 0 2px;
          font: 500 16px/1.35 var(--sans); color: var(--mw-nhan, var(--accent)); }
.sr-i:hover .sr-t b { text-decoration: underline; }
.sr-t > span { display: block; font: 400 13.5px/1.5 var(--sans); color: var(--muted); }

/* ⛔ Tay nắm mục lục + nền mờ CHỈ dùng ở mobile. Ẩn mặc định, khối mobile mới bật — nếu không
   chúng hiện thành một nút lạ bám mép phải mọi trang desktop. */
/* ── Ô MOB: ảnh + tên ───────────────────────────────────────────────────────────────────────
   User 02/10 hỏi sao mob của Naturalist không lấy ảnh từ file game. Ảnh ĐÃ có sẵn trong `/i/`
   từ lâu (riêng Naturalist 146 tệp) — chỉ là lưới mob trước giờ là `<span>Tên</span>` chữ trần,
   không hề tham chiếu tới chúng. Nay mỗi ô có ảnh bên trái, tên bên phải.
   ⛔ Giữ thẻ `<span>` ngoài cùng: `.mobgrid span` đã có sẵn viền/đệm/bo góc, đổi thẻ là vỡ lưới. */
.mobgrid span { display: flex; align-items: center; gap: 10px; min-width: 0; }
.mobgrid span img {
  width: 28px; height: 28px; flex: 0 0 auto;
  object-fit: contain; image-rendering: pixelated;
}
.mobgrid span .noimg { width: 28px; height: 28px; flex: 0 0 auto; }
.mobgrid span b { font-weight: 500; min-width: 0; overflow-wrap: anywhere; }

.toc-nut, .toc-nen { display: none; }

/* Nút "Browse all … wikis" ở cuối lưới trang chủ — user 01/10: "cho ra giữa màn hình" */
.mw-browse { margin: 22px 0 6px; text-align: center; }
.mw-browse .allbtn { display: inline-block; }

.sr-them { margin: 18px 0 0; text-align: center; }
.sr-nut {
  padding: 10px 22px; border: 0; border-radius: 999px;
  background: var(--surface); box-shadow: var(--mw-bong, var(--shadow));
  color: var(--mw-nhan, var(--accent)); font: 500 14px/1 var(--sans); cursor: pointer;
}
.sr-nut:hover { box-shadow: var(--mw-bong-sau, var(--shadow-h)); }

/* ── 5. CHÂN TRANG: CẤU TRÚC của 9minecraft, MÀU của wiki ───────────────────────────────────
   User 01/10: "Thiết kế cấu trúc nội dung ở footer giống là được rồi. Còn background phải theo
   giao diện hiện tại."

   Nên giữ nguyên bộ khung `.gf` (logo → câu tag → vạch → hàng liên kết → miễn trừ → bản quyền)
   mà gỡ toàn bộ phần MÀU của site chính: ảnh nền `menu_bg.gif`, hai lớp phủ tối `::before`
   `::after`, và các mã màu cứng vốn chỉ đọc được trên nền tối.

   ⛔ Luật gốc của họ là `[data-theme="dark"] footer.f.gf{...!important}` — hạng 0,3,1 kèm
      `!important`. Viết `footer.f.gf` (0,2,1) dù có `!important` vẫn THUA. Phải đặt selector
      ngang hạng trở lên; `:root footer.f.gf` cho 0,3,1 và tệp này nạp sau nên thắng ở thế hoà.
   ⛔ Mọi màu lấy từ biến chủ đề (`--bg`, `--text`, `--muted`…) nên chân trang tự đổi theo nút
      sáng/tối, không cần viết riêng một khối cho chế độ tối. */
:root footer.f.gf,
:root[data-theme="dark"] footer.f.gf,
[data-theme="dark"] footer.f.gf {
  background-image: none !important;
  background-color: var(--bg) !important;
  color: var(--muted) !important;
  border-top: 1px solid var(--line);
}
footer.f.gf::before, footer.f.gf::after { display: none !important; }
footer.f.gf .gf__tag { color: var(--muted); }
footer.f.gf .gf__logo { image-rendering: auto; }
footer.f.gf .gf__line { background: linear-gradient(90deg, transparent, var(--accent), transparent); }
:root footer.f.gf .gf__legal a, [data-theme="dark"] footer.f.gf .gf__legal a { color: var(--text); }
:root footer.f.gf .gf__legal a:hover, [data-theme="dark"] footer.f.gf .gf__legal a:hover { color: var(--accent); }
footer.f.gf .gf__disc { color: var(--muted); }
footer.f.gf .gf__disc strong { color: var(--text); }
:root footer.f.gf .gf__cpy, [data-theme="dark"] footer.f.gf .gf__cpy { color: var(--muted); }
:root footer.f.gf .gf__cpy a, [data-theme="dark"] footer.f.gf .gf__cpy a { color: var(--accent); }

/* Hàng thể loại — site chính không có hàng này (`.gf__net` của họ đã bị chính họ tắt bằng
   `display:none!important`, nên không mượn được). */
.gf__gen {
  display: flex; justify-content: center; flex-wrap: wrap;
  gap: 8px 10px; max-width: 880px; margin: 0 auto 30px;
}
.gf__gen a {
  padding: 5px 12px;
  background: var(--surface2);
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--muted); font: 500 13px/1.35 var(--sans); text-decoration: none;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.gf__gen a:hover { background: var(--surface); border-color: var(--accent); color: var(--accent); text-decoration: none; }



/* ═══ MEGA-MENU — Google-inspired Minimalist Floating UI ═══════════════════════════════════════
   User 01/10: "Menu chưa thiết kế theo Google-inspired Minimalist Floating UI. Menu ở mobile
   chưa có thu gọn được menu cấp 2, 3 lại, menu cấp 3 xổ ra ngay cùng hàng cấp 2 mới hợp lý vì
   di chuyển chuột ra khoảng không là đóng menu rồi. Nút Browse all cho ra chính giữa."

   Công thức nhà (xem memory `feedback_web_tool_google_floating_ui`):
     · khối là THẺ NỔI trên nền, bóng mềm, KHÔNG viền; bo góc 28px khối chính / 16px khối con
     · nút dạng viên thuốc, không viền, đổi nền khi rê; trạng thái bật = nền nhấn nhạt + chữ nhấn
     · tiêu đề mục 11px IN HOA, giãn chữ 0.9px, màu xám — phân cấp bằng cỡ chữ và màu, không kẻ
     · nhiều khoảng thở: 14px giữa các thẻ, 16px trong thẻ

   ⛔ Tấm cấp 3 neo theo HÀNG đang rê, không neo cứng ở đỉnh. Neo ở đỉnh thì rê từ một mục nằm
      cuối rail lên tấm bung phải cắt chéo qua khoảng không — mà ra khoảng không là menu đóng.
      JS đặt `top` theo đúng hàng; CSS chỉ để sẵn giá trị dự phòng.
   ⛔ KHÔNG đặt `transform` lên `.mw-mega`: phần tử có transform thành khối chứa của con
      `position:fixed`, tấm bung sẽ bị `overflow` của rail cắt cụt. Rail trượt vào bằng `left`. */

:root {
  --mw-top: 76px;
  --mw-left: clamp(48px, 7vw, 220px);
  --mw-rail-w: 300px;
  --mw-gap: 14px;                         /* khoảng thở giữa hai thẻ nổi, đúng công thức nhà */
  --mw-nhan: #1a73e8;
  --mw-nhan-nhat: #e8f0fe;
  --mw-bong: 0 1px 3px rgba(60, 64, 67, .14), 0 4px 16px rgba(60, 64, 67, .12);
  --mw-bong-sau: 0 2px 6px rgba(60, 64, 67, .16), 0 10px 34px rgba(60, 64, 67, .18);
}
:root[data-theme="dark"], html.dark {
  --mw-nhan: #8ab4f8;
  --mw-nhan-nhat: rgba(138, 180, 248, .14);
  --mw-bong: 0 1px 3px rgba(0, 0, 0, .5), 0 4px 16px rgba(0, 0, 0, .45);
  --mw-bong-sau: 0 2px 6px rgba(0, 0, 0, .55), 0 10px 34px rgba(0, 0, 0, .55);
}

/* ── nút hamburger ──────────────────────────────────────────────────────────────────────────── */
.mw-burger {
  flex: 0 0 auto;
  width: 40px; height: 40px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 0; border-radius: 50%;
  background: transparent; color: var(--text);
  cursor: pointer; transition: background .15s ease;
}
.mw-burger:hover { background: rgba(60, 64, 67, .08); }
body.mw-open .mw-burger { background: var(--mw-nhan-nhat); color: var(--mw-nhan); }
.mw-burger svg { width: 22px; height: 22px; display: block; }

.mw-backdrop {
  position: fixed; top: var(--mw-top); left: 0; right: 0; bottom: 0; z-index: 10000;
  background: rgba(32, 33, 36, .32);
  opacity: 0; pointer-events: none;
  transition: opacity .22s ease;
}
body.mw-open .mw-backdrop { opacity: 1; pointer-events: auto; }

/* ── RAIL: thẻ nổi, bo 28px, không viền ─────────────────────────────────────────────────────── */
.mw-mega {
  display: flex; flex-direction: column;
  position: fixed; top: var(--mw-top);
  left: calc(0px - var(--mw-rail-w) - 24px);
  width: var(--mw-rail-w);
  max-height: calc(100vh - var(--mw-top) - 24px);
  background: var(--surface);
  border: 0; border-radius: 28px;
  box-shadow: var(--mw-bong);
  z-index: 10001;
  transition: left .24s cubic-bezier(.4, 0, .2, 1);
  overflow: hidden;
}
body.mw-open .mw-mega { left: var(--mw-left); }

.mw-head {
  display: flex; align-items: center; gap: 10px;
  padding: 16px 10px 10px 22px; flex-shrink: 0;
  font: 500 11px/1.3 var(--sans);
  text-transform: uppercase; letter-spacing: .9px; color: var(--muted);
}
.mw-close {
  margin-left: auto;
  width: 38px; height: 38px; border: 0; border-radius: 50%;
  background: transparent; color: var(--muted); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background .15s ease, color .15s ease;
}
.mw-close:hover { background: rgba(60, 64, 67, .08); color: var(--text); }
.mw-close svg { width: 19px; height: 19px; display: block; }

.mw-list { list-style: none; margin: 0 0 10px; padding: 0 10px; overflow-y: auto; flex: 1 1 auto; }
.mw-list::-webkit-scrollbar { width: 8px; }
.mw-list::-webkit-scrollbar-thumb { background: rgba(128, 128, 128, .26); border-radius: 4px; }
.mw-list > li { list-style: none; position: relative; }

/* hàng = viên thuốc, không viền */
.mw-list > li > a {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 16px; margin: 1px 0;
  color: var(--text); font: 400 14.5px/1.35 var(--sans); text-decoration: none;
  border-radius: 999px;
  transition: background .12s ease, color .12s ease;
}
.mw-list > li > a:hover { background: rgba(60, 64, 67, .07); text-decoration: none; }
.mw-has:hover > a, .mw-has.mw-on > a { background: var(--mw-nhan-nhat); color: var(--mw-nhan); }
.mw-has > a::after {
  content: "\203A";
  margin-left: auto; color: var(--muted);
  font-size: 19px; line-height: 1; font-weight: 400;
  transition: transform .12s ease, color .12s ease;
}
.mw-has:hover > a::after, .mw-has.mw-on > a::after { transform: translateX(2px); color: var(--mw-nhan); }

/* nút gập riêng — chỉ hiện ở màn hẹp (xem khối mobile bên dưới) */
.mw-tog { display: none; }

/* "All mod wikis" + "9Minecraft.net": căn GIỮA, tách khỏi danh sách bằng khoảng thở */
.mw-all, .mw-goc { list-style: none; }
.mw-all { margin-top: 10px; }
.mw-all > a, .mw-goc > a {
  display: flex; align-items: center; justify-content: center;
  padding: 11px 16px; margin: 2px 0;
  border-radius: 999px;
  background: rgba(60, 64, 67, .06);
  color: var(--mw-nhan); font: 500 14px/1.3 var(--sans); text-decoration: none;
  transition: background .12s ease;
}
.mw-all > a:hover, .mw-goc > a:hover { background: var(--mw-nhan-nhat); text-decoration: none; }
.mw-all > a::after, .mw-goc > a::after { content: none; }

/* ── CẤP 3: thẻ nổi bung NGANG, neo theo đúng hàng đang rê ──────────────────────────────────── */
@media (min-width: 992px) {
  .mw-list > li > .mw-sub {
    position: fixed;
    top: var(--mw-top);                   /* JS ghi đè theo hàng đang rê */
    left: calc(var(--mw-left) + var(--mw-rail-w) + var(--mw-gap));
    width: clamp(520px, calc(100vw - var(--mw-left) - var(--mw-rail-w) - var(--mw-gap) - 48px), 1120px);
    max-height: calc(100vh - var(--mw-top) - 24px);
    padding: 22px 24px 24px; margin: 0;
    background: var(--surface);
    border: 0; border-radius: 28px;
    box-shadow: var(--mw-bong-sau);
    list-style: none; overflow-y: auto; display: block;
    opacity: 0; visibility: hidden; transform: translateX(-6px);
    transition: opacity .14s ease, transform .14s ease, visibility .14s;
    z-index: 10002;
  }
  /* ⛔ CHỈ dựa vào lớp `.mw-on` do JS đặt, KHÔNG dùng `:hover` cho tấm bung. User 01/10: "khi di
     chuyển chuột sang Menu cấp 3 rất dễ bị tự đóng menu… chuột chỉ cần lỡ ra ngoài khoảng trống
     là menu đóng lại". Với `:hover` thuần thì chỉ cần con trỏ lướt qua một mục kế bên trong lúc
     đi ngang là tấm bung biến mất TỨC THÌ, không có một nhịp ân hạn nào. JS giữ lớp thêm 320ms
     sau khi chuột rời, và chờ 110ms trước khi đổi sang mục khác — đủ tha thứ cho đường đi chéo. */
  .mw-has.mw-on > .mw-sub {
    opacity: 1; visibility: visible; transform: translateX(0);
  }
  /* ⛔ Tấm bung neo theo KHUNG NHÌN nên khi rail đóng nó không tự biến mất — phải chốt theo
     `body.mw-open`, nếu không nó lơ lửng giữa trang sau khi menu đã đóng. */
  body:not(.mw-open) .mw-list > li > .mw-sub {
    opacity: 0 !important; visibility: hidden !important; pointer-events: none !important;
  }
  /* ⛔ Cầu nối vô hình lấp đúng 14px khoảng thở giữa rail và tấm bung. Không có nó thì rê chuột
     sang ngang bị rơi vào khoảng trống một nhịp và menu đóng ngay trước mặt. */
  .mw-has::after {
    content: ""; position: fixed;
    top: var(--mw-top); bottom: 0;
    left: calc(var(--mw-left) + var(--mw-rail-w));
    width: calc(var(--mw-gap) + 4px);
    z-index: 10001; pointer-events: none;
  }
  /* ⛔ Cầu nối phải sống theo `.mw-on`, không theo `:hover`: ngay khi con trỏ rời mục thì
     `:hover` mất, cầu tắt luôn — đúng vào lúc người dùng đang ở giữa 14px khoảng thở. */
  .mw-has.mw-on::after { pointer-events: auto; }

  .mw-grp { list-style: none; }
  .mw-grp > a {                           /* tiêu đề nhóm: 11px IN HOA, xám — không gạch chân */
    display: block; padding: 0; margin: 0 0 14px;
    color: var(--muted); font: 500 11px/1.3 var(--sans);
    text-transform: uppercase; letter-spacing: .9px; text-decoration: none;
  }
  .mw-grp > a:hover { color: var(--mw-nhan); }
  .mw-grp > ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
  .mw-grp > ul > li { list-style: none; display: inline-block; }
  .mw-grp > ul > li > a {
    display: inline-block; padding: 7px 14px;
    background: rgba(60, 64, 67, .06);
    color: var(--text); font: 400 13.5px/1.35 var(--sans); text-decoration: none;
    border: 0; border-radius: 999px;
    transition: background .12s ease, color .12s ease;
  }
  .mw-grp > ul > li > a:hover {
    background: var(--mw-nhan-nhat); color: var(--mw-nhan); text-decoration: none;
  }
  .mw-xem > a { background: transparent !important; color: var(--mw-nhan) !important; }
}

/* ── Màn hẹp: rail chiếm cả cột, cấp 3 xổ dọc và GẬP LẠI ĐƯỢC ───────────────────────────────── */
@media (max-width: 991.98px) {
  .mw-mega {
    --mw-left: 0px;
    /* ⛔ PHẢI đổi `--mw-rail-w`, KHÔNG được đặt `width` riêng. Vị trí lúc đóng tính bằng
       `calc(0px - var(--mw-rail-w) - 24px)`; đặt `width:330px` mà để biến ở 300px thì rail rộng
       hơn khoảng đẩy ra 30px, mép phải rơi vào +6px — thành một VẠCH TRẮNG 6px cao suốt trang
       bám mép trái MỌI trang, lại nằm trên cùng vì `z-index:10001`. Sửa biến thì `width` và
       khoảng đẩy luôn khớp nhau. */
    --mw-rail-w: min(330px, 88vw);
    border-radius: 0 28px 28px 0;
    bottom: 0; max-height: none;
  }
  .mw-list > li { display: flex; flex-wrap: wrap; align-items: center; }
  .mw-list > li > a { flex: 1 1 auto; min-width: 0; }
  .mw-has > a::after { content: none; }
  /* nút gập riêng, tách khỏi liên kết: chạm chữ thì ĐI, chạm mũi tên thì MỞ/GẬP */
  .mw-tog {
    display: inline-flex; align-items: center; justify-content: center;
    flex: 0 0 auto; width: 40px; height: 40px;
    border: 0; border-radius: 50%; background: transparent; cursor: pointer;
  }
  .mw-tog::before {
    content: ""; 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 ease;
  }
  .mw-tog:hover { background: rgba(60, 64, 67, .08); }
  .mw-has.mw-on > .mw-tog::before { transform: rotate(-135deg) translate(-2px, -2px); }
  .mw-sub {
    flex: 1 1 100%;
    list-style: none; margin: 0; padding: 0;
    max-height: 0; overflow: hidden; transition: max-height .24s ease;
  }
  .mw-has.mw-on > .mw-sub { max-height: 1600px; }
  .mw-grp { list-style: none; }
  .mw-grp > a {
    display: block; padding: 8px 16px 4px;
    color: var(--muted); font: 500 11px/1.3 var(--sans);
    text-transform: uppercase; letter-spacing: .9px; text-decoration: none;
  }
  .mw-grp > ul { list-style: none; margin: 0 0 8px; padding: 0 8px; display: flex; flex-wrap: wrap; gap: 6px; }
  .mw-grp > ul > li { list-style: none; }
  .mw-grp > ul > li > a {
    display: inline-block; padding: 7px 13px;
    background: rgba(60, 64, 67, .06); border-radius: 999px;
    color: var(--text); font: 400 13px/1.3 var(--sans); text-decoration: none;
  }
}


/* ═══ TRANG CHỦ: hero ở giữa kiểu Modrinth + nền Minecraft phủ toàn trang ════════════════════
   ⛔ Nền chỉ gắn vào `body:has(.mw-hero)` — tức CHỈ trang chủ. Gắn cho mọi trang thì 168.495
      trang bài đều tải thêm một ảnh 43 KB và chữ đọc trên ảnh rất mệt.
   ⛔ Ảnh lấy từ KHO ẢNH CỦA CHÍNH SITE (luật của user: không cào Google Images), đã cắt đáy 18%
      bỏ hotbar và làm mờ + tối 42% để chữ trắng đọc được.
   ⛔ `background-attachment: fixed` gây giật khi cuộn trên điện thoại (Safari/Chrome mobile vẽ
      lại cả nền mỗi khung hình) → chỉ bật từ 992px trở lên. */
body:has(.mw-hero) {
  background-image: linear-gradient(rgba(12, 16, 22, .55), rgba(12, 16, 22, .88)),
                    image-set(url("/bg-home.webp") type("image/webp"), url("/bg-home.jpg") type("image/jpeg"));
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
  background-color: #0c1016;
}
@media (min-width: 992px) { body:has(.mw-hero) { background-attachment: fixed; } }

/* Trên trang chủ, thanh header và bài phải trong suốt để thấy nền */
body:has(.mw-hero) .topbar { background: transparent; }
body:has(.mw-hero) article { background: transparent; box-shadow: none; }

/* ── Chân trang TRÊN TRANG CHỦ ───────────────────────────────────────────────────────────────
   Trang chủ phủ ảnh Minecraft tối, nên chân trang lấy `var(--bg)` màu sáng sẽ cắt ngang một
   mảng trắng ngay dưới nền tối. Cho nó trong suốt để ảnh nền chạy liền mạch tới cuối trang,
   và đổi chữ sang tông sáng cho đọc được.
   ⛔ Phải nhắm đúng `footer.f.gf` chứ không phải `footer`: luật ở v3.css là `:root footer.f.gf`
      (hạng 0,3,1); viết `body:has(.mw-hero) footer` chỉ được 0,1,2 nên thua, nền vẫn trắng. */
body:has(.mw-hero) footer.f.gf {
  background-color: transparent !important;
  border-top-color: rgba(255, 255, 255, .12);
}
body:has(.mw-hero) footer.f.gf .gf__tag,
body:has(.mw-hero) footer.f.gf .gf__disc,
body:has(.mw-hero) footer.f.gf .gf__cpy { color: rgba(255, 255, 255, .62); }
body:has(.mw-hero) footer.f.gf .gf__disc strong { color: rgba(255, 255, 255, .86); }
body:has(.mw-hero) footer.f.gf .gf__legal a { color: #fff; }
body:has(.mw-hero) footer.f.gf .gf__legal a:hover { color: #4ade80; }
body:has(.mw-hero) footer.f.gf .gf__cpy a { color: #4ade80; }
body:has(.mw-hero) footer.f.gf .gf__gen a {
  background: rgba(255, 255, 255, .07);
  border-color: rgba(255, 255, 255, .12);
  color: #cdd6df;
}
body:has(.mw-hero) footer.f.gf .gf__gen a:hover {
  background: rgba(255, 255, 255, .14); border-color: #4ade80; color: #4ade80;
}

.mw-hero {
  text-align: center;
  padding: 54px 16px 40px;
  margin: 0 0 8px;
}
.mw-hero__icon {
  width: 112px; height: 112px;
  display: block; margin: 0 auto 26px;
  border-radius: 50%;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .45);
}
.mw-hero h1 {
  margin: 0 0 14px;
  font: 700 clamp(30px, 5.2vw, 56px)/1.1 var(--sans);
  letter-spacing: -.022em;
  color: #fff;
  text-wrap: balance;
}
.mw-hero h1 span { color: #4ade80; }        /* một chữ nhấn, như Modrinth */
.mw-hero p {
  max-width: 660px;
  margin: 0 auto;
  font-size: 16px;
  line-height: 1.6;
  color: rgba(255, 255, 255, .74);
  text-wrap: balance;
}

/* Ô tìm trên trang chủ: nổi trên nền tối */
body:has(.mw-hero) .wsearch { max-width: 620px; margin: 22px auto 10px; }
body:has(.mw-hero) .wsearch input {
  width: 100%; height: 50px; padding: 0 20px;
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 999px;
  background: rgba(255, 255, 255, .1);
  color: #fff; font: inherit; font-size: 15px;
  backdrop-filter: blur(6px);
}
body:has(.mw-hero) .wsearch input::placeholder { color: rgba(255, 255, 255, .6); }
body:has(.mw-hero) .wsearch input:focus { outline: none; border-color: #4ade80; background: rgba(255, 255, 255, .15); }

/* Phần nội dung dưới hero: thẻ sáng trên nền tối, để đọc được */
body:has(.mw-hero) article h2 { color: #fff; border-bottom-color: rgba(255, 255, 255, .14); }
body:has(.mw-hero) .wcard {
  background: rgba(255, 255, 255, .07);
  border-color: rgba(255, 255, 255, .1);
  color: #fff;
}
body:has(.mw-hero) .wcard:hover { background: rgba(255, 255, 255, .13); }
body:has(.mw-hero) .wcard .noimg { border-color: rgba(255, 255, 255, .22); }
body:has(.mw-hero) .chip { background: rgba(255, 255, 255, .1); color: #d7e6ff; }
body:has(.mw-hero) .chip:hover { background: rgba(255, 255, 255, .17); }
body:has(.mw-hero) .crumb { display: none; }   /* breadcrumb một mắt xích trên trang chủ = thừa */

/* Header trên nền tối: chữ và nút phải sáng lên mới đọc được */
body:has(.mw-hero) .twrap { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .12); }
body:has(.mw-hero) .twrap .search input { background: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .16); color: #fff; }
body:has(.mw-hero) .twrap .search input::placeholder { color: rgba(255, 255, 255, .6); }
body:has(.mw-hero) .wikiname a, body:has(.mw-hero) .mw-burger { color: #fff; }
body:has(.mw-hero) .mw-burger:hover { background: rgba(255, 255, 255, .14); }
body:has(.mw-hero) .b9 { background: rgba(255, 255, 255, .12); color: #fff; }
body:has(.mw-hero) .b9:hover { background: rgba(255, 255, 255, .2); color: #fff; }
body:has(.mw-hero) .tbtn { background: rgba(255, 255, 255, .12); border-color: rgba(255, 255, 255, .16); color: #fff; }

/* ── Nền trang chủ trên ĐIỆN THOẠI ───────────────────────────────────────────────────────────
   User 01/10: "Home ở mobile chưa có background đẹp như ở desktop."

   Ảnh nền là 1920×885. Trên desktop `background-attachment: fixed` ghim nó theo khung nhìn nên
   `cover` chỉ phải phủ 1 màn hình — nhìn đúng tỉ lệ. Trên mobile `fixed` gây giật khi cuộn nên
   phải để `scroll`, mà khi đó `cover` phải phủ CẢ THÂN TRANG cao 3.997px: ảnh bị phóng 4,5 lần,
   bề ngang thành 8.680px nên chỉ còn thấy khoảng 4% ảnh — một mảng mờ vô nghĩa.

   Cách chữa: cho ảnh một dải cao 60vh ở đỉnh, giữ đúng tỉ lệ (`auto 60vh`), không lặp; lớp
   chuyển màu phủ hết trang và tan dần vào màu nền đặc trước khi dải ảnh kết thúc, nên không
   thấy đường cắt ngang. */
@media (max-width: 991px) {
  body:has(.mw-hero) {
    background-image:
      linear-gradient(rgba(12, 16, 22, .40) 0, rgba(12, 16, 22, .88) 40vh, #0c1016 60vh),
      image-set(url("/bg-home.webp") type("image/webp"), url("/bg-home.jpg") type("image/jpeg"));
    background-size: cover, auto 62vh;
    background-position: center top, center top;
    background-repeat: no-repeat, no-repeat;
  }
  /* hero gọn lại cho vừa dải ảnh */
  .mw-hero { padding: 30px 14px 24px; }
  .mw-hero__icon { width: 84px; height: 84px; margin-bottom: 18px; }
}


/* ═══ MOBILE ═══════════════════════════════════════════════════════════════════════════════════
   User 01/10 (đợt 2): "Mobile thì cho Logo ra chính giữa, xong các icon phân bổ làm 2 bên giống
   9minecraft. / Mục lục ở trang chi tiết bỏ ghim ở top đi vì chiếm diện tích quá, cho vào 1 khu
   vực đầu bài viết là được. / Mỗi list ở home hay category tách thành 2 cột card đi cho đỡ diện
   tích trống, nhưng vẫn phải ghi đủ tên mỗi bài viết ra chứ không rút gọn."

   Bố cục header lấy đúng của 9minecraft.net (đo ở 390px): nhóm icon bên trái, logo ở giữa,
   nhóm icon bên phải — cân bằng được vì hai nhóm giữ cùng bề ngang.

   ⛔ `overflow-x` phải là `clip`, TUYỆT ĐỐI không `hidden`: `hidden` biến `html`/`body` thành
      khung cuộn và giết `position:sticky` của mọi phần tử con. */

@media (max-width: 860px) {
  /* 7+7 (topbar) + 4+4 (twrap) + 40 (nút) = 62px; khi cuộn: 3+3 + 2+2 + 34 = 44px */
  :root { --mw-top: 62px; }

  /* ── 1. Header: icon hai bên, LOGO Ở GIỮA, THU NHỎ KHI CUỘN ────────────────────────────────
     User 01/10: "Logo ở mobile ban đầu phải to >> khi cuộn trang thì thu nhỏ lại toàn bộ phần
     header cho tăng diện tích xem nội dung."

     Lớp `mcw-shrunk` do chính `wsearch.js` bật/tắt (ngưỡng 40px/12px). KHÔNG dùng lại
     `is-header-shrunk` của khung dùng chung: script site chính cũng gỡ lớp đó theo ngưỡng riêng
     nên hai bên giành nhau, đo 3 lượt ở cùng vị trí cuộn thì chỉ 1 lượt ăn.

     ⛔ Phải viết selector `:root.mcw-shrunk …`, KHÔNG phải `html.is-header-shrunk …`.
        Luật nền có `:root.mcw-shrunk .brand img{height:30px!important}` hạng (0,3,1); viết
        `html.is-header-shrunk .brand img` chỉ được (0,2,2) nên THUA, dù có `!important` và nằm ở
        tệp nạp sau. Hậu quả đo được: cuộn xuống logo TO LÊN 26→30px, header 52→54px — ngược hẳn.
     ⛔ `--mw-top` phải đổi theo, vì rail menu và lớp nền mờ đều neo bằng biến này; để nguyên thì
        cuộn trong lúc menu đang mở sẽ hở một dải giữa header và rail. */
  :root { --mw-canh: 80px; }                 /* 2 nút × 40px — bề ngang nhóm icon trái */
  .topbar { padding: 7px 0; transition: padding .18s ease; }
  .twrap {
    max-width: none; margin: 0 8px; padding: 4px 6px;
    gap: 0; border-radius: 16px;
    display: flex; align-items: center; flex-wrap: wrap; position: relative;
    transition: padding .18s ease, border-radius .18s ease;
  }
  .mw-burger { order: 1; width: 40px; height: 40px; transition: width .18s ease, height .18s ease; }
  .tbtn       { order: 2; width: 40px; height: 40px; padding: 0; flex: 0 0 auto;
                transition: width .18s ease, height .18s ease; }
  .brand      { order: 3; flex: 1 1 auto; display: flex; justify-content: center; min-width: 0; }
  .search     { order: 4; flex: 0 0 var(--mw-canh); display: flex; justify-content: flex-end;
                position: relative; max-width: none; margin: 0; }
  .brand img { height: 34px !important; transition: height .18s ease; }
  .wikiname { display: none; }
  .b9 { display: none; }                     /* lối về trang chính nằm trong mega-menu */
  .mw-burger svg { width: 21px; height: 21px; }

  /* trạng thái ĐÃ CUỘN: cả header co lại, nhường chỗ cho nội dung */
  :root.mcw-shrunk { --mw-top: 44px; --mw-canh: 68px; }
  :root.mcw-shrunk .topbar { padding: 3px 0; }
  :root.mcw-shrunk .twrap { padding: 2px 4px; border-radius: 12px; }
  :root.mcw-shrunk .brand img { height: 22px !important; }
  :root.mcw-shrunk .mw-burger,
  :root.mcw-shrunk .tbtn,
  :root.mcw-shrunk .search .kinh { width: 34px; height: 34px; }

  /* ── 2. Ô tìm: chạm kính lúp thì mở XUỐNG HÀNG DƯỚI ────────────────────────────────────────
     User 01/10: "Phần search ở mobile khi bấm vào icon kính lúp thì mở xuống bên dưới đi cho đỡ
     chèn lên logo."

     `.twrap` đặt `flex-wrap: wrap`, nên khi mở chỉ cần cho `.search` chiếm trọn bề ngang
     (`flex-basis:100%`) là nó tự rơi xuống hàng thứ hai — hàng logo giữ nguyên, không bị che.
     ⛔ Cần `::after` làm vật chèn đúng bằng bề ngang nhóm icon trái: hàng một mất `.search` ở
        bên phải, không chèn thì logo lệch hẳn sang phải đúng lúc người dùng đang nhìn. */
  .search input { display: none; }
  .search .kinh {
    position: static; transform: none;
    width: 40px; height: 40px; color: var(--text);
    transition: width .18s ease, height .18s ease;
  }
  body.mcw-tim .twrap::after {
    content: ""; order: 5; flex: 0 0 var(--mw-canh); height: 1px;
  }
  body.mcw-tim .search {
    order: 9; flex: 1 1 100%; justify-content: stretch; margin-top: 6px;
  }
  body.mcw-tim .search input {
    display: block; width: 100%; height: 40px;
    padding-left: 42px !important; padding-right: 44px;
    font-size: 16px;                         /* ⛔ <16px là iOS tự phóng to trang khi gõ */
  }
  body.mcw-tim .search .kinh {
    position: absolute; left: 4px; top: 50%; transform: translateY(-50%); z-index: 2;
  }
  body.mcw-tim .search .dong-tim { display: inline-flex; }
  .search .dong-tim {
    position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
    width: 34px; height: 34px; z-index: 2;
    align-items: center; justify-content: center;
    border: 0; border-radius: 50%; background: transparent; color: var(--muted); cursor: pointer;
  }
  .search .dong-tim svg { width: 17px; height: 17px; display: block; }
  #mcw-res { position: absolute; left: 0; right: 0; top: calc(100% + 6px);
             max-height: 70vh; overflow-y: auto; }

  /* ── 3. MỤC LỤC: NGĂN KÉO bám lề phải ──────────────────────────────────────────────────────
     User 01/10: "Mục lục trên mobile nhìn xấu, không khoa học. Hoặc đổi cách gắn vào lề phải ai
     dùng thì xổ ra."

     Hai lượt trước sai theo hai hướng ngược nhau: ghim ở đỉnh thì chiếm mất diện tích đọc, còn
     đặt vào đầu bài thì thành mấy cái hộp rỗng xếp chồng chắn ngang trước khi vào nội dung. Cả
     hai đều lấy chỗ của bài viết cho một thứ người ta chỉ dùng thỉnh thoảng.

     Nay nó nằm NGOÀI màn hình, chỉ chừa một tay nắm nhỏ ở mép phải; chạm vào thì trượt ra —
     không chiếm một pixel nào của nội dung khi không dùng.

     ⛔ `position: fixed` chứ không `sticky`: ngăn kéo phải phủ hết chiều cao màn hình và thoát
        khỏi dòng chảy của lưới, nếu không nó lại chiếm chỗ như cũ.
     ⛔ Tay nắm đặt ở 38% chiều cao, KHÔNG phải chính giữa: giữa mép phải là vùng ngón cái hay
        vuốt để cuộn, để nút ở đó là bấm nhầm liên tục. */
  #rsidebar {
    position: fixed; top: 0; right: 0; bottom: 0; z-index: 10005;
    width: min(320px, 84vw);
    margin: 0; padding: calc(var(--mw-top) + 10px) 12px 24px;
    background: var(--surface);
    box-shadow: -2px 0 24px rgba(15, 23, 42, .18);
    overflow-y: auto; overscroll-behavior: contain;
    transform: translateX(100%);
    transition: transform .24s cubic-bezier(.4, 0, .2, 1);
    max-height: none;
  }
  body.mcw-toc #rsidebar { transform: none; }
  #rsidebar .widget {
    border-radius: 16px; margin: 0 0 10px; box-shadow: none; background: var(--surface2);
  }
  #rsidebar .widgettitle { padding: 12px 16px 6px; cursor: default; }
  #rsidebar .widgettitle::after { content: none; }
  #rsidebar .widget .net-list { max-height: none; overflow: visible; padding: 0 8px 8px; }

  /* tay nắm bám mép phải */
  .toc-nut {
    display: inline-flex; position: fixed; right: 0; top: 38%; z-index: 10004;
    display: inline-flex; align-items: center; justify-content: center;
    width: 38px; height: 46px; padding: 0;
    border: 0; border-radius: 14px 0 0 14px;
    background: var(--surface); color: var(--mw-nhan, var(--accent));
    box-shadow: -2px 2px 14px rgba(15, 23, 42, .18);
    cursor: pointer;
    transition: transform .24s cubic-bezier(.4, 0, .2, 1);
  }
  .toc-nut svg { width: 19px; height: 19px; display: block; }
  body.mcw-toc .toc-nut { transform: translateX(120%); }
  .toc-nen {
    display: block; position: fixed; inset: 0; z-index: 10003;
    background: rgba(32, 33, 36, .32);
    opacity: 0; pointer-events: none; transition: opacity .22s ease;
  }
  body.mcw-toc .toc-nen { opacity: 1; pointer-events: auto; }

  /* ── 4. Danh sách thẻ: HAI CỘT, tên hiện đủ không cắt ─────────────────────────────────────
     `.wgrid` để `auto-fill minmax(210px,1fr)` nên ở 366px lọt vừa đúng MỘT cột, bỏ trống hơn
     nửa màn hình. Ép hai cột và cho tên xuống dòng thoải mái — user yêu cầu giữ đủ tên bài,
     không rút gọn, nên KHÔNG dùng `text-overflow: ellipsis` hay giới hạn số dòng. */
  .wgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .wcard {
    gap: 8px; padding: 9px 10px; font-size: 12.5px; line-height: 1.3;
    align-items: center; min-width: 0;
    border-radius: 14px;
  }
  .wcard img, .wcard .noimg { width: 28px; height: 28px; }
  .wcard span { min-width: 0; overflow-wrap: anywhere; }
  .igrid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 8px; }
  .icell { gap: 8px; padding: 9px 10px; font-size: 12.5px; min-width: 0; }
  .icell img, .icell .noimg { width: 28px; height: 28px; }

  /* ── 5. Chặn tràn ngang ở gốc ────────────────────────────────────────────────────────────── */
  html, body { overflow-x: clip; max-width: 100%; }
  .b__inner { padding-left: 12px; padding-right: 12px; }
  article table, article pre { display: block; max-width: 100%; overflow-x: auto; }
  article img, .wcard img { max-width: 100%; height: auto; }
}

/* Khổ rất hẹp (≤ 380px): logo nhỏ thêm một nấc cho đủ chỗ */
@media (max-width: 380px) {
  :root { --mw-canh: 68px; }
  .mw-burger, .tbtn, .search .kinh { width: 34px; height: 34px; }
  .brand img, html.is-header-shrunk .brand img { height: 23px !important; }
  .twrap { margin: 0 6px; }
}

.gguide, .gcards {display: grid; grid-template-columns: repeat(auto-fill, minmax(258px, 1fr));gap: 12px; margin: 12px 0 20px}.gguide > a, .gcards > a {display: flex; flex-direction: column; gap: 5px;padding: 14px 16px; border: 1px solid var(--line); border-radius: 16px;background: var(--surface); text-decoration: none;font: 600 14.5px/1.4 var(--sans); color: var(--accent);transition: box-shadow .16s ease, border-color .16s ease, background .16s ease}.gguide > a:hover, .gcards > a:hover {border-color: transparent; background: var(--surface);box-shadow: 0 1px 2px rgba(60,64,67,.3), 0 2px 6px 2px rgba(60,64,67,.15);text-decoration: none}.gguide > a > b, .gcards > a > b { font: 600 14.5px/1.4 var(--sans); color: var(--accent)}.gguide > a > span, .gcards > a > span {font: 400 12.5px/1.5 var(--sans); color: var(--muted);display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden}.gnext { margin: 28px 0 0; padding-top: 18px; border-top: 1px solid var(--line)}.gnext h2 { font: 600 15px/1.3 var(--sans); margin: 0 0 2px; letter-spacing: .1px}.gnext h2 + .gcards { margin-top: 10px}.gnext .gcards + h2 { margin-top: 18px}.gchips { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 2px}@media (max-width: 760px) {.gguide, .gcards { grid-template-columns: 1fr; gap: 10px}.gguide > a, .gcards > a { padding: 12px 14px; border-radius: 14px}}.iico {display: inline-block; width: 18px; height: 18px; margin: 0 4px -4px 0;image-rendering: pixelated; vertical-align: baseline}details.faq summary .iico { margin-bottom: -3px}.gmore { margin: 14px 0 22px}.gmore a {display: inline-block; padding: 8px 18px; border-radius: 999px;background: var(--chip); color: var(--accent);font: 500 13.5px/1.35 var(--sans); text-decoration: none;transition: box-shadow .16s ease, filter .16s ease}.gmore a:hover { text-decoration: none; filter: brightness(.96);box-shadow: 0 1px 2px rgba(60,64,67,.3), 0 1px 3px 1px rgba(60,64,67,.15)}.gbody:has(> details.faq) { max-width: none}details.faq { margin: 10px 0}.gmore a {padding: 10px 24px; background: var(--accent); color: var(--on-accent);font: 500 14px/1.35 var(--sans);box-shadow: 0 1px 2px rgba(60,64,67,.3), 0 1px 3px 1px rgba(60,64,67,.15)}.gmore a:hover {filter: none; background: var(--accent); color: var(--on-accent);box-shadow: 0 1px 3px rgba(60,64,67,.3), 0 4px 8px 3px rgba(60,64,67,.15)}.chip .src { display: inline; margin: 0 0 0 5px; font-size: .86em; opacity: .72;vertical-align: baseline}p:has(> .allbtn), .gmore, .mw-browse { text-align: center}p:has(> .allbtn) { margin: 20px 0 8px}.net-list li.wgroup {font: 600 10.5px/1 var(--sans); letter-spacing: .09em; text-transform: uppercase;color: var(--muted); padding: 16px 8px 6px; border: 0; cursor: default}.net-list li.wgroup:first-child { padding-top: 6px}.net-list a { display: flex; align-items: baseline; gap: 10px}.net-list a em {margin-left: auto; font: 400 12px/1 var(--sans); font-style: normal;font-variant-numeric: tabular-nums; color: var(--muted)}.mmeta { display: flex; flex-wrap: wrap; gap: 7px; margin: 10px 0 2px}.mmeta span {padding: 4px 11px; border-radius: 999px; background: var(--chip); color: var(--accent);font: 500 12.5px/1.4 var(--sans)}@media (min-width: 761px) {:root.mcw-shrunk { --mw-top: 58px}:root.mcw-shrunk body .topbar { padding: 4px 0}:root.mcw-shrunk body .twrap,:root.mcw-shrunk body:has(.mw-hero) .twrap {padding: 3px 12px; border-radius: 999px;background: var(--surface); border-color: var(--line);box-shadow: 0 1px 2px rgba(60,64,67,.3), 0 2px 6px 2px rgba(60,64,67,.15)}:root.mcw-shrunk body:has(.mw-hero) .twrap .search input {background: var(--surface2); border-color: var(--line); color: var(--text)}:root.mcw-shrunk body:has(.mw-hero) .twrap .search input::placeholder { color: var(--muted)}:root.mcw-shrunk body:has(.mw-hero) .wikiname a,:root.mcw-shrunk body:has(.mw-hero) .mw-burger { color: var(--text)}:root.mcw-shrunk body:has(.mw-hero) .mw-burger:hover { background: var(--surface2)}:root.mcw-shrunk body:has(.mw-hero) .b9 { background: var(--surface2); color: var(--text)}:root.mcw-shrunk body:has(.mw-hero) .b9:hover { background: var(--chip); color: var(--accent)}:root.mcw-shrunk body:has(.mw-hero) .tbtn {background: var(--surface2); border-color: var(--line); color: var(--muted)}:root.mcw-shrunk .brand img { height: 26px !important}:root.mcw-shrunk .search input { padding-top: 6px; padding-bottom: 6px}.topbar, .twrap, .brand img { transition: padding .16s ease, height .16s ease,background .16s ease, box-shadow .16s ease}}@media (max-width: 760px) {:root.mcw-shrunk { --mw-top: 40px; --mw-canh: 62px}:root.mcw-shrunk body .topbar { padding: 2px 0}:root.mcw-shrunk body .twrap,:root.mcw-shrunk body:has(.mw-hero) .twrap {background: var(--surface); border-color: var(--line);box-shadow: 0 1px 2px rgba(60,64,67,.3), 0 2px 6px 2px rgba(60,64,67,.15)}:root.mcw-shrunk body:has(.mw-hero) .mw-burger,:root.mcw-shrunk body:has(.mw-hero) .tbtn { color: var(--text); background: transparent}:root.mcw-shrunk body:has(.mw-hero) .twrap .search input {background: var(--surface2); border-color: var(--line); color: var(--text)}:root.mcw-shrunk body:has(.mw-hero) .twrap .search input::placeholder { color: var(--muted)}:root.mcw-shrunk .brand img { height: 20px !important}:root.mcw-shrunk .mw-burger,:root.mcw-shrunk .tbtn,:root.mcw-shrunk .search .kinh { width: 31px; height: 31px}}.gbody { max-width: none}#rsidebar .widget .net-list a {display: flex; align-items: center; gap: 12px;padding: 9px 8px; border-radius: 8px}#rsidebar .widget .net-list a > b {flex: 1 1 auto; min-width: 0;font: 400 14px/1.35 var(--sans);overflow: hidden; text-overflow: ellipsis; white-space: nowrap}#rsidebar .widget .net-list li:first-child a > b { font-weight: 600}#rsidebar .widget .net-list a > em {flex: 0 0 auto; margin-left: auto; min-width: 2.4em; text-align: right;font: 400 12px/1 var(--sans); font-style: normal;font-variant-numeric: tabular-nums; color: var(--muted)}#rsidebar .widget .net-list a:hover { background: var(--surface2)}#rsidebar .widget .net-list a:hover > em { color: var(--accent)}#rsidebar .widget .net-list li.wgroup,#rsidebar .widget .net-list li.wgroup + li { border-top: 0}.mdlist { margin: 10px 0 16px; padding-left: 22px}.mdlist li { margin: 5px 0; line-height: 1.65}.mdlist li > strong:first-child, .mdlist li > em:first-child { color: var(--text)}.cfgt{width:100%;table-layout:fixed}.cfgt th:first-child,.cfgt td:first-child{width:38%}.cfgt td:first-child>code{display:block;word-break:break-word;font:600 12.5px/1.5 var(--mono,ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace);color:var(--text)}.cfgt .cfgn{display:block;margin-top:3px;font-size:12px;line-height:1.45;color:var(--muted)}.cfgt tbody tr:nth-child(even) td{background:var(--surface2)}.cfgt tbody tr:nth-child(even):hover td,.cfgt tbody tr:hover td{background:var(--hover,rgba(26,115,232,.07))}.cfgt td{vertical-align:top}.cfgt tr.cfgsec td{background:var(--surface2);border-bottom:1px solid var(--line);padding:14px 12px 8px;font:600 11px/1.4 var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--accent)}.cfgt tr.cfgsec:hover td{background:var(--surface2)}.cfgt tr.cfgsec + tr td{border-top:0}.cfgrest{margin:18px 0 6px}.cfgrest>h3{margin:0 0 4px;font-size:14px}.cfgrest>p.src{margin:0 0 10px}.cfgrest ul{list-style:none;margin:0;padding:0;display:grid;gap:6px 18px;grid-template-columns:repeat(auto-fill,minmax(230px,1fr))}.cfgrest li{margin:0;padding:6px 0;border-bottom:1px solid var(--line);font:500 12.5px/1.5 var(--mono,ui-monospace,Menlo,Consolas,monospace);color:var(--text);word-break:break-word}.cfgrest li em{display:block;font:400 12px/1.4 var(--sans);color:var(--muted);font-style:normal}.infobox table{table-layout:fixed}.infobox td:first-child{width:38%;word-break:normal;overflow-wrap:break-word}.infobox td + td{word-break:break-word;overflow-wrap:anywhere}.infobox td>code{display:inline-block;max-width:100%;white-space:normal;word-break:break-all}.modbody table,.gbody table,article>table,.modbody .wrapt table{width:100%;border-collapse:collapse;margin:12px 0 20px;font-size:14px}.modbody table th,.gbody table th,article>table th{text-align:left;font:600 11.5px/1.4 var(--sans);letter-spacing:.06em;text-transform:uppercase;color:var(--muted);padding:9px 12px;border-bottom:1px solid var(--line);background:none}.modbody table td,.gbody table td,article>table td{padding:9px 12px;border-top:1px solid var(--line);vertical-align:top}.modbody table th + th,.modbody table td + td,.gbody table th + th,.gbody table td + td,article>table th + th,article>table td + td{border-left:1px solid color-mix(in srgb,var(--line) 55%,transparent)}.modbody table tbody tr:nth-child(even) td,.gbody table tbody tr:nth-child(even) td,article>table tbody tr:nth-child(even) td{background:var(--surface2)}.cfgt td + td,.cfgt th + th,.cmdt td + td,.cmdt th + th{border-left:1px solid color-mix(in srgb,var(--line) 55%,transparent)}@media (max-width:760px){.modbody table,.gbody table,article>table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch;white-space:nowrap;font-size:13px}.modbody table td,.gbody table td,article>table td,.modbody table th,.gbody table th,article>table th{padding:8px 10px}.cfgt{font-size:13px}.cfgt th:first-child,.cfgt td:first-child{width:44%}}.icell.nolink{color:var(--text);cursor:default}.icell.nolink:hover{box-shadow:none;transform:none;border-color:var(--line)}