/* tools.9minecraft.net — Google-inspired minimalist floating UI (2026-09-27).
   Nap boi nginx (sub_filter chen <link> truoc </head>) tu /var/www/tools9mc-theme/ — NAM NGOAI thu muc
   deploy /var/www/tools9mc, nen deploy lai site khong xoa file nay va file nay khong sua ma cua site.
   Pham vi: khung chung (trang chu + dau trang cong cu + the lien quan) + 2 bien bo goc dung chung.
   KHONG chinh sau vao ben trong tung cong cu. Menu/header dung chung CSS mc9-mnav cua site chinh. */

/* Bo goc dung chung cho moi cong cu (goc: 3px / 4px) */
html:root:not([data-g-off]) { --radius: 10px; --radius-lg: 16px; }

html .tools-page {
    --g-line: #e8eaed;
    --g-soft: #f1f3f4;
    --g-hover: rgba(60,64,67,.08);
    --g-sh1: 0 1px 2px rgba(60,64,67,.12), 0 1px 3px rgba(60,64,67,.08);
    --g-sh2: 0 1px 3px rgba(60,64,67,.15), 0 6px 16px rgba(60,64,67,.12);
    --g-sh3: 0 2px 6px rgba(60,64,67,.15), 0 12px 32px rgba(60,64,67,.20);
}
:root[data-theme="dark"] .tools-page {
    --g-line: rgba(255,255,255,.09);
    --g-soft: rgba(255,255,255,.06);
    --g-hover: rgba(255,255,255,.06);
    --g-sh1: 0 1px 2px rgba(0,0,0,.45);
    --g-sh2: 0 1px 3px rgba(0,0,0,.5), 0 6px 16px rgba(0,0,0,.4);
    --g-sh3: 0 2px 6px rgba(0,0,0,.5), 0 12px 32px rgba(0,0,0,.55);
}

/* ── Trang chu: hero ── */
html .tools-page .hero { border-bottom: 0; }
html .tools-page .hero h1 { letter-spacing: -.02em; }
html .tools-page .facts > * { border-radius: 999px; }

/* Thanh loc dinh: the noi mo kinh thay cho dai ngang co gach duoi */
html .tools-page .bar {
    border-bottom: 0;
    background: transparent;
    padding: 10px 0;
}
html .tools-page .bar > * {
    background: color-mix(in srgb, var(--paper, #fff) 88%, transparent);
    -webkit-backdrop-filter: saturate(1.4) blur(12px);
            backdrop-filter: saturate(1.4) blur(12px);
    border: 1px solid var(--g-line);
    border-radius: 999px;
    box-shadow: var(--g-sh2);
    padding: 8px 10px;
}
html .tools-page .sbox input,
html .tools-page .sbox input[type="search"] {
    border-radius: 999px;
    height: 44px;
    background: var(--g-soft);
    border-color: transparent;
}
html .tools-page .sbox input:focus { background: var(--paper, #fff); border-color: var(--brand, #1a73e8); }
html .tools-page .chip {
    border-radius: 999px;
    font-weight: 500;
}
html .tools-page .chip-nav { border-radius: 50%; box-shadow: var(--g-sh1); }

/* Tieu de khoi */
html .tools-page .sechead .n { border-radius: 999px; }

/* The cong cu: bo 20px, noi bang bong, nhac len khi re chuot */
html .tools-page .grid .card {
    border-radius: 20px;
    border: 1px solid var(--g-line);
    box-shadow: var(--g-sh1);
    overflow: hidden;
    transition: box-shadow .18s ease, transform .18s ease;
}
html .tools-page .grid .card:hover {
    transform: translateY(-3px);
    box-shadow: var(--g-sh3);
    border-color: var(--g-line);
}
html .tools-page .grid .card .shot { border-radius: 0; }

/* ── Trang cong cu: nut quay lai + vung cong cu + the lien quan ── */
html .tools-page .back { border-radius: 999px; }
html .tools-page .thead h1 { letter-spacing: -.02em; }
html .tools-page main.main:not(:fullscreen) {
    border-radius: 24px;
}
html .tools-page .rel { border-top: 0; }
html .tools-page .rel .g a,
html .tools-page .relcard,
html .tools-page .hlcard {
    border-radius: 18px;
    border-color: var(--g-line);
    box-shadow: var(--g-sh1);
    transition: box-shadow .18s ease, transform .18s ease;
}
html .tools-page .rel .g a:hover,
html .tools-page .relcard:hover,
html .tools-page .hlcard:hover { transform: translateY(-2px); box-shadow: var(--g-sh2); }
html .tools-page .relcard { overflow: hidden; }

/* Nut dung chung cua cac cong cu (.btn / .btn-primary trong tokens.css): vien thuoc */
html .tools-page .btn,
html .tools-page .btn-primary { border-radius: 999px; }
html .tools-page .tag { border-radius: 999px; }
html .tools-page .panel { border-radius: var(--radius-lg); }

/* ── MOBILE: khong tran mep, KHONG AN CHU ── */
@media (max-width: 760px) {
    /* Thanh loc: o tim + chip xuong 2 dong -> the bo 22px nam trong le, khong phinh ra 2 mep */
    html .tools-page .bar { padding: 8px 12px; }
    html .tools-page .bar > * { border-radius: 22px; padding: 8px; margin: 0; max-width: 100%; box-sizing: border-box; }
    /* Chu bi cat "..." tren mobile -> hien du */
    html .tools-page .hero p,
    html .tools-page .grid .card .cd,
    html .tools-page .rel .gdcard > span,
    html .tools-page .relcard .rct > span {
        white-space: normal;
        overflow: visible;
        text-overflow: clip;
        -webkit-line-clamp: unset;
        line-clamp: unset;
        display: block;
        max-height: none;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════════════
   28/09/2026 — bo sung (user: "cac button thiet ke lai theo Google-inspired Minimalist
   Floating UI"; "phan Guide thiet ke lai cho do chiem dien tich"; "category show het ra").

   Vi sao viet o DAY chu khong o /_ui/ui.css: moi luat trong tep nay deu neo `html` nen
   manh hon (0,2,0+1) cac luat `.tools-page ...` cua trang (0,1,0). Viet cung mot thu o
   ben kia thi THUA ma khong bao loi — dung kieu hong im lang de nhat.
   ═══════════════════════════════════════════════════════════════════════════════════ */

/* ── 1. NUT CTA trong bai huong dan ────────────────────────────────────────────────
   ⛔ LOI THAT, khong phai chuyen tham my: `.tools-page .prose a` (0,2,1) manh hon
      `.tools-page .gcta` (0,2,0), nen chu cua nut an mau `--brand-ink` (xanh DAM) va
      an ca `text-decoration:underline`. Ket qua tren nen xanh la chu xanh dam gach chan
      — do tuong phan ~1.9:1, gan nhu khong doc duoc. Phai neo vao `.prose a.gcta`. */
/* ⛔ Mau nen cua nut: do that bang `soi_giao_dien.py`
      - che do SANG: chu trang tren `--brand` #0f9d3a = **3,5:1**, duoi nguong AA 4,5:1.
        Dung `--brand-ink` (#0a7a2c) thi len ~5,2:1 ma van dung dung mau thuong hieu.
      - che do TOI: `--brand` doi thanh #3fd873 (xanh sang), chu trang tren do chi con
        **1,86:1** — gan nhu doc khong ra. O nen sang thi chu phai TOI, khong phai trang.
        Day la cho ai cung quen tay de `color:#fff` roi khong do lai. */
html .tools-page .prose a.gcta,
html .tools-page a.gcta {
    color: #fff;
    text-decoration: none;
    background: var(--brand-ink, #0a7a2c);
    background-image: none;
    border: 0;
    border-radius: 999px;
    font-weight: 500;
    font-size: 15px;
    letter-spacing: .01em;
    padding: 12px 26px;
    box-shadow: var(--g-sh1);
    transition: box-shadow .18s ease, transform .18s ease, background .18s ease;
}
html .tools-page .prose a.gcta:hover,
html .tools-page a.gcta:hover {
    color: #fff;
    text-decoration: none;
    filter: none;
    transform: translateY(-1px);
    background: var(--brand-ink, #0a7a2c);
    box-shadow: var(--g-sh2);
}
html .tools-page a.gcta:active { transform: translateY(0); box-shadow: var(--g-sh1); }
:root[data-theme="dark"] .tools-page .prose a.gcta,
:root[data-theme="dark"] .tools-page a.gcta {
    background: var(--brand, #3fd873);
    color: #062b14;
    font-weight: 600;
}
:root[data-theme="dark"] .tools-page .prose a.gcta:hover,
:root[data-theme="dark"] .tools-page a.gcta:hover {
    background: #5ee78c;
    color: #062b14;
}
html .tools-page a.gcta:focus-visible {
    outline: 3px solid color-mix(in srgb, var(--brand, #0f9d3a) 40%, transparent);
    outline-offset: 2px;
}

/* ── 2. Nut/chip khac: nen phang + bong thap, nhac len khi re chuot ───────────────
   Nguyen tac Google: KHONG chuyen sac, KHONG vien nang, KHONG bong an mau thuong hieu.
   Trang thai duoc doc qua do cao (bong) chu khong qua do dam cua vien. */
html .tools-page .chip {
    background: var(--paper, #fff);
    border-color: var(--g-line);
    box-shadow: none;
    padding: 8px 15px;
    transition: background .15s ease, box-shadow .15s ease, color .15s ease;
}
html .tools-page .chip:hover { background: var(--g-soft); box-shadow: var(--g-sh1); }
html .tools-page .chip.on {
    background: var(--brand-wash, #eaf7ee);
    border-color: transparent;
    color: var(--brand-ink, #0a7a2c);
    font-weight: 600;
    box-shadow: var(--g-sh1);
}
html .tools-page .chip.on i { background: var(--brand-ink, #0a7a2c); }
html .tools-page .back,
html .tools-page .hl,
html .tools-page .lgbar a {
    border-radius: 999px;
    border-color: var(--g-line);
    background: var(--paper, #fff);
    box-shadow: none;
    transition: background .15s ease, box-shadow .15s ease, transform .15s ease;
}
html .tools-page .back:hover,
html .tools-page .hl:hover,
html .tools-page .lgbar a:hover {
    background: var(--g-soft);
    box-shadow: var(--g-sh1);
    transform: translateY(-1px);
}
html .tools-page .fsbtn { border-radius: 999px; padding: 9px 16px; font-weight: 500;
    box-shadow: var(--g-sh2); }
html .tools-page .fsbtn:hover { box-shadow: var(--g-sh3); }

/* ── 3. Dai nhom: xuong dong, KHONG cuon ngang ────────────────────────────────────
   Chi co 9 nhom. Giau 2 cai cuoi sau mot mui ten la bat nguoi dung tim ho minh. */
html .tools-page .chips { flex-wrap: wrap; overflow: visible; padding-bottom: 0;
    cursor: default; row-gap: 8px; }
html .tools-page .chip-nav { display: none !important; }
html .tools-page .bar > * { align-items: flex-start; }
html .tools-page .sbox { align-self: center; }

/* ⛔ LOI THAT do chinh viec cho chip xuong dong: luat o tren dat
      `.bar > * { border-radius: 999px }`. Bo goc 999px chi ra hinh VIEN THUOC khi hop cao
      MOT dong. Chip xuong dong xong thi o 768px hop cao ~230px, va 999px bien no thanh
      HINH BAU DUC de len noi dung, cat mat o tim. Luat mobile co san chi bat tu 760px tro
      xuong nen 768px lot khe. Dung bo goc CO DINH — dung voi moi so dong. */
html .tools-page .bar > * { border-radius: 28px; }
@media (max-width: 900px) {
    /* Duoi 900px, o tim + 9 chip khong con vua mot hang -> cho o tim mot hang rieng,
       chip xuong duoi. Nguong cu la 640px, qua thap tu khi chip xuong dong. */
    html .tools-page .bar > * { flex-direction: column; align-items: stretch; gap: 10px; }
    html .tools-page .sbox { align-self: stretch; flex: 1 1 auto; }
}

/* ── 4. The cong cu dang O ICON ───────────────────────────────────────────────────
   ⛔ Luat `.grid .card{border-radius:20px}` o tren duoc viet cho the ANH cao 250px.
      O icon chi cao ~72px nen 20px trong nhu vien tron qua tay — ha ve 16px. */
html .tools-page .grid .card.tile { border-radius: 16px; }
html .tools-page .grid .card.tile:hover { transform: translateY(-2px);
    box-shadow: var(--g-sh2); }
html .tools-page .grid .card.tile .tico { border-radius: 13px; }

/* ── 5. Khoi huong dan gon lai ────────────────────────────────────────────────────
   Truoc: tam nen chuyen sac + vien + padding 22px + the 2 dong trich => ~200px chieu
   cao cho MOT bai. Sau: mot dai tieu de 22px + hang tieu de 44px. */
html .tools-page .rel.gd { background: none; border: 0; border-radius: 0;
    padding: 20px 0 0; margin-top: 30px; }
html .tools-page .rel.gd .gdicon { width: 22px; height: 22px; border-radius: 7px;
    box-shadow: none; }
html .tools-page .rel.gd .gdicon svg { width: 13px; height: 13px; }
html .tools-page .rel.gd h2 { font-size: 12px; letter-spacing: .08em; }
html .tools-page .rel.gd .g a { border-radius: 12px; padding: 10px 14px; min-height: 44px;
    display: flex; align-items: center; gap: 10px; }
html .tools-page .rel.gd .g b { font-size: 13.5px; font-weight: 500; margin: 0; }
/* ⛔ Luat mobile o tren (`.rel .gdcard > span {display:block}`) mo lai doan trich da an.
      Phai tat lai o day, neu khong tren dien thoai khoi nay phinh gap doi. */
html .tools-page .rel.gd .g a > span,
html .tools-page .rel.gd .gdcard > span { display: none !important; }

/* Hoi & dap gap lai */
html .tools-page .faq details { border-radius: 12px; }
html .tools-page .faq details[open] { box-shadow: var(--g-sh1); }

@media (max-width: 760px) {
    /* ⛔ 28/09 chieu — user: "khong an text nao". Luat cu o day cat mo ta con 2 dong tren
       dien thoai; da BO. Do lai tren khung 412px: 102 cho chu bi cat, tat ca tu luat nay. */
    html .tools-page .grid .card.tile .cd,
    html .tools-page .rel .g .relcard span,
    html .tools-page .hlcard span {
        display: block; -webkit-line-clamp: none; line-clamp: none;
        overflow: visible; white-space: normal; max-height: none;
    }
    html .tools-page .grid .card.tile { border-radius: 14px; }
    /* ⛔ Luat nen `@media(max-width:640px){.grid{...minmax(158px,1fr)}}` van chia HAI cot
       o khung 412px — hai cot rong 181px thi khong cau mo ta nao vua. Ep MOT cot. */
    html .tools-page .grid,
    html .tools-page .sec .grid,
    html .tools-page .rel .g.gimg,
    html .tools-page .hlgrid { grid-template-columns: 1fr; }
}
@media (min-width: 761px) and (max-width: 1040px) {
    html .tools-page .grid,
    html .tools-page .sec .grid,
    html .tools-page .rel .g.gimg,
    html .tools-page .hlgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1041px) {
    /* user 28/09: "bo tri 3 cot thoi" */
    html .tools-page .grid,
    html .tools-page .sec .grid,
    html .tools-page .rel .g.gimg,
    html .tools-page .hlgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}


/* ═══ 30/09/2026 — sidebar phải cho tools (nginx sub_filter chèn tệp này vào MỌI trang) ═══
   `bundle-global.css` của site chính đã có .b__inner/.b__grid/#rsidebar/.widget/.widgettitle,
   chỉ thiếu `.net-list` (lớp dùng cho danh sách liên kết trong sidebar của wiki + servers).
   Chép y nguyên để bốn site trông cùng một bộ. */
.net-list{list-style:none;margin:0;padding:0}
.net-list li{border-top:1px solid #eef2f7}
.net-list li:first-child{border-top:0}
.net-list a{display:block;padding:9px 2px;text-decoration:none;color:#0f172a}
.net-list a:hover{color:#c62828}
.net-list b{display:block;font-size:14px;font-weight:600;line-height:1.3}
.net-list span{display:block;font-size:12.5px;color:#64748b;margin-top:2px}
[data-theme="dark"] .net-list a{color:#e2e8f0}
[data-theme="dark"] .net-list li{border-top-color:#1f2937}
/* #rsidebar .widget ul của site chính là lưới 2 cột + ảnh nền; trong sidebar 300px của tools
   thì 1 cột dễ đọc hơn, và bỏ ảnh nền để không đè lên chữ. */
#rsidebar .widget ul.net-list{display:block;background:none;border:0;padding:0}
#rsidebar .adbox{margin:16px 0}
/* Cột đơn không được phình theo nội dung rộng (ô quảng cáo 381px trong khung 375px). */
.b__main,#rsidebar{min-width:0}
.b__main>*,#rsidebar>*{max-width:100%}
.b__main select,.b__main input,.b__main table{max-width:100%}
/* `.tools-page` vốn tự căn giữa toàn khung; giờ nó nằm TRONG `.b__main` nên bỏ giới hạn lồng. */
.b__main>.tools-page{max-width:none;margin:0;padding:0}

/* Trang guide co cot phu rieng (.gside): long trong sidebar moi thanh BA cot, bai viet chi con
   552px trong khung 1366px (do that 30/09). Gop lai mot cot -> bai duoc 892px, khoi "guide lien
   quan" xuong duoi bai. Sidebar phai (#rsidebar) van la cot phu duy nhat, giong site chinh. */
.b__main .glayout{grid-template-columns:minmax(0,1fr)}
.b__main .gside{max-width:none}