/* XQBase game-view — CSS tách khỏi template (v3.37) để trình duyệt cache lại,
   template nạp kèm ?v=filemtime nên sửa file là lấy bản mới ngay. */
/* Nền canvas xám nhạt + 2 khung thành card bo góc đổ bóng (phong cách hiện đại) */
.xqbase-gview { --xq-blue:#0078D4; --xq-border:#dfe3e8; background:#eef1f5; padding:.9rem; border-radius:14px; }
/* align-items:flex-start (không phải stretch) để khung bàn cờ CO THEO NỘI DUNG —
   điều kiện bắt buộc để position:sticky bám được; stretch thì khung cao bằng cột
   biên bản nên "bám" không còn ý nghĩa. */
.xqbase-gview .xq-edit-split { display:flex; align-items:flex-start; min-height:480px; }
.xqbase-gview .xq-pane-board { flex:0 0 auto; width:50%; min-width:300px; overflow:hidden; }
/* Biên bản dài (hàng trăm nước) + khung phân tích làm trang cuộn dài; bàn cờ phải
   BÁM THEO MÀN HÌNH, nếu không nó trôi hẳn lên trên và người xem đọc nước cuối
   thì mất bàn cờ. Bề cao bàn cờ do boardSize() ghìm cho lọt trọn tầm nhìn. */
.xqbase-gview .xq-pane-board { position:sticky; top:.5rem; z-index:3; }
.xqbase-gview .xq-pane-board, .xqbase-gview .xq-pane-moves { border:1px solid #e3e7ec; border-radius:12px; background:#fff; display:flex; flex-direction:column; box-shadow:0 2px 10px rgba(16,24,40,.06); }
.xqbase-gview .xq-pane-head { background:var(--xq-blue); color:#fff; padding:.35rem .7rem; font-weight:600; display:flex; justify-content:space-between; align-items:center; gap:.5rem; border-radius:12px 12px 0 0; flex:0 0 auto; }
.xqbase-gview .xq-pane-body { flex:1 1 auto; padding:.6rem; overflow:hidden; display:flex; flex-direction:column; min-height:0; }
.xqbase-gview .xq-pane-board .xq-pane-body { text-align:center; display:block; }
/* align-self:stretch là BẮT BUỘC: cha dùng align-items:flex-start (cho sticky bàn cờ
   hoạt động) nên thanh kéo — vốn không có nội dung — bị co còn CAO 0px, tức vô hình và
   không thể nắm. stretch cho nó cao bằng dòng flex. */
.xqbase-gview .xq-splitbar { flex:0 0 7px; align-self:stretch; min-height:200px; cursor:col-resize; background:#e8ecf0; border-radius:3px; margin:0 2px; touch-action:none; }
.xqbase-gview .xq-splitbar:hover, .xqbase-gview .xq-splitbar.drag { background:var(--xq-blue); }
.xqbase-gview .xq-pane-moves { flex:1 1 auto; min-width:240px; overflow:hidden; }
.xqbase-gview .xq-game-hdr1 { font-weight:700; font-size:16px; line-height:1.3; text-align:center; }
.xqbase-gview .xq-game-hdr2,
.xqbase-gview .xq-game-hdr3 { font-style:italic; font-size:14px; color:#555; margin-bottom:.4rem; text-align:center; }
/* Có dòng khai cuộc → dòng giải sát ngay trên nó */
.xqbase-gview .xq-game-hdr2:has(+ .xq-game-hdr3) { margin-bottom:0; }
/* KHÔNG giới hạn chiều cao: trước đây max-height:56vh + overflow-y:auto làm biên bản
   dài có THANH CUỘN RIÊNG, và vì cột phải thấp nên bàn cờ sticky bên trái không có chỗ
   trượt → cuộn trang là bàn cờ trôi mất (đo được ở CẢ Chrome lẫn Firefox). Bỏ trần thì
   cả trang chỉ còn một vùng cuộn và bàn cờ bám đúng như khi bật khung phân tích. */
.xqbase-gview .xq-notation-flow { flex:1 1 auto; overflow:visible; border:1px solid var(--xq-border); border-radius:8px; min-height:200px; padding:.5rem .6rem; line-height:1.95; font-size:13.5px; background:#fff; }
.xqbase-gview .xq-notation-flow .xq-mv { cursor:pointer; padding:1px 4px; border-radius:3px; white-space:nowrap; }
/* Xếp cột kiểu tab (canh thẳng hàng theo nước đi) — số cột do JS tính theo bề rộng */
.xqbase-gview .xq-notation-flow.gv-grid { display:grid; gap:.12rem .45rem; align-content:start; }
.xqbase-gview .xq-notation-flow.gv-grid .xq-mv { white-space:normal; word-break:break-word; }
.xqbase-gview .xq-notation-flow.gv-grid .xq-res-line { grid-column:1 / -1; }
.xqbase-gview .xq-notation-flow.gv-grid .xq-mvno { color:#666; text-align:right; }
/* Chế độ CẶP (VN/WXF): mỗi ô = 1 nước đầy đủ — Tiên KHÍT Hậu (gap nhỏ), THOÁNG giữa 2 nước (column-gap) */
.xqbase-gview .xq-notation-flow.gv-pairs { column-gap:.45rem; }
.xqbase-gview .xq-notation-flow.gv-pairs .xq-pair { display:inline-flex; align-items:baseline; gap:.12rem; white-space:nowrap; padding:1px 0; width:max-content; justify-self:start; }
.xqbase-gview .xq-notation-flow.gv-pairs .xq-pair .xq-mv { white-space:nowrap; }
.xqbase-gview .xq-notation-flow.gv-pairs .xq-mvno { color:#888; text-align:left; flex:0 0 auto; }
.xqbase-gview .xq-notation-flow.gv-pairs .xq-mv-empty { color:#c7ccd2; }
.xqbase-gview .xq-notation-flow .xq-mv:hover { background:#e8f0fe; }
.xqbase-gview .xq-notation-flow .xq-mv.cur { background:var(--xq-blue); color:#fff; }
.xqbase-gview .xq-notation-flow .xq-mv.chk { font-weight:700; }
.xqbase-gview .xq-notation-flow .xq-res-line { display:block; font-weight:700; margin-top:.3rem; }
/* Thanh phát lại: nút tròn nổi dưới bàn cờ (giống viewer trong file HTML xuất) */
.xqbase-gview .xq-board-tools { display:flex; flex-wrap:wrap; gap:.35rem; justify-content:center; align-items:center; margin-top:.5rem; }
.xqbase-gview .xq-board-tools .btn-group { display:flex; gap:.35rem; border:0; }
.xqbase-gview .xq-board-tools .btn {
    width:38px; height:38px; padding:0; display:inline-flex; align-items:center; justify-content:center;
    border-radius:50% !important; background:#fff; border:1px solid #d9dee4; color:#374151;
    box-shadow:0 1px 3px rgba(16,24,40,.10); font-size:.95rem;
}
.xqbase-gview .xq-board-tools .btn:hover { border-color:var(--xq-blue); color:var(--xq-blue); background:#f0f7ff; }
/* Pane-head: tab ký hiệu kiểu segmented pill + hàng nút ghost đồng bộ 1 tông */
.xqbase-gview .xq-pane-head { align-items:center; gap:.3rem; padding:.4rem .55rem; flex-wrap:wrap; }
.xqbase-gview .gv-tab { background:rgba(255,255,255,.16); border:0; color:#fff; padding:.28rem .8rem; border-radius:999px; cursor:pointer; font-weight:600; font-size:.88rem; line-height:1.2; }
.xqbase-gview .gv-tab:hover { background:rgba(255,255,255,.32); }
.xqbase-gview .gv-tab.active { background:#fff; color:var(--xq-blue); box-shadow:0 1px 3px rgba(0,0,0,.2); }
.xqbase-gview .gv-head-actions { margin-left:auto; display:flex; align-items:center; gap:.4rem; }
.xqbase-gview .gv-head-actions .btn { line-height:1.1; }
/* Mọi nút trên header (PGN/RTF/Sửa/Danh mục) cùng kiểu ghost trắng — hết loạn màu */
.xqbase-gview .gv-head-actions .btn {
    background:rgba(255,255,255,.14) !important; border:1px solid rgba(255,255,255,.55) !important;
    color:#fff !important; border-radius:8px; font-weight:600;
}
.xqbase-gview .gv-head-actions .btn:hover { background:rgba(255,255,255,.30) !important; color:#fff !important; }
/* Ép full width, vượt ràng buộc bootstrap/template (giống #xq-fen-current bên editor) */
.xqbase-gview #gv-fen-current { width:100% !important; max-width:100% !important; box-sizing:border-box !important; display:block !important; font-family:monospace; font-size:12px; }
/* Hàng FEN gọn 1 dòng + nút copy */
.xqbase-gview .gv-fen-row { display:flex; align-items:center; gap:.4rem; margin-top:.5rem; }
.xqbase-gview .gv-fen-row .gv-fen-lb { font-size:.75rem; font-weight:700; color:#6b7280; letter-spacing:.04em; flex:0 0 auto; }
.xqbase-gview .gv-fen-row input { flex:1 1 auto; }
.xqbase-gview .gv-fen-copy { flex:0 0 auto; border:1px solid #d9dee4; background:#fff; border-radius:7px; padding:.25rem .5rem; cursor:pointer; line-height:1.2; }
.xqbase-gview .gv-fen-copy:hover { border-color:var(--xq-blue); }
/* Match card: 2 kỳ thủ 2 bên + badge kết quả ở giữa */
.xqbase-gview .gv-mcard { display:flex; align-items:center; gap:.6rem; background:#f7f9fb; border:1px solid #e3e7ec; border-radius:10px; padding:.45rem .7rem; margin-bottom:.45rem; }
.xqbase-gview .gv-mside { flex:1 1 0; min-width:0; }
.xqbase-gview .gv-mside.gv-mright { text-align:right; }
.xqbase-gview .gv-mname { font-weight:700; font-size:.98rem; line-height:1.25; display:flex; align-items:center; gap:.35rem; }
.xqbase-gview .gv-mright .gv-mname { justify-content:flex-end; }
.xqbase-gview .gv-dot { width:10px; height:10px; border-radius:50%; flex:0 0 auto; }
.xqbase-gview .gv-dot-r { background:#c0392b; }
.xqbase-gview .gv-dot-b { background:#2f3337; }
.xqbase-gview .gv-msub { font-size:.78rem; color:#6b7280; }
/* Dòng tên quốc tế + đội tiếng Anh: nhỏ và nghiêng để không cạnh tranh với tên chính */
.xqbase-gview .gv-msub-en { font-size:.72rem; font-style:italic; color:#98a1af; line-height:1.3; }
.xqbase-gview .gv-mres { flex:0 0 auto; font-weight:800; font-size:.95rem; padding:.25rem .6rem; border-radius:8px; background:#e5e7eb; color:#374151; white-space:nowrap; }
.xqbase-gview .gv-mres-w { background:#fdecea; color:#c0392b; }
.xqbase-gview .gv-mres-b { background:#e8eaed; color:#1f2937; }
.xqbase-gview .gv-mres-d { background:#eef2f7; color:#5b6470; }
/* Hộp chọn navigator: bo góc + focus ring xanh */
.xqbase-gview .gv-nav input.form-control { border-radius:8px; border-color:#d9dee4; }
.xqbase-gview .gv-nav input.form-control:focus { border-color:var(--xq-blue); box-shadow:0 0 0 3px rgba(0,120,212,.15); }
/* Toàn màn hình — phủ trọn viewport, vượt ra ngoài khung template */
.xqbase-gview.gv-fullscreen { position:fixed; inset:0; z-index:99999; background:#eef1f5; margin:0; padding:10px 14px; overflow:auto; border-radius:0; }
.xqbase-gview.gv-fullscreen .xq-edit-split { min-height:calc(100vh - 20px); }
/* Navigator: 3 hộp chọn thông minh (Giải · Kỳ thủ · Ván) — HÀNG TRÊN CÙNG của view, cùng 1 row */
.xqbase-gview .gv-nav { display:flex; flex-wrap:wrap; gap:.6rem; margin-bottom:.55rem; }
.xqbase-gview .gv-nav .gv-field { position:relative; flex:1 1 220px; min-width:0; }
/* v3.39: ô Giải hiện "Vòng con / Giải cha" nên cần rộng hơn — lấy chỗ TỪ Ô KỲ THỦ
   (tên kỳ thủ ngắn). Ô Ván GHIM đúng 1/3 như cũ (gap .6rem × 2 = 1.2rem) để không
   bị kéo theo. Thứ tự trong markup: 1=Giải, 2=Kỳ thủ, 3=Ván. */
.xqbase-gview .gv-nav .gv-field:nth-child(1) { flex:2 1 300px; }
.xqbase-gview .gv-nav .gv-field:nth-child(2) { flex:1 1 170px; }
.xqbase-gview .gv-nav .gv-field:nth-child(3) { flex:0 0 calc((100% - 1.2rem) / 3); }
@media (max-width:760px) {   /* xuống hàng thì trả về đều nhau */
    .xqbase-gview .gv-nav .gv-field:nth-child(1),
    .xqbase-gview .gv-nav .gv-field:nth-child(2),
    .xqbase-gview .gv-nav .gv-field:nth-child(3) { flex:1 1 220px; }
}
.xqbase-gview .gv-nav label { font-size:.78rem; font-weight:600; color:#555; margin-bottom:.1rem; display:block; }
/* Ép full-width, bỏ qua ràng buộc bootstrap của template; chừa chỗ cho nút ▾ */
.xqbase-gview .gv-nav input.form-control { width:100% !important; max-width:100% !important; box-sizing:border-box !important; display:block !important; padding-right:26px !important; }
/* Thanh chuyển ván cùng trận (ván chính ↔ chớp ↔ armageddon) */
.xqbase-gview .gv-match { display:flex; flex-wrap:wrap; align-items:center; gap:.4rem; margin-bottom:.55rem; padding:.35rem .5rem; background:#fff7e6; border:1px solid #f1c96b; border-radius:6px; }
.xqbase-gview .gv-match-lb { font-size:.8rem; font-weight:600; color:#7c2d12; }
.xqbase-gview .gv-match a { font-size:.82rem; text-decoration:none; padding:.15rem .5rem; border:1px solid #e0c48a; border-radius:5px; background:#fff; color:#333; }
.xqbase-gview .gv-match a:hover { background:#fde68a; }
.xqbase-gview .gv-match a.on { background:#7c2d12; border-color:#7c2d12; color:#fff; font-weight:600; }
/* Nút xổ danh sách (▾) — bấm là thấy toàn bộ, không cần gõ */
.xqbase-gview .gv-caret { position:absolute; right:1px; bottom:1px; width:24px; height:calc(100% - 22px); border:0; background:transparent; color:#666; cursor:pointer; font-size:.7rem; line-height:1; padding:0; }
.xqbase-gview .gv-caret:hover { color:#0a58ca; }
/* Nhúng trong bài viết: ô Giải đấu khoá cứng — chỉ để xem, không đổi được giải */
.xqbase-gview .gv-field input.gv-locked { background:#eef1f4; color:#444; cursor:default; }
/* Máy cảm ứng: ô chỉ để CHỌN, không gõ (JS đặt readonly) — con trỏ hình bàn tay cho
   biết bấm được, và chừa chỗ phải để chữ không chui xuống dưới mũi tên ▼ */
.xqbase-gview .gv-field input.gv-pick-only { cursor:pointer; padding-right:26px; }
/* Dropdown NỔI (position:fixed) — thoát khỏi overflow:hidden của khung, không bị cắt */
.xqbase-gview .gv-ac-list { position:fixed; z-index:2000; background:#fff; border:1px solid var(--xq-border); border-radius:6px; box-shadow:0 10px 30px rgba(0,0,0,.22); max-height:280px; overflow-y:auto; display:none; }
.xqbase-gview .gv-ac-item { padding:.35rem .55rem; cursor:pointer; border-bottom:1px solid #f0f2f5; font-size:.86rem; }
.xqbase-gview .gv-ac-item:hover, .xqbase-gview .gv-ac-item.hi { background:#e8f0fe; }
.xqbase-gview .gv-ac-item small { color:#777; }
.xqbase-gview .gv-ac-item .kq { font-weight:700; color:#0a58ca; margin:0 .25rem; }
.xqbase-gview .gv-ac-empty { padding:.4rem .55rem; color:#999; font-size:.85rem; }
/* Máy cảm ứng: danh sách cao hơn (đỡ phải cuộn), mỗi dòng cao hơn cho vừa đầu ngón tay,
   và thanh cuộn to hẳn ra — thanh mặc định mảnh như sợi chỉ, không kéo trúng. */
@media (pointer: coarse) {
    .xqbase-gview .gv-ac-list { max-height:60vh; -webkit-overflow-scrolling:touch; scrollbar-width:auto; }
    .xqbase-gview .gv-ac-item { padding:.7rem .6rem; font-size:.95rem; line-height:1.35; }
    .xqbase-gview .gv-ac-list::-webkit-scrollbar { width:14px; }
    .xqbase-gview .gv-ac-list::-webkit-scrollbar-thumb { background:#9aa3ad; border-radius:7px; border:3px solid #fff; }
    .xqbase-gview .gv-ac-list::-webkit-scrollbar-track { background:#f1f3f5; }
    /* Ô chọn cũng cao hơn cho dễ chạm */
    .xqbase-gview .gv-field input.gv-pick-only { min-height:40px; }
}
/* Menu chuột phải chọn màu bàn cờ */
/* Toast báo kết quả chụp ảnh bàn cờ */
.gv-toast { position:fixed; left:50%; bottom:24px; transform:translateX(-50%) translateY(8px); z-index:3000; background:#1b1b1b; color:#fff; padding:.5rem .9rem; border-radius:8px; font-size:.9rem; box-shadow:0 8px 26px rgba(0,0,0,.3); opacity:0; pointer-events:none; transition:opacity .18s, transform .18s; }
.gv-toast.on { opacity:1; transform:translateX(-50%) translateY(0); }
.gv-toast.err { background:#b42318; }
.gv-ctxmenu { position:fixed; z-index:1060; background:#fff; border:1px solid #cfd4da; border-radius:6px; box-shadow:0 6px 24px rgba(0,0,0,.18); padding:.25rem 0; min-width:190px; display:none; font-size:14px; }
.gv-ctxmenu.on { display:block; }
.gv-ctxmenu .gv-ctx-h { padding:.25rem .9rem; font-size:.72rem; text-transform:uppercase; color:#8a9099; letter-spacing:.03em; }
.gv-ctxmenu button { display:flex; width:100%; gap:.5rem; align-items:center; background:none; border:0; text-align:left; padding:.35rem .9rem; cursor:pointer; color:#1b1b1b; }
.gv-ctxmenu button:hover { background:#e8f0fe; }
.gv-ctxmenu button.sel { font-weight:700; }
.gv-ctxmenu .gv-ctx-sep { height:1px; background:#e5e7eb; margin:.25rem 0; }
/* Panel xuất: 3 nhóm chọn (phạm vi / kiểu chữ / ký hiệu) + nút xuất */
.gv-exportpanel { min-width:250px; padding-bottom:.3rem; }
/* Panel "Xuất" gộp: khung PGN và khung RTF nằm cạnh nhau, mỗi khung một cột */
.gv-exportwrap { gap:.2rem; min-width:520px; }
/* CHỈ hiện khi menu được mở — nếu để display:flex trần thì nó đè mất display:none
   của .gv-ctxmenu và panel nằm chình ình dưới trang. */
.gv-ctxmenu.gv-exportwrap.on { display:flex; }
.gv-exportwrap .gv-exp-col { flex:1 1 0; min-width:250px; }
.gv-exportwrap .gv-exp-col + .gv-exp-col { border-left:1px solid #e6e9ee; }
@media (max-width:640px) { .gv-exportwrap { flex-direction:column; min-width:250px; } .gv-exportwrap .gv-exp-col + .gv-exp-col { border-left:0; border-top:1px solid #e6e9ee; } }
.gv-exportpanel .gv-exp-row { display:flex; align-items:center; gap:.35rem; padding:.22rem .7rem; }
.gv-exportpanel .gv-exp-row > span { font-size:.8rem; color:#666; flex:0 0 62px; }
.gv-exportpanel .gv-exp-row button { flex:1 1 0; width:auto; justify-content:center; padding:.28rem .3rem; border:1px solid #cfd4da; background:#f4f6f8; border-radius:5px; cursor:pointer; font-size:.85rem; color:#1b1b1b; }
.gv-exportpanel .gv-exp-row button.on { background:var(--xq-blue); color:#fff; border-color:var(--xq-blue); }
.gv-exportpanel .gv-exp-go { padding:.45rem .7rem .1rem; }
.gv-exportpanel .gv-exp-go button { width:100%; justify-content:center; padding:.42rem; border:0; border-radius:6px; background:#1a7f37; color:#fff; font-weight:600; cursor:pointer; }
.gv-exportpanel .gv-exp-go button:hover { background:#15682d; }
@media (max-width: 820px) {
    /* Xếp dọc thì trục ngang là trục phụ → phải stretch, không thì 2 khung co lại
       bằng bề rộng nội dung (align-items:flex-start của bản PC) */
    .xqbase-gview .xq-edit-split { flex-direction:column; align-items:stretch; }
    .xqbase-gview .xq-pane-board { width:auto !important; }
    .xqbase-gview .xq-splitbar { display:none; }

    /* Điện thoại: bàn cờ GHIM ở khung trên, phần dưới (biên bản + phân tích) vuốt
       tự do tới cuối. Bỏ thanh cuộn RIÊNG của khung biên bản để cả trang chỉ còn
       MỘT vùng cuộn — cuộn lồng nhau trên cảm ứng rất khó trúng. */
    .xqbase-gview .xq-pane-board { top:0; border-radius:0 0 12px 12px; box-shadow:0 6px 14px rgba(16,24,40,.14); }
    .xqbase-gview .xq-notation-flow { max-height:none; overflow:visible; }

    /* Bàn cờ ăn HẾT bề ngang máy: lề của template site (~26px) + lề component (~13px)
       ăn mất 44px trên máy 390px — đo thật. Kéo riêng khung bàn cờ ra sát mép bằng
       thủ thuật full-bleed (rộng đúng 100vw, lùi ra bằng nửa hiệu bề rộng), không
       đụng tới lề của khung biên bản (chữ sát mép rất khó đọc). */
    .xqbase-gview .xq-pane-board {
        width:100vw !important; max-width:100vw;
        margin-left:calc(50% - 50vw); margin-right:calc(50% - 50vw);
        border-left:0; border-right:0; border-radius:0 0 12px 12px;
    }
    .xqbase-gview .xq-pane-board .xq-pane-body { padding:.15rem .1rem .4rem; }

    /* Ngón tay cần chỗ bấm: mọi nút trên thanh tiêu đề cao tối thiểu 36px và
       xếp đều thành hàng, thay vì nhóm này dạt trái nhóm kia dạt phải. */
    .xqbase-gview .xq-pane-head { flex-wrap:wrap; gap:.35rem; padding:.45rem .5rem; justify-content:flex-start; }
    .xqbase-gview .gv-head-actions { margin-left:0; flex-wrap:wrap; gap:.35rem; }
    .xqbase-gview .gv-tab,
    .xqbase-gview .gv-head-actions .btn,
    .xqbase-gview .gv-head-actions a.btn {
        min-height:36px; padding:.4rem .85rem; font-size:.9rem; border-radius:999px;
        display:inline-flex; align-items:center; justify-content:center;
    }
    /* Ô FEN + nút chép cũng phải bấm được bằng ngón tay */
    .xqbase-gview .gv-fen-row input { height:36px; }
    .xqbase-gview .gv-fen-copy { min-width:40px; height:36px; }
    /* Bảng chọn trong menu Xuất: nút to hơn cho dễ trúng */
    .gv-exportpanel .gv-exp-row button { min-height:36px; }
    .gv-exportpanel .gv-exp-go button { min-height:40px; }
    .xqbase-gview .gv-caret { min-height:36px; }

    /* Màn hình hẹp thì lề trang là thứ xa xỉ — thu lại để bàn cờ to ra */
    .xqbase-gview { padding:.4rem; }
    .xqbase-gview .xq-pane-body { padding:.4rem; }
}
/* Banner tiêu đề (đồng bộ với Explorer): gradient cyan → xanh milky way, chữ trắng */
.xqbase-gview .xq-banner {
    display:flex; align-items:center; gap:1rem; flex-wrap:wrap;
    background:
        radial-gradient(1.5px 1.5px at 30% 30%, rgba(255,255,255,.8), transparent),
        radial-gradient(1px 1px at 48% 65%, rgba(255,255,255,.6), transparent),
        radial-gradient(1.5px 1.5px at 62% 25%, rgba(255,255,255,.85), transparent),
        radial-gradient(1px 1px at 78% 60%, rgba(255,255,255,.7), transparent),
        radial-gradient(1px 1px at 90% 35%, rgba(255,255,255,.9), transparent),
        linear-gradient(90deg, #22d3ee 0%, #0e7fb0 25%, #1c3a7a 60%, #101b3f 100%);
    color:#fff; padding:.7rem 1.2rem; border-radius:8px; margin-bottom:.7rem;
    text-shadow:0 1px 3px rgba(0,0,0,.35);
}
.xqbase-gview .xq-banner .xq-banner-logo {
    width:48px; height:48px; border-radius:50%; align-self:center; flex-shrink:0;
    box-shadow:0 2px 6px rgba(0,0,0,.35);
}
.xqbase-gview .xq-banner .xq-banner-title { font-weight:800; font-size:1.3rem; letter-spacing:.03em; }
.xqbase-gview .xq-banner .xq-banner-author { margin-left:auto; font-weight:700; font-style:italic; color:#fff; text-align:right; font-size:.95rem; }
.xqbase-gview .xq-banner .xq-banner-home { display:flex; align-items:center; gap:1rem; color:#fff!important; text-decoration:none!important; }
.xqbase-gview .xq-banner .xq-banner-home:hover { opacity:.88; }
@media (max-width:640px) { .xqbase-gview .xq-banner .xq-banner-title { font-size:1.02rem; } }
/* Trong chế độ toàn màn hình thì ẩn banner cho gọn */
.xqbase-gview.gv-fullscreen .xq-banner { display:none; }