/* ===========================================================
   VINACAL 680EX PLUS III - vo may & ban phim
   Kich thuoc lay theo anh may that (khung 720 x 1456 px).
   1 don vi --px == 1 pixel cua anh goc.
   =========================================================== */
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0;height:100%}
body{
  background:#20242b;
  background-image:radial-gradient(120% 90% at 50% 0%,#333a45 0%,#1a1d23 60%,#121418 100%);
  font-family:"Segoe UI",Roboto,-apple-system,"Helvetica Neue",Arial,sans-serif;
  color:#d8dde5;
  -webkit-text-size-adjust:100%;
  overflow-x:hidden;
}
#stage{
  display:flex;align-items:flex-start;justify-content:center;gap:26px;
  padding:18px 14px 40px;min-height:100%;
}

/* ---------- khung co gian ---------- */
.calc-wrap{
  container-type:inline-size;
  width:min(440px, 94vw, calc((100vh - 56px) * 0.4945));
  flex:0 0 auto;
}
.calc{
  --px:calc(100cqw / 720);
  width:calc(var(--px) * 720);
  height:calc(var(--px) * 1456);
  position:relative;
  user-select:none;-webkit-user-select:none;
  -webkit-tap-highlight-color:transparent;
}

/* ---------- mau sac ---------- */
:root{
  --shift:#f0c419;
  --alpha:#5ec5ef;
  --vblue:#3fa9e5;
  --keyblue:#1b3f9b;
}

/* ---------- vo ---------- */
.shell{
  position:absolute;inset:0;
  border-radius:calc(var(--px) * 46);
  background:linear-gradient(180deg,#2b2b2d 0%,#141415 6%,#0d0d0e 50%,#151517 94%,#37373a 100%);
  box-shadow:
    0 calc(var(--px)*10) calc(var(--px)*34) rgba(0,0,0,.55),
    inset 0 calc(var(--px)*1) 0 rgba(255,255,255,.16),
    inset 0 calc(var(--px)*-2) calc(var(--px)*3) rgba(0,0,0,.6);
  overflow:hidden;
}
.bezel{
  position:absolute;
  left:calc(var(--px)*14);top:calc(var(--px)*12);
  right:calc(var(--px)*14);bottom:calc(var(--px)*12);
  border-radius:calc(var(--px)*36);
  background:linear-gradient(180deg,#181819 0%,#0b0b0c 40%,#101011 100%);
  box-shadow:inset 0 0 calc(var(--px)*3) rgba(255,255,255,.10);
  pointer-events:none;
}

/* ---------- thuong hieu ---------- */
.brand{
  position:absolute;left:calc(var(--px)*58);top:calc(var(--px)*40);
  font-size:calc(var(--px)*47);line-height:1;
  font-weight:900;color:#fff;letter-spacing:calc(var(--px)*-0.5);
  font-family:"Arial Black","Segoe UI",Impact,sans-serif;
  transform:scaleX(1.04);transform-origin:left center;
}
.brand .reg{font-size:calc(var(--px)*17);vertical-align:calc(var(--px)*20);font-weight:700}
.model{
  position:absolute;left:calc(var(--px)*60);top:calc(var(--px)*94);
  font-size:calc(var(--px)*29);line-height:1;
  font-weight:800;font-style:italic;color:var(--vblue);
  letter-spacing:calc(var(--px)*0.4);
  font-family:"Segoe UI",Arial,sans-serif;
}

/* ---------- khung LCD ---------- */
.lcd-frame{
  position:absolute;
  left:calc(var(--px)*60);top:calc(var(--px)*186);
  width:calc(var(--px)*600);height:calc(var(--px)*288);
  border-radius:calc(var(--px)*4);
  background:#0b0b0b;
  padding:calc(var(--px)*3);
  box-shadow:inset 0 0 calc(var(--px)*6) rgba(0,0,0,.9),
             0 calc(var(--px)*2) calc(var(--px)*4) rgba(255,255,255,.06);
}
.sci-label{
  position:absolute;right:calc(var(--px)*62);top:calc(var(--px)*478);
  font-size:calc(var(--px)*17);font-weight:600;color:var(--vblue);
  letter-spacing:calc(var(--px)*0.6);
}

/* ---------- vung phim ---------- */
.keys{position:absolute;inset:0;pointer-events:none}
.keys>*{pointer-events:auto}

.klabel{
  position:absolute;display:flex;align-items:center;justify-content:center;
  font-size:calc(var(--px)*19);line-height:1;font-weight:700;
  white-space:nowrap;pointer-events:none;
  font-family:"Segoe UI",Arial,sans-serif;
}
.klabel.shift{color:var(--shift)}
.klabel.alpha{color:var(--alpha)}
.klabel .box{
  display:inline-block;width:calc(var(--px)*9);height:calc(var(--px)*9);
  background:currentColor;margin:0 calc(var(--px)*1);
}
.klabel sup{font-size:.66em;vertical-align:super;line-height:0}
.klabel sub{font-size:.66em;vertical-align:sub;line-height:0}
.klabel .fr{
  display:inline-flex;flex-direction:column;align-items:center;
  line-height:1;font-size:.74em;margin:0 calc(var(--px)*1.5);
}
.klabel .fr b{font-weight:700;border-bottom:calc(var(--px)*1.4) solid currentColor;padding:0 calc(var(--px)*1)}

/* phim */
.key{
  position:absolute;border:0;padding:0;margin:0;
  font-family:"Segoe UI",Arial,sans-serif;
  display:flex;align-items:center;justify-content:center;
  color:#131313;cursor:pointer;
  background:linear-gradient(180deg,#ffffff 0%,#f7f7f7 45%,#e6e6e6 100%);
  box-shadow:
    0 calc(var(--px)*2.5) calc(var(--px)*3) rgba(0,0,0,.55),
    inset 0 calc(var(--px)*1) 0 rgba(255,255,255,.9),
    inset 0 calc(var(--px)*-2) calc(var(--px)*2) rgba(0,0,0,.10);
  transition:transform .04s linear, box-shadow .04s linear, filter .08s linear;
  overflow:hidden;
}
.key:active,.key.is-pressed{
  transform:translateY(calc(var(--px)*2));
  box-shadow:0 0 calc(var(--px)*1) rgba(0,0,0,.6),inset 0 calc(var(--px)*2) calc(var(--px)*3) rgba(0,0,0,.25);
  filter:brightness(.94);
}
.key.blue{
  background:linear-gradient(180deg,#3457bb 0%,#22439f 45%,#152f78 100%);
  color:#fff;
  box-shadow:
    0 calc(var(--px)*2.5) calc(var(--px)*3) rgba(0,0,0,.6),
    inset 0 calc(var(--px)*1) 0 rgba(255,255,255,.35),
    inset 0 calc(var(--px)*-2) calc(var(--px)*2) rgba(0,0,0,.25);
}
.key.armed{box-shadow:0 0 0 calc(var(--px)*3.5) var(--shift),0 calc(var(--px)*2.5) calc(var(--px)*3) rgba(0,0,0,.55)}
.key.armed-a{box-shadow:0 0 0 calc(var(--px)*3.5) var(--alpha),0 calc(var(--px)*2.5) calc(var(--px)*3) rgba(0,0,0,.55)}

.key .lab{display:flex;align-items:center;justify-content:center;line-height:1;white-space:nowrap}
.key sup{font-size:.62em;vertical-align:super;line-height:0}
.key sub{font-size:.62em;vertical-align:sub;line-height:0}
.key .box{
  display:inline-block;width:calc(var(--px)*11);height:calc(var(--px)*11);
  border:calc(var(--px)*1.7) solid currentColor;margin-left:calc(var(--px)*2);
}
.key .boxf{
  display:inline-block;width:calc(var(--px)*10);height:calc(var(--px)*10);
  background:currentColor;margin-left:calc(var(--px)*2);
}
.key .fr{display:inline-flex;flex-direction:column;align-items:center;line-height:1}
.key .fr i{font-style:normal;display:block;width:calc(var(--px)*15);height:calc(var(--px)*12);
  border:calc(var(--px)*1.7) solid currentColor}
.key .fr .bar{width:calc(var(--px)*24);height:calc(var(--px)*2);background:currentColor;margin:calc(var(--px)*2.5) 0}

.key.pill{border-radius:calc(var(--px)*24);font-size:calc(var(--px)*23);font-weight:700}
.key.fn{border-radius:calc(var(--px)*11);font-size:calc(var(--px)*24);font-weight:600}
.key.num{border-radius:calc(var(--px)*13);font-size:calc(var(--px)*36);font-weight:700}
.key.op{border-radius:calc(var(--px)*13);font-size:calc(var(--px)*36);font-weight:600}
.key.big{border-radius:calc(var(--px)*13);font-size:calc(var(--px)*28);font-weight:700}

/* con lan 4 chieu */
.cursorpad{
  position:absolute;
  left:calc(var(--px)*228);top:calc(var(--px)*533);
  width:calc(var(--px)*264);height:calc(var(--px)*126);
  border-radius:50%;
  background:radial-gradient(60% 60% at 50% 26%,#f2f2f2 0%,#d3d3d3 45%,#a8a8a8 100%);
  box-shadow:0 calc(var(--px)*3) calc(var(--px)*5) rgba(0,0,0,.6),
             inset 0 calc(var(--px)*2) calc(var(--px)*2) rgba(255,255,255,.85),
             inset 0 calc(var(--px)*-3) calc(var(--px)*4) rgba(0,0,0,.28);
}
.cursorpad .hub{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:calc(var(--px)*136);height:calc(var(--px)*70);border-radius:50%;
  background:radial-gradient(50% 60% at 50% 30%,#8f8f8f 0%,#6e6e6e 60%,#5a5a5a 100%);
  box-shadow:inset 0 calc(var(--px)*2) calc(var(--px)*3) rgba(0,0,0,.55),
             0 calc(var(--px)*1) 0 rgba(255,255,255,.35);
}
.arrow{
  position:absolute;border:0;background:transparent;padding:0;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
}
.arrow::after{content:"";display:block;width:0;height:0}
.arrow.up   {left:calc(var(--px)*318);top:calc(var(--px)*537);width:calc(var(--px)*84);height:calc(var(--px)*38)}
.arrow.down {left:calc(var(--px)*318);top:calc(var(--px)*617);width:calc(var(--px)*84);height:calc(var(--px)*38)}
.arrow.left {left:calc(var(--px)*231);top:calc(var(--px)*570);width:calc(var(--px)*52);height:calc(var(--px)*52)}
.arrow.right{left:calc(var(--px)*437);top:calc(var(--px)*570);width:calc(var(--px)*52);height:calc(var(--px)*52)}
.arrow.up::after   {border-left:calc(var(--px)*17) solid transparent;border-right:calc(var(--px)*17) solid transparent;border-bottom:calc(var(--px)*17) solid #9a9a9a}
.arrow.down::after {border-left:calc(var(--px)*17) solid transparent;border-right:calc(var(--px)*17) solid transparent;border-top:calc(var(--px)*17) solid #9a9a9a}
.arrow.left::after {border-top:calc(var(--px)*15) solid transparent;border-bottom:calc(var(--px)*15) solid transparent;border-right:calc(var(--px)*15) solid #9a9a9a}
.arrow.right::after{border-top:calc(var(--px)*15) solid transparent;border-bottom:calc(var(--px)*15) solid transparent;border-left:calc(var(--px)*15) solid #9a9a9a}
.arrow:active::after,.arrow.is-pressed::after{filter:brightness(.55)}

/* ---------- bang ben ---------- */
#sidepanel{
  width:min(340px,92vw);flex:0 0 auto;padding-top:10px;font-size:13px;line-height:1.55;
}
#sidepanel h1{font-size:17px;margin:0 0 2px;color:#fff;font-weight:700}
#sidepanel .sub{margin:0 0 14px;color:#8f98a6}
.tips{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);border-radius:10px;padding:12px 14px}
.tips ul{margin:6px 0 14px;padding-left:18px}
.tips li{margin:3px 0}
kbd{background:#2c313a;border:1px solid #454c58;border-bottom-width:2px;border-radius:4px;padding:0 5px;font-family:inherit;font-size:11.5px}
.btnrow{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}
.btnrow button{
  background:#2c313a;color:#dfe5ee;border:1px solid #454c58;border-radius:7px;
  padding:6px 11px;font:inherit;font-size:12.5px;cursor:pointer;
}
.btnrow button:hover{background:#39404b}
#helpBox{margin-top:12px;font-size:12px;color:#a9b3c1;max-height:340px;overflow:auto}
#helpBox table{border-collapse:collapse;width:100%}
#helpBox td{border-top:1px solid rgba(255,255,255,.08);padding:3px 4px;vertical-align:top}
#helpBox td:first-child{color:#fff;white-space:nowrap;font-weight:600}

@media (max-width:900px){
  #stage{flex-direction:column;align-items:center;gap:16px}
  .calc-wrap{width:min(440px,94vw)}
  #sidepanel{width:min(440px,94vw)}
}