/* =====================================================================
   Giao dien DEN — mau den 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 black-skin khi nguoi dung chon Den.
   ===================================================================== */

html[data-theme="black"] {
  color-scheme: dark;
  --ui-page: #fff;
  --ui-surface: #232427;
  --ui-surface-strong: #303136;
  --ui-text: #f4f5f7;
  --ui-muted: #b9bdc6;
  --ui-border: #4b4d54;
  --ui-accent: #64c9f2;
  --ui-shadow: 0 18px 48px rgba(0, 0, 0, .42);
}

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

.black-skin {
  --shift: #f5f13d;
  --alpha: #63c8ef;
  --vblue: #63c8ef;
  --keyblue: #061b93;
}

/* Vien ngoai den bong, mat truoc than chi mo va sang nhe o phan dau. */
.black-skin .shell {
  background:
    linear-gradient(90deg, #050506 0%, #161618 3.5%, #09090a 7%, #09090a 93%, #171719 96.5%, #030304 100%),
    #09090a;
  box-shadow:
    0 calc(var(--px)*9) calc(var(--px)*24) rgba(0, 0, 0, .42),
    inset 0 calc(var(--px)*2) calc(var(--px)*3) rgba(255, 255, 255, .18),
    inset 0 calc(var(--px)*-4) calc(var(--px)*7) rgba(0, 0, 0, .82);
}

.black-skin .bezel {
  border-color: #08090a;
  background:
    radial-gradient(100% 35% at 50% 0%, rgba(255, 255, 255, .085), transparent 76%),
    linear-gradient(180deg, #3d3d3f 0%, #363638 24%, #29292b 55%, #303032 100%);
  box-shadow:
    inset 0 0 0 calc(var(--px)*3) #111214,
    inset 0 calc(var(--px)*3) calc(var(--px)*6) rgba(255, 255, 255, .08),
    inset 0 calc(var(--px)*-4) calc(var(--px)*7) rgba(0, 0, 0, .42),
    0 0 0 calc(var(--px)*2) #000;
}

/* Dao mau phan logo cat tu anh may trang: nen den hoa vao than, chu thanh trang. */
.black-skin .brand {
  filter: grayscale(1) contrast(12) invert(1);
  mix-blend-mode: screen;
}

.black-skin .model,
.black-skin .sci-label {
  color: var(--vblue);
}

/* Ban den trong anh khong co tem vang. */
.black-skin .auth-sticker { display: none; }

/* Man hinh trang va nam phang tren mat than den nhu anh tham chieu. */
.black-skin .lcd-frame {
  background: #fbfbfb;
}

.black-skin .lcd-frame::before {
  background: #303032;
  box-shadow: none;
}

.black-skin .lcd,
.black-skin .lcd.off {
  background: #fbfbfb;
  color: #0d0e0e;
  box-shadow: none;
}

.black-skin .klabel.shift { color: var(--shift); }
.black-skin .klabel.alpha { color: var(--alpha); }
.black-skin .klabel.alpha.lab-basen { color: #ededed; }

/* Phim trang, chu den va vien den day dung mau cua ban den. */
.black-skin .key {
  color: #211a18;
  border-color: #141518;
  background: linear-gradient(180deg, #ffffff 0%, #fbfbfb 56%, #eeeeed 100%);
  box-shadow:
    0 calc(var(--px)*1.2) calc(var(--px)*1.5) rgba(0, 0, 0, .58),
    0 calc(var(--px)*3.8) calc(var(--px)*5.5) rgba(0, 0, 0, .48),
    inset 0 calc(var(--px)*1.8) 0 rgba(255, 255, 255, .98),
    inset 0 calc(var(--px)*-2.8) calc(var(--px)*3.5) rgba(90, 90, 90, .18);
}

/* ON / DEL / AC xanh cobalt dam, chu trang. */
.black-skin .key.blue {
  color: #fff;
  border-color: #020718;
  background: linear-gradient(180deg, #102bad 0%, #071f9b 54%, #03157f 100%);
  box-shadow:
    0 calc(var(--px)*1.2) calc(var(--px)*1.5) rgba(0, 0, 0, .68),
    0 calc(var(--px)*3.8) calc(var(--px)*5.5) rgba(0, 0, 0, .54),
    inset 0 calc(var(--px)*1.8) 0 rgba(255, 255, 255, .30),
    inset 0 calc(var(--px)*-2.8) calc(var(--px)*3.5) rgba(0, 5, 58, .48);
}

.black-skin .key:active,
.black-skin .key.is-pressed {
  box-shadow:
    0 calc(var(--px)*.6) calc(var(--px)*1) rgba(0, 0, 0, .58),
    inset 0 calc(var(--px)*2) calc(var(--px)*3.5) rgba(70, 70, 70, .28);
}

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

.black-skin .key.armed {
  box-shadow:
    0 0 0 calc(var(--px)*1.5) #fff,
    0 0 0 calc(var(--px)*4.5) var(--shift),
    0 calc(var(--px)*3.2) calc(var(--px)*4.6) rgba(0, 0, 0, .5);
}

.black-skin .key.armed-a {
  box-shadow:
    0 0 0 calc(var(--px)*1.5) #fff,
    0 0 0 calc(var(--px)*4.5) var(--alpha),
    0 calc(var(--px)*3.2) calc(var(--px)*4.6) rgba(0, 0, 0, .5);
}

.black-skin .arrow-face {
  fill: #fbfbfa;
  stroke: #191a1d;
}

.black-skin .arrow-glyph {
  fill: #fff;
  stroke: #d7d9dc;
}

.black-skin .arrow svg {
  filter: drop-shadow(0 calc(var(--px)*2.4) calc(var(--px)*2.8) rgba(0, 0, 0, .72));
}

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

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