/* ============================================================================
   thienso.css — HỆ THỐNG THIẾT KẾ THIÊN SỐ
   ----------------------------------------------------------------------------
   NGUỒN DUY NHẤT: Design/Thien-So-Artboard-Navy 20260806_v1.0.html (khối <style>)
   Huynh chốt bản 06/08 làm chuẩn (14/08). Trích nguyên văn, KHÔNG sửa giá trị.

   ⚠️ LUẬT: file này là BẢN SAO CÓ CHỦ của artboard, không phải nơi sáng tác.
   Muốn đổi màu/khoảng cách => sửa artboard trước, rồi trích lại xuống đây.
   Sửa thẳng ở đây là làm hai nguồn sự thật lệch nhau — đúng lớp lỗi `L4`
   (tài liệu lệch code) đã lặp nhiều lần trong dự án.

   Ghi chú kỹ thuật: artboard đặt hình thức từng khối bằng inline style, nên
   file này CHỈ chứa tầng nền (token màu · reset · animation). Đó là đúng
   phạm vi — không bịa thêm class mà artboard không có.
   ============================================================================ */

/* ---------------------------------------------------------------------------
   FONT — Manrope, PHỤC VỤ CỤC BỘ (đã gỡ phụ thuộc mạng)
   Artboard gốc tải từ fonts.googleapis.com. Bản này tải sẵn 12 file woff2 về
   static/fonts/ (vietnamese · latin · latin-ext × 400/500/600/700 = 189,4 KB),
   bỏ cyrillic/greek vì nội dung tiếng Việt không dùng tới.
   => Demo KHÔNG cần mạng. Đây là điều kiện bắt buộc cho buổi viva.
   Giấy phép: Manrope — SIL Open Font License 1.1 (dùng/nhúng/phân phối tự do).
   --------------------------------------------------------------------------- */
@import url('/static/fonts/_fontface.css');

:root {
  --ts-font: Manrope, 'Segoe UI', system-ui, sans-serif;
}

/* ---------------------------------------------------------------------------
   TOKEN — chế độ tối (mặc định, đúng hướng "vũ trụ/huyền bí" đã duyệt 31/07)
   --------------------------------------------------------------------------- */
:root,
[data-theme="dark"] {
  --c-bg:#070C1A; --c-surface:#111A2E; --c-surface-2:#17233C;
  --c-ink:#EAF0F8; --c-dim:#8FA0BC;
  --c-line:rgba(234,240,248,.13); --c-line-2:rgba(234,240,248,.2); --c-line-3:rgba(234,240,248,.18);
  --c-gold:#E0B979; --c-gold-dim:#8E6C38; --c-gold-08:rgba(224,185,121,.08); --c-gold-16:rgba(224,185,121,.16); --c-gold-24:rgba(224,185,121,.24);
  --c-jade:#6EC7BE; --c-jade-dim:#3F7E79; --c-jade-08:rgba(110,199,190,.08); --c-jade-18:rgba(110,199,190,.18);
  --c-star:#8FC5E8; --c-star-18:rgba(143,197,232,.18);
  --c-neb1:#0E1A38; --c-neb2:#123457; --c-glow:rgba(18,52,87,.6);
  --c-band-a:rgba(18,52,87,.5); --c-band-b:rgba(64,92,138,.42);
  --c-shadow:0 30px 70px -30px rgba(0,0,0,.8);
  --c-bar:rgba(7,12,26,.86); --c-veil:rgba(17,26,46,.94);
  --c-warn:#C9909A; --c-warn-line:#7A5A63;
  --c-cta-a:#E6EEF9; --c-cta-b:#B9CCE4; --c-cta-ink:#0B1226;
  /* 🔴 THEM 01/09 — MAU RIENG CHO TUNG CON SO (Huynh: "mau sac cung phai ro rang").
     Vi sao thanh bien CSS chu khong go thang vao template: mot the chi so xuat hien o
     BA cho (the tren bang, chip tren trang chi tiet, tieu de tung so) — go tay ba lan la
     ba ban sao chac chan se lech nhau. Day la MOT NGUON cho ca ba.
     ⚠️ Mau chi de PHAN BIET cac so voi nhau, KHONG mang y nghia tot/xau — tu vi va than
        so hoc khong xep hang con so, va mau do/xanh de bi doc thanh loi khen che. */
  --so-1:#E0B979; --so-2:#8FC5E8; --so-3:#C9A0DC; --so-4:#6EC7BE; --so-5:#E8A87C;
  --so-6:#A8D08D; --so-7:#9FB8E8; --so-8:#D9A5B3; --so-9:#7FD1C4;
  --so-11:#F0C987; --so-22:#8ED9CF; --so-33:#D4B0E8;
  --c-canvas-img:radial-gradient(ellipse 60% 40% at 15% 8%,#0E1A38 0%,transparent 60%),radial-gradient(ellipse 50% 35% at 85% 18%,#123457 0%,transparent 60%),radial-gradient(1px 1px at 6% 20%,rgba(234,240,248,.5) 0,transparent 60%),radial-gradient(1px 1px at 18% 55%,rgba(234,240,248,.35) 0,transparent 60%),radial-gradient(1.5px 1.5px at 30% 10%,rgba(224,185,121,.5) 0,transparent 60%),radial-gradient(1px 1px at 42% 70%,rgba(234,240,248,.3) 0,transparent 60%),radial-gradient(1px 1px at 55% 30%,rgba(234,240,248,.4) 0,transparent 60%),radial-gradient(1.5px 1.5px at 66% 60%,rgba(224,185,121,.4) 0,transparent 60%),radial-gradient(1px 1px at 78% 15%,rgba(234,240,248,.35) 0,transparent 60%),radial-gradient(1px 1px at 90% 45%,rgba(234,240,248,.3) 0,transparent 60%),radial-gradient(1.5px 1.5px at 96% 75%,rgba(224,185,121,.35) 0,transparent 60%);
}

/* ---------------------------------------------------------------------------
   TOKEN — chế độ sáng
   --------------------------------------------------------------------------- */
[data-theme="light"] {
  --c-bg:#EEF2F9; --c-surface:#FFFFFF; --c-surface-2:#F4F7FC;
  --c-ink:#101828; --c-dim:#55617A;
  --c-line:rgba(16,24,40,.12); --c-line-2:rgba(16,24,40,.2); --c-line-3:rgba(16,24,40,.16);
  --c-gold:#9A6F22; --c-gold-dim:#C9A45E; --c-gold-08:rgba(154,111,34,.08); --c-gold-16:rgba(154,111,34,.14); --c-gold-24:rgba(154,111,34,.24);
  --c-jade:#1F7A72; --c-jade-dim:#7FC3BC; --c-jade-08:rgba(31,122,114,.08); --c-jade-18:rgba(31,122,114,.14);
  --c-star:#2B6CA3; --c-star-18:rgba(43,108,163,.14);
  --c-neb1:#DCE6F5; --c-neb2:#CBDDF0; --c-glow:rgba(203,221,240,.75);
  /* Ban SANG cua bang mau theo con so — dam hon de doc duoc tren nen trang. */
  --so-1:#9A6F22; --so-2:#2B6CA3; --so-3:#7A4E96; --so-4:#1F7A72; --so-5:#A85D2B;
  --so-6:#4A7C34; --so-7:#3B5EA8; --so-8:#A34F63; --so-9:#1E7F72;
  --so-11:#8A6216; --so-22:#166B62; --so-33:#6B3E8C;
  --c-band-a:rgba(203,221,240,.65); --c-band-b:rgba(255,255,255,.8);
  --c-shadow:0 24px 50px -28px rgba(16,24,40,.25);
  --c-bar:rgba(238,242,249,.88); --c-veil:rgba(255,255,255,.94);
  --c-warn:#A24A57; --c-warn-line:rgba(162,74,87,.5);
  --c-cta-a:#1B2C4A; --c-cta-b:#0F1B33; --c-cta-ink:#EAF0F8;
  --c-canvas-img:radial-gradient(ellipse 60% 40% at 15% 8%,#DCE6F5 0%,transparent 60%),radial-gradient(ellipse 50% 35% at 85% 18%,#CBDDF0 0%,transparent 60%);
}

/* ---------------------------------------------------------------------------
   RESET — nguyên văn artboard
   --------------------------------------------------------------------------- */
html, body { margin:0; padding:0; background:var(--c-bg); }
* { box-sizing:border-box; }
h1, h2, h3, h4, p { margin:0; }
a { color:var(--c-star); text-decoration:none; }
a:hover { opacity:.75; }
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible { outline:2px solid var(--c-gold); outline-offset:2px; }
::selection { background:var(--c-gold-24); }

/* Bổ sung tối thiểu cho app (artboard không cần vì nó tự đặt font ở khối gốc) */
body { font-family:var(--ts-font); color:var(--c-ink); }

/* ---------------------------------------------------------------------------
   ANIMATION — nguyên văn artboard
   --------------------------------------------------------------------------- */
@keyframes tsDrift1{0%{transform:translate(0,0) scale(1)}50%{transform:translate(6vw,-4vh) scale(1.12)}100%{transform:translate(0,0) scale(1)}}
@keyframes tsDrift2{0%{transform:translate(0,0) scale(1.05)}50%{transform:translate(-7vw,5vh) scale(1)}100%{transform:translate(0,0) scale(1.05)}}
@keyframes tsDrift3{0%{transform:translate(0,0)}50%{transform:translate(4vw,6vh)}100%{transform:translate(0,0)}}
@keyframes tsShoot{0%,86%{opacity:0;transform:translate(0,0) rotate(24deg) scaleX(.2)}88%{opacity:1}90%{opacity:1;transform:translate(46vw,32vh) rotate(24deg) scaleX(1)}94%,100%{opacity:0;transform:translate(56vw,40vh) rotate(24deg) scaleX(.4)}}

@keyframes tsDigit{0%{opacity:0;transform:translate(calc(-50% + var(--dx)),calc(-50% + var(--dy))) scale(1.1)}22%{opacity:1}100%{opacity:0;transform:translate(-50%,-50%) scale(.22)}}
@keyframes tsCore{0%{transform:translate(-50%,-50%) scale(.2);opacity:0}45%{opacity:1}100%{transform:translate(-50%,-50%) scale(1.15);opacity:.9}}
@keyframes tsDraw{0%{stroke-dashoffset:620;opacity:0}12%{opacity:1}100%{stroke-dashoffset:0;opacity:1}}
@keyframes tsPop{0%{opacity:0;transform:scale(.2)}100%{opacity:1;transform:scale(1)}}
@keyframes tsFade{0%{opacity:0}100%{opacity:1}}
@keyframes tsSplitL{0%{opacity:0;transform:translateX(0)}30%{opacity:1}100%{opacity:1;transform:translateX(-34px)}}
@keyframes tsSplitR{0%{opacity:0;transform:translateX(0)}30%{opacity:1}100%{opacity:1;transform:translateX(34px)}}
@keyframes tsFlipIn{0%{opacity:0;transform:perspective(700px) rotateY(-86deg) translateY(8px)}55%{opacity:1}100%{opacity:1;transform:perspective(700px) rotateY(0deg) translateY(0)}}
@keyframes tsSheen{0%{opacity:0;transform:translateX(-120%)}40%{opacity:.8}100%{opacity:0;transform:translateX(140%)}}
@keyframes tsLineIn{0%{opacity:0;transform:translateY(5px)}100%{opacity:1;transform:translateY(0)}}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms !important;animation-iteration-count:1 !important;}
}


/* ---------------------------------------------------------------------------
   BỔ SUNG 14/08 — 7 keyframes từ bản giao thiết kế mới
   Nguồn: Design/design_handoff_thien_so_Aug14/artboard.html
   Đối chiếu bản 06/08: 0 token màu lệch, không mất keyframe nào, chỉ THÊM 7 cái
   phục vụ 3 màn mới (S13 biểu đồ ngày sinh · S14 đỉnh cao · S3D dashboard desktop).
   --------------------------------------------------------------------------- */
@keyframes tsGridIn{0%{opacity:0;transform:scale(.9) translateY(10px)}100%{opacity:1;transform:scale(1) translateY(0)}}
@keyframes tsArrowFade{0%{opacity:0}100%{opacity:1}}
@keyframes tsMarch{0%{stroke-dashoffset:0}100%{stroke-dashoffset:-26}}
@keyframes tsDraw2{0%{stroke-dashoffset:200;opacity:0}15%{opacity:1}100%{stroke-dashoffset:0;opacity:1}}
@keyframes tsGlow{0%,100%{box-shadow:0 0 0 0 var(--c-gold-08)}50%{box-shadow:0 0 0 5px var(--c-gold-08)}}
@keyframes tsRise{0%{opacity:0;transform:scaleY(.04)}55%{opacity:1}100%{opacity:1;transform:scaleY(1)}}
@keyframes tsCardIn{0%{opacity:0;transform:translateX(-14px)}100%{opacity:1;transform:translateX(0)}}

/* ---------------------------------------------------------------------------
   NỀN THIÊN HÀ + THẺ "CRYSTAL" — bổ sung 14/08 theo góp ý của Huynh

   ⚠️ HAI PHẦN NÀY KHÁC NHAU VỀ NGUỒN GỐC, ghi rõ để không lẫn:
     · Nền thiên hà 5 lớp  → CÓ trong bản giao thiết kế 14/08 (README mục
       "Nền thiên hà (toàn trang, 5 lớp)"). Dựng theo đúng thông số ở đó.
     · Thẻ trong suốt kiểu "crystal" → **KHÔNG có trong artboard**. Cả hai bản
       artboard đều dùng nền ĐẶC (`--c-surface`, 87 chỗ). Đây là YÊU CẦU MỚI
       của Huynh (14/08).
       ⇒ Làm bằng token MỚI `--c-glass`, KHÔNG sửa `--c-surface` gốc — để
         artboard và code không lệch nhau âm thầm. Muốn quay lại nền đặc thì
         chỉ cần đổi một dòng.
   --------------------------------------------------------------------------- */
:root, [data-theme="dark"] {
  --c-glass: rgba(17, 26, 46, .58);
  --c-glass-2: rgba(23, 35, 60, .52);
  --c-glass-vien: rgba(234, 240, 248, .10);
}
[data-theme="light"] {
  --c-glass: rgba(255, 255, 255, .62);
  --c-glass-2: rgba(244, 247, 252, .58);
  --c-glass-vien: rgba(16, 24, 40, .10);
}

/* Nền 5 lớp: cố định sau toàn bộ nội dung, không bắt chuột */
.ts-galaxy { position:fixed; inset:0; z-index:0; overflow:hidden; pointer-events:none; }
.ts-galaxy .neb-tinh { position:absolute; inset:-20%;
  background:
    radial-gradient(closest-side, var(--c-neb2), transparent 70%) 20% 14% / 55% 55% no-repeat,
    radial-gradient(closest-side, var(--c-neb1), transparent 70%) 82% 32% / 48% 48% no-repeat,
    radial-gradient(closest-side, var(--c-neb2), transparent 70%) 48% 104% / 62% 62% no-repeat; }
.ts-galaxy .dai-ngan-ha { position:absolute; left:-30%; top:-45%; width:160%; height:190%;
  transform:rotate(-24deg); filter:blur(48px); opacity:.9;
  background:linear-gradient(90deg, transparent, var(--c-band-a) 40%, var(--c-band-b) 50%, var(--c-band-a) 60%, transparent); }
.ts-galaxy .vet { position:absolute; border-radius:50%; }
.ts-galaxy .vet-1 { width:44vw; height:44vw; left:-6vw; top:-8vh; filter:blur(44px); opacity:.30;
  background:radial-gradient(circle, var(--c-gold-dim), transparent 68%);
  animation:tsDrift1 96s ease-in-out infinite; }
.ts-galaxy .vet-2 { width:38vw; height:38vw; right:-8vw; top:32vh; filter:blur(40px); opacity:.26;
  background:radial-gradient(circle, var(--c-jade-dim), transparent 68%);
  animation:tsDrift2 124s ease-in-out infinite; }
.ts-galaxy .vet-3 { width:34vw; height:34vw; left:34vw; bottom:-12vh; filter:blur(34px); opacity:.22;
  background:radial-gradient(circle, var(--c-star), transparent 68%);
  animation:tsDrift3 108s ease-in-out infinite; }
.ts-galaxy canvas { position:absolute; inset:0; width:100%; height:100%; display:block; }
.ts-galaxy .sao-bang { position:absolute; transform-origin:left center; }
.ts-galaxy .sb-1 { width:180px; height:1.5px; left:6%; top:16%;
  background:linear-gradient(90deg, transparent, var(--c-ink)); animation:tsShoot 26s linear infinite; }
.ts-galaxy .sb-2 { width:140px; height:1.2px; left:22%; top:52%;
  background:linear-gradient(90deg, transparent, var(--c-gold)); animation:tsShoot 41s linear infinite 14s; }

/* Nội dung luôn nằm TRÊN nền */
.ts-nav, .ts-than, .ts-chan { position:relative; z-index:1; }

/* Thẻ crystal — nền galaxy nhìn xuyên qua, tạo độ sâu */
.ts-the {
  background:var(--c-glass);
  border-color:var(--c-glass-vien);
  backdrop-filter:blur(14px) saturate(140%);
  -webkit-backdrop-filter:blur(14px) saturate(140%);
  box-shadow:0 12px 40px -22px rgba(0,0,0,.7), inset 0 1px 0 rgba(255,255,255,.05);
}
.ts-o, select.ts-o, textarea.ts-o { background:var(--c-glass-2); backdrop-filter:blur(8px); }
.ts-nav { backdrop-filter:blur(14px) saturate(140%); }