/* Uninbaby · Trắng Xanh — lớp giao diện dùng chung cho 6 trang bản chạy thử.
   Nguồn: hệ thống thiết kế "Uninbaby Trắng Xanh" (claude.ai, riêng tư). Mặc định luôn SÁNG; chưa có chế độ tối.
   Tệp này nạp SAU Tailwind nên ghi đè được màu nền, bo góc, viền, phông. */
:root {
  --tx-bg:#ffffff; --tx-soft:#f2f7ff; --tx-card:#ffffff; --tx-ink:#15244d; --tx-muted:#56618a; --tx-line:#d9e5fb;
  --tx-blue:#1e5bff; --tx-blue-deep:#1747c9; --tx-on-blue:#ffffff;
  --tx-sky:#e3eeff; --tx-pink:#ff5c93; --tx-pink-ink:#cf2561; --tx-blush:#ffe6ef; --tx-sun:#ffc93d; --tx-mint:#ddf6ec;
  --tx-success:#0b7a62; --tx-danger:#c2410c;
  --tx-shadow:0 6px 18px rgba(30,91,255,.12); --tx-press:0 4px 0 #1747c9; --tx-press-soft:0 3px 0 #c5d6fb;
  --tx-display:"Baloo 2","Be Vietnam Pro",system-ui,sans-serif; --tx-sans:"Be Vietnam Pro",system-ui,-apple-system,"Segoe UI",sans-serif;
  color-scheme: light;
}

/* Nền trắng, chữ xanh đêm */
html, body { background: var(--tx-bg) !important; color: var(--tx-ink); }
body { font-family: var(--tx-sans); }
h1, h2, h3, h4, .font-heading, .font-brand { font-family: var(--tx-display) !important; letter-spacing: -0.2px; }
.bg-slate-50 { background-color: var(--tx-soft) !important; }
.bg-slate-100 { background-color: #eef3ff !important; }
.text-slate-900, .text-slate-950, .text-slate-800 { color: var(--tx-ink) !important; }
.text-slate-500, .text-slate-600 { color: var(--tx-muted) !important; }

/* Bo góc lớn, viền xanh nhạt, thẻ có bóng xanh nhẹ */
.rounded-2xl { border-radius: 20px !important; }
.rounded-3xl { border-radius: 28px !important; }
.border-slate-200, .border-slate-100, .border-slate-200\/80, .border-slate-300 { border-color: var(--tx-line) !important; }
.bg-white.border.rounded-2xl, .bg-white.border.rounded-3xl, .bg-white.rounded-2xl.shadow-sm, .bg-white.rounded-3xl.shadow-sm { box-shadow: var(--tx-shadow); }

/* Nút kiểu đồ chơi (script thêm lớp vào nút sẵn có) */
.tx-btn { border-radius: 999px !important; min-height: 44px; font-weight: 700 !important; }
.tx-btn--main { background: var(--tx-blue) !important; color: var(--tx-on-blue) !important; border-color: transparent !important; box-shadow: var(--tx-press) !important; }
.tx-btn--main:hover { background: #1b52e6 !important; }
.tx-btn--main:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--tx-blue-deep) !important; }
.tx-btn--line { background: var(--tx-card) !important; color: var(--tx-blue-deep) !important; border: 2px solid var(--tx-line) !important; box-shadow: var(--tx-press-soft) !important; }
.tx-btn--line:hover { border-color: var(--tx-blue) !important; }
.tx-btn--rain { background: var(--tx-ink) !important; color: #ffffff !important; box-shadow: 0 4px 0 var(--tx-blue-deep) !important; border-color: transparent !important; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 3px solid var(--tx-blue-deep) !important; outline-offset: 2px; }

/* Dải xanh đầu trang có mép sóng */
.tx-hero { position: relative; background: var(--tx-blue) !important; color: var(--tx-on-blue) !important; padding-bottom: 40px !important; overflow: hidden; }
.tx-hero::before { content: ""; position: absolute; right: -40px; top: -50px; width: 170px; height: 170px; border-radius: 50%; background: rgba(255,255,255,.12); pointer-events: none; }
.tx-hero::after { content: ""; position: absolute; right: 140px; top: 18px; width: 14px; height: 14px; border-radius: 50%; background: var(--tx-sun); pointer-events: none; }
.tx-hero > * { position: relative; }
.tx-wave { position: absolute !important; left: 0; right: 0; bottom: -1px; width: 100%; height: 26px; display: block; pointer-events: none; }
.tx-wave path { fill: var(--tx-bg); }

/* Trong dải xanh: ô trắng mờ đổi thành ô xanh sẫm mờ (giữ chữ trắng ≥ 5:1); chữ nhạt cũ đổi về trắng */
.tx-hero [class*="bg-white/"], .tx-hero [class*="bg-black/"], .tx-hero [class*="bg-slate-800/"], .tx-hero [class*="bg-slate-900/"] { background-color: rgba(8, 24, 90, .22) !important; border-color: rgba(255,255,255,.28) !important; }
.tx-hero [class*="text-sky-"], .tx-hero [class*="text-emerald-"], .tx-hero [class*="text-purple-"], .tx-hero [class*="text-indigo-"], .tx-hero [class*="text-blue-1"], .tx-hero [class*="text-blue-2"], .tx-hero [class*="text-blue-3"], .tx-hero [class*="text-rose-3"], .tx-hero [class*="text-pink-2"], .tx-hero [class*="text-pink-3"], .tx-hero .text-slate-300, .tx-hero .text-slate-400, .tx-hero .text-slate-200 { color: #ffffff !important; }
.tx-hero .bg-white:not([class*="bg-white/"]) { color: var(--tx-blue-deep); }

/* Chữ xám, đỏ nhạt trên nền trắng: đậm lên cho đủ 4.5:1 */
.text-slate-400 { color: #636d8c !important; }
.text-rose-500 { color: #e11d48 !important; }
.text-rose-600 { color: #be123c !important; }
.bg-rose-500 { background-color: #e11d48 !important; }
.bg-pink-600 { background-color: #cf2561 !important; }
.bg-emerald-600 { background-color: #0b7a62 !important; }
.bg-slate-400 { background-color: #636d8c !important; }
.text-\[\#FF3B7A\] { color: var(--tx-pink-ink) !important; }
.tx-hero .text-\[\#FF3B7A\] { color: var(--tx-blush) !important; }
.text-emerald-600, .text-emerald-500 { color: var(--tx-success) !important; }
/* Trong khối nền xanh (không phải dải sóng): giữ chữ đủ sáng, ô mờ đủ tối */
.bg-\[\#1747C9\] [class*="text-emerald-"], .bg-\[\#1E5BFF\] [class*="text-emerald-"] { color: #a7f3d0 !important; }
.bg-\[\#1747C9\] [class*="text-sky-"], .bg-\[\#1E5BFF\] [class*="text-sky-"] { color: #ffffff !important; }
.bg-\[\#1747C9\] .bg-white [class*="text-sky-"], .bg-\[\#1E5BFF\] .bg-white [class*="text-sky-"], .tx-hero .bg-white [class*="text-sky-"], .tx-hero .bg-white[class*="text-sky-"] { color: var(--tx-blue-deep) !important; }
.bg-\[\#1747C9\] [class*="bg-white/"], .bg-\[\#1E5BFF\] [class*="bg-white/"], .bg-\[\#1747C9\] [class*="bg-emerald-500/"], .bg-\[\#1E5BFF\] [class*="bg-emerald-500/"] { background-color: rgba(8, 24, 90, .22) !important; }

/* Mảng nhạt */
.tx-tint-sky { background: var(--tx-sky) !important; }
.tx-tint-blush { background: var(--tx-blush) !important; }
.tx-tint-mint { background: var(--tx-mint) !important; }
.tx-head-light { background: var(--tx-card) !important; color: var(--tx-ink) !important; border-bottom: 1.5px solid var(--tx-line); }

/* Thanh "BẢN CHẠY THỬ" */
.ub-banthu { background: var(--tx-blue-deep) !important; }
.ub-banthu b { color: #ffe08a !important; }

/* Bong bóng 11 kỹ năng (khu gia đình) */
.tx-bubbles { display: grid; grid-template-columns: repeat(11, minmax(0, 1fr)); gap: 4px; }
.tx-bub { aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center; font: 800 12px/1 var(--tx-sans); background: var(--tx-card); color: var(--tx-muted); border: 2px dashed var(--tx-line); }
.tx-bub--done { background: var(--tx-blue); color: #ffffff; border: 2px solid var(--tx-blue); }
.tx-bub--doing { background: var(--tx-sky); color: var(--tx-blue-deep); border: 2px solid var(--tx-blue); }

@media (prefers-reduced-motion: reduce) { .tx-btn--main:active { transform: none; } }

/* App cuối (17/10/2026): một bộ phông duy nhất — số liệu dùng Be Vietnam Pro chữ số đều, không dùng phông máy (Courier/Consolas) */
.font-mono { font-family: var(--tx-sans) !important; font-variant-numeric: tabular-nums; letter-spacing: 0; }
/* Icon Tabler (nét) đứng thẳng hàng với chữ */
.ti { line-height: 1; vertical-align: -0.125em; }