:root{--teal:#0E3B43;--teal2:#1F6F7A;--mist:#E7F1F2;--sky:#5FA8B3;--amber:#E9A23B;--green:#2E8B57;--red:#C0392B;--ink:#1B1B1B;--mute:#6B7B7E}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{font-family:Calibri,Carlito,"Segoe UI",Arial,sans-serif;color:var(--ink);background:#fff;display:flex;flex-direction:column;user-select:none;-webkit-user-select:none}
header{background:var(--teal);color:#fff;padding:12px 28px;display:flex;align-items:center;gap:22px;flex-wrap:wrap;row-gap:6px}
header h1{font-family:Cambria,Caladea,Georgia,serif;font-size:24px;margin:0;flex:1;font-weight:700}
.stat{font-size:18px;display:flex;align-items:center;gap:8px}
.stat b{font-size:24px;color:var(--amber);min-width:44px;display:inline-block;text-align:right}
.dots{display:flex;gap:8px}.dot{width:14px;height:14px;border-radius:50%;background:#2f5c63}.dot.on{background:var(--amber)}.dot.done{background:var(--sky)}
main{flex:1;overflow:auto;padding:22px 28px;display:flex;justify-content:center;align-items:flex-start}
.wrap{width:min(1180px,100%);display:flex;flex-direction:column;gap:16px;min-height:min-content}
.wrap>*{flex-shrink:0;min-width:0}
h2{font-family:Cambria,Caladea,Georgia,serif;color:var(--teal);font-size:30px;margin:0}
.lead{font-size:20px;color:var(--mute);margin:-6px 0 0}
code,.mono{font-family:"Courier New",Courier,monospace;font-weight:700}
.pool{display:flex;flex-wrap:wrap;gap:10px;min-height:64px;padding:12px;border:2px dashed var(--sky);border-radius:12px;background:#fafdfd}
.pool.empty::after{content:"Đã xếp hết thẻ!";color:var(--green);font-weight:700;font-size:18px;align-self:center}
.card{background:var(--teal);color:#fff;border-radius:10px;padding:10px 14px;font-size:19px;cursor:grab;touch-action:none;box-shadow:0 2px 5px rgba(0,0,0,.18);transition:transform .1s}
.card:hover{transform:translateY(-2px)}
.card.sel{outline:4px solid var(--amber);outline-offset:2px}
.card.ok{background:var(--green);cursor:default;box-shadow:none}
.card.ghost{position:fixed;pointer-events:none;z-index:99;opacity:.92;transform:rotate(-2deg) scale(1.04)}
.card.hide{opacity:.25}
.shake{animation:shake .4s}
@keyframes shake{0%,100%{transform:none}20%,60%{transform:translateX(-8px)}40%,80%{transform:translateX(8px)}}
.bins{display:grid;gap:14px;grid-template-columns:repeat(var(--n,3),minmax(0,1fr))}
.bin{border:2px solid var(--sky);border-radius:14px;background:var(--mist);min-height:150px;padding:10px;display:flex;flex-direction:column;gap:8px}
.bin h3{margin:0 0 4px;font-size:20px;color:var(--teal);display:flex;align-items:center;gap:8px}
.bin .items{display:flex;flex-wrap:wrap;gap:8px}
.drop.hover{border-color:var(--amber);background:#fff5e6}
.targets{display:grid;grid-template-columns:repeat(auto-fit,minmax(330px,1fr));gap:12px}
.target{display:flex;align-items:center;gap:12px;border:2px solid var(--sky);border-radius:12px;padding:10px 14px;background:#fff;min-height:64px}
.target .q{flex:1;font-size:20px}
.slot{min-width:140px;min-height:46px;border:2px dashed var(--sky);border-radius:10px;display:flex;align-items:center;justify-content:center;color:var(--mute);font-size:16px;padding:2px}
.slot .card{margin:0}
.order{display:flex;flex-direction:column;gap:8px}
.line{font-family:"Courier New",Courier,monospace;font-weight:700;font-size:21px;white-space:pre;background:var(--mist);border:2px solid var(--sky);border-radius:10px;padding:10px 14px;cursor:pointer;display:flex;align-items:center;gap:12px}
.line .n{font-family:Calibri,Carlito,Arial,sans-serif;font-size:15px;color:var(--mute);width:22px}
.line.sel{border-color:var(--amber);background:#fff5e6}
.line.good{border-color:var(--green);background:#e8f5ee}
.codebox{font-family:"Courier New",Courier,monospace;font-weight:700;font-size:21px;white-space:pre;background:var(--mist);border:2px solid var(--sky);border-radius:10px;padding:12px 16px;line-height:1.45}
.opts{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.opt{all:unset;cursor:pointer;text-align:center;padding:12px;border:2px solid var(--sky);border-radius:12px;font-size:22px;font-family:"Courier New",Courier,monospace;font-weight:700}
.opt:hover{background:var(--mist)}
.opt.right{background:var(--green);border-color:var(--green);color:#fff}
.opt.wrong{background:#fbeaea;border-color:var(--red);color:var(--red)}
table.trace{border-collapse:collapse;font-size:20px;width:100%}
table.trace th,table.trace td{border:1px solid #c9dcdf;padding:8px 12px;text-align:left}
table.trace th{background:var(--teal);color:#fff}
table.trace tr.new{animation:pop .35s}
@keyframes pop{from{background:#fff5e6}to{background:#fff}}
.btn{all:unset;cursor:pointer;padding:12px 26px;border-radius:999px;font-size:20px;font-weight:700;background:var(--teal);color:#fff;display:inline-block}
.btn.amber{background:var(--amber);color:var(--teal)}
.btn.ghost{background:transparent;color:var(--teal);border:2px solid var(--teal)}
.btn[disabled]{opacity:.35;pointer-events:none}
.bar{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.toast{position:fixed;left:50%;top:70px;transform:translateX(-50%);max-width:820px;padding:14px 22px;border-radius:12px;font-size:20px;color:#fff;box-shadow:0 6px 18px rgba(0,0,0,.25);opacity:0;transition:opacity .2s;pointer-events:none;z-index:100}
.toast.show{opacity:1}.toast.good{background:var(--green)}.toast.bad{background:var(--red)}
.done-box{background:var(--teal);color:#fff;border-radius:14px;padding:16px 22px;font-size:20px;display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.done-box b{color:var(--amber)}
.center{align-items:center;text-align:center}
.big{font-family:Cambria,Caladea,Georgia,serif;font-size:50px;color:var(--teal);margin:0}
.stars{font-size:64px;color:var(--amber);letter-spacing:8px}
input.name{font-size:22px;padding:10px 14px;border:2px solid var(--sky);border-radius:10px;width:320px;font-family:inherit}
.rules{background:var(--mist);border-radius:12px;padding:14px 22px;font-size:19px;text-align:left;max-width:820px}
.rules li{margin:4px 0}
footer{padding:10px 28px;border-top:1px solid #dde7e8;display:flex;justify-content:space-between;align-items:center;color:var(--mute);font-size:15px}

.topbtns{display:flex;gap:10px;flex-wrap:wrap}
.help{all:unset;cursor:pointer;padding:8px 16px;border-radius:999px;background:#fff;color:var(--teal);border:2px solid var(--amber);font-weight:700;font-size:17px}
.help[disabled]{opacity:.4;pointer-events:none}
.starbtn{all:unset;cursor:pointer;padding:8px 16px;border-radius:999px;background:var(--amber);color:var(--teal);font-weight:700;font-size:17px;box-shadow:0 0 0 0 rgba(233,162,59,.7);animation:pulse 1.6s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(233,162,59,.7)}70%{box-shadow:0 0 0 12px rgba(233,162,59,0)}100%{box-shadow:0 0 0 0 rgba(233,162,59,0)}}
.starbanner{background:#fff5e6;border:2px solid var(--amber);border-radius:12px;padding:12px 18px;font-size:19px}
.hintbox{background:#fff5e6;border-left:0;border:2px solid var(--amber);border-radius:12px;padding:10px 16px;font-size:18px;display:none}
.hintbox.show{display:block}
.warn{background:#fbeaea;border:2px solid var(--red);border-radius:12px;padding:10px 16px;font-size:17px;color:var(--red)}
select,input.pin{font-size:22px;padding:10px 14px;border:2px solid var(--sky);border-radius:10px;font-family:inherit;background:#fff}
.menu{display:grid;grid-template-columns:1fr 1fr;gap:18px;width:min(900px,100%)}
.menu a{display:block;text-decoration:none;color:inherit;border:2px solid var(--sky);border-radius:16px;padding:20px;background:var(--mist);text-align:left}
.menu a:hover{border-color:var(--amber);background:#fff5e6}
.menu h3{font-family:Cambria,Caladea,Georgia,serif;color:var(--teal);font-size:26px;margin:0 0 6px}
.menu .st{margin-top:10px;font-weight:700;color:var(--green)}
table.board{border-collapse:collapse;width:100%;font-size:20px}
table.board th,table.board td{border:1px solid #c9dcdf;padding:10px 12px;text-align:center}
table.board th{background:var(--teal);color:#fff}
table.board td:nth-child(2){text-align:left;font-weight:700}
.podium{display:flex;gap:18px;justify-content:center;align-items:flex-end}
.pod{background:var(--teal);color:#fff;border-radius:14px 14px 0 0;width:220px;text-align:center;padding:14px}
.pod .r{font-size:44px;color:var(--amber);font-family:Cambria,Caladea,Georgia,serif;font-weight:700}
.pod .n{font-size:24px;font-weight:700}
.chips{display:flex;flex-wrap:wrap;gap:10px}
.chip{background:var(--mist);border:2px solid var(--sky);border-radius:999px;padding:6px 14px;font-size:18px}
.chip.star{background:#fff5e6;border-color:var(--amber)}
.awards{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.award{border-radius:14px;padding:16px;background:var(--teal);color:#fff;text-align:center}
.award .t{color:var(--amber);font-weight:700;font-size:20px}
.award .n{font-size:28px;font-weight:700;margin:6px 0}

/* ===== Responsive: tránh che khuất, tối ưu máy chiếu / máy tính bảng / điện thoại ===== */
.card{max-width:100%;overflow-wrap:anywhere}
.target .q{min-width:0;overflow-wrap:anywhere}
.codebox,.order{max-width:100%;overflow-x:auto}
.line{overflow-x:auto}
.tablewrap,main .wrap>table{max-width:100%;overflow-x:auto}
.toast{max-width:min(820px,92vw)}
footer{flex-wrap:wrap;gap:6px 16px}
@media (max-height:800px) and (min-width:901px){
  main{padding:14px 24px}
  h2{font-size:26px}.lead{font-size:18px}
  .wrap{gap:12px}
  .bin{min-height:110px}
  .card{font-size:18px;padding:8px 12px}
  header{padding:8px 24px}
}
@media (max-width:900px){
  header{padding:10px 16px;gap:10px 16px}
  header h1{font-size:20px;flex-basis:100%}
  .stat{font-size:16px}.stat b{font-size:20px}
  main{padding:14px 14px}
  h2{font-size:24px}.lead{font-size:17px}
  .bins{grid-template-columns:repeat(min(var(--n,3),2),minmax(0,1fr))}
  .targets{grid-template-columns:1fr}
  .card{font-size:17px;padding:9px 12px}
  .line,.codebox{font-size:17px}
  .opts{grid-template-columns:repeat(2,1fr)}
  .menu{grid-template-columns:1fr}
  .awards{grid-template-columns:1fr}
  .podium{gap:8px}.pod{width:auto;flex:1;padding:10px}
  table.board,table.trace{font-size:16px}
  table.board th,table.board td,table.trace th,table.trace td{padding:6px 6px}
  .big{font-size:38px}.stars{font-size:48px}
  .rules{font-size:17px;padding:12px 16px}
  footer{padding:8px 14px;font-size:13px}
}
@media (max-width:600px){
  header h1{font-size:18px}
  .dot{width:11px;height:11px}
  h2{font-size:21px}.lead{font-size:16px}
  .bins{grid-template-columns:1fr}
  .bin{min-height:90px}
  .bin h3{font-size:18px}
  .card{font-size:16px;padding:8px 11px}
  .pool{padding:8px;gap:8px}
  .target{flex-wrap:wrap;padding:8px 10px}
  .target .q{flex-basis:100%;font-size:17px}
  .slot{flex:1;min-width:120px}
  .line,.codebox{font-size:15px;padding:8px 10px}
  .opt{font-size:18px;padding:10px}
  .btn{font-size:17px;padding:10px 20px}
  .done-box{font-size:17px;padding:12px 14px}
  .starbanner,.hintbox{font-size:16px}
  .help,.starbtn{font-size:15px;padding:7px 12px}
  select,input.pin,input.name{font-size:18px;max-width:100%}
  .pod .n{font-size:18px}.pod .r{font-size:32px}
  .big{font-size:30px}
  .toast{font-size:17px;top:60px}
  table.board{font-size:14px;display:block;overflow-x:auto}
  table.board th,table.board td{padding:5px 4px}
}