/* Khối CÔNG CỤ của trang — port từ `design-mockups/web-v2/dang-cham.html`.
   ══════════════════════════════════════════════════════════════════════════════════════
   Vì sao là tệp RIÊNG và vì sao MỌI luật đều bọc trong `.live`:

   Hai bản dựng mockup dùng CHUNG nhiều tên lớp cho hai thứ khác nhau. `.san`, `.khe`,
   `.dock`, `.hang`, `.dk`, `.tok`, `.duoi` có mặt ở cả `index.html` (thẻ xem trước nhỏ
   trong màn mở, và thẻ video trong lưới) lẫn `dang-cham.html` (sân khấu chính, cao 300px).
   Nạp thẳng cạnh nhau thì bản nạp sau nuốt bản kia — màn mở sẽ mang kích thước của sân
   khấu, hoặc ngược lại.

   Bọc `.live` là ranh giới: mọi luật ở đây chỉ chạm vào khối công cụ thật.

   Trên dòng này là port. Phần DELTA của bản thật ở cuối tệp. */

/* ── thanh video đang mở ─────────────────────────────────────────────── */
.live .dau-video{display:flex;align-items:center;gap:14px;padding:18px 0 12px}
.live .dau-video h1{margin:0;font-size:19px;letter-spacing:-.02em;line-height:1.3;
     overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.live .dau-video .so{font-size:13px;color:var(--muc-3);white-space:nowrap;flex:none}
.live .dau-video a{margin-left:auto;flex:none;font-size:13.5px;font-weight:600;color:var(--xanh);
     text-decoration:none;white-space:nowrap}

/* ── khung phát và dock ──────────────────────────────────────────────── */
.live .san{border:1px solid var(--vien);border-radius:var(--r-anh);overflow:hidden;background:#fff;
     box-shadow:0 1px 2px #101a1208,0 18px 44px -22px #101a1226}
.live .khe{height:clamp(190px,32vh,300px);position:relative;background:#0d1310;overflow:hidden}
.live .khe img{width:100%;height:100%;object-fit:cover;opacity:.8}
.live .khe .dung{position:absolute;inset:0;display:grid;place-items:center}
.live .khe .dung i{width:56px;height:56px;border-radius:50%;background:#101a12c4;
     display:grid;place-items:center;color:#fff}
.live .khe .dung i svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.7}
.live .khe .vach{position:absolute;left:0;right:0;bottom:0;height:4px;background:#ffffff29}
.live .khe .vach b{display:block;height:100%;width:41%;background:var(--chanh)}
.live .khe .vach u{position:absolute;bottom:0;left:41%;width:9%;height:100%;
     background:#ffffff8f;text-decoration:none}

.live .dock{padding:17px 22px 15px;border-top:1px solid var(--vien)}
.live .dock .py{font-size:14px;letter-spacing:.055em;color:var(--muc-3);margin-bottom:6px}
.live .dock .hz{font-size:31px;line-height:1.34;letter-spacing:.02em}
.live .dock .vn{font-size:15px;color:var(--muc-2);margin-top:6px}

.live .hang{display:flex;gap:8px;padding:0 22px 17px;flex-wrap:wrap;align-items:center}
.live .dk{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--vien-dam);
    background:#fff;border-radius:999px;padding:9px 15px;font-size:13.5px;font-weight:500;
    color:var(--muc)}
.live .dk:hover:not([disabled]){border-color:var(--muc);background:var(--nen-dai)}
.live .dk[disabled]{opacity:.5;cursor:not-allowed}
.live .dk.cham{margin-left:auto;background:var(--muc);color:#fff;border-color:var(--muc)}
.live .dk.cham .ico{color:var(--chanh)}
.live .dk.cham[disabled]{background:var(--nen-dai);color:var(--muc-3);border-color:var(--vien-dam)}

/* ── vùng kết quả, ngay dưới câu vừa đọc ─────────────────────────────── */
.live .kq{margin-top:16px;border:1px solid var(--vien);border-radius:var(--r-anh);background:#fff;
     overflow:hidden}
.live .lop{padding:17px 22px}
.live .lop + .lop{border-top:1px solid var(--vien)}
.live .lop-dau{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin-bottom:14px}
.live .lop-dau h2{margin:0;font-size:14px;letter-spacing:.01em}
.live .lop-dau span{font-size:12.5px;color:var(--muc-3)}

.live .toks{display:flex;flex-wrap:wrap;gap:10px 14px}
.live .tok{padding-bottom:7px;border-bottom:2.5px solid var(--vien-dam);min-width:44px}
.live .tok .h{font-size:26px;line-height:1.25;display:flex;align-items:center;gap:5px}
.live .tok .h .ico{width:15px;height:15px;stroke-width:2.4}
.live .tok .p{font-size:12px;letter-spacing:.04em;color:var(--muc-3);margin-top:3px}
.live .tok.khop{border-bottom-color:var(--xanh)}
.live .tok.khac{border-bottom-color:var(--ho-phach)}
.live .tok.khac .h, .live .tok.khac .p{color:var(--ho-phach)}
.live .tok.sot{border-bottom-color:var(--xam-sot);border-bottom-style:dashed}
.live .tok.sot .h, .live .tok.sot .p{color:var(--xam-sot)}
.live .may{margin:16px 0 0;font-size:14px;color:var(--muc-2)}
.live .may b{font-weight:600;color:var(--muc)}

.live .lop.toi{background:var(--muc);color:#fff;border-top-color:#ffffff1f}
.live .lop.toi .lop-dau h2{color:#fff}
.live .lop.toi .lop-dau span{color:#ffffff8f}
.live .dang{display:flex;align-items:center;gap:10px;font-size:15px;color:#ffffffcf}
.live .quay{width:16px;height:16px;border-radius:50%;border:2px solid #ffffff3d;
     border-top-color:var(--chanh);animation:xoay .8s linear infinite;flex:none}
@keyframes xoay{to{transform:rotate(360deg)}}
.live .tom{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin-bottom:14px}
.live .tom b{font-size:26px;font-weight:700;letter-spacing:-.025em;color:var(--chanh)}
.live .tom span{font-size:13px;color:#ffffff9e}
.live .chu-hang{display:flex;gap:8px;flex-wrap:wrap}
.live .chu-hang span{display:flex;flex-direction:column;align-items:center;gap:1px;min-width:54px;
     border:1px solid #ffffff2e;border-radius:10px;padding:9px 7px 8px;cursor:help}
.live .chu-hang b{font-size:20px;font-weight:500;line-height:1.1}
.live .chu-hang i{font-size:10.5px;font-style:normal;color:#ffffff8f}
.live .chu-hang u{font-size:11.5px;text-decoration:none;color:#ffffffc4}
.live .chu-hang [data-bac="tot"]{border-color:var(--chanh)}
.live .chu-hang [data-bac="kha"]{border-color:#e3a008}
.live .chu-hang [data-bac="kem"]{border-color:#f87171}
.live .chu-hang [data-bac="khong-nghe"]{border-style:dashed;opacity:.55}
.live .thang{display:flex;gap:15px;flex-wrap:wrap;margin-top:16px;padding-top:13px;
     border-top:1px solid #ffffff1f;font-size:12px;color:#ffffff8f}
.live .thang i{font-style:normal;display:inline-flex;align-items:center;gap:6px}
.live .thang u{text-decoration:none;width:10px;height:10px;border-radius:3px;border:1.5px solid}

.live .khoa{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.live .khoa p{margin:0;font-size:15px;flex:1;min-width:220px;color:#fff}
.live .khoa .mo{border:0;border-radius:var(--r-dk);padding:10px 18px;font-size:14px;font-weight:600;
     background:var(--chanh);color:var(--muc);white-space:nowrap}

@media (max-width:720px){
  .live .dock .hz{font-size:26px}
  .live .dk.cham{margin-left:0;width:100%;justify-content:center}
}
@media (prefers-reduced-motion:reduce){.live .quay{animation:none}}

/* ══════════════════════════════════════════════════════════════════════════════════════
   DELTA — chỗ bản THẬT lệch khỏi `dang-cham.html`, và vì sao
   ══════════════════════════════════════════════════════════════════════════════════════
   Trên dòng này là port. Dưới là của bản thật.

   Phần lớn dưới đây là để THẮNG `web/styles.css` — tệp ấy định kiểu khối công cụ bằng
   `id` (`#dock`, `#status`, `#feedback`…), và một selector `id` mạnh hơn `.live .dock`.
   Nên chỗ nào cần đè phải viết `.live #id`, không viết `.live .lop-lop`. Đây là cái giá
   của việc giữ nguyên mọi `id` cho `app.js`, và nó đáng: đổi id là hỏng bốn bài kiểm.
   ══════════════════════════════════════════════════════════════════════════════════════ */

/* Cột 880px là của bản dựng này, không phải 1280px của trang giới thiệu. `.khung` dùng
   chung tên nên phải bọc `.live`. Và `styles.css` cho `.live` một lề ngang `--pad-x` từ
   lượt dựng cũ, lúc nó tự căn lề; nay nó bọc `.khung` nên hai lề cộng vào nhau. */
.live{background:var(--nen);padding-left:0;padding-right:0}
.live .khung{max-width:880px;padding:0 24px}

/* Dòng trạng thái — bản dựng không có, vì bản dựng không bao giờ nạp hỏng. */
.live #status{margin:0 0 12px;padding:0;border:0;font-size:13.5px;line-height:1.6;
     color:var(--muc-2);min-height:0}

/* "Đổi video": bản dựng vẽ một `<a>`, bản thật là `<button>` (nó không điều hướng). */
.live .dau-video button{margin-left:auto;flex:none;border:0;background:transparent;
     font-size:13.5px;font-weight:600;color:var(--xanh);padding:4px 0}
.live .dau-video button:hover{text-decoration:underline}

/* Mọi luật ở vùng luyện đều bọc `.live`, để không rò sang thẻ xem trước của màn mở.
   Tỉ lệ 16:9 lấy từ bản dựng D60 (`design-mockups/web-v2/index.html:109`), đúng với
   nguồn YouTube; `height:auto` ghi đè chiều cao 300px của bản mockup sân khấu cũ. */
.live .khe{position:relative;aspect-ratio:16/9;width:100%;height:auto}

/* Khung phát phủ kín `.khe`; tỉ lệ 16:9 thuộc về khung cha để iframe không bị dẹt. */
.live #player{position:absolute;inset:0;width:100%;height:100%;aspect-ratio:auto;
     border:0;border-radius:0;background:#0d1310}
.live #player iframe{width:100%;height:100%}
/* Lúc chưa có video, `.khe` thấp lại và sáng lên: một ô đen cao 300px là thứ to nhất màn
   hình đầu mà không nói gì. */
.live .khe:has(#player[data-empty]){height:clamp(116px,17vh,164px);background:var(--nen-dai)}
.live #player[data-empty]{background:transparent}
.live #player[data-empty]::before{color:var(--muc-3)}
.live .khe:has(#player[data-empty]) .vach{display:none}

/* Thanh tiến độ: `styles.css` vẽ nó trong dock, nay nó là `.vach` trên khung phát. */
.live #prog{position:absolute;left:0;right:0;bottom:0;height:4px;background:#ffffff29;
     margin:0;padding:0;border:0}
.live #prog i{display:block;height:100%;width:0;background:var(--chanh);
     transition:width .12s linear}

/* Dock: đè `#dock*` của `styles.css`. */
.live #dock{margin:0;padding:17px 22px 15px;border:0;border-top:1px solid var(--vien);
     background:transparent}
.live #dock-pinyin{font-size:14px;letter-spacing:.055em;color:var(--muc-3);margin:0 0 6px;
     text-transform:none}
.live #dock-hanzi{font-size:31px;line-height:1.34;letter-spacing:.02em;color:var(--muc);
     font-weight:400;margin:0}
.live #dock-native{font-size:15px;color:var(--muc-2);margin:6px 0 0}

/* Điều khiển là bốn vị trí cố định, không phải một dải flex tự xuống dòng theo độ dài nhãn.
   `#rec` chỉ thành hành động chính khi nó mở: trước đó Bắt đầu dẫn phiên; sau khi video dừng,
   Thu dẫn lượt đọc. `:has()` ở đây an toàn vì site đã dùng nó cho trạng thái khung phát. */
.live .acts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;padding:16px 22px 18px;
     align-items:stretch;border:0;margin:0}
.live .acts.second{grid-template-columns:repeat(2,minmax(0,1fr));padding-top:14px;
     border-top:1px dashed var(--vien)}
.live .acts button{border:1px solid var(--vien-dam);border-radius:999px;padding:9px 15px;
     font-size:13.5px;font-weight:500;background:#fff;color:var(--muc);
     display:inline-flex;justify-content:center;align-items:center;gap:7px;width:100%;min-height:46px;
     opacity:1;text-align:center}
.live .acts.second button{font-size:12.5px;color:var(--muc-2);padding:8px 14px;min-height:42px}
.live .acts button:hover:not(:disabled){border-color:var(--muc);background:var(--nen-dai)}
.live .acts button:disabled{opacity:.5;cursor:not-allowed;background:#fff}
.live .acts:has(#rec:disabled) #start:not(:disabled),
.live .acts:has(#rec:not(:disabled)) #rec{background:var(--xanh);border-color:var(--xanh);color:#fff}
.live .acts:has(#rec:disabled) #start:not(:disabled):hover,
.live .acts:has(#rec:not(:disabled)) #rec:hover{background:var(--xanh-dam);border-color:var(--xanh-dam)}
.live .acts .ico{width:17px;height:17px}

/* Thanh xem lại — bản dựng không có. Giữ hình dạng cũ, chỉnh cho hợp nền trắng. */
.live #replay-bar{margin:14px 0 0;padding:11px 16px;border:1px solid var(--vien);
     border-radius:var(--r-dk);background:var(--nen-dai);display:grid;align-items:center;
     grid-template-columns:auto auto minmax(0,1fr) auto;gap:12px;font-size:13.5px}
.live #replay-bar .hint{min-width:0}
.live #replay-bar button{margin:0;white-space:nowrap}

/* Vùng kết quả. `#feedback` và `#lyrics` nay là hai `.lop` trong một thẻ `.kq`. */
.live #feedback,.live #lyrics{margin:0}
.live #feedback{background:var(--nen-dai)}
.live #feedback .lop-dau{margin-bottom:12px}
.live #heard{margin:0 0 12px;font-size:14px;color:var(--muc-2)}
.live #verdict{margin:0}
.live #verdict:empty{display:none}
.live .fineprint{margin:16px 0 0;font-size:12.5px;line-height:1.6;color:var(--muc-3)}
.live #lines{margin:0;padding:0;list-style:none}

/* Lời bài có mặt để nhảy câu, nhưng chỉ mở theo ý người học. `details` giữ nguyên cây DOM
   mà app.js dùng để render #lines; không có trạng thái thứ hai hay listener riêng. */
.live #lyrics{padding:0}
.live #lyrics summary{cursor:pointer;list-style:none;margin:0;padding:17px 22px;
     min-height:58px;align-items:center}
.live #lyrics summary::-webkit-details-marker{display:none}
.live #lyrics .lyrics-head{margin-bottom:0}
.live #lyrics .lyrics-toggle{margin-left:auto;color:var(--xanh);font-weight:600}
.live #lyrics[open] .lyrics-toggle{font-size:0}
.live #lyrics[open] .lyrics-toggle::after{content:'Thu gọn';font-size:12.5px}
.live #lyrics:not([open]) #lines{display:none}
.live #lyrics[open] #lines{border-top:1px solid var(--vien)}

@media (max-width:620px){
  .live .acts{grid-template-columns:repeat(2,minmax(0,1fr));padding-left:16px;padding-right:16px}
  .live .acts #rec{grid-column:1/-1}
  .live .acts.second{grid-template-columns:1fr}
  .live #replay-bar{grid-template-columns:auto minmax(0,1fr)}
  .live #replay-bar .hint,.live #replay-bar button{grid-column:1/-1}
  .live #replay-bar button{justify-content:center}
}

/* Bảng lời: pinyin thừa hưởng font đơn cách của hướng tối cũ, và ở khổ 11px với giãn chữ
   .1em nó đọc như một dãy mã chứ không như phiên âm. Dock đã dùng font trang; hai chỗ nói
   cùng một thứ tiếng thì phải cùng một mặt chữ. */
.live #lines .p{font-family:inherit;font-size:12px;letter-spacing:.045em}

/* Chú giải bốn hạng: bốn cụm `khớp · khác · bỏ sót · thừa` phải nằm trên MỘT dòng, tách
   khỏi câu giải thích. Để chảy chung một đoạn thì "thừa." và câu sau dính vào nhau giữa
   dòng, và bốn hạng thôi đọc ra như một danh sách.

   Lượt đầu tôi làm bằng `display:flex` trên cả đoạn — SAI, và ảnh chụp cho thấy ngay: flex
   biến MỖI nút chữ thành một ô riêng, nên dấu chấm câu tách khỏi chữ đứng trước và "thừa"
   rơi xuống một dòng của riêng nó. Câu giải thích nay là một `<span>` riêng trong HTML; đó
   là chỗ đúng để cắt, không phải ở tầng bố cục. */
.live .fineprint .k{display:inline-flex;align-items:center;gap:4px;white-space:nowrap}
.live .fineprint .giai{display:block;margin-top:6px}