/* servers.9minecraft.net — Google-inspired minimalist floating UI (2026-09-27).
   File doc lap: render.js chi them 1 dong <link> SAU <style> noi tuyen -> cung do uu tien thi file nay thang.
   Go bo: xoa dong <link> trong render.js (hoac xoa file nay). Mau nhan (--acc xanh la) giu nguyen. */

:root {
    --bg: #f8f9fa; --card: #fff; --ink: #202124; --mut: #5f6368; --line: #e8eaed; --chip: #f1f3f4;
    --g-hover: rgba(60,64,67,.08);
    --shadow: 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);
    --rad: 20px;
}
:root[data-theme=dark] {
    --bg: #0d1117; --card: #161b22; --ink: #e8eaed; --mut: #9aa0a6; --line: #262d36; --chip: #1f2630;
    --g-hover: rgba(255,255,255,.06);
    --shadow: 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);
}
@media (prefers-color-scheme: dark) {
    :root:not([data-theme=light]) {
        --bg: #0d1117; --card: #161b22; --ink: #e8eaed; --mut: #9aa0a6; --line: #262d36; --chip: #1f2630;
        --g-hover: rgba(255,255,255,.06);
        --shadow: 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);
    }
}
body { font-family: Roboto, system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif; }

/* ── Thanh tren: vien thuoc noi, mo kinh ── */
header.top { background: transparent; border-bottom: 0; padding: 10px 0 0; pointer-events: none; }
header.top .nav {
    pointer-events: auto;
    height: 60px; padding: 0 10px 0 20px;
    background: color-mix(in srgb, var(--card) 88%, transparent);
    -webkit-backdrop-filter: saturate(1.4) blur(12px);
            backdrop-filter: saturate(1.4) blur(12px);
    border: 1px solid var(--line);
    border-radius: 999px;
    box-shadow: var(--g-sh2);
}
.nav a.link { padding: 8px 12px; border-radius: 999px; font-weight: 500; }
.nav a.link:hover { background: var(--g-hover); }
.btn { border-radius: 999px; padding: 10px 18px; font-weight: 600; box-shadow: 0 1px 2px rgba(60,64,67,.2); }
.btn.ghost { background: var(--chip); box-shadow: none; }
.btn.ghost:hover { background: var(--line); }
.icbtn { width: 40px; height: 40px; border-radius: 50%; border: 0; background: var(--chip); }
.icbtn:hover { background: var(--line); }
select.lang { border-radius: 999px; padding: 9px 12px; border: 0; background: var(--chip); }

/* ── Dau trang + tim kiem ── */
h1 { font-weight: 700; letter-spacing: -.02em; }
.search {
    height: 54px; padding: 0 20px 0 50px;
    border: 1px solid var(--line); border-radius: 999px;
    box-shadow: var(--g-sh2);
    background: var(--card) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%235f6368' stroke-width='2' stroke-linecap='round'><circle cx='11' cy='11' r='7'/><path d='m20 20-3.5-3.5'/></svg>") no-repeat 18px center;
    font-size: 16px;
}
.search:focus { outline: none; border-color: transparent; box-shadow: 0 0 0 2px var(--acc), var(--g-sh2); }

/* ── Chip loc: vien thuoc trang, hover nen xam nhat ── */
.chip { background: var(--card); border: 1px solid #dadce0; font-weight: 500; padding: 7px 14px; transition: background-color .15s, box-shadow .15s; }
:root[data-theme=dark] .chip { border-color: var(--line); }
.chip:hover { border-color: #dadce0; background: var(--chip); box-shadow: var(--shadow); }

/* ── Tieu de khoi + link "More servers" = vien thuoc ── */
.sec h2 { font-weight: 600; }
.sec a { padding: 7px 14px; border-radius: 999px; }
.sec a:hover { background: var(--g-hover); }

/* ── The server: noi bang bong, bo 20px, nhac len khi re chuot ── */
.grid { gap: 14px; }
.card {
    border: 1px solid var(--line); border-radius: var(--rad);
    padding: 16px; box-shadow: var(--shadow);
    transition: box-shadow .18s ease, transform .18s ease;
}
.card:hover { border-color: var(--line); box-shadow: var(--g-sh2); transform: translateY(-2px); }
.ico { border-radius: 14px; }
.card .nm { font-weight: 700; }
.card .ip { border-radius: 999px; padding: 4px 12px; border: 0; }
.card .ip:hover { background: var(--line); }
.tag { border-radius: 999px; padding: 3px 10px; background: var(--chip); }
.card .on { font-weight: 700; }

/* ── Trang chi tiet / form / binh chon: the noi bo 24px ── */
.dhead, .prose, form.add, .reviews, .chartwrap {
    border: 1px solid var(--line); border-radius: 24px; box-shadow: var(--g-sh2);
}
.dhead { padding: 24px; }
.dhead .ico { border-radius: 18px; }
.kpi { border-radius: 18px; border: 1px solid var(--line); box-shadow: var(--shadow); padding: 14px 16px; }
form.add input, form.add textarea, .rv-form input, .rv-form textarea { border-radius: 14px; padding: 11px 14px; }
form.add input:focus, form.add textarea:focus, .rv-form input:focus, .rv-form textarea:focus {
    outline: none; border-color: var(--acc); box-shadow: 0 0 0 2px color-mix(in srgb, var(--acc) 25%, transparent);
}
.ok { border-radius: 16px; }
.rv-bar i { border-radius: 999px; }

/* ── Chan trang: chip ngon ngu vien thuoc ── */
footer.ft { border-top: 1px solid var(--line); }
.langrow a { border-radius: 999px; padding: 4px 10px; }
.langrow a:hover { background: var(--line); }

@media (max-width: 640px) {
    header.top { padding: 8px 0 0; }
    header.top .nav { height: 56px; padding: 0 6px 0 14px; gap: 8px; }
    .btn { padding: 9px 14px; }
    .search { height: 50px; }
    .card { padding: 14px; }
}

/* Man nho: thanh tren tung tran ngang (loi co tu truoc, trang rong ~448px). An o chon ngon ngu
   o thanh tren — chan trang van co day du link doi ngon ngu (.langrow). */
@media (max-width: 480px) {
    header.top .nav select.lang { display: none; }
    header.top .nav { gap: 6px; }
    .logoimg { height: 24px; }
    .btn { white-space: nowrap; }
    .icbtn { flex: 0 0 auto; }
}