/* ══ Popup xem ván (chỉ dùng trên trang web, file tải về không cần) ══════ */
.xv-ov{
  position:fixed; inset:0; z-index:900; background:rgba(15,23,20,.55);
  display:flex; align-items:center; justify-content:center; padding:16px;
  overflow-y:auto;
}
.xv-box{
  background:#fff; border-radius:16px; padding:16px;
  width:100%; max-width:560px; box-sizing:border-box;
  box-shadow:0 20px 50px rgba(0,0,0,.25);
}
.xv-box-hep{ max-width:440px; }
.xv-top{ display:flex; align-items:center; gap:10px; margin-bottom:12px; }
.xv-tieu{
  flex:1; min-width:0; font-size:15px; font-weight:800; color:#222;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.xv-ico{
  width:32px; height:32px; flex-shrink:0; border:1.5px solid #e5e7eb; border-radius:9px;
  background:#fff; font-size:14px; cursor:pointer; line-height:1;
}
.xv-ico:hover{ border-color:#2d7a4f; background:#f0fdf4; }
.xv-dong{
  width:32px; height:32px; flex-shrink:0; border:1.5px solid #e5e7eb; border-radius:9px;
  background:#fff; color:#6b7280; font-size:14px; font-weight:700; cursor:pointer; line-height:1;
}
.xv-dong:hover{ background:#f8fafb; color:#222; }

/* Trên điện thoại popup rộng hết màn để bàn cờ 19×19 đủ to, nhưng cao vừa
   đúng nội dung — kéo dài xuống hết màn chỉ để lại một vùng trắng trống trơn */
@media (max-width:560px){
  .xv-ov{ padding:10px 8px; align-items:flex-start; }
  .xv-box{ max-width:none; padding:12px; }
}

/* Danh sách ván đấu của tôi */
.vdt-chu{ font-size:12px; color:#9ca3af; margin:0 0 12px; }
.vdt-hang{
  display:flex; align-items:center; gap:10px; width:100%; box-sizing:border-box;
  padding:10px 12px; margin-bottom:8px; cursor:pointer; text-align:left;
  border:1.5px solid #e8ecef; border-radius:12px; background:#fff; font-family:inherit;
}
.vdt-hang:hover{ border-color:#2d7a4f; background:#f0fdf4; }
.vdt-kq{
  width:26px; height:26px; flex-shrink:0; border-radius:8px;
  display:flex; align-items:center; justify-content:center;
  font-size:12px; font-weight:900; color:#fff;
}
.vdt-thang{ background:#16a34a; } .vdt-thua{ background:#dc2626; } .vdt-hoa{ background:#9ca3af; }
.vdt-tt{ flex:1; min-width:0; }
.vdt-ten{ font-size:13.5px; font-weight:700; color:#222;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.vdt-phu{ font-size:11.5px; color:#9ca3af; font-weight:600; }

/* ══ Trình xem lại ván cờ — dùng chung cho trang web và file tải về ══════ */
.xv{ display:flex; flex-direction:column; gap:10px; }

/* Hai người chơi */
.xv-dau{ display:flex; align-items:center; gap:10px; }
.xv-ng{
  flex:1; min-width:0; display:flex; align-items:center; gap:8px;
  background:#f8fafb; border:1.5px solid #e8ecef; border-radius:11px; padding:8px 11px;
}
.xv-ng.xv-thang{ background:#f0fdf4; border-color:#bbf7d0; }
.xv-ten{
  min-width:0; font-size:13.5px; font-weight:700; color:#222;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.xv-elo{ display:block; font-size:11.5px; font-weight:600; color:#9ca3af; }
.xv-vs{ font-size:11px; font-weight:800; color:#c3c8cf; letter-spacing:.06em; flex-shrink:0; }

/* Bàn cờ 19×19 */
.xv-ban{
  display:grid;
  /* Phải khai cả rows: thiếu nó thì hàng nào có quân sẽ cao hơn hàng trống,
     ô vuông biến thành hình chữ nhật và cả bàn cờ méo đi. */
  grid-template-columns:repeat(19,1fr);
  grid-template-rows:repeat(19,1fr);
  background:#fff; border:2px solid #e8ecef; border-radius:12px; overflow:hidden;
  aspect-ratio:1; width:100%;
  container-type:inline-size;   /* de dung don vi cqw cho co quan */
}
.xv-o{
  border:.5px solid rgba(0,0,0,.10);
  display:flex; align-items:center; justify-content:center;
  overflow:hidden;                  /* quân không bao giờ đẩy ô rộng ra */
  min-width:0; min-height:0;
}
.xv-cam{ background:#7b8794; border-color:#8f9aa6!important; }
.xv-moi{ background:rgba(255,200,0,.28); }

/* Hai thanh trượt Viền / Số — giống bàn đấu thật.
   Độ đậm nhạt đi qua hai biến này, JS chỉ việc đổi giá trị. */
.xv-ban{ --dam-vien:rgba(0,0,0,.06); --dam-so:rgba(0,0,0,0); }
.xv-o{ border-color:var(--dam-vien); }
/* Số thứ tự ô, giống bàn đấu thật — chỉ hiện ở ô trống, mờ dần theo thanh trượt */
.xv-so-o{
  font-size:.34em; font-weight:700; line-height:1; pointer-events:none;
  color:var(--dam-so);
}

/* Nước người xem tự đặt để phân tích: mờ và viền nét đứt, không lẫn nước thật */
.xv-q-thu{ opacity:.5; }
.xv-o2.xv-q-thu{ border-style:dashed; }
.xv-x.xv-q-thu::before,.xv-x.xv-q-thu::after{ opacity:.62; }

/* Hàng Viền / Số / số nước thử */
.xv-hienthi{
  display:flex; align-items:center; justify-content:center; gap:14px;
  font-size:12.5px; color:#6b7280; font-weight:600;
}
.xv-chon{ display:inline-flex; align-items:center; gap:6px; }
.xv-chon input[type=range]{
  width:62px; height:4px; margin:0; cursor:pointer;
  accent-color:#2d7a4f;
}
.xv-thu{ color:#c3c8cf; font-weight:700; }
.xv-thu-on{ color:#b45309; }

/* Quân cờ — cùng kiểu với bàn cờ thật: nét đều, đầu bo tròn */
.xv-q{ position:relative; display:inline-block; box-sizing:border-box; }
.xv-o2{
  width:.70em; height:.70em;
  border:.15em solid #16a34a; border-radius:50%;
}
.xv-x{ width:.76em; height:.76em; }
.xv-x::before,.xv-x::after{
  content:''; position:absolute; left:50%; top:50%;
  width:.15em; height:.76em; margin-left:-.075em; margin-top:-.38em;
  background:#dc2626; border-radius:.075em;
}
.xv-x::before{ transform:rotate(45deg); }
.xv-x::after { transform:rotate(-45deg); }
/* Cỡ quân đo theo chiều rộng bàn cờ: 1em = đúng một ô (100/19 ≈ 5.26%).
   Nhân 0.9 để quân luôn nhỏ hơn ô, không bao giờ chạm viền. */
.xv-ban{ --o:5.26cqw; }
.xv-ban .xv-q{ font-size:calc(var(--o) * .9); }
.xv-ng .xv-q{ font-size:17px; flex-shrink:0; }

/* Điều khiển */
.xv-dk{ display:flex; align-items:center; justify-content:center; gap:6px; }
.xv-nut{
  min-width:42px; padding:9px 12px; border:1.5px solid #e5e7eb; border-radius:10px;
  background:#fff; color:#444; font-family:inherit; font-size:17px; font-weight:800;
  line-height:1; cursor:pointer;
}
.xv-nut:hover{ border-color:#2d7a4f; color:#2d7a4f; }
.xv-nut:active{ background:#f0fdf4; }
.xv-dem{
  min-width:74px; text-align:center; font-size:13px; color:#9ca3af; font-weight:700;
  font-variant-numeric:tabular-nums;
}
.xv-dem b{ font-size:17px; color:#2d7a4f; }

/* Chân: kết quả + các nút thêm */
.xv-chan{ display:flex; align-items:center; justify-content:center; }
.xv-kq{ font-size:13px; font-weight:700; color:#555; text-align:center; }
@media (max-width:420px){
  .xv-ten{ font-size:12.5px; }
  .xv-nut{ min-width:38px; padding:8px 9px; font-size:16px; }
  .xv-dem{ min-width:62px; }
}