/* 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{ --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{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:26px!important;width:auto} /* 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 */ :root.dark .brand img{filter:brightness(0) invert(1);opacity:.92} .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} .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;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}