/* Cờ Vua Số — trang chơi. Mobile-first. Bàn cờ: lưới 64 ô + quân định vị tuyệt đối (transform) */
:root{
  --bg:#f4f1ea; --surface:#fffdf8; --ink:#1f2328; --muted:#6b7078; --line:#e3ddd0;
  --brand:#0f766e; --brand-ink:#fff; --accent:#f59e0b; --danger:#b42318;
  --sq-l:#eeeed2; --sq-d:#769656; --sq-last:rgba(255,214,10,.42); --sq-sel:rgba(20,85,30,.5);
  --dot:rgba(20,30,20,.28); --chk:radial-gradient(circle,#ff3b30 0,#ff3b30aa 30%,transparent 72%);
  --radius:14px; --shadow:0 1px 2px rgba(0,0,0,.06),0 6px 24px rgba(0,0,0,.06);
  --gutter:8px;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){--bg:#161a1d;--surface:#1e2327;--ink:#e8eaed;--muted:#9aa0a6;--line:#2c3237}
}
:root[data-theme="dark"]{--bg:#161a1d;--surface:#1e2327;--ink:#e8eaed;--muted:#9aa0a6;--line:#2c3237}
[data-board="brown"]{--sq-l:#f0d9b5;--sq-d:#b58863;--sq-sel:rgba(20,85,30,.45)}
[data-board="blue"]{--sq-l:#dee3e6;--sq-d:#8ca2ad;--sq-sel:rgba(20,60,120,.45)}

*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{margin:0}
body{background:var(--bg);color:var(--ink);font:15px/1.5 "Be Vietnam Pro",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  -webkit-tap-highlight-color:transparent;padding-bottom:env(safe-area-inset-bottom)}
a{color:inherit}
button{font:inherit;color:inherit}

/* ---- Thanh trên: gọn, không chiếm chỗ bàn cờ ---- */
.cv-top{position:sticky;top:0;z-index:30;display:flex;align-items:center;gap:10px;height:48px;
  padding:0 max(var(--gutter),env(safe-area-inset-left)) 0 max(12px,env(safe-area-inset-left));
  padding-top:env(safe-area-inset-top);height:calc(48px + env(safe-area-inset-top));
  background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:saturate(1.4) blur(10px);-webkit-backdrop-filter:saturate(1.4) blur(10px);
  border-bottom:1px solid var(--line)}
.cv-logo{display:flex;align-items:center;gap:8px;text-decoration:none;font-weight:700;font-size:17px;letter-spacing:-.01em;white-space:nowrap}
.cv-logo i{display:grid;place-items:center;width:30px;height:30px;border-radius:9px;background:var(--brand);color:#fff;font-style:normal;font-size:19px;line-height:1}
.cv-nav{display:none;gap:4px;margin-left:10px}
.cv-nav a{padding:6px 10px;border-radius:8px;text-decoration:none;color:var(--muted);font-weight:600;font-size:14px}
.cv-nav a:hover,.cv-nav a[aria-current]{color:var(--ink);background:var(--surface)}
.cv-top-r{margin-left:auto;display:flex;align-items:center;gap:6px}
.cv-lang{display:inline-flex;border:1px solid var(--line);border-radius:8px;overflow:hidden;font-size:12px;font-weight:700}
.cv-lang a,.cv-lang span{padding:4px 8px;text-decoration:none}
.cv-lang span{background:var(--ink);color:var(--bg)}
.cv-icon-btn{display:inline-grid;place-items:center;min-width:36px;height:36px;border:0;background:transparent;border-radius:10px;cursor:pointer;font-size:13px;font-weight:600;padding:0 8px;gap:2px}
.cv-icon-btn:hover{background:var(--surface)}
.cv-icon-btn svg{width:20px;height:20px}
@media (min-width:760px){.cv-nav{display:flex}}

/* ---- Bố cục trang chơi ---- */
.cv-play{max-width:1180px;margin:0 auto;padding:6px var(--gutter) 24px}
.cv-h1{font-size:13px;font-weight:600;color:var(--muted);margin:2px 2px 6px;line-height:1.35}
.cv-stage{display:grid;gap:10px}
@media (min-width:960px){
  .cv-play{padding-top:16px}
  .cv-stage{grid-template-columns:minmax(0,1fr) 360px;align-items:start;gap:24px}
  .cv-h1{font-size:14px}
}
.cv-game{--bw:min(calc(100vw - 2*var(--gutter)), calc(100svh - 48px - 150px - env(safe-area-inset-top) - env(safe-area-inset-bottom)), 720px);
  width:max(var(--bw), 280px);margin:0 auto}
@media (min-width:960px){.cv-game{--bw:min(calc(100vh - 170px), 720px, calc(100vw - 420px))}}

/* Thanh người chơi */
.cv-pl{display:flex;align-items:center;gap:8px;height:40px;padding:0 2px}
.cv-av{width:30px;height:30px;border-radius:8px;display:grid;place-items:center;background:var(--surface);border:1px solid var(--line);font-size:17px;flex:none}
.cv-pl-name{font-weight:700;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cv-pl-sub{font-size:12px;color:var(--muted);font-weight:500;margin-left:4px}
.cv-capt{display:flex;align-items:center;min-width:0;overflow:hidden;height:18px;margin-left:2px}
.cv-capt .pc{position:static;width:16px;height:16px;margin-right:-5px;transform:none!important;flex:none}
.cv-capt b{font-size:12px;color:var(--muted);margin-left:8px;font-weight:600}
.cv-clock{margin-left:auto;font:700 18px/1 ui-monospace,"SF Mono",Menlo,Consolas,monospace;padding:6px 10px;border-radius:8px;background:var(--surface);border:1px solid var(--line);min-width:74px;text-align:right;font-variant-numeric:tabular-nums}
.cv-clock[hidden]{display:none}
.cv-clock.on{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.cv-clock.low{background:var(--danger);border-color:var(--danger);color:#fff}
.cv-think{display:none;gap:3px;margin-left:6px}
.cv-think.on{display:inline-flex}
.cv-think i{width:5px;height:5px;border-radius:50%;background:var(--muted);animation:cvDot 1s infinite}
.cv-think i:nth-child(2){animation-delay:.15s}.cv-think i:nth-child(3){animation-delay:.3s}
@keyframes cvDot{0%,80%,100%{opacity:.25}40%{opacity:1}}

/* ---- Bàn cờ ---- */
.cv-board-wrap{position:relative;width:var(--bw);max-width:100%;aspect-ratio:1;margin:0 auto;border-radius:6px;overflow:hidden;box-shadow:var(--shadow);touch-action:none;user-select:none;-webkit-user-select:none}
.cv-board{position:absolute;inset:0;display:grid;grid-template-columns:repeat(8,1fr);grid-template-rows:repeat(8,1fr)}
.sq{position:relative;background:var(--sq-l)}
.sq.d{background:var(--sq-d)}
.sq.last::before,.sq.sel::before,.sq.hov::before{content:"";position:absolute;inset:0}
.sq.last::before{background:var(--sq-last)}
.sq.sel::before{background:var(--sq-sel)}
.sq.hov::before{box-shadow:inset 0 0 0 4px rgba(255,255,255,.75)}
.sq.chk{background-image:var(--chk)}
.sq.mv::after{content:"";position:absolute;left:50%;top:50%;width:30%;height:30%;margin:-15% 0 0 -15%;border-radius:50%;background:var(--dot)}
.sq.cap::after{content:"";position:absolute;inset:0;border-radius:50%;box-shadow:inset 0 0 0 calc(var(--bw)/8*.085) var(--dot)}
.sq .co{position:absolute;font-size:max(9px,calc(var(--bw)/8*.17));font-weight:700;line-height:1;pointer-events:none}
.sq .co.r{left:3%;top:3%}
.sq .co.f{right:4%;bottom:3%}
.sq .co{color:var(--sq-d)} .sq.d .co{color:var(--sq-l)}
.cv-nocoord .sq .co{display:none}
.cv-pieces{position:absolute;inset:0;pointer-events:none}
.pc{position:absolute;left:0;top:0;width:12.5%;height:12.5%;background-size:cover;will-change:transform;
  transform:translate(calc(var(--x)*100%),calc(var(--y)*100%));transition:transform .16s cubic-bezier(.2,.7,.3,1)}
.pc.drag{transition:none;z-index:5;transform:var(--dt);filter:drop-shadow(0 6px 8px rgba(0,0,0,.35))}
.pc.fade{opacity:0;transition:opacity .12s}
.cv-noanim .pc{transition:none}
@media (prefers-reduced-motion:reduce){.pc{transition:none}}
.cv-arrows{position:absolute;inset:0;pointer-events:none;z-index:4}

/* Chọn phong cấp */
.cv-promo{position:absolute;inset:0;background:rgba(0,0,0,.45);z-index:10;display:flex}
.cv-promo[hidden]{display:none}
.cv-promo-col{position:absolute;width:12.5%;display:flex;flex-direction:column;background:var(--surface);border-radius:6px;box-shadow:0 8px 30px rgba(0,0,0,.4);overflow:hidden}
.cv-promo-col button{position:relative;aspect-ratio:1;border:0;background:transparent;cursor:pointer;padding:0}
.cv-promo-col button:hover{background:var(--line)}
.cv-promo-col .pc{position:absolute;inset:0;width:100%;height:100%;transform:none}

/* Thanh đánh giá (xem lại) — nằm ngang dưới bàn, không đè lên quân */
.cv-evalbar{height:8px;border-radius:4px;background:#3c3c3c;overflow:hidden;margin:6px 2px 0;display:none;position:relative}
.cv-evalbar i{position:absolute;left:0;top:0;bottom:0;background:#f2f2f2;transition:width .3s}
.cv-review-on .cv-evalbar{display:block}
.cv-game .cv-rv-note{margin:6px 0 0}

/* ---- Bảng điều khiển ---- */
.cv-panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden}
.cv-sec{padding:12px}
.cv-sec + .cv-sec{border-top:1px solid var(--line)}
.cv-label{font-size:12px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.04em;margin:0 0 6px}
.cv-chips{display:flex;flex-wrap:wrap;gap:6px}
.cv-chip{flex:1 1 auto;min-height:40px;padding:6px 10px;border-radius:10px;border:1.5px solid var(--line);background:var(--bg);cursor:pointer;font-weight:600;font-size:14px;white-space:nowrap}
.cv-chip[aria-pressed="true"]{border-color:var(--brand);background:color-mix(in srgb,var(--brand) 12%,var(--surface));color:var(--ink)}
.cv-chip small{display:block;font-weight:500;font-size:11px;color:var(--muted);line-height:1.2}
.cv-tabs{display:flex;gap:4px;padding:4px;background:var(--bg);border-radius:12px}
.cv-tabs .cv-chip{border:0;background:transparent;min-height:36px}
.cv-tabs .cv-chip[aria-pressed="true"]{background:var(--surface);box-shadow:0 1px 3px rgba(0,0,0,.12)}
.cv-go{display:block;width:100%;min-height:52px;border:0;border-radius:12px;background:var(--brand);color:var(--brand-ink);font-weight:800;font-size:17px;letter-spacing:.02em;cursor:pointer;box-shadow:0 4px 14px color-mix(in srgb,var(--brand) 40%,transparent)}
.cv-go:active{transform:translateY(1px)}
.cv-row{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.cv-hint{font-size:12.5px;color:var(--muted);margin:8px 0 0}

@media (max-width:959px){
  .cv-sec{padding:10px}
  .cv-chips{flex-wrap:nowrap;gap:5px}
  .cv-chip{min-height:38px;padding:4px 4px;font-size:13px;flex:1 1 0;min-width:0;overflow:hidden;text-overflow:ellipsis}
  .cv-chip small{display:none}
  .cv-label{margin-bottom:5px}
  .cv-go-sec{position:sticky;bottom:0;z-index:5;background:var(--surface);padding-bottom:calc(10px + env(safe-area-inset-bottom));box-shadow:0 -6px 16px rgba(0,0,0,.06)}
  .cv-go-sec .cv-hint{display:none}
}

/* Trong ván */
.cv-moves{max-height:188px;overflow:auto;font-size:14px;display:grid;grid-template-columns:36px 1fr 1fr;align-content:start;padding:4px 0}
@media (min-width:960px){.cv-moves{max-height:320px}}
.cv-moves .n{color:var(--muted);padding:3px 0 3px 12px;font-variant-numeric:tabular-nums}
.cv-moves button{border:0;background:transparent;text-align:left;padding:3px 8px;border-radius:6px;cursor:pointer;font-weight:600;display:flex;align-items:center;gap:6px}
.cv-moves button:hover{background:var(--bg)}
.cv-moves button.cur{background:color-mix(in srgb,var(--brand) 18%,transparent)}
.cv-moves .tag{font-size:10.5px;font-weight:800;padding:1px 5px;border-radius:5px;color:#fff}
.cv-empty{color:var(--muted);font-size:13px;padding:8px 12px;grid-column:1/-1}
.cv-actions{display:grid;grid-template-columns:repeat(5,1fr);gap:4px;padding:8px}
.cv-act{display:flex;flex-direction:column;align-items:center;gap:2px;border:0;background:transparent;border-radius:10px;padding:6px 2px;cursor:pointer;font-size:11.5px;font-weight:600;color:var(--muted)}
.cv-act:hover{background:var(--bg);color:var(--ink)}
.cv-act svg{width:22px;height:22px}
.cv-act[disabled]{opacity:.35;pointer-events:none}
.cv-nav-moves{display:flex;gap:4px;padding:0 8px 8px}
.cv-nav-moves button{flex:1;min-height:36px;border:1px solid var(--line);background:var(--bg);border-radius:8px;cursor:pointer;font-weight:700}

/* Hộp kết quả */
.cv-modal{position:fixed;inset:0;z-index:60;display:grid;place-items:center;padding:16px;background:rgba(0,0,0,.4)}
.cv-modal[hidden]{display:none}
.cv-card{width:min(380px,100%);background:var(--surface);border-radius:18px;padding:22px 18px 16px;text-align:center;box-shadow:0 20px 60px rgba(0,0,0,.35)}
.cv-card h2{margin:4px 0 2px;font-size:24px;letter-spacing:-.01em}
.cv-card p{margin:0 0 14px;color:var(--muted)}
.cv-card .cv-go{margin-top:8px}
.cv-card .cv-sub{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:8px}
.cv-btn2{min-height:44px;border-radius:12px;border:1.5px solid var(--line);background:var(--bg);font-weight:700;cursor:pointer}
.cv-big{font-size:44px;line-height:1}

/* Xem lại ván */
.cv-rv-sum{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:10px}
.cv-rv-acc{background:var(--bg);border-radius:10px;padding:8px;text-align:center}
.cv-rv-acc b{display:block;font-size:24px;line-height:1.1}
.cv-rv-acc span{font-size:12px;color:var(--muted)}
.cv-rv-list{display:grid;gap:6px}
.cv-rv-item{display:block;width:100%;text-align:left;border:1px solid var(--line);background:var(--bg);border-radius:10px;padding:8px 10px;cursor:pointer;font-size:13.5px}
.cv-rv-item b{font-size:14px}
.cv-rv-item.cur{border-color:var(--brand)}
.cv-rv-note{font-size:13.5px;background:var(--bg);border-radius:10px;padding:8px 10px;margin-bottom:8px;min-height:40px}
.cv-prog{height:6px;border-radius:3px;background:var(--line);overflow:hidden;margin:8px 0}
.cv-prog i{display:block;height:100%;width:0;background:var(--brand);transition:width .2s}
.k-best{background:#1b8a5a}.k-exc{background:#3f9a3f}.k-good{background:#7a9a3f}.k-inacc{background:#d49a12}.k-mist{background:#e0691a}.k-blun{background:#c62828}

/* Nội dung dưới màn hình đầu (SEO, không chen vào bàn cờ) */
.cv-below{max-width:1180px;margin:8px auto 0;padding:0 var(--gutter) 40px}
.cv-below h2{font-size:20px;margin:28px 4px 10px;letter-spacing:-.01em}
.cv-cats{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:10px}
.cv-cat{display:block;text-decoration:none;background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:12px}
.cv-cat b{display:block;font-size:15px}
.cv-cat span{font-size:13px;color:var(--muted);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.cv-posts{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:12px}
.cv-post{display:block;text-decoration:none;background:var(--surface);border:1px solid var(--line);border-radius:12px;overflow:hidden}
.cv-post img{display:block;width:100%;aspect-ratio:3/2;object-fit:cover;background:var(--line)}
.cv-post b{display:block;padding:10px 12px 12px;font-size:15px;line-height:1.35}
.cv-faq details{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:10px 14px;margin-bottom:8px}
.cv-faq summary{font-weight:700;cursor:pointer}
.cv-faq p{margin:8px 0 2px;color:var(--ink)}
.cv-foot{border-top:1px solid var(--line);margin-top:32px;padding:18px var(--gutter) 28px;font-size:13px;color:var(--muted);text-align:center}
.cv-foot a{color:var(--muted)}
.cv-foot nav{display:flex;flex-wrap:wrap;gap:6px 14px;justify-content:center;margin-bottom:8px}

/* Trong ván trên điện thoại: chỉ có cờ */
@media (max-width:959px){
  body.cv-ingame .cv-below,body.cv-ingame .cv-foot,body.cv-ingame .cv-h1{display:none}
}
.cv-toast{position:fixed;left:50%;bottom:calc(20px + env(safe-area-inset-bottom));transform:translateX(-50%);background:var(--ink);color:var(--bg);padding:10px 16px;border-radius:12px;font-weight:600;font-size:14px;z-index:70;opacity:0;transition:opacity .2s;pointer-events:none}
.cv-toast.on{opacity:1}
.cv-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}