/* capes.9minecraft.net — phan bo sung 07/10/2026:
   logo anh · mega menu (chep mo hinh cua 9minecraft/servers) · the cape xem 3D · kim cuong that.
   Van giu dung Floating UI: the noi tren bong mem, khong vien, nut vien thuoc. */

/* ------------------------------------------------------------------ logo anh */
.logo img { height: 26px; width: auto; display: block; }
@media (max-width: 720px) { .logo img { height: 22px; } }

/* --------------------------------------------------------------- mega menu
   So do lay dung tu `bundle-global.css` cua 9minecraft (qua bedrock-servers/app/megamenu.js),
   khong tu dat: top 84px · rail 320px · gap 0 · left = max(16px,(100vw-1280px)/2-99px).
   Mo hinh tuong tac cung chep nguyen: hamburger CLICK mo rail; rail item MOUSEENTER mo flyout;
   roi chuot KHONG lam gi; vao muc khac thi doi ngay; x tren flyout dong flyout;
   backdrop/Esc/x dong ca rail. ⛔ KHONG dat bo dem thoi gian kieu hover-intent — ho ghi ro
   250ms khong du cho chuot di cham qua khe 16px, flyout bien mat giua chung. */
:root {
  --ymega-top: 84px;
  --ymega-rail-w: 320px;
  --ymega-left: max(16px, calc((100vw - 1280px) / 2 - 8px));
}
.ybd {
  position: fixed; inset: 0; z-index: 60; background: rgba(32, 33, 36, .45);
  opacity: 0; pointer-events: none; transition: opacity .18s;
}
body.ymega-open .ybd { opacity: 1; pointer-events: auto; }

.ymega {
  display: flex; flex-direction: column; position: fixed; top: var(--ymega-top);
  left: calc(0px - var(--ymega-rail-w) - 16px); width: var(--ymega-rail-w);
  max-height: calc(100vh - var(--ymega-top) - 16px); z-index: 61;
  background: var(--the); box-shadow: var(--bong-cao); border-radius: var(--r-lon);
  padding: 10px; transition: left .2s ease; overflow: visible;
}
body.ymega-open .ymega { left: var(--ymega-left); }
.ymega .dau {
  display: flex; align-items: center; gap: 10px; padding: 6px 10px 10px;
}
.ymega .dau b { font-weight: 500; font-size: 13px; }
.ymega .dau .x { margin-left: auto; }

.ylist { list-style: none; margin: 0; padding: 0; overflow-y: auto; }
.ylist > li { position: relative; }
.ylist > li > a, .ylist > li > button {
  display: flex; align-items: center; gap: 10px; width: 100%; border: 0; cursor: pointer;
  background: transparent; color: var(--chu); font: inherit; font-size: 13.5px;
  text-align: left; padding: 11px 14px; border-radius: 999px;
}
.ylist > li > a:hover, .ylist > li > button:hover,
.ylist > li.ymega-active > button { background: var(--nhan-nen); color: var(--nhan);
                                    text-decoration: none; }
.ylist .mui { margin-left: auto; color: var(--xam); font-size: 11px; }

/* flyout — dat canh rail, dung chung moc toa do voi rail */
.ysub {
  position: fixed; top: var(--ymega-top);
  left: calc(var(--ymega-left) + var(--ymega-rail-w) + 12px);
  width: clamp(360px, calc(100vw - var(--ymega-left) - var(--ymega-rail-w) - 48px), 820px);
  max-height: calc(100vh - var(--ymega-top) - 16px); overflow-y: auto;
  padding: 18px 20px 22px; background: var(--the); box-shadow: var(--bong-cao);
  border-radius: var(--r-lon); z-index: 62;
  opacity: 0; visibility: hidden; transform: translateX(-8px);
  transition: opacity .16s, transform .16s;
}
.ylist > li.ymega-active > .ysub { opacity: 1; visibility: visible; transform: translateX(0); }
.ysub .dau2 { display: flex; align-items: center; margin-bottom: 12px; }
.ysub h3 {
  margin: 0; font-size: 11px; font-weight: 500; text-transform: uppercase;
  letter-spacing: .9px; color: var(--xam);
}
.ysub .x { margin-left: auto; }
.ychip { display: flex; flex-wrap: wrap; gap: 8px; }
.ychip a {
  background: var(--bg); color: var(--chu); border-radius: 999px; padding: 8px 14px;
  font-size: 13px;
}
.ychip a:hover { background: var(--nhan-nen); color: var(--nhan); text-decoration: none; }
.ychip a .n { color: var(--xam-nhat); font-size: 11px; margin-left: 6px; }

@media (max-width: 860px) {
  .ymega { width: min(330px, 88vw); --ymega-left: 12px; }
  .ysub {
    position: static; width: auto; max-height: none; box-shadow: none; padding: 4px 8px 12px;
    opacity: 1; visibility: visible; transform: none; display: none; border-radius: 0;
  }
  .ylist > li.ymega-active > .ysub { display: block; }
}

/* ------------------------------------------------------- nguoi deo cape, xem 3D
   Than nguoi = MOT anh dung chung (`/assets/nguoi.png`) da nuong san goc nhin
   6deg/-24deg; cape van la 3D that (3 mat) nen con be day va con nhuc nhich.
   ⛔ Moi do dai o day deu tinh bang `cqh` (1% chieu cao cua .pv3) chu khong phai px:
      the cape co gian theo be ngang man hinh, de px co dinh thi dien thoai bi cat cut
      con man rong thi nguoi be xiu. Khung canh danh dinh 128x252 px = 50.7937 x 100 cqh.
   ⛔ Sua so thi phai chay lai `_dung_anh_nguoi.py` — anh va CSS chung mot nguon so
      (`_nguoi_hinh_hoc.py`), lech nhau mot chut la cape roi khoi lung nguoi. */
.pv3 {
  border-radius: var(--r-anh); background: var(--bg); aspect-ratio: 10 / 16;
  margin-bottom: 12px; display: grid; place-items: center;
  perspective: 166.667cqh; overflow: hidden; container-type: size;
}
/* ⛔ KHONG dat ten lop la `.sanh`/`.than`: `app.css` DA co `.sanh` toan cuc cho khung
   xem 3D o trang chi tiet (`perspective:900px; overflow:hidden; cursor:grab`). The
   cape se an nham ca ba: phoi canh LONG NHAU (khac luc ket xuat anh than nguoi), cape
   bi cat, va con tro chuot thanh "ban tay keo" tren moi the. */
.pv3 .ng-canh {
  position: relative; width: 50.7937cqh; height: 100cqh;
  transform-style: preserve-3d;
}
/* than nguoi: anh phang, khong tham gia 3D — no DA la ban chieu cua canh 3D */
.pv3 .ng-than {
  position: absolute; inset: 0; image-rendering: pixelated;
  background: url(/assets/nguoi.png) center / 100% 100% no-repeat;
}
/* cape: tam 10x16 treo ngang vai, nhich ra sau lung.
   ⛔ `translate3d` phai dung TRUOC `rotateY`: lam nguoc thi phep tinh tien chay theo
      truc DA XOAY, cape lech ngang khoi lung nguoi. */
.pv3 .h3 {
  position: absolute; left: 25.3968cqh; top: 44.4444cqh;
  width: 27.7778cqh; height: 44.4444cqh; margin-left: -13.8889cqh; margin-top: -22.2222cqh;
  transform-style: preserve-3d;
  transform: translate3d(0, 5.5556cqh, 6.9444cqh) rotateX(6deg) rotateY(-24deg);
  transition: transform .25s ease;
}
/* ⛔ KHONG xoay rieng cape khi tro chuot nua: than nguoi la anh phang, xoay mot minh
   cape la no truot khoi lung. Thay bang viec cape bay nhe ra khoi lung. */
.card:hover .pv3 .h3, .card:focus-visible .pv3 .h3 {
  transform: translate3d(0, 5.5556cqh, 11.3889cqh) rotateX(6deg) rotateY(-24deg);
}
.pv3 .m {
  position: absolute; image-rendering: pixelated; background-repeat: no-repeat;
  background-size: 177.778cqh 88.8889cqh;
}
/* ⛔ Ba mat deu neo o goc TREN-TRAI cua `.h3`, nen phai xoay quanh CANH CHUNG bang
   `transform-origin`. Xoay kieu hop can giua thi hai mat phu bi day ra thanh hai net
   gach roi khoi khoi (chi nhin anh chup moi thay). */
.pv3 .m-ngoai { width: 27.7778cqh; height: 44.4444cqh; left: 0; top: 0;
                background-position: -2.7778cqh -2.7778cqh; }
.pv3 .m-trai { width: 2.7778cqh; height: 44.4444cqh; left: 0; top: 0;
               background-position: -30.5556cqh -2.7778cqh;
               transform-origin: left center; transform: rotateY(90deg); }
.pv3 .m-tren { width: 27.7778cqh; height: 2.7778cqh; left: 0; top: 0;
               background-position: -2.7778cqh 0;
               transform-origin: center top; transform: rotateX(90deg); }

/* ------------------------------------------------- kim cuong that cua 9minecraft */
.sao button { padding: 2px; }
.sao i {
  display: block; width: 26px; height: 26px; background-size: contain;
  background-repeat: no-repeat; background-position: center;
  background-image: url(/assets/diamond-off.svg);
  filter: grayscale(1) opacity(.45);
}
.sao button.day i { background-image: url(/assets/diamond-on.svg); filter: none; }

/* --------------------------- nut sang/toi: cap icon mat troi / mat trang
   Co che chep nguyen tu `bundle-global.css` cua 9minecraft.net:
     .theme-toggle .theme-icon-moon{display:none}
     .theme-toggle .theme-icon-sun{display:block}
     [data-theme="dark"] ... doi nguoc lai
   ⛔ Site nay con ho tro "theo he thong" (khong co thuoc tinh data-theme nao). Thieu khoi
      @media duoi day thi o che do toi cua he dieu hanh nut van hien MAT TROI — sai nghia. */
.theme-toggle .theme-icon-sun, .theme-toggle .theme-icon-moon { pointer-events: none; }
.theme-toggle .theme-icon-moon { display: none; }
.theme-toggle .theme-icon-sun { display: block; }
:root[data-theme="dark"] .theme-toggle .theme-icon-sun { display: none; }
:root[data-theme="dark"] .theme-toggle .theme-icon-moon { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme-toggle .theme-icon-sun { display: none; }
  :root:not([data-theme="light"]) .theme-toggle .theme-icon-moon { display: block; }
}
.theme-toggle svg { width: 20px; height: 20px; }

/* ------------------------------------------- muc giai thich o trang Cape Editor
   ⛔ KHONG dung lai `.doi` cua trang chi tiet: no la `420px 1fr` (cot ben + noi dung).
      Hai the giai thich can hai cot BANG NHAU, dung `.doi` thi cot trai bi ep 420px. */
.doi-deu { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-items: start; }
@media (max-width: 860px) { .doi-deu { grid-template-columns: 1fr; } }
.danh-sach { margin: 10px 0 0; padding: 0 0 0 18px; color: var(--xam); line-height: 1.65; }
.danh-sach li { margin: 0 0 12px; }
.danh-sach li:last-child { margin-bottom: 0; }
.danh-sach b { color: var(--chu); font-weight: 500; }
/* ⛔ `.nut.on` TRUOC DAY khong co quy tac nao, du markup van gan lop `on` cho cong cu dang
   chon: Pencil/Fill/Eraser/Picker trong y het nhau, khong biet dang dung cai gi. */
.nut.on { background: var(--nhan-nen); color: var(--nhan-dam); }
.nut:disabled { opacity: .45; cursor: default; }
.nut:disabled:hover { background: var(--bg); color: var(--chu); }

/* ------------------------------------------- bang chon mau trong trang (Cape Editor)
   O vuong do-tuoi/do-sang + dai sac, thuan CSS gradient, khong canvas.
   ⛔ Cham chon phai `pointer-events:none`: no nam tren o mau, khong tat thi keo tu dung cham
      la su kien roi vao chinh cham -> toa do nhay, mau giat. */
.chon-mau { margin: 10px 0 12px; }
.o-sv {
  position: relative; height: 128px; border-radius: 12px; cursor: crosshair;
  background:
    linear-gradient(to top, #000, rgba(0,0,0,0)),
    linear-gradient(to right, #fff, var(--sac, #1a73e8));
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.08);
  touch-action: none;
}
.o-hue {
  position: relative; height: 14px; border-radius: 999px; margin-top: 10px; cursor: ew-resize;
  background: linear-gradient(to right, #f00 0%, #ff0 17%, #0f0 33%, #0ff 50%,
              #00f 67%, #f0f 83%, #f00 100%);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.08);
  touch-action: none;
}
.o-sv .cham, .o-hue .cham {
  position: absolute; pointer-events: none; border-radius: 50%;
  border: 2px solid #fff; box-shadow: 0 1px 4px rgba(0,0,0,.45);
}
.o-sv .cham { width: 14px; height: 14px; margin: -7px 0 0 -7px; }
.o-hue .cham { width: 18px; height: 18px; top: 50%; margin: -9px 0 0 -9px;
               background: var(--sac, #1a73e8); }
.o-sv:focus-visible, .o-hue:focus-visible { outline: 2px solid var(--nhan); outline-offset: 2px; }
.xem-mau {
  width: 34px; height: 34px; border-radius: 10px; flex: 0 0 34px;
  background: var(--mau-dang, #1a73e8); box-shadow: inset 0 0 0 1px rgba(0,0,0,.1);
}
#mau-hex {
  flex: 1; height: 34px; border: 0; border-radius: 999px; background: var(--bg);
  color: var(--chu); padding: 0 14px; font: inherit; font-size: 13px;
  font-variant-numeric: tabular-nums;
}
#mau-hex:focus-visible { outline: 2px solid var(--nhan); outline-offset: 1px; }