/* Trang chủ mới "hệ mặt trời một màn hình" (QĐ-93). Vị trí hành tinh do cong.js đặt qua biến --x --y --d --k. */ :root { --nen-1: #2a1836; --nen-2: #150d22; --nen-3: #0a0712; --nen-4: #050409; --chu: #fff7f0; --chu-mo: rgba(255, 247, 240, .72); --vien: #ffe2c4; --nhan: #ffb46b; --em: cubic-bezier(.22, .9, .24, 1); --tg: 640ms; color-scheme: dark; } * { box-sizing: border-box; margin: 0; padding: 0; } html, body { height: 100%; overflow: hidden; } body { font-family: 'Be Vietnam Pro', 'Segoe UI', system-ui, sans-serif; color: var(--chu); background: radial-gradient(ellipse 55% 40% at 68% 22%, rgba(162, 58, 138, .18), transparent 70%), radial-gradient(ellipse 50% 40% at 22% 72%, rgba(106, 58, 176, .15), transparent 70%), radial-gradient(ellipse at 50% 45%, var(--nen-1) 0%, var(--nen-2) 42%, var(--nen-3) 78%, var(--nen-4) 100%); -webkit-tap-highlight-color: transparent; overscroll-behavior: none; touch-action: manipulation; } a { color: inherit; text-decoration: none; } #sao { position: fixed; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; pointer-events: none; } /* 17/10: nền hạt sáng (nen-hat.js, WebGL thuần), hiện dần khi vẽ được; không có WebGL thì chỉ còn nền sao */ #nen { position: fixed; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; pointer-events: none; opacity: 0; transition: opacity 1.2s ease; } #nen.san { opacity: .9; } /* đầu trang */ .dau { position: fixed; z-index: 30; top: 0; left: 0; right: 0; padding: max(14px, env(safe-area-inset-top)) 16px 0; text-align: center; pointer-events: none; } .ten { font-size: clamp(26px, 1.5vw + 21px, 44px); line-height: 1; } /* logo Ari + chữ YOGA: nét, phẳng, không bóng mờ (cô dặn 04/10) */ .ten-hang { display: inline-flex; align-items: center; gap: .3em; } .ten-logo { height: 1.55em; width: auto; } .ten-chu { font-family: 'Bricolage Grotesque', 'Be Vietnam Pro', sans-serif; font-weight: 700; letter-spacing: .16em; margin-right: -.16em; color: #f284b5; } .dang-nhap { position: absolute; right: 12px; top: max(10px, env(safe-area-inset-top)); width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; pointer-events: auto; } .dang-nhap svg, .tieng svg, .ve svg, .bt-vong svg { fill: none; stroke: var(--vien); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; } .tieng { position: absolute; right: 58px; top: max(10px, env(safe-area-inset-top)); width: 44px; height: 44px; display: grid; place-items: center; border: 0; background: none; cursor: pointer; pointer-events: auto; } .tieng svg { width: 30px; height: 30px; border: 1.5px solid var(--vien); border-radius: 50%; padding: 4px; } .tieng .tieng-gach, .tieng[aria-pressed="true"] .tieng-song { display: none; } .tieng[aria-pressed="true"] .tieng-gach { display: inline; } .tieng[aria-pressed="true"] svg { opacity: .6; } .tieng:focus-visible { outline: 2px solid var(--nhan); outline-offset: -2px; border-radius: 50%; } /* phản hồi tức thì khi chạm, như ứng dụng */ .ht img, .ht-giua img, .meo img, .bt-vong, .zalo, .tq-nut, .ve, .ct-ve { transition: scale 140ms var(--em); } .ht:active img, .ht-giua:active img, .meo:active img { scale: .93; } .bt-nut:active .bt-vong, .zalo:active, .ve:active, .ct-ve:active, .tieng:active svg { scale: .92; } .dang-nhap svg { width: 30px; height: 30px; border: 1.5px solid var(--vien); border-radius: 50%; padding: 3px; } /* ô "Ca kế tiếp" ở góc trên trái: giờ ca offline gần nhất, chạm vào thì phóng tới hành tinh lớp đó */ .dau { min-height: 70px; } .ke { position: absolute; left: 12px; top: max(8px, env(safe-area-inset-top)); min-height: 52px; max-width: calc(50vw - 90px); padding: 2px 4px; display: grid; align-content: center; gap: 1px; text-align: left; pointer-events: auto; transition: opacity 300ms ease, scale 140ms var(--em); } .ke[hidden] { display: none; } .ke:active { scale: .95; } .ke-nhan { display: flex; align-items: center; gap: 4px; font-size: 9.500px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--nhan); white-space: nowrap; } .ke-nhan svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .ke-dong { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 5px; white-space: nowrap; } .ke-gio { font-family: 'Bricolage Grotesque', 'Be Vietnam Pro', sans-serif; font-size: 19px; font-weight: 700; line-height: 1.1; font-variant-numeric: tabular-nums; } .ke-khi { font-size: 10.500px; color: var(--chu-mo); } .ke-lop { font-size: 11px; color: var(--chu); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ke:focus-visible { outline: 2px solid var(--nhan); outline-offset: 2px; border-radius: 10px; } html[data-co-chon] .ke { opacity: 0; pointer-events: none; } /* màn điện thoại thấp (iPhone SE đời đầu...): đang xem tổng quan một lớp thì nút Zalo nổi nhường chỗ cho nút "Xem chi tiết" (trong chi tiết lớp vẫn có nút Zalo) */ @media (max-width: 719px) and (max-height: 620px) { html[data-co-chon] .zalo { opacity: 0; pointer-events: none; } } @media (min-width: 720px) { .ke { left: 24px; top: 14px; max-width: 220px; } .ke-nhan { font-size: 10.500px; } .ke-gio { font-size: 24px; } .ke-khi { font-size: 12.500px; } .ke-lop { font-size: 13px; } } /* hệ hành tinh */ #cong { touch-action: pan-y pinch-zoom; } /* vuốt ngang là của trang (đổi lớp), trình duyệt không nuốt thành cuộn */ #cong, .he { position: fixed; top: 0; right: 0; bottom: 0; left: 0; } .he { z-index: 10; } .quy { position: absolute; left: 0; top: 0; width: var(--qw, 0); height: var(--qh, 0); border: 1px solid rgba(255, 226, 196, .16); border-radius: 50%; transform: translate(var(--cx, 0px), var(--cy, 0px)); transition: opacity var(--tg) var(--em); } .ht-ds { list-style: none; } .ht-giua, .ht-ds li, .meo { position: absolute; left: 0; top: 0; width: var(--d, 0px); height: var(--d, 0px); /* --x, --y là GÓC TRÊN TRÁI tính sẵn bằng px (cong.js đã trừ nửa cỡ). KHÔNG dùng translate(-50%): Safari iPhone tính sai phần trăm trong transform đang hoạt cảnh / chuyển tiếp khi cỡ khung đổi sau lúc bắt đầu (lỗi hành tinh giữa lệch góc, cô báo 05/10). */ transform: translate(var(--x, 0px), var(--y, 0px)) scale(var(--k, 1)); opacity: var(--o, 1); z-index: var(--z, 1); transition: transform var(--tg) var(--em), opacity var(--tg) var(--em), translate 500ms cubic-bezier(.2, .7, .2, 1); will-change: transform; } .he.chua-san .ht-giua, .he.chua-san .ht-ds li, .he.chua-san .meo, .he.chua-san .quy { transition: none; } .ht-giua { display: block; border-radius: 50%; } .ht-giua img { pointer-events: none; position: absolute; left: 50%; top: 50%; width: 118%; height: auto; margin: -59% 0 0 -59%; animation: tho 9s ease-in-out infinite; } /* canh giữa bằng margin, không bằng transform */ /* sống động (cô dặn 04/10): mỗi hành tinh trôi theo một đường cong riêng (hai chiều), nghiêng qua lại và phập phồng rất nhẹ; biên độ --bien và nhịp --tt / --tn / --tre do cong.js đặt khác nhau cho từng hành tinh. Trên máy tính còn nhích theo con trỏ (--px, --py) theo độ sâu --sau. */ /* hành tinh giữa QUAY (cô duyệt 05/10): video 20 giây dựng từ đúng hình cô chốt, cong.js thêm vào sau khi trang hiện xong rồi cho hiện dần đè lên hình tĩnh. Video nền tối nên cắt tròn + làm mờ mép bằng mask (phần tử có transform nên không dùng mix-blend với nền trang được). Hành tinh chiếm ~92% khung video. */ .ht-giua video { position: absolute; left: 50%; top: 50%; width: 123%; height: auto; aspect-ratio: 1; margin: -61.5% 0 0 -61.5%; pointer-events: none; opacity: 0; transition: opacity 1200ms ease; -webkit-mask-image: radial-gradient(circle closest-side, #000 84%, transparent 97%); mask-image: radial-gradient(circle closest-side, #000 84%, transparent 97%); } .ht-giua img { transition: opacity 1200ms ease 400ms; } .ht-giua.dang-quay video { opacity: 1; } .ht-giua.dang-quay img { opacity: 0; } .ht { position: absolute; top: 0; right: 0; bottom: 0; left: 0; display: block; border-radius: 50%; animation: troi var(--tt, 7s) ease-in-out var(--tre, 0s) infinite; } .ht img { position: absolute; left: 50%; top: 50%; width: 116%; height: auto; margin: -58% 0 0 -58%; pointer-events: none; animation: nghieng var(--tn, 9s) ease-in-out var(--tre, 0s) infinite alternate; } .ht-ds li, .ht-giua, .meo { translate: calc(var(--px, 0) * var(--sau, 1) * 7px) calc(var(--py, 0) * var(--sau, 1) * 7px); } .ht-giua { --sau: -0.35; } .meo { --sau: 1.3; } .ht-ten { position: absolute; left: 50%; top: 100%; transform: translateX(-50%); margin-top: calc(6px / var(--k, 1)); white-space: nowrap; text-align: center; font-size: calc(var(--co-chu, 12px) / var(--k, 1)); font-weight: 400; letter-spacing: .01em; color: var(--chu); text-shadow: 0 1px 6px rgba(0, 0, 0, .7); transition: opacity 300ms ease; } .ht:focus-visible, .ht-giua:focus-visible, .bt-nut:focus-visible .bt-vong, .meo:focus-visible, .zalo:focus-visible, .dang-nhap:focus-visible, .ve:focus-visible { outline: 2px solid var(--nhan); outline-offset: 3px; } .bt-nut:focus-visible { outline: none; } /* tên gọn ở điện thoại (toàn cảnh), tên đầy đủ khi đang chọn và ở máy tính */ .ht-ten .ngan { display: none; } @media (max-width: 719px) { .ht-ds li:not(.chon) .ht-ten .ngan { display: inline; } .ht-ds li:not(.chon) .ht-ten .day { display: none; } } .ht-ds li.chon .ht-ten { white-space: normal; width: max-content; max-width: calc(88vw / var(--k, 1)); line-height: 1.15; text-wrap: balance; } /* đang chọn một lớp */ #cong:not([data-chon=""]) .ht-ds li:not(.chon) .ht-ten { opacity: 0; } #cong:not([data-chon=""]) .quy { opacity: 0; } #cong:not([data-chon=""]) .ht-giua { pointer-events: none; } .ht-ds li.chon .ht-ten { opacity: 0; } .ht-ds li.chon .ht { animation-duration: 11s; } /* tổng quan lớp đang chọn: tên, nhãn, một câu, nút Xem chi tiết */ .tq { position: fixed; z-index: 22; left: var(--tq-x, 50%); top: var(--tq-y, 60%); width: min(88vw, 520px); transform: translateX(-50%); text-align: center; animation: tq-hien 520ms var(--em) 180ms both; } .tq[hidden] { display: none; } .tq-ten { font-family: 'Bricolage Grotesque', 'Be Vietnam Pro', sans-serif; font-weight: 600; font-size: clamp(20px, 1.4vw + 15px, 32px); line-height: 1.15; text-wrap: balance; text-shadow: 0 1px 10px rgba(0, 0, 0, .6); } .tq-nhan, .ct-nhan { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-top: 10px; } .tq-nhan span, .ct-nhan span { padding: 3px 10px; border: 1px solid rgba(255, 226, 196, .45); border-radius: 99px; font-size: 11.5px; letter-spacing: .02em; color: var(--vien); } .tq-ai { margin-top: 10px; font-size: clamp(13px, .3vw + 12.5px, 16px); line-height: 1.5; color: var(--chu-mo); text-wrap: pretty; text-shadow: 0 1px 8px rgba(0, 0, 0, .7); } .tq-nut { margin-top: 14px; height: 46px; padding: 0 20px 0 22px; display: inline-flex; align-items: center; gap: 6px; border: 0; border-radius: 99px; cursor: pointer; font: 600 14px 'Be Vietnam Pro', sans-serif; letter-spacing: .03em; color: #1a0f22; background: linear-gradient(180deg, #ffe9d2, var(--nhan)); box-shadow: 0 6px 22px rgba(255, 180, 107, .35); transition: transform 200ms var(--em); } .tq-nut:active { transform: scale(.96); } .tq-nut svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; animation: nhun 1.8s ease-in-out infinite; } .tq-nut:focus-visible, .ct-ve:focus-visible, .ct-zalo:focus-visible { outline: 2px solid #fff; outline-offset: 3px; } @media (max-width: 719px) and (max-height: 700px) { .tq-nhan { margin-top: 6px; } .tq-ai { margin-top: 6px; line-height: 1.4; } .tq-nut { margin-top: 9px; height: 44px; } .tq-nhan span { font-size: 10.5px; padding: 2px 8px; } } /* phần chi tiết lớp: trang chủ trượt lên, phần này trượt từ dưới vào (cùng một trang) */ .dau, #cong, .bt, .zalo { transition: translate 820ms var(--em), opacity 500ms ease; } html[data-mo] .dau, html[data-mo] #cong, html[data-mo] .bt, html[data-mo] .zalo { translate: 0 -100vh; opacity: 0; pointer-events: none; } /* opacity: trình duyệt cũ không có translate vẫn ẩn được */ .ct { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 50; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; translate: 0 100vh; visibility: hidden; transition: translate 820ms var(--em), visibility 0s linear 820ms; padding: 0 20px max(40px, env(safe-area-inset-bottom)); } html[data-mo] .ct { translate: 0 0; visibility: visible; transition: translate 820ms var(--em), visibility 0s; } .ct-dau { position: sticky; top: 0; z-index: 2; height: 0; padding-top: max(10px, env(safe-area-inset-top)); margin: 0 -8px; } .ct-ve { width: 44px; height: 44px; border: 1.5px solid var(--vien); border-radius: 50%; background: rgba(10, 7, 18, .55); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); cursor: pointer; display: grid; place-items: center; } .ct-ve svg { width: 22px; height: 22px; fill: none; stroke: var(--vien); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; } .ct-lop { max-width: 620px; margin: 0 auto; padding-top: max(26px, env(safe-area-inset-top)); text-align: center; min-height: calc(100vh + 1px); } .ct-lop[hidden] { display: none; } .ct-ht { width: min(52vw, 230px); height: auto; animation: troi 7s ease-in-out infinite; } .ct-lop h2 { margin-top: 6px; font-family: 'Bricolage Grotesque', 'Be Vietnam Pro', sans-serif; font-weight: 600; font-size: clamp(24px, 2vw + 18px, 38px); line-height: 1.12; text-wrap: balance; } .ct-ai { margin-top: 14px; font-size: 16px; line-height: 1.55; color: var(--chu-mo); text-wrap: pretty; } .ct-bang { margin-top: 26px; text-align: left; border-top: 1px solid rgba(255, 226, 196, .18); } .ct-bang > div { display: grid; grid-template-columns: 104px 1fr; gap: 14px; padding: 14px 2px; border-bottom: 1px solid rgba(255, 226, 196, .18); } .ct-bang dt { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--nhan); padding-top: 3px; } .ct-bang dd { font-size: 15px; line-height: 1.55; } .ct-bang ul { list-style: none; display: grid; gap: 6px; } .ct-ghi { margin-top: 18px; text-align: left; font-size: 13.5px; line-height: 1.55; color: var(--chu-mo); } .ct-zalo { margin-top: 26px; height: 50px; padding: 0 28px; display: inline-flex; align-items: center; border-radius: 99px; font-weight: 600; font-size: 15px; letter-spacing: .03em; color: #1a0f22; background: linear-gradient(180deg, #ffe9d2, var(--nhan)); box-shadow: 0 6px 22px rgba(255, 180, 107, .35); } @keyframes tq-hien { from { opacity: 0; translate: 0 14px; } to { opacity: 1; translate: 0 0; } } @keyframes nhun { 0%, 100% { translate: 0 0; } 50% { translate: 0 3px; } } /* 4 trang riêng (Vì sao, Sự kiện, Liên hệ, Bản đồ): trượt từ phải vào kiểu iOS, trang chủ lùi nhẹ sang trái */ html[data-trang] .dau, html[data-trang] #cong, html[data-trang] .bt, html[data-trang] .zalo { translate: -28vw 0; opacity: 0; pointer-events: none; } .tr { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 50; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; translate: 100vw 0; visibility: hidden; transition: translate 560ms var(--em), visibility 0s linear 560ms; padding: 0 20px max(48px, env(safe-area-inset-bottom)); } html[data-trang] .tr { translate: 0 0; visibility: visible; transition: translate 560ms var(--em), visibility 0s; } .tr-trang { max-width: 640px; margin: 0 auto; padding-top: calc(max(10px, env(safe-area-inset-top)) + 60px); min-height: calc(100vh + 1px); } .tr-trang[hidden] { display: none; } .tr-trang h2 { font-family: 'Bricolage Grotesque', 'Be Vietnam Pro', sans-serif; font-weight: 600; font-size: clamp(28px, 2vw + 22px, 42px); line-height: 1.1; text-wrap: balance; } .tr-trang h3 { margin: 38px 0 14px; font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--nhan); } .tr-mo { margin-top: 14px; font-size: 16px; line-height: 1.6; color: var(--chu-mo); text-wrap: pretty; } .tr-hang { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; } .tr-nut { min-height: 50px; padding: 0 24px; display: inline-flex; align-items: center; border-radius: 99px; font-weight: 600; font-size: 15px; letter-spacing: .02em; color: #1a0f22; background: linear-gradient(180deg, #ffe9d2, var(--nhan)); box-shadow: 0 6px 22px rgba(255, 180, 107, .3); transition: scale 140ms var(--em); } .tr-nut-vien { color: var(--chu); background: none; border: 1.5px solid var(--vien); box-shadow: none; } .tr-nut:active { scale: .96; } .vs-ds, ul.lh-ds, .bd-ds { list-style: none; } /* trang Lớp học: 11 lớp (hành tinh nhỏ + tên + ai nên học + lịch), bảng học phí */ div.lh-ds { display: grid; gap: 4px; margin-top: 22px; } .lh-lop { display: grid; grid-template-columns: 62px 1fr; gap: 14px; align-items: center; min-height: 84px; padding: 10px 2px; border-bottom: 1px solid rgba(255, 226, 196, .14); transition: scale 150ms var(--em); } .lh-lop:active { scale: .98; } .lh-lop img { width: 62px; height: 62px; } .lh-lop b { display: block; font-size: 16.500px; font-weight: 600; line-height: 1.25; } .lh-ai { display: block; margin-top: 3px; font-size: 13.500px; line-height: 1.45; color: var(--chu-mo); } .lh-lich { display: block; margin-top: 4px; font-size: 12.500px; line-height: 1.4; color: var(--vien); } .lh-bang { border-top: 1px solid rgba(255, 226, 196, .16); } .lh-phi { display: grid; grid-template-columns: minmax(110px, 38%) 1fr; gap: 14px; padding: 13px 2px; border-bottom: 1px solid rgba(255, 226, 196, .16); } .lh-phi dt { font-size: 14.500px; font-weight: 500; line-height: 1.4; } .lh-phi dd { font-size: 14.500px; line-height: 1.55; color: var(--chu-mo); } .lh-gio dt span { display: block; margin-top: 2px; font-size: 12px; font-weight: 400; color: var(--vien); } .lh-ghi { font-size: 13.500px; } /* khung lịch cả tuần: mỗi ngày một hàng, hai cột Sáng / Chiều tối; mỗi ca một ô chạm được (chấm đặc = tại studio, chấm rỗng = online) */ .lt { display: grid; gap: 0; border-top: 1px solid rgba(255, 226, 196, .16); } .lt-dau, .lt-ngay { display: grid; grid-template-columns: 58px 1fr 1fr; gap: 8px; align-items: start; } .lt-dau { padding: 10px 0 6px; font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--chu-mo); } .lt-ngay { padding: 8px 0; border-bottom: 1px solid rgba(255, 226, 196, .16); } .lt-thu { padding-top: 13px; font-size: 13.500px; font-weight: 600; } .lt-cot { display: grid; gap: 6px; } .lt-o { min-height: 44px; padding: 5px 22px 5px 10px; position: relative; display: grid; align-content: center; border-radius: 12px; background: rgba(255, 226, 196, .08); border: 1px solid rgba(255, 226, 196, .16); transition: scale 140ms var(--em), background-color 200ms ease; } .lt-o:active { scale: .96; background: rgba(255, 226, 196, .16); } .lt-o b { font-family: 'Bricolage Grotesque', 'Be Vietnam Pro', sans-serif; font-size: 14.500px; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1.15; } .lt-o span { font-size: 11.500px; line-height: 1.25; color: var(--chu-mo); } .lt-cham { position: absolute; right: 8px; top: 9px; width: 7px; height: 7px; border-radius: 50%; border: 1.5px solid var(--nhan); } .lt-o[data-kieu="off"] .lt-cham, .lt-o[data-kieu="ca-hai"] .lt-cham { background: var(--nhan); } .lt-o[data-kieu="ca-hai"] .lt-cham { box-shadow: 0 11px 0 -1.5px var(--nen-2), 0 11px 0 0 var(--nhan); } .lt-trong { display: block; min-height: 44px; } /* tìm lớp: hai nhóm nút chọn + danh sách gợi ý */ .tl-hoi { margin: 20px 0 10px; font-size: 15px; font-weight: 600; } .tl-nhom { display: flex; flex-wrap: wrap; gap: 8px; } .tl-chon { min-height: 44px; padding: 0 16px; border: 1.5px solid rgba(255, 226, 196, .5); border-radius: 99px; background: none; color: var(--chu); cursor: pointer; font: 500 14px 'Be Vietnam Pro', sans-serif; transition: scale 140ms var(--em), background-color 200ms ease, color 200ms ease; } .tl-chon:active { scale: .95; } .tl-chon[aria-pressed="true"] { background: linear-gradient(180deg, #ffe9d2, var(--nhan)); border-color: transparent; color: #1a0f22; font-weight: 600; } .tl-chon:focus-visible, .lt-o:focus-visible { outline: 2px solid #fff; outline-offset: 2px; } .tl-kq { margin-top: 18px; display: grid; gap: 4px; } .tl-kq:not(:empty) { border-top: 1px solid rgba(255, 226, 196, .16); } .tl-kq .tl-trong { padding: 16px 0; font-size: 14.500px; line-height: 1.55; color: var(--chu-mo); } .vs-ly { padding: 15px 0; border-bottom: 1px solid rgba(255, 226, 196, .16); } .vs-ly:first-child { border-top: 1px solid rgba(255, 226, 196, .16); } .vs-ly b { display: block; font-size: 16px; font-weight: 600; } .vs-ly span { display: block; margin-top: 5px; font-size: 14.5px; line-height: 1.55; color: var(--chu-mo); } .vs-so-ds { display: grid; gap: 18px; } .vs-so p { max-width: 86%; padding: 11px 15px; font-size: 14.5px; line-height: 1.5; border-radius: 18px; } .vs-ban { margin-left: auto; background: rgba(255, 226, 196, .14); border-bottom-right-radius: 6px; } .vs-ari { margin-top: 7px; background: rgba(242, 132, 181, .2); border: 1px solid rgba(242, 132, 181, .3); border-bottom-left-radius: 6px; } .vs-hoi { border-bottom: 1px solid rgba(255, 226, 196, .16); } .vs-hoi:first-of-type { border-top: 1px solid rgba(255, 226, 196, .16); } .vs-hoi summary { min-height: 52px; padding: 13px 34px 13px 0; display: flex; align-items: center; position: relative; cursor: pointer; list-style: none; font-size: 15.500px; font-weight: 500; line-height: 1.35; } .vs-hoi summary::-webkit-details-marker { display: none; } .vs-hoi summary::after { content: ''; position: absolute; right: 6px; top: 50%; width: 9px; height: 9px; border-right: 1.5px solid var(--vien); border-bottom: 1.5px solid var(--vien); transform: translateY(-70%) rotate(45deg); transition: transform 240ms var(--em); } .vs-hoi[open] summary::after { transform: translateY(-30%) rotate(-135deg); } .vs-hoi p { padding: 0 0 16px; font-size: 14.5px; line-height: 1.6; color: var(--chu-mo); } .sk-ds { display: grid; gap: 18px; margin-top: 26px; } .sk-the { display: grid; gap: 6px; padding-bottom: 16px; border-radius: 18px; overflow: hidden; background: rgba(255, 226, 196, .07); border: 1px solid rgba(255, 226, 196, .14); transition: scale 160ms var(--em); } .sk-the:active { scale: .98; } .sk-the img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; } .sk-the > span, .sk-the > b { padding: 0 16px; } .sk-nhan { margin-top: 8px; font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--nhan); } .sk-the b { font-size: 18px; font-weight: 600; line-height: 1.25; } .sk-ghi { font-size: 14px; line-height: 1.5; color: var(--chu-mo); } .sk-xem { margin-top: 4px; font-size: 13.5px; font-weight: 600; color: var(--vien); } .lh-ds li a { min-height: 56px; display: flex; align-items: center; justify-content: space-between; gap: 12px; border-bottom: 1px solid rgba(255, 226, 196, .16); font-size: 15.500px; } .lh-ds li:first-child a { border-top: 1px solid rgba(255, 226, 196, .16); } .lh-ds b { font-weight: 500; } .lh-ds span { color: var(--chu-mo); font-size: 14px; } .bd-dc { margin-top: 16px; font-size: 19px; font-weight: 500; line-height: 1.4; } .bd-ds { margin-top: 22px; display: grid; gap: 12px; counter-reset: b; } .bd-ds li { position: relative; padding-left: 40px; font-size: 15px; line-height: 1.55; counter-increment: b; } .bd-ds li::before { content: counter(b); position: absolute; left: 0; top: 0; width: 26px; height: 26px; display: grid; place-items: center; border: 1.5px solid var(--vien); border-radius: 50%; font-size: 12.5px; color: var(--vien); } /* mèo Công cụ */ .meo img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 0 16px rgba(255, 154, 209, .35)); animation: meo-lac 5.5s ease-in-out infinite, meo-troi 26s ease-in-out infinite; transform-origin: 50% 60%; } .meo span { position: absolute; left: 50%; top: 96%; transform: translateX(-50%); font-size: var(--co-chu, 12px); font-weight: 600; white-space: nowrap; text-shadow: 0 1px 6px rgba(0, 0, 0, .7); } /* nút quay lại */ .ve { position: fixed; z-index: 40; left: 12px; top: max(10px, env(safe-area-inset-top)); width: 44px; height: 44px; border: 1.5px solid var(--vien); border-radius: 50%; background: rgba(10, 7, 18, .45); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); cursor: pointer; display: grid; place-items: center; } .ve[hidden] { display: none; } .ve svg { width: 22px; height: 22px; } /* 9 biểu tượng (thêm Xếp hạng 05/10) */ .bt { position: fixed; z-index: 20; display: grid; } .bt-nut { display: flex; align-items: center; min-width: 44px; min-height: 44px; font-size: 13px; font-weight: 400; letter-spacing: .03em; color: var(--chu); } .bt-vong { flex: none; width: var(--vong, 44px); height: var(--vong, 44px); display: grid; place-items: center; border: 1.5px solid var(--vien); border-radius: 50%; box-shadow: 0 0 14px rgba(255, 226, 196, .18), inset 0 0 10px rgba(255, 226, 196, .06); transition: transform 240ms var(--em), background-color 240ms ease; } .bt-vong svg { width: 54%; height: 54%; } .bt-nut:hover .bt-vong, .bt-nut:active .bt-vong { transform: scale(1.08); background: rgba(255, 226, 196, .12); } .zalo { position: fixed; z-index: 25; left: 16px; padding: 0 16px; height: 44px; display: inline-flex; align-items: center; border: 1.5px solid var(--vien); border-radius: 99px; font-size: 13px; font-weight: 500; letter-spacing: .04em; background: rgba(10, 7, 18, .35); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); } /* điện thoại: hai hàng dưới đáy */ @media (max-width: 719px) { /* điện thoại: 5 biểu tượng hàng trên, 4 hàng dưới, hàng dưới canh giữa */ .bt { left: 0; right: 0; bottom: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 0; padding: 8px 6px max(12px, env(safe-area-inset-bottom)); } .bt-nut { flex: 0 0 20%; } .bt-nut { flex-direction: column; justify-content: flex-start; gap: 4px; font-size: 11px; } .bt { --vong: 42px; } .zalo { bottom: calc(var(--day, 150px) + 10px); height: 40px; font-size: 12px; padding: 0 14px; } } @media (max-width: 719px) and (max-height: 700px) { .dau { min-height: 58px; } .ke { top: 4px; } .ke-gio { font-size: 17px; } .bt { --vong: 38px; gap: 5px 0; padding-top: 4px; } .bt-nut { font-size: 10.5px; gap: 2px; } } /* máy tính: vòng cung bên phải */ @media (min-width: 720px) { .bt { right: clamp(18px, 3.2vw, 56px); top: 50%; transform: translateY(-50%); gap: 13px; --vong: 46px; } .bt-nut { gap: 12px; font-size: 14px; } .bt-nut:nth-child(1), .bt-nut:nth-last-child(1) { margin-left: 44px; } .bt-nut:nth-child(2), .bt-nut:nth-last-child(2) { margin-left: 20px; } .bt-nut:nth-child(3), .bt-nut:nth-last-child(3) { margin-left: 6px; } .zalo { bottom: 24px; left: 24px; } } @keyframes troi { 0%, 100% { translate: 0 0; } 22% { translate: calc(4px * var(--bien, 1)) calc(-6px * var(--bien, 1)); } 50% { translate: calc(-2px * var(--bien, 1)) calc(-10px * var(--bien, 1)); } 76% { translate: calc(-4px * var(--bien, 1)) calc(-3px * var(--bien, 1)); } } @keyframes nghieng { from { rotate: calc(-5deg * var(--bien, 1)); scale: 1; } to { rotate: calc(5deg * var(--bien, 1)); scale: 1.035; } } @keyframes tho { 0%, 100% { transform: scale(1) rotate(0deg); } 50% { transform: translateY(-3px) scale(1.015) rotate(1.2deg); } } /* mèo trôi: chỉ dịch ảnh bằng px (thuộc tính translate riêng), không đụng transform đặt vị trí của khung */ /* mèo bản cử động đã tự vẫy: bỏ lắc lư, chỉ còn trôi */ .meo.dong img { animation: meo-troi 26s ease-in-out infinite; } @keyframes meo-troi { 0%, 100% { translate: 0 0; } 25% { translate: 10px -12px; } 50% { translate: -6px -4px; } 75% { translate: -14px 8px; } } @keyframes meo-lac { 0%, 100% { rotate: -7deg; } 50% { rotate: 4deg; } } @media (prefers-reduced-motion: reduce) { .ht-giua, .ht-ds li, .meo, .quy { transition: opacity 200ms ease; } .ht, .ht img, .ht-giua img, .meo, .meo img, .tq, .tq-nut svg, .ct-ht { animation: none; } .ht-ds li, .ht-giua, .meo { translate: none; } .dau, #cong, .bt, .zalo, .ct, html[data-mo] .ct, .tr, html[data-trang] .tr { transition: none; } } /* điện thoại xoay ngang / màn rất thấp (cao dưới 500px): 8 biểu tượng thành một hàng dưới đáy, tổng quan lớp nằm bên phải hành tinh */ @media (max-height: 499px) { .bt { left: 0; right: 0; top: auto; bottom: 0; transform: none; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 0; padding: 2px 10px max(5px, env(safe-area-inset-bottom)); --vong: 32px; } .bt-nut, .bt-nut:nth-child(n) { flex: none; flex-direction: column; justify-content: flex-start; gap: 1px; margin-left: 0; font-size: 10px; } .zalo { left: 12px; bottom: auto; top: calc(50% - 20px); height: 40px; padding: 0 12px; font-size: 12px; } .dau { min-height: 52px; } .ten { font-size: 24px; } .ke { top: 2px; left: 12px; } .ke-gio { font-size: 17px; } .ht-ds li:not(.chon) .ht-ten .ngan { display: inline; } .ht-ds li:not(.chon) .ht-ten .day { display: none; } .tq.ngang { transform: translate(-50%, -50%); width: min(46vw, 440px); } .tq-ten { font-size: 20px; } .tq-nhan { margin-top: 6px; } .tq-nhan span { font-size: 10.500px; padding: 2px 8px; } .tq-ai { margin-top: 6px; font-size: 13px; line-height: 1.4; } .tq-nut { margin-top: 9px; height: 44px; } } /* vùng chạm đủ 44px (rà soát 05/10): hành tinh nhỏ có vùng chạm nới thêm quanh hình */ .ht::after { content: ''; position: absolute; inset: -8px; } /* ============ Trạm ăng ten bay (cô dặn 05/10 sáng) ============ * Tàu trạm liên lạc do khỉ lái, bay lượn khắp trang chủ: sang phải ở tầng trên, quay đầu bay về ở tầng giữa, rồi tầng dưới. Vị trí tính bằng vw / dvh * (không dùng phần trăm trong transform, xem ghi chú Safari ở đầu tệp); đổi tầng lúc tàu đang ở ngoài màn hình. Nằm dưới các hành tinh (bay "sau" chúng) * nên không tranh chạm với hành tinh và nút. Chạm vào tàu: dừng lại, mở bảng kênh .tram-bang. */ .tram { position: fixed; left: 0; top: 0; z-index: 3; width: var(--td, 84px); height: var(--td, 84px); --td: clamp(70px, 19vw, 124px); padding: 0; border: 0; background: none; cursor: pointer; translate: calc(100vw - var(--td) - 10px) 17vh; -webkit-tap-highlight-color: transparent; transition: opacity 300ms ease; } .tram-vo { display: block; width: 100%; height: 100%; } .tram img { display: block; width: 100%; height: 100%; object-fit: contain; pointer-events: none; filter: drop-shadow(0 0 14px rgba(255, 180, 107, .35)); } .tram:focus-visible { outline: 2px solid var(--vien); outline-offset: 4px; border-radius: 50%; } .tram:active .tram-vo { scale: .94; } #cong[data-chon]:not([data-chon=""]) ~ .tram, html[data-mo] .tram, html[data-trang] .tram { opacity: 0; pointer-events: none; } @media (prefers-reduced-motion: no-preference) { .tram { animation: tram-bay 64s linear infinite; } .tram-vo { animation: tram-huong 64s step-end infinite; } .tram img { animation: tram-nhun 3.4s ease-in-out infinite; } .tram.dung, .tram.dung .tram-vo { animation-play-state: paused; } } @keyframes tram-bay { 0% { translate: -26vw 15vh; } 24% { translate: 104vw 26vh; } 25% { translate: 104vw 58vh; } 49% { translate: -26vw 44vh; } 50% { translate: -26vw 76vh; } 74% { translate: 104vw 66vh; } 75% { translate: 104vw 9vh; } 100% { translate: -26vw 15vh; } } @keyframes tram-huong { 0% { scale: 1 1; } 24.500% { scale: -1 1; } 49.500% { scale: 1 1; } 74.500% { scale: -1 1; } } @keyframes tram-nhun { 0%, 100% { translate: 0 0; rotate: -2deg; } 50% { translate: 0 -7px; rotate: 2deg; } } .tram-bang { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; padding: 18px; background: rgba(8, 5, 14, .72); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); opacity: 0; transition: opacity 240ms ease; } .tram-bang[hidden] { display: none; } .tram-bang.hien { opacity: 1; } .tram-hop { position: relative; width: min(100%, 420px); max-height: calc(100dvh - 36px); overflow: auto; padding: 14px 18px 22px; text-align: center; border-radius: 30px; background: radial-gradient(ellipse 90% 60% at 50% 0%, rgba(162, 58, 138, .34), transparent 70%), linear-gradient(180deg, #23152f, #120b1c); border: 1px solid rgba(255, 226, 196, .24); box-shadow: 0 30px 80px -20px rgba(0, 0, 0, .9), inset 0 1px 0 rgba(255, 255, 255, .12); scale: .92; transition: scale 320ms cubic-bezier(.2, .9, .3, 1.2); } .tram-bang.hien .tram-hop { scale: 1; } .tram-anh { width: 150px; height: 150px; margin: 0 auto -6px; object-fit: contain; filter: drop-shadow(0 0 22px rgba(255, 180, 107, .4)); } .tram-loi { position: relative; display: inline-block; margin: 0 auto 18px; padding: 11px 18px; border-radius: 20px; font-family: 'Bricolage Grotesque', 'Be Vietnam Pro', sans-serif; font-weight: 600; font-size: 18px; line-height: 1.25; color: #2a0f1a; background: linear-gradient(180deg, #fff1e3, #ffd9ea); box-shadow: 0 10px 26px -10px rgba(242, 132, 181, .8); text-wrap: balance; } .tram-loi::before { content: ''; position: absolute; left: 50%; top: -7px; width: 14px; height: 14px; margin-left: -7px; background: #fff1e3; rotate: 45deg; border-radius: 3px; } .tram-kenh { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px 6px; justify-items: center; } .tram-k { display: grid; justify-items: center; gap: 7px; min-width: 64px; font-size: 12.5px; font-weight: 500; line-height: 1.2; color: var(--chu); } .tram-vong { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; border: 1.5px solid var(--vien); background: rgba(255, 255, 255, .05); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16), 0 0 18px -6px rgba(255, 226, 196, .6); transition: scale 160ms var(--em), background-color 160ms ease; } .tram-vong svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; } .tram-k:hover .tram-vong { background: rgba(242, 132, 181, .22); } .tram-k:active .tram-vong { scale: .92; } .tram-kenh li:first-child .tram-vong { background: linear-gradient(180deg, #f9a8cc, #f284b5); color: #2a0f1a; border-color: transparent; } .tram-dong { position: absolute; right: 10px; top: 10px; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(255, 226, 196, .3); background: rgba(255, 255, 255, .06); color: var(--chu); cursor: pointer; } .tram-dong svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; } @media (prefers-reduced-motion: no-preference) { /* các kênh "sổ ra" lần lượt từ trạm */ .tram-bang.hien .tram-kenh li { animation: tram-so 420ms cubic-bezier(.2, .9, .3, 1.25) backwards; animation-delay: calc(120ms + var(--i, 0) * 55ms); } } @keyframes tram-so { from { opacity: 0; translate: 0 -34px; scale: .4; } to { opacity: 1; translate: 0 0; scale: 1; } } @media (max-height: 500px) { .tram-anh { width: 84px; height: 84px; } .tram-kenh { grid-template-columns: repeat(7, minmax(0, 1fr)); } .tram { --td: 64px; } } /* chữ "Liên hệ" dưới trạm (cô dặn 05/10): nằm ngoài .tram-vo nên không bị lật khi tàu quay đầu */ .tram-chu { position: absolute; left: 0; right: 0; top: 88%; text-align: center; font-size: 12px; font-weight: 600; white-space: nowrap; color: var(--chu); text-shadow: 0 1px 6px rgba(0, 0, 0, .8); pointer-events: none; } .tram-loi { font-size: 16.5px; } /* ============ Logo + chữ YOGA kiểu vũ trụ (cô dặn 05/10) ============ * Hình logo Ari giữ nguyên (ảnh logo-mark.svg vẫn nằm trong trang, dùng làm mặt nạ cho lớp màu ánh kim). Không bóng mờ lên chữ: chỉ tô chuyển sắc, nét vẫn sắc. */ .ten-hang { gap: .42em; } .ten-dau { position: relative; display: inline-grid; place-items: center; width: 1.5em; height: 1.58em; } .ten-dau .ten-logo { height: 100%; width: 100%; opacity: 0; } /* giữ chỗ + dự phòng; màu thật là lớp ::before bên dưới */ .ten-dau::before { content: ''; position: absolute; inset: 0; background: linear-gradient(160deg, #fff6ea 0%, #ffd9a8 18%, #ff9ecb 46%, #f284b5 62%, #ffe2c4 82%, #f9a8cc 100%) 0 0 / 100% 260%; -webkit-mask: url(../logo-mark.svg) center / contain no-repeat; mask: url(../logo-mark.svg) center / contain no-repeat; } .ten-dau::after { content: ''; position: absolute; left: 50%; top: 50%; width: 2.5em; height: 2.5em; margin: -1.25em 0 0 -1.25em; border-radius: 50%; z-index: -1; background: radial-gradient(circle closest-side, rgba(242, 132, 181, .38), rgba(255, 180, 107, .12) 55%, transparent 100%); } @supports not ((mask: url(x)) or (-webkit-mask: url(x))) { .ten-dau .ten-logo { opacity: 1; } .ten-dau::before { display: none; } } /* vòng quỹ đạo nghiêng quanh logo, có một hành tinh nhỏ chạy trên vòng (khung tròn bị ép dẹt thành elip; phần quay chỉ dùng rotate) */ .ten-quy { position: absolute; left: 50%; top: 50%; width: 2.5em; height: 2.5em; margin: -1.25em 0 0 -1.25em; border-radius: 50%; border: 1px solid rgba(255, 226, 196, .55); transform: rotate(-20deg) scaleY(.34); pointer-events: none; } .ten-quy::before { content: ''; position: absolute; inset: -1px; border-radius: 50%; background: radial-gradient(circle at 50% 0, #fff 0 .05em, #ffd9a8 .06em .1em, transparent .11em); } .ten-chu { font-weight: 800; letter-spacing: .2em; margin-right: -.2em; color: #f9a8cc; background: linear-gradient(180deg, #ffffff 0%, #ffe6f1 30%, #f9a8cc 58%, #f284b5 78%, #d76aa6 100%) 0 0 / 100% 100%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .ten-o { position: relative; display: inline-block; } .ten-o::after { content: ''; position: absolute; left: 50%; top: 52%; width: 1.42em; height: .4em; margin: -.2em 0 0 -.81em; border-radius: 50%; border: .05em solid #ffe2c4; transform: rotate(-18deg); pointer-events: none; } /* vành hành tinh ôm chữ O (letter-spacing làm chữ lệch trái nên bù margin) */ .ten-o::before { content: ''; position: absolute; left: 100%; top: -.12em; width: .16em; height: .16em; margin-left: -.02em; border-radius: 50%; background: #fff; box-shadow: 0 0 .3em .08em rgba(255, 226, 196, .9); } /* một ngôi sao nhỏ */ @media (prefers-reduced-motion: no-preference) { .ten-dau::before { animation: ten-anh 7s ease-in-out infinite; } .ten-quy::before { animation: ten-quay 9s linear infinite; } .ten-o::before { animation: ten-sao 2.8s ease-in-out infinite; } } @keyframes ten-anh { 0%, 100% { background-position: 0 0; } 50% { background-position: 0 100%; } } @keyframes ten-quay { to { transform: rotate(360deg); } } @keyframes ten-sao { 0%, 100% { opacity: 1; scale: 1; } 50% { opacity: .35; scale: .6; } } /* nút gọi điện đang khoá (chưa đăng nhập): có ổ khoá nhỏ, màu dịu hơn */ .goi-khoa .tram-vong { border-style: dashed; opacity: .8; } .goi-khoa .tram-vong::after { content: ''; position: absolute; } .tram-k.goi-khoa > span:last-child { font-size: 11.5px; color: var(--chu-mo); } .tr-nut.goi-khoa { border-style: dashed; } /* ============ Ari phi hành gia bay lơ lửng (cô dặn 05/10 chiều) ============ * Cỡ GẦN BẰNG tàu của khỉ, không to hơn (cô dặn rõ): dùng chung công thức cỡ với .tram, nhân .96. Trôi vô định, chậm, hơi nghiêng qua lại; vị trí bằng vw / vh. * Đang xem một lớp: thôi trôi, bay tới đậu ở mép phải gần hành tinh đang chọn (transition), chạm thì giới thiệu lớp. Mở bảng trang riêng / bảng liên lạc: ẩn. */ .phg { position: fixed; left: 0; top: 0; z-index: 4; --td: clamp(70px, 19vw, 124px); width: calc(var(--td) * .96); height: calc(var(--td) * .96); padding: 0; border: 0; background: none; cursor: pointer; translate: 8vw 30vh; -webkit-tap-highlight-color: transparent; transition: translate 900ms cubic-bezier(.2, .8, .2, 1), opacity 300ms ease; } .phg-vo { display: block; width: 100%; height: 100%; } .phg img { display: block; width: 100%; height: 100%; object-fit: contain; pointer-events: none; filter: drop-shadow(0 0 14px rgba(242, 132, 181, .4)); } .phg:focus-visible { outline: 2px solid var(--vien); outline-offset: 4px; border-radius: 50%; } .phg:active .phg-vo { scale: .94; } .phg.noi img { filter: drop-shadow(0 0 20px rgba(255, 226, 196, .75)); } html[data-trang] .phg, html[data-trang] .phg-loi { opacity: 0; pointer-events: none; } @media (prefers-reduced-motion: no-preference) { .phg { animation: phg-troi 96s ease-in-out infinite; } .phg-vo { animation: phg-nghieng 9s ease-in-out infinite; } } @keyframes phg-troi { 0%, 100% { translate: 6vw 26vh; } 14% { translate: 30vw 14vh; } 28% { translate: 66vw 20vh; } 42% { translate: 74vw 46vh; } 56% { translate: 44vw 62vh; } 70% { translate: 12vw 58vh; } 84% { translate: 2vw 40vh; } } @keyframes phg-nghieng { 0%, 100% { rotate: -7deg; translate: 0 0; } 50% { rotate: 6deg; translate: 0 -8px; } } /* đang xem một lớp (toàn cảnh có hành tinh được chọn, hoặc trang chi tiết lớp): bay vào theo, đậu ở mép phải */ #cong[data-chon]:not([data-chon=""]) ~ .phg, html[data-mo] .phg { animation: none; translate: calc(100vw - var(--td) - 8px) 15vh; } .tram-bang:not([hidden]) ~ .phg, .tram-bang:not([hidden]) ~ .phg-loi { opacity: 0; pointer-events: none; } /* bong bóng lời nói: dải chữ nổi phía trên, không che nút */ .phg-loi { position: fixed; z-index: 45; left: 50%; top: calc(max(14px, env(safe-area-inset-top)) + 64px); width: min(calc(100vw - 28px), 400px); margin: 0 0 0 calc(min(calc(100vw - 28px), 400px) / -2); padding: 12px 16px; border-radius: 20px; font-size: 15px; font-weight: 500; line-height: 1.45; text-align: center; color: #2a0f1a; text-wrap: pretty; pointer-events: none; background: linear-gradient(180deg, #fff6ec, #ffdcec); box-shadow: 0 14px 34px -12px rgba(0, 0, 0, .7), 0 0 0 1px rgba(255, 255, 255, .5) inset; } .phg-loi[hidden] { display: none; } @media (prefers-reduced-motion: no-preference) { .phg-loi { animation: phg-hien 320ms cubic-bezier(.2, .9, .3, 1.2) backwards; } } @keyframes phg-hien { from { opacity: 0; translate: 0 -10px; scale: .94; } to { opacity: 1; translate: 0 0; scale: 1; } } @media (max-height: 500px) { .phg { --td: 64px; } .phg-loi { top: 54px; font-size: 13.5px; padding: 8px 12px; } } /* Ari phi hành gia do mã điều khiển (cong.js đặt lớp .js và vị trí px): bỏ đường trôi @keyframes, bỏ lướt bằng transition (mã tự lướt). Dáng vút: nghiêng nhanh hơn, sáng hơn. */ .phg.js { animation: none; transition: opacity 300ms ease; } #cong[data-chon]:not([data-chon=""]) ~ .phg.js, html[data-mo] .phg.js { translate: none; } .phg.vut .phg-vo { animation-duration: 1.1s; } .phg.vut img { filter: drop-shadow(0 0 22px rgba(255, 226, 196, .9)) drop-shadow(0 0 40px rgba(242, 132, 181, .6)); } .phg.vut.trai.dong img { scale: -1 1; } /* ============ Kính viễn vọng TÌM KIẾM (cô dặn 05/10 chiều) ============ * Bé hơn cô Ari (cỡ tàu x .62). Trôi do cong.js đặt vị trí px (lớp .js); không có JS / giảm chuyển động thì đậu ở góc phải. Bảng tìm đặt sát phía TRÊN để bàn phím điện thoại không che kết quả. */ .kinh { position: fixed; left: 0; top: 0; z-index: 4; --td: clamp(70px, 19vw, 124px); width: calc(var(--td) * .62); height: calc(var(--td) * .62); padding: 0; border: 0; background: none; cursor: pointer; translate: calc(100vw - var(--td)) 52vh; -webkit-tap-highlight-color: transparent; transition: opacity 300ms ease; } .kinh::after { content: ''; position: absolute; inset: -8px; } /* vùng chạm đủ 44px */ .kinh-vo { display: block; width: 100%; height: 100%; } .kinh img { display: block; width: 100%; height: 100%; object-fit: contain; pointer-events: none; filter: drop-shadow(0 0 12px rgba(160, 200, 255, .45)); } .kinh-chu { position: absolute; left: 50%; top: 94%; width: 90px; margin-left: -45px; text-align: center; font-size: 11.5px; font-weight: 600; white-space: nowrap; color: var(--chu); text-shadow: 0 1px 6px rgba(0, 0, 0, .8); pointer-events: none; } .kinh:focus-visible { outline: 2px solid var(--vien); outline-offset: 6px; border-radius: 50%; } .kinh:active .kinh-vo { scale: .92; } @media (prefers-reduced-motion: no-preference) { .kinh-vo { animation: phg-nghieng 11s ease-in-out infinite; } } #cong[data-chon]:not([data-chon=""]) ~ .kinh, html[data-mo] .kinh, html[data-trang] .kinh, .tram-bang:not([hidden]) ~ .kinh { opacity: 0; pointer-events: none; } .kinh-bang:not([hidden]) ~ .phg, .kinh-bang:not([hidden]) ~ .phg-loi, .kinh-bang:not([hidden]) ~ .tram { opacity: 0; pointer-events: none; } .kinh-bang { position: fixed; inset: 0; z-index: 60; display: grid; justify-items: center; align-items: start; padding: max(14px, env(safe-area-inset-top)) 14px 14px; background: rgba(8, 5, 14, .76); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); opacity: 0; transition: opacity 220ms ease; } .kinh-bang[hidden] { display: none; } .kinh-bang.hien { opacity: 1; } .kinh-hop { position: relative; width: min(100%, 460px); max-height: calc(100dvh - 28px); display: flex; flex-direction: column; gap: 12px; padding: 16px 16px 14px; border-radius: 26px; background: radial-gradient(ellipse 90% 60% at 50% 0%, rgba(90, 120, 200, .26), transparent 70%), linear-gradient(180deg, #1c1830, #110b1c); border: 1px solid rgba(180, 210, 255, .26); box-shadow: 0 30px 80px -20px rgba(0, 0, 0, .9), inset 0 1px 0 rgba(255, 255, 255, .12); translate: 0 -14px; transition: translate 300ms cubic-bezier(.2, .9, .3, 1.1); } .kinh-bang.hien .kinh-hop { translate: 0 0; } .kinh-loi { margin: 0 48px 0 0; font-size: 13.5px; line-height: 1.45; color: #cfe2ff; font-family: ui-monospace, 'Cascadia Mono', 'Consolas', monospace; letter-spacing: .01em; } .kinh-o { display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 0 16px; border-radius: 99px; border: 1.5px solid rgba(180, 210, 255, .5); background: rgba(8, 6, 16, .7); } .kinh-o:focus-within { border-color: #ffe2c4; box-shadow: 0 0 0 3px rgba(255, 226, 196, .2); } .kinh-o svg { flex: none; width: 20px; height: 20px; fill: none; stroke: #cfe2ff; stroke-width: 1.6; stroke-linecap: round; } .kinh-o input { flex: 1; min-width: 0; height: 50px; border: 0; outline: 0; background: none; color: #fff7f0; font: 500 16px 'Be Vietnam Pro', sans-serif; } /* 16px: iPhone không tự phóng to trang khi gõ */ .kinh-o input::placeholder { color: rgba(255, 247, 240, .5); } .kinh-o .an { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); } .kinh-kq { list-style: none; display: grid; gap: 6px; overflow-y: auto; overscroll-behavior: contain; } .kinh-muc { display: grid; grid-template-columns: auto 1fr; column-gap: 10px; align-items: baseline; padding: 11px 14px; min-height: 52px; border-radius: 16px; border: 1px solid rgba(255, 226, 196, .14); background: rgba(255, 255, 255, .045); color: var(--chu); transition: background-color 160ms ease, border-color 160ms ease, scale 140ms var(--em); } .kinh-muc:hover, .kinh-muc:focus-visible { background: rgba(255, 255, 255, .1); border-color: rgba(255, 226, 196, .45); outline: 0; } .kinh-muc:active { scale: .98; } .kinh-loai { grid-row: span 2; align-self: center; padding: 4px 9px; border-radius: 99px; font-size: 10.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: #2a0f1a; background: #ffd9a8; white-space: nowrap; } .kinh-muc b { font-size: 15px; font-weight: 600; line-height: 1.3; } .kinh-mo { grid-column: 2; font-size: 12.5px; line-height: 1.4; color: var(--chu-mo); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .kinh-trong { margin: 4px 2px; font-size: 14px; color: #cfe2ff; } .kinh-dong { position: absolute; right: 10px; top: 8px; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(255, 226, 196, .3); background: rgba(255, 255, 255, .06); color: var(--chu); cursor: pointer; } .kinh-dong svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; } @media (max-height: 500px) { .kinh { --td: 64px; } .kinh-loi { display: none; } .kinh-hop { padding-top: 10px; } .kinh-o { margin-right: 52px; min-height: 46px; } .kinh-o input { height: 44px; } } /* ============ Mr Thiền (cô dặn 05/10 tối): anh phi hành gia của ứng dụng Âm thanh thư giãn ============ * Nhỏ như kính Tìm kiếm, trôi do cong.js đặt vị trí px (lớp .js); không có JS / giảm chuyển động thì đậu bên trái. Chạm là mở ứng dụng (nút quay lại ở đó về trang chủ nhờ ?tu=trang-chu). */ .thien { position: fixed; left: 0; top: 0; z-index: 4; --td: clamp(70px, 19vw, 124px); width: calc(var(--td) * .6); height: calc(var(--td) * .6); display: block; text-decoration: none; cursor: pointer; translate: 5vw 40vh; -webkit-tap-highlight-color: transparent; transition: opacity 300ms ease; } .thien::after { content: ''; position: absolute; inset: -8px; } .thien-vo { display: block; width: 100%; height: 100%; } .thien img { display: block; width: 100%; height: 100%; object-fit: contain; pointer-events: none; filter: drop-shadow(0 0 12px rgba(190, 170, 255, .5)); } .thien-chu { position: absolute; left: 50%; top: 96%; width: 90px; margin-left: -45px; text-align: center; font-size: 11.5px; font-weight: 600; white-space: nowrap; color: var(--chu); text-shadow: 0 1px 6px rgba(0, 0, 0, .8); pointer-events: none; } .thien:focus-visible { outline: 2px solid var(--vien); outline-offset: 6px; border-radius: 50%; } .thien:active .thien-vo { scale: .92; } @media (prefers-reduced-motion: no-preference) { .thien-vo { animation: thien-lac 7s ease-in-out infinite alternate; } @keyframes thien-lac { from { rotate: -9deg; } to { rotate: 11deg; } } } #cong[data-chon]:not([data-chon=""]) ~ .thien, html[data-mo] .thien, html[data-trang] .thien, html[data-trang] .vetinh, html[data-mo] .vetinh, #cong[data-chon]:not([data-chon=""]) ~ .vetinh, .tram-bang:not([hidden]) ~ .vetinh, .kinh-bang:not([hidden]) ~ .vetinh, .tram-bang:not([hidden]) ~ .thien, .kinh-bang:not([hidden]) ~ .thien { opacity: 0; pointer-events: none; } /* Mr Thiền giật mình khi bị chạm: nảy lên, lắc đầu rồi mới đi */ @media (prefers-reduced-motion: no-preference) { .thien.giat .thien-vo { animation: thien-giat 520ms cubic-bezier(.3, 1.6, .5, 1) both; } @keyframes thien-giat { 0% { scale: 1; rotate: 0deg; } 30% { scale: 1.05; rotate: -5deg; } 65% { scale: 1.03; rotate: 4deg; } 100% { scale: 1; rotate: 0deg; } } /* 06/10 đêm: cô dặn không phóng to khi bấm, chỉ hơi phản ứng */ } /* ============ Sửa sau rà soát web thật 05/10 tối ============ */ /* Safari không cắt nền chữ của cha cho con dạng inline-block: chữ O của YOGA thành trong suốt. Cho chữ O tự mang dải màu. */ .ten-o { background: linear-gradient(180deg, #ffffff 0%, #ffe6f1 30%, #f9a8cc 58%, #f284b5 78%, #d76aa6 100%) 0 0 / 100% 100%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } /* nút là