/* game.9minecraft.net — phan RIENG cua sub game.
 * ⛔ Moi lop deu co tien to `g-`: `app.css` dung chung ca 16 site, dat ten tu do la
 *    de de len lop cua no va hong o site khac ma khong ai thay.
 * ⛔ Khong bia lop cua app.css ra ma dung — chi dung `.wrap` (da co that).
 */
.g-main { max-width: 1260px; margin: 0 auto;
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
  padding-block: 18px 40px; }

/* breadcrumb chuan 9minecraft: » · link #2563eb · muc cuoi #64748b · 14px */
.g-vun ol { list-style: none; display: flex; flex-wrap: wrap; gap: 6px;
  padding: 0; margin: 0 0 14px; font-size: 14px; }
.g-vun li + li::before { content: "\00bb"; margin-right: 6px; color: #64748b; }
.g-vun a { color: #2563eb; text-decoration: none; }
.g-vun a:hover { text-decoration: underline; }
.g-vun li[aria-current] { color: #64748b; }

.g-h1 { font-size: clamp(24px, 4vw, 34px); line-height: 1.15; margin: 0 0 6px;
  text-wrap: balance; }
/* ⛔ KHONG chan be ngang van ban — xem [[feedback_mo_ta_full_width]]. Chu site 15/11:
   *"mo ta phai full width"*. Truoc day cho nay la `max-width:62ch` nen doan mo ta
   lot thom giua khoang trang o desktop. */
.g-lead { margin: 0 0 18px; opacity: .78; font-size: 15px; }

/* ── HUD ── */
.g-hud { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px;
  border: 2px solid var(--n9-vien, #cbd5e1); border-radius: 4px;
  padding: 9px 12px; margin-bottom: 10px; }
.g-stat { display: flex; align-items: baseline; gap: 6px; }
.g-stat b { font-size: 20px; font-variant-numeric: tabular-nums; line-height: 1; }
.g-stat span { font-size: 10.5px; text-transform: uppercase; letter-spacing: 1px;
  opacity: .62; }
.g-pips { display: flex; gap: 5px; }
.g-pip { width: 13px; height: 13px; border: 2px solid var(--n9-vien, #cbd5e1);
  border-radius: 2px; }
.g-pip.on { background: #5d9c35; border-color: #3f7222; }
.g-spacer { flex: 1 1 auto; min-width: 0; }
.g-btn { font: inherit; font-weight: 600; font-size: 13.5px; cursor: pointer;
  white-space: nowrap; min-height: 44px; padding: 7px 12px; border-radius: 4px;
  background: #5d9c35; color: #fff; border: 0; border-bottom: 3px solid #3f7222; }
.g-btn:active { transform: translateY(2px); border-bottom-width: 1px; }
.g-btn.phu { background: transparent; color: inherit;
  border: 2px solid var(--n9-vien, #cbd5e1); border-bottom-width: 2px; }
.g-btn:disabled { opacity: .42; cursor: not-allowed; }
.g-zoom { display: flex; gap: 4px; align-items: center; }
.g-zoom .g-btn { min-width: 44px; padding: 7px 9px; text-align: center; }
.g-zlab { font-size: 13px; min-width: 34px; text-align: center;
  font-variant-numeric: tabular-nums; opacity: .62; }

/* ── hai khung anh ── */
.g-canh { display: grid; grid-template-columns: 1fr; gap: 10px; }
@media (min-width: 900px) { .g-canh { grid-template-columns: 1fr 1fr; } }
/* ⛔ Do that 15/11 tren khung 844x390: anh vuong chiem 806px chieu cao trong khung nhin
   cao 390px — nguoi choi phai cuon rat nhieu moi so sanh duoc hai anh. Chan chieu cao
   theo KHUNG NHIN. ⛔ Phai chan o `.g-scene` chu KHONG dat `max-height` len `<img>`:
   lop `.g-marks` phu `inset:0` cua `.g-pan`, anh co lai mot minh la moi dau tim duoc
   lech khoi vat the. `--g-ar` do `_dung_trang.py` dat theo tung man. */
.g-canh .g-scene { max-width: min(100%, calc(var(--g-ar, 1) * 72vh)); margin-inline: auto; }
.g-wrap.fs .g-canh .g-scene { max-width: none; }
.g-scene { position: relative; min-width: 0; width: 100%; overflow: hidden;
  border: 3px solid var(--n9-vien, #cbd5e1); border-radius: 4px;
  touch-action: none; cursor: crosshair; line-height: 0; }
.g-pan { transform-origin: 0 0; will-change: transform; position: relative; line-height: 0; }
.g-scene img { display: block; width: 100%; height: auto; max-width: 100%;
  user-select: none; -webkit-user-select: none; -webkit-user-drag: none;
  pointer-events: none; }
.g-cap { position: absolute; top: 0; left: 0; z-index: 3; font-size: 11.5px;
  letter-spacing: 1px; font-weight: 700; background: var(--n9-vien, #cbd5e1);
  color: #1f2937; padding: 3px 9px; border-bottom-right-radius: 4px;
  line-height: 1.5; pointer-events: none; }
.g-marks { position: absolute; inset: 0; pointer-events: none; }
.g-scene.rung { animation: g-rung .32s; }
@keyframes g-rung { 0%,100% { transform: translateX(0) } 25% { transform: translateX(-6px) }
  75% { transform: translateX(6px) } }
@media (prefers-reduced-motion: reduce) { .g-scene.rung { animation: none } }

.g-ring { position: absolute; border: 4px solid #5d9c35; border-radius: 50%;
  pointer-events: none;
  box-shadow: 0 0 0 3px rgba(0,0,0,.28) inset, 0 0 0 3px rgba(0,0,0,.28); }
.g-ring.goi { border-color: #d8a12a; animation: g-nhay 1s ease-in-out 3; }
@keyframes g-nhay { 0%,100% { transform: translate(-50%,-50%) scale(1); opacity: 1 }
  50% { transform: translate(-50%,-50%) scale(1.22); opacity: .55 } }
@media (prefers-reduced-motion: reduce) { .g-ring.goi { animation: none } }
.g-miss { position: absolute; width: 30px; height: 30px; margin: -15px 0 0 -15px;
  pointer-events: none; animation: g-tan .9s forwards; }
.g-miss::before, .g-miss::after { content: ""; position: absolute; left: 13px; top: 0;
  width: 4px; height: 30px; background: #b4332a; border-radius: 1px; }
.g-miss::before { transform: rotate(45deg) } .g-miss::after { transform: rotate(-45deg) }
@keyframes g-tan { 0%,70% { opacity: 1 } 100% { opacity: 0 } }

/* ── che do tap trung (full man hinh) ── */
.g-wrap.fs { position: fixed; inset: 0; z-index: 60; max-width: none;
  background: var(--n9-nen, #fff); overflow: hidden;
  padding: max(8px, env(safe-area-inset-top, 0px)) max(8px, env(safe-area-inset-right, 0px))
           max(8px, env(safe-area-inset-bottom, 0px)) max(8px, env(safe-area-inset-left, 0px));
  display: flex; flex-direction: column; gap: 8px; }
.g-wrap.fs .g-an-fs { display: none !important; }
.g-wrap.fs .g-hud { padding: 6px 10px; gap: 6px 12px; margin: 0; }
.g-wrap.fs .g-canh { flex: 1 1 auto; min-height: 0; gap: 8px; }
.g-wrap.fs .g-scene { height: 100%; display: flex; align-items: center;
  justify-content: center; align-self: center; justify-self: center; }
.g-wrap.fs .g-scene img { width: 100%; height: 100%; }
@media (max-width: 899px) { .g-wrap.fs .g-canh { grid-template-rows: 1fr 1fr } }
@media (min-width: 900px), (orientation: landscape) {
  .g-wrap.fs .g-canh { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr } }

/* ── bang ket qua ── */
.g-ket { border: 3px solid #5d9c35; border-radius: 4px; padding: 14px 16px;
  margin-bottom: 10px; display: flex; flex-wrap: wrap; align-items: center;
  gap: 10px 18px; }
.g-ket h2 { margin: 0; font-size: 20px; line-height: 1.1; }
.g-ketdong { margin: 0; opacity: .72; font-size: 14px; }
.g-sao { font-size: 22px; opacity: .25; }
.g-sao.on { opacity: 1; color: #d8a12a; }
.g-huy { display: inline-block; font-size: 12px; font-weight: 700; padding: 3px 9px;
  border-radius: 999px; background: #d8a12a; color: #3a2a06; margin-right: 5px; }
.g-cap { display: inline-block; font-size: 12px; font-weight: 700; padding: 3px 9px;
  border-radius: 999px; background: #5d9c35; color: #fff; }
.g-vao { font-size: 13px; opacity: .8; }

/* ── luoi man choi ── */
.g-chuong { margin: 26px 0 10px; font-size: 19px; display: flex; align-items: baseline;
  gap: 10px; }
.g-chuong small { font-size: 12px; opacity: .6; font-weight: 400; }
.g-luoi { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
.g-the { display: block; text-decoration: none; color: inherit;
  border: 2px solid var(--n9-vien, #cbd5e1); border-radius: 4px; overflow: hidden; }
.g-the:hover { border-color: #5d9c35; }
.g-the img { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; }
.g-the b { display: block; padding: 8px 10px 2px; font-size: 14.5px; }
.g-the span { display: block; padding: 0 10px 9px; font-size: 12px; opacity: .65; }
.g-kho { display: inline-block; margin-left: 6px; font-size: 11px; font-weight: 700;
  padding: 1px 7px; border-radius: 999px; background: #e2e8f0; color: #334155; }

/* ── bang xep hang ── */
.g-bxh { width: 100%; border-collapse: collapse; font-size: 14px; }
.g-bxh th, .g-bxh td { text-align: left; padding: 8px 10px;
  border-bottom: 1px solid var(--n9-vien, #e2e8f0); }
.g-bxh th { font-size: 11px; text-transform: uppercase; letter-spacing: 1px; opacity: .6; }
.g-bxh td:first-child { width: 48px; font-variant-numeric: tabular-nums; opacity: .6; }
.g-bxh td.so { text-align: right; font-variant-numeric: tabular-nums; }
.g-bxh tbody tr:nth-child(-n+3) td:first-child { color: #d8a12a; font-weight: 700; }
.g-trong { opacity: .6; font-size: 14px; padding: 18px 0; }

/* ── tien do nguoi choi (sao tren the, ho so o /account/) ── */
.g-tiendo { margin-left: 6px; font-size: 13px; letter-spacing: -1px; }
.g-the.g-xong { border-color: #5d9c35; }
.g-hs { border: 2px solid var(--n9-vien, #cbd5e1); border-radius: 4px; padding: 16px; }
.g-hs--khach b { display: block; font-size: 17px; margin-bottom: 6px; }
.g-hs--khach p { margin: 0; opacity: .75; font-size: 14.5px; }
.g-hs__so { display: grid; gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); margin-bottom: 18px; }
.g-hs__so b { display: block; font-size: 24px; line-height: 1.1;
  font-variant-numeric: tabular-nums; }
.g-hs__so span { font-size: 11px; text-transform: uppercase; letter-spacing: .8px;
  opacity: .6; }
.g-hs__nhan { margin: 0 0 10px; font-size: 15px; }
.g-hs__nhan small { font-weight: 400; opacity: .6; margin-left: 4px; }
.g-huys { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
.g-huys li { border: 2px solid var(--n9-vien, #e2e8f0); border-radius: 4px;
  padding: 8px 10px; }
.g-huys li.co { border-color: #d8a12a; }
.g-huys li.chua { opacity: .48; }
.g-huys b { display: block; font-size: 14px; }
.g-huys span { font-size: 12px; opacity: .72; }

/* ⛔⛔ `min-height` KHONG co tac dung tren `<a>`: the neo mac dinh la `inline`, ma
   `min-height` chi ap cho khoi. Do that 15/11: nut "All levels"/"Leaderboard" (deu la
   `<a class="g-btn">`) chi cao **33-34px** du CSS ghi `min-height:44px`.
   Phai dat `inline-flex` thi moi thanh khoi va an dung chieu cao cham. */
/* g-btn-inline-fix */
a.g-btn { display: inline-flex; align-items: center; justify-content: center; }
/* ⛔ Breadcrumb tren dien thoai: "Home" chi cao 17px — qua be de cham. Noi rong o cham
   bang padding doc, KHONG doi co chu (chuan breadcrumb mang luoi la 14px). */
@media (max-width: 899px) {
  .g-vun a, .g-vun li { display: inline-block; padding-block: 12px; }
  .g-vun ol { margin-bottom: 6px; }
}

/* ── tim kiem ── */
.g-sbox { display: flex; align-items: center; gap: 8px; margin: 0 0 16px;
  border: 2px solid var(--n9-vien, #cbd5e1); border-radius: 999px; padding: 4px 6px 4px 14px; }
.g-sbox svg { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor;
  stroke-width: 2; opacity: .55; }
.g-sbox input { flex: 1 1 auto; min-width: 0; border: 0; background: transparent;
  font: inherit; font-size: 15px; color: inherit; padding: 10px 0; outline: none; }
.g-sbox .g-btn { border-radius: 999px; }
.g-loc { display: flex; flex-direction: column; gap: 8px; margin-bottom: 18px; }
.g-locnhom { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.g-locnhom > span { font-size: 11px; text-transform: uppercase; letter-spacing: 1px;
  opacity: .55; min-width: 74px; }
.g-chip { display: inline-flex; align-items: center; gap: 5px; text-decoration: none;
  color: inherit; font-size: 13px; padding: 7px 12px; border-radius: 999px;
  border: 2px solid var(--n9-vien, #e2e8f0); min-height: 36px; }
.g-chip:hover { border-color: #5d9c35; }
.g-chip.on { background: #5d9c35; border-color: #3f7222; color: #fff; }
.g-chip b { font-weight: 700; opacity: .72; font-variant-numeric: tabular-nums; }
.g-chip.on b { opacity: .9; }
/* tim trong TUNG danh muc — ngay canh tieu de chuong */
.g-timcat { font-size: 12.5px; text-decoration: none; color: #2563eb;
  border: 2px solid var(--n9-vien, #e2e8f0); border-radius: 999px;
  padding: 5px 10px; white-space: nowrap; display: inline-flex; align-items: center;
  gap: 5px; min-height: 34px; }
.g-timcat:hover { border-color: #5d9c35; }
@media (max-width: 899px) { .g-chip, .g-timcat { min-height: 40px; } }

/* danh sach o /sitemap/ */
.g-ds { list-style: none; padding: 0; margin: 0 0 18px; display: grid; gap: 4px;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.g-ds li { padding: 7px 0; }
.g-ds a { color: #2563eb; text-decoration: none; }
.g-ds a:hover { text-decoration: underline; }
.g-ds span { font-size: 12px; opacity: .6; margin-left: 6px; }