/* capes.9minecraft.net — Google-inspired Minimalist Floating UI
   Cong thuc chot o [[feedback_web_tool_google_floating_ui]]:
   nen phang xam rat nhat; moi khoi la THE NOI tren bong mem, KHONG VIEN; bo goc lon
   (28 khoi chinh / 16 khoi con / 12 anh); nut VIEN THUOC; mot mau nhan duy nhat;
   phan cap bang CO CHU + MAU XAM, khong bang duong ke. */

:root {
  --bg: #f1f3f4;
  --the: #ffffff;
  --chu: #202124;
  --xam: #5f6368;
  --xam-nhat: #80868b;
  --nhan: #1a73e8;
  --nhan-nen: #e8f0fe;
  --nhan-dam: #174ea6;
  /* ⛔ Mau CHU dat tren nen `--nhan` phai la mot bien rieng. Che do toi lay `--nhan` la xanh
     NHAT (#8ab4f8 - dung chuan Material), ep chu trang len do chi duoc tuong phan 2.11 -
     nut chinh gan nhu khong doc duoc. Chu toi tren cung nen do dat 7.64. */
  --chu-tren-nhan: #ffffff;
  --bong: 0 1px 2px rgba(60,64,67,.3), 0 1px 3px 1px rgba(60,64,67,.15);
  --bong-cao: 0 1px 3px rgba(60,64,67,.3), 0 4px 8px 3px rgba(60,64,67,.15);
  --bong-noi: 0 2px 6px 2px rgba(60,64,67,.15), 0 1px 2px rgba(60,64,67,.3);
  --r-lon: 28px;
  --r-vua: 16px;
  --r-anh: 12px;
}
:root[data-theme="dark"] {
  --bg: #202124;
  --the: #292a2d;
  --chu: #e8eaed;
  --xam: #9aa0a6;
  --xam-nhat: #80868b;
  --nhan: #8ab4f8;
  --nhan-nen: #1f3a5f;
  --nhan-dam: #aecbfa;
  --chu-tren-nhan: #202124;
  --bong: 0 1px 2px rgba(0,0,0,.6), 0 1px 3px 1px rgba(0,0,0,.4);
  --bong-cao: 0 1px 3px rgba(0,0,0,.6), 0 4px 8px 3px rgba(0,0,0,.4);
  --bong-noi: 0 2px 6px 2px rgba(0,0,0,.4), 0 1px 2px rgba(0,0,0,.6);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #202124; --the: #292a2d; --chu: #e8eaed; --xam: #9aa0a6;
    --nhan: #8ab4f8; --nhan-nen: #1f3a5f; --nhan-dam: #aecbfa; --chu-tren-nhan: #202124;
    --bong: 0 1px 2px rgba(0,0,0,.6), 0 1px 3px 1px rgba(0,0,0,.4);
    --bong-cao: 0 1px 3px rgba(0,0,0,.6), 0 4px 8px 3px rgba(0,0,0,.4);
    --bong-noi: 0 2px 6px 2px rgba(0,0,0,.4), 0 1px 2px rgba(0,0,0,.6);
  }
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--bg);
  color: var(--chu);
  font-family: "Google Sans Text", "Google Sans", Roboto, -apple-system,
               "Segoe UI", Arial, sans-serif;
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--nhan); text-decoration: none; }
a:hover { text-decoration: underline; }
img { max-width: 100%; display: block; }

.wrap { max-width: 1280px; margin: 0 auto; padding: 0 16px; }

/* ----------------------------------------------------------- thanh tren */
.top { padding: 14px 0 0; }
.topin {
  display: flex; align-items: center; gap: 14px;
  background: var(--the); box-shadow: var(--bong);
  border-radius: 999px; padding: 10px 18px;
}
.logo { font-size: 16px; font-weight: 500; color: var(--chu); white-space: nowrap;
        padding: 2px 0; }
.logo:hover { text-decoration: none; }
.logo b { color: var(--nhan); font-weight: 500; }
.nav { display: flex; gap: 4px; margin-left: auto; align-items: center; }
.nav a {
  color: var(--xam); padding: 7px 14px; border-radius: 999px; font-size: 13px;
  white-space: nowrap;
}
.nav a:hover { background: var(--bg); text-decoration: none; }
/* ⛔ `--nhan` tren `--nhan-nen` chi dat 3.93. `--nhan-dam` dat 7.4 (sang) va
   7.0 (toi) ma van ra dung mot chip xanh. */
.nav a.on { background: var(--nhan-nen); color: var(--nhan-dam); }
.icbtn {
  width: 36px; height: 36px; border: 0; border-radius: 999px; cursor: pointer;
  background: transparent; color: var(--xam); display: grid; place-items: center;
  flex: 0 0 auto;
}
.icbtn:hover { background: var(--bg); }
.icbtn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; }

/* ----------------------------------------------------------- khoi gioi thieu */
.hero { margin-top: 14px; }
.heroin {
  background: var(--the); box-shadow: var(--bong); border-radius: var(--r-lon);
  padding: 30px 32px;
}
.hero h1 { margin: 0 0 8px; font-size: 28px; font-weight: 400; letter-spacing: -.2px; }
.hero p { margin: 0; color: var(--xam); max-width: 70ch; font-size: 14px; }
.facts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
/* Lien ket trong hang "facts" (vd "All categories" o trang danh muc): o 12.5px thi mau
   `--nhan` chi dat 4.05, va chieu cao chi 15px — duoi ca hai nguong. Cho no tham mau va
   chiem tron o chip de thanh vung cham >= 24px. */
.facts span a { color: var(--nhan-dam); display: inline-block; padding: 5px 0; }
.facts span {
  background: var(--bg); color: var(--xam); border-radius: 999px;
  padding: 6px 13px; font-size: 12.5px;
}

/* ----------------------------------------------------------- thanh loc */
/* ⛔ KHONG ghim (position:sticky) — chu site da chot bo ghim o khu tim kiem cua tool. */
.bar { margin-top: 14px; }
.barin {
  background: var(--the); box-shadow: var(--bong); border-radius: var(--r-lon);
  padding: 14px 16px; display: flex; flex-wrap: wrap; gap: 12px; align-items: center;
}
.sbox { position: relative; flex: 0 0 320px; max-width: 100%; }
.sbox svg {
  position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
  width: 16px; height: 16px; stroke: var(--xam); fill: none; stroke-width: 2;
}
#q {
  width: 100%; height: 42px; padding: 0 16px 0 40px; border: 0;
  border-radius: 999px; background: var(--bg) !important; color: var(--chu);
  font: inherit; outline: none;
}
#q:focus { box-shadow: 0 0 0 2px var(--nhan) inset; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  border: 0; cursor: pointer; border-radius: 999px; padding: 9px 16px;
  background: var(--bg); color: var(--xam); font: inherit; font-size: 13px;
}
.chip:hover { background: var(--nhan-nen); color: var(--nhan); }
.chip.on { background: var(--nhan-nen); color: var(--nhan); }

/* ----------------------------------------------------------- luoi cape */
.sec { margin-top: 14px; }
.sechead { display: flex; align-items: baseline; gap: 10px; margin: 0 4px 10px; }
/* Lien ket nho ben phai dau muc: vua tham mau cho du tuong phan o 12px, vua
   them dem doc cho vung cham cao >= 24px (truoc day 18px). */
.sechead a { color: var(--nhan-dam); padding: 4px 0; }
.sechead h2 {
  margin: 0; font-size: 11px; font-weight: 500; text-transform: uppercase;
  letter-spacing: .9px; color: var(--xam);
}
/* ⛔ KHONG dung `--xam-nhat` cho chu 11px: #80868b tren nen #f1f3f4 chi dat
   tuong phan 3.3 (can 4.5). `--xam` dat 5.9 va trong khong khac may. */
.sechead .n { color: var(--xam); font-size: 11px; }
.grid {
  display: grid; gap: 14px;
  grid-template-columns: repeat(auto-fill, minmax(168px, 1fr));
}
.card {
  background: var(--the); box-shadow: var(--bong); border-radius: var(--r-vua);
  padding: 16px; display: block; color: inherit; transition: box-shadow .15s, transform .15s;
}
.card:hover { box-shadow: var(--bong-cao); transform: translateY(-1px); text-decoration: none; }
.card .pv {
  border-radius: var(--r-anh); overflow: hidden; background: var(--bg);
  aspect-ratio: 10 / 16; display: grid; place-items: center; margin-bottom: 12px;
}
.card .pv img { width: 100%; height: 100%; object-fit: cover; image-rendering: pixelated; }
.card .ten { font-size: 13.5px; color: var(--chu); }
.card .nho { font-size: 12px; color: var(--xam); margin-top: 2px; }
.rong { color: var(--xam); padding: 28px 4px; }

/* ----------------------------------------------------------- trang chi tiet */
/* `align-items: start` — khong co no thi the ben trai bi KEO CAO bang the ben phai,
   de lai mot vung trang lon duoi khung xem 3D (chi lo ra khi chup man hinh). */
.doi { display: grid; grid-template-columns: 420px 1fr; gap: 14px; margin-top: 14px;
       align-items: start; }
.the {
  background: var(--the); box-shadow: var(--bong); border-radius: var(--r-lon); padding: 20px;
}
.the h2 { margin: 0 0 4px; font-size: 22px; font-weight: 400; }
.the .phu { color: var(--xam); margin: 0 0 18px; }
.nhan-muc {
  font-size: 11px; font-weight: 500; text-transform: uppercase; letter-spacing: .9px;
  color: var(--xam); margin: 22px 0 10px;
}
.nhan-muc:first-child { margin-top: 0; }
.hang { display: flex; flex-wrap: wrap; gap: 8px; }
.nut {
  display: inline-flex; align-items: center; gap: 8px; border: 0; cursor: pointer;
  border-radius: 999px; padding: 11px 20px; font: inherit; font-size: 13.5px;
  background: var(--bg); color: var(--chu); text-decoration: none;
}
.nut:hover { background: var(--nhan-nen); color: var(--nhan); text-decoration: none; }
.nut.chinh { background: var(--nhan); color: var(--chu-tren-nhan); }
.nut.chinh:hover { background: var(--nhan-dam); color: var(--chu-tren-nhan); }
.nut svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; }
.bang { width: 100%; border-collapse: collapse; }
.bang td { padding: 7px 0; font-size: 13px; vertical-align: top; }
.bang td:first-child { color: var(--xam); width: 42%; }

/* ----------------------------------------------------------- khung xem 3D */
.sanh {
  position: relative; border-radius: var(--r-vua); background: var(--bg);
  aspect-ratio: 1 / 1; overflow: hidden; display: grid; place-items: center;
  perspective: 900px; touch-action: none; cursor: grab;
}
.sanh:active { cursor: grabbing; }
.hop { position: relative; transform-style: preserve-3d; }
.hop .mat { position: absolute; image-rendering: pixelated; background-repeat: no-repeat; }
/* thanh cong cu NOI de len khung xem, bo tron han, bong dam hon
   ⛔ Phai co `z-index`: khung xem la canh 3D (`preserve-3d`), cac mat co `translateZ` duong
      noi len TRUOC thanh nut neu khong xep lop — chu tren nut bi hinh 3D de khuat. */
/* ⛔ Phai co `max-width` + `flex-wrap`: tu khi them Elytra/Player la 5 nut, mot hang rong hon
      ca khung xem nen "Outside" va "Spin" bi cat cut o hai dau. Xuong hang thi khong mat nut
      nao; phan dich hinh len do JS tu tinh theo CHIEU CAO THAT cua thanh. */
/* ⛔ KHONG dung `left:50% + translateX(-50%)`: phan tu `position:absolute` chi co `left` thi
      be rong kha dung chi con `100% - left` = MOT NUA khung. Truoc day khong lo vi thanh
      khong cho xuong hang (no cu tran ra hai ben); vua them `flex-wrap` la no goi ngay thanh
      3 hang cao 112px du chi co 3 nut. Neo CA HAI mep roi `margin:auto` thi be rong kha dung
      moi dung bang khung. */
.cong-cu {
  position: absolute; left: 10px; right: 10px; bottom: 14px;
  width: fit-content; margin: 0 auto;
  display: flex; flex-wrap: wrap; justify-content: center; gap: 2px; padding: 5px; z-index: 3;
  background: var(--the); box-shadow: var(--bong-noi); border-radius: 22px;
}
.cong-cu button {
  border: 0; cursor: pointer; background: transparent; color: var(--xam);
  border-radius: 999px; padding: 7px 11px; font: inherit; font-size: 12.5px;
  white-space: nowrap;
}
.cong-cu button:hover { background: var(--bg); }
.cong-cu button.on { background: var(--nhan-nen); color: var(--nhan-dam); }

/* ----------------------------------------------------------- bo ve cape */
.ve { display: grid; grid-template-columns: 1fr 320px; gap: 14px; margin-top: 14px;
      align-items: start; }
.toan { position: relative; background: var(--bg); border-radius: var(--r-vua);
        display: grid; place-items: center; padding: 22px; }
#toan { image-rendering: pixelated; cursor: crosshair; border-radius: 6px;
        box-shadow: var(--bong); background: #fff; }
.o-mau { display: grid; grid-template-columns: repeat(8, 1fr); gap: 6px; }
.o-mau button {
  aspect-ratio: 1; border: 0; border-radius: 8px; cursor: pointer; padding: 0;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.08);
}
.o-mau button.on { box-shadow: 0 0 0 2px var(--nhan); }
.dong { display: flex; align-items: center; gap: 10px; margin: 10px 0; }
.dong label { color: var(--xam); font-size: 12.5px; flex: 0 0 72px; }
input[type="range"] { flex: 1; accent-color: var(--nhan); height: 26px; }
input[type="color"] {
  width: 44px; height: 32px; border: 0; border-radius: 8px; background: none;
  cursor: pointer; padding: 0;
}

/* ----------------------------------------------------------- chan trang */
.chan { margin: 26px 0 30px; }
.chanin {
  background: var(--the); box-shadow: var(--bong); border-radius: var(--r-lon);
  padding: 22px 26px; color: var(--xam); font-size: 13px;
}
.chanin a { color: var(--xam); }
.chanin .lk { display: flex; flex-wrap: wrap; gap: 16px; margin-bottom: 10px; }
.chanin .lk a { padding: 3px 0; }

@media (max-width: 1180px) {
  .doi, .ve { grid-template-columns: 1fr; }
  .grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
}
@media (max-width: 720px) {
  .wrap { padding: 0 16px; }
  .heroin { padding: 24px 20px; }
  .hero h1 { font-size: 23px; }
  .sbox { flex: 1 1 100%; }
  .sx { margin-left: 0; }

  /* ⛔ Thanh dieu huong khong xuong dong lam ca header rong 517px tren man 390px
     (do duoc bang trinh duyet: `nav.nav` w=342 right=517). Cho header XUONG DONG:
     logo o hang tren, dieu huong o hang duoi va truot ngang neu con chat. */
  .topin { flex-wrap: wrap; border-radius: var(--r-lon); padding: 12px 16px; row-gap: 8px; }
  .nav {
    width: 100%; margin-left: 0; flex-wrap: nowrap; overflow-x: auto;
    scrollbar-width: none; -webkit-overflow-scrolling: touch;
  }
  .nav::-webkit-scrollbar { display: none; }
  .nav a { padding: 7px 11px; }
}

/* ======================================================= danh gia / binh luan / xem
   Them 07/10/2026. Giu dung cong thuc Floating UI: the noi, khong vien, nut vien thuoc. */

/* Kim cuong danh gia — hinh da giac TU VE (SVG noi tuyen trong app.js), khong lay anh
   tu dau ca. Tat/bat bang mau, khong doi hinh, de hang icon khong nhay khi re chuot. */
.sao { display: flex; gap: 2px; }
.sao button {
  border: 0; background: transparent; cursor: pointer; padding: 3px; line-height: 0;
  border-radius: 8px;
}
.sao button:hover { background: var(--bg); }
.sao svg { width: 24px; height: 24px; display: block; }
.sao .vo  { fill: none; stroke: var(--xam-nhat); stroke-width: 1.6; }
.sao .day { fill: #3ab3da; stroke: #1f7fa0; stroke-width: 1.2; }
.sao[data-khoa="1"] button { cursor: default; }
.sao[data-khoa="1"] button:hover { background: transparent; }
.diem-chu { color: var(--xam); font-size: 13px; }
.diem-chu b { color: var(--chu); font-weight: 500; }

.so-lieu { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.so-lieu span {
  background: var(--bg); color: var(--xam); border-radius: 999px;
  padding: 5px 12px; font-size: 12.5px;
}

/* ---------------------------------------------------------------- binh luan */
.cmt-form { display: grid; gap: 10px; }
.cmt-form input[type="text"], .cmt-form textarea {
  width: 100%; border: 0; border-radius: var(--r-vua); background: var(--bg) !important;
  color: var(--chu); font: inherit; padding: 12px 16px; outline: none; resize: vertical;
}
.cmt-form input[type="text"] { border-radius: 999px; height: 42px; padding: 0 16px; }
.cmt-form textarea { min-height: 96px; }
.cmt-form input:focus, .cmt-form textarea:focus { box-shadow: 0 0 0 2px var(--nhan) inset; }
.cmt-ds { display: grid; gap: 10px; margin-top: 16px; }
.cmt {
  background: var(--bg); border-radius: var(--r-vua); padding: 14px 16px;
}
.cmt .dau { display: flex; align-items: baseline; gap: 10px; margin-bottom: 4px; }
.cmt .ten { font-size: 13.5px; font-weight: 500; }
.cmt .gio { color: var(--xam-nhat); font-size: 12px; }
.cmt .chu { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 13.5px; }
.cmt-bao { color: var(--xam); font-size: 13px; margin-top: 10px; min-height: 18px; }

/* ------------------------------------------------------- sap xep o danh muc */
.sx { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.sx label { color: var(--xam); font-size: 12.5px; }
.sx select {
  border: 0; border-radius: 999px; background: var(--bg); color: var(--chu);
  font: inherit; font-size: 13px; height: 38px; padding: 0 14px; cursor: pointer;
}

/* --------------------------------------------- phong to / toan man hinh anh */
.phong-nut {
  position: absolute; right: 12px; top: 12px; z-index: 2;
  display: flex; gap: 4px; padding: 4px;
  background: var(--the); box-shadow: var(--bong-noi); border-radius: 999px;
}
.phong-nut button {
  border: 0; cursor: pointer; background: transparent; color: var(--xam);
  border-radius: 999px; padding: 7px; display: grid; place-items: center;
}
.phong-nut button:hover { background: var(--bg); }
.phong-nut svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2; }

.den {
  position: fixed; inset: 0; z-index: 50; display: none;
  background: rgba(32,33,36,.86); place-items: center; padding: 24px;
}
.den.mo { display: grid; }
.den img {
  max-width: min(92vw, 720px); max-height: 86vh; image-rendering: pixelated;
  border-radius: var(--r-anh); box-shadow: var(--bong-cao); background: #fff;
}
.den .dong-lai {
  position: absolute; right: 18px; top: 18px; width: 42px; height: 42px;
  border: 0; border-radius: 999px; cursor: pointer; background: var(--the); color: var(--chu);
  box-shadow: var(--bong-noi); display: grid; place-items: center;
}
.den .dong-lai svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; }
.den .chu-thich { color: #e8eaed; margin-top: 14px; font-size: 13px; text-align: center; }

/* ── Khoi "Make your own": the cong cu dan sang tools.9minecraft.net ──────────
   User 07/10: "dan link tu capes sang do". Dung lai dung bo mau/bong cua site
   (--the, --nhan, --bong) de khoi moi khong lech kieu voi luoi cape ben tren. */
.tgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(248px,1fr));
  gap:12px;margin:12px 0 4px}
.tcard{display:flex;flex-direction:column;gap:5px;padding:14px 16px;border-radius:14px;
  background:var(--the);box-shadow:var(--bong);text-decoration:none;
  transition:box-shadow .16s ease,transform .16s ease}
.tcard:hover{box-shadow:var(--bong-cao);transform:translateY(-2px);text-decoration:none}
.tten{font:600 14.5px/1.35 inherit;color:var(--nhan)}
.tmo{font:400 12.5px/1.5 inherit;color:var(--xam)}
@media (max-width:760px){.tgrid{grid-template-columns:1fr;gap:10px}
  .tcard{padding:12px 14px;border-radius:12px}}

/* ----------------------------------------- "You May Also Like" (10/10/2026)
   Khoi lien quan nhieu the, theo dung cau truc khoi cung ten tren 9minecraft.net.
   Ban cu chi co mot nhom "More <Category>" — 12 cape cung nhom, luon cung thu tu, nen
   100 trang chi tiet chia nhau dung bon danh sach. */
.rl {
  background: var(--the);
  border-radius: var(--r-lon);
  box-shadow: var(--bong);
  padding: 20px 20px 22px;
  margin: 14px 0 10px;
}
.rl-hd { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: 4px; }
.rl-hd h2 { margin: 0; font-size: 18px; letter-spacing: -.01em; flex: 1 1 auto; }
.rl-tabs {
  display: flex; align-items: center; gap: 2px; flex-wrap: wrap;
  background: var(--bg); border-radius: 999px; padding: 4px;
}
.rl-tab {
  appearance: none; border: 0; cursor: pointer; background: transparent; color: var(--xam);
  border-radius: 999px; padding: 8px 15px; font: 500 13px/1.3 inherit; white-space: nowrap;
  font-family: inherit; transition: background .15s, color .15s, box-shadow .15s;
}
.rl-tab:hover { color: var(--chu); }
.rl-tab.on { background: var(--the); color: var(--chu); font-weight: 600; box-shadow: var(--bong); }
.rl-tab:focus-visible { outline: 2px solid var(--nhan); outline-offset: 2px; }
.rl-sub { margin: 2px 0 14px; color: var(--xam); font-size: 13px; }
.rl-p[hidden] { display: none; }
.rl .grid { margin: 0; }
.rl-more { display: inline-block; margin-top: 14px; color: var(--nhan-dam); font-weight: 600; }
@media (max-width: 860px) {
  .rl { padding: 16px 14px 18px; border-radius: 22px; }
  .rl-hd { gap: 10px; }
  .rl-hd h2 { font-size: 17px; flex: 1 1 100%; }
  /* ⛔ Dai the tren dien thoai phai cuon NGANG chu khong xuong dong: nam the xep ba hang
     thi dau khoi cao hon ca mot the cape, nguoi doc phai cuon qua moi thay noi dung. */
  .rl-tabs {
    flex: 1 1 100%; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none;
    -webkit-overflow-scrolling: touch; justify-content: flex-start;
  }
  .rl-tabs::-webkit-scrollbar { display: none; }
  .rl-tab { padding: 8px 13px; font-size: 12.5px; }
}