/* YCT Kids hai cổng (sửa 05/11/2026, việc t_0d4fdd7d4e6b).
   Quy định anh Hạnh 04/11/2026: giảm hiệu ứng cartoon để hợp cả trẻ lớn lẫn trẻ nhỏ:
   KHÔNG viền dày, KHÔNG bóng khối (box-shadow lệch không mờ), KHÔNG nền chấm bi, KHÔNG chữ kiểu cartoon.
   Trẻ nhỏ chỉ giữ chút chuyển động nhẹ (gấu trúc nhún, thẻ hiện dần) để vẫn vui mắt.
   Màu: xanh thương hiệu #0B6CF3, xanh đậm #0B1B3F, trung tính (tối đa 3 màu theo quy tắc rà màu t_9dc5b7acc433).
   KHÔNG đổi kích thước khung .yct2-gate (2 cổng luôn bằng nhau). */

/* ---- Chữ trong tab YCT: chữ thường, không dùng font tiêu đề kiểu cartoon ---- */
#yct, #yct .lv-btn, #yct .yct2-name, #yct .cp-head h3, #yct .l-title, #yct .btn { font-family: Arial, system-ui, sans-serif; }
#yct .yct2-head h2, #yct .yct2-head h3 { font-family: Arial, system-ui, sans-serif; font-weight: 800; letter-spacing: 0; }

/* ---- Thanh chọn cấp: phẳng, nút đang chọn nền xanh chữ trắng (trước đây mất chữ) ---- */
#yct #kidLvBar .lv-btn { box-shadow: none; border: 1px solid #D5E3FA; background: #FFFFFF; color: #0B1B3F; border-radius: 12px; transform: none; font-weight: 700; }
#yct #kidLvBar .lv-btn:hover { border-color: #0B6CF3; background: #F5F9FF; box-shadow: none; transform: none; }
#yct #kidLvBar .lv-btn .z { color: #0B6CF3; }
html body #yct #kidLvBar .lv-btn.on { background: #0B6CF3 !important; border-color: #0B6CF3 !important; color: #FFFFFF !important; box-shadow: none !important; }
html body #yct #kidLvBar .lv-btn.on span, html body #yct #kidLvBar .lv-btn.on .z { color: #FFFFFF !important; }
html body #yct #kidLvBar .lv-btn.on .pill { background: rgba(255, 255, 255, .2) !important; color: #FFFFFF !important; }

/* ---- Thẻ bài và nút trong danh sách: bỏ bóng khối ---- */
#yct #kidPanel .l-card { box-shadow: 0 1px 3px rgba(11, 27, 63, .06); }
#yct #kidPanel .l-chip { box-shadow: none !important; border-width: 1px; }
#yct #kidPanel .l-chip:hover { transform: none; }
#yct #kidPanel .btn { box-shadow: none !important; }

/* ---- Cổng Trẻ nhỏ: nền trơn, chỉ chút chuyển động nhẹ ---- */
#yct .yct2-gate[data-pc="nho"] .yct2-ic svg { animation: yctn-bob 2.6s ease-in-out infinite; transform-origin: 50% 90%; }

/* ---- Nội dung khi đang xem Trẻ nhỏ (#yct.pc-nho) ---- */
#yct.pc-nho .yct2-cur > span::before { content: "🐼"; margin-right: 6px; display: inline-block; }
#yct.pc-nho #kidPanel .l-grid > .l-card { animation: yctn-pop .3s ease-out both; }
#yct.pc-nho #kidPanel .l-grid > .l-card:nth-child(2) { animation-delay: .03s; }
#yct.pc-nho #kidPanel .l-grid > .l-card:nth-child(3) { animation-delay: .06s; }
#yct.pc-nho #kidPanel .l-grid > .l-card:nth-child(4) { animation-delay: .09s; }
#yct.pc-nho #kidPanel .l-grid > .l-card:nth-child(5) { animation-delay: .12s; }
#yct.pc-nho #kidPanel .l-grid > .l-card:nth-child(6) { animation-delay: .15s; }
#yct.pc-nho #kidPanel .l-grid > .l-card:nth-child(7) { animation-delay: .18s; }
#yct.pc-nho #kidPanel .l-grid > .l-card:nth-child(8) { animation-delay: .21s; }

@keyframes yctn-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }
@keyframes yctn-pop { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  #yct .yct2-gate[data-pc="nho"] *, #yct.pc-nho * { animation: none !important; transition: none !important; }
}
