/*
  Game viewer (Ván đấu)
  - Center the title block above the board (like annotated screenshot)
  - Remove border/background around the title block
  - Keep "Ván cờ trong giải" as a separate xq-box below

  TEMPLATE_VERSION: games-viewer-css-2026-01-29
*/

/* ===== Center the whole viewer inside xq-box-body ===== */
.xq-game-viewer-center{
  display:flex;
  justify-content:center;
  overflow-x:auto;
}

/* Make viewer shrink-to-fit so header aligns with the board block */
#zvanco-viewer{
  display:inline-block;
  box-sizing:border-box;
}

/* Stage wraps: toolbar (title) + board layout + bottom controls (moved by JS) */
#zvanco-viewer .zvanco-stage{
  display:flex;
  flex-direction:column;
  align-items:stretch;
}

/* ===== Title block (remove border + center) ===== */
#zvanco-viewer .zvanco-toolbar{
  background:transparent !important;
  border:0 !important;
  border-radius:0 !important;
  padding:0 !important;

  /* Toolbar phủ theo full width của viewer (board + steps + comment).
     Riêng .zvanco-head bên dưới sẽ "ghim" theo bề rộng bàn cờ (cột trái),
     giúp tiêu đề nằm đúng giữa bàn cờ (không bị lệch theo panel bên phải). */
  width:100% !important;
  max-width:100% !important;
  margin:0 0 10px 0 !important;
  position:relative;
}

#zvanco-viewer .zvanco-head{
  /* Khung title bám theo bề rộng bàn cờ (cột trái) để canh giữa đúng. */
  width:451px !important;
  max-width:100% !important;
  margin:0 !important; /* không auto => không bị lệch theo panel bên phải */
  text-align:center;
}

/* Inner title lines: theo đúng bề rộng .zvanco-head */
#zvanco-viewer .zvanco-head .title,
#zvanco-viewer .zvanco-head .title-center,
#zvanco-viewer .zvanco-head .sub{
  width:100% !important;
  max-width:100% !important;
  margin-left:0 !important;
  margin-right:0 !important;
  box-sizing:border-box;
}


#zvanco-viewer .zvanco-head .back-inbar{
  display:block;
  text-align:left;
  margin:0 0 4px;
  font-weight:400;
}

/* In đậm tên kỳ thủ + kết quả (theo yêu cầu) */
#zvanco-viewer .zvanco-head .title-center,
#zvanco-viewer .zvanco-head .title-center a{
  font-weight:700;
}
#zvanco-viewer .zvanco-head .title-mid{
  font-weight:800;
}

#zvanco-viewer .zvanco-head .sub{
  color:#666;
  font-size:13px;
  margin:6px 0 0;
  text-align:center;
}

/* ===== Board layout (board + movelist + comment) ===== */
#zvanco-viewer .zvanco-layout{
  display:flex;
  gap:0;
  align-items:flex-start;
  flex-wrap:wrap;
}

#zvanco-viewer .zvanco-left{flex:0 0 auto;margin:0;padding:0;}

/* app-board.css sets .board-main {width:100%}; override to avoid stretching */
#zvanco-viewer .board-main{border:0;width:auto !important;}

#zvanco-viewer table.board{border-collapse:collapse;border-spacing:0;margin:0;}
#zvanco-viewer table.board td{padding:0;}

/* Movelist panel (narrow, scrollable) */
#zvanco-viewer .zvanco-steps{
  flex:0 0 110px;
  max-height:500px;
  overflow:auto;
  background:#f7e7c5;

  margin-left:-1px;
  border-left:1px solid #d7b27a;
  border-top:1px solid #d7b27a;
  border-bottom:1px solid #d7b27a;
  border-right:0;
  border-radius:0;
}

#zvanco-viewer .zvanco-steps table{width:100%;border-collapse:collapse;font-size:13px;}
#zvanco-viewer .zvanco-steps td{padding:4px 6px;border-bottom:1px solid rgba(0,0,0,.06);vertical-align:middle;white-space:nowrap;}
#zvanco-viewer .zvanco-steps tr td:first-child{width:22px;min-width:22px;text-align:right;padding-right:4px !important;padding-left:0 !important;}
#zvanco-viewer .zvanco-steps tr td:nth-child(2){padding-left:4px !important;}
#zvanco-viewer .zvanco-steps tr.active{background:rgba(255,255,255,.35);}
#zvanco-viewer .zvanco-steps tr.mv-red td:nth-child(2){color:#b30000;}
#zvanco-viewer .zvanco-steps tr.mv-black td:nth-child(2){color:#111;}

/* Comment panel */
#zvanco-viewer .zvanco-comment{
  /* Theo chú thích ảnh: panel comment giữ width 200px (không phải 260px để tránh vỡ khung) */
  flex:0 0 200px;
  width:200px;
  min-width:200px;
  max-width:200px;

  border:1px solid #d7b27a;
  border-radius:0;
  background:#f7e7c5;
  padding:10px;
  min-height:140px;
}

/* Tách các box (tránh bị "dính" với nhau như ảnh chú thích) */
.game-viewer-box{margin-bottom:16px;}
.game-related-box{margin-top:16px;margin-bottom:16px;}

#divComment{white-space:pre-wrap;line-height:1.5;max-height:500px;overflow:auto;}

/* ===== Bottom controls (JS relocates .buttons + .play-step here) ===== */
#zvanco-viewer .zvanco-controls-bottom{
  /* Theo yêu cầu mới: controls bottom chạy theo full width của viewer
     (board 451 + steps + comment ≈ 760px) */
  width:760px;
  max-width:760px;
  margin:8px 0 0;
  position:relative;
  z-index:99999;
}

#zvanco-viewer .zvanco-controls-bottom .buttons{
  width:560px;
  max-width:560px;
  margin:0;

  display:flex;
  flex-wrap:nowrap;
  gap:8px;
  align-items:center;
  justify-content:center;

  position:relative;
}

#zvanco-viewer .zvanco-controls-bottom .buttons button,
#zvanco-viewer .zvanco-controls-bottom .buttons input.play{
  padding:7px 10px;
  border:1px solid #c9b27a;
  background:#fff6dd;
  border-radius:0px;
  cursor:pointer;
  font-size:13px;
  line-height:1;
}

#zvanco-viewer .zvanco-controls-bottom .buttons button:hover,
#zvanco-viewer .zvanco-controls-bottom .buttons input.play:hover{background:#ffefc6;}

#zvanco-viewer .zvanco-controls-bottom .buttons .sep{
  display:inline-block;
  width:1px;
  height:22px;
  background:#d7c08c;
  margin:0 4px;
}

#zvanco-viewer .zvanco-controls-bottom .buttons select{
  padding:6px 8px;
  border:1px solid #c9b27a;
  border-radius:8px;
  background:#fff;
}

/* Speed dropdown (ul.play-step) – default hidden; JS sets inline display:block */
#zvanco-viewer .zvanco-controls-bottom ul.play-step{
  display:none;
  position:absolute;
  left:50%;
  transform:translateX(-50%);
  /* Mặc định mở lên trên để không "đẩy" khung xuống dưới */
  top:auto;
  bottom:calc(100% + 6px);

  width:50px;
  box-sizing:border-box;
  margin:0;
  padding:8px;
  list-style:none;

  background:#fff;
  border:1px solid #c9b27a;
  border-radius:0px;
  box-shadow:0 10px 26px rgba(0,0,0,.16);
  overflow:hidden;
  z-index:99999;
}

#zvanco-viewer .zvanco-controls-bottom ul.play-step[style*="display:block"],
#zvanco-viewer .zvanco-controls-bottom ul.play-step[style*="display: block"]{display:block;}

#zvanco-viewer .zvanco-controls-bottom ul.play-step > li{
  display:block;
  width:100%;
  box-sizing:border-box;
  margin:0;
  padding:7px 0;
  text-align:center;
  cursor:pointer;
  user-select:none;
  font-size:13px;
  line-height:1.2;
  color:#222;
}

#zvanco-viewer .zvanco-controls-bottom ul.play-step > li:hover{background:#ffefc6;}

/* Error message */
#zvanco-error{display:none;color:#b00020;margin:8px 0;}

.game-no-dxq{color:#b00020;margin:8px 0;}

/* ===== Responsive ===== */
@media (max-width: 900px){
  #zvanco-viewer .zvanco-steps{flex:1 1 240px;max-width:100%;border-radius:8px;}
  #zvanco-viewer .zvanco-comment{flex:1 1 100%;width:auto;max-width:100%;}
  #zvanco-viewer .zvanco-controls-bottom{width:300px;max-width:300px;}
  #zvanco-viewer .zvanco-controls-bottom .buttons{width:300px;max-width:300px;}
  #zvanco-viewer .zvanco-toolbar{width:300px !important;max-width:300px !important;}
  #zvanco-viewer .zvanco-head{width:300px !important;max-width:300px !important;}
}

/* =========================================================
   "Ván cờ trong giải" list (box below, like "Bài viết cùng chuyên mục")
   ========================================================= */
.xq-related-games{
  list-style:none;
  margin:0;
  padding:0;
}

.xq-related-games li{
  padding:7px 0;
  border-bottom:1px dotted #d7c08c;
}
.xq-related-games li:last-child{border-bottom:0;}

.xq-related-games a{color:var(--xq-link);text-decoration:none;}
.xq-related-games a:hover{text-decoration:underline;}