/* =====================================================================
   Giao dien XAM — mau bac cua VINACAL 680EX PLUS III trong anh tham chieu.
   File nay chi doi vat lieu/mau sac; kich thuoc va vi tri van do white.css
   quan ly. JS giu lop white-skin va them gray-skin khi nguoi dung chon Xam.
   ===================================================================== */

html[data-theme="gray"] {
  color-scheme: light;
  --ui-page: #fff;
  --ui-surface: #f7f7f8;
  --ui-surface-strong: #fff;
  --ui-text: #292a30;
  --ui-muted: #666872;
  --ui-border: #b8bac1;
  --ui-accent: #075fce;
  --ui-shadow: 0 18px 48px rgba(39, 40, 48, .24);
}

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

/* Tren may xam that: SHIFT va cac chuc nang thu nhat mau xanh;
   ALPHA, bien chu va cac chuc nang thu hai mau xam dam. */
.gray-skin {
  --shift: #2854ae;
  --alpha: #5c5d66;
  --vblue: #0968d7;
  --keyblue: #075acb;
}

/* Than may bac/xam co anh sang mem o giua va hai mep dam hon. */
.gray-skin .shell {
  background:
    radial-gradient(90% 38% at 50% 2%, rgba(255, 255, 255, .18), transparent 72%),
    linear-gradient(90deg, #b6b6bf 0%, #c0bfc6 5%, #cacad0 49%, #c1c0c7 94%, #b5b5bd 100%);
  box-shadow:
    0 calc(var(--px)*9) calc(var(--px)*24) rgba(45, 45, 52, .25),
    inset 0 calc(var(--px)*2) calc(var(--px)*3) rgba(255, 255, 255, .78),
    inset 0 calc(var(--px)*-3) calc(var(--px)*5) rgba(75, 76, 84, .28);
}

.gray-skin .bezel {
  border-color: #9fa0a7;
  background:
    radial-gradient(115% 43% at 50% 0%, rgba(255, 255, 255, .16), transparent 72%),
    linear-gradient(180deg, #cacad0 0%, #c4c3c9 36%, #c0bfc6 68%, #bab9c1 100%);
  box-shadow:
    inset 0 0 0 calc(var(--px)*1) rgba(255, 255, 255, .48),
    inset 0 calc(var(--px)*3) calc(var(--px)*7) rgba(255, 255, 255, .32),
    inset 0 calc(var(--px)*-3) calc(var(--px)*6) rgba(81, 81, 90, .16);
}

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

.gray-skin .model,
.gray-skin .sci-label {
  color: #50515a;
}

/* Khung LCD cung mot chat lieu bac, lom nhe nhu may that. */
.gray-skin .lcd-frame {
  background: #bdbcc2;
  box-shadow:
    inset 0 calc(var(--px)*2) calc(var(--px)*5) rgba(76, 77, 85, .24),
    0 calc(var(--px)*1) 0 rgba(255, 255, 255, .55);
}

.gray-skin .lcd-frame::before {
  background: linear-gradient(180deg, #b7b6bc 0%, #cdccd1 43%, #c3c2c8 100%);
  box-shadow:
    inset calc(var(--px)*1) calc(var(--px)*3) calc(var(--px)*5) rgba(68, 69, 77, .34),
    inset 0 calc(var(--px)*-2) calc(var(--px)*3) rgba(255, 255, 255, .42);
}

.gray-skin .lcd,
.gray-skin .lcd.off {
  background: #f4f5f2;
  color: #101812;
  box-shadow:
    inset 0 calc(var(--px)*2) calc(var(--px)*4) #69786f,
    0 calc(var(--px)*1) 0 rgba(255, 255, 255, .34);
}

.gray-skin .klabel.shift { color: var(--shift); }
.gray-skin .klabel.alpha { color: var(--alpha); }

/* Phim kem/trang am, vien than chi va do bong nhua nhu anh goc. */
.gray-skin .key {
  color: #4d4e56;
  border-color: #55565d;
  background: linear-gradient(180deg, #eeeae5 0%, #e4e0db 56%, #d7d2cc 100%);
  box-shadow:
    0 calc(var(--px)*1.2) calc(var(--px)*1.5) rgba(48, 45, 43, .38),
    0 calc(var(--px)*3.8) calc(var(--px)*5.5) rgba(55, 52, 50, .30),
    inset 0 calc(var(--px)*2) 0 rgba(255, 255, 255, .96),
    inset 0 calc(var(--px)*-2.8) calc(var(--px)*3.5) rgba(115, 109, 102, .22);
}

/* ON / DEL / AC xanh cobalt dung sac cua may xam. */
.gray-skin .key.blue {
  color: #fff;
  border-color: #173b7d;
  background: linear-gradient(180deg, #0756df 0%, #0f45ca 54%, #0739ae 100%);
  box-shadow:
    0 calc(var(--px)*1.2) calc(var(--px)*1.5) rgba(24, 35, 65, .48),
    0 calc(var(--px)*3.8) calc(var(--px)*5.5) rgba(32, 39, 61, .38),
    inset 0 calc(var(--px)*1.8) 0 rgba(255, 255, 255, .43),
    inset 0 calc(var(--px)*-2.8) calc(var(--px)*3.5) rgba(4, 32, 92, .34);
}

.gray-skin .key:active,
.gray-skin .key.is-pressed {
  box-shadow:
    0 calc(var(--px)*.6) calc(var(--px)*1) rgba(48, 45, 43, .38),
    inset 0 calc(var(--px)*2) calc(var(--px)*3.5) rgba(92, 88, 83, .28);
}

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

.gray-skin .key.armed {
  box-shadow:
    0 0 0 calc(var(--px)*1.5) #f4f2ed,
    0 0 0 calc(var(--px)*4.5) var(--shift),
    0 calc(var(--px)*3.2) calc(var(--px)*4.6) rgba(48, 45, 43, .30);
}

.gray-skin .key.armed-a {
  box-shadow:
    0 0 0 calc(var(--px)*1.5) #f4f2ed,
    0 0 0 calc(var(--px)*4.5) var(--alpha),
    0 calc(var(--px)*3.2) calc(var(--px)*4.6) rgba(48, 45, 43, .30);
}

.gray-skin .arrow-face {
  fill: #eeeae4;
  stroke: #65666d;
}

.gray-skin .arrow-glyph {
  fill: #f7f5f1;
  stroke: #d7d5d1;
}

.gray-skin .arrow svg {
  filter: drop-shadow(0 calc(var(--px)*2.3) calc(var(--px)*2.6) rgba(48, 45, 43, .44));
}

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

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