/* [14/10] DÂY CHUYỀN DỮ LIỆU — khối đầu tab Tiến trình (wow-day-chuyen-du-lieu-tien-trinh-2026-10-14.js). Đại màn cam Shopee:
   lưới mờ + tia quét ngang cả băng chuyền · đèn nhịp tim ở lớp đang sống · số 'SYND So' phát sáng · hạt chạy giữa các lớp theo nhịp lớp đích.
   Hover chỉ brightness (luật WOW). 390px: băng chuyền dọc. Giảm chuyển động ⇒ tắt mọi hoạt hình.
   [19/10] màu nhấn qua token kênh (--wow-cam-rgb · --wow-cam-sang-rgb, giá trị WOW y hệt số gõ cũ) ⇒ Tiến trình Landrover dùng chung trạm này, tự sang vàng. */
.dc-khoi { position: relative; margin: 20px 0 24px; padding: 16px 14px 16px; overflow: hidden; border: 1px solid var(--wow-vien-nhat);
  background: linear-gradient(180deg, rgb(var(--wow-cam-rgb) / 0.05), transparent 70%),
    repeating-linear-gradient(90deg, rgb(var(--wow-cam-rgb) / 0.045) 0 1px, transparent 1px 44px),
    repeating-linear-gradient(0deg, rgb(var(--wow-cam-rgb) / 0.03) 0 1px, transparent 1px 44px), var(--wow-nen); }
.dc-khoi::after { content: ""; position: absolute; top: 0; bottom: 0; left: -35%; width: 35%; pointer-events: none;
  background: linear-gradient(90deg, transparent, rgb(var(--wow-cam-sang-rgb) / 0.08), transparent); animation: dc-tia 8s linear infinite; }
@keyframes dc-tia { to { transform: translateX(390%); } }
.dc-dau { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.dc-dau h2 { margin: 0; font-weight: 300; font-size: 15px; letter-spacing: 0.06em; color: var(--wow-chu); } /* [16/10] tiêu đề = tầng 1 viết hoa ba tầng ⇒ hiện đúng chữ nguồn (chỉ hoa chữ đầu), bỏ in hoa CSS */
.dc-song { width: 7px; height: 7px; border-radius: 50%; background: var(--wow-tot); box-shadow: 0 0 10px var(--wow-tot); animation: dc-nhap 1.6s ease-in-out infinite; }
@keyframes dc-nhap { 50% { opacity: 0.35; } } /* [23/10] bỏ đổi box-shadow mỗi khung (vẽ lại trang: +310ms bận/giây ở CPU ×4) — chỉ opacity, GPU làm */

.dc-bang { list-style: none; margin: 0; padding: 0; display: flex; align-items: stretch; position: relative; z-index: 1; }
.dc-tram { flex: 1 1 0; min-width: 0; position: relative; padding: 11px 11px 12px; border: 1px solid var(--wow-vien); background: rgb(14 11 10 / 0.88);
  clip-path: polygon(9px 0, 100% 0, 100% calc(100% - 9px), calc(100% - 9px) 100%, 0 100%, 0 9px); transition: filter 0.2s, border-color 0.4s; }
.dc-tram:hover { filter: brightness(1.18); }
.dc-tram[data-ma="quet"] { flex-grow: 1.9; }
.dc-tram[data-tt="song"] { border-color: rgb(var(--wow-cam-rgb) / 0.38); box-shadow: inset 0 0 28px rgb(var(--wow-cam-rgb) / 0.07); }
.dc-tram[data-tt="cho"] { border-color: rgb(var(--wow-cam-sang-rgb) / 0.5); }
.dc-tram[data-tt="xau"] { border-color: rgb(255 92 122 / 0.6); box-shadow: inset 0 0 22px rgb(255 92 122 / 0.08); }
.dc-tram[data-tt="nghi"] { opacity: 0.72; }
.dc-tram-dau { display: flex; align-items: center; gap: 7px; }
.dc-chi { font: 600 9.5px var(--wow-font-mono); letter-spacing: 0.18em; color: var(--wow-chu-4); }
@keyframes dc-chop { 50% { opacity: 0.25; } }
/* [16/10] chứa ICON trạng thái (cửa icon) — không còn khung chữ */
.dc-lech { margin-left: auto; display: inline-flex; }
.dc-lech .tt-ic { width: 16px; height: 16px; } .dc-lech .tt-ic svg { width: 10px; height: 10px; }
[data-tt="cho"] .dc-lech { color: var(--wow-cam-sang); }
[data-tt="xau"] .dc-lech { color: var(--wow-xau); }
[data-tt="nghi"] .dc-lech { color: var(--wow-chu-3); }
/* GIỮ CHỖ: khung dựng trước khi có số, có/không chip "hỏng", luồng quét 0–4 dòng ⇒ trạm không đổi cao (F5 về đúng chỗ, trang không nhảy) */
.dc-ten { margin-top: 8px; min-height: 1.45em; line-height: 1.45; font: 500 10px/1.45 var(--wow-font-chu); letter-spacing: 0.06em; /* [20/10] mono → chữ: "OPUS PHÂN XỬ PAGE" bị cắt ở 0.13em */ text-transform: uppercase; color: var(--wow-chu-2);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* [28/10] trạm thứ 9 (Open API Shopee) ⇒ ở 1440 mỗi trạm hẹp lại, "OPUS PHÂN X…" / "OPEN API SHO…" bị cắt ⇒ tên xuống tối đa 2 dòng, giữ chỗ 2 dòng
   cho mọi trạm (khung không đổi cao khi số về). Màn hẹp (≤760) trạm là hàng ngang đủ rộng ⇒ vẫn một dòng. */
@media (min-width: 761px) { .dc-ten { white-space: normal; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; min-height: 2.9em; } }
.dc-nhip { margin-top: 8px; min-height: 30px; display: flex; align-items: baseline; flex-wrap: nowrap; gap: 0 5px; white-space: nowrap; }
.dc-so { font-family: var(--wow-font-so); font-size: 30px; font-weight: 300; line-height: 1; color: var(--wow-chu); font-variant-numeric: tabular-nums; }
[data-tt="song"] .dc-so { text-shadow: 0 0 18px rgb(var(--wow-cam-rgb) / 0.4); }
.dc-dv { font: 10px var(--wow-font-chu); color: var(--wow-chu-3); }
.dc-ton { margin-top: 9px; padding-top: 7px; border-top: 1px dashed var(--wow-vien); font: 10.5px var(--wow-font-chu); color: var(--wow-chu-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dc-ton b { color: var(--wow-cam-nhat); font-weight: 600; font-variant-numeric: tabular-nums; }
.dc-het { display: block; min-height: 1.4em; margin-top: 2px; color: var(--wow-cam-sang); } /* dòng riêng: trạm hẹp ở 1440 cắt "≈ 11 giờ" */
.dc-phu { display: block; min-height: 15px; margin-top: 6px; font: 600 9.5px/15px var(--wow-font-mono); letter-spacing: 0.08em; color: var(--wow-xau); }
/* [16/10] dòng phụ + tồn = ICON (cửa icon trạng thái) + số; thông tin đã vào title */
.dc-phu { display: flex; align-items: center; gap: 5px; }
.dc-ton { display: flex; align-items: center; gap: 5px; }
.dc-phu .tt-ic, .dc-ton .tt-ic { width: 16px; height: 16px; } .dc-phu .tt-ic svg, .dc-ton .tt-ic svg { width: 10px; height: 10px; }

/* luồng đang đọc (lớp Quét) — giữ chỗ 4 dòng */
.dc-luong { list-style: none; margin: 8px 0 0; padding: 0; display: grid; grid-auto-rows: 19px; gap: 4px; min-height: calc(4 * 19px + 3 * 4px); align-content: start; }
.dc-luong li { position: relative; display: flex; align-items: center; gap: 7px; overflow: hidden; white-space: nowrap; font: 10.5px var(--wow-font-chu); color: var(--wow-chu-2);
  padding: 0 5px; background: rgb(var(--wow-cam-rgb) / 0.05); }
.dc-luong li::after { content: ""; position: absolute; inset: 0 auto 0 -40%; width: 40%; background: linear-gradient(90deg, transparent, rgb(var(--wow-cam-sang-rgb) / 0.16), transparent);
  animation: dc-doc 2.4s linear infinite; }
.dc-luong li:nth-child(2)::after { animation-delay: -0.6s; } .dc-luong li:nth-child(3)::after { animation-delay: -1.2s; } .dc-luong li:nth-child(4)::after { animation-delay: -1.8s; }
@keyframes dc-doc { to { transform: translateX(350%); } }
.dc-luong-loai { flex: none; color: var(--wow-cam-sang); text-transform: uppercase; letter-spacing: 0.1em; font-size: 9.5px; padding-top: 1px; }
.dc-luong-ten { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.dc-luong-giay { flex: none; color: var(--wow-chu-3); }

/* băng chuyền giữa hai lớp: hạt chạy theo nhịp lớp đích (--toc do JS đặt) */
.dc-noi { flex: 0 0 26px; align-self: center; height: 2px; position: relative; background: linear-gradient(90deg, var(--wow-vien), rgb(var(--wow-cam-rgb) / 0.35), var(--wow-vien)); }
.dc-hat { position: absolute; top: -2px; left: 0; width: 6px; height: 6px; border-radius: 50%; background: var(--wow-cam-sang); box-shadow: 0 0 8px var(--wow-cam);
  animation: dc-chay var(--toc, 3s) linear infinite; }
.dc-hat:nth-child(2) { animation-delay: calc(var(--toc, 3s) / -3); }
.dc-hat:nth-child(3) { animation-delay: calc(var(--toc, 3s) / -1.5); }
@keyframes dc-chay { 0% { transform: translateX(-6px); opacity: 0; } 15%, 85% { opacity: 1; } 100% { transform: translateX(26px); opacity: 0; } }
.dc-noi:not([data-tt="song"]) .dc-hat { animation-play-state: paused; opacity: 0.12; }

@media (max-width: 1100px) { .dc-so { font-size: 24px; } .dc-noi { flex-basis: 16px; } @keyframes dc-chay { 100% { transform: translateX(16px); opacity: 0; } } }
@media (max-width: 760px) {
  .dc-khoi { padding: 14px 12px; }
  .dc-bang { flex-direction: column; }
  .dc-tram { display: grid; grid-template-columns: 1fr auto; column-gap: 10px; align-items: baseline; }
  .dc-tram-dau, .dc-luong { grid-column: 1 / -1; }
  .dc-het { display: inline; margin-left: 7px; }
  .dc-phu { margin-top: 9px; padding-top: 7px; text-align: right; min-height: 0; } /* cùng hàng với tồn — không thêm dòng trống */
  .dc-tram[data-ma="quet"] .dc-phu { grid-column: 1 / -1; text-align: left; margin-top: 4px; padding-top: 0; } /* Quét không có tồn */
  .dc-ten { margin-top: 6px; }
  .dc-luong { min-height: 0; } /* [23/10] điện thoại: chừa sẵn 4 dòng luồng ⇒ thẻ Quét trống đáy ~35px */
  .dc-nhip { margin-top: 6px; justify-content: flex-end; }
  .dc-noi { flex: 0 0 16px; width: 2px; height: 16px; align-self: flex-start; margin-left: 15px;
    background: linear-gradient(180deg, var(--wow-vien), rgb(var(--wow-cam-rgb) / 0.35), var(--wow-vien)); }
  .dc-hat { top: 0; left: -2px; animation-name: dc-chay-doc; }
  @keyframes dc-chay-doc { 0% { transform: translateY(-6px); opacity: 0; } 15%, 85% { opacity: 1; } 100% { transform: translateY(16px); opacity: 0; } }
}
@media (prefers-reduced-motion: reduce) {
  .dc-khoi::after, .dc-song, .dc-luong li::after, .dc-hat { animation: none !important; }
}

/* [14/10] nhãn ngày dưới dây chuyền khi khối dòng tiền là số NGÀY TRƯỚC (luật ONE TRUTH 3: lệch ngày thì ghi ngày) */
.dt-ngay-lech { display: block; margin: 0 0 -4px; color: var(--wow-cam-sang); }

/* [14/10] phạm vi số của khối (nhịp 60′ · tồn lúc này) — cạnh tiêu đề, đẩy sang phải */
.dc-pham-vi { margin-left: auto; color: var(--wow-chu-3); }

/* [14/10] TÚI HÔM NAY — đãi cát tìm vàng: cộng dồn từ 00:00, nấc cuối (mã tiềm năng mới) sáng nhất */
.dc-tui { list-style: none; margin: 0 0 14px; padding: 10px 12px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 0;
  border: 1px solid var(--wow-vien); background: linear-gradient(90deg, rgb(var(--wow-cam-rgb) / 0.04), rgb(var(--wow-cam-sang-rgb) / 0.12)); position: relative; z-index: 1; }
.dc-tui-nac { display: inline-flex; align-items: baseline; gap: 6px; font: 10.5px var(--wow-font-chu); color: var(--wow-chu-3); white-space: nowrap; }
.dc-tui-nac:not(:last-child)::after { content: "›"; margin: 0 12px; color: var(--wow-chu-4); }
.dc-tui-so { font-family: var(--wow-font-so); font-size: 22px; font-weight: 300; color: var(--wow-chu-2); font-variant-numeric: tabular-nums; }
.dc-tui-nac:last-child .dc-tui-so { color: var(--wow-cam-sang); font-size: 26px; text-shadow: 0 0 16px rgb(var(--wow-cam-rgb) / 0.5); }
.dc-tui-nac:last-child { color: var(--wow-cam-nhat); }
@media (max-width: 760px) { .dc-tui-so { font-size: 18px; } .dc-tui-nac:last-child .dc-tui-so { font-size: 21px; } }
