/* =========================================================
   Custom: Header + FEN piece picker
   ========================================================= */

/* Logo image */
.site-logo{
  height:240px;
  width:auto;
  display:block;
}

/* FEN piece picker (dùng ảnh trong /assets/images/) */
.xq-fen-search .piece-box{
  display:flex;
  flex-direction:column;
  gap:6px;
  align-items:flex-end;
}

.xq-fen-search .row{
  display:flex;
  gap:6px;
  justify-content:flex-end;
}

.xq-fen-search .piece-item img{
  width:40px;
  height:40px;
  image-rendering:auto;
}

/* Demo: quân mờ vừa phải (không bị "mờ" quá do filter) */
.xq-fen-search img.unselected{
  opacity:.58;
  filter:none;
}

.xq-fen-search img.selected{
  opacity:1;
  filter:none;
  outline:2px solid #bfa573;
  border-radius:4px;
}

.xq-fen-search .button-wrap{
  margin-top:4px;
  gap:8px;
}

/* =========================================================
   Custom: Donate QR (optional)
   - Hiển thị ở khoảng trống giữa logo và FEN picker
   - Bật/tắt tại AdminCP -> Giao diện
   ========================================================= */

.xq-header-center{
  flex:1;
  display:flex;
  justify-content:center;
  padding:0 12px;
}

.xq-donate{
  border:1px solid var(--xq-border2);
  background:#fff;
  padding:10px 12px;
  border-radius:8px;
  max-width:380px;
  width:100%;
}

.xq-donate-title{
  font-weight:700;
  font-size:14px;
  color:#847a33;
  text-align:center;
  margin-bottom:8px;
}

.xq-donate-body{
  display:flex;
  gap:10px;
  align-items:flex-start;
}

.xq-donate-body img{
  width:140px;
  height:auto;
  border-radius:8px;
  border:1px solid #e5e5e5;
}

.xq-donate-text{
  font-size:12px;
  line-height:1.45;
  color:#444;
}

@media (max-width: 860px){
  .xq-header-center{ padding:0; }
  .xq-donate{ max-width:100%; }
}