/* 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; } /* ⛔ DARK MODE = class `.dark` trên , do site.js đặt. site.js ĐÃ tự xử lý cả prefers-color-scheme lẫn lựa chọn đã lưu (localStorage 'mcw-theme'), nên ở ĐÂY: - KHÔNG dùng @media (prefers-color-scheme) — sẽ đè lựa chọn "Sáng" của user trên máy hệ tối. - KHÔNG dùng [data-theme] — site.js không hề đặt thuộc tính đó (nút toggle sẽ vô tác dụng). */ :root.dark,:root[data-theme="dark"]{ --bg:#17181a; --surface:#222427; --surface2:#2b2e31; --chip:#1e2c42; --text:#e8eaed; --muted:#9aa0a6; --line:#393c40; --accent:#8ab4f8; --accent-2:#aecbfa; --on-accent:#0b213f; --shadow:0 1px 2px rgba(0,0,0,.40),0 1px 3px 1px rgba(0,0,0,.24); --shadow-h:0 1px 3px rgba(0,0,0,.50),0 6px 16px 2px rgba(0,0,0,.34); } :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} ::selection{background:var(--chip);color:var(--text)} *{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; overflow-wrap:break-word} /* ⛔ KHÔNG BAO GIỜ cắt/ẩn chữ: thiếu chỗ thì XUỐNG DÒNG (id mod dài, tên item dài…) */ h1,h2,h3,p,td,th,li,span,a,code,summary,div{overflow-wrap:anywhere;word-break:break-word} 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); overflow-wrap:anywhere;word-break:break-word;white-space:normal} 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: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)} .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} 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;display:flex;align-items:flex-start;gap:18px} .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}} .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} /* ---- enchantments + tag chips ---- */ .egrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:10px;margin:8px 0} .ecard{padding:12px 16px;border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--surface)} .ecard b{display:block;font-size:14.5px;margin-bottom:3px} .ecard span{font-size:13px;color:var(--muted);line-height:1.5} /* ---- 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} /* icon minh hoạ inline trong bài guide */ .iref{display:inline-flex;align-items:center;gap:5px;padding:1px 7px 1px 4px;margin:0 1px; background:var(--chip);border-radius:999px;font-weight:600;white-space:normal} .iref:hover{text-decoration:none;box-shadow:var(--shadow)} .iref img{width:20px;height:20px;object-fit:contain;image-rendering:pixelated;flex:0 0 auto} .gbody{font-size:15.5px} .tagline{margin:6px 0 14px;font-size:13px;color:var(--muted)} .tagline .chip{margin:3px 6px 3px 0;padding:5px 12px;font-size:12.5px} /* ---- 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:none;line-height:1.7} .gbody h3{margin:20px 0 6px} .gbody p{max-width:none} /* ---- 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} .homelink span{display:none} .homelink{padding:0;width:38px;justify-content:center} article{padding:20px 16px} .azjump{top:66px} } /* ---- o quang cao (1 o/trang, chep inpost-ads.php cua 9minecraft) ---- KHONG display:flex: hai div rong thanh flex-item rong 0 -> AdSense tu choi "No slot size for availableWidth=0" ma trang van binh thuong nen khong ai biet. */ .adbox{margin:20px 0;width:100%;max-width:100%;text-align:center;overflow:hidden;min-height:90px} .adbox>div{max-width:100%} .adbox ins{display:block;width:100%;max-width:100%} .mine-banner:empty{display:none} /* ---- 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} /* ---- 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} .cfgn{display:block;margin-top:3px;color:var(--muted);font-size:12.5px;overflow-wrap:anywhere} @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} } /* ---- 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} /* ---- breadcrumb: giong #breadcrumbs cua site goc, nam TRONG bai, khong ap sat logo ---- */ .crumb{display:flex;flex-wrap:wrap;align-items:center;gap:6px;font-size:14px;line-height:1.5; color:var(--muted);margin:0 0 18px;padding:10px 14px;background:var(--surface2); border:1px solid var(--line);border-radius:8px} .crumb a{color:var(--accent);font-weight:500;text-decoration:none} .crumb a:hover{text-decoration:underline} /* ---- con sot tu doi cu: .tabs (tab phien ban) — giu kieu de trang khong vo trong khi cho dung lai. Cac class khac cua doi cu (rwrap, lsearch, vpanel, markdown-body) CHUA TUNG co CSS o bat ky ban nao, nen khong phai lo. ---- */ .tabs{display:flex;gap:6px;margin-bottom:12px;flex-wrap:wrap} /* ---- CSS bi NOI NHAM vao site.js tu 07/09 nen chua bao gio ap dung. Do la ly do cac lop doi cu (.modbody, .metastrip, .verrow, .gcell) trong nhu khong co kieu. Dua ve dung cho: tep CSS. ---- */ .metastrip{display:flex;flex-wrap:wrap;gap:.3em;align-items:center} .modbody{background:var(--panel,var(--chipbg));border:1px solid var(--line);border-radius:6px;padding:14px 18px;line-height:1.55;font-size:14.5px;margin:.5em 0} .modbody h3{margin-top:1em;font-size:15.5px} .modbody h4{margin-top:.8em;font-size:14.5px;font-weight:600} .modbody img{max-width:100%;height:auto;margin:.4em 0;border-radius:4px} .modbody ul,.modbody ol{padding-left:1.5em} .modbody a{color:var(--link,#2b7cd8);text-decoration:underline} .modbody blockquote{border-left:3px solid var(--line);padding:.1em .8em;color:var(--muted,#666);margin:.4em 0} .modbody pre.mdcode{background:#0a0a0a;color:#e6e6e6;padding:.6em .8em;border-radius:4px;overflow-x:auto;font-family:'IBM Plex Mono',monospace;font-size:12.5px} .modbody code{background:var(--chipbg);border:1px solid var(--line);border-radius:3px;padding:0 4px;font-family:'IBM Plex Mono',monospace;font-size:12.5px} .mtable{border-collapse:collapse;width:100%;font-size:13px;margin:.4em 0} .mtable th,.mtable td{border:1px solid var(--line);padding:5px 10px;text-align:center} .mtable th{background:var(--chipbg);font-weight:600} .mtable td:first-child{text-align:left} .verlist{display:flex;flex-direction:column;gap:.6em;margin:.4em 0} .verrow{border:1px solid var(--line);border-radius:6px;padding:8px 12px;background:var(--chipbg)} .verrow p{margin:.3em 0;font-size:13.5px} .gcell{margin:0;padding:0} .gcell figcaption{margin-top:4px;font-size:12px} /* ═══ 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}