/*
 * [12/10] WOW · 数据大屏 — bộ thiết kế dùng chung cho mọi màn wow.synd.vn.
 * CÙNG NGÔN NGỮ đại màn SYND (`ckt-` màn Toàn cảnh chăm khách, `aa2-` AUTO ADS): nền đen sâu · kim loại CHỈ cho thứ được nhấn ·
 * số 'SYND So' · nhãn mono chữ hoa giãn · tiêu đề Inter mảnh giãn chữ · khung góc ngoặc · vạch quét đỉnh · đèn chớp "đang sống".
 * KHÁC SYND đúng một chỗ: kim loại VÀNG → kim loại CAM SHOPEE. Vì cam đã là màu nhấn, XẤU/HỎNG dùng hồng đỏ (--wow-xau), không dùng cam.
 * Một thế giới TỐI có chủ đích (như đại màn SYND) — không có bản sáng.
 * §13 SYND: hover/nhấn chỉ `filter: brightness`, không scale/translate. Điện thoại: bỏ lưới, bỏ quầng lớn.
 */
/* [17/10] token màu + chữ ở MỘT tệp (đại màn Radar không nạp bộ này vẫn đọc cùng token) — @import phải đứng trước mọi luật */
@import url('/assets/wow-mau-token-mot-cua-2026-10-17.css?v=f8c795ec3c');
@font-face {
  font-family: 'SYND So';
  src: url('/fonts/synd-so-fz-sg-galey.woff2?v=baa6b83f12') format('woff2');
  font-weight: 400 900; font-display: swap;
  unicode-range: U+0030-0039, U+002B-002E, U+2212; /* chỉ chữ số + dấu — chữ cái rơi về Inter, như SYND */
}


* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0; background: var(--wow-nen); color: var(--wow-chu);
  font-family: var(--wow-font-chu); font-size: 15px; line-height: 1.55;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
button { font: inherit; color: inherit; }
/* [13/10] `display: grid/block` của một lớp ĐÈ thuộc tính hidden ⇒ thứ phải ẩn vẫn hiện. Dính 2 lần: hộp (?) "vì sao" luôn mở (12/10) và form
   "Nhập số" của MỌI creative luôn mở ở màn Lãi lỗ (13/10, cổng soi chữ lặp khi vẽ màn bắt). Luật chung một chỗ ⇒ không lớp nào đè được nữa. */
[hidden] { display: none !important; }
/* [16/10] THANH CUỘN CHUNG cả hệ WOW — CEO "cái thanh scroll phèn quá, hệ aff chưa thống nhất phong cách cho thanh scroll à" (thanh xám mặc định
   có mũi tên lên/xuống trên nền đen). Mảnh 6px · ray trong suốt · tay cầm cam mờ, rê chuột sáng lên. Khối nào cố ý ẩn thanh (scrollbar-width: none)
   tự giữ vì bộ chọn riêng mạnh hơn `*`. Chrome ≥121 đọc scrollbar-color/width; ::-webkit-scrollbar là đường lùi trình duyệt cũ. */
* { scrollbar-width: thin; scrollbar-color: rgb(var(--wow-cam-rgb) / 0.38) transparent; }
*:hover { scrollbar-color: rgb(var(--wow-cam-sang-rgb) / 0.7) transparent; }
*::-webkit-scrollbar { width: 6px; height: 6px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb { background: rgb(var(--wow-cam-rgb) / 0.38); border-radius: 6px; }
*::-webkit-scrollbar-thumb:hover { background: rgb(var(--wow-cam-sang-rgb) / 0.7); }
*::-webkit-scrollbar-button, *::-webkit-scrollbar-corner { display: none; background: transparent; }
:focus-visible { outline: 1px solid var(--wow-cam-sang); outline-offset: 3px; }

/* ── Sân khấu: màn CAMERA GIÁM SÁT ──
   [14/10] CEO chọn PA 10/10 (bảng thử https://claude.ai/artifact/DRXyRCg4xC4JyBjSH7akfT): thay lưới caro bằng màn CCTV "đang theo dõi thị trường".
   Mọi lớp là pseudo fixed z -1 ⇒ nằm SAU mọi khung, chỉ lộ ở khoảng trống (màn rộng lộ nhiều, 1440 lộ ít). Bản đầu 14/10 cho vạch quét PHỦ lên
   nội dung để 1440 cũng thấy ⇒ CEO: "sao background không nằm sau cùng mà đè lên cả lớp trên" ⇒ nền là nền, không đè chữ.
   Chỉ dải nhiễu + REC động, bằng transform/opacity (không vẽ lại toàn màn mỗi khung hình).
   Trước đó `.wow-luoi` đè background-image của `.wow-san` ⇒ quầng cam chưa từng hiện trên máy tính. */
.wow-san {
  min-height: 100%;
  background:
    radial-gradient(ellipse 70% 76% at 50% 46%, transparent 42%, rgb(0 0 0 / 0.8) 100%) fixed,
    radial-gradient(ellipse 75% 70% at 50% 50%, #1B0C07, #030202 80%) fixed,
    var(--wow-nen);
}
.wow-luoi::before, .wow-luoi::after, html:has(> .wow-luoi)::after { position: fixed; z-index: -1; pointer-events: none; }
/* vạch quét + hạt nhiễu tĩnh + góc ngắm 4 góc */
.wow-luoi::before {
  content: ''; inset: 0;
  --g: rgb(var(--wow-cam-sang-rgb) / 0.55);
  background:
    linear-gradient(var(--g), var(--g)) 8px 8px / 26px 1px, linear-gradient(var(--g), var(--g)) 8px 8px / 1px 26px,
    linear-gradient(var(--g), var(--g)) calc(100% - 8px) 8px / 26px 1px, linear-gradient(var(--g), var(--g)) calc(100% - 8px) 8px / 1px 26px,
    linear-gradient(var(--g), var(--g)) 8px calc(100% - 8px) / 26px 1px, linear-gradient(var(--g), var(--g)) 8px calc(100% - 8px) / 1px 26px,
    linear-gradient(var(--g), var(--g)) calc(100% - 8px) calc(100% - 8px) / 26px 1px, linear-gradient(var(--g), var(--g)) calc(100% - 8px) calc(100% - 8px) / 1px 26px,
    repeating-linear-gradient(0deg, rgb(0 0 0 / 0.38) 0 1px, transparent 1px 3px),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .035 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E") 0 0 / 160px;
  background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, repeat, repeat;
}
/* dải nhiễu cuộn từ trên xuống */
.wow-luoi::after {
  content: ''; left: 0; right: 0; top: -30vh; height: 30vh;
  background: linear-gradient(transparent, rgb(255 160 110 / 0.07) 50%, transparent);
  animation: wow-cuon-song 7s linear infinite;
}
/* chữ REC góc dưới trái, nằm trong góc ngắm */
html:has(> .wow-luoi)::after {
  content: '● REC'; left: 16px; bottom: 15px; padding: 4px 7px; border-radius: 3px; background: rgb(0 0 0 / 0.6);
  font: 600 10px/1 var(--wow-font-mono); letter-spacing: .16em; color: var(--wow-xau);
  animation: wow-chop-rec 1.2s steps(2) infinite;
}
@keyframes wow-cuon-song { to { transform: translateY(140vh); } }
@keyframes wow-chop-rec { 50% { opacity: .3; } }

/* ── Nhãn mặt: mono hoa giãn + đèn chớp đang sống ── */
.wow-mat-nhan {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--wow-font-mono); font-size: 10.5px; font-weight: 600;
  letter-spacing: 0.3em; text-transform: uppercase; color: rgb(var(--wow-cam-sang-rgb) / 0.9);
}
.wow-mat-nhan::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0;
  background: var(--wow-cam-sang); box-shadow: 0 0 10px var(--wow-cam-sang); animation: wow-chop 2.2s ease-in-out infinite;
}
@keyframes wow-chop { 50% { opacity: 0.3; } }
.wow-nhan { font-family: var(--wow-font-mono); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--wow-chu-3); }

/* ── Tiêu đề lớn: Inter mảnh, giãn chữ ── */
.wow-ten-lon {
  margin: 0; font-family: var(--wow-font-chu); font-weight: 200;
  font-size: clamp(30px, 5.2vw, 64px); line-height: 1.02; letter-spacing: 0.04em; /* [16/10] tiêu đề = tầng 1 ⇒ chữ nguồn, bỏ in hoa CSS */
  color: var(--wow-chu); text-wrap: balance;
}

/* ── Kim loại cam: CHỈ cho số/chữ được nhấn ── */
.wow-kimloai {
  background: linear-gradient(180deg, var(--wow-kim-tren) 0%, var(--wow-kim-giua) 52%, var(--wow-cam-dam) 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent;
  filter: drop-shadow(0 0 14px rgb(var(--wow-cam-rgb) / 0.38));
}
.wow-so { font-family: var(--wow-font-so); font-variant-numeric: tabular-nums; }

/* ── Khung: góc ngoặc hai đầu + vạch quét đỉnh ── */
.wow-khung {
  position: relative; min-width: 0; border: 1px solid var(--wow-vien); border-radius: 12px;
  background: linear-gradient(180deg, rgb(255 255 255 / 0.018), transparent 40%), var(--wow-mat);
}
.wow-khung::before, .wow-khung::after {
  content: ''; position: absolute; width: 12px; height: 12px; pointer-events: none; border-color: rgb(var(--wow-cam-sang-rgb) / 0.55);
}
.wow-khung::before { left: 6px; top: 6px; border-left: 1px solid; border-top: 1px solid; }
.wow-khung::after { right: 6px; bottom: 6px; border-right: 1px solid; border-bottom: 1px solid; }
.wow-quet { position: relative; overflow: hidden; }
/* [14/10] Vạch TỰ CẮT mình (ray phủ ngang khung, overflow hidden; vệt sáng là ::before). Trước đó vệt sáng chạy thẳng tới 1800px và chỉ
   an toàn khi khung cha overflow hidden — các khung đè thành overflow auto (popup .mw-ss Tiến trình/Xưởng · .ht-hop) ⇒ thanh cuộn
   ngang phình/co mỗi 8s, CEO thấy "scroll ngang chạy vô hạn". Nay khung cha cuộn kiểu gì vạch cũng không đẩy được bề ngang. */
.wow-quet > .wow-vach-quet {
  position: absolute; left: 0; right: 0; top: 0; height: 1px; overflow: hidden; pointer-events: none;
}
.wow-quet > .wow-vach-quet::before {
  content: ''; position: absolute; left: 0; top: 0; width: 240px; height: 1px;
  background: linear-gradient(90deg, transparent, rgb(var(--wow-quet-rgb) / 0.95), transparent); animation: wow-quet 8s linear infinite;
}
@keyframes wow-quet { from { transform: translateX(-240px); } to { transform: translateX(1800px); } } /* chỉ transform: rẻ, iPhone không vẽ lại */

/* ── HUD: ô số góc ── */
.wow-hud { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.wow-hud-o { display: grid; gap: 4px; min-width: 0; padding: 12px 16px; border-left: 1px solid var(--wow-ke); }
.wow-hud-o:first-child { border-left: 0; }
.wow-hud-so { font-family: var(--wow-font-so); font-size: clamp(28px, 3.4vw, 44px); line-height: 1; font-variant-numeric: tabular-nums; white-space: nowrap; }
.wow-hud-so small { font-family: var(--wow-font-chu); font-size: 0.4em; font-weight: 400; letter-spacing: 0.1em; color: var(--wow-chu-3); margin-left: 6px; }

/* ── Nút ── */
.wow-nut {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 18px;
  border: 1px solid var(--wow-vien); border-radius: 8px; background: transparent; cursor: pointer;
  font-family: var(--wow-font-mono); font-size: 11.5px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--wow-chu-2);
  transition: filter .15s;
}
.wow-nut:hover { filter: brightness(1.35); }
.wow-nut:disabled { opacity: .4; cursor: default; filter: none; }
.wow-nut-chinh {
  border-color: var(--wow-cam); color: var(--wow-nut-chu);
  background: linear-gradient(180deg, var(--wow-nut-tren), var(--wow-cam) 60%, var(--wow-nut-duoi)); box-shadow: 0 0 24px rgb(var(--wow-cam-rgb) / 0.35), inset 0 1px 0 rgb(255 255 255 / 0.25);
}

/* ── Ô chọn (select) — MỘT kiểu cho mọi màn ──
   [14/10] CEO: "các drop down đang bị thô, cần thống nhất". Đo: 5 ô chọn ở 3 kiểu (.lr-o .lr-chon 40px · .ht-them-o + style gõ tay 38px/13px)
   cùng mũi tên hệ điều hành. Luật đặt trên THẺ (select:not([multiple]) = 0,1,1 thắng một class bất kể thứ tự nạp) ⇒ ô chọn mới tự đúng kiểu,
   class riêng chỉ còn lo bề rộng. Cao 44px = .wow-nut ⇒ ô chọn đứng cạnh nút thẳng hàng. */
select:not([multiple]) {
  appearance: none; -webkit-appearance: none; max-width: 100%; height: 44px; padding: 0 38px 0 14px;
  border: 1px solid var(--wow-vien); border-radius: 8px; color: var(--wow-chu); cursor: pointer; color-scheme: dark;
  font-family: var(--wow-font-chu); font-size: 14px; line-height: normal; text-overflow: ellipsis;
  background-color: var(--wow-mat-2); background-repeat: no-repeat; background-position: right 14px center; background-size: 11px 7px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 11 7'%3E%3Cpath d='M1 1l4.5 4.5L10 1' fill='none' stroke='%23FF7A50' stroke-width='1.5'/%3E%3C/svg%3E");
  transition: filter .15s;
}
select:not([multiple]):hover { filter: brightness(1.25); }
select:not([multiple]):focus-visible { outline: none; border-color: rgb(var(--wow-cam-sang-rgb) / 0.7); box-shadow: 0 0 0 3px rgb(var(--wow-cam-rgb) / 0.18); }
select:not([multiple]):disabled { opacity: .45; cursor: default; filter: none; }
select option { background-color: var(--wow-mat-2); color: var(--wow-chu); }
/* [14/10] Bảng xổ ra mặc định là của hệ điều hành (nền sáng, vệt chọn xanh Windows — CEO "sao vẫn thấy như cũ") ⇒ CSS thường không với tới.
   Chrome/Edge ≥135 cho tự vẽ qua base-select; trình duyệt cũ bỏ qua khối này, vẫn giữ ô đóng đã đúng kiểu. */
@supports (appearance: base-select) {
  select:not([multiple]), select:not([multiple])::picker(select) { appearance: base-select; }
  select:not([multiple]) { display: inline-flex; align-items: center; }
  select:not([multiple])::picker-icon { display: none; } /* mũi tên cam là ảnh nền ở trên */
  select:not([multiple])::picker(select) {
    margin-top: 4px; padding: 4px; border: 1px solid var(--wow-vien); border-radius: 8px;
    background: var(--wow-mat-2); color: var(--wow-chu); box-shadow: 0 14px 36px rgb(0 0 0 / 0.65);
  }
  select:not([multiple]) option { min-height: 38px; padding: 8px 12px; border-radius: 6px; font-size: 14px; cursor: pointer; }
  select:not([multiple]) option:hover, select:not([multiple]) option:focus-visible { outline: none; background-color: rgb(var(--wow-cam-rgb) / 0.16); }
  select:not([multiple]) option:checked { color: var(--wow-cam-sang); }
  select:not([multiple]) option::checkmark { color: var(--wow-cam-sang); }
}

/* ── Thanh tiến độ phân đoạn ── */
.wow-doan { display: grid; gap: 4px; }
.wow-doan-vach { height: 3px; border-radius: 2px; background: var(--wow-vien-nhat); overflow: hidden; }
.wow-doan-vach > i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--wow-cam-dam), var(--wow-cam-sang)); box-shadow: 0 0 8px rgb(var(--wow-cam-sang-rgb) / 0.6); transition: width .4s ease; }

@media (max-width: 720px) {
  .wow-luoi::after, html:has(> .wow-luoi)::after { content: none; }
  .wow-hud { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wow-hud-o:nth-child(3) { border-left: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .wow-mat-nhan::before, .wow-quet > .wow-vach-quet::before, .wow-luoi::after, html:has(> .wow-luoi)::after { animation: none; }
  .wow-doan-vach > i { transition: none; }
}
/* [22/10] ô hỏi xác nhận / báo TẠI CHỖ (cửa wow-hoi-xac-nhan-tai-cho) — thay hộp confirm/alert của trình duyệt; mọc dưới nút vừa bấm */
.hoi-tai-cho { position: fixed; z-index: 2147483000; display: grid; gap: 10px; width: max-content; max-width: min(360px, calc(100vw - 16px)); padding: 12px 14px;
  border: 1px solid var(--wow-cam-sang); border-radius: 10px; background: var(--wow-mat-2, #15110f); color: var(--wow-chu); box-shadow: 0 10px 30px rgb(0 0 0 / .6); }
.hoi-tai-cho-chu { margin: 0; font-family: var(--wow-font-chu); font-size: 13px; line-height: 1.5; white-space: pre-line; overflow-wrap: anywhere; }
.hoi-tai-cho-nut { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.hoi-tai-cho-bao { border-color: var(--wow-vien); }