/* Một màn chơi trong lòng mê cung gương: nền đêm xanh ngọc, viền bạc, vàng chỉ dùng cho thứ bấm được. */
:root {
  --nen: #0B1517;
  --mat: #142327;
  --mat-2: #1C3136;
  --chu: #E9F1EC;
  --nhat: #A5BAB6;
  --bac: #BFD3D6;
  --vang: #E3BE5A;
  --tim: #A58BE8;
  --do: #F07A62;
  --xanh: #6FD39B;
  --tieu-de: "Cormorant", "Noto Serif", Georgia, serif;
  --noi-dung: "Be Vietnam Pro", "Segoe UI", system-ui, sans-serif;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; background: var(--nen); color: var(--chu); font: 400 15px/1.5 var(--noi-dung); }
body { background: linear-gradient(rgba(11, 21, 23, .84), rgba(11, 21, 23, .94)), url("../anh/tang/t1.jpg") center / cover fixed; }
h1, h2 { font-family: var(--tieu-de); font-weight: 700; line-height: 1.1; margin: 0; text-wrap: balance; }
h1 { font-size: clamp(2.6rem, 9vw, 3.8rem); }
h2 { font-size: clamp(1.8rem, 6vw, 2.5rem); }
p { margin: 0; }
button { font: inherit; color: inherit; cursor: pointer; }
button:disabled { cursor: default; opacity: .45; }
:focus-visible { outline: 2px solid var(--vang); outline-offset: 2px; }
.nhan { font-size: .76rem; letter-spacing: .12em; text-transform: uppercase; color: var(--vang); }
.dan { color: var(--bac); max-width: 56ch; }
.chu-nho { font-size: .85rem; color: var(--nhat); }
.ve { color: var(--nhat); font-size: .85rem; }

.man { max-width: 860px; margin: 0 auto; min-height: 100dvh; display: grid; gap: 12px; align-content: start;
  padding-block: 14px; padding-left: max(14px, env(safe-area-inset-left, 0px)); padding-right: max(14px, env(safe-area-inset-right, 0px)); }
.man > * { min-width: 0; }

.anh { position: relative; display: grid; place-items: center; overflow: hidden; aspect-ratio: 1; width: 100%; background: color-mix(in srgb, var(--mau, #7E6BC4) 30%, var(--mat)); color: var(--chu); font: 700 2rem var(--tieu-de); }
.anh img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 6%; }
.anh.bong img { filter: grayscale(1) contrast(1.15) brightness(.72) sepia(1) hue-rotate(215deg) saturate(2.2); transform: scaleX(-1); }

.dau { display: grid; gap: 6px; }
.ky-luc { color: var(--vang); font-size: .88rem; }
.luoi-chon { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.the { position: relative; display: grid; gap: 2px; padding: 0 0 8px; background: var(--mat); border: 2px solid transparent; text-align: center; }
.the.dang-xem { border-color: var(--bac); }
.the.da-chon { border-color: var(--vang); }
.the strong { font: 700 1.2rem var(--tieu-de); }
.the small { color: var(--nhat); font-size: .78rem; }
.the em { position: absolute; top: 4px; left: 4px; padding: 1px 7px; background: var(--vang); color: #1B1505; font: 600 .72rem var(--noi-dung); }
.xem-ky { background: var(--mat); padding: 12px 14px; display: grid; gap: 6px; }
.xem-ky h2 { font-size: 1.5rem; }
.xem-ky h2 small { font: 400 .8rem var(--noi-dung); color: var(--nhat); }
.xem-ky ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.xem-ky li { font-size: .9rem; }
.xem-ky i { font-style: normal; color: var(--vang); font-size: .8rem; }
.xem-ky span { display: block; color: var(--nhat); }
.noi { color: var(--tim); font-size: .9rem; }
.nut-chinh { padding: 14px; border: 0; background: var(--vang); color: #1B1505; font-weight: 600; font-size: 1rem; }
.nut-chinh:disabled { opacity: 1; background: var(--mat-2); color: var(--nhat); }
.chon .nut-chinh { position: sticky; bottom: max(8px, env(safe-area-inset-bottom, 0px)); }

.tran { gap: 8px; padding-block: 8px; }
.hud { display: flex; justify-content: space-between; align-items: center; gap: 10px; font-size: .85rem; color: var(--bac); }
.nang { display: inline-flex; align-items: center; gap: 3px; }
.nang i { width: 11px; height: 11px; transform: rotate(45deg); border: 1px solid var(--vang); }
.nang i.day { background: var(--vang); }
.nang b { margin-left: 6px; color: var(--vang); font-weight: 600; }

.dich-hang { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.ke, .ban { position: relative; display: grid; gap: 3px; align-content: start; padding: 4px; background: var(--mat); border: 2px solid transparent; text-align: left; min-width: 0; }
.ke { flex: 1 1 0; max-width: 170px; min-width: 76px; }
.ke strong, .ban strong { font: 700 1rem/1.1 var(--tieu-de); overflow-wrap: anywhere; }
.ke.ao { opacity: .6; border-style: dashed; border-color: var(--bac); }
.nham { border-color: var(--vang); animation: nhay 1.1s ease-in-out infinite; }
@keyframes nhay { 50% { border-color: transparent; } }
.mau { position: relative; display: block; height: 15px; background: #0A1113; overflow: hidden; }
.mau i { position: absolute; inset: 0 auto 0 0; background: var(--do); transition: width .3s; }
.ban .mau i { background: var(--xanh); }
.mau b { position: relative; display: block; text-align: center; font: 600 .68rem/15px var(--noi-dung); color: #fff; text-shadow: 0 1px 2px #000; }
.y { font-size: .74rem; color: var(--nhat); }
.y.chac, .y.that { color: var(--vang); }
.y.gia { color: var(--tim); }
.y.nguy { color: var(--do); }

.nhat-ky { min-height: 3.9em; font-size: .82rem; color: var(--nhat); }
.nhat-ky p:last-child { color: var(--chu); }
.trang-thai { font-size: .78rem; color: var(--tim); }

.doi-hang { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.ban .anh { aspect-ratio: 5 / 4; }
.ban.chon { border-color: var(--vang); }
.ban.xong .anh { filter: saturate(.45) brightness(.8); }
.ban.nga .anh { filter: grayscale(1) brightness(.45); }
.ban small { color: var(--nhat); font-size: .72rem; line-height: 1.25; }

.ky-hang { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.nut { display: grid; gap: 1px; align-content: start; padding: 8px 10px; background: var(--mat-2); border: 1px solid #2E4A50; text-align: left; min-height: 48px; }
.nut:hover:not(:disabled) { border-color: var(--vang); }
.nut b { font-weight: 600; font-size: .88rem; }
.nut b i { font-style: normal; color: var(--vang); margin-left: 4px; }
.nut span { color: var(--nhat); font-size: .74rem; line-height: 1.3; }
.nut.ket { grid-column: 1 / -1; text-align: center; font-weight: 600; min-height: 44px; border-color: var(--vang); color: var(--vang); background: none; align-content: center; }
.goi-y { grid-column: 1 / -1; color: var(--vang); font-size: .9rem; }
#huy { grid-column: 1 / -1; text-align: center; align-content: center; }
.chinh-nhe { grid-column: 1 / -1; }

.so { position: absolute; top: 24%; left: 50%; transform: translateX(-50%); font: 700 1.5rem var(--tieu-de); text-shadow: 0 2px 4px #000; pointer-events: none; animation: bay .9s ease-out forwards; }
.so.tru { color: var(--do); }
.so.cong { color: var(--xanh); }
@keyframes bay { to { top: 2%; opacity: 0; } }
.rung { animation: rung .3s; }
@keyframes rung { 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }

.cua { align-content: center; justify-items: center; text-align: center; gap: 14px; }
.hai-cua { display: grid; grid-template-columns: repeat(2, minmax(0, 170px)); gap: 18px; width: 100%; justify-content: center; }
.guong { aspect-ratio: 3 / 5; display: grid; place-items: end center; padding: 14px; background: linear-gradient(160deg, #DCE9EA, #6E8C93 45%, #B9CDD0 60%, #54707A); border: 3px solid var(--vang); border-radius: 90px 90px 6px 6px; color: #0B1517; font-weight: 600; }
.guong:hover { filter: brightness(1.15); }

@media (min-width: 720px) {
  .luoi-chon { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .ban .anh { aspect-ratio: 3 / 2; }
  .ke .anh { aspect-ratio: 4 / 3; }
  .ky-hang { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (prefers-reduced-motion: reduce) {
  .nham, .rung, .so { animation: none; }
  .so { display: none; }
}