/* Terminal / metro: type, flat surfaces and useful controls. Scene/camera are independent. */
:root {
    color-scheme: dark;
    --ti-le-ui: 1;
    font-size: calc(15px * var(--ti-le-ui));
    --nen: #121411;
    --nen-nang: #1b1d19;
    --chu: #efeee6;
    --chu-mo: #b5b8af;
    --vien: #55594f;
    --do: #ffb6a9;
    --font-ui: 'IBM Plex Mono', 'Liberation Mono', 'Courier New', monospace;

    /* Khối retro: mặt nút, viền kim loại, cạnh vát. Chỉ nút và hộp thoại dùng. */
    --khoi-mat: #2b3026;
    --khoi-mat-sang: #3f4736;
    --khoi-vien: #8a927b;
    --khoi-vien-sang: #c6cdb6;
    --khoi-vat: .5em;
    --khoi-lip: 3px;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; }
body { font-family: var(--font-ui); color: var(--chu); background: var(--nen); font-size: 1rem; }
button, input, select { font: inherit; border-radius: 0; }
button, a, input, select, summary { -webkit-tap-highlight-color: transparent; }
button { color: inherit; cursor: pointer; }
button:disabled { cursor: not-allowed; }
:focus-visible { outline: 2px solid var(--chu); outline-offset: 3px; }
a { color: var(--chu); text-underline-offset: 3px; }
a:hover { color: white; }
.an, [hidden] { display: none !important; }
[inert] { pointer-events: none; }
h1, h2, h3, p { margin: 0; }
h1, h2, h3, strong { font-weight: 600; }
h1 { font-size: 2rem; letter-spacing: -.035em; line-height: 1.4; }
h2 { font-size: 1.35rem; line-height: 1.5; }
h3 { font-size: .9rem; line-height: 1.5; }
p { line-height: 1.7; }
kbd { font: inherit; font-size: .75rem; color: var(--chu-mo); }
#san3d { position: fixed; inset: 0; width: 100vw; height: 100vh; display: block; z-index: 0; }

/* ── Khối retro: nút, tab, hộp thoại ────────────────────────────────────────
   Phạm vi: CHỈ các điều khiển và hộp thoại bên dưới. Toàn bộ phần còn lại của
   giao diện vẫn phẳng như trước.
   Biên là hình học thật (corner-shape), nên outline, box-shadow và overflow đều
   bám theo cạnh vát. Trình duyệt chưa hỗ trợ rơi về bo tròn đặc ở cuối tệp. */

/* Mặt khối dùng chung. Viền gradient 1px dựng bằng padding-box / border-box.
   --khoi-vat là độ lớn cạnh vát mong muốn. Bán kính thật do @supports bên dưới
   đặt; ở đây chỉ là giá trị cho trình duyệt chưa hỗ trợ corner-shape. */
.nut, .nut-nhom button, .cac-tab button, .hop-xac-nhan, #nut-nhanh .nut {
    --khoi-vat: .5em;
    --khoi-vien-day: 1px;
    border-radius: var(--khoi-vat);
    corner-shape: bevel;
    border: var(--khoi-vien-day) solid transparent;
    background:
        linear-gradient(var(--khoi-mat-sang), var(--khoi-mat)) padding-box,
        conic-gradient(from 45deg, var(--khoi-vien-sang), var(--khoi-vien) 25%,
            var(--khoi-vien-sang) 50%, var(--khoi-vien) 75%, var(--khoi-vien-sang)) border-box;
    box-shadow:
        inset 0 1px 0 rgb(255 255 255 / .22),
        inset 0 -2px 0 rgb(0 0 0 / .45),
        0 var(--khoi-lip) 0 rgb(0 0 0 / .75),
        0 calc(var(--khoi-lip) + 4px) 12px rgb(0 0 0 / .4);
    transition: transform .06s, box-shadow .06s, background .12s;
}

/* Chữ khắc vào kim loại: sáng dưới, tối trên. */
.nut > span, .nut-nhom button, .cac-tab button, #nut-nhanh .nut > span {
    text-transform: uppercase;
    letter-spacing: .1em;
    font-size: .84rem;
}
.nut > span, #nut-nhanh .nut > span {
    text-shadow: 0 -1px 0 rgb(0 0 0 / .8), 0 1px 0 rgb(255 255 255 / .22);
}

/* Nhấn = hạ xuống đúng bằng độ dày mũi khối rồi mũi biến mất. */
.nut:active:not(:disabled), .nut-nhom button:active:not(:disabled),
.cac-tab button:active:not(:disabled), #nut-nhanh .nut:active:not(:disabled) {
    transform: translateY(var(--khoi-lip));
    box-shadow:
        inset 0 2px 5px rgb(0 0 0 / .55),
        inset 0 -1px 0 rgb(0 0 0 / .5);
}

/* Khoá: tắt màu kim loại chứ không làm mờ chữ tới mức không đọc được. */
.nut:disabled, .nut-nhom button:disabled, #nut-nhanh .nut:disabled {
    cursor: not-allowed;
    filter: grayscale(.9) brightness(.62);
}
.nut:disabled { transform: none; }

/* Ô đang chọn trong nhóm và tab đang mở: mặt sáng, chữ tối. Hai thứ này nằm
   trong một dãy nên tương phản sáng/tối giúp quét nhanh là đúng. */
.nut-nhom button.chon, .cac-tab button[aria-selected="true"] {
    color: #0f110d;
    background:
        linear-gradient(#e8ead9, #b9c0a6) padding-box,
        conic-gradient(from 45deg, #fff, #7d8570 25%, #fff 50%, #7d8570 75%, #fff) border-box;
}
.nut-nhom button.chon kbd { color: #4b4f45; }

/* Hành động chính: KHÔNG tô trắng. Menu tối mà lọt vào một mảng trắng thì đọc
   thành lỗi chứ không thành nhấn mạnh. Thay vào đó: kim loại đậm hơn nền một
   bậc + vành sáng 2px + chữ trắng, đủ để mắt thấy "nút mặc định". */
.nut-chinh:not(:disabled) {
    color: #f7f8f1;
    background:
        linear-gradient(#7d8871, #525c45) padding-box,
        conic-gradient(from 45deg, #e9eddf, #8e9a81 25%, #e9eddf 50%, #8e9a81 75%, #e9eddf) border-box;
    box-shadow:
        inset 0 1px 0 rgb(255 255 255 / .3),
        inset 0 -2px 0 rgb(0 0 0 / .45),
        0 var(--khoi-lip) 0 rgb(0 0 0 / .75),
        0 calc(var(--khoi-lip) + 4px) 12px rgb(0 0 0 / .4);
}
.nut-chinh > span { text-shadow: 0 -1px 0 rgb(0 0 0 / .85), 0 1px 0 rgb(255 255 255 / .22); }
.nut-chinh kbd { color: #e6ead9; }

/* Nguy hiểm: giữ tông cảnh báo nhưng vẫn là khối kim loại. */
.nut-nguy-hiem:not(:disabled) {
    color: var(--do);
    background:
        linear-gradient(#3a241e, #2a1a16) padding-box,
        conic-gradient(from 45deg, #d29a8b, #8b4f42 25%, #d29a8b 50%, #8b4f42 75%, #d29a8b) border-box;
}
.nut-nguy-hiem > span { text-shadow: 0 -1px 0 rgb(0 0 0 / .8), 0 1px 0 rgb(255 255 255 / .16); }

/* Tab: cùng độ vát, nhưng là một dải liền nhau chứ không phải 4 viên thuốc rời. */
.cac-tab { gap: 4px; --khoi-lip: 2px; }

/* Nhóm chọn: ô nhỏ hơn nên vát nông hơn. */
.nut-nhom { --khoi-lip: 2px; }
.nut-nhom button { flex: 1 1 8ch; }

/* Nút biểu tượng và liên kết giữ phẳng — chúng nằm trong dòng chữ, không phải khối. */
.nut-bieu-tuong, .nut-nhac, .lien-ket, .cong-tac { corner-shape: initial; border-radius: 0; }

/* Nhãn ngắn (BACK/START/OK): bề rộng tối thiểu để cạnh vát có chỗ mà không
   cắt vào chữ. `.nut` cũng là nút trong dòng chữ ở một số chỗ, nên giữ 8ch. */
.nut { min-width: 8ch; }

/* Fallback: chưa hỗ trợ corner-shape thì bỏ cạnh vát, chỉ giữ bo tròn đặc. */
@supports not (corner-shape: bevel) {
    .nut, .nut-nhom button, .cac-tab button, .hop-xac-nhan, #nut-nhanh .nut,
    .khung-hud, .khung-phu, #thong-bao, .dong-ho.dang-di { corner-shape: initial; }
}

/* Trình duyệt hỗ trợ cạnh vát: nhân bán kính để cạnh 45° đạt ~0.95em.
   corner-shape dùng bán kính làm cạnh huyền, nên bán kính phải lớn hơn
   độ lớn cạnh muốn thấy, nếu không bốn góc sẽ ăn hết chiều rộng nút. */
@supports (corner-shape: bevel) {
    .nut, .nut-nhom button, .cac-tab button, .hop-xac-nhan, #nut-nhanh .nut {
        border-radius: calc(var(--khoi-vat) * 1.9);
    }
}

.nut { display: inline-flex; align-items: center; justify-content: center; gap: .75rem; min-height: 44px; padding: .65rem .85rem; font-size: .9rem; line-height: 1.5; text-align: center; }
/* Hover: sáng lên bằng MỘT lớp inset, không đổi background.
   Đổi cả chuỗi gradient khiến trình duyệt không nội suy được (background
   không animate được giữa hai gradient) nên màu nhảy khựng. Thêm highlight
   là mượt, và mọi biến thể nút đều dùng chung một luật. */
.nut:hover:not(:disabled), .nut-nhom button:hover:not(:disabled),
.cac-tab button:hover:not([aria-selected="true"]),
.nut-chinh:hover:not(:disabled), .nut-nguy-hiem:hover:not(:disabled),
#nut-nhanh .nut:hover:not(:disabled) {
    box-shadow:
        inset 0 1px 0 rgb(255 255 255 / .38),
        inset 0 0 0 100px rgb(255 255 255 / .07),
        inset 0 -2px 0 rgb(0 0 0 / .45),
        0 var(--khoi-lip) 0 rgb(0 0 0 / .75),
        0 calc(var(--khoi-lip) + 4px) 12px rgb(0 0 0 / .4);
}
.nut kbd { margin-left: auto; }
.nut-bieu-tuong { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 36px; height: 36px; padding: 0; background: transparent; color: var(--chu); border: 1px solid transparent; }
.nut-bieu-tuong:hover:not(:disabled) { border-color: var(--vien); background: #30332c; }
.lien-ket { border: 0; background: none; color: var(--chu-mo); padding: .6rem 0; font-size: .8rem; text-decoration: underline; text-underline-offset: 3px; }
.lien-ket:hover { color: var(--chu); }
.hang-nut { display: flex; flex-wrap: wrap; gap: .65rem; margin-left: auto; }
.danh-sach-nut { display: grid; gap: .65rem; margin-top: 1.5rem; }
.nut-nhom { display: flex; flex-wrap: wrap; gap: 6px; }
.nut-nhom button { flex: 1 1 auto; min-height: 44px; min-width: 0; padding: .6rem .75rem; color: var(--chu); font-size: .83rem; line-height: 1.5; text-shadow: 0 -1px 0 rgb(0 0 0 / .8), 0 1px 0 rgb(255 255 255 / .22); }

/* A compact menu leaves most of the garden visible. No hero, slogans or ornaments. */
#lop-phu { position: fixed; inset: 0; z-index: 40; display: grid; align-items: center; justify-items: center; padding: 24px; background: rgba(0,0,0,.55); }
#lop-phu[data-trang="menu"] { justify-items: start; background: rgba(0,0,0,.16); }
.khung-phu { --dem: 24px; width: min(680px, 100%); max-height: calc(100dvh - 48px); overflow-y: auto; padding: var(--dem); scrollbar-gutter: stable; }
.khung-phu:focus { outline: none; }
.khung-menu { width: min(330px, 100%); }
.chi-tiet-van { margin-top: 1rem; color: var(--chu-mo); font-size: .78rem; }
.chi-tiet-van summary { cursor: pointer; min-height: 36px; padding: .4rem 0; }
.lich-su { max-height: 150px; overflow: auto; padding-left: 1.7rem; line-height: 1.9; }
.luu-y-dong-ho, .ket-noi { color: var(--chu-mo); font-size: .75rem; margin-top: .8rem; line-height: 1.6; }
.ket-noi { color: var(--do); }

.dau-hop { margin-bottom: 1.4rem; }
.chan-hop { position: sticky; bottom: calc(-1 * var(--dem)); z-index: 3; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 1rem; align-items: center; margin: 1.5rem calc(-1 * var(--dem)) calc(-1 * var(--dem)); padding: 1rem var(--dem); border-top: 1px solid var(--vien); background: var(--nen); }
.chan-hop .luu-y-dong-ho { margin: 0; flex: 1; min-width: 15ch; }
.hang-chon { margin-top: 1.25rem; }
.hang-chon h3, .hang-chon label { display: block; margin-bottom: .55rem; font-size: .9rem; font-weight: 400; }
select { width: 100%; max-width: 100%; min-height: 44px; padding: .65rem; border: 1px solid var(--vien); color: var(--chu); background: var(--nen); font-size: .85rem; }
select:hover { border-color: var(--chu-mo); }
select option { color: var(--chu); background: var(--nen); }

/* Accessible selection and independent audio controls, not decorative cards. */
.cac-tab { display: flex; flex-wrap: wrap; gap: 6px; margin: 1.2rem 0 .4rem; }
.cac-tab button { flex: 1 1 auto; min-height: 44px; padding: .55rem .7rem; color: var(--chu-mo); font-size: .82rem; }
.cac-tab button[aria-selected="true"] { color: var(--nen); }
.cac-tab button:hover:not([aria-selected="true"]) { color: var(--chu); }
.hang-cai-dat { display: grid; grid-template-columns: minmax(130px, .8fr) minmax(0, 1.2fr); align-items: center; gap: 1.2rem; padding: 1rem 0; border-bottom: 1px solid #34382f; }
.hang-cai-dat h3, .hang-cai-dat label { font-size: .88rem; font-weight: 400; }
.gia-tri-cai-dat { min-width: 0; }
.ngon-ngu { padding-top: 0; }
.cong-tac { display: flex; align-items: center; justify-content: flex-end; gap: .5rem; min-height: 44px; padding: .45rem 0; margin-left: auto; border: 0; background: transparent; font-size: .85rem; color: var(--chu-mo); }
.cong-tac.chon { color: var(--chu); }
.cong-tac:hover { text-decoration: underline; text-underline-offset: 4px; }
.am-luong { display: flex; align-items: center; gap: 5px; width: 100%; }
.am-luong input { appearance: none; flex: 1; min-width: 32px; width: 100%; height: 36px; background: transparent; cursor: pointer; }
.am-luong input::-webkit-slider-runnable-track { height: 2px; background: linear-gradient(to right, var(--chu) var(--muc), var(--vien) var(--muc)); }
.am-luong input::-webkit-slider-thumb { appearance: none; width: 10px; height: 14px; margin-top: -6px; border: 1px solid var(--chu); background: var(--chu); }
.am-luong input::-moz-range-track { height: 2px; background: var(--vien); }
.am-luong input::-moz-range-progress { height: 2px; background: var(--chu); }
.am-luong input::-moz-range-thumb { width: 8px; height: 12px; border: 1px solid var(--chu); border-radius: 0; background: var(--chu); }
.am-luong output { font-size: .78rem; min-width: 4ch; text-align: right; }
.nhac-nhanh { border-top: 1px solid var(--vien); padding-top: .65rem; }
.nut-nhac { background: none; border: 1px solid transparent; padding: .3rem 0; min-height: 36px; font-size: .85rem; }
.nut-nhac:hover { text-decoration: underline; text-underline-offset: 4px; }
.huong-dan-ban-phim { padding-top: 1.25rem; }
.huong-dan-ban-phim p { margin-top: .65rem; color: var(--chu-mo); font-size: .8rem; }

/* Only turn, clocks and three game actions remain on the board. */
#lop-hud { position: relative; z-index: 10; pointer-events: none; }
.khung-hud { border: 1px solid var(--vien); background: rgba(18,20,17,.96); }
#thanh-tren { position: fixed; top: 16px; left: 50%; transform: translateX(-50%); display: flex; align-items: stretch; padding: 5px; gap: 4px; max-width: calc(100vw - 16px); }
.dong-ho { display: flex; flex-direction: column; justify-content: center; padding: .3rem .65rem; min-width: 80px; border: 1px solid transparent; }
.dong-ho .nhan { color: var(--chu-mo); font-size: .7rem; }
.gio { font-size: 1.1rem; line-height: 1.5; font-variant-numeric: tabular-nums; }
.dong-ho.dang-di { background: #2b2e26; border-color: var(--chu-mo); }
.dong-ho.sap-het-gio .gio { color: var(--do); }
#chi-bao-luot { display: flex; align-items: center; justify-content: center; padding: .5rem .7rem; }
#chi-bao-luot strong { font-size: .83rem; font-weight: 400; text-align: center; line-height: 1.5; }
#chi-bao-luot.bi-chieu { color: var(--do); }
#thanh-duoi { position: fixed; bottom: 18px; left: 50%; transform: translateX(-50%); padding: 4px; max-width: calc(100vw - 16px); pointer-events: auto; }
#nut-nhanh { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; }
#nut-nhanh .nut { font-size: .8rem; padding: .5rem .7rem; }

.huong-dan-dau { margin-bottom: 1rem; color: var(--chu-mo); font-size: .85rem; }
.huong-dan-dau p + p { margin-top: .6rem; }
.cac-quan { display: grid; grid-template-columns: 1fr 1fr; column-gap: 20px; }
.the-quan { display: flex; align-items: flex-start; gap: .8rem; padding: 1rem 0; border-bottom: 1px solid #34382f; }
.so-do-quan { flex: 0 0 72px; width: 72px; height: 72px; color: var(--chu); }
.the-quan h3 { margin-bottom: .3rem; }
.the-quan p { font-size: .78rem; color: var(--chu-mo); line-height: 1.7; }
.luat-ket-thuc { margin-top: 1.25rem; }
.luat-ket-thuc p { font-size: .82rem; color: var(--chu-mo); margin-top: .5rem; }
.ket-qua { max-width: 380px; margin: 0 auto; padding: .5rem 0; }
.ket-qua h2 { font-size: 1.6rem; }
#ket-qua-ly-do { font-size: .9rem; color: var(--chu-mo); margin-top: .7rem; }
.ghi-cong-noi-dung p { color: var(--chu-mo); font-size: .85rem; margin-bottom: 1rem; }

/* Online lobby: flat fields and room rows, no card wrapper per room. */
.khung-online { width: min(760px, 100%); }
.online-field { display: grid; gap: .4rem; min-width: 0; }
.online-field label { color: var(--chu-mo); font-size: .8rem; }
.online-field input {
    width: 100%; min-height: 44px; padding: .65rem; border: 1px solid var(--vien);
    background: var(--nen-nang); color: var(--chu); font-size: .88rem;
}
.online-field input:hover { border-color: var(--chu-mo); }
.online-actions { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 1rem; }
.online-actions .nut { flex: 1 1 auto; }
.online-auth { display: grid; gap: .8rem; margin-top: 1rem; }
.online-auth .online-note, .online-auth .online-error { margin-top: 0; }
.online-account { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .7rem; margin-top: .9rem; }
.online-account .online-note { margin-top: 0; }
.online-account .nut { flex: 0 0 auto; }
.online-form { display: grid; gap: .8rem; margin-top: 1rem; padding-top: 1rem; border-top: 1px solid #34382f; }
.online-row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .7rem; }
.online-row .nut { flex: 0 0 auto; }
.online-search { flex: 1 1 220px; }
.online-check { display: flex; align-items: center; gap: .55rem; min-height: 36px; color: var(--chu-mo); font-size: .82rem; }
.online-check input { width: 18px; height: 18px; accent-color: var(--chu); }
.online-note, .online-status { color: var(--chu-mo); font-size: .78rem; line-height: 1.7; margin-top: .8rem; }
.online-error { color: var(--do); font-size: .82rem; line-height: 1.7; margin-top: .8rem; }
.online-rooms { margin-top: .5rem; border-top: 1px solid #34382f; }
.online-room {
    display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(100px, .7fr) auto;
    align-items: center; gap: .8rem; padding: .85rem 0; border-bottom: 1px solid #34382f;
}
.online-room-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: .45rem 1rem; }
.online-room h3 { font-size: .92rem; }
.online-room p { color: var(--chu-mo); font-size: .74rem; line-height: 1.6; }
.online-room .nut { min-height: 40px; }
.online-room-meta { min-width: 0; overflow-wrap: anywhere; }
.online-code { font-size: .95rem; letter-spacing: .08em; color: var(--chu); }
.online-ten-phong { font-size: 1.45rem; line-height: 1.45; overflow-wrap: anywhere; }
.online-players { margin-top: 1rem; display: grid; gap: .35rem; }
.online-players p { font-size: .85rem; color: var(--chu-mo); }
.online-players strong { color: var(--chu); font-weight: 400; }
.online-result { margin-top: 1rem; padding-top: .8rem; border-top: 1px solid #34382f; }
.online-result p { font-size: .9rem; color: var(--chu-mo); }
.online-result strong { color: var(--chu); }
.online-footer { position: static; margin-bottom: calc(-1 * var(--dem)); }
#thanh-online {
    position: fixed; top: 86px; left: 50%; transform: translateX(-50%); z-index: 11;
    display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .8rem;
    max-width: calc(100vw - 16px); padding: .32rem .6rem;
    border: 1px solid var(--vien); background: rgba(18,20,17,.92);
    color: var(--chu-mo); font-size: .72rem; line-height: 1.5; pointer-events: none;
}
#thanh-online strong { color: var(--chu); font-weight: 400; }

/* Specific messages only. Full outlines, never colored edge rails or redundant headings. */
.lop-xac-nhan { position: fixed; inset: 0; z-index: 70; display: grid; place-items: center; padding: 20px; background: rgba(0,0,0,.75); }
.hop-xac-nhan { width: min(460px, 100%); max-height: calc(100dvh - 40px); overflow: auto; padding: 24px; background: var(--nen); border: 1px solid var(--vien); }
.hop-xac-nhan h2 { font-size: 1.2rem; }
.hop-xac-nhan p { font-size: .87rem; color: var(--chu-mo); margin: 1rem 0 1.5rem; }
#thong-bao { position: fixed; right: 18px; bottom: 85px; z-index: 80; display: flex; align-items: center; gap: .7rem; padding: .7rem .85rem; width: min(360px, calc(100vw - 32px)); background: var(--nen); border: 1px solid var(--vien); }
#thong-bao > span { flex: 1; min-width: 0; font-size: .8rem; line-height: 1.6; overflow-wrap: anywhere; }
#thong-bao.loi { color: var(--do); }

/* ── Kính khúc xạ (GlassSurface, port từ React Bits) ──────────────────────────
   Chính khung nhận backdrop-filter, không phải lớp con, để .khung-phu vẫn cuộn
   và .chan-hop vẫn dính đáy. Đây đúng hợp đồng CSS của bản gốc:
   .glass-surface--svg { backdrop-filter: var(--filter-id) saturate(…) }
   Thứ tự: nền mờ -> sheen (::before) -> rim (::after) -> chữ. */
.km-svg { position: absolute; width: 0; height: 0; overflow: hidden; pointer-events: none; }

.kinh-mo {
    position: relative;
    isolation: isolate;
    background: rgb(12 15 11 / .30);
}
/* Đường khúc xạ thật: bản đồ dịch chuyển do KinhMo sinh ra. */
.kinh-mo.kinh-mo--svg {
    -webkit-backdrop-filter: var(--filter-id) saturate(var(--glass-saturation, 1));
    backdrop-filter: var(--filter-id) saturate(var(--glass-saturation, 1));
}
/* Trình duyệt không vẽ được filter SVG trong backdrop-filter. */
.kinh-mo.kinh-mo--blur {
    -webkit-backdrop-filter: blur(18px) saturate(1.35) brightness(1.04);
    backdrop-filter: blur(18px) saturate(1.35) brightness(1.04);
    background: rgb(14 17 12 / .74);
}
/* Không có backdrop-filter nói chung: đục lên để chữ vẫn đọc được. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .kinh-mo { background: rgb(14 17 12 / .96); }
}

.kinh-mo::before,
.kinh-mo::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    corner-shape: inherit;
    pointer-events: none;
    z-index: -1;
}
/* Sheen: vệt sáng chéo 135°, đặc trưng nhất của bề mặt kính. */
.kinh-mo::before {
    background: linear-gradient(135deg,
        rgb(255 255 255 / .13) 0%,
        rgb(255 255 255 / .03) 32%,
        transparent 54%,
        transparent 74%,
        rgb(255 255 255 / .05) 100%);
}
/* Rim: chỉ vẽ vành 1px, ruột trong suốt, nhờ mask-composite xor.
   Vành bám theo corner-shape của khung nên cạnh vát vẫn còn. */
.kinh-mo::after {
    padding: 1px;
    background: linear-gradient(150deg,
        rgb(255 255 255 / .46),
        rgb(255 255 255 / .07) 45%,
        rgb(255 255 255 / .04) 62%,
        rgb(255 255 255 / .24));
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}

/* Thanh cuộn trên mặt kính: track trong suốt để không thành một vệt sáng
   dọc theo cạnh phải (thanh cuộn đục cũ trên nền trong suốt trông như mối nối). */
.kinh-mo::-webkit-scrollbar-track { background: transparent; }
.kinh-mo::-webkit-scrollbar-thumb { background: rgb(255 255 255 / .18); }
.kinh-mo::-webkit-scrollbar-thumb:hover { background: rgb(255 255 255 / .3); }

/* Khung có kính: bỏ nền đục cũ, giữ bóng đồ khối. Bán kính và corner-shape
   phải khớp với borderRadius truyền cho KinhMo (bản đồ dịch chuyển dùng cùng
   bán kính đó), nếu lệch thì vành khúc xạ không bám cạnh. */
.hop-xac-nhan.kinh-mo {
    background: rgb(12 15 11 / .70);
    border-color: transparent;
    border-radius: 14px;
    corner-shape: bevel;
    box-shadow: 0 10px 0 rgb(0 0 0 / .45), 0 26px 60px rgb(0 0 0 / .6);
}
#thong-bao.kinh-mo {
    background: rgb(12 15 11 / .74);
    border-color: transparent;
    border-radius: 10px;
    corner-shape: bevel;
    box-shadow: 0 5px 0 rgb(0 0 0 / .4), 0 12px 26px rgb(0 0 0 / .5);
}
.khung-phu.kinh-mo {
    background: rgb(12 15 11 / .72);
    border-radius: 18px;
    corner-shape: bevel;
    box-shadow: 0 8px 0 rgb(0 0 0 / .3), 0 20px 44px rgb(0 0 0 / .5);
}
.khung-hud.kinh-mo {
    background: rgb(12 15 11 / .55);
    border-color: transparent;
    border-radius: 10px;
    corner-shape: bevel;
    box-shadow: 0 6px 18px rgb(0 0 0 / .45);
}
#chu-thich-quan { position: fixed; top: 0; left: 0; z-index: 35; max-width: calc(100vw - 16px); padding: .5rem .7rem; background: var(--nen); border: 1px solid var(--vien); pointer-events: none; font-size: .8rem; }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: var(--nen); }
::-webkit-scrollbar-thumb { background: var(--vien); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

@media (max-width: 740px) {
    #lop-phu { padding: 12px; }
    .khung-phu { --dem: 20px; max-height: calc(100dvh - 24px); }
    .hang-cai-dat { grid-template-columns: 1fr; gap: .6rem; }
    .cong-tac { margin-left: 0; }
    .cac-quan { grid-template-columns: 1fr; }
    #nut-nhanh kbd { display: none; }
    .dong-ho { min-width: 65px; padding: .25rem .4rem; }
    #chi-bao-luot { padding: .4rem; }
    #chi-bao-luot strong { font-size: .75rem; }
    .online-room { grid-template-columns: 1fr auto; }
    .online-room-meta { grid-column: 1; }
    .online-room .online-vao { grid-column: 2; grid-row: 1 / span 2; }
    #thanh-online { top: 74px; font-size: .66rem; }
}
@media (max-width: 430px) {
    .nut-nhom button { padding: .55rem .5rem; }
    .chan-hop .hang-nut { width: 100%; }
    .chan-hop .hang-nut .nut { flex: 1; }
    #thanh-tren { top: 8px; }
    #nut-nhanh .nut { font-size: .75rem; padding: .5rem; }
    .gio { font-size: 1rem; }
}
@media (pointer: coarse) { .nut-bieu-tuong, .nut-nhac { min-width: 44px; min-height: 44px; } }
/* ── Menu chính: nhịp dọc và phân nhóm ─────────────────────────────────────── */
/* Tiêu đề menu đứng riêng một tầng, có đường kẻ chân để phần lệnh bên dưới
   bắt đầu rõ ràng thay vì dính sát chữ lớn. */
.khung-menu #trang-menu-tieu-de {
    padding-bottom: .7rem;
    border-bottom: 1px solid var(--vien);
    font-size: 1.7rem;
    letter-spacing: -.025em;
}
.lenh-menu { display: grid; gap: 8px; margin-top: 1.15rem; }
.lenh-menu > .nut { justify-content: flex-start; align-items: center; }
/* Vạch chia nhóm: việc trong ván ở trên, điều hướng ở dưới. */
.chia-menu { display: block; height: 1px; margin: 4px 0; background: var(--vien); }
.chan-menu { margin-top: 1.15rem; padding-top: .9rem; border-top: 1px solid var(--vien); }
/* Nhạc: nhãn một dòng, thanh trượt một dòng — không dồn vào một hàng ngang
   trong khung hẹp 330px. */
.nhac-nhanh { border-top: 0; padding-top: 0; display: grid; gap: .55rem; }
.nhac-nhanh .am-luong { width: 100%; }
.nhac-nhanh .nut-nhac { justify-self: start; }

html[data-giam-chuyen-dong="bat"] *, html[data-giam-chuyen-dong="bat"] *::before, html[data-giam-chuyen-dong="bat"] *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }