/* YCT Kids: thêm chút hiệu ứng hoạt hình cho cả khu /giao-trinh/#yct (05/11/2026, anh Hạnh:
   "cả trang này thêm hiệu ứng cartoon chút nữa, phù hợp trẻ").
   Nạp SAU yct-nho-cartoon.css và yct-nho-vui.css. Chỉ áp trong #yct, và đầu trang chỉ khi body.yct-cartoon-mode
   (site.js bật lớp này khi đang mở tab YCT). Không đụng HSK, Người đi làm hay các nhánh khác.
   Giữ quy ước: vui nhưng không rối mắt, nền gần như trắng, chữ đậm dễ đọc, ít màu
   (trung tính + dải xanh #0B6CF3 + hồng nhạt họ đỏ), chuyển động nhẹ, tắt hết khi máy bật giảm chuyển động.
   Trang trí đều là ảnh vẽ (SVG) nằm ở lề trống hoặc mép khung, không che chữ, không chiếm chỗ bấm.
   KHÔNG đổi padding/viền của .yct2-gate (2 cổng luôn bằng nhau). Ảnh SVG viết thẳng trong file (data URI). */

/* ---- 1. Nền khu YCT: trời xanh rất nhạt ở trên, trắng dần xuống dưới, đồi thoải ở đáy ---- */
#yct { background: linear-gradient(180deg, #EEF5FF 0, #F7FAFF 240px, #FFFFFF 520px); }
#yct > section { position: relative; isolation: isolate; overflow: hidden; overflow: clip; padding-bottom: 66px !important; }
#yct > section::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 46px; z-index: -1; pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 60' preserveAspectRatio='none'%3E %3Cpath d='M0 32C180 6 360 6 540 28S900 54 1080 26S1340 8 1440 20V60H0Z' fill='%23F1F6FE'/%3E %3Cpath d='M0 46C240 22 420 26 640 42S1060 58 1240 38S1400 34 1440 40V60H0Z' fill='%23E4EEFD'/%3E%3C/svg%3E") bottom / 100% 100% no-repeat;
}

/* ---- 2. Tiêu đề: chữ tròn thân thiện (Baloo 2, có dấu tiếng Việt), gạch chân lượn sóng, cụm mây nhỏ bên phải ---- */
#yct .yct2-head { position: relative; }
#yct .yct2-head h2 { font-family: Arial, system-ui, sans-serif; font-weight: 800; font-size: clamp(25px, 2.9vw, 32px); line-height: 1.2; letter-spacing: 0; color: #0B1B3F; margin-bottom: 4px; }
#yct .yct2-head h2::after {
  content: ""; display: block; width: 136px; height: 10px; margin-top: 2px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 10'%3E%3Cpath d='M3 6Q9.5 1 16 6T29 6T42 6T55 6T68 6T81 6T94 6T107 6T117 5' fill='none' stroke='%239CC4FD' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E") left center / 100% 100% no-repeat;
}
#yct .yct2-head::after {
  content: ""; position: absolute; top: -10px; right: 6px; width: 150px; height: 70px; 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='%23FBD3DA' stroke='%23F2A7B5' stroke-width='1.4' stroke-linejoin='round'/%3E%3C/svg%3E") 4px 8px / 16px 16px no-repeat, 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='%23D5E3FA' stroke='%239CC4FD' stroke-width='1.4' stroke-linejoin='round'/%3E%3C/svg%3E") 134px 0 / 14px 14px no-repeat, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -6 124 70'%3E%3Cpath d='M22 58 A16 16 0 0 1 20 26 A20 20 0 0 1 52 14 A26 26 0 0 1 98 24 A17 17 0 0 1 100 58 Z' fill='%23fff' stroke='%23BBD4FB' stroke-width='3' stroke-linejoin='round'/%3E %3Ccircle cx='50' cy='38' r='3' fill='%230B1B3F'/%3E%3Ccircle cx='74' cy='38' r='3' fill='%230B1B3F'/%3E %3Ccircle cx='42' cy='46' r='4' fill='%23F9B8C3' opacity='.8'/%3E%3Ccircle cx='82' cy='46' r='4' fill='%23F9B8C3' opacity='.8'/%3E %3Cpath d='M56 45 Q62 51 68 45' fill='none' stroke='%230B1B3F' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E") 26px 4px / 100px auto no-repeat;
  animation: yctc-float 6s ease-in-out infinite;
}

/* ---- 3. Mây, sao, bóng bay ở lề trái/phải (chỉ màn rộng, nơi có lề trống; không che nội dung) ---- */
@media (min-width: 1240px) {
  #yct > section::before, #yct > section > .wrap::before {
    content: ""; position: absolute; top: 0; bottom: 0; width: calc((100% - 1004px) / 2); z-index: -1; pointer-events: none;
  }
  #yct > section::before {
    left: 0;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -6 124 70'%3E%3Cpath d='M22 58 A16 16 0 0 1 20 26 A20 20 0 0 1 52 14 A26 26 0 0 1 98 24 A17 17 0 0 1 100 58 Z' fill='%23fff' stroke='%23C9DCFB' stroke-width='3' stroke-linejoin='round'/%3E%3C/svg%3E") center 64px / 92px auto no-repeat, 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='%23D5E3FA' stroke='%239CC4FD' stroke-width='1.4' stroke-linejoin='round'/%3E%3C/svg%3E") 68% 230px / 18px 18px no-repeat,
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -6 124 70'%3E%3Cpath d='M22 58 A16 16 0 0 1 20 26 A20 20 0 0 1 52 14 A26 26 0 0 1 98 24 A17 17 0 0 1 100 58 Z' fill='%23fff' stroke='%23C9DCFB' stroke-width='3' stroke-linejoin='round'/%3E%3C/svg%3E") 38% 420px / 62px auto no-repeat, 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='%23FBD3DA' stroke='%23F2A7B5' stroke-width='1.4' stroke-linejoin='round'/%3E%3C/svg%3E") 30% 62% / 15px 15px no-repeat, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -6 124 70'%3E%3Cpath d='M22 58 A16 16 0 0 1 20 26 A20 20 0 0 1 52 14 A26 26 0 0 1 98 24 A17 17 0 0 1 100 58 Z' fill='%23fff' stroke='%23C9DCFB' stroke-width='3' stroke-linejoin='round'/%3E%3C/svg%3E") center 82% / 76px auto no-repeat;
    animation: yctc-drift 14s ease-in-out infinite;
  }
  #yct > section > .wrap::before {
    right: 0;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 76 124'%3E %3Cpath d='M22 44c-2 18 10 34 16 76' fill='none' stroke='%239CC4FD' stroke-width='1.6' stroke-linecap='round'/%3E %3Cpath d='M53 52c0 22-12 34-15 68' fill='none' stroke='%239CC4FD' stroke-width='1.6' stroke-linecap='round'/%3E %3Cellipse cx='22' cy='23' rx='17' ry='20' fill='%23FBD3DA' stroke='%23F2A7B5' stroke-width='2'/%3E %3Cpath d='M19 43l3 4 3-4z' fill='%23F2A7B5'/%3E %3Cellipse cx='16' cy='15' rx='3.6' ry='6.4' fill='%23fff' opacity='.75' transform='rotate(22 16 15)'/%3E %3Cellipse cx='53' cy='31' rx='16' ry='19' fill='%23D5E3FA' stroke='%239CC4FD' stroke-width='2'/%3E %3Cpath d='M50 50l3 4 3-4z' fill='%239CC4FD'/%3E %3Cellipse cx='47' cy='23' rx='3.4' ry='6' fill='%23fff' opacity='.8' transform='rotate(22 47 23)'/%3E%3C/svg%3E") center 150px / 66px auto no-repeat, 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='%23D5E3FA' stroke='%239CC4FD' stroke-width='1.4' stroke-linejoin='round'/%3E%3C/svg%3E") 30% 70px / 16px 16px no-repeat,
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -6 124 70'%3E%3Cpath d='M22 58 A16 16 0 0 1 20 26 A20 20 0 0 1 52 14 A26 26 0 0 1 98 24 A17 17 0 0 1 100 58 Z' fill='%23fff' stroke='%23C9DCFB' stroke-width='3' stroke-linejoin='round'/%3E%3C/svg%3E") center 58% / 70px auto no-repeat, 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='%23D5E3FA' stroke='%239CC4FD' stroke-width='1.4' stroke-linejoin='round'/%3E%3C/svg%3E") 66% 80% / 14px 14px no-repeat;
    animation: yctc-bob 5.5s ease-in-out infinite;
  }
}

/* ---- 4. Hai cổng: nảy nhẹ khi rê chuột, biểu tượng lắc lư (cổng Trẻ nhỏ đã có sẵn trong yct-nho-vui.css) ---- */
#yct .yct2-name { font-family: Arial, system-ui, sans-serif; font-weight: 700; font-size: 20px; line-height: 1.25; letter-spacing: 0; }
#yct .yct2-gate[data-pc="lon"] { transition: transform .22s cubic-bezier(.34, 1.56, .64, 1), box-shadow .2s, border-color .15s; }
#yct .yct2-gate[data-pc="lon"]:hover { transform: translateY(-3px); }
#yct .yct2-gate[data-pc="lon"] .yct2-ic svg { transform-origin: 50% 80%; }
#yct .yct2-gate[data-pc="lon"]:hover .yct2-ic svg { animation: yctc-wiggle .6s ease-in-out 1; }
#yct .yct2-gate[data-pc="lon"] .yct2-go { transition: transform .15s; }
#yct .yct2-gate[data-pc="lon"]:hover .yct2-go { transform: translateY(-1px); }

/* ---- 5. Ghi chú "Chung một chương trình" thành bong bóng lời nói có đuôi chỉ lên hai cổng ---- */
#yct .yct2-unify { position: relative; border: 1.5px solid #D5E3FA; border-radius: 16px; background: #FFFFFF; margin-top: 18px; }
#yct .yct2-unify::before, #yct .yct2-unify::after {
  content: ""; position: absolute; left: 30px; width: 0; height: 0; border: 10px solid transparent; border-top: 0; pointer-events: none;
}
#yct .yct2-unify::before { top: -11px; border-bottom: 11px solid #D5E3FA; }
#yct .yct2-unify::after { top: -8.5px; left: 31.5px; border-width: 0 8.5px 9.5px; border-bottom-color: #FFFFFF; }

/* ---- 6. Thanh chọn cấp: chữ tròn, nảy lên khi rê chuột ---- */
#yct #kidLvBar .lv-btn { font-family: Arial, system-ui, sans-serif; font-weight: 700; font-size: 16px; line-height: 1.2; position: relative; }
#yct #kidLvBar .lv-btn .pill { font-family: Arial, system-ui, sans-serif; }
#yct:not(.pc-nho) #kidLvBar .lv-btn { transition: transform .18s cubic-bezier(.34, 1.56, .64, 1), border-color .15s, background .15s; }
#yct:not(.pc-nho) #kidLvBar .lv-btn:hover { transform: translateY(-2px); }
/* Trẻ nhỏ: ngôi sao nhỏ đậu trên nút cấp đang chọn */
#yct.pc-nho #kidLvBar { margin-bottom: 34px; }
#yct.pc-nho #kidLvBar .lv-btn.on::after {
  content: ""; position: absolute; top: -9px; right: -7px; width: 20px; height: 20px; 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='%239CC4FD' stroke='%230B6CF3' stroke-width='1.4' stroke-linejoin='round'/%3E%3C/svg%3E") center / 100% 100% no-repeat; animation: yctc-twinkle 2.8s ease-in-out infinite;
}

/* ---- 7. Khung danh sách bài: linh vật ló đầu trên mép khung ---- */
#yct #kidPanel { position: relative; }
#yct #kidPanel .cp-head h3 { font-family: Arial, system-ui, sans-serif; font-weight: 800; font-size: 23px; line-height: 1.25; letter-spacing: 0; }
#yct #kidPanel .cp-head h3 .muted { font-family: Arial, system-ui, sans-serif; }
/* Trẻ nhỏ: gấu trúc PangPang ló đầu, thỉnh thoảng nhún nhẹ */
#yct.pc-nho #kidPanel::before {
  content: ""; position: absolute; top: -33px; right: 28px; width: 50px; height: 35px; pointer-events: none; z-index: 1;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 44'%3E %3Ccircle cx='13' cy='16' r='7.5' fill='%230B1B3F'/%3E%3Ccircle cx='51' cy='16' r='7.5' fill='%230B1B3F'/%3E %3Cpath d='M6.5 40 A25.5 25.5 0 0 1 57.5 40 Z' fill='%23fff' stroke='%230B1B3F' stroke-width='2.5' stroke-linejoin='round'/%3E %3Cellipse cx='23' cy='28' rx='5' ry='6.2' fill='%230B1B3F' transform='rotate(-14 23 28)'/%3E%3Cellipse cx='41' cy='28' rx='5' ry='6.2' fill='%230B1B3F' transform='rotate(14 41 28)'/%3E %3Ccircle cx='24' cy='27' r='1.9' fill='%23fff'/%3E%3Ccircle cx='42' cy='27' r='1.9' fill='%23fff'/%3E %3Cellipse cx='32' cy='34.5' rx='3.2' ry='2.2' fill='%230B1B3F'/%3E %3Ccircle cx='15.5' cy='34' r='3' fill='%23F9B8C3' opacity='.85'/%3E%3Ccircle cx='48.5' cy='34' r='3' fill='%23F9B8C3' opacity='.85'/%3E %3Cellipse cx='18' cy='40' rx='7.5' ry='4.2' fill='%230B1B3F'/%3E%3Cellipse cx='46' cy='40' rx='7.5' ry='4.2' fill='%230B1B3F'/%3E%3C/svg%3E") center bottom / 100% auto no-repeat; transform-origin: 50% 100%;
  animation: yctc-peek 4.8s ease-in-out infinite;
}
/* Trẻ lớn: một cây bút chì nằm trên mép khung, không chuyển động */
#yct:not(.pc-nho) #kidPanel .cp-head::before {
  content: ""; position: absolute; top: -16px; right: 30px; width: 74px; height: 16px; pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 96 20'%3E %3Crect x='2' y='4' width='12' height='12' rx='3.5' fill='%23FBD3DA' stroke='%230B1B3F' stroke-width='2'/%3E %3Crect x='13' y='4' width='8' height='12' fill='%23D5E3FA' stroke='%230B1B3F' stroke-width='2'/%3E %3Crect x='20' y='4' width='54' height='12' fill='%239CC4FD' stroke='%230B1B3F' stroke-width='2'/%3E %3Cpath d='M23 10H71' stroke='%23E7F0FE' stroke-width='2' stroke-linecap='round'/%3E %3Cpath d='M74 4L91 10L74 16Z' fill='%23fff' stroke='%230B1B3F' stroke-width='2' stroke-linejoin='round'/%3E %3Cpath d='M85.5 8L91 10L85.5 12Z' fill='%230B1B3F'/%3E%3C/svg%3E") center / 100% 100% no-repeat; transform: rotate(-3deg);
}
#yct:not(.pc-nho) #kidPanel .l-card { transition: transform .18s cubic-bezier(.34, 1.56, .64, 1), border-color .15s, box-shadow .18s; }
#yct:not(.pc-nho) #kidPanel .l-card:hover { transform: translateY(-2px); }
/* Chưa chọn cổng: bàn tay nhỏ chỉ lên hai cổng */
#yct #kidPanel > p.muted:only-child::before { content: "\1F446"; display: inline-block; margin-right: 8px; animation: yctc-point 1.8s ease-in-out infinite; }

/* ---- 8. Trẻ nhỏ: để thẻ bài nảy nghiêng khi rê chuột (hiệu ứng hiện dần cũ giữ transform nên chặn mất), nút Vào học lắc nhẹ ---- */
#yct.pc-nho #kidPanel .l-grid > .l-card { animation-fill-mode: backwards; }
#yct.pc-nho #kidPanel .l-card:hover .l-chip.vao { animation: yctc-wiggle .55s ease-in-out 1; }
#yct.pc-nho #kidPanel .cp-head .btn:hover { animation: yctc-wiggle .55s ease-in-out 1; }

/* ---- 9. Đầu trang khi đang mở tab YCT: vài ngôi sao và vầng trăng nhỏ ở hai góc nền xanh đậm ---- */
@media (min-width: 900px) {
  body.yct-cartoon-mode .pagehead::before {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 170 90'%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' transform='translate(14 14) scale(.8)' fill='%23fff' opacity='.85'/%3E %3Ccircle cx='72' cy='16' r='2.2' fill='%23fff' opacity='.7'/%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' transform='translate(118 44) scale(.55)' fill='%239CC4FD'/%3E %3Ccircle cx='46' cy='70' r='1.8' fill='%239CC4FD'/%3E%3Ccircle cx='150' cy='12' r='1.5' fill='%23fff' opacity='.6'/%3E%3C/svg%3E") left 3% top 14px / 170px auto no-repeat, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 170 90'%3E %3Cpath d='M128 10a20 20 0 1 0 22 30a16 16 0 1 1-22-30z' fill='%23E7F0FE' opacity='.9'/%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' transform='translate(40 30) scale(.62)' fill='%23fff' opacity='.85'/%3E %3Ccircle cx='18' cy='14' r='2' fill='%239CC4FD'/%3E%3Ccircle cx='92' cy='70' r='1.8' fill='%23fff' opacity='.7'/%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' transform='translate(84 6) scale(.42)' fill='%239CC4FD'/%3E%3C/svg%3E") right 4% top 10px / 170px auto no-repeat;
    animation: yctc-glow 3.6s ease-in-out infinite;
  }
}

/* ---- 10. Điện thoại: thu nhỏ trang trí cho khỏi chạm chữ ---- */
@media (max-width: 720px) {
  #yct > section { padding-bottom: 48px !important; }
  #yct > section::after { height: 30px; }
  #yct .yct2-head h2 { font-size: 25px; }
  #yct .yct2-head h2::after { width: 112px; height: 9px; }
  #yct .yct2-head::after {
    top: -6px; right: 0; width: 84px; height: 44px;
    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='%23FBD3DA' stroke='%23F2A7B5' stroke-width='1.4' stroke-linejoin='round'/%3E%3C/svg%3E") 0 4px / 12px 12px no-repeat, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -6 124 70'%3E%3Cpath d='M22 58 A16 16 0 0 1 20 26 A20 20 0 0 1 52 14 A26 26 0 0 1 98 24 A17 17 0 0 1 100 58 Z' fill='%23fff' stroke='%23BBD4FB' stroke-width='3' stroke-linejoin='round'/%3E %3Ccircle cx='50' cy='38' r='3' fill='%230B1B3F'/%3E%3Ccircle cx='74' cy='38' r='3' fill='%230B1B3F'/%3E %3Ccircle cx='42' cy='46' r='4' fill='%23F9B8C3' opacity='.8'/%3E%3Ccircle cx='82' cy='46' r='4' fill='%23F9B8C3' opacity='.8'/%3E %3Cpath d='M56 45 Q62 51 68 45' fill='none' stroke='%230B1B3F' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E") 16px 2px / 64px auto no-repeat;
  }
  #yct .yct2-name { font-size: 19px; }
  #yct #kidPanel .cp-head h3 { font-size: 21px; }
  #yct.pc-nho #kidLvBar { margin-bottom: 30px; }
  #yct.pc-nho #kidPanel::before { top: -28px; right: 18px; width: 42px; height: 29px; }
  #yct:not(.pc-nho) #kidPanel .cp-head::before { right: 18px; width: 62px; height: 14px; top: -15px; }
}
@media (max-width: 380px) {
  #yct .yct2-head::after { width: 62px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -6 124 70'%3E%3Cpath d='M22 58 A16 16 0 0 1 20 26 A20 20 0 0 1 52 14 A26 26 0 0 1 98 24 A17 17 0 0 1 100 58 Z' fill='%23fff' stroke='%23BBD4FB' stroke-width='3' stroke-linejoin='round'/%3E %3Ccircle cx='50' cy='38' r='3' fill='%230B1B3F'/%3E%3Ccircle cx='74' cy='38' r='3' fill='%230B1B3F'/%3E %3Ccircle cx='42' cy='46' r='4' fill='%23F9B8C3' opacity='.8'/%3E%3Ccircle cx='82' cy='46' r='4' fill='%23F9B8C3' opacity='.8'/%3E %3Cpath d='M56 45 Q62 51 68 45' fill='none' stroke='%230B1B3F' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E") 0 2px / 58px auto no-repeat; }
}

@keyframes yctc-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
@keyframes yctc-drift { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(10px); } }
@keyframes yctc-bob { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-9px) rotate(1.2deg); } }
@keyframes yctc-wiggle { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-6deg); } 75% { transform: rotate(6deg); } }
@keyframes yctc-twinkle { 0%, 100% { transform: scale(1) rotate(0); } 50% { transform: scale(1.18) rotate(16deg); } }
@keyframes yctc-peek { 0%, 70%, 100% { transform: translateY(0); } 78% { transform: translateY(5px); } 88% { transform: translateY(-2px); } }
@keyframes yctc-point { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
@keyframes yctc-glow { 0%, 100% { opacity: 1; } 50% { opacity: .55; } }

/* Máy bật giảm chuyển động: tắt mọi chuyển động thêm ở file này, trang trí đứng yên */
@media (prefers-reduced-motion: reduce) {
  #yct .yct2-head::after, #yct > section::before, #yct > section > .wrap::before,
  #yct #kidLvBar .lv-btn.on::after, #yct #kidPanel::before, #yct #kidPanel > p.muted:only-child::before,
  #yct .yct2-gate .yct2-ic svg, #yct #kidPanel .l-chip.vao, #yct #kidPanel .cp-head .btn,
  body.yct-cartoon-mode .pagehead::before { animation: none !important; }
  #yct .yct2-gate, #yct .yct2-go, #yct #kidLvBar .lv-btn, #yct #kidPanel .l-card { transition: none !important; }
  #yct .yct2-gate:hover, #yct .yct2-gate:hover .yct2-go, #yct #kidLvBar .lv-btn:hover, #yct #kidPanel .l-card:hover { transform: none !important; }
}