/* 05/11/2026 01:53, anh Hạnh: cổng "Trẻ nhỏ" YCT Kids và nội dung khi xem Trẻ nhỏ có chút hiệu ứng hoạt hình, không rối mắt.
   Quyết định này MỚI HƠN quy định 04/11 "giảm cartoon" (yct-nho-cartoon.css), nên file này nạp SAU và thắng.
   KHÔNG đổi kích thước khung: giữ nguyên padding và độ dày viền của .yct2-gate (2 cổng luôn bằng nhau).
   Chỉ dùng nền, box-shadow, transform và phần trang trí absolute (không chiếm chỗ). Trẻ lớn giữ nguyên. */

/* ---- Cổng Trẻ nhỏ ---- */
#yct .yct2-gate[data-pc="nho"] {
  position: relative; overflow: hidden; isolation: isolate;
  background:
    radial-gradient(circle at 94% 10%, rgba(156, 196, 253, .45) 0 36px, transparent 37px),
    radial-gradient(circle at 84% 92%, rgba(231, 240, 254, .95) 0 48px, transparent 49px),
    radial-gradient(#DCE9FE 1.2px, transparent 1.4px) 0 0 / 16px 16px,
    #FFFFFF;
  border-color: #9CC4FD;
  box-shadow: 4px 4px 0 #CFE0FB;
  transition: transform .2s cubic-bezier(.34, 1.56, .64, 1), box-shadow .2s, border-color .15s;
}
#yct .yct2-gate[data-pc="nho"]:hover { transform: translateY(-3px) rotate(-.4deg); box-shadow: 6px 7px 0 #B7D2FA; border-color: #0B6CF3; }
#yct .yct2-gate[data-pc="nho"].on {
  background:
    radial-gradient(circle at 94% 10%, rgba(156, 196, 253, .55) 0 36px, transparent 37px),
    radial-gradient(circle at 84% 92%, rgba(214, 230, 254, .95) 0 48px, transparent 49px),
    radial-gradient(#D3E3FD 1.2px, transparent 1.4px) 0 0 / 16px 16px,
    #F5F9FF;
  box-shadow: 5px 5px 0 #0B1B3F;
}
#yct .yct2-gate[data-pc="nho"].on:hover { box-shadow: 7px 8px 0 #0B1B3F; }
#yct .yct2-gate[data-pc="nho"]::before,
#yct .yct2-gate[data-pc="nho"]::after {
  content: "★"; position: absolute; z-index: -1; color: #9CC4FD; pointer-events: none;
  font-size: 22px; line-height: 1; top: 16px; right: 22px; animation: yctv-twinkle 2.6s ease-in-out infinite;
}
#yct .yct2-gate[data-pc="nho"]::after { content: "✦"; font-size: 15px; top: 48px; right: 56px; color: #0B6CF3; opacity: .45; animation-delay: 1.3s; }
#yct .yct2-gate[data-pc="nho"] .yct2-ic {
  background: #FFFFFF; border: 2px solid #0B1B3F; box-shadow: 3px 3px 0 #9CC4FD; transform: rotate(-4deg); box-sizing: border-box;
}
#yct .yct2-gate[data-pc="nho"] .yct2-ic svg { animation: yctv-bob 2.4s ease-in-out infinite; transform-origin: 50% 90%; }
#yct .yct2-gate[data-pc="nho"]:hover .yct2-ic svg { animation: yctv-wiggle .6s ease-in-out 2; }
#yct .yct2-gate[data-pc="nho"] .yct2-age { background: #0B6CF3; color: #FFFFFF; transform: rotate(-2deg); box-shadow: 2px 2px 0 #0B1B3F; }
#yct .yct2-gate[data-pc="nho"] .yct2-go { box-shadow: 2px 3px 0 #9CC4FD; transition: transform .15s; }
#yct .yct2-gate[data-pc="nho"]:hover .yct2-go { transform: translateY(-1px); }
#yct .yct2-gate[data-pc="nho"].on .yct2-go { box-shadow: 2px 3px 0 #0B1B3F; }

/* ---- Nội dung khi đang xem Trẻ nhỏ (#yct.pc-nho) ---- */
#yct.pc-nho .yct2-cur { background: #FFFFFF; border: 1px dashed #9CC4FD; border-radius: 14px; padding: 8px 12px; }
#yct.pc-nho .yct2-cur > span::before { animation: yctv-bob 2.4s ease-in-out infinite; }
#yct.pc-nho .yct2-swap { box-shadow: 2px 2px 0 #9CC4FD; }
#yct.pc-nho #kidLvBar .lv-btn { border-radius: 14px; box-shadow: 3px 3px 0 #D5E3FA; transition: transform .18s cubic-bezier(.34, 1.56, .64, 1), box-shadow .18s, border-color .15s; }
#yct.pc-nho #kidLvBar .lv-btn:hover { transform: translateY(-3px) rotate(-1deg); box-shadow: 4px 5px 0 #9CC4FD; }
html body #yct.pc-nho #kidLvBar .lv-btn.on { box-shadow: 3px 3px 0 #0B1B3F !important; transform: rotate(-1deg); }
#yct.pc-nho #kidLvBar .lv-btn .z { display: inline-block; transition: transform .2s; }
#yct.pc-nho #kidLvBar .lv-btn:hover .z, #yct.pc-nho #kidLvBar .lv-btn.on .z { transform: scale(1.18) rotate(-6deg); }
#yct.pc-nho #kidPanel {
  background: radial-gradient(#E7F0FE 1.2px, transparent 1.4px) 0 0 / 18px 18px, #FFFFFF;
  border-color: #9CC4FD; box-shadow: 5px 5px 0 #CFE0FB;
}
#yct.pc-nho #kidPanel .l-card { border-radius: 14px; box-shadow: 3px 3px 0 #E2E8F0; transition: transform .18s cubic-bezier(.34, 1.56, .64, 1), box-shadow .18s, border-color .15s; }
#yct.pc-nho #kidPanel .l-card:nth-child(odd):hover { transform: translateY(-3px) rotate(-.6deg); box-shadow: 4px 6px 0 #9CC4FD; }
#yct.pc-nho #kidPanel .l-card:nth-child(even):hover { transform: translateY(-3px) rotate(.6deg); box-shadow: 4px 6px 0 #9CC4FD; }
#yct.pc-nho #kidPanel .l-card.dang { box-shadow: 3px 3px 0 #0B1B3F; }
#yct.pc-nho #kidPanel .l-no { border-radius: 999px; transform: rotate(-2deg); display: inline-block; }
html body #yct.pc-nho #kidPanel .l-chip.vao { box-shadow: 2px 2px 0 #0B1B3F !important; }
#yct.pc-nho #kidPanel .l-chip.vao:hover { transform: translateY(-1px); }

@keyframes yctv-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }
@keyframes yctv-wiggle { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-8deg); } 75% { transform: rotate(8deg); } }
@keyframes yctv-twinkle { 0%, 100% { transform: scale(1) rotate(0); opacity: .9; } 50% { transform: scale(1.25) rotate(18deg); opacity: .5; } }

@media (prefers-reduced-motion: reduce) {
  #yct .yct2-gate[data-pc="nho"], #yct .yct2-gate[data-pc="nho"] *, #yct .yct2-gate[data-pc="nho"]::before, #yct .yct2-gate[data-pc="nho"]::after,
  #yct.pc-nho *, #yct.pc-nho *::before { animation: none !important; transition: none !important; }
  #yct .yct2-gate[data-pc="nho"]:hover, #yct.pc-nho #kidLvBar .lv-btn:hover, #yct.pc-nho #kidPanel .l-card:hover { transform: none; }
}