/* Say Piano – lớp nhận diện thương hiệu cho app học viên (chủ dự án 2026-10-19). * Nguồn: docs/thuong-hieu/saypiano/SayPiano-BoNhanDien.ai (trang 05 Màu sắc · 06 Kiểu chữ · 07 Ứng dụng · 09 Nền). * Nạp SAU CÙNG trong app.html – chỉ ghi đè biến, phông, nút, thanh dọc, chip; không đổi bố cục. * * Luật (chủ dự án): * - KHÔNG quầng sáng / bóng mờ (blur) quanh nút. Chiều sâu chỉ bằng mép cứng phía dưới (0 4px 0) + viền tím đậm + dải sáng phía trên * – kiểu nút game (học từ Clash of Clans): khối đặc, viền dày, mặt bóng. * - Biểu tượng điều hướng: ô vuông bo tròn, viền tím đậm, hình màu đặc có viền (ui.js RAIL_GAME). * - Màu: Tím Đêm neo (nền, viền), Hồng Say Mê = nút chính, Vàng Piano = phần thưởng / mục đang chọn, Tím Khối = nút phụ, * Xanh Ngọc = nghe / MIDI. Tiêu đề, nút, điểm số: Lilita One (bản Việt hoá 1FTV, OFL); nội dung: Quicksand. */ @font-face { font-family: "Lilita One Viet"; src: url("../fonts/LilitaOne-Viet.woff2") format("woff2"); font-weight: 400; font-display: swap; } :root { --sm-dem: #2A0A7E; --sm-khoi: #5B2BC4; --sm-hong: #FF5FAE; --sm-hong-kem: #FFE3E6; --sm-vang: #FFC928; --sm-cam: #FF8A00; --sm-ngoc: #22AEFF; --sm-troi: #DCE8FF; --sm-oai: #F1E9FF; --sm-vien: #16043F; /* viền khối nút / ô biểu tượng (tím đêm sâu) */ --sm-tieu-de: "Lilita One Viet", "Quicksand", system-ui, sans-serif; /* nền app: "Đêm sân khấu" – tím sâu, chỉ chuyển sắc mềm */ --night: #1C0760; --night-2: #2B1185; --glass: rgba(34, 10, 110, .84); --glass-line: rgba(255, 255, 255, .16); --ink: #FFFFFF; --ink-2: #DCD2FF; --ink-3: #ADA0E0; --brand-progress: linear-gradient(90deg, #FF8FC8 0%, #FF5FAE 45%, #FFC928 100%); /* nút phụ (Tím Khối) – chữ trắng ≥ 4.5 cả hai đầu dải */ --nut-tim-1: #7046D8; --nut-tim-2: #5B2BC4; --nut-tim-bd: #34138A; /* nút vàng (phần thưởng, mục đang chọn) – chữ Tím Đêm */ --nut-vang-1: #FFE07A; --nut-vang-2: #FFC928; --nut-vang-bd: #D07A00; /* đúng (thanh phản hồi) – xanh lá giữ nghĩa "đúng" */ --nut-dung-1: #1B874A; --nut-dung-2: #157A42; --nut-dung-bd: #0E5C30; } html, body.po-app, #app { background: var(--night); } .scr.scr--ngang { background: radial-gradient(120% 90% at 100% 0%, rgba(255, 95, 174, .16) 0%, rgba(255, 95, 174, 0) 55%), radial-gradient(90% 80% at 0% 100%, rgba(91, 43, 196, .55) 0%, rgba(91, 43, 196, 0) 60%), var(--night); } /* ---------- chữ: tiêu đề Lilita One ---------- */ .scr--ngang .scr__title, .scr__title, .sec-head__title, .chap__title, .dlg__title, .gm-end__title, .gm-sheet__title, .toi-muc, .hn-the__t, .hn-hero__t, .chd-h, .xh-moi__t, .rsec__title, .cd-mua__t, .knd-tam__tieu, .cd-the__t, .bc-phan__tieu, .bc-goiy__tieu, .tp-ve__t, .nc__t, .bn-ten, .chao__tieu-de, .welcome__title { font-family: var(--sm-tieu-de); font-weight: 400; } /* ---------- HỆ NÚT GAME ---------- * Mặt: dải dọc 2 màu. Viền 2.5 px tím đêm (bóng trong, không chiếm chỗ). Dải sáng 3 px phía trên (bóng trong trắng). * Mép 3D: 0 4px 0 màu sậm + viền tím đêm bao cả mép (0 4px 0 2.5px). Bấm: lún 3 px. Không blur ở bất kỳ lớp nào. */ .po-nut, .hn-nut, .gm-btn, .btn--primary, .tp-cho, .gm-play, .gm-dt__go { --nut-1: var(--nut-xanh-1); --nut-2: var(--nut-xanh-2); --nut-bd: var(--nut-xanh-bd); --nut-chu: #fff; font-family: var(--sm-tieu-de); font-weight: 400; background: linear-gradient(180deg, var(--nut-1) 0%, var(--nut-2) 100%); color: var(--nut-chu); text-shadow: 0 2px 0 rgba(22, 4, 63, .35); box-shadow: inset 0 0 0 2.5px var(--sm-vien), inset 0 5px 0 rgba(255, 255, 255, .28), inset 0 -4px 0 rgba(22, 4, 63, .18), 0 4px 0 var(--nut-bd), 0 4px 0 2.5px var(--sm-vien); } .po-nut:active:not(:disabled), .hn-nut:active, .gm-btn:active:not(:disabled), .btn--primary:active:not(:disabled), .tp-cho:active, .gm-play:active, .gm-dt__go:active { transform: translateY(3px); box-shadow: inset 0 0 0 2.5px var(--sm-vien), inset 0 5px 0 rgba(255, 255, 255, .22), inset 0 -2px 0 rgba(22, 4, 63, .18), 0 1px 0 var(--nut-bd), 0 1px 0 2.5px var(--sm-vien); } .po-nut:focus-visible, .gm-btn:focus-visible, .hn-nut:focus-visible { box-shadow: inset 0 0 0 2.5px var(--sm-vien), inset 0 5px 0 rgba(255, 255, 255, .28), 0 4px 0 var(--nut-bd), 0 4px 0 2.5px var(--sm-vien), 0 4px 0 6px var(--sm-vang); } .po-nut .ico, .hn-nut .ico { filter: none; } /* phụ: Tím Khối */ .po-nut--phu { --nut-1: var(--nut-tim-1); --nut-2: var(--nut-tim-2); --nut-bd: var(--nut-tim-bd); color: #fff; } .po-nut--phu .ico { color: var(--sm-vang); } .po-nut--phu:active:not(:disabled) { box-shadow: inset 0 0 0 2.5px var(--sm-vien), 0 1px 0 var(--nut-tim-bd), 0 1px 0 2.5px var(--sm-vien); } :is(.dlg, .card, .po-nen-sang) .po-nut--phu { --nut-1: #FFFFFF; --nut-2: var(--sm-oai); --nut-bd: #B9A6F0; color: var(--sm-dem); text-shadow: none; } :is(.dlg, .card, .po-nen-sang) .po-nut--phu .ico { color: var(--sm-khoi); } /* vàng: phần thưởng, nhận quà */ .po-nut--vang { --nut-1: var(--nut-vang-1); --nut-2: var(--nut-vang-2); --nut-bd: var(--nut-vang-bd); --nut-chu: var(--sm-dem); text-shadow: 0 1px 0 rgba(255, 255, 255, .5); } /* tắt: khối tím xám, không dải sáng */ .po-nut--chinh:disabled, .gm-btn:disabled, .btn--primary:disabled { background: #3A2785; color: #A99CDB; text-shadow: none; box-shadow: inset 0 0 0 2.5px var(--sm-vien), 0 4px 0 #24165E, 0 4px 0 2.5px var(--sm-vien); } /* thanh phản hồi trong bài: đúng = xanh lá, sai = cam (giữ nghĩa), viền khối như mọi nút */ .gm-sheet .gm-btn { --nut-1: var(--nut-dung-1); --nut-2: var(--nut-dung-2); --nut-bd: var(--nut-dung-bd); } .gm-sheet.is-wrong .gm-btn { --nut-1: #E9741A; --nut-2: #C95F0C; --nut-bd: #8A3F05; } /* "Đàn lại": nút PHỤ hẳn hoi (mặt trắng, viền tím, mép tím nhạt) – chủ dự án 20/10: trong app không có nút dạng chữ gạch chân */ .gm-sheet .gm-btn.gm-sheet__lai, .gm-sheet.is-wrong .gm-btn.gm-sheet__lai { --nut-1: #FFFFFF; --nut-2: var(--sm-oai); --nut-bd: #B9A6F0; color: var(--sm-khoi); text-shadow: none; } /* nút nghe (▶ Nghe mẫu, tròn): Xanh Ngọc sậm cho chữ trắng */ .gm-play, .gm-dt__go { --nut-1: #1E8FE0; --nut-2: #136FC0; --nut-bd: #0B4C88; } .gm-dt__go.is-stop { --nut-1: #E9741A; --nut-2: #C95F0C; --nut-bd: #8A3F05; } .gm-dt.is-mau .gm-dt__go { --nut-1: #1E8FE0; --nut-2: #136FC0; --nut-bd: #0B4C88; } /* nút cũ (.btn--outline / ghost trên nền đêm): kính tím, viền rõ, không bóng mờ */ .scr--ngang .scr__main .btn--outline { background: var(--night-2); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .22); } .btn-round { box-shadow: inset 0 0 0 2px var(--line), 0 3px 0 rgba(22, 4, 63, .25); } .scr--ngang .scr__lui { background: var(--night-2); box-shadow: inset 0 0 0 2px var(--glass-line), 0 3px 0 var(--sm-vien); } /* ---------- THANH DỌC: ô biểu tượng kiểu game ---------- * Mỗi mục: ô vuông bo 12 px, mặt tím, viền tím đêm, mép cứng 3 px; biểu tượng màu đặc (ui.js RAIL_GAME). * Đang mở: mặt vàng Piano + mép cam. Không quầng sáng. */ .rail { background: linear-gradient(180deg, #250A72, #1A0656); border-right: 2px solid var(--sm-vien); box-shadow: none; } .rail__it { color: var(--ink-3); gap: 4px; } .rail__ic { width: 42px; height: 38px; border-radius: 12px; display: grid; place-items: center; background: linear-gradient(180deg, #4A26B0 0%, #3A1A95 100%); box-shadow: inset 0 0 0 2px var(--sm-vien), inset 0 4px 0 rgba(255, 255, 255, .16), 0 3px 0 #10032F; } .rail__ic svg { width: 30px; height: 30px; overflow: visible; } .rail__it.is-on { color: #fff; } .rail__it.is-on .rail__ic { background: linear-gradient(180deg, var(--nut-vang-1) 0%, var(--nut-vang-2) 100%); box-shadow: inset 0 0 0 2px var(--sm-vien), inset 0 4px 0 rgba(255, 255, 255, .45), 0 3px 0 var(--nut-vang-bd), 0 3px 0 2px var(--sm-vien); } .rail__it:focus-visible .rail__ic { box-shadow: inset 0 0 0 2px var(--sm-vien), 0 0 0 3px var(--sm-vang); } .rail__chu { font-family: var(--sm-tieu-de); font-weight: 400; font-size: 12px; } @media (max-height: 360px) { .rail__ic { width: 38px; height: 32px; border-radius: 10px; } .rail__ic svg { width: 26px; height: 26px; } .rail__chu { font-size: 11px; } } /* ---------- chip số dư (góc phải thanh trên): viên tím đặc, viền, mép cứng ---------- */ .chip { background: linear-gradient(180deg, #3A1A95, #2B1185); border: 0; box-shadow: inset 0 0 0 2px var(--sm-vien), inset 0 3px 0 rgba(255, 255, 255, .12), 0 3px 0 #10032F; font-family: var(--sm-tieu-de); font-weight: 400; font-size: 16px; } .chip b { font-weight: 400; } .chip--midi { font-family: inherit; font-weight: 700; font-size: 13px; } .chip--midi i { box-shadow: 0 0 0 2px rgba(63, 224, 122, .35); } /* ---------- thanh tiến độ: vàng–hồng trên rãnh tím ---------- */ .scr--ngang .scr__top .progress { background: #12043A; box-shadow: inset 0 0 0 2px var(--sm-vien); } /* ---------- hộp thoại, thẻ trên nền đêm: viền tím rõ thay vì quầng ---------- */ .hn-the, .hn-hero, .tpk-the, .tp-ve, .kr-the, .or-the { border: 0; } .dlg { box-shadow: 0 0 0 3px var(--sm-vien), 0 8px 0 rgba(10, 2, 30, .45); } /* ---------- Khu rừng: nút bài có mép cứng thay vì bóng mờ ---------- */ .kr-nut__mat { box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .38), 0 3px 0 rgba(10, 2, 30, .55); } .kr-nut.is-mo .kr-nut__mat { box-shadow: inset 0 0 0 2.5px var(--kr-nhan), 0 3px 0 rgba(10, 2, 30, .55); } .kr-nut.is-hien-tai .kr-nut__mat { box-shadow: inset 0 0 0 3px var(--kr-nhan), 0 4px 0 rgba(10, 2, 30, .6); } .kr-bien { box-shadow: inset 0 0 0 2px rgba(0, 0, 0, .25), 0 3px 0 rgba(10, 2, 30, .5); } /* ---------- Hôm nay: thẻ lớn "Học tiếp" và thẻ phụ – sân khấu tím, viền khối ---------- */ .hn-hero { background: radial-gradient(120% 140% at 85% 25%, #7A4BE0 0%, #4A1FB0 45%, #2A0A7E 100%); border: 0; box-shadow: inset 0 0 0 2px var(--sm-vien), inset 0 3px 0 rgba(255, 255, 255, .14), 0 4px 0 #10032F; } .hn-the, .tpk-the, .scr--tp .tp-ve, .xh-the, .shop__mon-b, .shop__chinh-o { border-color: rgba(255, 255, 255, .14); } .hn-the { box-shadow: inset 0 0 0 1.5px rgba(22, 4, 63, .6), 0 4px 0 rgba(10, 2, 30, .55); } /* ---------- Ô LỰA CHỌN kiểu thẻ game (màn hỏi người mới, xếp lớp, hồ sơ…) ---------- * Thẻ kem trắng, viền tím đêm 2.5 px, mép cứng 4 px; biểu tượng là ô màu đặc của bạn nốt (viền + dải sáng, nét trắng dày). * Đang chọn: mặt vàng Piano, mép cam, dấu tích tròn hồng. Bấm: lún 2 px. Không bóng mờ. */ .opt { background: linear-gradient(180deg, #FFFFFF 0%, #F6F0FF 100%); color: var(--sm-dem); border-radius: 18px; box-shadow: inset 0 0 0 2.5px var(--sm-vien), inset 0 -4px 0 rgba(42, 10, 126, .08), 0 4px 0 var(--sm-vien); transition: transform .08s, box-shadow .08s, background-color .15s; } .opt:active { transform: translateY(2px); box-shadow: inset 0 0 0 2.5px var(--sm-vien), 0 2px 0 var(--sm-vien); } .opt__label { font-family: var(--sm-tieu-de); font-weight: 400; font-size: 18px; line-height: 1.15; color: var(--sm-dem); } .opt__desc { color: #5A4A93; font-weight: 600; font-size: 13.5px; } .opt__ico { background: linear-gradient(180deg, var(--tone) 0%, var(--tone-d) 100%); color: #fff; box-shadow: inset 0 0 0 2px var(--sm-vien), inset 0 3px 0 rgba(255, 255, 255, .38), 0 3px 0 var(--sm-vien); } .opt__ico .ico { stroke-width: 2.6; } .opt:not(:has(.opt__ico))::before { width: 14px; height: 14px; box-shadow: 0 0 0 2px var(--sm-vien); } .opt__mark { width: 26px; height: 26px; background: #fff; box-shadow: inset 0 0 0 2.5px #B9A6F0; } .opt.is-on { background: linear-gradient(180deg, var(--nut-vang-1) 0%, var(--nut-vang-2) 100%); box-shadow: inset 0 0 0 3px var(--sm-vien), inset 0 4px 0 rgba(255, 255, 255, .5), 0 4px 0 var(--nut-vang-bd), 0 4px 0 2.5px var(--sm-vien); } .opt.is-on .opt__ico { background: linear-gradient(180deg, var(--tone) 0%, var(--tone-d) 100%); box-shadow: inset 0 0 0 2px var(--sm-vien), inset 0 3px 0 rgba(255, 255, 255, .38), 0 3px 0 var(--sm-vien); } .opt.is-on .opt__desc { color: #4A3480; } .opt.is-on .opt__mark { background: var(--nut-xanh-1); color: #fff; box-shadow: inset 0 0 0 2.5px var(--sm-vien); } .opt:focus-visible { box-shadow: inset 0 0 0 2.5px var(--sm-vien), 0 4px 0 var(--sm-vien), 0 0 0 4px var(--sm-vang); } .is-calm .opt__ico { border-radius: 12px; } /* bóng thoại của nhân vật: thẻ trắng viền tím đêm, mép cứng */ .say__bubble { color: var(--sm-dem); font-weight: 700; text-wrap: balance; box-shadow: inset 0 0 0 2.5px var(--sm-vien), 0 4px 0 var(--sm-vien); } .say__bubble::before { border-left: 2.5px solid var(--sm-vien); border-bottom: 2.5px solid var(--sm-vien); } .is-calm .say__bubble { color: var(--sm-dem); font-weight: 600; } /* ô nhập: trắng, viền tím đêm, mép cứng; đang nhập: viền hồng */ .field { border-radius: 16px; color: var(--sm-dem); box-shadow: inset 0 0 0 2.5px var(--sm-vien), inset 0 4px 0 rgba(42, 10, 126, .07), 0 3px 0 var(--sm-vien); } .field:focus { box-shadow: inset 0 0 0 3px var(--nut-xanh-1), 0 3px 0 var(--sm-vien); } .scr--ngang .scr__main .field-label { font-family: var(--sm-tieu-de); font-weight: 400; font-size: 18px; } /* ---------- Ô BIỂU TƯỢNG MÀU kiểu game trong các màn bên trong (Tôi, Cài đặt, Hôm nay, Báo cáo, Chọn đàn, Xếp hạng…) ---------- * Cùng một kiểu với ô biểu tượng của thẻ lựa chọn: mặt màu đặc (dải dọc), viền tím đêm 2 px, dải sáng trên, mép cứng 3 px, nét trắng dày. */ :is(.toi-ds__ico, .toi-cd__ico, .toi-dong .toi-tb__ico, .toi-tb__ico.is-mau, .cd-mua__ic, .hn-nv__ic, .xh-cho__ic, .bc-phan__ico, .sum__ico, .hcard__ico, .dev__ico) { background: linear-gradient(180deg, var(--tone, #7046D8) 0%, var(--tone-d, #5B2BC4) 100%); color: #fff; box-shadow: inset 0 0 0 2px var(--sm-vien), inset 0 3px 0 rgba(255, 255, 255, .35), 0 3px 0 var(--sm-vien); } :is(.toi-ds__ico, .toi-cd__ico, .toi-tb__ico, .cd-mua__ic, .hn-nv__ic, .xh-cho__ic, .bc-phan__ico, .sum__ico, .hcard__ico, .dev__ico) .ico { stroke-width: 2.5; } .hn-nv__ic { --tone: var(--nut-xanh-1); --tone-d: var(--nut-xanh-2); } .hn-nv__i.is-review .hn-nv__ic { --tone: #FFB13B; --tone-d: #E9741A; } .hn-nv__i.is-kho .hn-nv__ic { --tone: #3E95F0; --tone-d: #1F6FD6; } .xh-cho__ic { --tone: var(--nut-dung-1); --tone-d: var(--nut-dung-2); } /* menu "Tôi": mục đang mở viền vàng Piano (không còn xanh lá) */ .toi-ds__it.is-on { background: rgba(255, 201, 40, .14); border-color: var(--sm-vang); } .toi-ds__it.is-on .toi-ds__chev { color: var(--sm-vang); } /* công tắc: bật = hồng Say Mê, viền tím đêm; núm trắng không bóng mờ */ .switch { box-shadow: inset 0 0 0 2px var(--sm-vien); } .switch:checked, .toi-cd .switch:checked { background: var(--nut-xanh-1); box-shadow: inset 0 0 0 2px var(--sm-vien); } .switch::after { box-shadow: 0 2px 0 rgba(22, 4, 63, .35); } .toi-vol__range, .cd-vol__range { accent-color: var(--nut-xanh-1); } /* ---------- MÀN CHƠI GAME (bài học, thử thách) ---------- * Ô đáp án = thẻ game sáng: viền tím đêm, mép cứng, chữ Lilita. Chọn → vàng Piano; đúng → xanh lá nhạt; sai → cam nhạt (giữ nghĩa). * Thanh tiến độ: rãnh tím đêm có viền, phần đã đi hồng → vàng. Bóng thoại, nút thoát, nút loa: viền khối, không bóng mờ. */ .gm-card { border: 0; background: linear-gradient(180deg, #FFFFFF 0%, #F1E9FF 100%); color: var(--sm-dem); font-family: var(--sm-tieu-de); font-weight: 400; font-size: 19px; box-shadow: inset 0 0 0 2.5px var(--sm-vien), inset 0 -4px 0 rgba(42, 10, 126, .08), 0 4px 0 var(--sm-vien); } .gm-card:active:not(:disabled) { transform: translateY(3px); box-shadow: inset 0 0 0 2.5px var(--sm-vien), 0 1px 0 var(--sm-vien); } .gm-card.is-on { background: linear-gradient(180deg, var(--nut-vang-1) 0%, var(--nut-vang-2) 100%); color: var(--sm-dem); box-shadow: inset 0 0 0 3px var(--sm-vien), inset 0 4px 0 rgba(255, 255, 255, .5), 0 4px 0 var(--nut-vang-bd), 0 4px 0 2.5px var(--sm-vien); } .gm-card.is-right, .is-locked .gm-card.is-right { background: linear-gradient(180deg, #DDF8E6 0%, #9FEBBB 100%); color: #0E4D2A; box-shadow: inset 0 0 0 3px var(--sm-vien), 0 4px 0 #1F8F55, 0 4px 0 2.5px var(--sm-vien); } .gm-card.is-wrong { background: linear-gradient(180deg, #FFEAD2 0%, #FFC788 100%); color: #6B2E00; box-shadow: inset 0 0 0 3px var(--sm-vien), 0 4px 0 #C95F0C, 0 4px 0 2.5px var(--sm-vien); } .gm-card__cham { box-shadow: 0 0 0 2px var(--sm-vien); } .gm-progress { background: #12043A; box-shadow: inset 0 0 0 2px var(--sm-vien); } .gm-progress__bar { background: linear-gradient(90deg, #FF8FC8 0%, #FF5FAE 45%, #FFC928 100%); box-shadow: inset 0 3px 0 rgba(255, 255, 255, .35); } .gm-x { background: var(--night-2); color: #fff; box-shadow: inset 0 0 0 2px var(--glass-line), 0 3px 0 var(--sm-vien); } .gm-x:active { background: #3A1A95; transform: translateY(2px); box-shadow: inset 0 0 0 2px var(--glass-line), 0 1px 0 var(--sm-vien); } .gm-ask__bong, .gm-meet__say { color: var(--sm-dem); box-shadow: inset 0 0 0 2.5px var(--sm-vien), 0 4px 0 var(--sm-vien); } .gm-ask__bong::after { border-top-color: var(--sm-vien); } .gm-meet__say .gm-play--sm { --nut-1: #1E8FE0; --nut-2: #136FC0; --nut-bd: #0B4C88; background: linear-gradient(180deg, var(--nut-1), var(--nut-2)); color: #fff; box-shadow: inset 0 0 0 2.5px var(--sm-vien), inset 0 4px 0 rgba(255, 255, 255, .28), 0 4px 0 var(--nut-bd), 0 4px 0 2.5px var(--sm-vien); } /* màn "Đàn theo đèn": nút Nghe mẫu = nút game Xanh Ngọc; lời nhắc chữ sáng trên nền đêm */ .gm-td__mau { min-height: 44px; padding: 0 18px; border-radius: 22px; font-family: var(--sm-tieu-de); font-weight: 400; font-size: 16px; color: #fff; background: linear-gradient(180deg, #1E8FE0, #136FC0); text-shadow: 0 2px 0 rgba(22, 4, 63, .35); box-shadow: inset 0 0 0 2.5px var(--sm-vien), inset 0 4px 0 rgba(255, 255, 255, .28), 0 4px 0 #0B4C88, 0 4px 0 2.5px var(--sm-vien); } .gm-td__mau:active:not(:disabled) { transform: translateY(3px); box-shadow: inset 0 0 0 2.5px var(--sm-vien), 0 1px 0 #0B4C88, 0 1px 0 2.5px var(--sm-vien); } .gm-td__mau:disabled { opacity: .6; } .gm .gm-td__tt { color: var(--ink); } /* ---------- BÀN PHÍM ẢO kiểu đàn đồ chơi (mọi màn đàn) ---------- * Thân đàn tím viền tím đêm + mép cứng; dải nỉ hồng phía trên phím; phím trắng có môi dưới nổi, phím đen bóng. * Phím đang sáng (theo-den / tu-dan): mặt màu bạn nốt + số ngón trong vòng tròn nhún nhảy (data-ngon). */ .gm .gm-bp { margin-inline: 0; padding: 10px 10px 12px; border-radius: 20px; background: linear-gradient(180deg, #7A4BE0 0%, #4A1FB0 100%); box-shadow: inset 0 0 0 2.5px var(--sm-vien), inset 0 4px 0 rgba(255, 255, 255, .22), 0 5px 0 var(--sm-vien); } .gm .gm-bp__keys { border-top: 7px solid #E23C8F; border-radius: 6px 6px 12px 12px; box-shadow: 0 0 0 2.5px var(--sm-vien); } .gm .gm-bp__k--w { border-color: var(--sm-vien); background: linear-gradient(180deg, #FFFFFF 0%, #F4F0FF 100%); box-shadow: inset 0 -8px 0 #DCD3F5; } .gm .gm-bp__k--b { border-color: var(--sm-vien); background: linear-gradient(180deg, #2E2160 0%, #160A38 100%); box-shadow: inset 2px 0 0 rgba(255, 255, 255, .14), inset 0 -6px 0 #3E2F7A; } .gm .gm-bp__mui { background: linear-gradient(180deg, #5B2BC4, #3A1A95); color: #fff; box-shadow: inset 0 0 0 2px var(--sm-vien); } /* phím đang sáng: mặt màu bạn nốt, môi dưới sậm */ .gm .gm-bp__k--w.is-den, .gm .gm-bp__k--w.is-sang.is-den { background: linear-gradient(180deg, var(--tone-l) 0%, var(--tone) 100%); box-shadow: inset 0 -8px 0 var(--tone-d), inset 0 0 0 2px var(--sm-vien); } .gm .gm-bp__k--b.is-den { background: linear-gradient(180deg, var(--tone) 0%, var(--tone-d) 100%); box-shadow: inset 0 -6px 0 rgba(22, 4, 63, .35); } /* số ngón trong vòng tròn trắng viền tím đêm, nằm gần đáy phím (không bị khung bàn phím cắt), nhún nhảy */ .gm .gm-bp__k[data-ngon]::after { content: attr(data-ngon); position: absolute; left: 50%; bottom: 16px; width: 30px; height: 30px; margin-left: -15px; border-radius: 50%; display: grid; place-items: center; background: #fff; color: var(--sm-dem); font-family: var(--sm-tieu-de); font-size: 18px; line-height: 1; box-shadow: inset 0 0 0 2.5px var(--sm-vien), 0 3px 0 var(--sm-vien); animation: sm-nhun 0.9s ease-in-out infinite; pointer-events: none; z-index: 3; } .gm .gm-bp__k--b[data-ngon]::after { bottom: 10px; width: 26px; height: 26px; margin-left: -13px; font-size: 15px; } @keyframes sm-nhun { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } } html.po-giam .gm .gm-bp__k[data-ngon]::after { animation: none; } /* ---------- màn ĐÀN THEO ĐÈN: khung "sân khấu" bên phải ---------- */ .gm-td__san { display: flex; flex-direction: column; gap: 10px; min-width: 0; } .gm-td__san > .gm-td__dk { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0; } .gm-td__san > .gm-td__tt { margin: 0; text-align: center; font-family: var(--sm-tieu-de); font-weight: 400; font-size: 17px; color: var(--ink); } .gm-td__cham { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 7px; } .gm-td__cham > i { width: 14px; height: 14px; border-radius: 50%; background: rgba(255, 255, 255, .16); box-shadow: inset 0 0 0 2px var(--sm-vien); transition: transform .15s, background-color .15s; } .gm-td__cham > i.is-xong { background: var(--sm-vang); } .gm-td__cham > i.is-dang { background: #fff; transform: scale(1.3); } .gm-td__cham.is-lien { height: 14px; border-radius: 7px; background: #12043A; box-shadow: inset 0 0 0 2px var(--sm-vien); overflow: hidden; } .gm-td__cham.is-lien > i { width: var(--p); height: 100%; border-radius: 7px; background: linear-gradient(90deg, #FF8FC8, #FFC928); box-shadow: none; transform: none; } html.po-giam .gm-td__cham > i { transition: none; } /* nút loa của câu hỏi ở màn bàn phím: gắn vào góc phải dưới bóng thoại thay vì đứng lơ lửng cạnh nhân vật */ .gm-man--kb > .gm-ask > .gm-ask__duoi { position: relative; } .gm-man--kb > .gm-ask > .gm-ask__duoi > .gm-play--tron { position: absolute; top: -8px; right: 6px; width: 44px; min-width: 44px; height: 44px; min-height: 44px; margin: 0; } .gm-td .gm-bp__keys { height: clamp(116px, 56cqh, 210px); }