/* Cờ vua dùng chung cho trang chủ và các landing: thẻ "Nước cờ chiến lược", dải ô cờ, quân đặc trưng, con trỏ quân cờ.
   Màu lấy theo từng trang: ưu tiên --a1/--a2 của landing, nếu không có thì --accent của trang chủ. */
.cq{--cq-a:var(--a1,var(--accent,#F5A623));--cq-b:var(--a2,var(--blue,#2E9BE0));--cq-bg:var(--panel,#121B2E);--cq-line:var(--line,var(--border,rgba(255,255,255,.12)));--cq-t:var(--text,#fff);--cq-s:var(--soft,var(--text-soft,#9AA8BE));position:relative;max-width:920px;margin:0 auto;background:var(--cq-bg);border:1px solid var(--cq-line);border-radius:calc(var(--r,18px) * 1.2);overflow:hidden;box-shadow:0 30px 60px -36px rgba(0,0,0,.55)}
.cq-strip{height:14px;background:repeating-conic-gradient(var(--cq-a) 0 25%,transparent 0 50%) 0 0/28px 28px;opacity:.55;border-bottom:1px solid var(--cq-line)}
.cq-body{display:grid;grid-template-columns:auto 1fr;gap:22px;align-items:center;padding:28px 30px 12px}
.cq-piece{width:84px;height:84px;--pc:var(--cq-a);--pc2:var(--cq-b);--pcl:#14110c;overflow:visible;filter:drop-shadow(0 10px 14px rgba(0,0,0,.35));animation:cqbob 4.5s ease-in-out infinite}
@keyframes cqbob{50%{transform:translateY(-6px) rotate(-3deg)}}
.cq-main{min-width:0;transition:opacity .35s,transform .35s}
.cq.swap .cq-main{opacity:0;transform:translateY(8px)}
.cq-tag{display:inline-block;font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--cq-a);background:color-mix(in srgb,var(--cq-a) 14%,transparent);padding:4px 11px;border-radius:999px;margin-bottom:10px}
.cq-text{margin:0;font-family:var(--fd,inherit);font-weight:700;font-size:clamp(19px,2.3vw,27px);line-height:1.35;color:var(--cq-t);text-wrap:balance}
.cq-text::before{content:"\201C";color:var(--cq-a);margin-right:3px}.cq-text::after{content:"\201D";color:var(--cq-a);margin-left:2px}
.cq-apply{margin:12px 0 0;font-size:15px;line-height:1.6;color:var(--cq-s)}
.cq-apply b{color:var(--cq-a)}
.cq-foot{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:6px 30px 20px}
.cq-dots{display:flex;gap:6px}
.cq-dots i{width:8px;height:8px;border-radius:2px;background:var(--cq-line);transition:background .3s,transform .3s}
.cq-dots i:nth-child(odd){background:color-mix(in srgb,var(--cq-line) 70%,var(--cq-t) 6%)}
.cq-dots i.on{background:var(--cq-a);transform:scale(1.35)}
.cq-next{font:700 14px var(--fb,inherit);color:var(--cq-t);background:transparent;border:1.5px solid var(--cq-line);border-radius:999px;padding:9px 18px;cursor:pointer;transition:border-color .2s,color .2s,transform .2s}
.cq-next:hover{border-color:var(--cq-a);color:var(--cq-a);transform:translateY(-1px)}
@media(max-width:640px){.cq-body{grid-template-columns:1fr;text-align:left;padding:22px 20px 8px}.cq-piece{width:64px;height:64px}.cq-foot{padding:6px 20px 18px}}
@media(prefers-reduced-motion:reduce){.cq-piece{animation:none}.cq-main{transition:none}}

/* quân đặc trưng của landing + dải ô cờ */
.sig{display:flex;gap:12px;align-items:flex-start;margin:18px 0 0;max-width:620px;font-size:15px;line-height:1.55;color:var(--soft)}
.sig .pc-inline{width:38px;height:38px;flex:none;--pc:var(--a1);--pc2:var(--a2);--pcl:#14110c;overflow:visible}
.sig b{color:var(--text)}
.hero--center .sig{justify-content:center;text-align:left;margin-left:auto;margin-right:auto}
.lp-strip{height:14px;background:repeating-conic-gradient(color-mix(in srgb,var(--a1) 50%,transparent) 0 25%,transparent 0 50%) 0 0/28px 28px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);opacity:.7}
.pk-pc{position:absolute;right:14px;top:12px;width:42px;height:42px;--pc:var(--a1);--pc2:var(--a2);--pcl:#14110c;overflow:visible;transition:transform .35s cubic-bezier(.34,1.56,.64,1)}
.pk:hover .pk-pc{transform:translateY(-6px) rotate(-8deg) scale(1.1)}
.pk .pc-name{font-size:11px;font-weight:700;color:var(--a1);margin-left:6px;text-transform:none;letter-spacing:0}
.sec-cq{padding:84px 0}

/* con trỏ quân cờ trên landing */
#chessCursor{position:fixed;left:0;top:0;z-index:1100;pointer-events:none;width:40px;height:40px;margin:-8px 0 0 -8px;will-change:transform;opacity:0;transition:opacity .25s}
#chessCursor.on{opacity:1}#chessCursor.off{opacity:0}
#chessCursor .cc-in{width:100%;height:100%;transform-origin:50% 90%;will-change:transform}
#chessCursor svg{width:100%;height:100%;display:block;overflow:visible;--pc:var(--a1,#FFC21A);--pc2:var(--a2,#FF9F1C);--pcl:#14110c;filter:drop-shadow(0 6px 8px rgba(0,0,0,.4))}
#chessCursor.swap .cc-in{animation:ccPop .38s cubic-bezier(.34,1.56,.64,1)}
@keyframes ccPop{0%{transform:scale(.4) rotate(-20deg)}100%{transform:scale(1) rotate(0)}}
#chessCursor.down .cc-in{animation:ccDown .22s ease-out}
@keyframes ccDown{40%{transform:scale(.78,.64)}100%{transform:scale(1)}}
.cc-sq{position:fixed;left:0;top:0;z-index:1090;width:11px;height:11px;pointer-events:none;border-radius:2px;animation:ccSq .7s ease-out forwards}
@keyframes ccSq{0%{opacity:.9;transform:translate(var(--tx,0),var(--ty,0)) scale(1) rotate(0)}100%{opacity:0;transform:translate(var(--tx,0),var(--ty,0)) scale(.2) rotate(var(--rot,60deg))}}
body.has-chess-cursor,body.has-chess-cursor a,body.has-chess-cursor button,body.has-chess-cursor summary,body.has-chess-cursor label{cursor:none}
body.has-chess-cursor input,body.has-chess-cursor select,body.has-chess-cursor textarea{cursor:text}
@media (hover:none),(pointer:coarse){#chessCursor,.cc-sq{display:none}}
@media (prefers-reduced-motion:reduce){#chessCursor{display:none}}