/* YCT Kids - Trẻ nhỏ: lớp MÀU HOẠT HÌNH rõ nét (05/11/2026 16:10, anh Hạnh: "chưa thấy hiệu ứng cartoon,
   đặc biệt phần cho Trẻ em nhỏ").
   - Nạp SAU CÙNG (sau yct-nho-cartoon.css, yct-nho-vui.css, yct-cartoon.css) nên thắng các lớp "giảm cartoon" cũ.
     Việc nền hay đợt rà màu sau này KHÔNG được ghi đè file này: YCT Trẻ nhỏ được miễn quy tắc 3 màu và màu chủ đạo.
   - Chỉ áp cho cổng Trẻ nhỏ (#yct .yct2-gate[data-pc="nho"]) và nội dung khi đang xem Trẻ nhỏ (#yct.pc-nho).
     Cổng Trẻ lớn giữ gọn như cũ.
   - KHÔNG đổi padding/độ dày viền của .yct2-gate: viền dày tạo bằng box-shadow, nên 2 cổng vẫn bằng nhau.
   - Vui nhưng không rối: nền pastel nhạt, viền xanh đậm #0B1B3F, bóng khối lệch, chữ đậm dễ đọc. */

/* ================= 1. CỔNG TRẺ NHỎ ================= */
#yct .yct2-gate[data-pc="nho"] {
  background:
    radial-gradient(circle at 92% 12%, #FFE58A 0 30px, rgba(255, 229, 138, .35) 31px 40px, transparent 41px),
    radial-gradient(circle at 88% 94%, #D3F5E4 0 46px, transparent 47px),
    radial-gradient(circle at 70% 70%, #FFD3DF 0 5px, transparent 6px),
    radial-gradient(circle at 58% 18%, #CFE3FF 0 6px, transparent 7px),
    radial-gradient(circle at 78% 48%, #E3D9FF 0 4px, transparent 5px),
    linear-gradient(160deg, #FFF8D9 0%, #FFFFFF 52%, #EEFBF4 100%);
  border-color: #0B1B3F;
  box-shadow: 0 0 0 1.5px #0B1B3F, 6px 6px 0 1.5px #0B1B3F;
  transition: transform .22s cubic-bezier(.34, 1.56, .64, 1), box-shadow .2s;
}
#yct .yct2-gate[data-pc="nho"]:hover { transform: translate(-2px, -3px) rotate(-.6deg); box-shadow: 0 0 0 1.5px #0B1B3F, 9px 10px 0 1.5px #0B1B3F; border-color: #0B1B3F; }
#yct .yct2-gate[data-pc="nho"].on {
  background:
    radial-gradient(circle at 92% 12%, #FFD84D 0 30px, rgba(255, 216, 77, .35) 31px 40px, transparent 41px),
    radial-gradient(circle at 88% 94%, #BFF0D9 0 46px, transparent 47px),
    radial-gradient(circle at 70% 70%, #FFD3DF 0 5px, transparent 6px),
    radial-gradient(circle at 58% 18%, #CFE3FF 0 6px, transparent 7px),
    radial-gradient(circle at 78% 48%, #E3D9FF 0 4px, transparent 5px),
    linear-gradient(160deg, #FFF3C4 0%, #FFFDF5 52%, #E6FAF0 100%);
  border-color: #0B1B3F;
  box-shadow: 0 0 0 1px #0B1B3F, 6px 6px 0 1px #0B6CF3, 6px 6px 0 2.5px #0B1B3F;
}
#yct .yct2-gate[data-pc="nho"].on:hover { box-shadow: 0 0 0 1px #0B1B3F, 9px 10px 0 1px #0B6CF3, 9px 10px 0 2.5px #0B1B3F; }
#yct .yct2-gate[data-pc="nho"]:focus-visible { outline: 3px solid #0B6CF3; outline-offset: 5px; }
/* Sao trang trí: vàng và hồng thay cho xanh nhạt */
#yct .yct2-gate[data-pc="nho"]::before { content: "★"; color: #FFB800; font-size: 24px; top: 58px; right: 92px; opacity: .9; }
#yct .yct2-gate[data-pc="nho"]::after { content: "✦"; color: #FF8FB1; font-size: 17px; top: 96px; right: 30px; opacity: .85; }

/* Gấu trúc PangPang: khung tròn xanh bạc hà, viền đậm, bóng khối, bong bóng "你好!" */
#yct .yct2-gate[data-pc="nho"] .yct2-ic {
  position: relative; overflow: visible; border-radius: 50%;
  background: #BFF0D9; border: 2.5px solid #0B1B3F; box-shadow: 3px 3px 0 #0B1B3F; transform: rotate(-5deg);
}
#yct .yct2-gate[data-pc="nho"] .yct2-ic::after {
  content: "你好!"; position: absolute; left: calc(100% + 12px); top: 4px; white-space: nowrap; pointer-events: none;
  font: 800 15px/1 Arial, system-ui, sans-serif; color: #0B1B3F;
  background: #FFFFFF; border: 2px solid #0B1B3F; border-radius: 14px 14px 14px 4px; padding: 6px 10px 4px;
  box-shadow: 2px 2px 0 #0B1B3F; transform: rotate(5deg); transform-origin: 0 100%;
  animation: yctm-hi 3.2s ease-in-out infinite;
}
#yct .yct2-gate[data-pc="nho"] .yct2-age {
  background: #FFD3DF; color: #0B1B3F; border: 1.5px solid #0B1B3F; box-shadow: 2px 2px 0 #0B1B3F; transform: rotate(-2deg);
}
#yct .yct2-gate[data-pc="nho"] .yct2-name {
  color: #0B1B3F; font-size: 21px;
  background: linear-gradient(transparent 62%, #FFE58A 62%, #FFE58A 92%, transparent 92%);
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
#yct .yct2-gate[data-pc="nho"] .yct2-desc { color: #23324F; }
#yct .yct2-gate[data-pc="nho"] .yct2-go {
  background: #FFD84D; color: #0B1B3F; border-color: #0B1B3F; box-shadow: 0 0 0 1px #0B1B3F, 3px 3px 0 1px #0B1B3F;
  font-weight: 800; transition: transform .15s, box-shadow .15s;
}
#yct .yct2-gate[data-pc="nho"]:hover .yct2-go { transform: translate(-1px, -2px); box-shadow: 0 0 0 1px #0B1B3F, 4px 5px 0 1px #0B1B3F; }
#yct .yct2-gate[data-pc="nho"].on .yct2-go { background: #0B6CF3; color: #FFFFFF; border-color: #0B1B3F; box-shadow: 0 0 0 1px #0B1B3F, 3px 3px 0 1px #0B1B3F; }

/* ================= 2. NỘI DUNG KHI ĐANG XEM TRẺ NHỎ ================= */
/* Dải "Đang xem" */
#yct.pc-nho .yct2-cur {
  background: #FFF8D9; border: 2px solid #0B1B3F; border-radius: 16px; padding: 8px 10px 8px 14px;
  box-shadow: 3px 3px 0 #0B1B3F; color: #0B1B3F;
}
#yct.pc-nho .yct2-swap { background: #FFFFFF; color: #0B1B3F; border: 2px solid #0B1B3F; box-shadow: 2px 2px 0 #0B1B3F; }
#yct.pc-nho .yct2-swap:hover { background: #FFD84D; color: #0B1B3F; }

/* Thanh chọn cấp: mỗi cấp một màu kẹo, nút đang chọn đậm màu hơn và nghiêng nhẹ */
html body #yct.pc-nho #kidLvBar .lv-btn {
  --c: #FFF1B8; --c-on: #FFD84D;
  background: var(--c) !important; color: #0B1B3F !important;
  border: 1px solid #0B1B3F !important; border-radius: 16px;
  box-shadow: 0 0 0 1px #0B1B3F, 3px 3px 0 1px #0B1B3F !important;
}
html body #yct.pc-nho #kidLvBar .lv-btn:nth-child(2) { --c: #D3F5E4; --c-on: #7DDCB0; }
html body #yct.pc-nho #kidLvBar .lv-btn:nth-child(3) { --c: #DCEBFF; --c-on: #8CC0FF; }
html body #yct.pc-nho #kidLvBar .lv-btn:nth-child(4) { --c: #ECE5FF; --c-on: #BBA6FF; }
html body #yct.pc-nho #kidLvBar .lv-btn:nth-child(5) { --c: #FFE6D2; --c-on: #FFB27A; }
html body #yct.pc-nho #kidLvBar .lv-btn:nth-child(6) { --c: #FFE1EA; --c-on: #FF9DB8; }
html body #yct.pc-nho #kidLvBar .lv-btn span, html body #yct.pc-nho #kidLvBar .lv-btn .z { color: #0B1B3F !important; }
html body #yct.pc-nho #kidLvBar .lv-btn .pill { background: rgba(255, 255, 255, .75) !important; color: #0B1B3F !important; }
html body #yct.pc-nho #kidLvBar .lv-btn:hover { box-shadow: 0 0 0 1px #0B1B3F, 4px 5px 0 1px #0B1B3F !important; }
html body #yct.pc-nho #kidLvBar .lv-btn.on {
  background: var(--c-on) !important; color: #0B1B3F !important; border-color: #0B1B3F !important;
  box-shadow: 0 0 0 1.5px #0B1B3F, 4px 4px 0 1.5px #0B1B3F !important; transform: translateY(-2px) rotate(-2deg);
}
html body #yct.pc-nho #kidLvBar .lv-btn.on span, html body #yct.pc-nho #kidLvBar .lv-btn.on .z { color: #0B1B3F !important; }
html body #yct.pc-nho #kidLvBar .lv-btn.on .pill { background: #FFFFFF !important; color: #0B1B3F !important; }
#yct.pc-nho #kidLvBar .lv-btn.on::after {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.2l2.9 6 6.6.8-4.9 4.6 1.3 6.5L12 16.9 6.1 20.1l1.3-6.5L2.5 9l6.6-.8z' fill='%23FFD84D' stroke='%230B1B3F' stroke-width='1.8' stroke-linejoin='round'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
  width: 24px; height: 24px; top: -12px; right: -9px;
}

/* Khung danh sách bài: nền kem có chấm màu thưa, viền đậm, bóng khối */
#yct.pc-nho #kidPanel {
  background:
    radial-gradient(circle, rgba(255, 216, 77, .45) 0 2px, transparent 2.5px) 0 0 / 46px 46px,
    radial-gradient(circle, rgba(125, 220, 176, .4) 0 2px, transparent 2.5px) 23px 23px / 46px 46px,
    #FFFDF6;
  border: 1px solid #0B1B3F; border-radius: 20px;
  box-shadow: 0 0 0 1.5px #0B1B3F, 7px 7px 0 1.5px #0B1B3F;
}
#yct.pc-nho #kidPanel .cp-head h3 { color: #0B1B3F; }
#yct.pc-nho #kidPanel .cp-head .pill.paid { background: #FFFFFF; color: #0B1B3F; border: 1.5px solid #0B1B3F; box-shadow: 2px 2px 0 #0B1B3F; }
html body #yct.pc-nho #kidPanel .cp-head .btn {
  border: 1px solid #0B1B3F !important; box-shadow: 0 0 0 1px #0B1B3F, 3px 3px 0 1px #0B1B3F !important; border-radius: 14px;
  transition: transform .15s, box-shadow .15s;
}
html body #yct.pc-nho #kidPanel .cp-head .btn-gold { background: #FFD84D !important; color: #0B1B3F !important; }
html body #yct.pc-nho #kidPanel .cp-head .btn-red { background: #0B6CF3 !important; color: #FFFFFF !important; }
html body #yct.pc-nho #kidPanel .cp-head .btn:hover { transform: translate(-1px, -2px); box-shadow: 0 0 0 1px #0B1B3F, 4px 5px 0 1px #0B1B3F !important; }

/* Ô "Lịch học gợi ý": xanh bạc hà, viền đậm */
#yct.pc-nho #kidPanel details.rqx-fold { background: #EAFBF2; border: 2px solid #0B1B3F; border-radius: 16px; box-shadow: 3px 3px 0 #0B1B3F; }
#yct.pc-nho #kidPanel details.rqx-fold > summary { color: #0B1B3F; font-family: Arial, system-ui, sans-serif; font-weight: 700; font-size: 16px; }

#yct.pc-nho #kidPanel details.rqx-fold > summary::after {
  flex-shrink: 0; white-space: nowrap; background: #FFFFFF; color: #0B1B3F; border: 1.5px solid #0B1B3F; box-shadow: 2px 2px 0 #0B1B3F;
  font-family: Arial, system-ui, sans-serif;
}

/* Thẻ bài: 4 màu pastel xoay vòng, viền đậm, bóng khối, nảy nghiêng khi rê chuột */
html body #yct.pc-nho #kidPanel .l-card {
  --c: #FFF8D9; --c2: #FFD84D;
  background: var(--c); border: 1px solid #0B1B3F; border-radius: 18px;
  box-shadow: 0 0 0 1.5px #0B1B3F, 4px 4px 0 1.5px #0B1B3F;
}
html body #yct.pc-nho #kidPanel .l-card:nth-child(4n+2) { --c: #EAFBF2; --c2: #7DDCB0; }
html body #yct.pc-nho #kidPanel .l-card:nth-child(4n+3) { --c: #EDF4FF; --c2: #8CC0FF; }
html body #yct.pc-nho #kidPanel .l-card:nth-child(4n+4) { --c: #F4EFFF; --c2: #BBA6FF; }
html body #yct.pc-nho #kidPanel .l-card:nth-child(odd):hover { transform: translate(-1px, -4px) rotate(-1deg); box-shadow: 0 0 0 1.5px #0B1B3F, 6px 8px 0 1.5px #0B1B3F; }
html body #yct.pc-nho #kidPanel .l-card:nth-child(even):hover { transform: translate(-1px, -4px) rotate(1deg); box-shadow: 0 0 0 1.5px #0B1B3F, 6px 8px 0 1.5px #0B1B3F; }
html body #yct.pc-nho #kidPanel .l-card.dang { box-shadow: 0 0 0 2px #0B6CF3, 4px 4px 0 2px #0B1B3F; }
html body #yct.pc-nho #kidPanel .l-no {
  background: var(--c2) !important; color: #0B1B3F !important; border: 1.5px solid #0B1B3F !important; box-shadow: 2px 2px 0 #0B1B3F !important;
  font-family: Arial, system-ui, sans-serif; font-weight: 800; padding: 2px 10px 0;
}
#yct.pc-nho #kidPanel .l-title { color: #0B1B3F; font-family: Arial, system-ui, sans-serif; font-weight: 700; font-size: 18px; line-height: 1.3; }
#yct.pc-nho #kidPanel .l-title .zh { color: #0B6CF3; font-weight: 700; }
html body #yct.pc-nho #kidPanel .l-card .l-chip.vao {
  background: #FFFFFF !important; color: #0B1B3F !important; border: 1.5px solid #0B1B3F !important;
  box-shadow: 2px 2px 0 #0B1B3F !important; font-weight: 800;
}
html body #yct.pc-nho #kidPanel .l-card .l-chip.vao:hover { background: #0B6CF3 !important; color: #FFFFFF !important; }
html body #yct.pc-nho #kidPanel .l-card .l-chip.cho {
  background: rgba(255, 255, 255, .7) !important; color: #475569 !important; border: 1.5px dashed #64748B !important; box-shadow: none !important;
}

@keyframes yctm-hi { 0%, 70%, 100% { transform: rotate(5deg) scale(1); } 78% { transform: rotate(-3deg) scale(1.08); } 88% { transform: rotate(7deg) scale(1); } }

/* ================= 3. CỔNG TRẺ LỚN (CARTOON LỚN 8-12 TUỔI, 06/11/2026) ================= */
#yct .yct2-gate[data-pc="lon"] {
  position: relative; overflow: hidden; isolation: isolate;
  background:
    radial-gradient(circle at 92% 14%, #7DD3FC 0 28px, rgba(125, 211, 252, .32) 29px 39px, transparent 40px),
    radial-gradient(circle at 86% 92%, #DDD6FE 0 46px, transparent 47px),
    radial-gradient(circle at 68% 72%, #FDE68A 0 5px, transparent 6px),
    radial-gradient(circle at 56% 18%, #A5F3FC 0 6px, transparent 7px),
    radial-gradient(circle at 78% 46%, #FBCFE8 0 4.5px, transparent 5.5px),
    linear-gradient(155deg, #E0F2FE 0%, #FFFFFF 50%, #EEF2FF 100%);
  border-color: #0B1B3F;
  box-shadow: 0 0 0 1.5px #0B1B3F, 6px 6px 0 1.5px #0B1B3F;
  transition: transform .22s cubic-bezier(.34, 1.56, .64, 1), box-shadow .2s;
}
#yct .yct2-gate[data-pc="lon"]:hover {
  transform: translate(-2px, -3px) rotate(.5deg);
  box-shadow: 0 0 0 1.5px #0B1B3F, 9px 10px 0 1.5px #0B1B3F;
  border-color: #0B1B3F;
}
#yct .yct2-gate[data-pc="lon"].on {
  background:
    radial-gradient(circle at 92% 14%, #38BDF8 0 28px, rgba(56, 189, 248, .32) 29px 39px, transparent 40px),
    radial-gradient(circle at 86% 92%, #C4B5FD 0 46px, transparent 47px),
    radial-gradient(circle at 68% 72%, #FDE68A 0 5px, transparent 6px),
    radial-gradient(circle at 56% 18%, #A5F3FC 0 6px, transparent 7px),
    radial-gradient(circle at 78% 46%, #FBCFE8 0 4.5px, transparent 5.5px),
    linear-gradient(155deg, #BAE6FD 0%, #F8FAFF 50%, #E0E7FF 100%);
  border-color: #0B1B3F;
  box-shadow: 0 0 0 1px #0B1B3F, 6px 6px 0 1px #0B6CF3, 6px 6px 0 2.5px #0B1B3F;
}
#yct .yct2-gate[data-pc="lon"].on:hover {
  box-shadow: 0 0 0 1px #0B1B3F, 9px 10px 0 1px #0B6CF3, 9px 10px 0 2.5px #0B1B3F;
}
#yct .yct2-gate[data-pc="lon"]:focus-visible { outline: 3px solid #0B6CF3; outline-offset: 5px; }
#yct .yct2-gate[data-pc="lon"]::before {
  content: "★"; position: absolute; z-index: -1; pointer-events: none;
  color: #F59E0B; font-size: 23px; line-height: 1; top: 56px; right: 88px; opacity: .92;
}
#yct .yct2-gate[data-pc="lon"]::after {
  content: "✦"; position: absolute; z-index: -1; pointer-events: none;
  color: #6366F1; font-size: 17px; line-height: 1; top: 94px; right: 28px; opacity: .88;
}
#yct .yct2-gate[data-pc="lon"] .yct2-ic {
  position: relative; overflow: visible; border-radius: 18px;
  background: linear-gradient(135deg, #BAE6FD 0%, #DDD6FE 100%);
  border: 2.5px solid #0B1B3F; box-shadow: 3px 3px 0 #0B1B3F; transform: rotate(4deg);
}
#yct .yct2-gate[data-pc="lon"] .yct2-ic::after {
  content: "加油!"; position: absolute; left: calc(100% + 12px); top: 4px; white-space: nowrap; pointer-events: none;
  font: 800 15px/1 Arial, system-ui, sans-serif; color: #0B1B3F;
  background: #FFFBEB; border: 2px solid #0B1B3F; border-radius: 14px 14px 14px 4px; padding: 6px 10px 4px;
  box-shadow: 2px 2px 0 #0B1B3F; transform: rotate(-4deg); transform-origin: 0 100%;
  animation: yctm-hi 3.4s ease-in-out infinite;
}
#yct .yct2-gate[data-pc="lon"] .yct2-age {
  background: #C7D2FE; color: #0B1B3F; border: 1.5px solid #0B1B3F; box-shadow: 2px 2px 0 #0B1B3F; transform: rotate(1.5deg);
}
#yct .yct2-gate[data-pc="lon"] .yct2-name {
  color: #0B1B3F; font-size: 21px;
  background: linear-gradient(transparent 62%, #BAE6FD 62%, #BAE6FD 92%, transparent 92%);
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
#yct .yct2-gate[data-pc="lon"] .yct2-desc { color: #1E293B; }
#yct .yct2-gate[data-pc="lon"] .yct2-go {
  background: #38BDF8; color: #0B1B3F; border-color: #0B1B3F; box-shadow: 0 0 0 1px #0B1B3F, 3px 3px 0 1px #0B1B3F;
  font-weight: 800; transition: transform .15s, box-shadow .15s;
}
#yct .yct2-gate[data-pc="lon"]:hover .yct2-go { transform: translate(-1px, -2px); box-shadow: 0 0 0 1px #0B1B3F, 4px 5px 0 1px #0B1B3F; }
#yct .yct2-gate[data-pc="lon"].on .yct2-go { background: #0B6CF3; color: #FFFFFF; border-color: #0B1B3F; box-shadow: 0 0 0 1px #0B1B3F, 3px 3px 0 1px #0B1B3F; }

/* ================= 4. NỘI DUNG KHI ĐANG XEM TRẺ LỚN (CARTOON LỚN #yct.pc-lon) ================= */
#yct.pc-lon .yct2-cur {
  background: linear-gradient(90deg, #E0F2FE 0%, #EEF2FF 100%);
  border: 2px solid #0B1B3F; border-radius: 16px; padding: 8px 10px 8px 14px;
  box-shadow: 3px 3px 0 #0B1B3F; color: #0B1B3F;
}
#yct.pc-lon .yct2-cur > span::before { content: "🚀"; margin-right: 6px; display: inline-block; }
#yct.pc-lon .yct2-swap { background: #FFFFFF; color: #0B1B3F; border: 2px solid #0B1B3F; box-shadow: 2px 2px 0 #0B1B3F; }
#yct.pc-lon .yct2-swap:hover { background: #38BDF8; color: #0B1B3F; }

/* Thanh chọn cấp YCT 1 .. Kids 6 cho Trẻ lớn: mỗi cấp một màu Cartoon lớn tươi tắn, viền đậm, bóng khối */
#yct.pc-lon #kidLvBar { margin-bottom: 32px; }
html body #yct.pc-lon #kidLvBar .lv-btn {
  --c: #E0F2FE; --c-on: #38BDF8;
  background: var(--c) !important; color: #0B1B3F !important;
  border: 1px solid #0B1B3F !important; border-radius: 16px;
  box-shadow: 0 0 0 1px #0B1B3F, 3px 3px 0 1px #0B1B3F !important;
}
html body #yct.pc-lon #kidLvBar .lv-btn:nth-child(2) { --c: #CCFBF1; --c-on: #2DD4BF; }
html body #yct.pc-lon #kidLvBar .lv-btn:nth-child(3) { --c: #E0E7FF; --c-on: #818CF8; }
html body #yct.pc-lon #kidLvBar .lv-btn:nth-child(4) { --c: #FEF3C7; --c-on: #FBBF24; }
html body #yct.pc-lon #kidLvBar .lv-btn:nth-child(5) { --c: #FFEDD5; --c-on: #FB923C; }
html body #yct.pc-lon #kidLvBar .lv-btn:nth-child(6) { --c: #FCE7F3; --c-on: #F472B6; }
html body #yct.pc-lon #kidLvBar .lv-btn span, html body #yct.pc-lon #kidLvBar .lv-btn .z { color: #0B1B3F !important; }
html body #yct.pc-lon #kidLvBar .lv-btn .pill { background: rgba(255, 255, 255, .8) !important; color: #0B1B3F !important; }
html body #yct.pc-lon #kidLvBar .lv-btn:hover { box-shadow: 0 0 0 1px #0B1B3F, 4px 5px 0 1px #0B1B3F !important; transform: translateY(-2px); }
html body #yct.pc-lon #kidLvBar .lv-btn.on {
  background: var(--c-on) !important; color: #0B1B3F !important; border-color: #0B1B3F !important;
  box-shadow: 0 0 0 1.5px #0B1B3F, 4px 4px 0 1.5px #0B1B3F !important; transform: translateY(-2px) rotate(-1.5deg);
}
html body #yct.pc-lon #kidLvBar .lv-btn.on span, html body #yct.pc-lon #kidLvBar .lv-btn.on .z { color: #0B1B3F !important; }
html body #yct.pc-lon #kidLvBar .lv-btn.on .pill { background: #FFFFFF !important; color: #0B1B3F !important; }
#yct.pc-lon #kidLvBar .lv-btn.on::after {
  content: ""; position: absolute; top: -11px; right: -8px; width: 22px; height: 22px; pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.2l2.9 6 6.6.8-4.9 4.6 1.3 6.5L12 16.9 6.1 20.1l1.3-6.5L2.5 9l6.6-.8z' fill='%23FFD84D' stroke='%230B1B3F' stroke-width='1.8' stroke-linejoin='round'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
  animation: yctc-twinkle 2.8s ease-in-out infinite;
}

/* Khung danh sách bài Trẻ lớn: nền xanh mây sáng có chấm sao nhẹ, viền đậm, bóng khối, tên lửa + bút chì trên mép */
#yct.pc-lon #kidPanel {
  background:
    radial-gradient(circle, rgba(56, 189, 248, .32) 0 2px, transparent 2.5px) 0 0 / 46px 46px,
    radial-gradient(circle, rgba(129, 140, 248, .26) 0 2px, transparent 2.5px) 23px 23px / 46px 46px,
    linear-gradient(180deg, #F4F9FF 0%, #FFFFFF 100%);
  border: 1px solid #0B1B3F; border-radius: 20px;
  box-shadow: 0 0 0 1.5px #0B1B3F, 7px 7px 0 1.5px #0B1B3F;
}
#yct.pc-lon #kidPanel::before {
  content: ""; position: absolute; top: -32px; right: 24px; width: 46px; height: 34px; pointer-events: none; z-index: 1;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 48'%3E%3Cpath d='M21 34c0-14 7-25 11-29 4 4 11 15 11 29 0 4-1.5 8-3 11H24c-1.5-3-3-7-3-11z' fill='%2338BDF8' stroke='%230B1B3F' stroke-width='2.5' stroke-linejoin='round'/%3E%3Cpath d='M21 35l-8 6 2 6 8-2M43 35l8 6-2 6-8-2' fill='%23FF7849' stroke='%230B1B3F' stroke-width='2.3' stroke-linejoin='round'/%3E%3Ccircle cx='32' cy='25' r='6' fill='%23FFFBEB' stroke='%230B1B3F' stroke-width='2.3'/%3E%3Cpath d='M52 8l1.8 3.8 4.2.5-3.1 2.9.8 4.1-3.7-2-3.7 2 .8-4.1-3.1-2.9 4.2-.5z' fill='%23FFD84D' stroke='%230B1B3F' stroke-width='1.8' stroke-linejoin='round'/%3E%3C/svg%3E") center bottom / 100% auto no-repeat;
  animation: yctc-peek 4.6s ease-in-out infinite;
}
#yct.pc-lon #kidPanel .cp-head::before { right: 82px; }
#yct.pc-lon #kidPanel .cp-head h3 { color: #0B1B3F; }
#yct.pc-lon #kidPanel .cp-head .pill.free,
#yct.pc-lon #kidPanel .cp-head .pill.paid {
  background: #FEF08A; color: #0B1B3F; border: 1.5px solid #0B1B3F; box-shadow: 2px 2px 0 #0B1B3F; font-weight: 800;
}
html body #yct.pc-lon #kidPanel .cp-head .btn {
  border: 1px solid #0B1B3F !important; box-shadow: 0 0 0 1px #0B1B3F, 3px 3px 0 1px #0B1B3F !important; border-radius: 14px;
  font-weight: 800; transition: transform .15s, box-shadow .15s;
}
html body #yct.pc-lon #kidPanel .cp-head .btn-line { background: #FFFFFF !important; color: #0B1B3F !important; }
html body #yct.pc-lon #kidPanel .cp-head .btn-gold { background: #FFD84D !important; color: #0B1B3F !important; }
html body #yct.pc-lon #kidPanel .cp-head .btn-red { background: #0B6CF3 !important; color: #FFFFFF !important; }
html body #yct.pc-lon #kidPanel .cp-head .btn:hover { transform: translate(-1px, -2px); box-shadow: 0 0 0 1px #0B1B3F, 4px 5px 0 1px #0B1B3F !important; }

/* Ô "Lịch học gợi ý" Trẻ lớn: nền xanh mây, viền đậm */
#yct.pc-lon #kidPanel details.rqx-fold { background: #E0F2FE; border: 2px solid #0B1B3F; border-radius: 16px; box-shadow: 3px 3px 0 #0B1B3F; }
#yct.pc-lon #kidPanel details.rqx-fold > summary { color: #0B1B3F; font-family: Arial, system-ui, sans-serif; font-weight: 700; font-size: 16px; }
#yct.pc-lon #kidPanel details.rqx-fold > summary::after {
  flex-shrink: 0; white-space: nowrap; background: #FFFFFF; color: #0B1B3F; border: 1.5px solid #0B1B3F; box-shadow: 2px 2px 0 #0B1B3F;
  font-family: Arial, system-ui, sans-serif;
}

/* Thẻ bài Trẻ lớn: 4 màu Cartoon lớn xoay vòng, bố cục ngang 1 hàng (tên bài bên trái, duy nhất 1 nút Vào học ngay bên phải) */
html body #yct.pc-lon #kidPanel .l-card {
  --c: #F0F9FF; --c2: #7DD3FC;
  display: flex; flex-direction: row; align-items: center; justify-content: space-between; gap: 12px;
  background: var(--c); border: 1px solid #0B1B3F; border-radius: 18px; padding: 14px 16px;
  box-shadow: 0 0 0 1.5px #0B1B3F, 4px 4px 0 1.5px #0B1B3F;
}
html body #yct.pc-lon #kidPanel .l-card:nth-child(4n+2) { --c: #ECFDF5; --c2: #6EE7B7; }
html body #yct.pc-lon #kidPanel .l-card:nth-child(4n+3) { --c: #EEF2FF; --c2: #A5B4FC; }
html body #yct.pc-lon #kidPanel .l-card:nth-child(4n+4) { --c: #FFFBEB; --c2: #FCD34D; }
html body #yct.pc-lon #kidPanel .l-card:nth-child(odd):hover { transform: translate(-1px, -3px) rotate(-.6deg); box-shadow: 0 0 0 1.5px #0B1B3F, 6px 7px 0 1.5px #0B1B3F; }
html body #yct.pc-lon #kidPanel .l-card:nth-child(even):hover { transform: translate(-1px, -3px) rotate(.6deg); box-shadow: 0 0 0 1.5px #0B1B3F, 6px 7px 0 1.5px #0B1B3F; }
html body #yct.pc-lon #kidPanel .l-card.dang { box-shadow: 0 0 0 2px #0B6CF3, 4px 4px 0 2px #0B1B3F; }
#yct.pc-lon #kidPanel .l-top { flex: 1; min-width: 0; align-items: center; }
#yct.pc-lon #kidPanel .l-acts { flex: none; }
html body #yct.pc-lon #kidPanel .l-no {
  background: var(--c2) !important; color: #0B1B3F !important; border: 1.5px solid #0B1B3F !important; box-shadow: 2px 2px 0 #0B1B3F !important;
  font-family: Arial, system-ui, sans-serif; font-weight: 800; padding: 2px 10px 0; transform: rotate(-2deg);
}
#yct.pc-lon #kidPanel .l-title { color: #0B1B3F; font-family: Arial, system-ui, sans-serif; font-weight: 700; font-size: 18px; line-height: 1.3; }
#yct.pc-lon #kidPanel .l-title .zh { color: #0B6CF3; font-weight: 800; }
html body #yct.pc-lon #kidPanel .l-card .l-chip.vao {
  background: #FFD84D !important; color: #0B1B3F !important; border: 1.5px solid #0B1B3F !important;
  box-shadow: 2px 2px 0 #0B1B3F !important; font-weight: 800; padding: 6px 14px; font-size: 14.5px; white-space: nowrap;
}
html body #yct.pc-lon #kidPanel .l-card .l-chip.vao:hover { background: #0B6CF3 !important; color: #FFFFFF !important; transform: translateY(-1px); }

/* ================= 5. ĐIỆN THOẠI ================= */
@media (max-width: 720px) {
  #yct .yct2-gate[data-pc="nho"],
  #yct .yct2-gate[data-pc="lon"] { box-shadow: 0 0 0 1.5px #0B1B3F, 4px 4px 0 1.5px #0B1B3F; }
  #yct .yct2-gate[data-pc="nho"].on,
  #yct .yct2-gate[data-pc="lon"].on { box-shadow: 0 0 0 1px #0B1B3F, 4px 4px 0 1px #0B6CF3, 4px 4px 0 2.5px #0B1B3F; }
  #yct .yct2-gate[data-pc="nho"] .yct2-name,
  #yct .yct2-gate[data-pc="lon"] .yct2-name { font-size: 19.5px; }
  #yct .yct2-gate[data-pc="nho"] .yct2-ic::after,
  #yct .yct2-gate[data-pc="lon"] .yct2-ic::after { font-size: 14px; left: calc(100% + 10px); }
  #yct .yct2-gate[data-pc="nho"]::before,
  #yct .yct2-gate[data-pc="lon"]::before { top: 22px; right: 70px; }
  #yct.pc-nho #kidPanel,
  #yct.pc-lon #kidPanel { box-shadow: 0 0 0 1.5px #0B1B3F, 4px 4px 0 1.5px #0B1B3F; }
  #yct.pc-nho #kidPanel .l-title,
  #yct.pc-lon #kidPanel .l-title { font-size: 17px; }
  #yct.pc-lon #kidPanel::before { top: -27px; right: 16px; width: 38px; height: 28px; }
  #yct.pc-lon #kidPanel .cp-head::before { right: 64px; }
}
@media (max-width: 480px) {
  html body #yct.pc-lon #kidPanel .l-card { flex-wrap: wrap; gap: 8px; }
  #yct.pc-lon #kidPanel .l-acts { margin-left: auto; }
}

/* Máy bật giảm chuyển động: đứng yên hết */
@media (prefers-reduced-motion: reduce) {
  #yct .yct2-gate[data-pc="nho"] .yct2-ic::after,
  #yct .yct2-gate[data-pc="lon"] .yct2-ic::after,
  #yct.pc-lon #kidLvBar .lv-btn.on::after,
  #yct.pc-lon #kidPanel::before { animation: none !important; }
  #yct .yct2-gate[data-pc="nho"], #yct .yct2-gate[data-pc="nho"] .yct2-go, #yct.pc-nho #kidPanel .l-card, #yct.pc-nho #kidPanel .cp-head .btn,
  #yct .yct2-gate[data-pc="lon"], #yct .yct2-gate[data-pc="lon"] .yct2-go, #yct.pc-lon #kidPanel .l-card, #yct.pc-lon #kidPanel .cp-head .btn { transition: none !important; }
  #yct .yct2-gate[data-pc="nho"]:hover, #yct .yct2-gate[data-pc="nho"]:hover .yct2-go, html body #yct.pc-nho #kidPanel .l-card:hover, html body #yct.pc-nho #kidPanel .cp-head .btn:hover,
  #yct .yct2-gate[data-pc="lon"]:hover, #yct .yct2-gate[data-pc="lon"]:hover .yct2-go, html body #yct.pc-lon #kidPanel .l-card:hover, html body #yct.pc-lon #kidPanel .cp-head .btn:hover { transform: none !important; }
}