:root{ /* ── Giao diện SƠN MÀI: đỏ son, vàng đồng, chữ vàng kem ── Trước đây đây là bảng SÁNG (nền trời nhạt, thẻ trắng, nhấn xanh dương). Bỏ đi vì hai lẽ: nó không cùng nhà với bàn cờ gỗ vàng chữ đỏ nằm giữa trang, và mặc định của trang đã là nền tối từ lâu nên gần như không ai bấm sang. Nay nấc ấy là sơn mài — cùng bảng màu với trang chủ. Số đo giữ đúng ràng buộc của bảng tối: • thẻ nổi hơn nền 1.22 lần (cần ≥1.20 thì mắt mới tách được hai lớp) • chữ mờ nhất (--faint) đạt 5.11 trên mặt thẻ, trên ngưỡng 4.5 của WCAG AA • chữ trên nút vàng đạt 10.6 Mọi thứ nằm TRÊN MẶT GỖ vẫn giữ nguyên như trước (--board-trim, --hint, --last): bàn cờ không đổi màu theo giao diện. */ --bg:#2A0A08; --surface:#46180F; --surface-2:#38120C; --edge:#6B2E22; --ink:#F4E7C8; --muted:#C9A882; --faint:#B4906A; --gold:#D9A441; --gold-soft:#A97C34; --gold-vivid:#F0C868; --grad:linear-gradient(135deg,#F0C868 0%,#B3221E 100%); --on-accent:#3A0C0A; --cinnabar:#EC6A5C; /* Xanh "được việc": dùng cho dòng báo đã lưu và nhãn tin công khai. Trên nền đỏ son thì xanh ngọc là màu DUY NHẤT không lẫn vào đâu — vàng thì trùng màu nhấn, đỏ thì trùng nền. */ --jade:#5DCD98; /* Viền quân đang chọn. Cố định cho cả sáng lẫn tối như mọi màu bàn cờ khác: người chơi nhớ "quân sáng xanh là quân mình đang cầm", đổi màu theo chế độ máy thì mỗi lúc một khác. Xanh lục chứ không lấy màu nhấn của trang — nhấn của trang là vàng/hổ phách, đúng màu ô đánh dấu nước vừa đi. */ --chon:#12B981; --piece-red:#B02A1C; --piece-black:#123048; --jet:#1A0605; --wood-1:#FCDFAC; --wood-2:#F6D08D; --wood-3:#EFC077; --wood-ink:rgba(120,72,24,.16); --board:#F6D08D; --board-2:#EFC077; --board-trim:#C98B2E; --line:#4A260C; --disc:#FDF8EE; --disc-2:#F2E7D2; --disc-edge:#9A7443; /* VÀNH GỖ quanh con cờ — thứ làm nên khối ở PHÍA NGOÀI mặt cờ. Bảy vòng đồng tâm nhích dần ra, sáng ở trong tối dần ra ngoài, cộng một vệt bắt sáng lệch lên trên-trái cho đúng hướng nguồn sáng của mặt cờ. Ở cỡ bàn thường mỗi vòng chưa dày tới một điểm ảnh, nên mắt đọc cả dãy thành MỘT mặt cong chứ không thành bảy vòng riêng. Gói vào một biến vì ba nơi phải dùng đúng dãy này — quân thường, quân đang chọn, quân đang bay. Ba nơi ấy đều viết đè cả box-shadow, nên chép tay ra ba chỗ là bảo đảm có ngày lệch nhau. Màu ĐẶT CỨNG chứ không lấy theo biến chủ đề: bàn cờ phải giữ nguyên màu ở cả chế độ sáng lẫn tối. */ --vanh-quan: 0 0 0 .14cqw #F1DBAB, 0 0 0 .27cqw #E0B972, 0 0 0 .41cqw #C79647, -.07cqw -.11cqw 0 .53cqw #F6E4BC, 0 0 0 .56cqw #A6762F, 0 0 0 .68cqw #7C511E, 0 0 0 .75cqw #4A2C0E; /* VÀNH VÁT ở mặt trong, ngay sát vành gỗ: một nét sáng ôm nửa trên-trái và một nét tối ôm nửa dưới-phải, cả hai đều SẮC cạnh chứ không loang. Đây là thứ làm con cờ đọc ra như một khối kim loại dập chìm chứ không phải một đĩa gỗ phẳng — cùng kiểu vát mà trình duyệt vẽ cho viền "outset". Dùng ở BỐN chỗ: quân thường, quân đang chọn, quân đang bay, và quân trong khay soạn thế cờ. Gói vào biến vì cả bốn chỗ đều viết đè cả box-shadow. */ --vat-quan: inset .34cqw .34cqw 0 rgba(226,226,228,.92), inset -.34cqw -.34cqw 0 rgba(42,42,48,.68); --shadow:rgba(0,0,0,.45); --shadow-strong:rgba(0,0,0,.62); --hint:rgba(201,139,46,.92); --last:rgba(201,139,46,.30); --radius:14px; } /* ── Giao diện TỐI: tím, một bảng màu DUY NHẤT ── Trước đây bảng tối chép ra hai chỗ: một cho máy đặt "theo hệ thống", một cho người tự bấm nút tối. Đổi một màu phải nhớ sửa cả hai, quên một chỗ là hai chế độ lệch nhau — và không ai phát hiện ra cho tới khi có người bấm nút. Giờ giá trị thật nằm đúng MỘT chỗ (--t-*), hai khối dưới chỉ trỏ vào đó. Muốn chỉnh màu thì sửa một dòng. Độ sáng chọn theo số đo, không theo cảm tính: • thẻ phải nổi hơn nền ít nhất 1.2 lần thì mắt mới tách được hai lớp; bảng cũ chỉ 1.19 nên thẻ chìm lẫn vào nền. • chữ mờ (--faint) dùng cho hạt giống, lượt hiện, giờ giấc — phải đạt 4.5 theo WCAG AA; bảng cũ chỉ 3.82, tức là không đọc nổi trong nắng. • nền cũ tối L=0.008, gần như đen tuyền; nâng lên 0.013 vẫn tối mà bớt cảm giác thủng một lỗ đen giữa màn hình. */ :root{ --t-bg:#241640; --t-surface:#3A2768; --t-surface-2:#2E1D54; --t-edge:#59417F; --t-ink:#F4F0FF; --t-muted:#C3B4E0; --t-faint:#A695CB; --t-gold:#FFD84D; --t-gold-soft:#9A8038; --t-gold-vivid:#FFD84D; --t-grad:linear-gradient(135deg,#FFD84D 0%,#FFC01F 100%); --t-on-accent:#241541; --t-cinnabar:#FF8574; --t-jade:#5FE0B0; --t-piece-red:#C22E1B; --t-piece-black:#1C0F2E; --t-jet:#241541; --t-wood-1:#E6BE7E; --t-wood-2:#DBAF6B; --t-wood-3:#CFA25C; --t-wood-ink:rgba(70,38,8,.20); --t-board:#DBAF6B; --t-board-2:#CFA25C; --t-board-trim:#8A5C16; --t-line:#2A1405; --t-disc:#F0E6D2; --t-disc-2:#DDCDB0; --t-disc-edge:#7A5C36; --t-shadow:rgba(0,0,0,.5); --t-shadow-strong:rgba(0,0,0,.68); --t-hint:rgba(138,92,22,.95); --t-last:rgba(138,92,22,.34); } /* Hai lối vào chế độ tối, cùng trỏ về một bảng màu ở trên. */ @media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){ --bg:var(--t-bg); --surface:var(--t-surface); --surface-2:var(--t-surface-2); --edge:var(--t-edge); --ink:var(--t-ink); --muted:var(--t-muted); --faint:var(--t-faint); --gold:var(--t-gold); --gold-soft:var(--t-gold-soft); --gold-vivid:var(--t-gold-vivid); --grad:var(--t-grad); --on-accent:var(--t-on-accent); --cinnabar:var(--t-cinnabar); --jade:var(--t-jade); --jet:var(--t-jet); --shadow:var(--t-shadow); --shadow-strong:var(--t-shadow-strong); /* Màu BÀN CỜ cố tình KHÔNG đổi theo sáng/tối. Bàn cờ tướng là vật thật — gỗ vàng, chữ đỏ và đen — chứ không phải một khối giao diện; đổi nó theo chế độ máy thì cùng một ván nhìn ra hai bàn khác nhau, mà người chơi nhận diện quân bằng màu. Nên --wood-*, --board*, --line, --disc*, --piece-*, --hint, --last chỉ khai báo MỘT lần ở :root và giữ nguyên. Trang xung quanh vẫn đổi tối bình thường. */ } } :root[data-theme="dark"]{ --bg:var(--t-bg); --surface:var(--t-surface); --surface-2:var(--t-surface-2); --edge:var(--t-edge); --ink:var(--t-ink); --muted:var(--t-muted); --faint:var(--t-faint); --gold:var(--t-gold); --gold-soft:var(--t-gold-soft); --gold-vivid:var(--t-gold-vivid); --grad:var(--t-grad); --on-accent:var(--t-on-accent); --cinnabar:var(--t-cinnabar); --jade:var(--t-jade); --jet:var(--t-jet); --shadow:var(--t-shadow); --shadow-strong:var(--t-shadow-strong); /* Màu bàn cờ giữ nguyên — xem ghi chú ở khối tối phía trên. */ } *{box-sizing:border-box} body{ margin:0; background:var(--bg); color:var(--ink); font-family:"Be Vietnam Pro","Segoe UI",system-ui,-apple-system,sans-serif; font-size:15px; line-height:1.55; -webkit-font-smoothing:antialiased; } /* ── Liên kết ───────────────────────────────────────────────────────── Trước đây KHÔNG có quy tắc nào cho , nên trình duyệt lấy màu mặc định của chính nó: #0000EE khi chưa xem và #551A8B khi đã xem. Trên nền tối của trang, hai màu ấy chỉ đạt 1.14–1.95:1 — coi như không đọc được. Và vì màu "đã xem" tối hơn màu "chưa xem" nên cùng một bảng lại có dòng đậm dòng nhạt, trông như lỗi dữ liệu. Lấy màu nhấn của giao diện: 7.88:1 ở bảng sơn mài, 9.09:1 ở bảng tối. :visited giữ NGUYÊN màu — trong bảng danh sách, việc "đã bấm vào giải này chưa" không phải thông tin cần khoe, mà đổi màu thì hàng lại lem nhem. Chỗ nào cần khác (nút, chân trang, thẻ vinh danh) đã có quy tắc riêng đè lên nhờ độ ưu tiên cao hơn. */ a{color:var(--gold-vivid)} a:visited{color:var(--gold-vivid)} a:focus-visible{outline:2px solid var(--gold);outline-offset:2px;border-radius:4px} .wrap{ max-width:1040px; margin:0 auto; padding:28px 20px 56px; display:flex; flex-direction:column; gap:22px; } /* ---------- header ---------- */ header{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap} /* Khối tên trang CO ĐƯỢC. `header` là flex-wrap:wrap, nên khi tên trang cộng hàng công cụ dài hơn bề ngang một chút là hàng công cụ rơi hẳn xuống dòng thứ hai — đầu trang cao thêm chừng 80px, và mấy trang tính bàn cờ theo chỗ trống còn lại (trang đánh với máy, phòng đấu) mất đúng ngần ấy chiều cao bàn cờ. Đã xảy ra thật: thêm đúng một nút 36px vào hàng công cụ là trang "Đánh với máy" ở khổ 1440 rơi từ một dòng xuống hai. Cắt bớt dòng phụ đề bao giờ cũng đỡ hơn là gãy cả bố cục — và flex chỉ cắt khi THẬT SỰ hết chỗ, màn rộng thì phụ đề vẫn nguyên câu. */ /* `flex:1 1 200px` chứ không phải để mặc: flex XUỐNG DÒNG TRƯỚC KHI CO. Nó xếp từng khối lên dòng theo bề rộng NỘI DUNG, và chỉ co những khối đã nằm sẵn trên dòng ấy — nên `min-width:0` một mình không cứu được gì. Khai một bề rộng cơ sở nhỏ thì cả hai khối luôn vừa một dòng, rồi `flex-grow` trả lại cho tên trang đúng phần còn thừa. */ .brand{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1 1 200px} .brand .tagline{overflow:hidden;text-overflow:ellipsis;white-space:nowrap} /* Mã phòng thì KHÔNG cắt: đó là dãy ký tự người ta đọc cho bạn qua điện thoại, mất một ký tự cuối là bạn vào nhầm phòng. Luật này lặp lại ở khổ hẹp (dòng ~1313) vì cùng một lý do. */ .brand .tagline.ma-phong{overflow:visible;text-overflow:clip} h1{ font-family:Fraunces,Georgia,serif; font-weight:700; font-size:clamp(28px,4.2vw,40px); letter-spacing:-.02em; line-height:1; margin:0; text-wrap:balance; } .tagline{color:var(--muted);font-size:13.5px} .rule{height:2px;border-radius:2px;background:var(--grad);opacity:.55} /* ---------- logo ban quản trị tải lên ---------- Máy chủ chèn thẻ vào trong

và đánh dấu data-logo="thay" hoặc "canh". Không có logo thì không có thuộc tính nào, nên mọi luật dưới đây ngủ yên — đầu trang giữ nguyên như cũ. Đo bằng `em` chứ không phải px: cỡ chữ h1 đã là clamp() co theo bề ngang màn, nên logo tự đi theo và không cần thêm một nấc @media nào nữa. */ h1[data-logo], h1[data-logo] a{display:flex;align-items:center;gap:9px} .logo-anh{ height:1.15em; width:auto; max-width:min(46vw, 240px); flex:none; display:block; object-fit:contain; } /* "Ảnh thay chữ": giấu chữ khỏi MẮT chứ không xoá khỏi trang — máy đọc màn hình và máy tìm kiếm vẫn cần đọc được tên trang, mà

rỗng thì Google coi như trang không có tiêu đề chính. */ h1[data-logo="thay"] .th-chu{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0; } /* ---------- layout ---------- */ /* Một cột duy nhất, căn giữa. Trước đây có thêm cột phải 296px cho biên bản, nhưng biên bản đã chuyển xuống dưới bàn cờ nên cột đó chỉ còn là khoảng trống kéo lệch bàn cờ sang trái. */ .game{display:grid;grid-template-columns:minmax(0,1fr);justify-items:center} .board-col{width:100%} /* ---------- board ---------- */ .board-col{display:flex;flex-direction:column;gap:10px;align-items:center; /* Một bề ngang duy nhất cho bàn cờ, hai thanh kỳ thủ và thanh thoại — trước đây mấy thanh này co theo chữ nên hẹp hơn bàn cờ, nhìn rời rạc. Kẹp thêm theo chiều cao màn hình để cả cụm luôn nằm trong một khung hình: bàn cờ cao gấp 632/572 lần bề ngang, nên bề ngang tối đa = cao * 0.905. */ --bw:min(100%, 660px, max(420px, (100vh - 360px) * 0.905)); --bw:min(100%, 660px, max(420px, (100svh - 360px) * 0.905)); } .board-col > *{width:var(--bw)} /* mọi thẻ rộng đúng bằng bàn cờ */ .tray{ min-height:30px;display:flex;align-items:center;gap:5px;flex-wrap:wrap; padding:5px 10px;border-radius:9px;background:var(--surface-2); border:1px solid var(--edge); } .tray .lbl{font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:var(--faint);margin-right:4px} .tray b{ font-family:"Noto Serif TC","Songti SC",serif;font-weight:700;font-size:15px; width:21px;height:21px;display:grid;place-items:center;border-radius:50%; background:var(--disc-2);border:1px solid var(--disc-edge); } .tray b.r{color:var(--piece-red)} .tray b.b{color:var(--piece-black)} .board-shell{ position:relative; container-type:inline-size; width:var(--bw, min(100%, 660px)); margin:0 auto; border-radius:var(--radius); /* Vân gỗ dựng bằng gradient chồng lớp thay vì ảnh: không thêm byte tải về, nét sắc ở mọi mật độ điểm ảnh, và đổi màu theo chế độ sáng/tối được. Ba lớp sọc dọc mật độ lệch nhau (3px / 7px / 13px — số nguyên tố nên không trùng chu kỳ) cho ra vân không lặp lại lộ liễu, cộng một lớp loang ngang giả thớ gỗ và một lớp tối bốn góc cho có chiều sâu. */ background-color:var(--board); /* Gỗ vàng, mặt mượt — không vân sọc. Chỉ hai lớp loang rất nhẹ để mặt bàn có chiều sâu chứ không phẳng lì như tờ giấy màu: một vệt sáng phía trên giả ánh đèn hắt xuống, một vệt tối bốn góc dưới. */ background-image: radial-gradient(120% 80% at 50% -8%, rgba(255,255,255,.22), transparent 58%), radial-gradient(160% 130% at 50% 118%, var(--wood-ink), transparent 72%), linear-gradient(158deg, var(--wood-1) 0%, var(--wood-2) 62%, var(--wood-3) 100%); /* Viền ngoài cùng lấy ĐÚNG màu nét kẻ trên bàn, để cả bàn cờ nhìn như một mặt gỗ có khung chứ không phải mặt gỗ dán thêm một cái nẹp khác màu. */ border:1px solid var(--line); box-shadow:0 1px 0 rgba(255,255,255,.16) inset, 0 14px 34px -18px var(--shadow-strong); padding:0; overflow:hidden; } /* SVG mặc định là phần tử NỘI TUYẾN, nên nó ngồi trên đường cơ chữ và chừa thêm khoảng trống cho phần đuôi chữ bên dưới — ở đây là ~6px. Quân cờ lại đặt theo phần trăm CHIỀU CAO CỦA THẺ BỌC, mà thẻ bọc cao hơn cái lưới đúng ngần ấy, nên quân trôi dần xuống theo từng hàng: hàng đầu lệch 0,5px còn hàng cuối lệch tới 5,8px — đúng hàng quân của chính mình. display:block bỏ khoảng đuôi chữ ấy đi, thẻ bọc cao đúng bằng lưới, quân nằm khít giao điểm. */ .board-shell > svg{display:block} .board-shell::after{ /* Khung trong. Đo bằng cqw (phần trăm bề ngang bàn cờ) chứ không phải px, nên kéo to kéo nhỏ thì khoảng hở ra mép vẫn đúng tỉ lệ — y như lưới ô cờ vẽ trong SVG. Để px thì bàn cờ 269px và bàn cờ 660px có khung dày như nhau, nhìn lệch hẳn. */ content:"";position:absolute;inset:1.5cqw;border-radius:1.7cqw; border:.34cqw solid var(--line);opacity:.5;pointer-events:none; } #grid{display:block;width:100%;height:auto} #layer{position:absolute;inset:0} .pc{ position:absolute; width:8.9cqw;height:8.9cqw; margin:-4.45cqw 0 0 -4.45cqw; border-radius:50%; display:grid;place-items:center; font-family:"Noto Serif TC","Songti SC",serif; font-weight:700; font-size:5.0cqw; line-height:1; cursor:pointer; /* Ba lớp nền chồng lên nhau cho ra một mặt CONG chứ không phải vòng tròn phẳng: đốm sáng lệch trên-trái (nguồn sáng), vệt tối gom ở đáy (phần khuất), rồi mới tới nền gỗ. */ background: radial-gradient(circle at 33% 25%, rgba(255,255,255,.92) 0%, rgba(255,255,255,0) 44%), radial-gradient(circle at 50% 116%, rgba(112,66,20,.34) 0%, rgba(112,66,20,0) 56%), radial-gradient(circle at 34% 28%, var(--disc) 0%, var(--disc-2) 78%); /* Bóng đổ HAI tầng: một tầng sát chân quân (đậm, hẹp) và một tầng loang ra (nhạt, rộng). Một tầng duy nhất thì quân trông như dán lên mặt bàn. Rồi vành gỗ ngoài, rồi ba vệt vát trong — sáng ở mép trên, tối ở mép dưới — đó mới là thứ làm con cờ nhô lên khỏi mặt bàn. */ box-shadow: var(--vanh-quan), var(--vat-quan), /* Bóng đổ BA tầng: sát chân, loang vừa, rồi một tầng rất rộng rất nhạt — tầng thứ ba mới là thứ cho cảm giác quân đứng CAO hẳn khỏi mặt bàn. */ 0 .42cqw .55cqw -.12cqw color-mix(in srgb, var(--line) 56%, transparent), 0 1.45cqw 2.15cqw -.48cqw color-mix(in srgb, var(--line) 64%, transparent), 0 2.70cqw 3.90cqw -1.10cqw color-mix(in srgb, var(--line) 50%, transparent), inset 0 .40cqw .48cqw -.28cqw rgba(255,255,255,.95), inset 0 -.52cqw .62cqw -.34cqw rgba(112,66,20,.44), inset .16cqw -.16cqw .30cqw -.16cqw rgba(112,66,20,.20); transition:left .26s cubic-bezier(.3,.8,.35,1),top .26s cubic-bezier(.3,.8,.35,1),opacity .18s,transform .18s; user-select:none; z-index:2; } /* Vòng trong: KHẮC CHÌM chứ không phải vẽ lên. Một nét sáng ngay dưới nét màu là đủ để mắt đọc ra chiều sâu. */ .pc::before{ content:"";position:absolute;inset:.75cqw;border-radius:50%; border:.22cqw solid currentColor;opacity:.62; box-shadow:0 .1cqw 0 rgba(255,255,255,.55), inset 0 .1cqw .12cqw rgba(112,66,20,.18); } .pc.r{color:var(--piece-red)} .pc.b{color:var(--piece-black)} .pc.dead{opacity:0;transform:scale(.5);pointer-events:none} /* Quân đang cầm: viền xanh sáng kèm một quầng loang mờ, và NHẤC LÊN một chút. Giữ nguyên bóng đổ với vệt vát — bỏ đi thì quân vừa được chọn lại bẹt xuống, trông như bị ấn chìm vào mặt bàn thay vì được nhấc lên. */ .pc.sel{ box-shadow: /* Vành gỗ giữ NGUYÊN, viền xanh ôm ra ngoài nó chứ không đè lên: đè lên thì quân vừa được chọn lại mất mất bề dày, trông mỏng hơn lúc chưa chọn. */ var(--vanh-quan), var(--vat-quan), 0 0 0 .90cqw var(--chon), 0 0 0 1.55cqw color-mix(in srgb, var(--chon) 30%, transparent), 0 0 2.9cqw .18cqw color-mix(in srgb, var(--chon) 62%, transparent), 0 .48cqw .58cqw -.16cqw color-mix(in srgb, var(--line) 46%, transparent), 0 1.65cqw 2.40cqw -.50cqw color-mix(in srgb, var(--line) 54%, transparent), 0 2.80cqw 4.00cqw -1.30cqw color-mix(in srgb, var(--line) 38%, transparent), inset 0 .40cqw .48cqw -.28cqw rgba(255,255,255,.95), inset 0 -.52cqw .62cqw -.34cqw rgba(112,66,20,.44); transform:translateY(-.45cqw); /* Vành xanh nhô ra sát quân bên cạnh, nên phải nổi lên trên chúng — không thì nó bị chính quân hàng xóm cắt mất một góc. */ z-index:5; } .pc.idle{cursor:default} /* Tướng đang bị chiếu: một quầng đỏ THỞ quanh quân — phồng lên rồi lặn xuống chứ không nhấp nháy tắt-bật, vì tắt-bật thì mắt đọc ra "lỗi" chứ không đọc ra "nguy". Quầng vẽ bằng ::after và chỉ đổi opacity với transform, nên nó chạy trên trình dựng hình chứ không bắt trình duyệt tính lại bóng đổ 60 lần mỗi giây. Tên khung hình phải RIÊNG: bản trước đặt tên "pulse", mà "pulse" đã là khung hình của chấm xanh "đang nói" ở dưới tệp — luật sau đè luật trước, nên suốt thời gian qua tướng bị chiếu chỉ mờ đi rồi rõ lại, không hề có màu đỏ nào. */ .pc.check{z-index:4} .pc.check::after{ content:"";position:absolute;inset:-1.25cqw;border-radius:50%;pointer-events:none; background:radial-gradient(circle, transparent 56%, color-mix(in srgb, var(--cinnabar) 42%, transparent) 71%, color-mix(in srgb, var(--cinnabar) 12%, transparent) 88%, transparent 100%); box-shadow: 0 0 0 .34cqw color-mix(in srgb, var(--cinnabar) 92%, transparent), 0 0 3.0cqw .35cqw color-mix(in srgb, var(--cinnabar) 66%, transparent); animation:chieuTho 1.5s ease-in-out infinite; } /* Đáy nhịp thở dừng ở .58 chứ không xuống .4: thấp quá thì có lúc quầng gần như biến mất, và người vừa ngước lên đúng nhịp ấy sẽ không thấy mình đang bị chiếu — thứ nguy hiểm nhất trên bàn cờ mà lại là thứ mờ nhất. */ @keyframes chieuTho{ 0%,100%{opacity:.58;transform:scale(.95)} 50% {opacity:1; transform:scale(1.10)} } @media (prefers-reduced-motion: reduce){ .pc.check::after{animation:none;opacity:.85;transform:none} } .dot{position:absolute;width:2.6cqw;height:2.6cqw;margin:-1.3cqw 0 0 -1.3cqw;border-radius:50%;background:var(--hint);z-index:1;cursor:pointer;transition:transform .15s} .dot:hover{transform:scale(1.35)} .ring{position:absolute;width:9.9cqw;height:9.9cqw;margin:-4.95cqw 0 0 -4.95cqw;border-radius:50%;border:.4cqw solid var(--hint);z-index:3;cursor:pointer} .mark{position:absolute;width:10.6cqw;height:10.6cqw;margin:-5.3cqw 0 0 -5.3cqw;border-radius:50%;border:.34cqw solid var(--board-trim);opacity:.55;z-index:0} /* ---------- rail ---------- */ .rail{display:flex;flex-direction:column;gap:12px;max-width:320px} .card{background:var(--surface);border:1px solid var(--edge);border-radius:var(--radius);padding:14px} .status{display:flex;flex-direction:column;gap:3px} .status .who{font-family:Fraunces,Georgia,serif;font-size:19px;font-weight:600;letter-spacing:-.01em} .status .sub{font-size:12.5px;color:var(--muted);min-height:19px} .status.alert .who{color:var(--cinnabar)} .field{display:flex;flex-direction:column;gap:6px} .field + .field{margin-top:12px} .field label{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--faint)} .seg{display:flex;background:var(--surface-2);border:1px solid var(--edge);border-radius:9px;padding:3px;gap:3px} .seg button{ flex:1;appearance:none;border:0;background:transparent;color:var(--muted); font:inherit;font-size:13px;padding:6px 4px;border-radius:6px;cursor:pointer;transition:.15s; } .seg button:hover{color:var(--ink)} .seg button[aria-pressed="true"]{background:var(--surface);color:var(--ink);font-weight:600;box-shadow:0 1px 3px var(--shadow)} .seg button:focus-visible{outline:2px solid var(--gold);outline-offset:1px} .row{display:flex;gap:8px;margin-top:12px} .btn{ flex:1;appearance:none;font:inherit;font-size:13.5px;cursor:pointer; padding:9px 10px;border-radius:9px;border:1px solid var(--edge); background:var(--surface-2);color:var(--ink);transition:.15s; } .btn:hover{border-color:var(--gold-soft)} .btn:focus-visible{outline:2px solid var(--gold);outline-offset:1px} /* Nút chính: vàng tươi + chữ tím thẫm ở CẢ hai chế độ. Tương phản ~9:1, và nhờ vậy không phải bịa ba luật khác nhau cho sáng/tối/theo-máy như trước. */ .btn.primary{background:var(--grad);border-color:transparent; color:var(--on-accent);font-weight:600} .btn.primary:hover{filter:brightness(1.06)} .btn:disabled{opacity:.42;cursor:not-allowed} .log-head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:8px} .log-head span{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--faint)} #log{max-height:224px;overflow-y:auto;font-size:13px;font-variant-numeric:tabular-nums} #log table{width:100%;border-collapse:collapse} #log td{padding:2.5px 4px;vertical-align:top} #log td.n{color:var(--faint);width:26px;text-align:right} #log td.r{color:var(--cinnabar)} #log td.b{color:var(--ink)} #log tr:last-child td{font-weight:600} .empty{color:var(--faint);font-size:12.5px;padding:4px} footer{color:var(--faint);font-size:12px;line-height:1.7} footer b{color:var(--muted);font-weight:500} @media (prefers-reduced-motion: reduce){ *{animation-duration:.001ms !important;transition-duration:.001ms !important} } @media (max-width:560px){ .wrap{padding:18px 12px 28px} .game{gap:16px} .player{padding:10px 11px} .row{flex-direction:column} .btn{min-height:44px} .linkbox,.chat-form,.banner{flex-direction:column} .linkbox .btn,.chat-form .btn,.banner .btn{width:100%} .chat-bubble{max-width:100%} .status .who{font-size:18px} } /* ═══════════ phần riêng cho bản chơi online ═══════════ */ .player{display:flex;align-items:center;gap:10px;padding:11px 13px;border-radius:var(--radius); background:var(--surface);border:1px solid var(--edge)} .player.turn{border-color:var(--gold);box-shadow:0 0 0 3px var(--last)} .player .side{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;flex:none; font-family:"Noto Serif TC","Songti SC",serif;font-weight:700;font-size:16px; background:radial-gradient(circle at 34% 28%,var(--disc) 0%,var(--disc-2) 78%); border:1px solid var(--disc-edge)} .player .side.r{color:var(--piece-red)} .player .side.b{color:var(--piece-black)} .player .meta{flex:1;min-width:0} .player .nm{font-weight:600;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .player .st{font-size:11.5px;color:var(--muted);display:flex;align-items:center;gap:5px} .player .st i{width:6px;height:6px;border-radius:50%;background:var(--faint);display:inline-block;flex:none} .player .st i.on{background:#3E9E63} .player .st i.off{background:#C2703F} /* Dòng "Tới lượt bạn" / "Đang suy nghĩ…" phải đọc được từ xa: nó là thứ quyết định người ta có đang phải làm gì hay không. To hơn, đậm hơn, màu vàng nổi — chứ để bằng cỡ chữ chú thích xám nhạt thì liếc qua không thấy. */ .player .st.luot span{color:var(--gold-vivid); font-weight:600; font-size:13px} .player .st.luot i{background:var(--gold-vivid); box-shadow:0 0 0 3px color-mix(in srgb, var(--gold) 28%, transparent)} .clock{font-variant-numeric:tabular-nums;font-size:19px;font-weight:600;letter-spacing:-.01em; font-family:Fraunces,Georgia,serif} .clock.low{color:var(--cinnabar)} .invite{background:var(--surface);border:1px solid var(--gold-soft);border-radius:var(--radius);padding:14px; display:flex;flex-direction:column;gap:10px} .invite h3{margin:0;font-family:Fraunces,Georgia,serif;font-size:16px;font-weight:600} .invite p{margin:0;font-size:12.5px;color:var(--muted)} .linkbox{display:flex;gap:6px} .linkbox input{flex:1;min-width:0;font:inherit;font-size:12.5px;padding:8px 10px;border-radius:8px; border:1px solid var(--edge);background:var(--surface-2);color:var(--ink)} .code{font-family:Fraunces,Georgia,serif;font-size:26px;letter-spacing:.16em;font-weight:700;color:var(--gold)} .toast{position:fixed;left:50%;bottom:26px;transform:translateX(-50%) translateY(12px); background:var(--ink);color:var(--bg);padding:10px 18px;border-radius:999px;font-size:13.5px; opacity:0;pointer-events:none;transition:.22s;z-index:50;box-shadow:0 8px 24px -8px var(--shadow-strong)} .toast.show{opacity:1;transform:translateX(-50%) translateY(0)} .banner{border-radius:var(--radius);padding:12px 14px;font-size:13.5px;display:flex;gap:10px; align-items:center;justify-content:space-between;background:var(--surface);border:1px solid var(--gold)} .banner .btn{flex:none;padding:6px 12px;font-size:12.5px} .chat-card{display:flex;flex-direction:column;gap:10px} .chat-list{max-height:220px;overflow-y:auto;display:flex;flex-direction:column;gap:8px;padding-right:4px} .chat-msg{display:flex} .chat-msg.me{justify-content:flex-end} .chat-bubble{max-width:86%;padding:8px 10px;border-radius:12px;background:var(--surface-2);border:1px solid var(--edge)} .chat-msg.me .chat-bubble{background:rgba(156,122,51,.12);border-color:var(--gold-soft)} .chat-head{display:flex;justify-content:space-between;gap:6px;font-size:10.5px;color:var(--muted);margin-bottom:3px} .chat-head span{font-weight:600;color:var(--ink)} .chat-text{font-size:13px;line-height:1.45;word-break:break-word} .chat-form{display:flex;gap:8px;align-items:center;margin-top:2px} .chat-form .text{flex:1;min-width:0} /* Nút gửi là một BIỂU TƯỢNG, không phải nút chữ. .btn để flex:1 nên mặc định nó giằng co với ô nhập và ăn mất gần nửa hàng — ô nhập chỉ còn một mẩu. Ghim thành ô vuông để ô nhập lấy trọn phần còn lại. Cả luật màn hẹp ở trên (xếp dọc, nút rộng 100%) cũng phải trừ ra: một cái biểu tượng kéo dài hết bề ngang trông như lỗi. Nút phải VUÔNG và cao đúng bằng ô nhập, nên hai đứa lấy chung một con số `--cf-cao` thay vì mỗi đứa tự cao theo chữ bên trong. Đã thử `align-items:stretch` + `aspect-ratio:1`: KHÔNG chạy. Trình duyệt giải tỉ lệ trước rồi mới tới stretch, nên nút lấy chiều cao theo cái biểu tượng 19px bên trong và co thành ô vuông 21px. */ .chat-form:has(.btn.icon){flex-direction:row; align-items:center; --cf-cao:42px} .chat-form:has(.btn.icon) .text{height:var(--cf-cao)} .chat-form .btn.icon{ flex:0 0 auto; padding:0; min-width:0; width:var(--cf-cao); height:var(--cf-cao); min-height:var(--cf-cao)} /* ═══════════ trang sảnh ═══════════ */ .lobby{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:22px;align-items:start} @media (max-width:760px){.lobby{grid-template-columns:minmax(0,1fr)}} .stack{display:flex;flex-direction:column;gap:12px} .card h2{margin:0 0 4px;font-family:Fraunces,Georgia,serif;font-size:18px;font-weight:600} .card p.hint{margin:0 0 12px;font-size:12.5px;color:var(--muted)} input.text{width:100%;font:inherit;font-size:14px;padding:10px 12px;border-radius:9px; border:1px solid var(--edge);background:var(--surface-2);color:var(--ink)} input.text:focus-visible{outline:2px solid var(--gold);outline-offset:1px} .roomlist{display:flex;flex-direction:column;gap:7px;max-height:340px;overflow-y:auto} .roomrow{display:flex;align-items:center;gap:10px;padding:9px 11px;border-radius:9px; background:var(--surface-2);border:1px solid var(--edge)} .roomrow .nm{flex:1;font-size:13.5px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .roomrow .tag{font-size:11px;color:var(--faint);letter-spacing:.06em;text-transform:uppercase} .roomrow .btn{flex:none;width:auto;padding:6px 14px;font-size:12.5px} /* ═══════════ bố cục điện thoại: bàn cờ không bao giờ bị che ═══════════ */ /* Nguyên tắc: bàn cờ + hai thanh kỳ thủ phải nằm gọn trong màn hình đầu tiên, mọi thứ khác (mời bạn, biên bản, chat, bình luận, quảng cáo) đẩy xuống dưới và chỉ đọc được khi cuộn. Không có gì dán đè, không có gì nổi lên trên. Dùng svh chứ không dùng dvh: svh là chiều cao khi thanh địa chỉ đang hiện ra hết, nên bàn cờ vẽ một lần là vừa và không co giật lúc cuộn. */ :root{ --chrome:389px; --sm-h:24px; --sm-gap:4px; --stream-h:52px; } /* 2 dòng tin */ /* --chrome = tổng chiều cao mọi thứ KHÔNG phải bàn cờ trong màn hình đầu. Con số này ĐO ĐƯỢC bằng phép đo thật, không ước lượng — đổi bố cục thì phải đo lại: header 48 + gạch 1 + 2 thanh kỳ thủ 96 + dòng tin 44 + lưới 2 cột 92 + 4 khoảng hở 32 + đệm trang 21 */ @media (max-width:860px){ .wrap{gap:8px;padding-top:8px} h1{font-size:21px} header{align-items:center;gap:10px} .brand{flex-direction:row;align-items:baseline;gap:9px;min-width:0} .brand .tagline{font-size:12px;white-space:nowrap} /* Đường kẻ gradient chỉ để trang trí — trên điện thoại nó ăn mất cả khe hở lẫn chính nó, đủ để bàn cờ hụt gần chục px. */ .rule{display:none} .board-col{gap:8px} .board-col{ /* BỀ NGANG QUYẾT ĐỊNH, không phải chiều cao. Bản trước lấy `(chiều cao màn hình − --chrome) × 0,905`, mà --chrome gồm cả khung trò chuyện và hàng nút NẰM DƯỚI bàn cờ. Tức là bóp bàn cờ lại để chừa chỗ cho những thứ người ta có thể cuộn xuống xem — trên máy nhỏ bàn cờ chỉ còn 75% bề ngang, hai bên thừa gần 5cm trắng. Giờ bề ngang quyết định, chừa đúng chút lề của .wrap. Vẫn còn một chặn theo chiều cao, nhưng chỉ trừ ~175px cho những thứ Ở QUANH bàn cờ (header và hai thanh kỳ thủ), KHÔNG trừ phần đuôi cuộn được. Chặn ấy chỉ thật sự bám vào hai chỗ: máy tính bảng dựng đứng, và điện thoại xoay ngang — nơi màn hình thấp hơn bề ngang nhiều. Trên điện thoại cầm dọc thì bề ngang luôn thắng, bàn cờ chiếm 94–95% màn hình. */ --bw:min(100%, 640px, max(240px, (100svh - 175px) * 0.905)); --bw:min(100%, 640px, max(240px, (var(--vh, 100svh) - 175px) * 0.905)); } /* Bóp mọi khối phụ trên điện thoại — chỗ tiết kiệm được đổ hết vào bàn cờ. */ .player{padding:7px 11px} .player .side{width:28px;height:28px;font-size:15px} .player .nm{font-size:13.5px} .player .st{font-size:11px} .clock{font-size:18px} .deck .card{padding:8px} .deck-acts{gap:5px} .deck-acts .btn{min-height:33px;font-size:11.5px} .deck-status .who{font-size:14.5px} #sayForm .text{min-height:36px} #sayForm .btn{min-height:36px;padding:6px 14px} } /* Màn thấp: rút dòng tin còn một dòng, bóp thanh kỳ thủ, cho bàn cờ thở. */ /* Màn thấp: dòng tin còn một dòng, header thu lại, mọi thứ sát hơn nữa. */ @media (max-width:860px) and (max-height:700px){ :root{ --chrome:343px; --sm-h:22px; --sm-gap:4px; --stream-h:22px; --bw-min:260px } /* Máy thấp: bỏ dòng nhắc phụ, giữ lại đúng thứ cần nhìn. */ .deck-status .sub{display:none} .brand .tagline{display:none} .wrap{gap:8px;padding:10px 10px 18px} .board-col{gap:6px} h1{font-size:21px} .player{padding:6px 10px} .player .side{width:25px;height:25px;font-size:13px} .clock{font-size:16px} .deck .card{padding:7px} .deck-acts .btn{min-height:30px;font-size:10.5px;padding:4px 2px} #sayForm .text{min-height:32px} #sayForm .btn{min-height:32px;padding:5px 10px} .deck-status .who{font-size:13.5px} .deck-status .sub{font-size:11px} } /* Màn CỰC thấp (điện thoại nhỏ còn hiện cả thanh địa chỉ lẫn thanh dưới): không thể vừa mọi thứ vừa giữ bàn cờ bấm được. Ưu tiên bàn cờ: rút dòng tin xuống một dòng mảnh, nút thành một hàng, và chấp nhận phần đuôi cuộn nhẹ. */ @media (max-width:860px) and (max-height:585px){ :root{ --chrome:290px; --sm-h:20px; --sm-gap:3px; --stream-h:20px; --bw-min:230px } .wrap{gap:6px;padding:8px 8px 14px} h1{font-size:18px} .board-col{gap:5px} .player{padding:4px 9px} .player .side{width:22px;height:22px;font-size:12px} .player .nm{font-size:12px} .player .st{display:none} .clock{font-size:15px} .deck{grid-template-columns:1fr} .deck .card{padding:6px} .deck-acts{grid-template-columns:repeat(5,1fr)} .deck-acts .btn{min-height:28px;font-size:10px;padding:3px 1px} .deck-status .who{font-size:13px} } /* ---------- nút chuyển sáng / tối ---------- */ /* `flex-wrap:wrap` là cái van an toàn. Số mục điều hướng thì cố định, nhưng chip người dùng co giãn theo TÊN (tối đa 170px), nên ở mấy khổ chật hàng công cụ có lúc dài hơn chỗ nó có. Không cho xuống dòng thì nó chảy quá mép phải và bị cắt — mà header không có thanh cuộn ngang để với tới phần bị cắt. Xuống dòng thì header cao thêm một nấc, đổi lại không mất nút nào. */ .head-tools{display:flex;align-items:center;gap:10px;flex-wrap:wrap; justify-content:flex-end} .themebtn{ display:inline-grid;place-items:center;width:36px;height:36px;flex:none; border-radius:50%;border:1px solid var(--edge);background:var(--surface); color:var(--muted);cursor:pointer;font-size:15px;line-height:1;transition:.18s; } .themebtn:hover{color:var(--ink);border-color:var(--gold-soft)} /* Nút nhạc nền. Cùng khuôn với nút sáng/tối và đứng ngay cạnh, nhưng lúc TẮT thì gạch chéo một nét — chỉ làm nhạt đi thì ở khổ 32px không ai đọc ra là đang tắt hay đang bật. */ .nhacbtn{position:relative} .nhacbtn.tat{color:var(--faint)} .nhacbtn.tat::after{ content:""; position:absolute; left:50%; top:50%; width:64%; height:1.5px; border-radius:2px; background:currentColor; transform:translate(-50%,-50%) rotate(-45deg); } .nhacbtn.dang-bat{color:var(--gold); border-color:var(--gold-soft)} .themebtn:focus-visible{outline:2px solid var(--gold);outline-offset:2px} /* ---------- thanh thoại ---------- */ .voice{ display:flex;align-items:center;gap:9px;padding:8px 11px;font-size:12.5px; border-radius:var(--radius);background:var(--surface);border:1px solid var(--edge); } .voice .vs{flex:1;min-width:0;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .voice .btn{flex:none;padding:6px 12px;font-size:12.5px;min-height:34px} .voice .btn.live{border-color:var(--gold);color:var(--gold);font-weight:600} .voice[hidden]{display:none} /* vòng sáng quanh quân của bên đang nói */ .player .side{transition:box-shadow .15s} .player.talking .side{box-shadow:0 0 0 3px var(--hint)} .dotlive{width:7px;height:7px;border-radius:50%;background:#3E9E63;flex:none; animation:pulse 1.4s ease-in-out infinite} @keyframes pulse{0%,100%{opacity:.35}50%{opacity:1}} /* ---------- tab: biên bản / trò chuyện / bình luận ---------- */ .tabs{display:flex;gap:4px;padding:3px;border-radius:10px;background:var(--surface-2); border:1px solid var(--edge);margin-bottom:10px} .tabs button{ flex:1;padding:7px 4px;border:0;border-radius:8px;background:transparent;cursor:pointer; font:inherit;font-size:12.5px;color:var(--muted);min-height:38px;transition:.15s; } .tabs button[aria-selected="true"]{background:var(--surface);color:var(--ink);font-weight:600; box-shadow:0 1px 3px var(--shadow)} .tabs button:focus-visible{outline:2px solid var(--gold);outline-offset:1px} .tabs .badge{display:inline-block;min-width:16px;padding:0 4px;margin-left:3px;border-radius:8px; background:var(--grad);color:var(--on-accent);font-size:10px;font-weight:700;line-height:16px} .tabpane[hidden]{display:none} .talk-msg .who{font-weight:600;color:var(--ink)} .talk-msg .who.red{color:var(--cinnabar)} .talk-msg .who.black{color:var(--jet)} .talk-msg{font-size:13px;line-height:1.5;padding:5px 0;border-bottom:1px solid var(--surface-2)} .talk-msg:last-child{border-bottom:0} .talk-tag{font-size:10px;text-transform:uppercase;letter-spacing:.08em;color:var(--faint);margin-left:5px} /* ---------- ô quảng cáo ---------- */ /* Chỉ hiện khi đặt biến môi trường ADS_CLIENT. Luôn nằm SAU bàn cờ theo thứ tự cuộn, không position:fixed, không sticky, không popup, không chen giữa ván. */ .adslot{border-radius:var(--radius);border:1px solid var(--edge);background:var(--surface-2); padding:8px;overflow:hidden;text-align:center} .adslot[hidden]{display:none} .adslot .lbl{display:block;font-size:9.5px;text-transform:uppercase;letter-spacing:.12em; color:var(--faint);margin-bottom:6px} .adslot ins{display:block} /* ═══════════ màn đăng nhập ═══════════ */ .gate{position:fixed;inset:0;z-index:200;display:grid;place-items:center;padding:20px; background:color-mix(in srgb, var(--bg) 88%, transparent);backdrop-filter:blur(8px); opacity:0;transition:opacity .2s} .gate.on{opacity:1} .gate-card{width:min(100%,340px);background:var(--surface);border:1px solid var(--edge); border-radius:var(--radius);padding:26px 22px;text-align:center; box-shadow:0 24px 60px -24px var(--shadow-strong)} .gate-mark{width:52px;height:52px;margin:0 auto 12px;border-radius:50%;display:grid; place-items:center;font-family:"Noto Serif TC","Songti SC",serif;font-size:26px;font-weight:700; color:var(--cinnabar);background:var(--disc);border:1px solid var(--disc-edge)} .gate-card h2{margin:0;font-family:Fraunces,Georgia,serif;font-size:24px;font-weight:600} .gate-sub{margin:6px 0 18px;font-size:13px;color:var(--muted)} .gate-lbl{display:block;text-align:left;font-size:12px;color:var(--muted);margin-bottom:5px} .gate-body .text{width:100%;margin-bottom:10px} .gate-note{margin:12px 0 0;font-size:11.5px;color:var(--faint);line-height:1.5} .gate-note.bad{color:var(--cinnabar)} .btn.fb{width:100%;display:flex;align-items:center;justify-content:center;gap:9px; min-height:46px;background:#1877F2;border-color:#1877F2;color:#fff;font-weight:600} .btn.fb:hover{background:#166FE5;border-color:#166FE5} .btn.fb:disabled{opacity:.6;cursor:default} .fbmark{width:20px;height:20px;border-radius:50%;background:#fff;color:#1877F2; display:grid;place-items:center;font-family:Georgia,serif;font-weight:700;font-size:14px;flex:none} /* người đang đăng nhập, trên header */ .whoami{display:flex;align-items:center;gap:7px;padding:3px 10px 3px 3px;border-radius:999px; border:1px solid var(--edge);background:var(--surface);cursor:pointer;font:inherit; font-size:12.5px;color:var(--ink);max-width:170px} .whoami:hover{border-color:var(--gold-soft)} .whoami:focus-visible{outline:2px solid var(--gold);outline-offset:2px} .whoami img{width:26px;height:26px;border-radius:50%;flex:none;object-fit:cover;background:var(--surface-2)} .whoami span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap} /* ═══════════ dòng tin trôi ═══════════ */ /* Tin mới chèn vào ĐẦU, tin cũ bị đẩy xuống rồi mờ dần và biến mất. Khối này cao cố định nên không bao giờ đẩy bàn cờ đi đâu — hết chỗ thì dòng cuối tự rụng. */ .stream{display:flex;flex-direction:column;gap:var(--sm-gap,4px);overflow:hidden; min-height:var(--stream-h);max-height:var(--stream-h);justify-content:flex-start} /* Chiều cao MỘT dòng tin là hằng số, và --stream-h luôn là bội số của nó cộng khe hở. Nếu không thì dòng cuối bị xén ngang, trông như giao diện vỡ. */ .sm{display:flex;align-items:center;gap:6px;font-size:12.5px;line-height:1; height:var(--sm-h,24px);padding:0 9px;border-radius:999px; background:var(--surface);border:1px solid var(--edge); white-space:nowrap;overflow:hidden;flex:none;max-width:100%;box-sizing:border-box} .sm-av{width:16px;height:16px;border-radius:50%;flex:none;object-fit:cover} .sm-who{font-weight:600;flex:none;max-width:34%;overflow:hidden;text-overflow:ellipsis} .sm-tag{font-size:9.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--faint);flex:none} .sm-txt{overflow:hidden;text-overflow:ellipsis;color:var(--muted)} .sm-chat{border-color:var(--gold-soft);background:color-mix(in srgb,var(--gold) 8%,var(--surface))} .sm-talk .sm-who{color:var(--ink)} @keyframes smIn{from{opacity:0;transform:translateY(-9px) scale(.97)}to{opacity:1;transform:none}} @keyframes smOut{to{opacity:0;transform:translateY(10px)}} .sm-in{animation:smIn .26s cubic-bezier(.2,.9,.3,1.2)} .sm-out{animation:smOut .6s ease forwards} /* ═══════════ hai thẻ dưới bàn cờ ═══════════ */ /* Điện thoại: xếp DỌC, mỗi thẻ rộng bằng bàn cờ. Máy tính: chia HAI CỘT, nhưng tổng bề ngang vẫn đúng bằng bàn cờ (vì .deck nằm trong .board-col và đã nhận width:var(--bw)). */ .deck{display:grid;grid-template-columns:minmax(0,1fr);gap:8px;align-items:stretch} /* minmax(0,1fr) chứ không phải 1fr: mặc định cột không co được dưới kích thước tối thiểu của nội dung, mà hàng năm nút "không xuống dòng" có min-content ~400px — nó sẽ nong cột ra và bóp bẹp cột bên cạnh còn 83px. */ @media (min-width:861px){ .deck{grid-template-columns:minmax(0,1fr) minmax(0,1fr)} } .deck > *{margin:0} .deck .card{padding:10px 11px} .deck-say{display:flex;flex-direction:column;justify-content:center;gap:4px;min-width:0} .deck-say .who{font-family:Fraunces,Georgia,serif;font-size:16px;font-weight:600; letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .deck-say .sub{font-size:11.5px;color:var(--muted);white-space:nowrap;overflow:hidden; text-overflow:ellipsis} .deck-say.alert .who{color:var(--cinnabar)} /* Toàn bộ nút nằm MỘT hàng. Bốn nút chữ chia đều phần còn lại, mic/loa/ngắt là nút vuông chỉ có icon nên không ăn mất bề ngang của chữ. */ .deck-acts{display:flex;align-items:center;gap:6px;flex-wrap:nowrap} .deck-acts .btn{flex:1 1 0;min-width:0;min-height:38px;padding:6px 2px;font-size:12px; white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .deck-acts .btn.icon{flex:0 0 auto;width:38px;padding:0} /* Mic đang mở nghĩa là ĐANG GHI ÂM và đối thủ đang nghe được. Cái đó phải nhìn phát biết, không phải đoán qua một gạch chéo nhỏ xíu trên biểu tượng: nút đổi hẳn sang màu cảnh báo, và có vòng sóng lan ra liên tục — chuyển động là thứ mắt bắt được cả khi đang nhìn chỗ khác. */ .deck-acts .btn.live, #nutMicNoi.live{ border-color:var(--cinnabar); color:var(--on-accent); font-weight:600; background:var(--cinnabar); animation:mic-song 1.7s ease-out infinite} @keyframes mic-song{ 0% {box-shadow:0 0 0 0 color-mix(in srgb, var(--cinnabar) 60%, transparent)} 70% {box-shadow:0 0 0 11px color-mix(in srgb, var(--cinnabar) 0%, transparent)} 100%{box-shadow:0 0 0 0 color-mix(in srgb, var(--cinnabar) 0%, transparent)} } /* Ai tắt hiệu ứng chuyển động thì vẫn phải biết mình đang bị ghi âm — giữ nguyên màu đỏ, chỉ bỏ vòng sóng. */ @media (prefers-reduced-motion: reduce){ .deck-acts .btn.live, #nutMicNoi.live{animation:none} } /* Icon vẽ bằng mask nên nó ăn theo màu chữ của nút — đổi trạng thái là đổi màu luôn, không phải nạp hai file ảnh khác nhau. */ .btn.icon{position:relative;display:inline-grid;place-items:center} .btn.icon::before{content:"";width:19px;height:19px;background:currentColor; -webkit-mask:var(--ic) center/contain no-repeat; mask:var(--ic) center/contain no-repeat} #micBtn{--ic:url("data:image/svg+xml;utf8,")} #micBtn[aria-pressed="false"]{--ic:url("data:image/svg+xml;utf8,")} #deafBtn{--ic:url("data:image/svg+xml;utf8,")} #deafBtn.off{--ic:url("data:image/svg+xml;utf8,")} #nutToBan{--ic:url("data:image/svg+xml;utf8,")} #nutToBan[aria-pressed="true"]{--ic:url("data:image/svg+xml;utf8,"); color:var(--gold-vivid)} #hangBtn{--ic:url("data:image/svg+xml;utf8,"); color:var(--cinnabar)} /* Ô nhắn dưới bàn cờ phải giữ MỘT hàng kể cả trên màn hẹp — quy tắc chung ở trên cho .chat-form xếp dọc, ở đây nó sẽ ăn mất 50px chiều cao quý giá. */ #sayForm{flex-direction:row;align-items:center;gap:8px;margin-top:0} #sayForm .text{flex:1;min-width:0;width:auto} #sayForm .btn{width:auto;flex:none;padding:8px 16px;min-height:38px} /* Ô nhắn nằm trong cột trái của lưới: một hàng, sát nhau. */ #sayForm{flex-direction:row;align-items:center;gap:6px;margin-top:2px} #sayForm .text{flex:1;min-width:0;width:auto;min-height:34px;padding:6px 10px;font-size:13px} #sayForm .btn{width:auto;flex:none;padding:6px 12px;min-height:34px;font-size:12px} /* `hidden` là thuộc tính HTML, trình duyệt cho nó display:none bằng bảng kiểu mặc định — mà bảng kiểu mặc định thua MỌI luật mình viết. Đặt display cho .btn.icon là vô tình bật lại mấy nút đáng lẽ đang ẩn. */ [hidden]{display:none !important} /* Ô rỗng vẫn ăn một khe hở của flex, để lại khoảng trắng không hiểu từ đâu ra. */ .board-col > div:empty{display:none} /* Trước đây bốn nút này là nút CHỮ, thẻ hẹp thì rút nhãn còn "Hoà/Thua/Khoe/ Link". Giờ cả bốn đã thành nút biểu tượng vuông 38px, nhét thêm dòng chữ vào là nó tràn ra ngoài viền — nên bỏ hẳn lối rút nhãn ấy. Tên đầy đủ vẫn nằm trong title/aria-label nên trình đọc màn hình không mất gì. */ /* Chạm hai lần để phóng to là thao tác dễ dính nhất khi đang bấm quân cờ. manipulation giữ nguyên cuộn và chạm thường, chỉ bỏ đúng cú phóng đó. */ html{touch-action:manipulation;-webkit-text-size-adjust:100%; /* Chặn kéo quá đà: cú nảy cao su ở đầu và cuối trang trên iOS làm cả bố cục trượt theo, trông y như trang đang co giãn. */ overscroll-behavior-y:none} /* KHÔNG dùng touch-action:none cho bàn cờ: bàn cờ chiếm gần hết màn hình nên đặt none là người dùng mất luôn đường vuốt để cuộn xuống xem biên bản. manipulation vẫn cho cuộn, chỉ bỏ đúng cú chạm-hai-lần-để-phóng. Chụm hai ngón đã có thẻ viewport và mấy handler gesture chặn rồi. */ .board-shell,.layer,.pc,.dot,.ring{touch-action:manipulation} /* ═══════════ màn kết ván ═══════════ */ /* Chữ THẮNG / THUA / HOÀ nổ ra giữa bàn cờ: phóng từ rất nhỏ, vọt quá cỡ rồi co về — cảm giác mạnh chứ không phải hiện ra nhàn nhạt. Viền vàng nổi kèm quầng sáng đập nhịp để mắt bị hút vào đúng chỗ đó. */ .endgame{position:absolute;inset:0;z-index:20;display:grid;place-items:center; /* Màn phủ trộn từ --jet chứ KHÔNG phải --ink. Hai biến này từng cùng một giá trị ở bảng sáng cũ (#0F3A52) nên chẳng ai thấy khác, nhưng --ink là màu CHỮ: ở nền tối nó là #F4F0FF, và lớp phủ thành một màn SƯƠNG TRẮNG 42% trùm lên bàn cờ thay vì làm tối bàn cờ đi. Hộp báo kết ván mất hẳn cảm giác nổi lên trên. --jet tối ở cả hai bảng, đúng việc của nó — và .hoi-roi với .hop-hoi vẫn luôn dùng nó. */ padding:6%;background:color-mix(in srgb,var(--jet) 58%,transparent); backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px); animation:egFade .35s ease both} .endgame[hidden]{display:none !important} @keyframes egFade{from{opacity:0}to{opacity:1}} .endgame-card{ position:relative;max-width:92%;padding:5% 8%;border-radius:22px;text-align:center; background:linear-gradient(150deg, color-mix(in srgb,var(--surface) 94%,transparent), color-mix(in srgb,var(--surface-2) 94%,transparent)); /* Viền dày: ba lớp lồng nhau — nét vàng đậm, viền sáng, rồi quầng vàng nhạt. Cộng lại 22px nên nhìn từ xa vẫn thấy ngay đây là khung kết quả. */ border:7px solid var(--board-trim); box-shadow: 0 0 0 3px color-mix(in srgb,var(--surface) 88%,transparent), 0 0 0 12px color-mix(in srgb,var(--board-trim) 34%,transparent), 0 20px 50px -14px rgba(0,0,0,.6); animation:egPop .62s cubic-bezier(.16,1.3,.36,1) both; } /* Tự lui sau vài giây rồi trả lại bàn cờ cho người ta xem lại thế cuối. */ .endgame.go{animation:egOut .45s ease both;pointer-events:none} @keyframes egOut{to{opacity:0;transform:scale(1.06)}} /* Phóng mạnh: bắt đầu bé xíu và nghiêng, vọt qua cỡ thật rồi mới đứng yên. */ @keyframes egPop{ 0% {transform:scale(.18) rotate(-14deg);opacity:0} 55% {transform:scale(1.14) rotate(3deg); opacity:1} 78% {transform:scale(.96) rotate(-1.5deg)} 100%{transform:scale(1) rotate(0);opacity:1} } /* Quầng sáng đập nhịp quanh khung. */ .endgame-card::after{ content:"";position:absolute;inset:-7px;border-radius:24px;pointer-events:none; /* Quầng sáng phải cùng tông với viền vàng của khung. Dùng --gold-vivid ở đây là ra vòng xanh chọi thẳng vào viền vàng, vì bảng sáng lấy xanh làm màu nhấn. */ border:3px solid var(--board-trim); animation:egHalo 1.8s ease-in-out .55s infinite; } @keyframes egHalo{ 0%,100%{opacity:.15;transform:scale(1)} 50% {opacity:.85;transform:scale(1.045)} } .endgame-word{ font-family:Fraunces,Georgia,serif;font-weight:700;letter-spacing:.04em; font-size:clamp(30px,15cqw,86px);line-height:1.02; background:var(--grad);-webkit-background-clip:text;background-clip:text; color:transparent; /* Nền sau chữ là gỗ vàng nên chữ tô dải màu cần một nét viền tối, không thì phần sáng của dải màu chìm vào mặt bàn. */ -webkit-text-stroke:1.5px color-mix(in srgb,var(--ink) 55%,transparent); paint-order:stroke fill; } .endgame-word.win {--grad:linear-gradient(135deg,#FFC72C 0%,#FF7A18 100%)} .endgame-word.lose {--grad:linear-gradient(135deg,#8FA3B8 0%,#4A6076 100%)} .endgame-word.draw {--grad:linear-gradient(135deg,#54C2F0 0%,#3FD0A0 100%)} .endgame-why{margin-top:.4em;font-size:clamp(11px,3.4cqw,16px);color:var(--muted); animation:egIn .5s ease .5s both} @keyframes egIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}} /* Ảnh do trang admin đặt — vẫn phóng đúng kiểu đó, không hiện phẳng lì. */ .endgame-art{display:block;max-width:100%;max-height:46cqw;object-fit:contain; filter:drop-shadow(0 10px 22px rgba(0,0,0,.45))} @media (prefers-reduced-motion: reduce){ .endgame,.endgame-card,.endgame-why,.endgame.go{animation-duration:.001ms !important} .endgame-card::after{animation:none;opacity:.5} } /* Header trên điện thoại: thêm nút tiếng là hàng công cụ tràn xuống dòng thứ hai và ăn mất chiều cao của bàn cờ. Bỏ chữ trong chip người dùng, giữ ảnh đại diện — tên vẫn còn trong title và aria-label. */ @media (max-width:520px){ .head-tools{gap:6px} .whoami{padding:3px;max-width:none} .whoami span{display:none} .themebtn{width:32px;height:32px;font-size:14px} header{flex-wrap:nowrap} .brand{min-width:0;flex:1} h1{font-size:19px} .brand .tagline{overflow:hidden;text-overflow:ellipsis} } /* ═══════════ quảng cáo chèn giữa sau khi kết ván ═══════════ */ .adgate{position:absolute;inset:0;z-index:22;display:grid;place-items:center;padding:5%; background:color-mix(in srgb,var(--jet) 72%,transparent); /* xem chú thích ở .endgame */ backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)} .adgate[hidden]{display:none !important} .adgate-card{width:100%;max-width:94%;background:var(--surface);border:1px solid var(--edge); border-radius:var(--radius);padding:12px;text-align:center; box-shadow:0 18px 44px -14px rgba(0,0,0,.5)} .adgate-lbl{font-size:9.5px;text-transform:uppercase;letter-spacing:.12em;color:var(--faint); margin-bottom:8px} .adgate-box{min-height:90px;display:grid;place-items:center;overflow:hidden;margin-bottom:10px} .adgate-box img{max-width:100%;max-height:34cqw;object-fit:contain;border-radius:8px} .adgate-card .btn{width:100%;min-height:42px} .adgate-card .btn:disabled{opacity:.55} /* Ô quảng cáo thường: có ảnh thì phải bó cho gọn */ .adslot img{max-width:100%;height:auto;border-radius:8px;display:block;margin:0 auto} .adslot a{display:block} /* ═══════════ giải đấu ═══════════ */ .giai-list{display:grid;gap:12px} @media (min-width:861px){.giai-list{grid-template-columns:repeat(auto-fill,minmax(300px,1fr))}} .giai-card{display:flex;gap:12px;text-decoration:none;color:inherit;align-items:stretch; transition:border-color .15s,transform .15s} .giai-card:hover{border-color:var(--gold-soft);transform:translateY(-1px)} .giai-anh{width:84px;height:84px;flex:none;border-radius:11px;object-fit:cover;background:var(--surface-2)} /* Ảnh bìa mặc định vẽ bằng SVG (giai-bia.js) chứ không còn là một chữ ♟ đặt giữa ô xám — phần lớn giải không ai tải ảnh lên, nên đó mới là bộ mặt thường thấy nhất của trang giải đấu. */ .giai-anh.trong{display:block;padding:0;overflow:hidden} .giai-bia-mac{display:block;width:100%;height:100%;object-fit:cover} .giai-bia.trong{width:100%;height:190px;border-radius:11px;overflow:hidden; margin-bottom:10px;background:var(--surface-2)} .giai-than{min-width:0;flex:1} .giai-than h3{margin:4px 0 3px;font-family:Fraunces,Georgia,serif;font-size:17px;font-weight:600; overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .giai-than p{margin:0;font-size:12.5px;color:var(--muted);line-height:1.5; display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} .giai-dau{display:flex;gap:7px;align-items:center;flex-wrap:wrap} .giai-so{font-size:11px;color:var(--faint)} .giai-chan{margin-top:6px;font-size:11.5px;color:var(--faint)} .giai-bia{width:100%;max-height:190px;object-fit:cover;border-radius:11px;margin-bottom:10px} .giai-top h2{margin:6px 0 4px} .tt{font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;font-weight:600; padding:2px 8px;border-radius:999px;border:1px solid var(--edge);color:var(--muted)} .tt.mo{border-color:var(--gold-soft);color:var(--gold)} .tt.chay{border-color:#3E9E63;color:#3E9E63} .tt.xong{border-color:var(--faint)} .ai-list{display:flex;flex-wrap:wrap;gap:8px} .ai{display:flex;align-items:center;gap:7px;padding:4px 11px 4px 4px;border-radius:999px; background:var(--surface-2);border:1px solid var(--edge);font-size:12.5px} .ai img{width:24px;height:24px;border-radius:50%;object-fit:cover;background:var(--edge)} /* cây đấu: mỗi vòng một cột, hẹp thì cuộn ngang trong khung của nó */ .cay{display:flex;gap:14px;overflow-x:auto;padding-bottom:6px;align-items:flex-start} .cot{flex:0 0 200px;display:flex;flex-direction:column;gap:10px} .cot-ten{font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:var(--faint); text-align:center;padding-bottom:2px} .tran{border:1px solid var(--edge);border-radius:11px;overflow:hidden;background:var(--surface-2)} .ke{display:flex;align-items:center;gap:7px;padding:6px 9px;font-size:12.5px; border-bottom:1px solid var(--edge)} .ke:last-of-type{border-bottom:0} .ke img{width:20px;height:20px;border-radius:50%;flex:none;object-fit:cover;background:var(--edge)} .ke span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1;min-width:0} .ke.trong{color:var(--faint);font-style:italic} .ke.thang{background:color-mix(in srgb,var(--gold-vivid) 14%,var(--surface));font-weight:600} .ke.thang b{color:var(--gold)} .ke.thua{opacity:.5} .tran-vao{display:block;text-align:center;padding:6px;font-size:12px;font-weight:600; background:var(--grad);color:var(--on-accent);border:0;width:100%;cursor:pointer; text-decoration:none;font-family:inherit} /* vinh danh */ .vinh-danh{background:linear-gradient(160deg, color-mix(in srgb,var(--gold-vivid) 12%,var(--surface)), var(--surface))} .vd-list{display:flex;flex-wrap:wrap;gap:12px;justify-content:center} .vd{text-align:center;padding:12px 16px;border-radius:14px;background:var(--surface); border:1px solid var(--edge);min-width:132px} .vd-1{border-color:var(--gold-vivid);border-width:2px;transform:scale(1.06)} .vd img{width:52px;height:52px;border-radius:50%;object-fit:cover;background:var(--edge);margin:6px 0} .vd-hang{font-size:11.5px;color:var(--muted);font-weight:600} .vd-ten{font-weight:600;font-size:14px} .vd-thuong{font-size:11.5px;color:var(--gold);margin-top:3px} /* Liên kết điều hướng trên header */ .btn.nav{padding:5px 12px;min-height:32px;font-size:12.5px;text-decoration:none; line-height:1.7;white-space:nowrap} @media (max-width:640px){.btn.nav{padding:4px 9px;font-size:11.5px}} /* ═══════════ menu hồ sơ người dùng ═══════════ */ .usermenu{position:relative} .umenu{position:absolute;top:calc(100% + 8px);right:0;z-index:60;min-width:230px; background:var(--surface);border:1px solid var(--edge);border-radius:var(--radius); box-shadow:0 18px 44px -14px var(--shadow-strong);overflow:hidden; animation:umIn .16s ease both} .umenu[hidden]{display:none !important} @keyframes umIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}} .umenu-top{display:flex;gap:10px;padding:12px;border-bottom:1px solid var(--edge); background:var(--surface-2)} .umenu-top img{width:42px;height:42px;border-radius:50%;flex:none;object-fit:cover;background:var(--edge)} .umenu-ten{font-weight:600;font-size:14px} .umenu-cap{font-size:12px;color:var(--muted);margin-top:2px} .umenu-tbh{font-size:11.5px;color:var(--faint);margin-top:2px} .umenu-tbh span{opacity:.75} .umenu-i{display:block;width:100%;text-align:left;padding:10px 13px;font:inherit;font-size:13px; color:var(--ink);background:none;border:0;border-bottom:1px solid var(--surface-2); cursor:pointer;text-decoration:none} .umenu-i:last-child{border-bottom:0} .umenu-i:hover{background:var(--surface-2)} .umenu-i.thoat{color:var(--cinnabar)} /* ═══════════ trang quản lý giải của ban tổ chức ═══════════ */ .qlgiai{display:grid;gap:12px} .nguoi-row{display:flex;align-items:center;gap:9px;padding:7px 9px;border-radius:9px; border:1px solid var(--edge);background:var(--surface-2)} .nguoi-row img{width:28px;height:28px;border-radius:50%;flex:none;object-fit:cover;background:var(--edge)} .nguoi-row .nm{flex:1;min-width:0;font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .nguoi-row .hat{font-size:11px;color:var(--faint);flex:none} .nguoi-row .btn{padding:3px 9px;min-height:28px;font-size:11.5px;flex:none} .nguoi-row.cho{border-color:var(--gold-soft);background:color-mix(in srgb,var(--gold-vivid) 9%,var(--surface))} .nguoi-row .tay{font-size:10px;color:var(--faint);border:1px solid var(--edge); border-radius:6px;padding:1px 5px;flex:none} .themnguoi{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px} .themnguoi .text{flex:1;min-width:150px} /* Nút phụ đứng cạnh tiêu đề: .row cho con flex:1 nên nó bị kéo giãn hết hàng. */ .card > .row > h2 + .btn, .card > .row > .btn.gon{flex:0 0 auto;width:auto;padding:6px 14px} /* ═══════════ khoảng cách giữa các thẻ ═══════════ */ /* .wrap là flex có gap, nhưng các thẻ nằm TRONG một khối con (#main, #panel, .rail…) thì khối đó mới là cha — mà chúng vốn là div thường, không gap, nên thẻ dính sát nhau. Cho chúng cùng một nhịp giãn. */ #main, #panel, #pane, .stack, .qlgiai, .giai-list, #formTao, #inviteBox, #offerBox, #againBox, #tCuaToi{ display:flex;flex-direction:column;gap:16px} .giai-list{gap:14px} @media (min-width:861px){ .giai-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:16px} } .qlgiai{gap:10px} .wrap{gap:24px} .card{padding:18px} @media (max-width:640px){ .card{padding:14px} .wrap{gap:16px} #main,#panel,#pane{gap:12px} } /* Thẻ trong lưới điều khiển dưới bàn cờ giữ nguyên nhịp chật của nó. */ .deck .card{padding:10px 11px} .deck-acts, .deck-say{gap:6px} .card h2{margin-bottom:6px} .card > .row:first-child{margin-top:0} /* ── Điều hướng trên đầu trang ── Bản trước GIẤU HẲN mấy liên kết này trên máy hẹp, với lý do "đã có trong menu hồ sơ rồi". Sai hai đường: • menu hồ sơ chỉ hiện khi ĐÃ ĐĂNG NHẬP, nên khách vào bằng điện thoại không còn lối đi nào cả; • trong menu vốn không có "Trang chủ", nên trang ấy thành không tới được. Giờ giữ nguyên nút, chỉ thu lại thành biểu tượng khi màn hình hẹp. */ .head-tools .btn.nav{ flex:none;width:auto;padding:6px 12px;line-height:1.9;text-decoration:none; font-size:12.5px;white-space:nowrap; } .head-tools .btn.nav::before{content:attr(data-ic);margin-right:6px;font-size:14px} /* Nút "Trận đang đấu": đưa về ván đang bỏ dở. Phải nổi hơn mấy mục điều hướng khác — nó là thứ duy nhất trên thanh này có một cái đồng hồ đang chạy phía sau, bỏ quên là thua. */ .head-tools .btn.nav.ve-tran{ border-color:var(--gold); color:var(--gold-vivid); font-weight:600; background:color-mix(in srgb, var(--gold) 14%, var(--surface))} .head-tools .btn.nav.ve-tran:hover{border-color:var(--gold-vivid)} /* Hộp hỏi trước khi rời bàn giữa ván. Phủ kín màn hình và ĐÈ lên tất cả: đây là câu hỏi phải trả lời xong mới đi tiếp được, không phải một lời nhắc góc màn hình dễ bấm trượt. */ .hoi-roi{position:fixed; inset:0; z-index:120; display:grid; place-items:center; padding:18px; background:color-mix(in srgb, var(--jet) 55%, transparent)} .hoi-roi[hidden]{display:none} .hoi-roi-card{width:min(340px,100%); display:flex; flex-direction:column; gap:9px; padding:18px; border-radius:16px; background:var(--surface); border:1px solid var(--edge); box-shadow:0 22px 60px -14px var(--shadow-strong)} .hoi-roi-card b{font-family:Fraunces,Georgia,serif; font-size:17px} .hoi-roi-card .hint{margin:0} .hoi-roi-card .btn{width:100%; min-height:40px} /* "Ở lại bàn" là lối THOÁT chứ không phải một lựa chọn ngang hàng — để nhạt hơn, không thì ba nút cùng cỡ làm người ta phải đọc cả ba mới chọn được. */ .hoi-roi-card .hoi-roi-thoi{border-color:transparent; background:transparent; color:var(--muted); min-height:34px; font-size:12.5px} /* Nút vào bàn cờ mang đúng con Tướng của bàn cờ: cùng mặt gỗ, cùng vòng viền trong, cùng nét chữ đỏ. Một chữ 帥 trần trụi trông như ký tự lạ lọt vào thanh menu; thành quân cờ rồi thì liếc một cái biết bấm vào là ra bàn cờ. Vòng viền trong vẽ bằng box-shadow inset vì ::before không có ::before. */ .head-tools .btn.nav[data-ic="帥"]::before{ width:19px; height:19px; margin-right:7px; display:inline-grid; place-items:center; border-radius:50%; font-family:"Noto Serif TC","Songti SC",serif; font-weight:700; font-size:11px; line-height:1; color:var(--piece-red); background:radial-gradient(circle at 34% 28%, var(--disc) 0%, var(--disc-2) 78%); box-shadow:0 1px 2px -1px var(--shadow), 0 0 0 1px var(--disc-edge), inset 0 0 0 1px color-mix(in srgb, var(--piece-red) 45%, transparent); } /* ═══════════ nút báo cáo và hộp thoại kiểm duyệt ═══════════ Nút phải KÍN ĐÁO: nó nằm cạnh từng dòng chat, mà chat thì đọc liên tục — một nút đỏ chói cạnh mỗi dòng biến khung trò chuyện thành bảng tố cáo. Mờ sẵn, rõ lên khi rê chuột vào dòng ấy, và luôn bấm được bằng bàn phím. */ .nut-bc{ flex:none; width:20px; height:20px; padding:0; line-height:1; border:0; background:none; cursor:pointer; color:var(--faint); opacity:.35; font-size:12px; border-radius:6px; transition:opacity .15s, color .15s; } .nut-bc:hover{opacity:1; color:var(--cinnabar)} .nut-bc:focus-visible{opacity:1; outline:2px solid var(--gold); outline-offset:1px} *:hover > .nut-bc, li:hover .nut-bc, .chat-msg:hover .nut-bc{opacity:.75} .bc-lop{position:fixed; inset:0; z-index:130; display:grid; place-items:center; padding:18px; background:color-mix(in srgb, var(--jet) 62%, transparent)} .bc-lop[hidden]{display:none} .bc-card{ width:min(420px,100%); display:flex; flex-direction:column; gap:10px; padding:18px; border-radius:16px; background:var(--surface); border:1px solid var(--edge); box-shadow:0 22px 60px -14px var(--shadow-strong)} .bc-card > b{font-family:Fraunces,Georgia,serif; font-size:17px} .bc-card .hint{margin:0} .bc-trich{padding:8px 11px; border-radius:9px; background:var(--surface-2); border-left:3px solid var(--edge); font-style:italic} .bc-ly{display:grid; gap:2px} .bc-ly-i, .bc-chan{display:flex; align-items:center; gap:9px; cursor:pointer; padding:7px 9px; border-radius:9px; font-size:13.5px} .bc-ly-i:hover, .bc-chan:hover{background:var(--surface-2)} .bc-chan{border:1px solid var(--edge); margin-top:4px} .bc-card .row{margin-top:2px} /* Câu trả lời của máy ở trang Hỏi đáp. Nền khác hẳn thẻ bao ngoài để mắt tách được ngay đâu là chữ người viết, đâu là chữ máy sinh — hai thứ ấy có độ tin cậy khác nhau, và trang nói thẳng như vậy. */ .hd-tra{ margin-top:10px; padding:12px 14px; border-radius:10px; background:var(--surface-2); border:1px solid var(--edge); border-left:3px solid var(--gold-soft); font-size:14px; line-height:1.7; white-space:pre-wrap; } .hd-tra[hidden]{display:none} /* Ô xem trước logo trong trang quản trị. Nền kẻ ô cờ nhạt để nhìn ra ngay phần TRONG SUỐT của tấm logo — trên nền phẳng thì một tấm PNG nền trắng và một tấm nền trong suốt trông y hệt nhau, tới lúc lên đầu trang nền tối mới lòi ra cái hộp trắng. */ .th-xem{ display:flex; align-items:center; justify-content:center; min-height:96px; padding:14px; border-radius:12px; border:1px solid var(--edge); background-color:#2a2a30; background-image:linear-gradient(45deg,#3a3a42 25%,transparent 25%,transparent 75%,#3a3a42 75%), linear-gradient(45deg,#3a3a42 25%,transparent 25%,transparent 75%,#3a3a42 75%); background-size:16px 16px; background-position:0 0, 8px 8px; } .th-xem img{max-width:100%; max-height:120px; object-fit:contain; display:block} .th-xem.trong{color:var(--muted); font-size:12.5px; background-image:none} /* Bảng sửa biểu tượng menu trong trang quản trị: mỗi mục một thẻ, có ô xem trước ngay trên đầu để thấy đổi màu ra sao mà không phải mở điện thoại. */ .menu-sua{display:grid; gap:14px; grid-template-columns:repeat(auto-fill,minmax(230px,1fr))} .menu-o{padding:14px; border:1px solid var(--edge); border-radius:12px; background:var(--surface-2)} .menu-o > b{display:block; margin:8px 0 10px} .menu-xem{ position:relative; width:54px; height:54px; border-radius:15px; display:grid; place-items:center; font-family:"Noto Serif TC","Songti SC",serif; font-size:25px; color:#fff; border:1.5px solid rgba(255,255,255,.42); overflow:hidden} .menu-xem::after{ content:""; position:absolute; inset:3px; border-radius:11px; pointer-events:none; border:1px solid rgba(255,255,255,.28)} .menu-xem img{width:100%; height:100%; object-fit:cover; display:block} /* ═══════════ nút ba gạch + bảng menu (điện thoại) ═══════════ Trên màn 390px, sáu mục điều hướng teo còn sáu vòng tròn 36px không chữ — bấm theo trí nhớ chứ không đọc được. Gom hết vào một nút ba gạch, mở ra một bảng ô vuông CÓ MÀU và CÓ TÊN, đúng kiểu màn hình ứng dụng điện thoại. */ .nav-3g{display:none; width:36px; height:36px; padding:0; flex:none; border:1px solid var(--edge); border-radius:50%; background:var(--surface); cursor:pointer; place-items:center} .nav-3g:hover{border-color:var(--gold-soft)} .nav-3g i, .nav-3g i::before, .nav-3g i::after{ display:block; width:15px; height:2px; border-radius:2px; background:var(--ink); transition:transform .18s} .nav-3g i{position:relative} .nav-3g i::before, .nav-3g i::after{content:""; position:absolute; left:0} .nav-3g i::before{top:-5px} .nav-3g i::after{top:5px} .nav-3g[aria-expanded="true"] i{background:transparent} .nav-3g[aria-expanded="true"] i::before{transform:translateY(5px) rotate(45deg)} .nav-3g[aria-expanded="true"] i::after{transform:translateY(-5px) rotate(-45deg)} .nav-bang{position:fixed; inset:0; z-index:120; background:color-mix(in srgb, var(--bg) 72%, transparent); backdrop-filter:blur(6px)} .nav-bang[hidden]{display:none} .nav-bang-luoi{ /* CĂN GIỮA và không bao giờ rộng hơn màn. left/right = 0 cộng bề ngang xác định cộng margin auto là cách căn giữa không dùng transform — quan trọng, vì khung hình mở bảng đã dùng transform rồi, đặt thêm là nó nuốt mất. `minmax(0,1fr)` chứ không phải `1fr`: mặc định mỗi cột lưới rộng tối thiểu bằng NỘI DUNG, nên mấy ô 84px đẩy bảng phình ra quá bề ngang màn — tràn hẳn ra ngoài mép phải. BA cột chứ không phải bốn: sáu mục chia ba là hai hàng ĐỦ, chia bốn thì hàng dưới còn hai ô lệch hẳn về trái, nhìn như bảng vẽ dở. */ position:absolute; top:var(--nav-top,64px); left:0; right:0; width:min(calc(100% - 24px), 360px); margin-inline:auto; display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:14px 8px; padding:18px 14px; border-radius:20px; background:var(--surface); border:2px solid var(--gold-soft); box-shadow:0 24px 60px -22px var(--shadow-strong), 0 0 0 1px rgba(0,0,0,.25); position:relative; animation:bangXuong .18s ease-out} @keyframes bangXuong{from{opacity:0; transform:translateY(-8px)} to{opacity:1; transform:none}} /* Đường viền THỨ HAI, nằm lùi vào trong. Một nét thì bảng đọc ra như một tấm phẳng dán lên; hai nét cách nhau vài pixel thì mắt đọc ra bề dày — cùng lối với vành gỗ nhiều vòng của con cờ. */ .nav-bang-luoi::before{ content:""; position:absolute; inset:5px; border-radius:15px; pointer-events:none; border:1px solid color-mix(in srgb, var(--gold-soft) 45%, transparent)} .nav-app{display:flex; flex-direction:column; align-items:center; gap:6px; min-width:0; text-decoration:none; color:var(--ink)} /* Ô biểu tượng có VIỀN riêng: trên nền tối mà chỉ có màu nền thì mấy ô sẫm (tím, xanh đậm) chìm vào bảng. Viền sáng mảnh tách hẳn từng ô ra, đúng kiểu biểu tượng ứng dụng nằm trên hình nền. */ .nav-app-o{ position:relative; width:54px; height:54px; border-radius:15px; display:grid; place-items:center; font-family:"Noto Serif TC","Songti SC",serif; font-size:25px; color:#fff; border:1.5px solid rgba(255,255,255,.42); box-shadow:0 6px 14px -6px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.35); overflow:hidden} /* Nét viền trong của từng ô: cùng lý do với bảng — hai nét mới ra khối. Đặt sau ảnh trong thứ tự xếp lớp nên ảnh không đè mất nó. */ .nav-app-o::after{ content:""; position:absolute; inset:3px; border-radius:11px; pointer-events:none; border:1px solid rgba(255,255,255,.28)} /* Ảnh thay cho chữ: phủ kín ô, cắt theo bo góc. */ .nav-app-o img{width:100%; height:100%; object-fit:cover; display:block} .nav-app-ten{font-size:11.5px; line-height:1.2; text-align:center; font-weight:500; max-width:100%; overflow-wrap:anywhere} .nav-app.dang .nav-app-o{outline:2px solid var(--gold); outline-offset:2px} .nav-app:active .nav-app-o{transform:scale(.94)} body.menu-mo{overflow:hidden} /* Ngưỡng cất mục điều hướng vào nút ba gạch. Trước là 560px, đo cho NĂM mục; thêm "Trang chủ" thành sáu thì hàng nút dài ra thêm chừng 96px và ở khổ 561–659 nó chạy quá mép phải — mục cuối bị cắt mất một nửa mà không có thanh cuộn nào để với tới. Nên cất sớm hơn, từ 659px trở xuống. CHỪA "Trận đang đấu": nó không nằm trong bảng ba gạch (bảng ấy chỉ dựng từ NAV), nên giấu đi là mất hẳn lối về ván đang bỏ dở. Ở khổ này còn thừa chỗ cho đúng một nút, và nếu phải chọn một thì chọn nó. */ @media (max-width:659px){ .head-tools .btn.nav:not(.ve-tran){display:none} .nav-3g{display:inline-grid} } @media (max-width:560px){ /* Điện thoại hẹp: hết chỗ, cất nốt cả "Trận đang đấu". */ .head-tools .btn.nav{display:none} h1{white-space:nowrap} /* Logo đứng CẠNH chữ ở khổ hẹp: chữ phải co được, không thì nó đẩy dòng tagline ra ngoài mép — mà tagline ở trang bàn cờ chính là MÃ PHÒNG, thứ người ta đọc cho bạn qua điện thoại. */ h1[data-logo="canh"] .th-chu{min-width:0;overflow:hidden;text-overflow:ellipsis} .logo-anh{max-width:38vw} .brand .tagline{max-width:42vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} /* Mã phòng là thứ người ta đọc cho bạn bè qua điện thoại, cắt cụt thành "Phòng N…" là hỏng đúng cái đáng giữ. Bỏ chữ "Phòng", và cấm co lại — header chật thì nhường chỗ ở nơi khác, không nhường ở đây. (Các tagline khác — "Giải đấu", "Đăng quảng cáo" — vẫn cắt bình thường, mất một chữ cuối của chúng thì không sao.) */ .brand .tagline .nhan{display:none} .brand .tagline.ma-phong{flex:none;max-width:none;overflow:visible; letter-spacing:.06em;font-variant-numeric:tabular-nums} /* Chỗ nhường: chip người dùng còn mỗi ảnh đại diện. Tên đầy đủ vẫn nằm trong menu bấm ra, nên không mất thông tin gì. */ .whoami{max-width:none;padding:3px} .whoami > span{display:none} } /* ═══════════ cửa đăng nhập: ba tầng, không phải một chồng chữ ═══════════ Trên cùng là mấy lối MỘT CHẠM (Facebook, Google) — nút đặc, to, cùng cỡ. Giữa là vạch "hoặc". Dưới là hai nút viền chia đôi hàng: tên đăng nhập và đăng ký. Cuối là lối khách. Bản trước xếp ba dòng chữ gạch chân giống hệt nhau chồng lên nhau, mắt không phân được cái nào quan trọng hơn cái nào — mà đó chính là việc duy nhất của màn này. */ .gate-alt{display:block;width:100%;margin-top:8px;padding:7px;font:inherit;font-size:12.5px; color:var(--muted);background:none;border:0;cursor:pointer;text-decoration:underline; text-underline-offset:3px} .gate-alt:hover{color:var(--ink)} .gate-hoac{display:flex;align-items:center;gap:10px;margin:16px 0 11px; color:var(--faint);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase} .gate-hoac::before,.gate-hoac::after{content:"";flex:1;height:1px;background:var(--edge)} .gate-doi{display:flex;gap:8px} .gate-doi .btn{flex:1 1 0;min-width:0;min-height:42px;font-size:13px;padding:8px 6px} /* ═══════════ chợ quảng cáo: bảng giá và đơn của tôi ═══════════ */ .giaqc{display:grid;gap:10px;grid-template-columns:repeat(auto-fill,minmax(190px,1fr))} .giaqc-o{padding:12px;border-radius:11px;border:1px solid var(--edge);background:var(--surface-2)} .giaqc-ten{font-weight:600;font-size:13.5px} .giaqc-ta{font-size:11.5px;color:var(--muted);margin:3px 0 8px;line-height:1.45} .giaqc-gia{font-family:Fraunces,Georgia,serif;font-size:19px;font-weight:600;color:var(--gold-vivid)} .giaqc-gia span{font-family:inherit;font-size:11.5px;font-weight:400;color:var(--faint)} .giaqc-tu{margin-top:6px;font-size:11px;color:var(--jade)} .qc-row{flex-wrap:wrap} .qc-thumb{width:56px !important;height:30px !important;border-radius:5px !important} .qc-row .nm small{display:block;font-size:11px;color:var(--faint);font-weight:400} .qc-lydo{flex-basis:100%;font-size:11.5px;color:var(--cinnabar)} /* ═══════════ ô thông tin do ban tổ chức tự thêm ═══════════ */ .batbuoc{color:var(--cinnabar)} .dkform{margin-top:12px;padding:14px;border-radius:11px;border:1px solid var(--gold-soft); background:var(--surface-2)} .dkform h3{margin:0 0 4px;font-family:Fraunces,Georgia,serif;font-size:15.5px} .tieu-nho{margin:16px 0 4px;font-family:Fraunces,Georgia,serif;font-size:14.5px;font-weight:600} .othem{margin-top:12px;border:1px solid var(--edge);border-radius:11px;padding:10px 12px; background:var(--surface-2)} .othem > summary{cursor:pointer;font-weight:600;font-size:13.5px;list-style:none} .othem > summary::-webkit-details-marker{display:none} .othem > summary::before{content:'▸ ';color:var(--faint)} .othem[open] > summary::before{content:'▾ '} .othem .hint{margin:8px 0 10px} .o-hang{display:flex;gap:7px;align-items:center;flex-wrap:wrap;margin-bottom:7px} .o-hang .o-nhan{flex:2 1 150px;width:auto} .o-hang .o-kieu{flex:1 1 130px;width:auto} .o-hang .o-chon{flex:2 1 100%;width:auto} .o-hang .o-xoa{flex:none;width:auto;padding:5px 10px;color:var(--cinnabar)} .tick{display:flex;align-items:center;gap:7px;font-size:13px;margin:8px 0;cursor:pointer} .tick input{width:16px;height:16px;accent-color:var(--gold-vivid);flex:none} .tick.gon{margin:0;font-size:11.5px;color:var(--muted);flex:none} /* Hai lựa chọn loại trừ nhau, bày thành hai thẻ bấm được cho rõ hơn nút tròn. */ .chon2{display:grid;gap:9px;grid-template-columns:repeat(auto-fit,minmax(210px,1fr))} .chon2-o{display:block;padding:11px 12px;border-radius:11px;cursor:pointer; border:1px solid var(--edge);background:var(--surface-2)} .chon2-o.on{border-color:var(--gold-vivid);background:color-mix(in srgb,var(--gold-vivid) 8%,var(--surface))} .chon2-o input{margin-right:7px;accent-color:var(--gold-vivid)} .chon2-o b{font-size:13.5px} .chon2-o small{display:block;margin-top:4px;font-size:11.5px;color:var(--muted);line-height:1.45} .chon2-o:has(input:disabled){opacity:.6;cursor:not-allowed} select.text{width:100%;font:inherit;font-size:14px;padding:10px 12px;border-radius:9px; border:1px solid var(--edge);background:var(--surface-2);color:var(--ink)} textarea.text{width:100%;font:inherit;font-size:13.5px;line-height:1.5;padding:10px 12px; border-radius:9px;border:1px solid var(--edge);background:var(--surface-2);color:var(--ink); resize:vertical} /* Hồ sơ dự giải, hiện dưới tên người thi đấu — chỉ ban tổ chức thấy. */ .nguoi-row{flex-wrap:wrap} .nguoi-row .tay.tk{color:var(--jade);border-color:var(--jade)} .hoso{flex-basis:100%;display:flex;flex-wrap:wrap;gap:4px 14px;margin:5px 0 1px; padding-top:6px;border-top:1px dashed var(--edge);font-size:11.5px;color:var(--muted)} .hoso i{font-style:normal;color:var(--faint);margin-right:5px} /* ═══════════ lịch thi đấu trong cây đấu ═══════════ */ .tran-lich{display:flex;flex-wrap:wrap;align-items:center;gap:5px 8px;margin-top:5px;font-size:11px} .tran-lich .chot{color:var(--jade);font-weight:600} .tran-lich .de{color:var(--gold-vivid)} .tran-lich .han{color:var(--faint)} .tran-hen{margin-left:auto;font:inherit;font-size:11px;padding:3px 9px;border-radius:7px; border:1px solid var(--edge);background:var(--surface-2);color:var(--ink);cursor:pointer} .tran-hen:hover{border-color:var(--gold-vivid)} .henbox{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-top:6px} .henbox .text{flex:1 1 170px;width:auto;font-size:12.5px;padding:6px 9px} .henbox .btn{flex:none;width:auto} .henbox small{flex-basis:100%;font-size:11px;color:var(--faint)} /* Form hồ sơ dự giải, mở ngay dưới dòng người thi đấu. */ .hosoform{flex-basis:100%;margin-top:8px;padding:11px 12px;border-radius:10px; border:1px solid var(--gold-soft);background:var(--surface)} .hosoform .field{margin-bottom:8px} .hosoform .row{margin-top:4px} .hosoform .btn{width:auto;flex:0 0 auto} /* Cổng thanh toán đang mở, hiện ở trang đăng quảng cáo. */ .congtt{display:grid;gap:9px;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));margin-top:8px} .congtt-o{padding:10px 12px;border-radius:10px;border:1px solid var(--edge);background:var(--surface-2)} .congtt-o b{font-size:13.5px} .congtt-o small{display:block;margin-top:3px;font-size:11.5px;color:var(--muted);line-height:1.45} .congtt-o span{display:inline-block;margin-top:6px;font-size:11px;color:var(--faint); border:1px solid var(--edge);border-radius:6px;padding:1px 6px} .qc-tra{flex-basis:100%;display:flex;flex-wrap:wrap;align-items:center;gap:7px;margin-top:7px; padding-top:8px;border-top:1px dashed var(--edge)} .qc-tra > span{font-size:11.5px;color:var(--muted)} .qc-tra .btn{width:auto;flex:0 0 auto;padding:4px 12px;font-size:12px} /* ═══════════ bảng ván đang đấu (trang chủ) ═══════════ */ .tran-loc{display:flex;gap:6px;flex-wrap:wrap;margin:0 0 12px} .tran-loc button{flex:0 1 auto;padding:6px 14px;border-radius:999px;cursor:pointer; border:1px solid var(--edge);background:var(--surface-2);color:var(--muted); font:inherit;font-size:12.5px;white-space:nowrap} .tran-loc button[aria-selected="true"]{background:var(--grad);color:var(--on-accent); border-color:transparent;font-weight:600} /* Hai cột trên máy tính, một cột trên điện thoại — đúng như đặt hàng. */ .tran-luoi,.tran-them{display:grid;gap:12px;grid-template-columns:minmax(0,1fr)} @media (min-width:720px){ .tran-luoi,.tran-them{grid-template-columns:repeat(2,minmax(0,1fr))} } .tran-them{margin-top:12px} .tran-o{display:block;padding:11px 13px;border-radius:12px;text-decoration:none; border:1px solid var(--edge);background:var(--surface-2);color:var(--ink);transition:.16s} .tran-o:hover{border-color:var(--gold-vivid);transform:translateY(-1px)} .tran-ke{display:flex;align-items:center;gap:8px;padding:3px 0} .tran-ke img{width:26px;height:26px;border-radius:50%;flex:none;object-fit:cover;background:var(--edge)} .tran-ke .ten{flex:1;min-width:0;font-size:13.5px;font-weight:500; overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .tran-ke .cap{flex:none;font-size:11.5px;color:var(--muted)} .tran-ke .cham{width:9px;height:9px;border-radius:50%;flex:none} .tran-ke .cham.do{background:var(--piece-red)} .tran-ke .cham.den{background:var(--piece-black);border:1px solid var(--edge)} .tran-chan{display:flex;flex-wrap:wrap;align-items:center;gap:4px 12px;margin-top:1px; padding-top:7px;border-top:1px dashed var(--edge);font-size:11.5px;color:var(--faint)} .tran-chan .song{color:var(--jade,var(--gold-vivid));font-weight:600} .tran-chan .luc{margin-left:auto} /* ═══════════ nút thao tác trong phòng: chữ → biểu tượng ═══════════ */ /* Bốn nút "Xin hoà / Xin thua / Khoe ván / Chép link" xếp một hàng dưới bàn cờ. Trên điện thoại hàng ấy chật tới mức "Khoe ván" bị cắt thành "Khoe v…" — chữ cụt còn khó đoán hơn biểu tượng. Chuyển hết sang biểu tượng, giữ nguyên aria-label và title nên vẫn đọc được tên đầy đủ khi rê chuột hoặc bằng trình đọc màn hình. "Xin thua" giữ hộp xác nhận như cũ: bấm nhầm cái cờ trắng thì thua luôn ván, không có đường lùi. */ .btn.icon.chu::before{content:attr(data-chu);background:none;-webkit-mask:none;mask:none; width:auto;height:auto;font-size:17px;font-weight:600;line-height:1} #resignBtn{--ic:url("data:image/svg+xml;utf8,")} #shareBtn{--ic:url("data:image/svg+xml;utf8,")} #nutToanMan{--ic:url("data:image/svg+xml;utf8,")} #nutToanMan[aria-pressed="true"]{--ic:url("data:image/svg+xml;utf8,")} #copyBtn{--ic:url("data:image/svg+xml;utf8,")} /* Hàng nút giờ toàn biểu tượng. Khi bật thoại thì có tới bảy nút, mà thẻ này chỉ rộng bằng nửa bàn cờ trên máy tính — cố định 38px là tràn xuống hàng hai. Cho chúng chia đều chỗ còn lại và co được tới 30px, vẫn đủ to để bấm bằng ngón tay. */ /* align-items:center + cùng một chiều cao: nếu để mỗi nút tự cao theo nội dung thì cái mang chữ "½" và cái mang ảnh SVG lệch nhau chừng một pixel — mắt không thấy, nhưng đó là dấu hiệu chúng không thật sự cùng một hàng, và phép thử bố cục bắt đúng chỗ ấy. */ .deck-acts{flex-wrap:wrap;align-items:center} .deck-acts .btn.icon{flex:1 1 32px;min-width:30px;max-width:46px;width:auto; height:38px;min-height:38px;padding:0} /* Bàn cờ trong thẻ "đang đấu" rộng đúng bằng cột, để mở trang chủ là đọc được thế cờ luôn chứ không phải bấm vào từng ván mới biết đang đánh tới đâu. Hai kỳ thủ xếp trên dưới đúng như lúc ngồi đối diện: Đen trên, Đỏ dưới. */ .tran-o{display:flex;flex-direction:column;gap:7px} .tran-ban{width:100%} /* Bàn cờ nhỏ dùng ĐÚNG bộ biến màu của bàn cờ thật, nên đổi sáng/tối là hai bên đổi theo nhau, không bao giờ lệch tông. */ .ban-nho-defs{position:absolute;width:0;height:0;overflow:hidden} .ban-nho{display:block;width:100%;height:auto;border-radius:5px; border:1px solid var(--line); box-shadow:0 1px 0 rgba(255,255,255,.14) inset, 0 8px 20px -12px var(--shadow-strong)} .ban-nho .go{fill:url(#bn-go)} .ban-nho .sang{fill:url(#bn-sang)} .ban-nho .toi{fill:url(#bn-toi)} .ban-nho .khung{fill:none;stroke:var(--line);stroke-width:.34;opacity:.5} .ban-nho .ke path{fill:none;stroke:var(--line);stroke-width:.42;opacity:.62} .ban-nho .ke circle{fill:var(--line);opacity:.4} /* Bàn nhỏ trước đây là hình phẳng: một đĩa màu, một vòng khắc, hết. Cùng một bàn cờ mà bên phòng chơi thì bẹt còn bên bàn online thì có khối — nhìn như hai trò khác nhau. Mấy lớp dưới đây dựng lại đúng thứ tự của bàn lớn: hai tầng bóng đổ, thành bên, mặt cong, rồi đốm bắt sáng. HAI VÒNG của mặt cờ (đĩa và nét khắc) giữ nguyên — chỉ thêm khối ở PHÍA NGOÀI, không đụng vào mặt. */ .ban-nho .bong2{fill:var(--shadow-strong);opacity:.15} .ban-nho .bong{fill:var(--shadow-strong);opacity:.34} .ban-nho .loe{fill:url(#bn-loe)} .ban-nho .dia{fill:url(#bn-quan)} .ban-nho .day{fill:url(#bn-day)} /* Vành gỗ: bảy vòng đồng tâm, CHÉP ĐÚNG dãy màu của --vanh-quan ở đầu tệp. SVG không dùng được box-shadow nên phải vẽ thành vòng thật. Đây là bản sao duy nhất của dãy màu ấy — sửa một bên thì sửa cả hai, không thì bàn nhỏ và bàn lớn ra hai con cờ khác nhau. Màu ĐẶT CỨNG, không theo chủ đề sáng/tối, y như bên kia. */ .ban-nho .v0{fill:#4A2C0E} .ban-nho .v1{fill:#7C511E} .ban-nho .v2{fill:#A6762F} .ban-nho .v3{fill:#F6E4BC} .ban-nho .v4{fill:#C79647} .ban-nho .v5{fill:#E0B972} .ban-nho .v6{fill:#F1DBAB} /* Vành vát mặt trong — cùng vai với --vat-quan ở quân trên bàn lớn. */ .ban-nho .vat{fill:none;stroke:url(#bn-vat);stroke-width:.31} .ban-nho .khac{fill:none;stroke-width:.2;opacity:.65} .ban-nho .q-do .khac{stroke:var(--piece-red)} .ban-nho .q-do text{fill:var(--piece-red)} .ban-nho .q-den .khac{stroke:var(--piece-black)} .ban-nho .q-den text{fill:var(--piece-black)} .ban-nho text{text-anchor:middle;dominant-baseline:central; font-family:"Noto Serif TC","Songti SC","Noto Serif SC",Georgia,serif;font-weight:700} /* Khung sau khi ván xong: chơi tiếp với người cũ, hoặc bắt cặp khác. */ .banner.xong{flex-wrap:wrap;gap:8px} .banner .banner-nut{display:flex;gap:8px;flex-wrap:wrap;margin-left:auto} .banner .banner-nut .btn{width:auto;flex:0 0 auto;padding:6px 16px} .banner .hint{flex-basis:100%;margin:0;font-size:11.5px} @media (max-width:520px){ .banner .banner-nut{margin-left:0;width:100%} .banner .banner-nut .btn{flex:1 1 0} } /* Ô chọn thể thức thời gian có thêm dòng phụ nói rõ mấy phút mấy giây. */ .seg button small{display:block;margin-top:2px;font-size:10.5px;opacity:.75;font-weight:400} .roomrow .tag.gio{font-variant-numeric:tabular-nums;text-transform:none;letter-spacing:0; border:1px solid var(--edge);border-radius:6px;padding:1px 6px} .tran-chan .gio{font-variant-numeric:tabular-nums} /* Bên tới lượt: một chấm sáng nhè nhẹ, đủ thấy mà không kéo mắt khỏi bàn cờ. */ .tran-ke.toi-luot .cham{box-shadow:0 0 0 3px color-mix(in srgb,var(--gold-vivid) 45%,transparent)} .tran-ke.toi-luot .ten{font-weight:600} .tran-chan .nuoc{font-variant-numeric:tabular-nums} /* Ô của nước vừa đi. Vẽ dưới quân nên không che mặt chữ. */ .ban-nho .vua{fill:var(--gold-vivid);opacity:.28} .ban-nho .song text{fill:var(--line);opacity:.5;letter-spacing:.1em; font-family:"Noto Serif SC",Georgia,serif} /* Ô tìm và bộ lọc trên trang giải đấu. */ .loc-giai{padding:12px 14px} .timo{display:flex;gap:8px;margin-bottom:10px} .timo .text{flex:1;min-width:0} .timo .btn{flex:0 0 auto;width:auto;padding:6px 14px} .loc-giai .tran-loc{margin:0} .giai-them{display:flex;flex-wrap:wrap;gap:4px 10px;margin-top:6px; font-size:11.5px;color:var(--faint)} .giai-them .ban{color:var(--gold-vivid);font-weight:600} .giai-them b{color:var(--muted);font-weight:600} /* Liên kết đóng vai nút: .btn vốn viết cho