/* =====================================================================
   Giao dien XANH — ban mau xanh da troi cua VINACAL 680EX PLUS III.
   Cung quy uoc voi gray.css: chi doi vat lieu/mau sac, con kich thuoc va
   vi tri van do white.css quan ly. JS giu lop white-skin va them blue-skin.

   Doc tu anh may that:
     - vo xanh da troi nhat, mat truoc mo;
     - "680EX PLUS III" mau xanh dam, "SCIENTIFIC CALCULATOR" mau trang;
     - nhan SHIFT (chuc nang thu nhat) mau xanh coban dam;
     - nhan ALPHA (chuc nang thu hai, bien chu) mau trang;
     - rieng chu "SHIFT" in tren than may mau trang nhu chu "ALPHA";
     - ON / DEL / AC mau xanh coban, chu trang;
     - phim con lai mau trang nhu ban trang.
   ===================================================================== */

html[data-theme="blue"] {
  color-scheme: light;
  --ui-page: #f5fafd;
  --ui-surface: #fbfdff;
  --ui-surface-strong: #fff;
  --ui-text: #1d2833;
  --ui-muted: #5c6d7d;
  --ui-border: #b6d5e9;
  --ui-accent: #0d55c6;
  --ui-shadow: 0 18px 48px rgba(23, 48, 78, .22);
}

html[data-theme="blue"],
html[data-theme="blue"] body {
  background: var(--ui-page);
  color: var(--ui-text);
}

.blue-skin {
  --shift: #0d55c6;
  --alpha: #fff;
  --vblue: #1568c4;
  --keyblue: #0e51d2;
}

/* Than may xanh co anh sang mem o giua va hai mep dam hon. */
.blue-skin .shell {
  background:
    radial-gradient(90% 38% at 50% 2%, rgba(255, 255, 255, .26), transparent 72%),
    linear-gradient(90deg, #94c6e9 0%, #9dcdec 5%, #abd6f1 49%, #9fcfed 94%, #93c5e8 100%);
  box-shadow:
    0 calc(var(--px)*9) calc(var(--px)*24) rgba(28, 58, 90, .22),
    inset 0 calc(var(--px)*2) calc(var(--px)*3) rgba(255, 255, 255, .72),
    inset 0 calc(var(--px)*-3) calc(var(--px)*5) rgba(38, 79, 118, .22);
}

.blue-skin .bezel {
  border-color: #88bfe1;
  background:
    radial-gradient(115% 43% at 50% 0%, rgba(255, 255, 255, .22), transparent 72%),
    linear-gradient(180deg, #abd6f1 0%, #a7d3ef 36%, #a3d0ee 68%, #9bcaea 100%);
  box-shadow:
    inset 0 0 0 calc(var(--px)*1) rgba(255, 255, 255, .5),
    inset 0 calc(var(--px)*3) calc(var(--px)*7) rgba(255, 255, 255, .3),
    inset 0 calc(var(--px)*-3) calc(var(--px)*6) rgba(40, 84, 124, .14);
}

/* Nen trang cua anh logo hoa vao vo xanh, chi giu lai chu den. */
.blue-skin .brand {
  filter: grayscale(1) contrast(12);
  mix-blend-mode: multiply;
}

/* Tren ban xanh, dong "SCIENTIFIC CALCULATOR" duoc in mau trang. */
.blue-skin .sci-label { color: #fff; }

/* Panel quanh LCD sang hon than may dung nhu anh chup. */
.blue-skin .lcd-frame {
  background: #b6dcf3;
}

.blue-skin .lcd-frame::before {
  background: linear-gradient(180deg, #bfe2f6 0%, #b6dcf3 46%, #add6f0 100%);
  box-shadow:
    inset calc(var(--px)*1) calc(var(--px)*3) calc(var(--px)*4) rgba(44, 90, 130, .28),
    inset 0 calc(var(--px)*-2) calc(var(--px)*3) rgba(255, 255, 255, .5);
}

.blue-skin .klabel.shift { color: var(--shift); }
.blue-skin .klabel.alpha { color: var(--alpha); }
/* Chu "SHIFT" in tren than may la mau trang, khong phai xanh nhu cac nhan
   chuc nang thu nhat khac — doc tu anh may that. */
.blue-skin .klabel.shift.lab-keyname { color: #fff; }
/* DEC / HEX / BIN / OCT duoc in mau den tren than may, khong theo mau ALPHA —
   neu de trang thi bon nhan nay gan nhu mat hut tren nen xanh nhat. */
.blue-skin .klabel.alpha.lab-basen { color: #14181c; }

/* Phim trang, vien manh am sac xanh, do bong nhua nhu anh goc. */
.blue-skin .key {
  color: #14181c;
  border-color: #5a6f82;
  background: linear-gradient(180deg, #ffffff 0%, #fbfcfd 58%, #edf1f5 100%);
  box-shadow:
    0 calc(var(--px)*1.2) calc(var(--px)*1.5) rgba(30, 54, 78, .30),
    0 calc(var(--px)*3.6) calc(var(--px)*5) rgba(30, 54, 78, .22),
    inset 0 calc(var(--px)*1.8) 0 rgba(255, 255, 255, .95),
    inset 0 calc(var(--px)*-2.4) calc(var(--px)*3) rgba(108, 130, 150, .16);
}

/* ON / DEL / AC xanh coban dung sac cua may xanh. */
.blue-skin .key.blue {
  color: #fff;
  border-color: #123a84;
  background: linear-gradient(180deg, #2570ea 0%, #0e51d2 55%, #0740ad 100%);
  box-shadow:
    0 calc(var(--px)*1.2) calc(var(--px)*1.5) rgba(18, 40, 78, .44),
    0 calc(var(--px)*3.6) calc(var(--px)*5) rgba(18, 40, 78, .32),
    inset 0 calc(var(--px)*1.8) 0 rgba(255, 255, 255, .42),
    inset 0 calc(var(--px)*-2.4) calc(var(--px)*3) rgba(4, 30, 90, .34);
}

.blue-skin .key:active,
.blue-skin .key.is-pressed {
  box-shadow:
    0 calc(var(--px)*.6) calc(var(--px)*1) rgba(30, 54, 78, .34),
    inset 0 calc(var(--px)*2) calc(var(--px)*3.5) rgba(96, 118, 140, .26);
}

.blue-skin .key:focus-visible,
.blue-skin .arrow:focus-visible {
  outline-color: var(--shift);
}

/* --alpha la mau trang in tren than may, khong dung lam vong sang bao ALPHA
   dang bat — vong do phai la xanh dam moi nhin ro tren phim trang. */
.blue-skin .key.armed-a {
  box-shadow:
    0 0 0 calc(var(--px)*1.5) #fff,
    0 0 0 calc(var(--px)*4.5) #0b3f8f,
    0 calc(var(--px)*3.2) calc(var(--px)*4.6) rgba(30, 54, 78, .26);
}

.blue-skin .arrow-face {
  fill: #fbfcfd;
  stroke: #6d8093;
}

.blue-skin .arrow-glyph {
  fill: #fff;
  stroke: #b3c3d0;
}

.blue-skin .arrow svg {
  filter: drop-shadow(0 calc(var(--px)*2.2) calc(var(--px)*2.4) rgba(30, 54, 78, .34));
}

.blue-skin .arrow:active .arrow-glyph,
.blue-skin .arrow.is-pressed .arrow-glyph {
  stroke: var(--shift);
}

@media print {
  html[data-theme="blue"],
  html[data-theme="blue"] body { background: #fff; }
}