/* LÕI — khung ứng dụng kiểu điện thoại (HOP-DONG mục 17). Nạp sau theme.css và ui.css.
   Một giao diện cho cả 3 loại máy: điện thoại dọc (kieu-doc), điện thoại ngang (kieu-ngang),
   PC = khung điện thoại đặt giữa cửa sổ (khung-pc + khung-ngang | khung-doc | khung-toan). */

/* ---------- Kích thước chuẩn (token) ---------- */
:root {
  --co-1: 11px; --co-2: 12.5px; --co-3: 14px; --co-4: 16px; --co-5: 19px; --co-6: 24px;   /* cỡ chữ */
  --cham: 44px; --cham-nho: 36px;                                                     /* vùng chạm */
  --k1: 4px; --k2: 8px; --k3: 12px; --k4: 16px; --k5: 24px;                          /* khoảng cách */
  --bo-1: 10px; --bo-2: 14px; --bo-3: 20px;                                           /* bo góc */
  --cao-dau: 52px; --cao-nav: 56px; --rong-nav: 74px; --cao-thanh-choi: 44px;       /* thanh trên, thanh điều hướng */
  --an-tren: env(safe-area-inset-top, 0px); --an-duoi: env(safe-area-inset-bottom, 0px);
  --an-trai: env(safe-area-inset-left, 0px); --an-phai: env(safe-area-inset-right, 0px);
  --app-w: 100vw; --app-h: 100vh;   /* lõi ghi đè bằng cỡ khung thật (px) */
  --nen-app: #fbf9fa;
}
.kieu-ngang { --cao-dau: 46px; --cao-thanh-choi: 40px; }
.khung-pc { --an-tren: 0px; --an-duoi: 0px; --an-trai: 0px; --an-phai: 0px; }
html:not(.theme-trang) { --vien: #e6e0ff; --hong-nhat: #ece6ff; --nen-app: transparent; }

/* ---------- Khung ---------- */
html, body { height: 100%; overflow: hidden; overscroll-behavior: none; }
body { position: fixed; inset: 0; touch-action: manipulation; }
#khung-app { position: fixed; inset: 0; overflow: hidden; contain: layout paint; font-size: var(--co-3); background: var(--nen-app); }
.dang-tai { display: grid; place-items: center; height: 100%; font: 700 var(--co-4) var(--font); color: var(--chu-nhat); }
/* PC: khung điện thoại giữa cửa sổ */
.khung-pc body { background: radial-gradient(900px 600px at 20% 10%, #ffe3ee 0%, transparent 60%), radial-gradient(800px 600px at 85% 90%, #f3e6ff 0%, transparent 60%), #f6eff2; }
html.khung-pc:not(.theme-trang) body { background: #1c1440; }
html.khung-pc:not(.theme-trang) #khung-app { background: radial-gradient(1200px 700px at 15% 10%, #8a6bff 0%, transparent 60%), linear-gradient(135deg, var(--nen), var(--nen-2)); }
.khung-pc #khung-app { margin: auto; border-radius: 22px; box-shadow: 0 24px 60px rgba(42, 34, 48, .18), 0 0 0 1px rgba(42, 34, 48, .06); }
.khung-ngang #khung-app { width: min(calc(100vw - 32px), 1280px); height: min(calc(100vh - 32px), 800px); }
.khung-doc #khung-app { width: min(calc(100vw - 32px), 430px); height: min(calc(100vh - 32px), 900px); }
.khung-toan #khung-app { width: auto; height: auto; border-radius: 0; box-shadow: none; }
@media (max-width: 760px), (max-height: 500px) {
  .khung-ngang #khung-app, .khung-doc #khung-app { width: 100vw; height: 100vh; border-radius: 0; box-shadow: none; }
}
.app-than, .th-hop, .bb-than { scrollbar-width: thin; scrollbar-color: var(--vien) transparent; }

/* ---------- Nút, ô chọn: gọn ---------- */
.th-nut { font-size: var(--co-3); padding: .62em 1.15em; }
.th-nut.nho { font-size: var(--co-2); padding: .48em .9em; }
.th-nut.lon { font-size: var(--co-4); padding: .72em 1.4em; }
.th-nut.tron { width: 2.6em; height: 2.6em; padding: 0; }
.th-nut.tron.nho { width: var(--cham-nho); height: var(--cham-nho); min-width: var(--cham-nho); min-height: var(--cham-nho); font-size: 13px; flex: none; position: relative; }
.th-nut.tron.nho::after { content: ''; position: absolute; inset: -4px; }   /* vùng chạm 44px */
.th-o-nhap { font-size: var(--co-4); padding: .55em .8em; border-width: 1.5px; }
/* Ô chọn kiểu "segmented" */
.nhom-chon { display: inline-flex; flex-wrap: wrap; gap: 2px; padding: 3px; border-radius: 19px; background: var(--mat-2); max-width: 100%; overflow-x: auto; scrollbar-width: none; align-self: flex-start; }
.nhom-chon::-webkit-scrollbar { display: none; }
.nhom-chon button, .theme-trang .nhom-chon button { border: 0; background: transparent; color: var(--chu-nhat); border-radius: 999px; padding: 0 12px; height: 32px; min-height: 32px;
  font: 700 var(--co-2) var(--font); white-space: nowrap; flex: none; cursor: pointer; position: relative; }
.nhom-chon button::after { content: ''; position: absolute; inset: -6px 0; }
.nhom-chon button.bat, .theme-trang .nhom-chon button.bat { background: var(--chinh); color: #fff; box-shadow: 0 1px 4px rgba(42, 34, 48, .15); }
.cham .nhom-chon button { min-height: 32px; }

/* ---------- Thanh trên ---------- */
.app-dau { grid-area: dau; display: flex; align-items: center; gap: var(--k2); min-width: 0;
  height: calc(var(--cao-dau) + var(--an-tren)); padding: var(--an-tren) calc(var(--k3) + var(--an-phai)) 0 calc(var(--k3) + var(--an-trai));
  background: var(--mat); border-bottom: 1px solid var(--vien); z-index: 3; }
.app-tieu-de { flex: 1; min-width: 0; margin: 0; font-size: var(--co-5); font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.app-dau .logo { flex: 1; min-width: 0; display: flex; align-items: center; gap: var(--k2); color: var(--chu); }
.app-dau .logo img { height: 32px; width: auto; display: block; }
.kieu-ngang .app-dau .logo img { height: 28px; }
/* Logo co lại khi đầu sảnh hẹp (không bị đồng xu che); bản chữ trắng logo-toi chỉ hiện ở theme Tối */
.app-dau .logo img { max-width: 100%; object-fit: contain; object-position: left center; }
.app-dau .logo img.logo-toi, .bang-toi .app-dau .logo:has(.logo-toi) img.logo-sang { display: none; }
.bang-toi .app-dau .logo img.logo-toi { display: block; }
.app-dau .logo .huy-hieu { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; background: var(--chinh); color: #fff; flex: none; }
.app-dau .logo .huy-hieu svg { width: 20px; height: 20px; }
.app-dau .logo h1 { margin: 0; font-size: var(--co-4); font-weight: 900; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.app-dau-phai { display: flex; align-items: center; gap: 6px; flex: none; }
.chip-xu { display: inline-flex; align-items: center; gap: 4px; height: 32px; padding: 0 10px; border: 0; border-radius: 999px; background: var(--mat-2);
  font: 800 var(--co-2) var(--font); color: var(--chu); cursor: pointer; white-space: nowrap; }
.chip-xu .th-ic { color: var(--vang); }
.nut-av { border: 0; background: none; padding: 0; width: var(--cham-nho); height: var(--cham-nho); border-radius: 50%; cursor: pointer; flex: none; display: grid; place-items: center; }
.nut-av .th-av { --av: 34px; box-shadow: 0 0 0 2px var(--hong-nhat); }
.nut-ngon-ngu span { font-size: var(--co-1); font-weight: 900; letter-spacing: .02em; }

/* ---------- Màn kiểu ứng dụng (sảnh, phòng) ---------- */
.man.man-app { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr) auto; grid-template-areas: "dau" "than" "nav"; background: var(--nen-app); overflow: hidden; padding: 0; }
.kieu-ngang .man.sanh.man-app { grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); grid-template-areas: "nav dau" "nav than"; }
.kieu-ngang .sanh .app-dau { padding-left: var(--k4); }
.man.phong.man-app { grid-template-areas: "dau" "than" "chan"; }
.app-than { grid-area: than; min-height: 0; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; overscroll-behavior: contain;
  display: flex; flex-direction: column; gap: var(--k3); padding: var(--k3) calc(var(--k3) + var(--an-phai)) var(--k4) calc(var(--k3) + var(--an-trai)); }
.kieu-ngang .sanh .app-than { padding-left: var(--k4); padding-bottom: calc(var(--k3) + var(--an-duoi)); }
.app-chan { grid-area: chan; background: var(--mat); border-top: 1px solid var(--vien); padding: var(--k2) calc(var(--k3) + var(--an-phai)) calc(var(--k2) + var(--an-duoi)) calc(var(--k3) + var(--an-trai)); }
.app-chan .nut-hang { display: flex; gap: var(--k2); margin: 0; }
.app-chan .nut-hang .th-nut { flex: 1 1 0; min-width: 0; }
.kieu-ngang .app-chan .nut-hang { justify-content: flex-end; } .kieu-ngang .app-chan .nut-hang .th-nut { flex: 0 1 220px; }
.app-the { flex: none; background: var(--mat); border-radius: var(--bo-3); box-shadow: inset 0 0 0 1px var(--vien); padding: var(--k3); min-width: 0; }
.app-the h3 { display: flex; align-items: center; gap: var(--k2); margin: 0 0 var(--k2); font-size: var(--co-4); font-weight: 800; }
.app-the h3 .th-ic { color: var(--chinh); }
.app-goi-y { margin: 0 0 var(--k3); color: var(--chu-nhat); font-size: var(--co-2); line-height: 1.4; }
.hai-cot { display: flex; flex-direction: column; gap: var(--k3); min-height: 0; }
.kieu-ngang .hai-cot { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; flex: 1; }

/* ---------- Thanh điều hướng: dưới (dọc) / cột trái (ngang) ---------- */
.app-nav { grid-area: nav; display: flex; align-items: stretch; background: var(--mat); border-top: 1px solid var(--vien); z-index: 3;
  height: calc(var(--cao-nav) + var(--an-duoi)); padding: 0 var(--an-phai) var(--an-duoi) var(--an-trai); }
.kieu-ngang .app-nav { flex-direction: column; justify-content: center; gap: 4px; height: auto; width: calc(var(--rong-nav) + var(--an-trai));
  border-top: 0; border-right: 1px solid var(--vien); padding: calc(6px + var(--an-tren)) 0 calc(6px + var(--an-duoi)) var(--an-trai); }
.nav-o, .man-app .app-nav .th-nut.bb-nut { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  border: 0; border-radius: 0; background: none; box-shadow: none; color: var(--chu-nhat); font: 700 var(--co-1)/1.1 var(--font); padding: 4px 2px; min-height: var(--cham);
  cursor: pointer; position: relative; transform: none; filter: none; }
.kieu-ngang .nav-o, .kieu-ngang .man-app .app-nav .th-nut.bb-nut { flex: 0 0 auto; height: 56px; }
.nav-o > .th-ic, .man-app .app-nav .bb-nut > .th-ic { padding: 4px 16px; border-radius: 999px; transition: background .15s; }
.nav-o .th-ic svg, .man-app .app-nav .bb-nut .th-ic svg { width: 22px; height: 22px; }
.nav-o > span, .man-app .app-nav .bb-nut .bb-chu { display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav-o.bat { color: var(--chinh); }
.nav-o.bat > .th-ic { background: var(--hong-nhat); }
.tb-pc .nav-o:hover, .tb-pc .man-app .app-nav .bb-nut:hover { color: var(--chu); }
.man-app .app-nav .bb-nut .bb-dem { top: 2px; right: calc(50% - 26px); }
.kieu-ngang .man-app .app-nav .bb-nut .bb-dem { top: 4px; }

/* ---------- Trang Trò chơi ---------- */
.app-loc { display: flex; gap: 6px; flex: none; overflow-x: auto; scrollbar-width: none; margin: 0 calc(-1 * var(--k3)); padding: 2px var(--k3); }
.app-loc::-webkit-scrollbar { display: none; }
.chip { flex: none; height: 32px; padding: 0 14px; border: 0; border-radius: 999px; background: var(--mat); box-shadow: inset 0 0 0 1.5px var(--vien);
  color: var(--chu-nhat); font: 700 var(--co-2) var(--font); cursor: pointer; position: relative; white-space: nowrap; }
.chip::after { content: ''; position: absolute; inset: -6px 0; }
.chip.bat { background: var(--chinh); color: #fff; box-shadow: none; }
.nv-gon { flex: none; display: flex; align-items: center; gap: var(--k2); height: var(--cham); padding: 0 var(--k3); border: 0; border-radius: var(--bo-2);
  background: var(--mat); box-shadow: inset 0 0 0 1px var(--vien); font: inherit; color: var(--chu); cursor: pointer; text-align: left; min-width: 0; }
.nv-gon > .th-ic:first-child { color: var(--chinh); }
.nv-gon > .th-ic:last-child { color: var(--chu-nhat); }
.nv-gon b { font-size: var(--co-2); white-space: nowrap; }
.nv-gon-ten { flex: 1; min-width: 0; font-size: var(--co-2); color: var(--chu-nhat); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nv-cham { display: flex; gap: 3px; flex: none; }
.nv-cham i { width: 14px; height: 6px; border-radius: 3px; background: linear-gradient(90deg, var(--chinh) var(--p), var(--hong-nhat) var(--p)); }
.nv-cham i.xong { background: var(--la); }
.nv-gon-so { font: 800 var(--co-2) var(--font); color: var(--chinh); flex: none; }
.kieu-doc .nv-gon b { display: none; }
.app-luoi { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: var(--k3) 10px; align-content: start; }
.kieu-ngang .app-luoi { grid-template-columns: repeat(auto-fill, minmax(124px, 1fr)); }
.kieu-ngang .trang-tro { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-content: start; align-items: center; }
.kieu-ngang .trang-tro .app-luoi { grid-column: 1 / -1; }
.kieu-ngang .trang-tro .app-loc { margin-right: 0; }
.kieu-ngang .trang-tro .nv-gon { height: 36px; }
.kieu-ngang .trang-tro .nv-gon-ten { display: none; }
.khung-pc.kieu-ngang .app-luoi { grid-template-columns: repeat(auto-fill, minmax(176px, 1fr)); gap: var(--k4) 14px; }
.o-tro { display: flex; flex-direction: column; gap: 5px; border: 0; padding: 0; background: none; font: inherit; color: var(--chu); cursor: pointer; text-align: left; position: relative; min-width: 0; container-type: inline-size; }
.o-bia { display: block; width: 100%; aspect-ratio: 8 / 5; border-radius: var(--bo-2); background-color: var(--mat-2); background-repeat: no-repeat; --rong-anh: 100cqw;
  box-shadow: 0 2px 8px rgba(42, 34, 48, .10); transition: transform .15s, box-shadow .15s; }
.o-bia.khong-anh { display: grid; place-items: center; background: linear-gradient(150deg, var(--a), var(--b)); color: #fff; }
.o-bia.khong-anh svg { width: 38%; height: auto; }
.o-tro:active .o-bia { transform: scale(.96); }
.tb-pc .o-tro:hover .o-bia { transform: translateY(-2px); box-shadow: 0 8px 18px rgba(42, 34, 48, .16); }
.o-ten { font: 700 var(--co-2)/1.25 var(--font); padding: 0 2px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.khung-pc.kieu-ngang .o-ten { font-size: var(--co-3); }
.o-nhan { position: absolute; top: 6px; right: 6px; font: 800 10px/1 var(--font); padding: 4px 7px; border-radius: 999px; background: var(--mat); color: var(--chu); box-shadow: var(--bong); }
.o-nhan.moi { background: var(--chinh); color: #fff; }
.o-tro.sap-co .o-bia { filter: saturate(.4) opacity(.8); }
.luoi-nho { grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)) !important; gap: 10px 8px !important; }
.o-tro.nho { gap: 3px; } .o-tro.nho .o-ten { font-size: var(--co-1); }
.o-tro.nho .o-bia { border-radius: var(--bo-1); }

/* ---------- Trang Phòng ---------- */
.hang-ma { display: flex; gap: var(--k2); }
.o-ma { flex: 1; min-width: 0; height: var(--cham); padding: 0 8px; font-size: 20px; font-weight: 800; letter-spacing: .25em; text-transform: uppercase; text-align: center; }
.hang-ma .th-nut { flex: none; min-width: 84px; }
.o-ma::placeholder { font-size: var(--co-3); letter-spacing: .08em; font-weight: 600; color: var(--chu-nhat); opacity: .7; }
.kieu-ngang .trang-phong { display: grid; grid-template-columns: minmax(230px, 34%) minmax(0, 1fr); align-items: start; align-content: start; }

/* ---------- Trang Nhiệm vụ ---------- */
.seg-trang { display: flex; width: 100%; flex: none; }
.seg-trang button { flex: 1 1 0; }
.kieu-ngang .seg-trang { display: none; }
.kieu-doc .trang-nhiemVu.xem-homNay .cot-thanhTich, .kieu-doc .trang-nhiemVu.xem-thanhTich .cot-homNay { display: none; }
.kieu-ngang .trang-nhiemVu .hai-cot { height: 100%; align-items: stretch; }
.kieu-ngang .trang-nhiemVu .app-the { overflow-y: auto; min-height: 0; }
.dong-nv, .dong-tt { display: flex; align-items: center; gap: 10px; padding: 8px 2px; border-top: 1px solid var(--vien); min-height: 52px; }
.dong-tt { width: 100%; border-left: 0; border-right: 0; border-bottom: 0; background: none; font: inherit; color: inherit; text-align: left; cursor: pointer; }
.app-the h3 + .dong-nv, .app-the h3 + .dong-tt { border-top: 0; }
.dn-ic { width: 34px; height: 34px; border-radius: 10px; background: var(--mat-2); color: var(--chinh); display: grid; place-items: center; flex: none; }
.dn-ic svg { width: 20px; height: 20px; }
.dong-nv.xong .dn-ic { background: color-mix(in srgb, var(--la) 14%, #fff); color: var(--la); }
.dn-giua { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.dn-giua b { font-size: var(--co-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.thanh-tien { display: block; height: 6px; border-radius: 3px; background: var(--hong-nhat); overflow: hidden; }
.thanh-tien i { display: block; height: 100%; background: var(--chinh); border-radius: 3px; }
.dong-nv.xong .thanh-tien i { background: var(--la); }
.dn-so { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; flex: none; font-size: var(--co-1); font-weight: 700; color: var(--chu-nhat); }
.dn-xu { display: inline-flex; align-items: center; gap: 3px; color: var(--cam); font-size: var(--co-2); }
.dn-xu .th-ic { color: var(--vang); }
.dong-tt > .th-ic:last-child { color: var(--chu-nhat); }

/* ---------- Trang Tôi ---------- */
.hs-dong { display: flex; align-items: center; gap: var(--k3); }
.hs-av.th-av { --av: 56px; box-shadow: 0 0 0 3px var(--hong-nhat); }
.hs-ten { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; min-width: 0; }
.hs-ten b { font-size: var(--co-5); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hs-ten small { color: var(--chu-nhat); font-size: var(--co-2); }
.hs-ten .chip-xu { height: 24px; cursor: default; }
.hs-nut { display: flex; gap: var(--k2); flex-wrap: wrap; margin-top: var(--k3); }
.kieu-ngang .trang-toi .hai-cot { grid-template-columns: minmax(220px, 34%) minmax(0, 1fr); height: 100%; }
.kieu-ngang .trang-toi .the-cai-dat { overflow-y: auto; max-height: 100%; }
.ds-cai-dat .dong-cau-hinh { display: flex; flex-direction: column; flex-wrap: nowrap; align-items: stretch; gap: 6px; margin: 0; padding: 9px 0; border-top: 1px solid var(--vien); }
.ds-cai-dat .dong-cau-hinh:first-child { border-top: 0; padding-top: 0; }
.ds-cai-dat .dong-cau-hinh > label { min-width: 0; font-size: var(--co-2); font-weight: 700; color: var(--chu-nhat); }
.ds-cai-dat .app-goi-y { margin: 0; font-size: var(--co-1); }
.ds-cai-dat .phien-ban { margin-top: var(--k2); }
.kieu-ngang .ds-cai-dat { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: var(--k4); }
.kieu-ngang .ds-cai-dat .dong-cau-hinh:nth-child(2) { border-top: 0; padding-top: 0; }
.kieu-ngang .ds-cai-dat .phien-ban { grid-column: 1 / -1; }
.thanh-am { width: 100%; height: 28px; accent-color: var(--chinh); margin: 0; }

/* ---------- Hộp thoại: tấm trượt từ dưới (dọc), hộp giữa (ngang) ---------- */
.th-hop-nen { position: absolute; padding: 0; }
.theme-trang .th-hop-nen { backdrop-filter: none; }
.th-hop { display: flex; flex-direction: column; width: min(460px, calc(100% - 24px)); min-width: 0; max-width: none; max-height: calc(100% - 24px);
  padding: var(--k4) var(--k4) 0; border-radius: var(--bo-3); overflow-y: auto; overscroll-behavior: contain; }
.th-hop > * { flex: none; }
.th-hop h2 { font-size: var(--co-5); margin: 0 0 var(--k2); }
.th-hop > p { font-size: var(--co-3); line-height: 1.45; margin: 0 0 var(--k2); white-space: pre-line; }
.th-hop > .nut-hang, .tb-dt-ngang .th-hop > .nut-hang { position: sticky; bottom: 0; z-index: 2; display: flex; gap: var(--k2); justify-content: flex-end; flex-wrap: nowrap;
  margin: var(--k3) calc(-1 * var(--k4)) 0; padding: 10px var(--k4) calc(12px + var(--an-duoi)); background: var(--mat); border-top: 1px solid var(--vien); box-shadow: none; }
.th-hop > .nut-hang .th-nut { flex: 1 1 0; min-width: 0; }
.kieu-doc .th-hop-nen { align-items: flex-end; }
.kieu-doc .th-hop { width: 100%; max-height: 92%; border-radius: var(--bo-3) var(--bo-3) 0 0; border-bottom: 0; scale: 1 !important; animation: th-truot-len calc(.22s * var(--tg, 1)) ease-out; }
.kieu-doc .th-hop::before { content: ''; display: block; flex: none; width: 36px; height: 4px; border-radius: 2px; background: var(--vien); margin: -6px auto 8px; }
@keyframes th-truot-len { from { transform: translateY(30%); opacity: .4; } }
.kieu-ngang .th-hop { max-height: calc(100% - 16px); }
.cl0 .kieu-doc .th-hop, .cl0.kieu-doc .th-hop { animation: none; }

/* Hộp chọn chế độ */
.hop-cd { padding-top: var(--k3); }
.kieu-doc .hop-cd { padding-top: var(--k2); }
.hop-che-do .dau-tro { display: flex; align-items: center; gap: 10px; margin: 0 0 10px; }
.hop-che-do .dau-tro .bt, .hop-che-do .dau-tro .bt.co-bia { width: 80px; height: 50px; --rong-anh: 80px; border-radius: var(--bo-1); font-size: 26px; flex: none; }
.hop-che-do .dau-tro .bt svg { width: 30px; height: 30px; }
.dau-tro-chu { flex: 1; min-width: 0; }
.dau-tro-chu h2 { margin: 0; font-size: var(--co-5); line-height: 1.2; }
.hop-che-do .dau-tro-chu p { margin: 2px 0 0; font-size: var(--co-2); line-height: 1.35; color: var(--chu-nhat); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.nut-dong-hop { align-self: flex-start; }
.cac-che-do { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin: 0 0 var(--k2); }
.che-do, .theme-trang .che-do { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; padding: 8px 4px; border-radius: var(--bo-2);
  border: 1.5px solid var(--vien); background: var(--mat); text-align: center; min-height: 58px; }
.che-do:hover { transform: none; }
.che-do .i { font-size: 1em; } .che-do .i svg { width: 24px; height: 24px; }
.che-do b { font-size: var(--co-2); margin: 0; }
.che-do small { display: none; }
.che-do.bat, .theme-trang .che-do.bat { border-color: var(--chinh); background: var(--mat-2); }
.van-do { gap: 8px; padding: 8px 10px; margin: 0 0 var(--k2); border-radius: var(--bo-2); border-width: 1.5px; }
.van-do > div { min-width: 120px; } .van-do b { font-size: var(--co-3); } .van-do small { font-size: var(--co-1); }
.cd-tuy-chon .dong-cau-hinh { display: flex; align-items: center; justify-content: space-between; gap: 6px 10px; flex-wrap: wrap; margin: 0; padding: 7px 0; border-top: 1px solid var(--vien); }
.cd-tuy-chon .dong-cau-hinh > label { min-width: 0; font-size: var(--co-2); font-weight: 700; color: var(--chu-nhat); }
.cd-tuy-chon .ghi-chu { margin: 4px 0 6px; }
.kieu-ngang .hop-cd { width: min(780px, calc(100% - 24px)); }
.kieu-ngang .hop-che-do { display: grid; grid-template-columns: minmax(200px, 250px) minmax(0, 1fr); gap: var(--k4); }
.kieu-ngang .cac-che-do { grid-template-columns: 1fr; }
.kieu-ngang .che-do { flex-direction: row; justify-content: flex-start; gap: 8px; padding: 6px 10px; min-height: 44px; }
.kieu-ngang .cd-tuy-chon .dong-cau-hinh:first-child { border-top: 0; padding-top: 0; }
.kieu-ngang .hop-cd .nut-hang { justify-content: flex-end; } .kieu-ngang .hop-cd .nut-hang .th-nut { flex: 0 1 240px; }
.ghi-chu { font-size: var(--co-2); margin-top: 10px; padding: 8px 10px; border-radius: var(--bo-1); }

/* ---------- Phòng chờ online ---------- */
.ma-phong { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0; }
.ma-phong small { width: 100%; color: var(--chu-nhat); font-weight: 700; font-size: var(--co-2); }
.ma-phong .ma { font-size: 28px; letter-spacing: .2em; padding: 2px 12px; border-radius: 12px; }
.phong-than .ds-ghe { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--k2); }
.phong-than .ghe { padding: 8px; min-height: 56px; border-radius: var(--bo-2); gap: 8px; }
.phong-than .ghe .av.th-av { --av: 38px; }
.phong-than .ghe > div { min-width: 0; }
.phong-than .ghe b { font-size: var(--co-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kieu-ngang .phong-than { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); align-items: start; align-content: start; }
.khung-pc.kieu-ngang .phong-than .ds-ghe { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* ---------- Màn chơi ---------- */
.man-choi { padding: 0 !important; }
/* Họa tiết nền màn chơi: ảnh mask sanh/hoa-tiet, theme tự tô màu (--hoa-tiet-mau, --hoa-tiet-dam) */
.man-choi { isolation: isolate; }
.co-hoa-tiet .man-choi::before { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-color: var(--hoa-tiet-mau, var(--chinh)); opacity: var(--hoa-tiet-dam, .09);
  -webkit-mask: var(--anh-hoa-tiet, none) repeat; mask: var(--anh-hoa-tiet, none) repeat; -webkit-mask-size: 320px; mask-size: 320px; }
.theme-sacSo { --hoa-tiet-dam: 0; }
/* Trò tự vẽ nền riêng thì tắt họa tiết: thêm lớp khong-hoa-tiet vào khung trò (Ô Ăn Quan sân đất) */
.co-hoa-tiet .man-choi:has(.khong-hoa-tiet, .tro-o-an-quan)::before { display: none; }
.thanh-tren, .tb-dt-ngang .thanh-tren { flex: none; height: calc(var(--cao-thanh-choi) + var(--an-tren)); gap: 6px; scrollbar-width: none;
  padding: var(--an-tren) calc(8px + var(--an-phai)) 0 calc(8px + var(--an-trai)); }
.thanh-tren::-webkit-scrollbar { display: none; }
.thanh-tren .ten-tro { font-size: var(--co-3); }
.nguoi, .tb-dt-ngang .thanh-tren .nguoi { font-size: var(--co-2); padding: 2px 10px 2px 2px; border-width: 2px; }
.nguoi .av.th-av { --av: 26px; }
.nguoi .ten-n { max-width: 8em; overflow: hidden; text-overflow: ellipsis; }
.nguoi.luot { transform: scale(1.04); }
.kieu-doc .thanh-tren .ten-tro { display: none; }
.kieu-doc .nguoi .ten-n { max-width: 5.5em; }
.kieu-doc .ds-nguoi:has(> .nguoi:nth-child(4)) .ten-n { display: none; }
.kieu-doc .ds-nguoi:has(> .nguoi:nth-child(4)) .nguoi { padding-right: 2px; }
/* Trò khai nguoiRieng: chip tên ẩn (vẫn giữ trong DOM để lõi cập nhật lượt), tên trò lấp chỗ trống */
.man-choi.nguoi-rieng .thanh-tren .ds-nguoi { display: none; }
.man-choi.nguoi-rieng .thanh-tren .ten-tro, .kieu-doc .man-choi.nguoi-rieng .thanh-tren .ten-tro { display: block; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.bang-emoji { top: calc(var(--cao-thanh-choi) + var(--an-tren) + 6px); right: calc(8px + var(--an-phai)); width: min(260px, calc(100% - 16px)); }
.man-ket, .theme-trang .man-ket { display: flex; align-items: center; justify-content: center; background: rgba(42, 34, 48, .3); backdrop-filter: none; }
.ket-the { width: min(400px, calc(100% - 24px)); min-width: 0 !important; padding: var(--k4); text-align: center; border-radius: var(--bo-3); max-height: calc(100% - 16px); overflow-y: auto; }
.kieu-doc .man-ket { align-items: flex-end; }
.kieu-doc .ket-the { width: 100%; border-radius: var(--bo-3) var(--bo-3) 0 0; padding-bottom: calc(14px + var(--an-duoi)); scale: 1 !important; animation: th-truot-len calc(.25s * var(--tg, 1)) ease-out; }
.ket-the .lon-bt svg { width: 56px; height: 56px; }
.kieu-ngang .ket-the .lon-bt svg { width: 40px; height: 40px; }
.ket-the h2, .man-ket .ket-the h2 { font-size: var(--co-6); margin: 4px 0; }
.ket-the p { margin: 4px 0; font-size: var(--co-3); }
.ket-nut { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--k2); margin-top: var(--k3); }
.ket-nut .th-nut { width: 100%; min-width: 0; padding: .6em .8em; }
.ket-nut .th-nut.la { grid-column: 1 / -1; order: -1; }
.ket-nut > p { grid-column: 1 / -1; margin: 0; }
.nut-xem-ket { position: absolute; left: calc(12px + var(--an-trai)); bottom: calc(12px + var(--an-duoi)); z-index: 30; }
.nhac-xoay, .tb-dt-doc .nhac-xoay { top: calc(var(--cao-thanh-choi) + var(--an-tren) + 8px); font-size: var(--co-2); }

/* ---------- Thông báo ---------- */
#th-thong-bao { position: absolute; top: calc(8px + var(--an-tren)); max-width: calc(100% - 24px); }
.th-tb { font-size: var(--co-2); padding: .55em 1.1em; text-align: center; }
#th-fx { position: absolute; }

/* ---------- Bạn bè, tài khoản trong khung ---------- */
.bb-nen, .tk-man { position: absolute; }
.kieu-doc .bb-ngan { width: 100%; }

/* ---------- Ô trò ở sảnh: dạng danh sách (luoi-ds), Tri chọn 27/10 ---------- */
.o-chu { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.o-phu, .o-di { display: none; }
.o-ten { font-weight: 700; }
.app-luoi.luoi-ds { grid-template-columns: minmax(0, 1fr); gap: 8px; }
.kieu-ngang .app-luoi.luoi-ds { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.luoi-ds .o-tro { flex-direction: row; align-items: center; gap: 10px; background: var(--mat); border-radius: var(--bo-2); padding: 6px 10px 6px 6px; box-shadow: 0 0 0 1px var(--vien); }
.luoi-ds .o-bia { width: 84px; flex: none; --rong-anh: 84px; border-radius: var(--bo-1); box-shadow: none; }
.luoi-ds .o-chu { flex: 1; }
.luoi-ds .o-ten { font-size: var(--co-3); -webkit-line-clamp: 1; padding: 0; }
.luoi-ds .o-phu { display: block; color: var(--chu-nhat); font-size: var(--co-1); font-weight: 600; }
.luoi-ds .o-di { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--hong-nhat); color: var(--chinh); flex: none; }
.luoi-ds .o-di svg { width: 16px; height: 16px; }
.luoi-ds .o-nhan { top: 9px; left: 9px; right: auto; font-size: 9px; padding: 3px 6px; box-shadow: none; }
.tb-pc .luoi-ds .o-tro:hover { box-shadow: 0 0 0 1.5px var(--chinh); }
.tb-pc .luoi-ds .o-tro:hover .o-bia { transform: none; box-shadow: none; }

.luoi-ds .o-nhan.moi::before { content: ''; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--chinh); margin-right: 4px; vertical-align: 1px; }
.luoi-ds .o-nhan.moi { background: rgba(255, 255, 255, .94); color: var(--chu); }
.khung-pc.kieu-ngang .app-luoi.luoi-ds { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 10px; }

/* ---------- Ba cách chơi (HOP-DONG 17.6): màn chọn + sảnh Với máy / Online / Cùng máy ---------- */
/* Màu riêng mỗi cách chơi: --cd đậm, --cd-nhat nền nhạt */
.cd-may, .o-cd.cd-may { --cd: var(--chinh); --cd-nhat: var(--hong-nhat); }
.cd-online, .o-cd.cd-online { --cd: #2563c9; --cd-nhat: #e3edfc; }
.cd-cungMay, .o-cd.cd-cungMay { --cd: #c2560f; --cd-nhat: #fdeadb; }
.bang-toi .cd-online, .bang-toi .o-cd.cd-online { --cd: #3d7fe6; --cd-nhat: #1f2a3d; }
.bang-toi .cd-cungMay, .bang-toi .o-cd.cd-cungMay { --cd: #d9661a; --cd-nhat: #3a2a1f; }
.bang-denTrang .cd-may, .bang-denTrang .cd-online, .bang-denTrang .cd-cungMay { --cd: #111; --cd-nhat: #e6e6e6; }
.bang-denTrang .o-cd.cd-may { --cd: #111; } .bang-denTrang .o-cd.cd-online { --cd: #3a3a3a; } .bang-denTrang .o-cd.cd-cungMay { --cd: #5e5e5e; }

/* Thanh trên có dải màu: hàng tiêu đề + thanh đổi nhanh */
.app-dau.dau-cd { height: auto; flex-direction: column; align-items: stretch; gap: 0; background: var(--cd); color: #fff; border-bottom: 0; padding-bottom: var(--k2); }
.dau-cd-hang { display: flex; align-items: center; gap: var(--k2); height: var(--cao-dau); min-width: 0; }
.dau-cd .nut-ve-chon, .dau-cd .nut-ve-chon:hover { background: rgba(255, 255, 255, .2); color: #fff; box-shadow: none; border-color: transparent; }
.dau-cd .chip-xu { background: rgba(255, 255, 255, .2); color: #fff; }
.dau-cd .chip-xu .th-ic { color: #ffd25a; }
.doi-cd { display: flex; gap: 3px; padding: 3px; border-radius: 999px; background: rgba(255, 255, 255, .2); }
.doi-cd button { flex: 1 1 0; min-width: 0; height: 36px; border: 0; border-radius: 999px; background: transparent; color: #fff; cursor: pointer;
  font: 700 var(--co-2) var(--font); display: inline-flex; align-items: center; justify-content: center; gap: 5px; white-space: nowrap; }
.doi-cd button .th-ic { width: 16px; height: 16px; flex: none; }
.doi-cd button.bat { background: #fff; color: var(--cd); }
.kieu-ngang .app-dau.dau-cd { flex-direction: row; align-items: center; gap: var(--k3); padding-bottom: 0; height: calc(var(--cao-dau) + var(--an-tren)); }
.kieu-ngang .dau-cd-hang { flex: 1; }
.kieu-ngang .doi-cd { flex: 0 1 380px; }
.kieu-ngang .doi-cd button { height: 32px; }

/* Màn chọn: 3 ô màu (Với máy to ở trên, 2 ô nửa ở dưới; màn ngang 3 ô một hàng) */
.chon-hoi { margin: 0; font-size: var(--co-5); font-weight: 800; }
.chon-cd { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--k2); flex: none; }
.o-cd { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-height: 128px; padding: var(--k3); border: 0; border-radius: var(--bo-3);
  background: var(--cd); color: #fff; font: inherit; text-align: left; cursor: pointer; min-width: 0; }
.o-cd.cd-may { grid-column: 1 / -1; min-height: 140px; }
.o-cd:active { transform: scale(.98); }
.o-cd-ic { width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; background: rgba(255, 255, 255, .22); margin-bottom: auto; }
.o-cd-ic svg { width: 26px; height: 26px; }
.o-cd b { font-size: var(--co-4); font-weight: 800; margin-top: var(--k2); }
.o-cd small { font-size: var(--co-1); font-weight: 600; opacity: .92; line-height: 1.3; }
.kieu-ngang .chon-cd { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.kieu-ngang .o-cd.cd-may { grid-column: auto; }
.khung-pc.kieu-ngang .o-cd { min-height: 180px; }
.app-nhan-muc { margin: var(--k1) 0 0; font-size: var(--co-3); font-weight: 800; color: var(--chu); flex: none; }
.gan-day { display: flex; gap: var(--k2); overflow-x: auto; flex: none; padding-bottom: 2px; scrollbar-width: none; }
.o-gan-day { flex: 0 0 116px; display: flex; flex-direction: column; gap: 2px; padding: 6px; border: 0; border-radius: var(--bo-2); background: var(--mat);
  box-shadow: inset 0 0 0 1px var(--vien); font: inherit; color: var(--chu); text-align: left; cursor: pointer; min-width: 0; container-type: inline-size; }
.o-gan-day .o-bia { border-radius: var(--bo-1); box-shadow: none; margin-bottom: 3px; }
.o-gan-day b { font-size: var(--co-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.o-gan-day small { font-size: var(--co-1); color: var(--chu-nhat); font-weight: 600; }

/* Sảnh: dòng trò có nút làm ngay bên phải (Chơi / Tiếp / Tạo) */
.o-boc { position: relative; min-width: 0; }
.o-boc .o-tro { width: 100%; padding-right: 96px; }
.luoi-ds .o-boc .o-di { display: none; }
.o-hanh { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); height: 40px; min-width: 76px; padding: 0 14px; border: 0; border-radius: 999px;
  background: var(--cd, var(--chinh)); color: #fff; font: 800 var(--co-2) var(--font); display: inline-flex; align-items: center; justify-content: center; gap: 5px; cursor: pointer; }
.o-hanh .th-ic { width: 14px; height: 14px; }
.o-hanh:active { transform: translateY(-50%) scale(.96); }
.o-hanh:disabled { background: var(--mat-2); color: var(--chu-nhat); cursor: default; }
.khong-hop .o-tro { opacity: .55; }
.tb-pc .luoi-ds .o-boc .o-tro:hover { box-shadow: 0 0 0 1.5px var(--cd, var(--chinh)); }
.sanh-may .app-loc .chip.bat, .sanh-online .app-loc .chip.bat, .sanh-cungMay .app-loc .chip.bat { background: var(--cd); color: #fff; }

/* Với máy: hàng chọn độ khó */
.hang-muc-do { display: flex; align-items: center; gap: var(--k2); flex: none; }
.hang-muc-do > span { font-size: var(--co-2); font-weight: 700; color: var(--chu-nhat); white-space: nowrap; }
.hang-muc-do .nhom-chon { flex: 1; }
.hang-muc-do .nhom-chon button.bat { background: var(--cd); }
.kieu-ngang .sanh-may .hang-muc-do { grid-column: 1 / -1; max-width: 420px; }

/* Online + Cùng máy: màn dọc 1 cột, màn ngang 2 cột (trái: vào phòng / người chơi, phải: danh sách trò) */
.sanh-online .hai-cot > div, .sanh-cungMay .hai-cot > div { display: flex; flex-direction: column; gap: var(--k3); min-width: 0; }
.kieu-ngang .sanh-online .hai-cot, .kieu-ngang .sanh-cungMay .hai-cot { grid-template-columns: minmax(300px, 40%) minmax(0, 1fr); flex: none; }
.kieu-ngang .sanh-online, .kieu-ngang .sanh-cungMay, .kieu-ngang .sanh-chon { display: flex; }
.sanh-online .the-vao h3 .th-ic, .sanh-cungMay .cm-the h3 .th-ic { color: var(--cd); }
.sanh-online .the-vao .th-nut.la, .sanh-online .van-online .th-nut.la { --c: var(--cd); }
.so-buoc { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--cd); color: #fff; font-size: var(--co-2); font-weight: 900; flex: none; }
.cm-the h3 { flex-wrap: wrap; }
.cm-the h3 .buoc-so { margin-left: auto; }
.cm-the .buoc-so-gt { color: var(--cd); }
.cm-the .cm-ngoi-o.bat { border-color: var(--cd); background: var(--cd-nhat); }
.cm-the .cm-ngoi-o.bat b, .cm-the .cm-ngoi-o.bat .cm-ngoi-hinh { color: var(--cd); }
.cm-the .app-goi-y { display: block; margin: var(--k2) 0 0; }
.cm-the .nhom-chon button.bat { background: var(--cd); }

/* Ví xu: hộp điểm danh 7 ngày (HOP-DONG 20, core/js/th-vi.js) */
.dd-hop p { margin: 0 0 var(--k2, 8px); }
.dd-luoi { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin: var(--k2, 8px) 0; }
.dd-o { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 2px; border-radius: var(--bo-1, 10px);
  background: var(--mat-2, #fff0f6); border: 1.5px solid var(--vien, #f1e4ea); font-size: var(--co-1, 11px); color: var(--chu-nhat, #8b8093); }
.dd-o .th-ic { width: 20px; height: 20px; color: var(--cam, #ff9f4a); }
.dd-o b { font-size: var(--co-2, 12px); color: var(--chu, #2a2230); }
.dd-o.dd-7 { grid-column: span 2; background: color-mix(in srgb, var(--cam, #ff9f4a) 14%, var(--mat, #fff)); }
.dd-o.da { opacity: .55; }
.dd-o.da .dd-ngay::after { content: ' \2713'; color: var(--la, #3ddc97); }
.dd-o.nay { border-color: var(--chinh, #ec4f8c); box-shadow: 0 0 0 2px color-mix(in srgb, var(--chinh, #ec4f8c) 25%, transparent); color: var(--chinh, #ec4f8c); }
.dd-da { font-weight: 700; color: var(--chinh, #ec4f8c); text-align: center; }