/* =============================================================================
   Phòng học ảo — trang /study-hall + widget trang chủ (hero, viên LIVE, nhãn thẻ đề, CTA cuối).
   Màu/chữ theo canvas "HOCSAT – Phòng học ảo": Be Vietnam Pro, cam #FC7321, chữ #1A1A2E.
   Tiền tố sr- (trang + cảnh) và srw- (widget) để không đụng khối hv2- của trang chủ.
   ============================================================================= */

:root {
    --sr-orange: #FC7321;
    --sr-ink: #1A1A2E;
    --sr-muted: #4B5563;
    --sr-line: #E5E7EB;
    --sr-bg: #FFF7ED;
}

/* ---------- Cảnh (dùng chung) ---------- */
.sr-svg { display: block; transform-origin: 0 0; user-select: none; }
.sr-person { cursor: pointer; outline: none; }
.sr-person:focus-visible .sr-body { filter: drop-shadow(0 0 4px var(--sr-orange)); }
.sr-away { opacity: .45; transition: opacity 1s; }
.sr-pen { animation: sr-pen 1.4s ease-in-out infinite; transform-box: fill-box; transform-origin: 20% 100%; }
.sr-steam { animation: sr-steam 2.6s ease-in-out infinite; }
.sr-spark { animation: sr-spark 1.1s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
.sr-lamp { animation: sr-lamp 3s ease-in-out infinite; }
.sr-cheer { animation: sr-float 2.6s ease-out forwards; }
.sr-bob { animation: sr-bob .45s ease-in-out infinite; }
.sr-fadein { animation: sr-fadein .8s ease-out; }
.sr-fadeout { animation: sr-fadeout .6s ease-in forwards; }
.sr-flash { animation: sr-flash .9s ease-out; }
.sr-sitdown { animation: sr-sit .8s ease-out; }
/* Nhân vật sprite (04/11/2026): đang học thì "thở" rất nhẹ; dáng đi luân phiên hai khung bước walk1/walk2.
   Khung B mặc định ẩn — khi tắt chuyển động chỉ còn khung A đứng yên, không bao giờ chồng hai khung. */
.sr-breathe { animation: sr-breathe 3.2s ease-in-out infinite; }
.sr-step-a { animation: sr-step-a .5s step-end infinite; }
.sr-step-b { opacity: 0; animation: sr-step-b .5s step-end infinite; }

@keyframes sr-pen { 0%, 100% { transform: rotate(0deg); } 50% { transform: rotate(-14deg); } }
@keyframes sr-steam { 0% { opacity: 0; transform: translateY(2px); } 40% { opacity: .85; } 100% { opacity: 0; transform: translateY(-6px); } }
@keyframes sr-spark { 0%, 100% { opacity: .35; transform: scale(.7); } 50% { opacity: 1; transform: scale(1.15); } }
@keyframes sr-lamp { 0%, 100% { opacity: .75; } 50% { opacity: 1; } }
@keyframes sr-float { 0% { opacity: 0; transform: translate(0, -100px); } 20% { opacity: 1; } 100% { opacity: 0; transform: translate(0, -140px); } }
@keyframes sr-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }
@keyframes sr-fadein { from { opacity: 0; } to { opacity: 1; } }
@keyframes sr-fadeout { to { opacity: 0; } }
@keyframes sr-flash { 0% { opacity: 0; filter: brightness(2); } 100% { opacity: 1; filter: none; } }
@keyframes sr-sit { 0% { opacity: .6; } 100% { opacity: 1; } }
@keyframes sr-breathe { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-.8px); } }
/* Cử động riêng của từng nhân vật khi đang học (06/11/2026, study-room-scene.js SIG): xoay quanh đáy hình. */
.sr-sig-groove, .sr-sig-sway, .sr-sig-nod, .sr-sig-wiggle { transform-box: fill-box; transform-origin: 50% 100%; }
.sr-sig-groove { animation: sr-sig-groove 1.1s ease-in-out infinite; }
.sr-sig-sway { animation: sr-sig-sway 4.2s ease-in-out infinite; }
.sr-sig-nod { animation: sr-sig-nod 2.6s ease-in-out infinite; }
.sr-sig-wiggle { animation: sr-sig-wiggle 1.8s ease-in-out infinite; }
@keyframes sr-sig-groove { 0%, 100% { transform: rotate(-1.6deg); } 50% { transform: rotate(1.6deg); } }
@keyframes sr-sig-sway { 0%, 100% { transform: translateX(-.6px) rotate(-.6deg); } 50% { transform: translateX(.6px) rotate(.6deg); } }
@keyframes sr-sig-nod { 0%, 70%, 100% { transform: translateY(0); } 80% { transform: translateY(1.2px); } 90% { transform: translateY(0); } }
@keyframes sr-sig-wiggle { 0%, 100% { transform: rotate(-8deg); } 50% { transform: rotate(8deg); } }
@keyframes sr-step-a { 0% { opacity: 1; } 50% { opacity: 0; } }
@keyframes sr-step-b { 0% { opacity: 0; } 50% { opacity: 1; } }

/* Cử chỉ (BR-ROOM-110, study-room-scene.js GESTURES): --gl = thời lượng, --gd = độ trễ ÂM (đã chạy được bao lâu) để
   vẽ lại người mỗi bản chụp không phát lại từ đầu. sr-gb-* = cả người, sr-gp-* = đồ vật / dấu hiệu. Hết cử chỉ
   (fill both) mọi thứ về đúng khung 0% — người đứng yên như cũ, đồ vật ẩn. */
.sr-ga { transform-box: fill-box; }
.sr-gb-sip, .sr-gb-stretch, .sr-gb-tilt, .sr-gb-pop, .sr-gb-lean, .sr-gb-lean-l, .sr-gb-bounce { transform-origin: 50% 100%; }
.sr-gb-sip { animation: sr-gb-sip var(--gl, 3s) ease-in-out var(--gd, 0ms) both; }
.sr-gb-stretch { animation: sr-gb-stretch var(--gl, 3s) ease-in-out var(--gd, 0ms) both; }
.sr-gb-tilt { animation: sr-gb-tilt var(--gl, 3s) ease-in-out var(--gd, 0ms) both; }
.sr-gb-pop { animation: sr-gb-pop var(--gl, 3s) ease-out var(--gd, 0ms) both; }
.sr-gb-lean { animation: sr-gb-lean var(--gl, 3s) ease-in-out var(--gd, 0ms) both; }
.sr-gb-lean-l { animation: sr-gb-lean-l var(--gl, 3s) ease-in-out var(--gd, 0ms) both; }
.sr-gb-bounce { animation: sr-gb-bounce var(--gl, 3s) ease-out var(--gd, 0ms) both; }
.sr-gp-mug { animation: sr-gp-mug var(--gl, 3s) ease-in-out var(--gd, 0ms) both; }
.sr-gp-pop { transform-origin: 50% 50%; animation: sr-gp-pop var(--gl, 3s) ease-out var(--gd, 0ms) both; }
.sr-gp-drop { animation: sr-gp-drop var(--gl, 3s) ease-in var(--gd, 0ms) both; }
.sr-gp-flip { transform-origin: 50% 50%; animation: sr-gp-flip var(--gl, 3s) ease-in-out var(--gd, 0ms) both; }
.sr-gp-blink { animation: sr-gp-blink var(--gl, 3s) steps(1) var(--gd, 0ms) both; }
@keyframes sr-gb-sip { 0%, 100% { transform: none; } 25%, 75% { transform: rotate(-1.4deg) translateY(-.6px); } }
@keyframes sr-gb-stretch { 0%, 100% { transform: none; } 30%, 60% { transform: scale(1.02, 1.06); } }
@keyframes sr-gb-tilt { 0%, 100% { transform: none; } 20%, 80% { transform: rotate(2.2deg); } }
@keyframes sr-gb-pop { 0%, 100% { transform: none; } 12% { transform: translateY(-3px); } 24% { transform: none; } }
@keyframes sr-gb-lean { 0%, 100% { transform: none; } 20%, 80% { transform: rotate(1.8deg) translateX(.8px); } }
@keyframes sr-gb-lean-l { 0%, 100% { transform: none; } 20%, 80% { transform: rotate(-1.8deg) translateX(-.8px); } }
@keyframes sr-gb-bounce { 0%, 100% { transform: none; } 12%, 36% { transform: translateY(-4px); } 24%, 48% { transform: none; } }
@keyframes sr-gp-mug { 0% { opacity: 0; transform: translateY(12px); } 18%, 82% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translateY(12px); } }
@keyframes sr-gp-pop { 0% { opacity: 0; transform: scale(.2); } 14% { opacity: 1; transform: scale(1.18); } 24%, 84% { opacity: 1; transform: none; } 100% { opacity: 0; transform: none; } }
@keyframes sr-gp-drop { 0%, 15% { opacity: 0; transform: none; } 30% { opacity: 1; } 85% { opacity: 1; transform: translateY(3px); } 100% { opacity: 0; transform: translateY(4px); } }
@keyframes sr-gp-flip { 0%, 100% { opacity: 0; transform: none; } 8%, 92% { opacity: 1; } 25%, 65% { transform: scaleX(.08); } 45%, 85% { transform: none; } }
@keyframes sr-gp-blink { 0%, 100% { opacity: 0; } 10%, 30%, 50%, 70% { opacity: 1; } 20%, 40%, 60% { opacity: .2; } }

@media (prefers-reduced-motion: reduce) {
    .sr-pen, .sr-steam, .sr-spark, .sr-lamp, .sr-bob, .sr-cheer, .sr-flash, .sr-sitdown, .srw-drift, .srw-dot,
    .sr-breathe, .sr-step-a, .sr-step-b, .sr-zz,
    .sr-sig-groove, .sr-sig-sway, .sr-sig-nod, .sr-sig-wiggle, .sr-ga { animation: none !important; }
    .sr-svg, .sr-walker, .sr-person, .sr-cat { transition: none !important; }
}

/* ---------- Trang /study-hall ---------- */
/* Khung rộng như các trang khác (1280px, thẳng hàng menu) — người dùng chọn lại 02/11/2026 sau khi thử bản tràn ngang. */
.sr-page { max-width: 1280px; margin: 0 auto; padding: 24px 16px 48px; color: var(--sr-ink); font-family: 'Be Vietnam Pro', system-ui, sans-serif; }
.sr-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 12px; }
.sr-head h1 { font-size: 28px; font-weight: 800; margin: 0; }
.sr-sub { margin: 4px 0 0; color: var(--sr-muted); }
.sr-cta { background: var(--sr-orange); color: #fff; font-weight: 700; padding: 12px 22px; border-radius: 12px; text-decoration: none; min-height: 44px; display: inline-flex; align-items: center; }
.sr-cta:hover { background: #E8620F; color: #fff; }

.sr-tabs { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; margin-bottom: 12px; }
.sr-tab { border: 1px solid var(--sr-line); background: #fff; border-radius: 999px; padding: 8px 14px; font: inherit; font-weight: 600; white-space: nowrap; cursor: pointer; min-height: 40px; }
.sr-tab b { color: var(--sr-orange); margin-right: 4px; }
.sr-tab:hover { border-color: var(--sr-orange); }

/* Cảnh chiếm hết chiều ngang khung; hai thẻ "Bạn …" + "Hôm nay của bạn" nằm DƯỚI phòng học (chốt 02/11/2026). */
.sr-main { display: block; }
.sr-stage-wrap { min-width: 0; }
/* Đúng tỉ lệ ảnh hall (1920×819) để ảnh lấp kín khung, không dải trống hai bên. */
.sr-stage { position: relative; width: 100%; aspect-ratio: 1920 / 819; min-height: 320px; overflow: hidden; border-radius: 16px; background: #F3E9DC; border: 1px solid var(--sr-line); touch-action: pan-y; cursor: grab; }
.sr-stage:active { cursor: grabbing; }
.sr-offline .sr-stage .sr-svg { filter: grayscale(.6) opacity(.6); }

.sr-banner { position: absolute; left: 50%; top: 14px; transform: translateX(-50%); background: #fff; border: 1px solid var(--sr-line); border-radius: 12px; padding: 10px 14px; box-shadow: 0 6px 20px rgba(26, 26, 46, .12); max-width: calc(100% - 32px); display: flex; gap: 10px; align-items: center; flex-wrap: wrap; font-size: 14px; z-index: 2; }
.sr-banner a { color: var(--sr-orange); font-weight: 700; }
.sr-banner-dark { background: var(--sr-ink); color: #fff; border-color: var(--sr-ink); }
.sr-banner button { background: var(--sr-orange); color: #fff; border: 0; border-radius: 8px; padding: 6px 12px; font: inherit; font-weight: 700; cursor: pointer; min-height: 36px; }

.sr-pop { position: absolute; z-index: 3; width: 250px; background: #fff; border-radius: 14px; border: 1px solid var(--sr-line); box-shadow: 0 10px 30px rgba(26, 26, 46, .18); padding: 12px; transform: translateY(-100%); }
.sr-pop strong { display: block; padding-right: 24px; font-size: 14px; }
.sr-pop-btns { display: grid; gap: 6px; margin-top: 8px; }
.sr-pop-btns button { display: flex; align-items: center; gap: 8px; border: 1px solid var(--sr-line); background: #fff; border-radius: 10px; padding: 6px 10px; font: inherit; font-size: 14px; cursor: pointer; min-height: 44px; }
.sr-pop-btns button:hover:not(:disabled) { border-color: var(--sr-orange); }
.sr-pop-btns button:disabled { opacity: .5; cursor: not-allowed; }
.sr-pop-btns svg { width: 22px; height: 22px; }
.sr-x { position: absolute; right: 6px; top: 4px; border: 0; background: none; font-size: 20px; cursor: pointer; width: 32px; height: 32px; color: var(--sr-muted); }

.sr-tools { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 10px; }
.sr-btns { display: flex; gap: 6px; flex-wrap: wrap; }
.sr-btns button, .sr-dialog button, .sr-row button { border: 1px solid var(--sr-line); background: #fff; border-radius: 10px; padding: 8px 12px; font: inherit; font-weight: 600; cursor: pointer; min-height: 40px; min-width: 40px; }
.sr-btns button.is-primary, .sr-dialog .is-primary { background: var(--sr-orange); border-color: var(--sr-orange); color: #fff; }
.sr-minimap { position: relative; flex: 0 0 200px; height: 18px; border-radius: 6px; overflow: hidden; border: 1px solid var(--sr-line); cursor: pointer; }
.sr-minimap span { position: absolute; top: 0; bottom: 0; }
.sr-minimap i { position: absolute; top: 0; bottom: 0; border: 2px solid var(--sr-orange); border-radius: 4px; box-sizing: border-box; }
.sr-note { color: var(--sr-muted); font-size: 13px; margin: 6px 0; }
.sr-hint-touch { display: none; }

.sr-side { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; align-items: start; margin-top: 16px; }
.sr-card { background: #fff; border: 1px solid var(--sr-line); border-radius: 16px; padding: 16px; }
.sr-card h2 { font-size: 16px; margin: 0 0 6px; }
.sr-card a { color: var(--sr-orange); font-weight: 700; }
.sr-big { font-size: 22px; font-weight: 800; margin: 4px 0; }
.sr-me-row { display: flex; gap: 10px; align-items: center; }
.sr-me-av { width: 56px; flex: 0 0 56px; background: var(--sr-bg); border-radius: 12px; }
.sr-me-av svg { width: 100%; display: block; }
.sr-switch { display: flex; gap: 8px; align-items: flex-start; margin: 10px 0; font-size: 14px; cursor: pointer; }
.sr-switch input { width: 20px; height: 20px; accent-color: var(--sr-orange); flex: 0 0 auto; margin-top: 1px; }

.sr-dialog { border: 0; border-radius: 18px; padding: 22px; max-width: min(460px, calc(100vw - 32px)); color: var(--sr-ink); font-family: 'Be Vietnam Pro', system-ui, sans-serif; }
.sr-dialog::backdrop { background: rgba(26, 26, 46, .45); }
.sr-dialog h2 { margin: 0 0 8px; font-size: 20px; }
.sr-dialog ul { padding-left: 18px; color: var(--sr-muted); }
.sr-dialog-btns { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-top: 14px; }
.sr-link { background: none !important; border: 0 !important; color: var(--sr-orange); font-weight: 700; padding: 4px !important; text-decoration: underline; }
.sr-row { display: flex; gap: 8px; }
.sr-row input { flex: 1; border: 1px solid var(--sr-line); border-radius: 10px; padding: 8px 10px; font: inherit; min-height: 40px; }
.sr-err { color: #B91C1C; font-size: 13px; }
.sr-avatars { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 8px 0; }
.sr-av { padding: 4px !important; background: var(--sr-bg) !important; }
.sr-av.is-on { border: 2px solid var(--sr-orange) !important; }
.sr-av svg { width: 100%; display: block; }

/* ---------- Toàn màn hình (BR-ROOM-26) ----------
   .is-fullscreen: cả hai cách (Fullscreen API và bản dự phòng .sr-fs cho iPhone). Cảnh lấp hết chiều cao còn lại,
   hàng nút + bản đồ nhỏ nằm dưới. Bản dự phòng: phủ kín màn hình, trên menu (Bootstrap navbar 1030). */
.sr-fs-btn { display: inline-flex; align-items: center; justify-content: center; }
/* Con mèo của phòng (BR-ROOM-80..87) */
/* Lời nhắn trên bảng trắng (BR-ROOM-91/93) */
.sr-note-btn { display: inline-flex; align-items: center; gap: 6px; }
.sr-note-btn[hidden] { display: none; }
@media (max-width: 575.98px) { .sr-note-btn .sr-note-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } }
/* Mở NGAY DƯỚI hàng nút, ngoài khung cảnh (06/11/2026): đặt trong khung thì 22 ô che mất ba bảng — đúng chỗ người
   chọn muốn nhìn xem câu mình sẽ hiện ra sao. */
.sr-sheet { position: relative; margin-top: 10px; background: #fff; border: 1px solid var(--sr-line); border-radius: 16px; box-shadow: 0 8px 24px rgba(26, 26, 46, .10); padding: 14px 16px 12px; opacity: 0; transform: translateY(-8px); transition: opacity .25s ease-out, transform .25s ease-out; }
.sr-sheet.is-open { opacity: 1; transform: translateY(0); }
.sr-sheet[hidden] { display: none; }
.sr-sheet strong { display: block; padding-right: 28px; font-size: 15px; }
.sr-sheet > .sr-note { margin: 2px 0 10px; }
.sr-sheet-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 6px; }
.sr-sheet-list button { text-align: left; border: 1px solid var(--sr-line); background: #fff; border-radius: 10px; padding: 8px 12px; font: inherit; font-size: 13.5px; cursor: pointer; min-height: 40px; }
.sr-sheet-list button:hover { border-color: var(--sr-orange); }
.sr-sheet-list button[aria-selected="true"] { border: 2px solid var(--sr-orange); background: #FFF4EC; padding: 7px 11px; font-weight: 700; }
.sr-sheet-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 12px; flex-wrap: wrap; }
.sr-sheet-foot button { border: 1px solid var(--sr-line); background: #fff; border-radius: 10px; padding: 8px 14px; font: inherit; font-weight: 700; cursor: pointer; min-height: 40px; }
.sr-sheet-foot button.is-primary { background: var(--sr-orange); border-color: var(--sr-orange); color: #fff; }
.sr-sheet-foot button:disabled { opacity: .5; cursor: default; }
.sr-wb-new { animation: sr-fadein .6s ease-out; }
/* Dòng môn / "Nghỉ" trên thẻ tên: chỉ khi rê chuột, chạm (focus) hoặc là chính mình — thẻ tên to lên thì đỡ chật. */
.sr-badge { opacity: 0; transition: opacity .15s; }
.sr-person:hover .sr-badge, .sr-person:focus .sr-badge, .sr-person.is-me .sr-badge { opacity: 1; }
#sr-wb-hit { cursor: pointer; outline: none; }
#sr-wb-hit:focus-visible { stroke: var(--sr-orange); stroke-width: 3; }
.sr-wb-pop { width: 300px; }
.sr-wb-list { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 8px; }
.sr-wb-list li { font-size: 15px; line-height: 1.4; font-weight: 600; font-style: italic; }
.sr-wb-list li span { display: block; font-size: 13px; font-weight: 400; font-style: normal; color: var(--sr-muted); text-align: right; }
.sr-wb-write { margin-top: 10px; width: 100%; border: 0; background: var(--sr-orange); color: #fff; border-radius: 10px; padding: 8px 12px; font: inherit; font-weight: 700; cursor: pointer; min-height: 40px; }
.sr-wb-write[hidden] { display: none; }
.sr-cat-btn { display: inline-flex; align-items: center; gap: 6px; }
.sr-cat-btn[hidden] { display: none; }
.sr-cat-btn:disabled { opacity: .6; cursor: default; }
.sr-zz { animation: sr-bob 1.6s ease-in-out infinite; }
.sr-cat .sr-step-a, .sr-cat .sr-step-b { animation-duration: 1.2s; }   /* bước chậm hơn người, khớp tốc độ đi */
.sr-toast { position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); background: var(--sr-ink); color: #fff; border-radius: 999px; padding: 8px 14px; font-size: 13px; font-weight: 600; box-shadow: 0 6px 20px rgba(26, 26, 46, .2); max-width: calc(100% - 32px); z-index: 2; animation: sr-fadein .3s ease-out; }
.sr-toast[hidden] { display: none; }
.sr-fs-btn[hidden] { display: none; }
.sr-fs-btn .sr-fs-out { display: none; }
.sr-stage-wrap.is-fullscreen .sr-fs-btn .sr-fs-in { display: none; }
.sr-stage-wrap.is-fullscreen .sr-fs-btn .sr-fs-out { display: inline; }
.sr-stage-wrap.is-fullscreen {
    display: flex; flex-direction: column; gap: 8px;
    width: 100%; height: 100%; padding: 12px; box-sizing: border-box;
    background: #1A1A2E;
}
.sr-stage-wrap.is-fullscreen .sr-stage { flex: 1 1 auto; height: auto; min-height: 0; aspect-ratio: auto; border-radius: 12px; border: 0; }
.sr-stage-wrap.is-fullscreen .sr-tools { margin-top: 0; color: #E2E8F0; }
.sr-stage-wrap.is-fullscreen .sr-note { color: #CBD5E1; }
.sr-stage-wrap.sr-fs {
    position: fixed; inset: 0; z-index: 1085;
    height: 100vh; height: 100dvh;
    padding: max(12px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) max(12px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left));
}
html.sr-fs-lock, html.sr-fs-lock body { overflow: hidden; }

@media (max-width: 900px) {
    .sr-side { grid-template-columns: 1fr; }
    .sr-stage { aspect-ratio: auto; height: 60vh; min-height: 380px; }
    .sr-hint-desk { display: none; }
    .sr-hint-touch { display: block; }
    .sr-minimap { flex-basis: 100%; }
}

/* ---------- Widget trang chủ ---------- */
.srw-hero-wrap { position: relative; }
/* Phòng có người: cảnh phòng chiếm chỗ thẻ điểm, thẻ 1180 thu nhỏ đè góc dưới (board 3). */
.srw-hero-wrap.is-live .srw-score-card { position: absolute; right: 12px; bottom: 12px; width: 440px; transform: scale(.5); transform-origin: bottom right; margin: 0; box-shadow: 0 8px 24px rgba(26, 26, 46, .18); pointer-events: none; }
/* Thẻ 1180 giữ NGUYÊN bố cục của bản thường (rộng 440px) rồi mới thu nhỏ cả khối — ép width nhỏ thì chữ và thanh
   điểm bị xô (lỗi 03/11/2026). */
@media (max-width: 640px) {
    .srw-hero-wrap.is-live .srw-score-card { transform: scale(.4); }
}
/* Thấp hơn bản đầu (16/11) để cột phải hero cao gần bằng bản chưa có phòng học — cột trái không bị lệch. */
.srw-hero { position: relative; display: block; border-radius: 20px; overflow: hidden; background: #F8FAFC; border: 1px solid var(--sr-line); aspect-ratio: 16 / 9; text-decoration: none; color: var(--sr-ink); }
.srw-hero svg { position: absolute; inset: 0; height: 100%; width: auto; }
.srw-drift { animation: srw-drift 24s ease-in-out infinite alternate; }
@keyframes srw-drift { from { transform: translateX(0); } to { transform: translateX(-18%); } }
.srw-live { position: absolute; left: 14px; top: 14px; background: #fff; border-radius: 999px; padding: 6px 12px; font-weight: 800; font-size: 13px; box-shadow: 0 4px 14px rgba(26, 26, 46, .15); display: inline-flex; gap: 6px; align-items: center; }
.srw-dot { width: 8px; height: 8px; border-radius: 50%; background: #22C55E; animation: srw-pulse 1.6s ease-in-out infinite; }
@keyframes srw-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
.srw-score { position: absolute; right: 12px; bottom: 12px; width: 46%; max-width: 230px; }
.srw-score > * { transform-origin: bottom right; }
.srw-open { position: absolute; left: 14px; bottom: 14px; background: var(--sr-orange); color: #fff; font-weight: 700; font-size: 13px; padding: 6px 12px; border-radius: 999px; }
.srw-pill { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; font-size: 13px; color: var(--sr-ink); background: #F0FDF4; border: 1px solid #BBF7D0; border-radius: 999px; padding: 4px 10px; text-decoration: none; white-space: nowrap; }
.srw-pill[hidden], .srw-taking[hidden], .srw-hero[hidden] { display: none !important; }
.srw-taking { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; color: #166534; }
.srw-faces { display: inline-flex; }
.srw-faces svg { width: 22px; height: 22px; border-radius: 50%; background: var(--sr-bg); border: 1.5px solid #fff; margin-left: -6px; }
.srw-faces svg:first-child { margin-left: 0; }
/* Hàng ghế CTA cuối: trang trí ở góc, KHÔNG chiếm dòng — khối CTA giữ đúng chiều cao bản cũ. */
.hv2-cta:has(.srw-seats) { position: relative; }
.srw-seats { position: absolute; top: 18px; right: 24px; display: flex; gap: 6px; margin: 0; }
.srw-seats span { width: 18px; height: 14px; border-radius: 6px 6px 2px 2px; background: #E2E8F0; }
.srw-seats span.is-on { background: var(--sr-orange); box-shadow: 0 0 18px rgba(252, 115, 33, .6); }

@media (max-width: 640px) {
    .srw-hero { aspect-ratio: auto; height: 40vh; max-height: 320px; }
}
/* Viên LIVE chen vào menu: giữ "Đăng nhập" một dòng như khi chưa có viên (chỉ áp khi viên đang hiện). */
.navbar-nav:has(.srw-pill:not([hidden])) .nav-login { white-space: nowrap; }
/* Viên LIVE trên menu: chỉ chấm + số khi màn chưa đủ rộng — hiện cả chữ thì "Đăng nhập" bị đẩy xuống hai dòng. */
@media (max-width: 1599px) {
    .srw-pill .srw-text { display: none; }
}