/* Say Piano – KHUNG WEB MÀN RỘNG (saypiano.com/hoc trên máy tính, chủ dự án 2026-10-20).
 * Chỉ khi chạy trên trình duyệt (html.is-web – main.js) và khung nhìn ≥ 1100 × 600 px. App Android/iOS (kể cả máy bảng 1280×800)
 * không đổi. Nạp SAU CÙNG trong app.html.
 *
 * Bố cục ba cột như trang học trên web:
 *  - trái: thanh điều hướng rộng nền trắng – logo Say Piano, mỗi mục là hàng [ô biểu tượng game | chữ]; mục đang mở nền Vàng Piano nhạt;
 *  - giữa: màn của app (Hôm nay, Khu rừng, Tác phẩm…) giữ nguyên nền đêm / ngày / Giáng sinh đã duyệt, đặt trong khung bo tròn;
 *  - phải (aside.web-phai – ui.js cotPhaiWeb): chip chuỗi / ♪ / hạng mùa, thẻ nối đàn (không có Web MIDI → mời mở bằng Chrome), thẻ thi đua.
 * Bài học (.gm) không có thanh điều hướng – xem bai-sang.css (cột giữa 1080 px). */

.web-phai { display: none; }

@media (min-width: 1100px) and (min-height: 600px) {
  html.is-web, html.is-web body.po-app, html.is-web #app { background: #F6F2FD; }
  html.is-web .scr.scr--ngang.scr--rail { background: #F6F2FD; }

  /* ---------- trái: điều hướng rộng ---------- */
  html.is-web .scr--rail > .rail { zoom: 1; width: 248px; align-items: stretch; gap: 6px; padding: 18px 14px 18px;
    background: #FFFFFF; border-right: 2px solid #ECE5F8; box-shadow: none; }
  html.is-web .scr--rail .rail__logo-o { width: auto; height: 76px; margin: 0 0 14px; place-items: center start; padding-left: 8px; }
  html.is-web .scr--rail .rail__logo { content: url("../images/saymepiano/logo-mau.svg"); width: 180px; height: 76px; transform: none; }   /* logo chữ ≥ 160 px ngang (bộ nhận diện) */
  html.is-web .scr--rail .rail__it { flex: none; max-height: none; min-height: 54px; flex-direction: row; justify-content: flex-start; gap: 14px;
    padding: 6px 12px; border-radius: 16px; color: #5A4A93; box-shadow: inset 0 0 0 2px transparent; }
  html.is-web .scr--rail .rail__it:hover { background: #F6F2FD; }
  html.is-web .scr--rail .rail__it.is-on { background: #FFF7D6; color: var(--sm-dem); box-shadow: inset 0 0 0 2px #FFE08A; }
  html.is-web .scr--rail .rail__chu { font-family: "Quicksand", system-ui, sans-serif; font-weight: 800; font-size: 15px; text-align: left;
    text-transform: uppercase; }

  /* ---------- giữa: màn app trọn chiều cao (không lề trên/dưới – bố cục máy bảng vừa khít một màn) ---------- */
  html.is-web .scr--rail > .scr__khung { position: relative; z-index: 1; zoom: 1; margin: 0; overflow: hidden; isolation: isolate;
    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(--sm-dem);
    box-shadow: none; }
  /* chip đã nằm ở cột phải */
  html.is-web .scr--rail > .scr__khung > .scr__top > .chips { display: none; }

  /* ---------- phải: thành tích + gợi ý ---------- */
  /* cột phải: luôn có ở con đường (cột giữa chỉ cần 620 px); màn bảng điều khiển (Hôm nay, Xếp hạng…) cần ≥ 900 px ở giữa → chỉ từ 1560 px */
  html.is-web .scr--rail:not(.scr--dw) > .web-phai { display: none; }
  html.is-web .web-phai { position: relative; z-index: 21; flex: none; width: 288px; display: flex; flex-direction: column; gap: 16px;
    padding: 14px 18px; min-height: 0; color: var(--sm-dem); background: #F6F2FD; }
  html.is-web .web-phai > .chips { margin: 0; justify-content: space-between; flex-wrap: wrap; row-gap: 8px; }
  html.is-web .web-phai .chip { background: #FFFFFF; color: var(--sm-dem); box-shadow: inset 0 0 0 2px #E6DDF7, 0 3px 0 #E6DDF7; }
  .web-the { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding: 16px 18px 18px; border-radius: 20px;
    background: #FFFFFF; box-shadow: inset 0 0 0 2px #E6DDF7, 0 4px 0 #E6DDF7; }
  .web-the::before { content: ""; width: 34px; height: 6px; border-radius: 3px; background: var(--tone, var(--sm-hong)); }
  .web-the__t { margin: 0; font-family: var(--sm-tieu-de); font-weight: 400; font-size: 20px; line-height: 1.2; color: var(--sm-dem); text-wrap: balance; }
  .web-the__chu { margin: 0; font-size: 15px; line-height: 1.4; font-weight: 600; color: #5A4A93; text-wrap: pretty; }
  .web-the__nut { margin-top: 4px; align-self: stretch; }
}

/* ---------- con đường dọc trên máy tính (student/screens/duong-web.js) ---------- */
@media (min-width: 1100px) and (min-height: 600px) {
  html.is-web .scr--dw > .scr__khung { background: #FFFFFF; }
  html.is-web .scr--dw .scr__main { padding: 0; }
  html.is-web .scr--rail { background: #FFFFFF; }
  html.is-web .web-phai { background: #FFFFFF; width: 340px; padding: 22px 28px 22px 8px; }
  html.is-web .scr--rail > .scr__khung { box-shadow: none; }
}
.dw { width: 100%; max-width: 620px; margin: 0 auto; padding: 22px 20px 120px; display: flex; flex-direction: column; gap: 10px; }
.dw-vung { display: flex; flex-direction: column; gap: 6px; margin-bottom: 28px; }
.dw-bang { position: sticky; top: 0; z-index: 3; display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 16px 18px 16px 22px; border-radius: 20px; color: #FFFFFF;
  /* màu thương hiệu (chủ dự án 20/10: không dùng đỏ theo vùng) – Tím Khối, vệt hồng Say Mê nhẹ góc phải */
  background: radial-gradient(90% 140% at 100% 0%, rgba(255, 95, 174, .35) 0%, rgba(255, 95, 174, 0) 60%), linear-gradient(180deg, #7046D8 0%, #5B2BC4 100%);
  box-shadow: 0 5px 0 #34138A; margin-bottom: 6px; }
.dw-bang__chu { min-width: 0; }
.dw-bang__chu small { display: block; font-weight: 800; font-size: 13px; text-transform: uppercase; color: #FFE3F1; }
.dw-bang__chu h2 { margin: 2px 0 0; font-family: var(--sm-tieu-de); font-weight: 400; font-size: 26px; line-height: 1.15; text-wrap: balance; }
.dw-bang__nut { flex: none; min-height: 48px; display: inline-flex; align-items: center; gap: 8px; padding: 0 16px; border-radius: 16px;
  border: 2px solid rgba(255, 255, 255, .5); border-bottom-width: 4px; background: transparent;
  color: #FFFFFF; font: 800 14px/1 "Quicksand", system-ui, sans-serif; text-transform: uppercase; cursor: pointer; }
.dw-bang__nut:hover { background: rgba(255, 255, 255, .12); }
.dw-bang__nut:active { transform: translateY(2px); border-bottom-width: 2px; }
/* vạch chia "Cửa K · tên" */
.dw-chia { display: flex; align-items: center; gap: 14px; margin: 18px 0 6px; color: #8478B0; font-weight: 700; font-size: 16px; text-align: center; }
.dw-chia::before, .dw-chia::after { content: ""; flex: 1; height: 2px; background: #ECE5F8; border-radius: 1px; }
.dw-chia span { max-width: 72%; text-wrap: balance; }
/* cột nút zig-zag */
.dw-cot { display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 8px 0; }
.dw-o { position: relative; display: flex; flex-direction: column; align-items: center; transform: translateX(var(--lech, 0)); }
/* nút: màu thương hiệu – đang học / đã mở = Hồng Say Mê, đã xong = Tím Khối, Thử thách = Vàng Piano, khoá = xám tím */
.dw-nut { --mat: #FF5FAE; --day: #C72F7F; position: relative; width: 74px; height: 70px; padding: 0; border: 0;
  border-radius: 50%; background: none; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.dw-nut__mat { position: absolute; inset: 0 0 6px; display: grid; place-items: center; border-radius: 50%;
  background: radial-gradient(70% 60% at 35% 28%, rgba(255, 255, 255, .38), rgba(255, 255, 255, 0) 60%), var(--mat); color: #fff;
  box-shadow: 0 6px 0 var(--day); font-family: var(--sm-tieu-de); font-size: 28px; transition: transform .08s, box-shadow .08s; }
.dw-nut:active .dw-nut__mat { transform: translateY(4px); box-shadow: 0 2px 0 var(--day); }
.dw-nut.is-xong { --mat: #7046D8; --day: #34138A; }
.dw-nut.is-khoa { --mat: #E7E2F0; --day: #CFC7E0; }
.dw-nut.is-khoa .dw-nut__mat { color: #A79DC2; background: var(--mat); }
.dw-nut--tt .dw-nut__mat { --mat: #FFC928; --day: #D08A00; color: #6B3E00; background: radial-gradient(70% 60% at 35% 28%, rgba(255, 255, 255, .5), rgba(255, 255, 255, 0) 60%), #FFC928; box-shadow: 0 6px 0 #D08A00; }
.dw-nut--tt.is-khoa .dw-nut__mat { color: #A79DC2; background: #E7E2F0; box-shadow: 0 6px 0 #CFC7E0; }
/* nút đang học: vòng sáng quanh, nhãn "BẮT ĐẦU" trong bong bóng phía trên */
.dw-o.is-hien-tai .dw-nut::before { content: ""; position: absolute; inset: -10px -10px -4px; border-radius: 50%; border: 6px solid #EEE8F8; }
.dw-nhan { position: relative; margin-bottom: 12px; padding: 8px 14px; border-radius: 14px; background: #FFFFFF; color: var(--sm-hong-dam, #D8337F);
  font: 800 15px/1 "Quicksand", system-ui, sans-serif; text-transform: uppercase; box-shadow: inset 0 0 0 2px #ECE5F8, 0 3px 0 #ECE5F8;
  animation: dw-nhun 1.6s ease-in-out infinite; }
.dw-nhan::after { content: ""; position: absolute; left: 50%; bottom: -8px; width: 14px; height: 14px; margin-left: -7px; background: #FFFFFF;
  transform: rotate(45deg); box-shadow: 2px 2px 0 #ECE5F8; }
@keyframes dw-nhun { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
html.po-giam .dw-nhan { animation: none; }
.dw-sao { display: flex; gap: 2px; margin-top: 4px; color: #E7E2F0; }
.dw-sao i { display: block; line-height: 0; }
.dw-sao i.is-co { color: #FFC928; }
/* bạn nốt đứng cạnh nút đang học (thở nhẹ – game.css nv-song) */
.dw-nv { position: absolute; top: 50%; left: calc(100% + 64px); transform: translateY(-58%); pointer-events: none; line-height: 0;
  background: radial-gradient(closest-side, rgba(42, 10, 126, .12), rgba(42, 10, 126, 0)) 50% calc(100% - 2px) / 70% 16px no-repeat; }
.dw-nv.is-trai { left: auto; right: calc(100% + 64px); }
.dw-hop { padding: 4px; --tone: #7046D8; --tone-d: #34138A; --tone-l: #EDE6FF; }

/* ---------- cột phải: mục tiêu hôm nay, chân trang (ui.js cotPhaiWeb) ---------- */
.web-the__thanh { position: relative; align-self: stretch; height: 18px; border-radius: 9px; background: #EFE9FA; overflow: hidden; }
.web-the__thanh > i { position: absolute; inset: 0 auto 0 0; width: var(--p, 0%); border-radius: 9px; background: linear-gradient(90deg, #FF8FC8, #FF5FAE 45%, #FFC928);
  box-shadow: inset 0 4px 0 rgba(255, 255, 255, .35); }
.web-the__so { position: absolute; inset: 0; display: grid; place-items: center; font-weight: 800; font-size: 12px; color: #6B5FA0; }
.web-chan { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 16px; margin-top: 4px; }
.web-chan a { min-height: 40px; display: inline-flex; align-items: center; color: #A79BCB; font-weight: 800; font-size: 13px; text-transform: uppercase;
  text-decoration: none; }
.web-chan a:hover { color: var(--sm-khoi); }
@media (min-width: 1560px) and (min-height: 600px) {
  html.is-web .scr--rail:not(.scr--dw) > .web-phai { display: flex; }
}
/* không có cột phải: chip trở lại góc phải thanh trên của màn */
@media (min-width: 1100px) and (max-width: 1559.98px) and (min-height: 600px) {
  html.is-web .scr--rail:not(.scr--dw) > .scr__khung > .scr__top > .chips { display: flex; }
}